/* ============================================================
   MINI GAMES — /games page + sidebar carousel
   ============================================================ */

.games-hero{padding:38px 0 18px;}
.games-hero .gh-in{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.games-hero .gh-ic{
  width:64px; height:64px; border-radius:20px; flex-shrink:0;
  background:linear-gradient(150deg,rgba(0,229,255,.16),rgba(0,229,255,.04));
  border:1.5px solid rgba(0,229,255,.28);
  display:flex; align-items:center; justify-content:center; font-size:30px;
}
.games-hero h1{font-size:28px; font-weight:900; margin-bottom:6px;}
.games-hero p{color:var(--gray); font-size:14px; max-width:560px;}

.games-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px; padding-bottom:60px;
}
.game-card{
  position:relative; overflow:hidden;
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; gap:14px; padding:22px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.game-card:hover{border-color:rgba(0,229,255,.30); transform:translateY(-3px);}
.game-card.soon{opacity:.85;}
.game-thumb{
  height:130px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:52px; background:radial-gradient(circle at 50% 30%,rgba(0,229,255,.18),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
}
.game-name{font-weight:900; font-size:17px;}
.game-desc{color:var(--gray); font-size:13px; line-height:1.7;}
.game-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto;}
.g-badge{
  font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--gray);
}
.g-badge.live{background:rgba(0,229,255,.12); color:var(--cyan);}
.g-badge.live::before{content:"●"; margin-inline-end:6px; font-size:9px;}

