* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #040509;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  cursor: none;
}
body {
  background:
    radial-gradient(circle at 16% 18%, rgba(14,165,233,.12), transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(168,85,247,.14), transparent 36%),
    linear-gradient(135deg, #040509, #080917 60%, #07040d);
}
.wall-wrapper {
  width: 100vw;
  height: 100vh;
  padding: 10px 272px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.commands-bar {
  height: 34px;
  flex: 0 0 34px;
  border-radius: 14px;
  background: rgba(10,12,18,.88);
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  position: relative;
}
.commands-track {
  position: absolute;
  white-space: nowrap;
  line-height: 34px;
  font-size: 13px;
  font-weight: 950;
  animation: marquee 36s linear infinite;
}
.commands-track span { color: #38bdf8; }
@keyframes marquee { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.left-hud {
  position: fixed;
  right: 10px;
  top: 52px;
  bottom: 10px;
  width: 252px;
  z-index: 30;
  display: grid;
  grid-template-rows: auto auto minmax(120px,1fr) auto auto auto auto auto;
  gap: 7px;
  overflow: hidden;
}
.hud-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(15,23,42,.92), rgba(5,7,13,.92));
  border: 1px solid rgba(56,189,248,.16);
  box-shadow: inset 0 0 20px rgba(56,189,248,.025);
  overflow: hidden;
}
.hud-card h3 {
  margin: 0 0 7px;
  font-size: 10px;
  color: #93c5fd;
  letter-spacing: .9px;
  text-transform: uppercase;
}
.hud-grow { overflow: hidden; }
.wall-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.counter-card, .raid-card {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(125deg, rgba(14,165,233,.065), rgba(168,85,247,.055)),
    rgba(8,9,14,.86);
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(0);
}
.counter-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: #181b24;
}
.card-main { min-width: 0; padding-right: 34px; }
.name {
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subs {
  font-size: 25px;
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.7px;
}
.meta {
  color: #94a3b8;
  font-size: 9px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-badges {
  position: absolute;
  top: 6px;
  right: 7px;
  display: flex;
  gap: 5px;
  align-items: center;
  z-index: 4;
}
.flag-badge { font-size: 17px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)); }
.live-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  font-size: 8px;
  font-weight: 950;
  box-shadow: 0 0 14px rgba(239,68,68,.38);
}
.empty-card { opacity: .55; }
.empty-card .name { color: #cbd5e1; }
.empty-card .meta { font-size: 10px; }
.raid-card {
  grid-column: 2 / span 3;
  grid-row: 3 / span 2;
  padding: 14px;
  border-color: rgba(56,189,248,.55);
  background:
    radial-gradient(circle at 22% 55%, rgba(56,189,248,.2), transparent 32%),
    radial-gradient(circle at 72% 50%, rgba(168,85,247,.18), transparent 36%),
    rgba(7,8,13,.96);
}
.raid-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}
.raid-top span {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(56,189,248,.16);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.raid-top b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #22c55e;
  font-size: 10px;
}
.raid-content {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
}
.raid-avatar {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid #38bdf8;
  box-shadow: 0 0 24px rgba(56,189,248,.28);
}
.raid-name {
  font-size: 27px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.raid-subs {
  margin-top: 5px;
  font-size: 39px;
  line-height: .9;
  font-weight: 950;
}
.raid-subs span { font-size: 15px; color: #cbd5e1; }
.raid-progress {
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.raid-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #a855f7);
}
.raid-meta {
  margin-top: 8px;
  display: flex;
  gap: 9px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
}
.king-user, .small-user {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  align-items: center;
}
.king-user img, .small-user img {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
}
.king-user strong, .small-user strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.king-user span, .small-user span, .small-user em {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#leaderboard { overflow: hidden; }
.rank-item {
  display: grid;
  grid-template-columns: 24px 30px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 7px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.05);
}
.rank-pos { font-size: 12px; text-align: center; }
.rank-avatar { width: 28px; height: 28px; border-radius: 10px; object-fit: cover; }
.rank-name { min-width:0; font-size: 11px; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-item b { color: #facc15; font-size: 10px; }
.timer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 5px;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.timer-row span { font-size: 11px; color: #cbd5e1; font-weight: 900; }
.timer-row b { font-size: 11px; color: #38bdf8; }
.trend-row {
  display: grid;
  grid-template-columns: 18px 28px 1fr;
  gap: 7px;
  align-items: center;
  padding: 6px;
  margin-bottom: 5px;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.trend-row > b { color: #38bdf8; font-size: 11px; text-align:center; }
.trend-row img { width: 27px; height: 27px; border-radius: 9px; object-fit: cover; }
.trend-row span { min-width:0; font-size: 10px; font-weight: 900; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.trend-row small { display:block; color:#94a3b8; font-size:9px; }
.ai-message {
  padding: 8px;
  border-radius: 10px;
  background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.14);
  color: #dbeafe;
  font-size: 11px;
  line-height: 1.3;
}
.empty-text { color:#94a3b8; font-size:11px; padding:4px 0; }
.streak-badge {
  position:absolute;
  left:7px;
  bottom:6px;
  padding: 3px 7px;
  border-radius:999px;
  background:rgba(239,68,68,.86);
  font-size:9px;
  font-weight:950;
}
.rarity-rare { border-color: rgba(56,189,248,.36); box-shadow: inset 0 0 18px rgba(56,189,248,.08); }
.rarity-epic { border-color: rgba(168,85,247,.48); box-shadow: inset 0 0 20px rgba(168,85,247,.12); }
.rarity-legendary { border-color: rgba(250,204,21,.5); box-shadow: 0 0 18px rgba(250,204,21,.18), inset 0 0 18px rgba(250,204,21,.1); }
.rarity-mythic { border-color: rgba(244,63,94,.58); box-shadow: 0 0 22px rgba(244,63,94,.24), inset 0 0 22px rgba(168,85,247,.16); }
.new-user { animation: joinPop .8s cubic-bezier(.2,1,.2,1) both; }
.winner-glow { border-color: rgba(250,204,21,.64)!important; box-shadow: 0 0 24px rgba(250,204,21,.3)!important; }
@keyframes joinPop { 0%{ transform:scale(.85) translateY(8px); opacity:0; filter:brightness(2);} 65%{transform:scale(1.035); opacity:1;} 100%{transform:scale(1); filter:brightness(1);} }
.audio-unlock {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 10000;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #38bdf8, #a855f7);
  color: white;
  font-weight: 950;
}
.audio-unlock.hidden { display:none; }
.blur { filter: blur(8px); }
/* Event overlay */
.global-event-overlay, .winner-overlay, .duel-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9997;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  pointer-events: none;
  overflow: hidden;
}
.global-event-overlay.hidden, .winner-overlay.hidden, .duel-overlay.hidden { display:none; }
.global-event-overlay:before {
  content:'';
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.35), transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(168,85,247,.32), transparent 22%);
  opacity:.35;
  animation:eventBgMove 5.8s ease-in-out infinite alternate;
}
.global-event-box {
  position:relative;
  z-index:2;
  width:min(740px,86vw);
  padding:34px;
  border-radius:32px;
  text-align:center;
  background:rgba(8,8,14,.98);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 160px rgba(0,0,0,.7);
  animation:eventPop .45s cubic-bezier(.2,1,.2,1) both;
}
.global-event-icon { font-size:74px; margin-bottom:12px; }
.global-event-title { font-size:34px; font-weight:950; margin-bottom:12px; }
.global-event-text { font-size:23px; font-weight:850; color:#e5e7eb; line-height:1.35; }
.global-event-text b { color:#38bdf8; }
.event-box-chest { background: radial-gradient(circle at 50% 45%, rgba(250,204,21,.28), transparent 38%), rgba(8,8,14,.98); border-color: rgba(250,204,21,.45); }
.event-box-slot { background: radial-gradient(circle at 50% 45%, rgba(168,85,247,.32), transparent 38%), rgba(8,8,14,.98); border-color: rgba(168,85,247,.5); }
.event-box-rare { background: radial-gradient(circle at 50% 45%, rgba(244,114,182,.34), transparent 38%), rgba(8,8,14,.98); border-color: rgba(244,114,182,.55); }
.chest-anim { position:relative; height:110px; display:grid; place-items:center; }
.chest-base { font-size:78px; animation:chestShake 1s ease-in-out infinite; filter:drop-shadow(0 0 26px rgba(250,204,21,.55)); }
.chest-lid { position:absolute; top:6px; font-size:42px; animation:chestOpen 1.2s ease-in-out infinite alternate; }
.coins { position:absolute; top:0; font-size:28px; animation:coinsFly 1.2s ease-in-out infinite; }
.slot-anim { display:flex; justify-content:center; gap:16px; margin:10px 0 18px; }
.slot-anim span { width:104px; height:104px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); font-size:54px; animation:slotReel .9s cubic-bezier(.2,1,.2,1) both; }
.slot-anim span:nth-child(2){ animation-delay:.16s; } .slot-anim span:nth-child(3){ animation-delay:.32s; }
.rare-anim { font-size:88px; animation:rarePulse 1.1s ease-in-out infinite alternate; filter:drop-shadow(0 0 32px rgba(244,114,182,.75)); }
.rare-particles { font-size:26px; color:#f9a8d4; letter-spacing:12px; animation:particlesFloat 1.4s ease-in-out infinite alternate; }
@keyframes eventBgMove { from{transform:translate(-2%,-2%) scale(1);} to{transform:translate(2%,2%) scale(1.08);} }
@keyframes eventPop { from{opacity:0; transform:scale(.82) translateY(20px); filter:brightness(2);} to{opacity:1; transform:scale(1); filter:brightness(1);} }
@keyframes chestOpen { from{transform:translateY(8px) rotate(0); opacity:.7;} to{transform:translateY(-38px) rotate(-14deg); opacity:1;} }
@keyframes chestShake { 0%,100%{transform:rotate(-2deg) scale(1);} 50%{transform:rotate(2deg) scale(1.05);} }
@keyframes coinsFly { 0%{transform:translateY(40px) scale(.5); opacity:0;} 35%{opacity:1;} 100%{transform:translateY(-40px) scale(1.15); opacity:0;} }
@keyframes slotReel { 0%{transform:translateY(-80px) rotateX(80deg) scale(.65); opacity:0; filter:blur(8px);} 60%{transform:translateY(10px) scale(1.08); opacity:1; filter:blur(0);} 100%{transform:translateY(0) scale(1);} }
@keyframes rarePulse { from{transform:scale(.95) rotate(-4deg);} to{transform:scale(1.12) rotate(4deg);} }
@keyframes particlesFloat { from{transform:translateY(10px); opacity:.55;} to{transform:translateY(-12px); opacity:1;} }
/* winner */
.winner-overlay { z-index:9998; background: radial-gradient(circle at 50% 45%, rgba(168,85,247,.22), transparent 35%), rgba(3,5,10,.78); }
.winner-box { text-align:center; animation:winnerPop .55s cubic-bezier(.2,1,.2,1) both; }
.winner-badge { display:inline-block; padding:9px 18px; border-radius:999px; background:rgba(168,85,247,.25); border:1px solid rgba(168,85,247,.45); color:#c4b5fd; font-size:13px; font-weight:950; letter-spacing:1px; margin-bottom:18px; }
#winnerAvatar { width:150px; height:150px; border-radius:50%; object-fit:cover; border:5px solid rgba(168,85,247,.85); box-shadow:0 0 0 10px rgba(168,85,247,.12), 0 0 55px rgba(168,85,247,.55); animation:winnerAvatarPulse 1.4s ease-in-out infinite alternate; }
#winnerName { margin-top:24px; font-size:54px; line-height:1; font-weight:950; }
#winnerStats { margin-top:12px; color:#cbd5e1; font-size:18px; font-weight:800; }
@keyframes winnerPop { from{opacity:0; transform:scale(.78) translateY(24px); filter:brightness(2);} to{opacity:1; transform:scale(1); filter:brightness(1);} }
@keyframes winnerAvatarPulse { from{transform:scale(1);} to{transform:scale(1.06);} }
/* duel */
.duel-overlay { z-index:9999; }
.duel-box { width:920px; max-width:90vw; padding:26px; border-radius:28px; background:radial-gradient(circle at 20% 50%, rgba(56,189,248,.28), transparent 35%), radial-gradient(circle at 80% 50%, rgba(168,85,247,.25), transparent 35%), rgba(8,8,14,.98); border:1px solid rgba(255,255,255,.16); }
.duel-title { text-align:center; font-size:28px; font-weight:950; margin-bottom:22px; }
.duel-arena { display:grid; grid-template-columns:1fr 170px 1fr; gap:20px; align-items:center; }
.duel-player { position:relative; text-align:center; padding:18px; border-radius:24px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.12); transition:.45s ease; }
.duel-player img { width:128px; height:128px; border-radius:26px; object-fit:cover; }
.duel-player div { margin-top:12px; font-size:21px; font-weight:950; }
.duel-weapon { position:relative; height:160px; display:grid; place-items:center; animation:weaponIdle .8s ease-in-out infinite alternate; }
.duel-weapon i { font-style:normal; font-size:68px; }
.duel-weapon span { position:absolute; right:18px; top:68px; font-size:44px; }
.duel-overlay.aim-left .duel-weapon { transform:scaleX(-1); }
.duel-overlay.fire .duel-weapon { animation:weaponFire .16s ease 5; }
.duel-count { display:inline-grid; place-items:center; width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#a855f7); font-size:52px; font-weight:950; }
.duel-result { margin-top:22px; text-align:center; font-size:26px; font-weight:950; }
.duel-player.loser { opacity:.35; filter:grayscale(1); transform:scale(.92) rotate(-2deg); }
.duel-player.loser:after { content:'💀'; position:absolute; inset:0; display:grid; place-items:center; font-size:82px; background:rgba(0,0,0,.45); border-radius:24px; }
.duel-player.winner { border-color:rgba(56,189,248,.85); box-shadow:0 0 42px rgba(56,189,248,.38); transform:scale(1.04); }
@keyframes weaponIdle { from{transform:translateY(-5px) rotate(-2deg);} to{transform:translateY(5px) rotate(2deg);} }
@keyframes weaponFire { 50%{transform:translateX(-16px) scale(1.09); filter:brightness(1.8);} }
@media (max-width: 1100px) {
  .wall-wrapper { padding-right: 238px; }
  .left-hud { width: 225px; }
  .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raid-card { grid-column: 2 / span 2; }
}

/* CARTES PLUS LISIBLE */
.counter-card {
  min-height: 78px !important;
  padding: 9px 10px !important;
  grid-template-columns: 58px minmax(0, 1fr) 42px !important;
}

.avatar {
  width: 50px !important;
  height: 50px !important;
}

.name {
  font-size: 15px !important;
  max-width: 100% !important;
}

.subs {
  font-size: 30px !important;
}

.meta {
  font-size: 10px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-badges {
  top: 7px !important;
  right: 7px !important;
}

.flag-badge {
  font-size: 16px !important;
}

.live-badge {
  font-size: 8px !important;
  padding: 3px 6px !important;
}

.streak-badge {
  left: 8px !important;
  bottom: 5px !important;
  font-size: 9px !important;
  padding: 3px 7px !important;
}

.winner-overlay {
  background:
    radial-gradient(circle at 50% 48%, rgba(168,85,247,.24), transparent 34%),
    rgba(3, 5, 10, .82) !important;
}

#winnerAvatar {
  width: 170px !important;
  height: 170px !important;
}

#winnerName {
  font-size: 62px !important;
}

#winnerStats {
  font-size: 20px !important;
}