:root{
  --bg:#0a0e16; --bg2:#0e1420; --surface:#131a28; --surface2:#1a2334;
  --line:#243049; --ink:#eaf2ff; --muted:#8a97ad; --faint:#5c6a80;
  --teal:#4fd0a0; --blue:#4f8fd0; --gold:#e0b64a; --pink:#c98c7a;
  --app-height:100dvh; --tg-safe-top:0px; --tg-safe-bottom:0px;
  --grad:linear-gradient(135deg,#4fd0a0,#4f8fd0);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* класс с display не должен перебивать атрибут hidden */
html,body{ margin:0; padding:0; }
body{
  background:radial-gradient(120% 70% at 50% -10%, #10182a, var(--bg) 60%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Inter",sans-serif;
  min-height:var(--app-height,100dvh);
  overscroll-behavior:none; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-size-adjust:100%; -webkit-text-size-adjust:100%;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none; /* без iOS-меню по долгому тапу на игровом поле */
}
button{ font-family:inherit; cursor:pointer; }
button,a,[role="button"]{ touch-action:manipulation; }

/* ---------- Экраны ---------- */
.screen{ min-height:var(--app-height,100dvh); display:flex; flex-direction:column; }
.screen[hidden]{ display:none; }
.screen--hub{ overflow-y:auto; padding-bottom:calc(20px + var(--tg-safe-bottom)); }
.screen--game,.screen--board{ height:var(--app-height,100dvh); overflow:hidden; background:radial-gradient(130% 90% at 50% 6%, #0c1526, #070a11 60%); }

/* ---------- Верхняя панель хаба ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(14px + max(env(safe-area-inset-top,0px), var(--tg-safe-top))) 18px 12px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand__logo{ font-size:30px; filter:drop-shadow(0 2px 8px rgba(79,208,160,.4)); }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{ font-size:18px; letter-spacing:-.2px; }
.brand__txt small{ color:var(--muted); font-size:12px; }
.me{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:5px 11px 5px 5px; border-radius:999px; max-width:48vw; }
.me__ava{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.me__name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.notice{ margin:6px 18px 4px; padding:11px 14px; background:rgba(224,182,74,.1); border:1px solid rgba(224,182,74,.3); color:#f0d79a; border-radius:12px; font-size:13px; line-height:1.4; }

.cover{
  display:block; margin:8px 18px 4px; border:1px solid rgba(79,208,160,.24);
  border-radius:20px; overflow:hidden; background:var(--surface);
  box-shadow:0 18px 46px rgba(0,0,0,.32);
}
.cover img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* ---------- Сетка игр ---------- */
.games-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:14px 18px 8px; }
.gcard{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line); border-radius:18px; padding:0 0 14px; color:var(--ink);
  position:relative; overflow:hidden; transition:transform .12s ease, border-color .2s ease;
  min-height:206px;
}
.gcard:active{ transform:scale(.97); border-color:var(--teal); }
.gcard::after{ content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .2s; pointer-events:none; }
.gcard:active::after{ opacity:.06; }
.gcard__art{ display:block; width:100%; aspect-ratio:1; overflow:hidden; background:#080d15; border-bottom:1px solid rgba(255,255,255,.08); }
.gcard__art img{ display:block; width:100%; height:100%; object-fit:cover; }
.gcard__title{ margin:12px 14px 0; font-size:18px; font-weight:800; letter-spacing:-.3px; }
.gcard__tag{
  position:absolute; top:10px; right:10px; z-index:1; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:#dbe7f7; background:rgba(8,13,21,.68);
  border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px 8px;
  backdrop-filter:blur(10px);
}
.gcard__best{ margin:6px 14px 0; font-size:12.5px; color:var(--muted); }
.gcard__best b{ color:var(--teal); }
.gcard__leader{ margin:0 14px; font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcard--board{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:14px; min-height:0; padding:12px 14px; }
.gcard--board .gcard__art{ width:58px; height:58px; flex:0 0 58px; aspect-ratio:auto; border:1px solid rgba(79,208,160,.28); border-radius:16px; }
.gcard--board .gcard__title{ margin:0; }
.gcard--board .gcard__best{ margin:0; }
.gcard--arena{ grid-column:1 / -1; min-height:0; border-color:rgba(79,208,160,.5); background:linear-gradient(135deg,rgba(79,208,160,.16),rgba(79,143,208,.14)),var(--surface); }
.gcard--arena .gcard__art{ aspect-ratio:16/9; }
.gcard--arena .gcard__best b{ color:var(--teal); }
.gcard__live{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; color:#04121f; background:var(--teal); padding:1px 7px; border-radius:6px; vertical-align:middle; margin-left:7px; animation:livePulse 1.6s infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.hub-foot{ margin-top:auto; text-align:center; color:var(--faint); font-size:12px; line-height:1.7; padding:20px 18px 8px; }
.hub-foot b{ color:var(--muted); }
.hub-link{ display:inline-block; margin-top:2px; color:var(--teal); font-weight:700; font-size:13px; text-decoration:none; }
.hub-link:active{ opacity:.7; }

/* ---------- Игровая панель ---------- */
.gbar{
  display:flex; align-items:center; gap:10px;
  padding:calc(6px + max(env(safe-area-inset-top,0px), var(--tg-safe-top))) 10px 6px;
  border-bottom:none; background:transparent; position:relative; z-index:3;
}
.gbar__btn{
  width:40px; height:40px; flex:0 0 auto; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); border-radius:12px; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.gbar__btn:active{ background:var(--surface2); }
.gbar__btn--ghost{ opacity:0; pointer-events:none; }
.gbar__title{ flex:1; font-size:17px; font-weight:800; letter-spacing:-.3px; }
.gbar__score{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; margin-right:2px; }
.gbar__score span{ font-size:9px; font-weight:700; letter-spacing:.7px; color:var(--faint); }
.gbar__score b{ font-size:19px; color:var(--teal); font-variant-numeric:tabular-nums; }

.game-area{ flex:1; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; }

/* общий хинт + кнопки */
.game-hint{ text-align:center; color:var(--faint); font-size:11.5px; max-width:340px; margin:0 auto; }
.btn{ border:none; border-radius:12px; padding:11px 22px; font-weight:800; font-size:15px; color:#06210f; background:var(--teal); }
.btn:active{ transform:scale(.97); }
.btn--glow{ background:var(--grad); color:#04121f; box-shadow:0 8px 24px rgba(79,208,160,.3); }

/* ---------- 2048 ---------- */
.g2048{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.g2048__board{ position:relative; width:min(96vw,58vh,460px); aspect-ratio:1; background:radial-gradient(120% 120% at 50% 10%, #0d1526, #070a11 62%); border:none; border-radius:18px; padding:10px; touch-action:none; overscroll-behavior:contain; contain:layout paint; }
.g2048__bg{ position:absolute; inset:10px; display:grid; grid-template:repeat(4,1fr)/repeat(4,1fr); gap:10px; }
.g2048__bg i{ background:rgba(255,255,255,.04); border-radius:9px; }
.g2048__tiles{ position:absolute; inset:10px; contain:layout paint; }
.g2048__tile{ position:absolute; left:0; top:0; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .115s cubic-bezier(.2,.8,.2,1); will-change:transform; transform:translate3d(0,0,0); scale:1; backface-visibility:hidden; }
.g2048__tile.spawn{ animation:pop .16s ease; }
.g2048__tile.merge{ animation:merge .16s ease; }
@keyframes pop{ from{ scale:.4; opacity:0; } to{ scale:1; opacity:1; } }
@keyframes merge{ 0%{ scale:1; } 50%{ scale:1.14; } 100%{ scale:1; } }
.g2048__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(10,14,22,.82); border-radius:16px; }
.g2048__overlay[hidden]{ display:none; }
.g2048__msg{ font-size:22px; font-weight:800; }

/* ---------- Змейка ---------- */
.snake{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.snake__board{ position:relative; width:min(86vw,46vh,400px); aspect-ratio:1; touch-action:none; }
.snake__board canvas{ width:100%; height:100%; display:block; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.snake__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(10,14,22,.82); border-radius:16px; }
.snake__overlay[hidden]{ display:none; }
.snake__msg{ font-size:20px; font-weight:800; text-align:center; padding:0 16px; }
.snake__pad{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.snake__pad-row{ display:flex; gap:8px; }
.snake__btn{ width:66px; height:54px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface2); color:var(--ink); border-radius:13px; font-size:26px; touch-action:manipulation; user-select:none; }
.snake__btn:active{ background:var(--teal); color:#04121f; border-color:transparent; }

/* ---------- Тетрис ---------- */
.tetris{ display:flex; flex-direction:column; align-items:center; gap:12px; height:100%; justify-content:center; }
.tetris__board{ position:relative; height:min(50vh,150vw); aspect-ratio:1/2; touch-action:none; }
.tetris__board canvas{ width:100%; height:100%; display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.tetris__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,14,22,.82); border-radius:12px; padding:14px; text-align:center; }
.tetris__overlay[hidden]{ display:none; }
.tetris__msg{ font-size:17px; font-weight:800; }
.tetris__pad{ position:relative; display:flex; justify-content:center; align-items:flex-end; width:min(94vw,390px); min-height:120px; }
.tetris__dpad{ display:grid; grid-template-columns:repeat(3,58px); grid-auto-rows:54px; gap:8px; }
.tetris__btn{ min-height:54px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface2); color:var(--ink); border-radius:14px; font-size:26px; font-weight:800; touch-action:manipulation; user-select:none; }
.tetris__btn:active{ background:var(--teal); color:#04121f; border-color:transparent; }
.tetris__btn--up{ grid-column:2; grid-row:1; }
.tetris__dpad .tetris__btn[data-btn="left"]{ grid-column:1; grid-row:2; }
.tetris__dpad .tetris__btn[data-btn="down"]{ grid-column:2; grid-row:2; }
.tetris__dpad .tetris__btn[data-btn="right"]{ grid-column:3; grid-row:2; }
.tetris__btn--drop{ position:absolute; right:0; bottom:0; width:56px; min-height:54px; font-size:10px; text-transform:uppercase; letter-spacing:.02em; background:linear-gradient(180deg,rgba(224,182,74,.24),var(--surface2)); border-color:rgba(224,182,74,.38); color:#f0d79a; }

/* ---------- Прыгалка ---------- */
.jumper{ display:flex; width:100%; height:100%; }
.jumper__stage{ position:relative; width:100%; height:100%; touch-action:none; }
.jumper__stage canvas{ width:100%; height:100%; display:block; border:none; border-radius:0; background:#070b12; }
.jumper__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:radial-gradient(circle at 50% 42%,rgba(79,208,160,.16),rgba(10,14,22,.72) 52%,rgba(10,14,22,.9)); border-radius:16px; }
.jumper__overlay[hidden]{ display:none; }
.jumper__msg{ font-size:24px; font-weight:900; text-shadow:0 0 22px rgba(79,208,160,.42); }
.jumper__sub{ max-width:min(78vw,460px); color:#b8c5d8; font-size:14px; line-height:1.45; text-align:center; padding:0 14px; }

/* ---------- Змейки-Арена (мультиплеер) ---------- */
.arena{ position:relative; width:100%; height:100%; }
.arena__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#0a0e16; border:1px solid var(--line); border-radius:14px; touch-action:none; }
.arena__hud{ position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; pointer-events:none; }
.arena__len{ background:rgba(10,14,22,.6); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:13px; color:var(--muted); }
.arena__len b{ color:var(--teal); font-size:16px; font-variant-numeric:tabular-nums; }
.arena__top{ list-style:none; margin:0; padding:8px 10px; background:rgba(10,14,22,.6); border:1px solid var(--line); border-radius:10px; font-size:12px; min-width:118px; }
.arena__top li{ display:flex; gap:6px; align-items:center; line-height:1.5; }
.arena__top li span{ color:var(--faint); width:12px; }
.arena__top li em{ flex:1; font-style:normal; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:88px; }
.arena__top li b{ color:var(--gold); font-variant-numeric:tabular-nums; }
.arena__boost{ position:absolute; right:18px; bottom:calc(22px + var(--tg-safe-bottom)); width:84px; height:84px; border-radius:50%; border:2px solid var(--teal); background:rgba(79,208,160,.15); color:var(--teal); font-weight:800; font-size:15px; touch-action:none; user-select:none; }
.arena__boost.is-on{ background:var(--teal); color:#04121f; transform:scale(.94); }
.arena__status{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(10,14,22,.8); border:1px solid var(--line); padding:12px 18px; border-radius:12px; font-size:14px; color:var(--muted); }
.arena__status[hidden]{ display:none; }
.arena__over{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(10,14,22,.85); border-radius:14px; }
.arena__over[hidden]{ display:none; }
.arena__over-msg{ font-size:24px; font-weight:800; }
.arena__over-len{ color:var(--muted); }
.arena .game-hint{ position:absolute; left:12px; right:118px; bottom:calc(16px + var(--tg-safe-bottom)); text-align:left; }

/* ---------- Таблица рекордов ---------- */
.board-tabs{ display:flex; gap:8px; overflow-x:auto; padding:12px 16px; -webkit-overflow-scrolling:touch; }
.board-tab{ flex:0 0 auto; padding:9px 14px; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; }
.board-tab.is-active{ background:var(--grad); color:#04121f; border-color:transparent; }
.board-list{ list-style:none; margin:0; padding:0 12px; overflow-y:auto; flex:1; }
.board-list::-webkit-scrollbar{ width:0; }
.brow{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; margin-bottom:6px; background:var(--surface); border:1px solid transparent; }
.brow.is-me{ border-color:var(--teal); background:rgba(79,208,160,.08); }
.brow__rank{ width:30px; text-align:center; font-size:16px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.brow__ava{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.brow__ava--ph{ background:var(--surface2); }
.brow__name{ flex:1; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brow__name em{ font-style:normal; font-size:11px; color:var(--teal); font-weight:700; margin-left:5px; }
.brow__score{ font-size:16px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
.board-me{ margin:4px 12px 8px; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; background:rgba(79,208,160,.1); border:1px solid var(--teal); }
.board-empty{ text-align:center; color:var(--muted); padding:40px 20px; }

/* ---------- Тост ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(24px + var(--tg-safe-bottom)); transform:translate(-50%,20px);
  background:var(--surface2); border:1px solid var(--line); color:var(--ink);
  padding:12px 20px; border-radius:14px; font-size:14px; font-weight:600; max-width:88vw; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.5); opacity:0; transition:opacity .25s, transform .25s; z-index:50; pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }