:root{
  --bg:#2a0a7a; --bg2:#2f0d85; --card:rgba(255,255,255,.08); --card2:rgba(255,255,255,.14); --line:rgba(206,160,255,.38);
  --text:#f6f0ff; --muted:#b6a6dd; --violet:#8b5cf6; --pink:#ff4fb8; --fuchsia:#e11d9a; --cyan:#38d6f5;
  --hit:#12c8e6; --hit-d:#06322e; --present:#ff2fb0; --present-d:#3c0a2a; --absent:#4a4262; --absent-t:#c9c0dd;
  --glow:0 0 14px rgba(255,79,184,.45), 0 0 28px rgba(139,92,246,.35);
  --tile:52px; --nav:64px; --vh:100vh;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{background:linear-gradient(165deg,#6a12e8 0%,#3f0fb5 42%,#26097a 100%) fixed}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.boot{display:grid;place-items:center;height:var(--vh);gap:8px;color:var(--muted)}
#app{min-height:var(--vh)}
.screen{padding:calc(var(--safe-t) + 8px) 16px calc(var(--nav) + var(--safe-b) + 16px);max-width:560px;margin:0 auto}
header.top{display:flex;align-items:center;gap:8px;height:40px}
header.top{height:auto;min-height:64px}header.top h1{margin:0;flex:1;text-align:center;line-height:1.05;font-size:26px;font-weight:800}header.top h1 span{display:block}header.top h1 .sub{font-size:17px;color:#ff8ad6;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:600;min-height:36px}
.pill.energy{box-shadow:0 0 10px rgba(56,214,245,.25);color:#c9f4ff}
.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:700}
.game{display:flex;flex-direction:column;min-height:calc(var(--vh) - var(--nav) - var(--safe-b) - var(--safe-t) - 24px)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.tab{min-height:44px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.tab small{font-weight:500;color:var(--muted);font-size:11px}
.tab[aria-selected=true]{background:linear-gradient(135deg,var(--violet),var(--fuchsia));border-color:transparent;box-shadow:var(--glow)}
.tab[aria-selected=true] small{color:#fff}
.timer{text-align:center;color:var(--muted);font-size:14px;min-height:20px}
.timer b{color:var(--text);font-variant-numeric:tabular-nums}
.board{display:grid;gap:6px;justify-content:center;margin:8px auto;flex:none}
.row{display:grid;grid-template-columns:repeat(5,var(--tile));gap:6px}
.tile{width:var(--tile);height:var(--tile);border-radius:10px;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-size:calc(var(--tile)*.52);font-weight:800;text-transform:uppercase;position:relative;user-select:none}
.tile.filled{border-color:#7a5ad6;animation:pop .12s ease-out}
.tile .mk{position:absolute;top:2px;right:4px;font-size:calc(var(--tile)*.24);font-weight:900;line-height:1}
.tile.hit{background:var(--hit);border-color:var(--hit);color:#03303a;box-shadow:0 0 12px rgba(20,200,180,.55)}
.tile.present{background:var(--present);border-color:var(--present);color:#fff;box-shadow:0 0 12px rgba(255,79,184,.55)}
.tile.absent{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#e4dcf7}
.tile.flip{animation:flip .5s ease both}
.row.shake{animation:shake .35s}
.row.win .tile{animation:bounce .6s ease both;animation-delay:calc(var(--i)*70ms)}
.tile.locked{opacity:.55}
@keyframes pop{from{transform:scale(.88)}to{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
.msg{min-height:22px;text-align:center;font-size:14px;color:var(--muted);margin:2px 0}
.msg.err{color:#ff9ac8}
.kb{margin-top:auto;padding:6px 0 4px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.kb .kr{display:flex;gap:4px;justify-content:center}
.key{flex:1 1 0;min-width:0;padding:0;max-width:40px;height:var(--key,46px);border-radius:8px;background:var(--card2);border:1px solid var(--line);font-weight:700;font-size:17px;text-transform:uppercase;position:relative}
.key:active{transform:scale(.94)}
.key.wide{flex:1.6 1 0;max-width:64px;font-size:12px;padding:0;background:linear-gradient(135deg,var(--violet),var(--fuchsia));border-color:transparent}
.key.hit{background:var(--hit);color:#022;border-color:var(--hit)}
.key.present{background:var(--present);color:#fff;border-color:var(--present)}
.key.absent{background:#241d38;color:#7d7396;border-color:#2e2646}
.key .mk{position:absolute;top:1px;right:3px;font-size:9px;font-weight:900}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.btn{min-height:46px;padding:0 18px;border-radius:14px;font-weight:700;background:linear-gradient(135deg,var(--violet),var(--fuchsia));box-shadow:var(--glow)}
.btn.ghost{background:var(--card);border:1px solid var(--line);box-shadow:none}
.btn:disabled{opacity:.5;box-shadow:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}
.card h2,.card h3{margin:0 0 8px;font-size:16px}
.muted{color:var(--muted)}.small{font-size:13px}
.lb{width:100%;border-collapse:collapse}
.lb td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.lb tr.me td{background:rgba(139,92,246,.22)}
.lb .pl{width:34px;font-weight:800;text-align:center}
.lb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb tr.zone .pl::after{content:"★";color:#ffd166;margin-left:2px;font-size:12px}
.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--card2);object-fit:cover;display:inline-block;vertical-align:middle;margin-right:8px}
nav.bottom{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(38,9,122,.94);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:20;backdrop-filter:blur(8px)}
nav.bottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:12px;min-height:48px}
nav.bottom button[aria-current=page]{color:#fff;text-shadow:0 0 10px var(--pink)}
nav.bottom .ic{font-size:20px;line-height:1}
.sheet-bg{position:fixed;inset:0;background:rgba(8,3,22,.7);z-index:40;display:grid;place-items:end center}
.sheet{background:#2b0c80;border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:18px 16px calc(18px + var(--safe-b))}
.sheet h2{margin:0 0 10px}
.legend{display:grid;gap:8px;margin:8px 0}.legend div{display:flex;align-items:center;gap:10px}
.legend .tile{--tile:34px;flex:none}
#toast{position:fixed;left:50%;top:calc(var(--safe-t) + 60px);transform:translateX(-50%);background:#fff;color:#1a0b3a;padding:10px 16px;border-radius:12px;font-weight:700;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;max-width:88vw;text-align:center}
#toast.show{opacity:1}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--card2);border-radius:12px;padding:10px}.stat b{font-size:22px;display:block}
.ach{display:inline-flex;gap:6px;padding:6px 10px;border-radius:999px;background:var(--card2);margin:3px 3px 0 0;font-size:13px}
.ach.off{opacity:.4}
.state{text-align:center;padding:36px 12px}
.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--card),var(--card2),var(--card));background-size:200% 100%;animation:sk 1.2s infinite;margin:10px 0}
@keyframes sk{to{background-position:-200% 0}}
.banner{background:rgba(255,79,184,.14);border:1px solid var(--pink);border-radius:12px;padding:10px;margin:8px 0;font-size:14px}
.switch{display:flex;justify-content:space-between;align-items:center;gap:10px}
input[type=checkbox].tg{width:46px;height:26px;appearance:none;background:var(--absent);border-radius:99px;position:relative;transition:.2s}
input[type=checkbox].tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
input[type=checkbox].tg:checked{background:var(--fuchsia)}input[type=checkbox].tg:checked::after{left:23px}
a{color:var(--cyan)}
.win-glow{animation:glow 1.6s ease-in-out 2}
@keyframes glow{50%{box-shadow:0 0 40px var(--pink)}}
.sharebox{white-space:pre-wrap;background:var(--card2);border-radius:12px;padding:10px;font-size:14px;margin:8px 0;word-break:break-all}
@media (max-height:720px){:root{--key:40px}.tabs .tab{min-height:38px}.timer{font-size:13px}header.top h1{font-size:21px}header.top{min-height:52px}.tabs{margin:2px 0}.card{padding:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-height:620px){header.top{min-height:40px}header.top h1{font-size:17px}header.top h1 span{display:inline}header.top h1 .sub{font-size:17px;margin-left:6px}.pill{min-height:32px;padding:4px 10px}.icon-btn{width:34px;height:34px}.key{font-size:15px}.tile{border-width:1.5px}}

.tip{position:fixed;z-index:70;max-width:220px;background:#fff;color:#2a1560;padding:9px 12px;border-radius:12px;font-size:14px;font-weight:600;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.4);animation:tipin .15s ease-out;pointer-events:none}
.tip::before{content:"";position:absolute;top:-6px;left:var(--ax,50%);margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#fff}
@keyframes tipin{from{opacity:0;transform:translateY(-4px)}}
.fw{position:fixed;inset:0;width:100%;height:100%;z-index:65;pointer-events:none}
.banner.rise{border-color:var(--hit);background:rgba(18,200,230,.14);animation:rise .5s ease-out}
@keyframes rise{from{transform:scale(.94);opacity:0}}
.onb{position:fixed;inset:0;z-index:80;background:linear-gradient(165deg,#5a10d0,#26097a);overflow:auto;display:grid;place-items:start center}
.onb-in{width:100%;max-width:520px;padding:calc(var(--safe-t) + 20px) 20px calc(24px + var(--safe-b))}
.onb h2{margin:0 0 10px;font-size:26px}
.row.ex{margin:14px 0 6px;--tile:46px}

.tile.bad{color:#ff6b7d;border-color:#ff4d63;background:rgba(255,77,99,.14);box-shadow:0 0 10px rgba(255,77,99,.35)}
.tip.up::before{top:auto;bottom:-6px;border-bottom:0;border-top-color:#fff}
.tip.up{animation-name:tipup}
@keyframes tipup{from{opacity:0;transform:translateY(4px)}}

/* переворот клеток: цвет открывается на середине поворота, клетки по очереди */
.tile.flip{animation:flip-absent .55s ease both;animation-delay:calc(var(--i)*260ms)}
.tile.flip.hit{animation-name:flip-hit}.tile.flip.present{animation-name:flip-present}
.tile.flip .mk{animation:mkin .55s both;animation-delay:calc(var(--i)*260ms)}
@keyframes mkin{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes flip-hit{0%{transform:rotateX(0);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}49%{transform:rotateX(90deg);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}50%{transform:rotateX(90deg);background:var(--hit);border-color:var(--hit);color:#03303a;box-shadow:0 0 12px rgba(20,200,180,.55)}100%{transform:rotateX(0);background:var(--hit);border-color:var(--hit);color:#03303a;box-shadow:0 0 12px rgba(20,200,180,.55)}}
@keyframes flip-present{0%{transform:rotateX(0);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}49%{transform:rotateX(90deg);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}50%{transform:rotateX(90deg);background:var(--present);border-color:var(--present);color:#fff;box-shadow:0 0 12px rgba(255,79,184,.55)}100%{transform:rotateX(0);background:var(--present);border-color:var(--present);color:#fff;box-shadow:0 0 12px rgba(255,79,184,.55)}}
@keyframes flip-absent{0%{transform:rotateX(0);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}49%{transform:rotateX(90deg);background:var(--card);border-color:var(--line);color:var(--text);box-shadow:none}50%{transform:rotateX(90deg);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#e4dcf7;box-shadow:none}100%{transform:rotateX(0);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2);color:#e4dcf7;box-shadow:none}}
.row.win .tile.flip{animation-name:flip-hit,bounce;animation-duration:.55s,.6s;animation-timing-function:ease,ease;animation-fill-mode:both,both;animation-delay:calc(var(--i)*260ms),calc(1500ms + var(--i)*70ms)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,var(--violet),var(--fuchsia));font-weight:800;box-shadow:var(--glow)}

.prize-line{margin:2px auto 4px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);font-size:14px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prize-line b{color:#ffe08a}