:root{--bg: #14170f;--bg-2: #1f2418;--panel: #262c1e;--line: #3b442f;--text: #ece9dd;--muted: #9aa189;--gold: #e8b93a;--green: #7d9068;--red: #d94f3d;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:radial-gradient(120% 90% at 50% 0%,var(--bg-2),var(--bg));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}body{user-select:none}#app{min-height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom))}.hidden{display:none!important}#menu{justify-content:center;align-items:center;gap:28px}.brand{text-align:center}.brand h1{margin:0;font-size:clamp(44px,15vw,76px);letter-spacing:4px;font-weight:900;background:linear-gradient(180deg,#f6e6a8,var(--gold) 55%,#8a6510);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 0 rgba(0,0,0,.35)}.tagline{margin:6px 0 0;color:var(--muted);font-size:15px}.menu-box{width:min(360px,100%);display:flex;flex-direction:column;gap:10px}input,button{font:inherit;border-radius:14px;border:1px solid var(--line);padding:15px 18px}input{background:var(--panel);color:var(--text);outline:none}input::placeholder{color:var(--muted)}button{background:var(--panel);color:var(--text);font-weight:700;cursor:pointer;transition:transform .08s ease,filter .15s ease}button:active{transform:scale(.97)}button.primary{background:linear-gradient(180deg,#f3cd5c,var(--gold));color:#2a2003;border-color:#a97f16}button.ghost{background:transparent;color:var(--muted)}button.small{padding:9px 14px;font-size:14px;border-radius:10px}button:disabled{opacity:.5;pointer-events:none}#menu-status{min-height:20px;margin:4px 0 0;text-align:center;color:var(--gold);font-size:14px}.row{display:flex;gap:10px}.row button{flex:1}.topbar{position:absolute;top:calc(10px + var(--safe-top));left:0;right:0;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.topbar .mark{font-weight:800;letter-spacing:.16em;font-size:13px;color:var(--muted)}button.account{padding:8px 14px;border-radius:999px;background:#23281a;border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.account.in{border-color:var(--gold);color:var(--gold)}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:min(92vw,460px)}button.mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;border-radius:16px;background:#23281a;border:1px solid var(--line);color:var(--text);cursor:pointer;text-align:center}button.mode.wide{grid-column:1 / -1}button.mode:disabled{opacity:.5;cursor:default}button.mode:not(:disabled){border-color:var(--gold)}button.mode:not(:disabled):active{background:#2e3522}.mode-art{font-size:34px;line-height:1}.mode-name{font-weight:700;font-size:15px}.mode-note{font-size:12px;color:var(--muted)}.tabs{display:flex;gap:6px;width:100%}button.tab{flex:1;padding:9px 0;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}button.tab.on{background:#23281a;color:var(--text);border-color:var(--gold)}#auth-form{display:flex;flex-direction:column;gap:10px;width:100%}.hint{min-height:18px;margin:0;font-size:13px;color:var(--muted);text-align:center}.hint.bad{color:#ff9d92}button.google{display:flex;align-items:center;justify-content:center;gap:9px;background:#f5f5f3;color:#1f1f1f;border:none}button.google .g{font-weight:800;color:#4285f4;font-size:17px}button.link{background:none;border:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:2px;cursor:pointer}button.link:active{color:var(--gold)}#reset-step2{display:flex;flex-direction:column;gap:10px;width:100%}#reset-step2.hidden{display:none}button.account.unverified:after{content:" !";color:var(--red);font-weight:800}.searching{display:flex;gap:10px;padding:6px 0 2px}.searching span{width:12px;height:12px;border-radius:50%;background:var(--gold);animation:hop 1.1s ease-in-out infinite}.searching span:nth-child(2){animation-delay:.18s}.searching span:nth-child(3){animation-delay:.36s}@keyframes hop{0%,70%,to{transform:translateY(0);opacity:.45}35%{transform:translateY(-9px);opacity:1}}#search-time{font-variant-numeric:tabular-nums}.avatar{flex:none;display:inline-grid;place-items:center;border-radius:50%;background:#2c3222 center/cover no-repeat;border:1px solid var(--line);color:var(--gold);font-weight:800;text-transform:uppercase;overflow:hidden;width:24px;height:24px;font-size:11px}.avatar.big{width:84px;height:84px;font-size:32px;border-width:2px}.avatar-row{display:flex;align-items:center;gap:14px;width:100%}.avatar-acts{display:flex;flex-direction:column;gap:8px;flex:1}.avatar-acts button{width:100%}button.account{display:inline-flex;align-items:center;gap:8px}.panel{width:min(92vw,360px);margin-top:18px;background:#12140d;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}.panel h2{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}.panel input{flex:1;min-width:0}.panel .row button{flex:0 0 auto;padding:0 14px}.friend-list{display:flex;flex-direction:column;gap:6px;max-height:30vh;overflow-y:auto}.friend{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:#191c12;font-size:14px}.friend .nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend .dot{width:9px;height:9px;border-radius:50%;background:#5a6350;flex:none}.friend.online .dot{background:#7fc24a;box-shadow:0 0 7px #7fc24a}.friend .tag{font-size:11px;color:var(--muted)}.friend button{padding:5px 10px;font-size:12px;border-radius:8px}.friend-list .empty{color:var(--muted);font-size:13px;text-align:center;padding:6px 0}.code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:44px;font-weight:800;letter-spacing:10px;text-indent:10px;color:var(--gold);background:#12140d;border:2px dashed var(--line);border-radius:14px;padding:14px 10px;width:100%}.code-input{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:34px;font-weight:800;letter-spacing:10px;text-indent:10px;text-align:center;text-transform:uppercase;width:100%}#game{justify-content:center;gap:8px}#board-host{width:100%;max-width:min(96vw,78vh);margin:0 auto;aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px #0000008c,0 0 0 3px #10130c}.board-canvas{width:100%!important;height:100%!important;display:block}.player-strip{width:100%;max-width:min(96vw,78vh);margin:0 auto;display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:14px;min-height:40px}.player-strip .dot{width:11px;height:11px;border-radius:50%;background:#6b6b6b;flex:none}.player-strip.active .dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}.player-strip.active{border-color:var(--gold)}.player-strip .pname{font-weight:700;white-space:nowrap}.grave{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;opacity:.85}.grave img{width:17px;height:20px;object-fit:contain}img.side-b{filter:brightness(.72) saturate(.8) contrast(1.05)}img.side-w{filter:brightness(1.06)}.bar{width:100%;max-width:min(96vw,78vh);margin:0 auto;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}.nav{display:flex;align-items:center;gap:6px}button.icon{min-width:34px;height:32px;padding:0 8px;border-radius:9px;background:#23281a;border:1px solid var(--line);color:var(--text);font-size:17px;line-height:1;cursor:pointer}button.icon:disabled{opacity:.35;cursor:default}button.icon:not(:disabled):active{background:#2e3522}#nav-pos{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}#board-host.replay{outline:3px solid var(--gold);outline-offset:-3px;border-radius:6px}.chat{width:100%;max-width:min(96vw,78vh);margin:0 auto;display:flex;flex-direction:column;gap:6px;min-height:0}.chat-log{flex:1 1 auto;min-height:54px;max-height:22vh;overflow-y:auto;overscroll-behavior:contain;background:#12140d;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px;line-height:1.45;display:flex;flex-direction:column;gap:4px}.chat-log .line{word-break:break-word}.chat-log .who{font-weight:700;margin-right:5px}.chat-log .line.mine .who{color:var(--gold)}.chat-log .line.theirs .who{color:#9ec9f2}.chat-log .sys{color:var(--muted);font-style:italic}.chat-log .empty{color:var(--muted)}.chat-form{display:flex;gap:6px}.chat-form input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;background:#12140d;border:1px solid var(--line);color:var(--text);font-size:15px}.chat-form button{height:auto}.clock{flex:none;margin-left:8px;min-width:68px;text-align:center;padding:5px 8px;border-radius:9px;background:#12140d;border:1px solid var(--line);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}.clock:empty{display:none}.player-strip.active .clock{color:var(--text);border-color:var(--gold);background:#23281a}.clock.low{color:#ffca9a;border-color:#b4651f}.player-strip.active .clock.low{color:#ffd9b8}.clock.critical{color:#fff;background:#7a1d14;border-color:var(--red);animation:tick 1s steps(2) infinite}@keyframes tick{50%{opacity:.55}}.banner{position:fixed;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translate(-50%);z-index:45;max-width:92vw;padding:10px 16px;border-radius:999px;background:#14170ff5;border:1px solid var(--red);color:#ffc7c0;font-size:14px;font-weight:600;text-align:center;box-shadow:0 8px 26px #00000080}.banner.warn{border-color:var(--gold);color:#f7e2ab}.banner.ok{border-color:#6f9c4a;color:#cfeeae}#toasts{position:fixed;left:50%;top:calc(10px + var(--safe-top));transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:40;width:max-content;max-width:92vw}.toast{padding:9px 15px;border-radius:999px;background:#14170ff0;border:1px solid var(--line);font-size:14px;font-weight:600;animation:pop .25s ease,fade .4s ease 2.1s forwards;text-align:center}.toast.good{border-color:#6f9c4a;color:#cfeeae}.toast.bad{border-color:var(--red);color:#ffc7c0}.toast.info{border-color:var(--gold);color:#f7e2ab}@keyframes pop{0%{opacity:0;transform:translateY(-8px) scale(.95)}}@keyframes fade{to{opacity:0;transform:translateY(-6px)}}.overlay{position:fixed;inset:0;background:#080a06d1;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.card{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:0 20px 60px #0009}.card.wide{width:min(520px,100%);max-height:86vh;overflow-y:auto;text-align:left}.card h2{margin:0;font-size:21px;letter-spacing:1px}.card p{margin:0;color:var(--muted);font-size:15px}.card button{width:100%}#wheel{width:min(260px,70vw);height:auto}.slots h2{color:var(--gold);letter-spacing:5px;font-size:26px}.reels{display:flex;gap:8px;padding:10px;background:#12140d;border:3px solid var(--gold);border-radius:14px}.reel{width:74px;height:92px;overflow:hidden;background:linear-gradient(180deg,#2a2d20,#171a11);border-radius:8px;position:relative}.reel .strip{position:absolute;left:0;top:0;width:100%;will-change:transform}.reel .strip img{width:100%;height:92px;object-fit:contain;display:block}.reel:after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 14px 16px -8px #000,inset 0 -14px 16px -8px #000;pointer-events:none}#slots-text{min-height:24px;font-weight:800;font-size:17px;color:var(--text)}#slots-text.jackpot{color:var(--gold);font-size:24px;letter-spacing:3px;animation:shake .4s ease infinite alternate}@keyframes shake{0%{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.08)}}.promo-row{display:flex;gap:8px;width:100%}.promo-row button{flex:1;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}.promo-row img{width:42px;height:50px}.rule{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}.rule:last-of-type{border-bottom:none}.rule img{width:46px;height:55px;flex:none}.rule h3{margin:0 0 4px;font-size:16px}.rule p{margin:3px 0;font-size:13.5px;line-height:1.45}.rule b{color:var(--gold)}#over-title{font-size:26px}#over-title.win{color:#a7e07a}#over-title.lose{color:var(--red)}