:root{--bg:#14110f;--panel:#1f1a17;--ink:#f1e9dc;--mute:#a79c8c;--acc:#e0523f;--lt:#ecdab9;--dk:#ae8a68;--bs:min(100vw, calc(100dvh - 250px) ,680px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}#app{height:100dvh;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 calc(8px + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none}#opp,.you,#chat,#bar{width:var(--bs)}#opp{display:flex;align-items:center;gap:10px;padding:0 8px}.av{position:relative;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#e0523f,#7a2a52);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}.av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#43c06b;border:2px solid var(--bg)}.who{display:flex;flex-direction:column;line-height:1.15}.who b{font-size:16px}.who span{font-size:12px;color:var(--mute)}.cap{margin-left:auto;display:flex;align-items:center;min-height:20px;flex-wrap:wrap;justify-content:flex-end}.cap img{width:16px;height:16px;margin-right:-6px}.cap em{font-style:normal;font-size:12px;color:var(--mute);margin-left:10px}#chat{position:relative;min-height:46px;padding:0 8px;display:flex;align-items:center}#bub{max-width:100%;background:var(--panel);border-radius:4px 16px 16px;padding:8px 12px;font-size:14px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;border:1px solid #ffffff14}#bub.on{opacity:1;transform:none}#bub b{color:#ff8b78;margin-right:4px}#typing{position:absolute;left:8px;top:50%;translate:0 -50%;display:none;background:var(--panel);border-radius:4px 16px 16px;padding:10px 14px;gap:4px;border:1px solid #ffffff14}#typing.on{display:flex}#typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:bl 1s infinite}#typing i:nth-child(2){animation-delay:.15s}#typing i:nth-child(3){animation-delay:.3s}@keyframes bl{0%,60%,to{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}#bw{position:relative;width:var(--bs);height:var(--bs);flex:none}#board{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;touch-action:none;box-shadow:0 8px 30px #0008;cursor:pointer}.you{display:flex;align-items:center;padding:0 8px;min-height:24px}#status{margin-left:auto;font-size:13px;color:var(--mute);text-align:right}#status.warn{color:#ff8b78;font-weight:700}#bar{display:flex;gap:6px;padding:0 8px;margin-top:auto}button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid #ffffff1c;border-radius:12px;padding:12px 8px;min-height:46px;cursor:pointer;touch-action:manipulation}#bar button{flex:1}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid #fff;outline-offset:2px}button.pri{background:var(--acc);border-color:var(--acc);font-weight:800}button:disabled{opacity:.4}#promo,#over{position:absolute;inset:0;display:grid;place-items:center;background:#000a;z-index:5;border-radius:6px}#promo[hidden],#over[hidden]{display:none}#promo .row{display:flex;gap:8px;background:var(--panel);padding:10px;border-radius:16px}#promo button{width:calc(var(--bs)/5);height:calc(var(--bs)/5);padding:4px;background:var(--lt);border-radius:12px}#promo img{width:100%;height:100%}.card{background:var(--panel);border-radius:20px;padding:20px 18px;width:min(88%,360px);text-align:center;border:1px solid #ffffff1c}.card .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.card .h{font-size:28px;font-weight:800;margin:4px 0 8px}.card .q{font-size:14px;color:#ffb5a8;margin-bottom:14px;min-height:38px}.card .row{display:flex;gap:8px;flex-wrap:wrap}.card .row button{flex:1;min-width:90px}dialog{border:1px solid #ffffff22;background:var(--panel);color:var(--ink);border-radius:20px;padding:20px;width:min(92vw,380px)}dialog::backdrop{background:#000b}dialog h2{margin:0 0 12px;font-size:20px}.lv{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.lv button{display:flex;justify-content:space-between;text-align:left}.lv button small{color:var(--mute)}.lv button.on,.sd button.on{background:var(--acc);border-color:var(--acc)}.sd{display:flex;gap:6px;margin-bottom:14px}.sd button{flex:1}dialog .row{display:flex;gap:8px}dialog .row button{flex:1}.rec{margin:12px 0 0;font-size:12px;color:var(--mute)}.keys{margin:6px 0 0;font-size:11px;color:var(--mute)}@media(min-width:900px){:root{--bs:min( calc(100dvh - 210px) ,680px)}#app{justify-content:center}#bar{margin-top:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}