:root{color-scheme:dark;--bg:#10131f;--panel:rgba(27,32,48,0.96);--panel-strong:#252b3e;--text:#f7f8ff;--muted:#aeb5c8;--line:rgba(255,255,255,0.11);--accent:#24d3b2;--danger:#ff4f6d;--ok:#65d46e}*{box-sizing:border-box}body,html{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;letter-spacing:0;touch-action:manipulation}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.game-shell{align-items:center;background:radial-gradient(circle at 20% 0,rgba(36,211,178,.2),transparent 34%),linear-gradient(145deg,#10131f,#171b29 48%,#111827);display:flex;height:100dvh;justify-content:center;overflow:hidden;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.app-frame{background:linear-gradient(180deg,rgba(28,34,53,.98),rgba(17,22,36,.98));border:1px solid var(--line);border-radius:26px;box-shadow:0 28px 80px rgba(0,0,0,.36);display:grid;gap:clamp(10px,1.6dvh,16px);grid-template-rows:auto auto auto minmax(0,1fr) auto;height:min(100%,850px);max-height:100%;max-width:460px;overflow:hidden;padding:clamp(14px,2.4dvh,20px);position:relative;width:min(100%,460px)}.top-bar{align-items:center;display:flex;justify-content:space-between;min-height:48px}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:800;margin:0 0 2px;text-transform:uppercase}h1,h2,p{margin:0}h1{font-size:clamp(1.25rem,4.7dvw,1.8rem);line-height:1}.status-pill{align-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;color:var(--muted);display:inline-flex;font-size:.78rem;font-weight:800;justify-content:center;min-width:78px;padding:9px 12px}.status-pill.input{color:var(--accent)}.status-pill.victory{color:var(--ok)}.status-pill.defeat{color:var(--danger)}.stats-grid{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.stats-grid>div{background:rgba(255,255,255,.064);border:1px solid var(--line);border-radius:8px;min-width:0;padding:9px 7px}.stats-grid span{color:var(--muted);font-size:clamp(.6rem,2.5dvw,.72rem);font-weight:700}.stats-grid span,.stats-grid strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stats-grid strong{color:var(--text);font-size:clamp(.78rem,3.4dvw,1rem);line-height:1.25;margin-top:3px}.progress-track{background:rgba(255,255,255,.08);border-radius:999px;height:9px;overflow:hidden}.progress-track>div{background:linear-gradient(90deg,var(--accent),#ffd166);border-radius:inherit;height:100%;transition:width .24s ease}.progress-track.infinite>div{animation:flow 1.6s linear infinite;background:linear-gradient(90deg,transparent,var(--accent),transparent);width:54%}.board{align-self:center;aspect-ratio:1;display:grid;gap:clamp(9px,2dvh,13px);grid-template-columns:repeat(3,1fr);justify-self:center;max-height:100%;max-width:100%;width:min(100%,390px)}.tile{align-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--tile-color) 92%,white),var(--tile-color));border:0;border-radius:20px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 13px 22px rgba(0,0,0,.26);color:#10131f;cursor:pointer;display:flex;font-size:clamp(1rem,4.3dvw,1.35rem);font-weight:900;justify-content:center;min-height:78px;outline:none;position:relative;transition:filter .16s ease,opacity .16s ease,transform .16s ease,box-shadow .16s ease;-webkit-user-select:none;user-select:none}.tile span{filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))}.tile.active{box-shadow:inset 0 -3px 0 rgba(255,255,255,.22),0 0 0 6px color-mix(in srgb,var(--tile-color) 26%,transparent),0 18px 28px rgba(0,0,0,.35);filter:saturate(1.35) brightness(1.18);transform:translateY(4px) scale(.98)}.tile.wrong{animation:shake .3s ease both;background:linear-gradient(180deg,#ff8aa0,var(--danger))}.tile.locked{cursor:default}.tile:disabled{opacity:.74}.message-panel{align-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;display:flex;justify-content:space-between;min-height:54px;padding:10px 12px}.message-panel p{font-size:clamp(.88rem,3.4dvw,1rem);font-weight:800}.message-panel span{color:var(--muted);font-size:.7rem;font-weight:700;max-width:42%;text-align:right}.overlay{align-items:center;background:rgba(8,11,19,.72);display:flex;inset:0;justify-content:center;padding:16px;position:absolute;z-index:10}.screen-panel{animation:pop .22s ease both;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.42);display:grid;gap:14px;max-width:390px;padding:20px;width:100%}.screen-panel h2{font-size:clamp(1.45rem,6dvw,2.15rem);line-height:1.02}.screen-panel p{color:var(--muted);font-size:.95rem;line-height:1.35}.mode-grid{display:grid;gap:9px}.mode-grid button,.primary-action,.secondary-action{border:0;cursor:pointer;min-height:50px}.mode-grid button{align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;color:var(--text);display:flex;justify-content:space-between;padding:12px 14px;text-align:left}.mode-grid button.selected{border-color:color-mix(in srgb,var(--accent) 68%,white);box-shadow:0 0 0 3px rgba(36,211,178,.12)}.mode-grid span{color:var(--muted);font-size:.78rem;font-weight:700}.toggles{display:grid;gap:10px;grid-template-columns:1fr 1fr}.toggles label{align-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;color:var(--text);display:flex;font-weight:800;gap:9px;min-height:48px;padding:10px 12px}.toggles input{accent-color:var(--accent);height:20px;width:20px}.primary-action{background:linear-gradient(135deg,var(--accent),#ffd166);border-radius:12px;color:#10131f;font-size:1.04rem;font-weight:950;min-height:56px}.secondary-action{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:12px;color:var(--text);font-weight:900;min-height:56px}.result{text-align:center}.result-badge{border-radius:999px;display:inline-flex;font-size:.78rem;font-weight:900;justify-self:center;padding:8px 12px;text-transform:uppercase}.result.victory .result-badge{background:rgba(101,212,110,.16);color:var(--ok)}.result.defeat .result-badge{background:rgba(255,79,109,.16);color:var(--danger)}.final-score{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:14px}.final-score span{color:var(--muted);display:block;font-size:.78rem;font-weight:800;text-transform:uppercase}.final-score strong{display:block;font-size:2rem;margin-top:4px}.result-actions{display:grid;gap:10px;grid-template-columns:1fr 1fr}@keyframes pop{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes flow{0%{transform:translateX(-80%)}to{transform:translateX(200%)}}@media (max-height:690px){.app-frame{border-radius:18px;gap:8px;padding:10px}.stats-grid>div{padding:7px 6px}.message-panel{min-height:46px}.tile{border-radius:16px;min-height:64px}.screen-panel{gap:10px;padding:16px}}@media (min-width:700px){.app-frame{border-radius:30px}}