/* --- sidebar / menu carousel --- */
.menu-games-car{
  display:flex; gap:10px; overflow-x:auto; padding:4px 2px 8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.menu-games-car::-webkit-scrollbar{display:none;}
.mg-item{
  flex:0 0 auto; width:118px; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px;
  padding:12px 10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.mg-item:hover{border-color:rgba(0,229,255,.35); background:rgba(0,229,255,.06);}
.mg-ic{font-size:22px;}
.mg-name{font-size:12px; font-weight:800; line-height:1.3;}
.mg-status{font-size:10px; font-weight:800; color:var(--cyan);}

@media(max-width:560px){
  .games-hero .gh-in{flex-direction:column; text-align:center;}
  .games-grid{grid-template-columns:1fr;}
}

/* ============================================================
   GX BLAST — 8x8 block puzzle (dedicated full-screen layout)
   ============================================================ */
.blast-fs{
  height:100dvh; max-height:100dvh; width:100%;
  display:flex; flex-direction:column; overflow:hidden;
  overscroll-behavior:none; touch-action:none;
  background:#4C5799;
}


/* ultra-thin chrome: only the way back to the arena + perf switch */
.blast-bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:6px 12px;
}
.blast-back{
  color:var(--gray); font-weight:800; font-size:12px; text-decoration:none;
  border:1.5px solid var(--border); border-radius:999px; padding:5px 12px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.blast-back:hover{border-color:rgba(0,229,255,.4); color:var(--cyan);}
.blast-perf{
  font:inherit; font-size:11px; font-weight:800; cursor:pointer;
  color:var(--gray); background:transparent;
  border:1.5px solid var(--border); border-radius:999px; padding:5px 12px;
}
.blast-perf.on{color:#c6ff3d; border-color:rgba(198,255,61,.45); background:rgba(198,255,61,.08);}

.blast-stage{
  flex:1 1 auto; min-height:0; display:flex; overflow:hidden;
  padding:0 10px 8px; align-items:stretch; justify-content:center;
}
.blast-stage.measuring{visibility:hidden;}
.blast-play{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:6px;
}
.blast-column{max-width:100%; margin:0 auto;}
.blast-panel,.blast-panel-inline{display:none;}

.blast-area{flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:flex-start; justify-content:center;}
.blast-wrap{position:relative; max-width:100%; max-height:100%;}


/* ---- HUD ---- */
.blast-hud{
  direction:ltr;
  width:100%; margin:0 auto 4px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
}
.hud-main{display:flex; flex-direction:column; align-items:center; line-height:1;}
.hud-lbl{font-size:10px; font-weight:800; color:var(--gray); letter-spacing:.14em; text-transform:uppercase;}
.hud-val{
  font-size:clamp(26px,4.4vh,42px); font-weight:900; margin-top:3px; letter-spacing:-.02em;

  background:linear-gradient(90deg,#22e8ff,#b45cff 55%,#ff3d8b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hud-side{
  display:flex; flex-direction:column; gap:2px; align-items:center;
  padding:6px 12px; border:1.5px solid var(--border); border-radius:14px;
  background:rgba(255,255,255,.03);
}
.blast-hud .hud-side:first-child{justify-self:start;}
.blast-hud .hud-side:last-child{justify-self:end;}
.hud-side span{font-size:10px; font-weight:800; color:var(--gray); letter-spacing:.06em; text-transform:uppercase;}
.hud-side b{font-size:15px; font-weight:900; color:rgba(255,255,255,.72);}
.hud-streak.hot{border-color:rgba(255,138,31,.5); background:linear-gradient(160deg,rgba(255,138,31,.16),rgba(255,45,120,.10));}
.hud-streak.hot b{color:#ffb02e;}
.hud-streak.hot.heat-3{border-color:rgba(255,110,31,.6);}
.hud-streak.hot.heat-4 b,.hud-streak.hot.heat-5 b{color:#ff8a1f;}
.hud-streak.hot.heat-5,.hud-streak.hot.heat-6{border-color:rgba(255,61,139,.62); background:linear-gradient(160deg,rgba(255,138,31,.24),rgba(255,45,120,.18));}
.hud-streak.hot.heat-6 b,.hud-streak.hot.heat-7 b,.hud-streak.hot.heat-8 b{color:#ff5a5a;}
.hud-streak.hot.heat-7,.hud-streak.hot.heat-8{
  border-color:rgba(255,45,120,.85);
  background:linear-gradient(160deg,rgba(255,80,31,.34),rgba(255,45,120,.28));
}
.hud-streak.broke{animation:streakBreak .45s var(--ease) 1;}
@keyframes streakBreak{
  0%{transform:scale(1.06); opacity:1;}
  30%{transform:scale(.94); opacity:.45;}
  100%{transform:scale(1); opacity:1;}
}

/* ---- board: ONE solid panel, grid drawn as 1px separator lines ---- */
.blast-board{
  position:relative; width:max-content; height:max-content; box-sizing:content-box;
  display:grid; grid-template-columns:repeat(8,var(--board-cell)); grid-template-rows:repeat(8,var(--board-cell));
  gap:var(--board-gap); padding:0; touch-action:none; user-select:none;
  border-radius:16px;
  border:var(--board-pad) solid #171E3F;
  background:#39427A;
  /* nothing may ever be painted outside the board frame */
  overflow:hidden;
}

.blast-board.danger{border-color:#241d3a;}

/* empty cell = deep navy well */
.bb-cell{
  position:relative; box-sizing:border-box;
  background:#171E3F; border:0; border-radius:2px;
}
/* occupied cell = chamfered glossy cube (colours come from inline style) */
.bb-cell.filled{
  border-width:var(--bevel,4px); border-radius:5px;
}

/* in-grid preview: the target cells themselves, tinted with the piece colour */
.bb-cell.pv-ok{
  opacity:.88;
  outline:2px solid rgba(255,255,255,.72);
  outline-offset:-3px;
}
.bb-cell.pv-no{
  opacity:.5;
  outline:2px solid rgba(255,90,105,.78);
  outline-offset:-3px;
}



.bb-cell.popped{animation:cellPop .2s var(--ease) 1;}
@keyframes cellPop{0%{opacity:.55;}60%{opacity:.85;}100%{opacity:1;}}

.bb-cell.clearing{animation:cellClear .26s var(--ease) both;}
@keyframes cellClear{
  0%{opacity:1; transform:scale(1);}
  100%{opacity:0; transform:scale(.82);}
}

/* dragged piece: fixed at 0,0 and moved with translate3d only */
.bb-ghost{
  position:fixed; left:0; top:0; z-index:60; display:grid; gap:0;
  pointer-events:none; opacity:.94; will-change:transform;
}
.bg-cell{box-sizing:border-box;}
.bg-cell.on{border-width:var(--bevel,4px); border-radius:5px;}

/* ---- tray ---- */
.blast-tray{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:10px; touch-action:none; user-select:none;
  border-radius:16px; border:0; background:transparent;
}
.bt-slot{
  height:var(--tray-box, calc(var(--tc,24px) * 4));
  min-height:var(--tray-box, calc(var(--tc,24px) * 4));
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:transparent;
  border:0;
  transition:opacity .2s var(--ease);
}
.bt-slot.dragging{opacity:0;}
.bt-slot.dead{opacity:.28;}
.bt-piece{display:grid; gap:2px; cursor:grab; touch-action:none;}
.bt-piece:active{cursor:grabbing;}
.bt-piece.enter{animation:pieceIn .26s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms);}
@keyframes pieceIn{0%{opacity:0; transform:translateY(10px) scale(.82);}100%{opacity:1; transform:none;}}
.bt-cell{box-sizing:border-box;}
.bt-cell.on{border-width:var(--bevel,3px); border-radius:5px;}


/* ---- floating score / banners ---- */
.bb-pop{
  position:absolute; z-index:40; transform:translate(-50%,-50%); pointer-events:none;
  font-weight:900; color:var(--lime); white-space:nowrap;
  animation:bbPop .9s var(--ease) forwards;
}
.bb-pop.s1{font-size:15px;}
.bb-pop.s2{font-size:22px; color:#ffc422;}
.bb-pop.s3{font-size:30px; color:#ff3d8b;}
@keyframes bbPop{
  0%{opacity:0; transform:translate(-50%,-30%) scale(.8);}
  20%{opacity:1; transform:translate(-50%,-60%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-150%) scale(1);}
}

.bb-banner{
  position:absolute; z-index:45; inset-inline:0; top:46%; left:0; right:0;
  text-align:center; pointer-events:none;
  font-size:clamp(22px,6vw,36px); font-weight:900; letter-spacing:.01em;
  background:linear-gradient(180deg,#FFE49A,#F0C040 55%,#E8862E);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bannerUp 1s var(--ease) forwards;
}
.bb-banner.b2{font-size:clamp(26px,7vw,44px);}
.bb-banner.b3{font-size:clamp(30px,8vw,52px);}
.bb-banner.b4{font-size:clamp(34px,9vw,60px);}
.bb-banner.clean{background:linear-gradient(180deg,#BFF3B6,#52B84E 60%,#F0C040); -webkit-background-clip:text; background-clip:text;}
.bb-banner i{
  display:block; margin-top:4px; font-style:normal;
  font-size:.44em; font-weight:900;
  background:linear-gradient(180deg,#FFB56B,#D9483F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@keyframes bannerUp{
  0%{opacity:0; transform:translateY(20px) scale(.8);}
  22%{opacity:1; transform:translateY(0) scale(1.05);}
  55%{opacity:1; transform:translateY(-8px) scale(1);}
  100%{opacity:0; transform:translateY(-70px) scale(.96);}
}

/* ---- game over ---- */
.blast-over{
  position:absolute; inset:0; z-index:50; border-radius:20px;
  display:flex; align-items:center; justify-content:center; padding:14px;
  background:rgba(6,9,20,.9);
}
.bo-card{
  position:relative; width:100%; max-width:330px; text-align:center; padding:22px 20px;
  border-radius:20px; border:1.5px solid rgba(0,229,255,.28); background:var(--card);
  animation:pieceIn .3s var(--ease) both;
}
.bo-card.record{border-color:rgba(255,196,34,.6);}
.bo-ribbon{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:10px;
  padding:6px 14px; border-radius:999px; font-size:12px; font-weight:900;
  color:#0b1020; background:linear-gradient(90deg,#ffc422,#ff8a1f);
}
.bo-ribbon i{font-style:normal;}
.bo-ic{font-size:34px;}
.bo-card h2{font-size:20px; font-weight:900; margin:6px 0 4px;}
.bo-why{margin:2px 0 10px; font-size:13px; opacity:.75;}
.bo-score{
  margin:12px 0 8px; padding:12px; border-radius:14px; background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:4px;
}
.bo-score span{font-size:11px; font-weight:800; color:var(--gray);}
.bo-score b{
  font-size:42px; font-weight:900; line-height:1;
  background:linear-gradient(90deg,#22e8ff,#b45cff 60%,#ff3d8b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bo-cmp{color:var(--gray); font-size:12px; margin-bottom:12px;}
.bo-btn{width:100%; justify-content:center;}
.bo-link{display:inline-block; margin-top:10px; font-size:12px; font-weight:800; color:var(--gray); text-decoration:none;}
.bo-link:hover{color:var(--cyan);}

/* ---- move timer: thin bar glued to the top edge of the board ---- */
.blast-timer{
  position:relative; width:100%; margin:0 auto -2px; padding:0 2px 4px;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  /* locked box: 6px bar + 2px gap + 14px number row + 4px padding */
  height:26px; min-height:26px; max-height:26px; flex:0 0 26px; box-sizing:border-box;
}

.blast-timer i{
  display:block; width:100%; height:6px; flex:0 0 6px; border-radius:999px 999px 0 0;
  transform-origin:left center; will-change:transform;
  background:linear-gradient(90deg,#3f8f7e,#4f9fc4);
  transition:background .25s linear;
}
.blast-timer b{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-size:12px; font-weight:800; color:#9fb4c8;
  /* reserve room for the widest value ("10.0s") so nothing ever shifts */
  display:block; flex:0 0 14px; height:14px; line-height:14px;
  min-width:5ch; text-align:right; white-space:nowrap; overflow:hidden;
  transition:color .25s linear;
}
.blast-timer.low i{background:linear-gradient(90deg,#c2814f,#c9566f);}
.blast-timer.urgent i{background:linear-gradient(90deg,#d34a5f,#e06a6a);}
.blast-timer.urgent b{color:#ff6b81;}
.blast-timer.low b{color:#e0a2b0;}

/* ---- speed-up notice ---- */
.bb-speed{
  position:absolute; z-index:46; left:0; right:0; top:42%;
  text-align:center; pointer-events:none;
  font-size:clamp(14px,3.4vw,19px); font-weight:900; color:#ffc422;
  animation:bannerUp 1.6s var(--ease) forwards;
}

/* logical grid must never mirror in RTL */
.blast-board,.blast-tray,.bt-piece,.bb-ghost{direction:ltr;}

/* ---- wide screens: keep one centred column, just wider ---- */
@media (min-width:1000px){
  .blast-play{max-width:none;}
  .blast-hud{gap:16px;}
}

@media (prefers-reduced-motion:reduce){
  .bb-cell.popped,.bt-piece.enter,.bo-ribbon i,.hud-streak.broke,
  .blast-timer.urgent b,.bb-cell.clearing,.bb-cell.clearing::after{animation:none;}
}


/* ============================================================
   TOURNAMENT HUB — /games
   ============================================================ */
.trn-empty{color:var(--gray); padding:30px 0 70px; font-size:14px;}
.trn-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px; padding-bottom:60px;
}
.trn-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:18px; border-radius:var(--radius-lg);
  background:var(--card); border:1.5px solid var(--border);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.trn-card:hover{transform:translateY(-3px);}
.trn-card.is-live{border-color:rgba(52,231,140,.42); box-shadow:0 0 0 1px rgba(52,231,140,.10) inset;}
.trn-card.is-upcoming{border-color:rgba(59,169,255,.34);}
.trn-card.is-ended{opacity:.62;}

.trn-top{display:flex; align-items:center; gap:12px;}
.trn-ic{
  width:48px; height:48px; flex:0 0 auto; border-radius:14px; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%,rgba(0,229,255,.18),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.08);
}
.trn-titles{min-width:0; flex:1 1 auto;}
.trn-titles h2{font-size:16px; font-weight:900; line-height:1.35; overflow-wrap:anywhere;}
.trn-game{font-size:11px; font-weight:800; color:var(--gray); text-transform:uppercase; letter-spacing:.06em;}

.trn-badge{
  flex:0 0 auto; font-size:11px; font-weight:900; padding:5px 11px; border-radius:999px;
  white-space:nowrap;
}
.trn-badge.b-live{
  color:#0b1020; background:linear-gradient(90deg,#34e78c,#0fd6a5);
  box-shadow:0 0 14px -3px rgba(52,231,140,.7);
}
.trn-badge.b-live::before{content:"●"; margin-inline-end:6px; font-size:9px;}
.trn-badge.b-upcoming{color:#8fd0ff; background:rgba(59,169,255,.14); border:1px solid rgba(59,169,255,.4);}
.trn-badge.b-ended{color:var(--gray); background:rgba(255,255,255,.06);}

.trn-timer{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04);
  border:1px solid var(--border);
}
.trn-timer span{font-size:11px; font-weight:800; color:var(--gray);}
.trn-timer b{font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; direction:ltr;}
.trn-timer.on{border-color:rgba(52,231,140,.32); background:rgba(52,231,140,.08);}
.trn-timer.on b{color:#34e78c;}

.trn-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.trn-stat{
  display:flex; flex-direction:column; gap:3px; padding:10px 12px;
  border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--border);
}
.trn-stat span{font-size:10px; font-weight:800; color:var(--gray); text-transform:uppercase; letter-spacing:.06em;}
.trn-stat b{font-size:18px; font-weight:900;}

.trn-prizes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.trn-prizes li{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.82); line-height:1.5;
}
.trn-prizes i{font-style:normal; font-size:15px;}

.trn-btn{margin-top:auto; width:100%; justify-content:center; text-decoration:none;}
.trn-btn-off{
  cursor:not-allowed; color:var(--gray);
  background:rgba(255,255,255,.05); border:1.5px solid var(--border);
}

@media(max-width:560px){
  .trn-grid{grid-template-columns:1fr;}
  .trn-titles h2{font-size:15px;}
}

/* ============ Tournament entry modal + how-to slides ============ */
.tem-back{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(6,9,24,.78)}
.tem{width:min(520px,100%);max-height:88dvh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;border:1px solid rgba(120,160,255,.22);background:linear-gradient(180deg,#151b3a,#0e1230);
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.tem-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.tem-titles{flex:1;min-width:0}
.tem-titles h3{margin:0;font-size:17px;font-weight:800;color:#eef2ff}
.tem-left{font-size:12.5px;color:#9fb0e0}
.tem-left b{color:#ffd76e;margin-inline-start:6px;font-variant-numeric:tabular-nums}
.tem-x{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#cdd7ff;font-size:20px;line-height:1;cursor:pointer}
.tem-x:hover{background:rgba(255,255,255,.07)}
.tem-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 14px 0}
.tem-tabs button{padding:9px 10px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:#a9b7e6;font-weight:700;font-size:13.5px;cursor:pointer}
.tem-tabs button.on{color:#0b0f24;background:linear-gradient(180deg,#8fd7ff,#4aa8ff);border-color:transparent}
.tem-body{padding:14px;overflow:auto;flex:1}
.tem-foot{padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,.07)}
.tem-start{width:100%;justify-content:center}

.htp{display:flex;flex-direction:column;gap:10px}
.htp-view{overflow:hidden;border-radius:14px;touch-action:pan-y}
.htp-track{display:flex;width:100%;transition:transform .28s ease}
.htp-slide{flex:0 0 100%;text-align:center;padding:6px 10px}
.htp-art{width:100%;max-width:230px;height:auto;display:block;margin:0 auto 10px}
.htp-slide h4{margin:0 0 6px;font-size:16px;font-weight:800;color:#eef2ff}
.htp-slide p{margin:0;font-size:13.5px;line-height:1.7;color:#a9b7e6}
.htp-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.htp-arrow{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#cdd7ff;font-size:18px;cursor:pointer}
.htp-arrow:disabled{opacity:.3;cursor:default}
.htp-dots{display:flex;gap:7px}
.htp-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.22);cursor:pointer;padding:0}
.htp-dot.on{background:#4aa8ff;transform:scale(1.25)}
.htp-skip{align-self:center;background:none;border:0;color:#8fa3d8;font-size:13px;cursor:pointer;text-decoration:underline}
.htp-card{max-width:460px}

.tlb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tlb-list li,.tlb-me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.tlb-list li.t1{border-color:rgba(255,215,110,.45)}
.tlb-list li.t2{border-color:rgba(200,214,255,.35)}
.tlb-list li.t3{border-color:rgba(220,150,90,.4)}
.tlb-rank{min-width:24px;text-align:center;font-weight:800;color:#ffd76e;font-variant-numeric:tabular-nums}
.tlb-av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#232a52;display:grid;place-items:center;font-size:12px;color:#cdd7ff}
.tlb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:#dbe3ff}
.tlb-score{color:#8fd7ff;font-variant-numeric:tabular-nums}
.tlb-me{margin-top:12px;border-color:rgba(120,160,255,.3);background:rgba(74,168,255,.09)}
.tlb-cta{font-size:13px;color:#a9b7e6}
.tlb-empty{text-align:center;color:#8fa3d8;font-size:13.5px;padding:18px 0}

.bo-help{margin-top:8px;background:none;border:0;color:#8fd7ff;font-size:13px;cursor:pointer;text-decoration:underline}


/* ================= Tournament page (/games/t/$id) ================= */
.tpage{padding:26px 0 70px; display:flex; flex-direction:column; gap:16px;}
.tp-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px; border-radius:18px; border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.tp-head.is-live{border-color:rgba(52,231,140,.4);}
.tp-ic{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.05);}
.tp-titles{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:7px; align-items:flex-start;}
.tp-titles h1{font-size:24px; font-weight:900; line-height:1.3;}
.tp-clock{
  display:flex; flex-direction:column; gap:3px; padding:10px 14px; border-radius:14px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08); min-width:180px;
}
.tp-clock span{font-size:11px; font-weight:800; color:var(--gray);}
.tp-clock b{font-size:16px; font-weight:900; unicode-bidi:isolate;}
.tp-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:start;}
.tp-card{
  padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.tp-card h2{font-size:15px; font-weight:900; margin-bottom:10px;}
.tp-side{display:flex; flex-direction:column; gap:14px;}
.tp-prizes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.tp-prizes li{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);}
.tp-prizes i{font-style:normal; font-size:18px;}
.tp-prizes b{display:block; font-size:12px; color:#ffd76e; font-weight:900;}
.tp-prizes span{font-size:13px; color:#cfd8ff; line-height:1.6;}
.tp-winners{margin-top:10px; font-size:12px; color:var(--gray);}
.tp-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.tp-stats div{display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:12px; background:rgba(255,255,255,.04);}
.tp-stats span{font-size:10px; font-weight:800; color:var(--gray); letter-spacing:.05em; text-transform:uppercase;}
.tp-stats b{font-size:19px; font-weight:900;}
.tp-actions{display:flex; gap:10px; flex-wrap:wrap;}
.tp-start{flex:1 1 260px; justify-content:center; font-size:16px; font-weight:900; padding:14px 18px;}
.tp-how{flex:0 0 auto; justify-content:center;}
.tp-howcard{animation:fade-in .25s ease-out;}
@media (max-width:860px){
  .tp-grid{grid-template-columns:1fr;}
  .tp-titles h1{font-size:20px;}
  .tp-clock{width:100%;}
}

/* ---- How-to-play polish ---- */
.htp-stage{position:relative;}
.htp-slide{opacity:.35; transition:opacity .3s ease;}
.htp-slide.on{opacity:1;}
.htp-slide.on .htp-drag{animation:htp-drag 2.6s ease-in-out infinite;}
.htp-slide.on .htp-hand{animation:htp-hand 2.6s ease-in-out infinite;}
.htp-slide.on .htp-fit{animation:htp-fit 2.4s ease-in-out infinite;}
.htp-slide.on .htp-flash{animation:htp-flash 2.4s ease-in-out infinite;}
.htp-slide.on .htp-no{animation:htp-pop 2s ease-in-out infinite;}
.htp-slide.on .htp-bar{animation:htp-bar 3s linear infinite;}
.htp-slide.on .htp-tick{animation:htp-tick 3s linear infinite; transform-origin:60px 24px;}
.htp-slide.on .htp-x{animation:htp-pop 1.8s ease-in-out infinite; transform-origin:60px 76px;}
@keyframes htp-drag{0%,12%{transform:translate3d(0,0,0)}45%,72%{transform:translate3d(0,34px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes htp-hand{0%,12%{opacity:.3}45%,72%{opacity:1}100%{opacity:.3}}
@keyframes htp-fit{0%,30%{opacity:.35}55%,85%{opacity:1}100%{opacity:.35}}
@keyframes htp-flash{0%,60%{opacity:0}70%{opacity:.45}85%,100%{opacity:0}}
@keyframes htp-pop{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes htp-bar{0%{transform:scaleX(1)}100%{transform:scaleX(.05)}}
@keyframes htp-tick{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.htp-bar{transform-origin:14px 44px;}

/* ============================================================
   GX ARENA — esports lobby (visual layer only)
   ============================================================ */
.arena{--ar-neon:#00e5ff;--ar-gold:#ffd76e;--ar-green:#34e78c;}
.arena-hero{
  position:relative; overflow:hidden; border-radius:26px; margin-top:18px;
  padding:34px 26px 30px;
  background:
    radial-gradient(120% 130% at 85% -10%,rgba(124,77,255,.28),transparent 60%),
    radial-gradient(110% 120% at 8% 0%,rgba(0,229,255,.22),transparent 58%),
    linear-gradient(160deg,#0d1230,#070a1c 70%);
  border:1.5px solid rgba(0,229,255,.22);
  box-shadow:0 24px 70px -40px rgba(0,229,255,.55);
}
.arena-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(100% 80% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(100% 80% at 50% 0%,#000 20%,transparent 78%);
  opacity:.5;
}
.ar-fx{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.ar-fx i{
  position:absolute; display:block; border-radius:6px; opacity:.5;
  animation:arFloat linear infinite;
  will-change:transform,opacity;
}
.ar-fx i.coin{border-radius:50%; background:linear-gradient(160deg,#ffe89a,#f0a825); box-shadow:0 0 0 2px rgba(255,232,154,.25) inset;}
@keyframes arFloat{
  0%{transform:translate3d(0,20px,0) rotate(0deg); opacity:0;}
  12%{opacity:.55;}
  88%{opacity:.45;}
  100%{transform:translate3d(0,-150px,0) rotate(180deg); opacity:0;}
}
.ar-in{position:relative; z-index:2; display:flex; flex-direction:column; gap:16px;}
.ar-kicker{
  align-self:flex-start; font-size:11px; font-weight:900; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ar-neon);
  border:1px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08);
  padding:6px 12px; border-radius:999px;
}
.ar-title{
  font-size:clamp(30px,6vw,54px); font-weight:900; line-height:1.05; letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,#8fd6ff 65%,#3aa2ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ar-sub{font-size:clamp(14px,2.6vw,20px); font-weight:800; color:#cfe0ff;}
.ar-desc{color:var(--gray); font-size:14px; max-width:640px; line-height:1.8;}
.ar-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:4px;}
.ar-stat{
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:12px 14px;
  background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:5px; min-width:0;
}
.ar-stat span{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gray);}
.ar-stat b{font-size:clamp(15px,2.4vw,21px); font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.ar-stat.live b{color:var(--ar-green);}
.ar-stat.gold b{color:var(--ar-gold);}
.ar-cta{
  align-self:flex-start; margin-top:6px; position:relative;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-size:16px; font-weight:900; padding:14px 30px; border-radius:14px; border:0;
  color:#04121b; background:linear-gradient(120deg,#7bf0ff,#00e5ff 45%,#4aa8ff);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 14px 36px -14px rgba(0,229,255,.9);
  animation:arGlow 2.4s ease-in-out infinite;
  transition:transform .18s var(--ease);
}
.ar-cta:hover{transform:translateY(-2px);}
.ar-cta.off{background:rgba(255,255,255,.08); color:var(--gray); animation:none; box-shadow:none; cursor:not-allowed;}
@keyframes arGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 12px 30px -16px rgba(0,229,255,.8);}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 18px 46px -12px rgba(0,229,255,1);}
}
@media(max-width:760px){
  .arena-hero{padding:26px 16px; border-radius:20px;}
  .ar-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ar-cta{align-self:stretch; justify-content:center;}
}

/* ---- full-width premium tournament card ---- */
.ar-sec-title{
  display:flex; align-items:center; gap:10px; margin:34px 0 14px;
  font-size:16px; font-weight:900; letter-spacing:.04em;
}
.ar-sec-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);}
.ar-list{display:flex; flex-direction:column; gap:16px; padding-bottom:60px;}
.arc{
  position:relative; overflow:hidden; border-radius:20px; padding:20px;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1.5px solid var(--border);
  animation:arcIn .45s var(--ease) both;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
@keyframes arcIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.arc:hover{transform:translateY(-3px); border-color:rgba(0,229,255,.4); box-shadow:0 22px 50px -34px rgba(0,229,255,.9);}
.arc.is-live{border-color:rgba(52,231,140,.42);}
.arc.is-ended{opacity:.6;}
.arc-ic{
  width:76px; height:76px; border-radius:20px; display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.arc-body{min-width:0; display:flex; flex-direction:column; gap:10px;}
.arc-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.arc-head h2{font-size:19px; font-weight:900; overflow-wrap:anywhere;}
.arc-metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
.arc-m{
  border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:9px 11px;
  background:rgba(0,0,0,.2); display:flex; flex-direction:column; gap:3px; min-width:0;
}
.arc-m span{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--gray);}
.arc-m b{font-size:15px; font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.arc-m.time b{color:var(--ar-green);}
.arc-m.pool b{color:var(--ar-gold);}
.arc-cta{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:170px;}
@media(max-width:900px){
  .arc{grid-template-columns:auto 1fr; }
  .arc-cta{grid-column:1 / -1; min-width:0;}
  .arc-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:520px){
  .arc{grid-template-columns:1fr; text-align:start;}
  .arc-ic{width:58px; height:58px;}
}

/* ---- player dashboard ---- */
.adash{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:16px 0 6px;}
.adash-c{
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:13px 14px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:flex; flex-direction:column; gap:5px; min-width:0;
}
.adash-c span{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gray);}
.adash-c b{font-size:20px; font-weight:900; font-variant-numeric:tabular-nums;}
.adash-c.rank b{color:var(--ar-neon);}
.adash-c.coins b{color:var(--ar-gold);}
.adash-c.xp b{color:#c4a2ff;}
@media(max-width:900px){.adash{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- esports leaderboard ---- */
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; margin-bottom:16px;}
.pod{
  position:relative; border-radius:18px; padding:16px 12px 14px; text-align:center;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0;
  animation:arcIn .5s var(--ease) both;
}
.pod.p1{order:2; padding-top:30px; border-color:rgba(255,215,110,.5); background:linear-gradient(180deg,rgba(255,215,110,.16),rgba(255,215,110,.03));}
.pod.p2{order:1;}
.pod.p3{order:3;}
.pod .crown{position:absolute; top:-14px; font-size:26px; animation:crownBob 2.6s ease-in-out infinite;}
@keyframes crownBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.pod-av{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2);}
.pod-av.ph{display:grid; place-items:center; font-weight:900; background:rgba(255,255,255,.08);}
.pod-name{font-size:13px; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pod-score{font-size:17px; font-weight:900; font-variant-numeric:tabular-nums;}
.pod.p1 .pod-score{color:var(--ar-gold);}
.pod-medal{font-size:20px;}
@media(max-width:520px){.pod{padding:12px 8px;} .pod-av{width:42px;height:42px;}}

.lbrow{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:13px;
  border:1px solid transparent; background:rgba(255,255,255,.03);
  animation:arcIn .35s var(--ease) both;
}
.lbrow + .lbrow{margin-top:7px;}
.lbrow.me{border-color:rgba(0,229,255,.5); background:rgba(0,229,255,.1); box-shadow:0 0 0 1px rgba(0,229,255,.15) inset;}
.lbrow .r{width:30px; text-align:center; font-weight:900; font-variant-numeric:tabular-nums; color:var(--gray); flex-shrink:0;}
.lbrow .av{width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.lbrow .av.ph{display:grid; place-items:center; background:rgba(255,255,255,.09); font-weight:900; font-size:12px;}
.lbrow .nm{flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lbrow .sc{font-weight:900; font-variant-numeric:tabular-nums;}
.me-sticky{position:sticky; bottom:0; margin-top:10px;}

/* ---- rewards ---- */
.rwgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
.rw{
  position:relative; overflow:hidden; border-radius:18px; padding:16px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:7px; min-width:0;
}
.rw::before{
  content:""; position:absolute; top:-60%; inset-inline-start:-40%; width:40%; height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:rotate(18deg); animation:rwShine 4.2s ease-in-out infinite;
}
@keyframes rwShine{0%{transform:translateX(-40%) rotate(18deg);}55%,100%{transform:translateX(420%) rotate(18deg);}}
.rw.g1{border-color:rgba(255,215,110,.5); background:linear-gradient(160deg,rgba(255,215,110,.14),rgba(255,255,255,.02));}
.rw.g2{border-color:rgba(203,213,225,.4);}
.rw.g3{border-color:rgba(205,127,50,.42);}
.rw i{font-style:normal; font-size:24px;}
.rw b{font-size:13px; font-weight:900;}
.rw span{font-size:13px; color:#cfe0ff; line-height:1.6;}
@media(max-width:640px){.rwgrid{grid-template-columns:1fr;}}

/* ---- GX journey ---- */
.jr{display:flex; flex-direction:column; gap:12px;}
.jr-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.jr-lvl{font-size:16px; font-weight:900;}
.jr-bar{height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;}
.jr-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#7c4dff,#00e5ff); transition:width .8s var(--ease);}
.jr-hint{font-size:12.5px; color:var(--gray); line-height:1.7;}
.jr-perks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.jr-perk{
  border:1px dashed rgba(255,255,255,.14); border-radius:13px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px; font-size:12.5px; min-width:0;
}
.jr-perk b{font-size:14px; font-weight:900; color:var(--ar-neon);}
@media(max-width:640px){.jr-perks{grid-template-columns:1fr;}}

/* ---- game complete rewards (inside GX Blast) ---- */
.bo-rw{display:flex; flex-direction:column; gap:7px; margin:10px 0 4px;}
.bo-rw-row{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:9px 12px;
  background:rgba(255,255,255,.04); font-size:13px; font-weight:800;
  animation:arcIn .4s var(--ease) both;
}
.bo-rw-row i{font-style:normal; font-size:16px;}
.bo-rw-row span{flex:1; min-width:0; color:var(--gray); font-weight:700;}
.bo-rw-row:nth-child(2){animation-delay:.1s;}
.bo-rw-row:nth-child(3){animation-delay:.2s;}
.bo-rw-row:nth-child(4){animation-delay:.3s;}
.bo-rw-row b{font-variant-numeric:tabular-nums; color:#ffd76e;}
.bo-rw-row.up b{color:#34e78c;}
.bo-rw-row.down b{color:#ff8a8a;}
.bo-rw-row.xp b,.bo-rw-row.coins b{font-size:12px;}


/* ===== tournament prizes per place ===== */
.przlist{display:flex;flex-direction:column;gap:8px;}
.przlist.scroll{max-height:52vh;overflow:auto;padding-inline-end:4px;}
.przrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);}
.przrow i{font-style:normal;font-size:18px;line-height:1;}
.przrow b{font-size:13px;color:#eef2ff;min-width:72px;}
.przrow span{margin-inline-start:auto;font-size:13px;font-weight:700;color:#ffd76e;text-align:end;}
.przrow span{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.prz-reward{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,215,110,.10);border:1px solid rgba(255,215,110,.22);font-size:12px;line-height:1.5;white-space:nowrap;}
.przrow{align-items:flex-start;}
.przrow.g1{border-color:rgba(255,215,110,.5);background:linear-gradient(120deg,rgba(255,215,110,.16),rgba(255,255,255,.02));}
.przrow.g2{border-color:rgba(203,213,255,.4);}
.przrow.g3{border-color:rgba(226,150,90,.4);}
.prz-all{margin-top:10px;width:100%;padding:10px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(0,229,255,.35);background:rgba(0,229,255,.08);color:#bff6ff;font-weight:700;font-size:13px;}
.prz-all:hover{background:rgba(0,229,255,.15);}

/* ===== arena modals ===== */
.tp-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(4,7,20,.78);}
.tp-modal-card{width:min(480px,100%);max-height:88vh;overflow:auto;padding:18px;border-radius:22px;
  background:linear-gradient(160deg,#131a3c,#0a0e26);border:1.5px solid rgba(0,229,255,.28);
  box-shadow:0 30px 80px -40px rgba(0,229,255,.6);}
.tp-modal-t{margin:0 0 12px;font-size:17px;font-weight:800;color:#eef2ff;text-align:center;}

/* ===== how-to-play polish ===== */
.htp-head{display:flex;flex-direction:column;gap:6px;}
.htp-step{font-size:12px;font-weight:700;color:#8fa3d8;text-align:center;}
.htp-prog{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;}
.htp-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#00e5ff,#7c4dff);transition:width .3s ease;}
.htp-stage{position:relative;}
.htp-badge{position:absolute;inset-inline-start:10px;top:2px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#08122a;
  background:linear-gradient(140deg,#ffd76e,#ffb03a);}
.htp-cta{margin-top:6px;width:100%;padding:12px;border-radius:14px;border:0;cursor:pointer;font-weight:800;font-size:14px;
  color:#04102a;background:linear-gradient(120deg,#00e5ff,#7c4dff);}
.htp-arrow{transition:background .2s ease;}
.htp-arrow:hover{background:rgba(255,255,255,.12);}

/* ===== arena lobby v2: hero + top players + compact lists ===== */
.ar-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.ar-game{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.ar-game-ic{
  width:86px; height:86px; border-radius:22px; display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.ar-game-tx{display:flex; flex-direction:column; gap:6px; min-width:0;}
.ar-game-tx .ar-title{font-size:clamp(26px,5vw,44px);}
.ar-game-tx .trn-badge{align-self:flex-start;}
.adash-3{grid-template-columns:repeat(3,minmax(0,1fr));}

.tp3{
  display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1.5px solid var(--border);
}
.tp3-row{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:12px;
  padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.07);
}
.tp3-row.m1{border-color:rgba(255,215,110,.45);}
.tp3-row.m2{border-color:rgba(200,215,235,.32);}
.tp3-row.m3{border-color:rgba(205,140,90,.32);}
.tp3-row i{font-style:normal; font-size:18px;}
.tp3-av{width:34px; height:34px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08);}
.tp3-av.ph{display:grid; place-items:center; font-weight:900; font-size:14px;}
.tp3-nm{font-weight:800; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tp3-sc{font-weight:900; font-variant-numeric:tabular-nums; color:var(--ar-gold);}
.tp3-all{
  align-self:flex-start; text-decoration:none; font-size:12.5px; font-weight:800;
  color:var(--ar-neon); padding:8px 14px; border-radius:999px;
  border:1px solid rgba(0,229,255,.35); background:rgba(0,229,255,.07);
}

.uplist{list-style:none; margin:0; padding:0 0 30px; display:flex; flex-direction:column; gap:10px;}
.uprow{
  display:grid; grid-template-columns:auto 1.4fr 1.3fr auto auto; align-items:center; gap:14px;
  padding:12px 14px; border-radius:16px; border:1.5px solid var(--border);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  animation:arcIn .4s var(--ease) both;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.uprow:hover{transform:translateY(-2px); border-color:rgba(0,229,255,.35);}
.uprow.is-live{border-color:rgba(52,231,140,.4);}
.uprow.is-ended{opacity:.62;}
.up-ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);}
.up-nm{font-weight:900; font-size:15.5px; overflow-wrap:anywhere;}
.up-time{font-size:13px; color:var(--ar-green); font-weight:700;}
.up-prz{font-size:13px; color:var(--ar-gold); font-weight:800;}
.up-go{
  text-decoration:none; font-size:13px; font-weight:900; padding:10px 18px; border-radius:12px;
  color:#04121b; background:linear-gradient(120deg,#7bf0ff,#00e5ff 45%,#4aa8ff); white-space:nowrap;
}
.up-go.ghost{background:rgba(255,255,255,.08); color:var(--gray);}
@media(max-width:820px){
  .uprow{grid-template-columns:auto 1fr; row-gap:8px;}
  .up-time,.up-prz{grid-column:2;}
  .up-go{grid-column:1 / -1; text-align:center;}
  .adash-3{grid-template-columns:1fr;}
}

/* ===== arena lobby v3: fits every viewport + prizes / leaderboard / how-to ===== */
.arena{padding-bottom:60px;}
.arena .wrap{max-width:1240px;}
.ar-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;}
.ar-cta2{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:14px; font-weight:900; padding:13px 22px; border-radius:14px;
  color:#bff6ff; border:1.5px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.ar-cta2:hover{background:rgba(0,229,255,.16); transform:translateY(-2px);}

.ar-cols{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start;}
.ar-panel{min-width:0;}
@media(max-width:900px){ .ar-cols{grid-template-columns:1fr;} }

/* how-to cards */
.htg{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.htg-c{
  position:relative; min-width:0; border-radius:18px; padding:18px 16px 16px;
  border:1.5px solid var(--border);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:flex; flex-direction:column; gap:8px;
  animation:arcIn .45s var(--ease) both;
  transition:transform .18s var(--ease), border-color .18s var(--ease);
}
.htg-c:hover{transform:translateY(-3px); border-color:rgba(0,229,255,.38);}
.htg-n{
  position:absolute; inset-inline-end:14px; top:12px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; font-weight:900; color:#04121b;
  background:linear-gradient(140deg,#7bf0ff,#4aa8ff);
}
.htg-c i{font-style:normal; font-size:26px; line-height:1;}
.htg-c b{font-size:15px; font-weight:900;}
.htg-c p{margin:0; font-size:13px; line-height:1.8; color:var(--gray);}
@media(max-width:980px){ .htg{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:520px){ .htg{grid-template-columns:1fr;} }

/* compact tournament rows on small screens */
@media(max-width:900px){
  .uprow{grid-template-columns:auto minmax(0,1fr); gap:10px 12px;}
  .up-time,.up-prz{grid-column:2;}
  .up-go{grid-column:1 / -1; text-align:center;}
}
@media(max-width:760px){
  .ar-game-ic{width:64px; height:64px; border-radius:18px;}
  .ar-cta2{flex:1; justify-content:center;}
  .tp3-row{grid-template-columns:auto auto minmax(0,1fr) auto; gap:8px; padding:9px 10px;}
  .tp3-nm{font-size:13.5px;}
  .przrow{flex-wrap:wrap;}
  .przrow span{margin-inline-start:0; width:100%; text-align:start;}
}

/* ---------- Arena tournaments carousel ---------- */
.car-scroller.tcar{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none;}
.car-scroller.tcar::-webkit-scrollbar{display:none;}
.tcar-c{flex:0 0 clamp(230px,74vw,290px);scroll-snap-align:start;display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:18px;background:linear-gradient(160deg,rgba(24,30,64,.96),rgba(13,17,40,.96));border:1px solid rgba(0,229,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.38);}
.tcar-c.is-live{border-color:rgba(0,229,255,.45);}
.tcar-c.is-ended{opacity:.72;}
.tcar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tcar-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(0,229,255,.08);}
.tcar-nm{margin:0;font-size:16px;font-weight:800;line-height:1.35;}
.tcar-time{margin:0;font-size:12.5px;color:#9fb0d8;}
.tcar-meta{display:flex;gap:12px;font-size:12.5px;color:#c6d2ee;flex-wrap:wrap;}
.tcar-go{margin-top:auto;display:block;text-align:center;padding:10px 12px;border-radius:12px;font-weight:800;font-size:13.5px;text-decoration:none;color:#04121c;background:linear-gradient(135deg,#00e5ff,#7dfffe);}
.tcar-c.is-ended .tcar-go{background:rgba(255,255,255,.08);color:#cfe0ff;}
@media(max-width:560px){.tcar-c{flex-basis:80vw;}}

/* ---------- registration gate ---------- */
.reg-note{margin:8px 0 0;font-size:13px;color:#9fb0d8;}
.reg-ok{color:#7dffb0;font-weight:700;}

/* --- lean arena lobby --- */
.arena-hero-sm{padding:30px 22px;}
.arena-hero-sm .ar-title{font-size:clamp(28px,5.4vw,46px);}
.tcar-dates{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#93a5cf;margin:0;}

/* --- arena lobby hero perks --- */
.ar-perks{display:flex;flex-wrap:wrap;gap:8px;}
.ar-perk{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:#e8f2ff;
  border:1px solid rgba(0,229,255,.28);background:rgba(0,229,255,.07);
}
.ar-perk i{font-style:normal;}
.tcar-game{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;color:#7de6ff;border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.08);
}
.tcar-time b{color:#e9f3ff;font-variant-numeric:tabular-nums;}

/* --- premium arena hero --- */
.arena-hero-sm .ar-kicker{letter-spacing:.28em;}
.arena-hero-sm .ar-sub{max-width:640px;}
.ar-perk{backdrop-filter:none;}

/* --- segmented countdown --- */
.tcd{display:flex;gap:6px;direction:ltr;justify-content:flex-start;margin:2px 0 0;}
.tcd-u{
  min-width:52px;padding:6px 4px;border-radius:12px;text-align:center;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);
}
.tcd-n{display:block;font-size:17px;font-weight:900;color:#eaf4ff;font-variant-numeric:tabular-nums;line-height:1.1;}
.tcd-l{display:block;font-size:10px;font-weight:800;color:#8fa2cc;margin-top:2px;}
.tcd-lbl{font-size:12px;color:#9fb0d8;margin:0 0 4px;}
.is-live .tcd-u{border-color:rgba(0,229,255,.28);background:rgba(0,229,255,.07);}

/* --- GX Blast playfield backdrop --- */
.blast-fs{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 520px at 50% -12%, #5f6ec2 0%, rgba(95,110,194,0) 62%),
    radial-gradient(700px 420px at 12% 108%, #3d4a8f 0%, rgba(61,74,143,0) 60%),
    linear-gradient(180deg,#4a55a0 0%,#394180 55%,#2c3268 100%);
}
.blast-fs > :not(.bl-fx):not(.bb-ghost){position:relative;z-index:1;}
.bl-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bl-fx i{
  position:absolute;top:-12%;border-radius:6px;opacity:.16;
  animation:bl-fall linear infinite;
}
@keyframes bl-fall{
  0%{transform:translate3d(0,-15vh,0) rotate(0deg);}
  100%{transform:translate3d(0,115vh,0) rotate(180deg);}
}
@media(prefers-reduced-motion:reduce){.bl-fx{display:none;}}
.blast-fs > .bb-ghost{position:fixed;z-index:60;}
.blast-board,.blast-wrap,.blast-over,.bo-card{backface-visibility:hidden;}
.bo-score b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.pod-rank{font-size:13px;font-weight:900;color:#9fb0d8;letter-spacing:.04em;}
.pod.p1 .pod-rank{color:var(--ar-gold);}

/* ===== real leaderboard (tournament page) ===== */
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lb-head h2{margin:0}
.lb-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#7de8a0;
  background:rgba(60,220,130,.12);border:1px solid rgba(60,220,130,.28);border-radius:999px;padding:3px 10px}
.lb-live i{width:7px;height:7px;border-radius:50%;background:#5ee08c;animation:lbPulse 1.8s ease-in-out infinite}
@keyframes lbPulse{0%,100%{opacity:1}50%{opacity:.25}}

.lb{display:flex;flex-direction:column;gap:6px}
.lb-cols{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;
  padding:0 12px 6px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--gray);text-transform:uppercase}
.lb-cols .c-s{text-align:end}
.lb-body{display:flex;flex-direction:column;gap:6px}

.lb-row{display:grid;grid-template-columns:38px auto 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-radius:14px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
a.lb-row:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.lb-row.t1{border-color:rgba(255,215,110,.45);background:linear-gradient(90deg,rgba(255,215,110,.13),rgba(255,255,255,.03))}
.lb-row.t2{border-color:rgba(200,214,255,.35)}
.lb-row.t3{border-color:rgba(220,150,90,.38)}
.lb-row.me{border-color:rgba(0,229,255,.45);background:rgba(0,229,255,.09)}
.lb-row.sticky{margin-top:10px}

.lb-r{width:38px;text-align:center;font-weight:900;font-size:14px;color:var(--gray);font-variant-numeric:tabular-nums}
.lb-r.t1{color:#ffc53d}.lb-r.t2{color:#d9e2ee}.lb-r.t3{color:#ff7a45}
.lb-r.top{font-size:18px}
.lb-avwrap{position:relative;width:36px;height:36px;flex-shrink:0}
.lb-av{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--glow,rgba(255,255,255,.18));box-shadow:0 0 10px -2px var(--glow,transparent)}
.lb-av.ph{display:grid;place-items:center;background:rgba(255,255,255,.09);font-weight:900;font-size:13px}
.lb-lvl{position:absolute;inset-inline-end:-4px;bottom:-4px;font-style:normal;font-size:10px;line-height:1;
  background:#141a34;border:1.5px solid rgba(255,255,255,.25);border-radius:999px;padding:2px 3px}
.lb-lvl.plain{background:none;border:0;padding:0;inset-inline-end:-8px;bottom:-6px;display:block}
.lb-r svg{margin-inline:auto}

.lb-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.lb-nm{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;justify-content:inherit}
.lb-youtag{flex:none;font-size:10px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb, var(--brand, #4aa8ff) 22%, transparent);color:var(--brand, #4aa8ff);border:1px solid color-mix(in srgb, var(--brand, #4aa8ff) 45%, transparent)}
.lb-lvlname{font-style:normal;font-size:11px;font-weight:700;color:var(--gray)}
.lb-sc{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;color:#8fd7ff}
.lb-row.t1 .lb-sc{color:#ffd76e}
@media(max-width:520px){.lb-row{grid-template-columns:30px auto 1fr auto;padding:8px 10px;gap:8px}.lb-r{width:30px}}