:root{--bg:#0f1226;--bg2:#171b3a;--card:#1d2248;--line:#2c3366;--text:#f4f5ff;--muted:#9aa0c8;--accent:#ffd23f;--accent-ink:#2a2100;--win:#3df2a0;--lose:#ff5a6e;--draw:#7ea6ff;--r:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Heebo",system-ui,-apple-system,"Arial Hebrew",Arial,sans-serif;font-size:17px;line-height:1.35;-webkit-text-size-adjust:100%}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{max-width:520px;margin:0 auto;padding:14px 16px 40px;min-height:100vh;display:flex;flex-direction:column;gap:14px}
h1,h2,h3{margin:0;font-weight:900;line-height:1.15}
h1{font-size:28px}h2{font-size:22px}h3{font-size:17px}
p{margin:0}
.muted{color:var(--muted)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center}
.row.sp{justify-content:space-between}
.grow{flex:1;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.center{text-align:center}
button,.btn{font:inherit;font-weight:800;border:0;border-radius:14px;padding:15px 18px;min-height:52px;cursor:pointer;color:var(--text);background:var(--line);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
button:disabled{opacity:.45;cursor:default}
.btn.primary,button.primary{background:var(--accent);color:var(--accent-ink);font-size:19px}
.btn.ghost,button.ghost{background:transparent;border:1.5px solid var(--line);color:var(--text)}
.btn.wide,button.wide{width:100%}
.btn.small,button.small{min-height:40px;padding:8px 14px;font-size:15px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px}
.top .back{background:transparent;padding:8px 10px;min-height:44px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);font-size:14px;font-weight:600}
.chip.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.chip.win{color:var(--win)}.chip.lose{color:var(--lose)}.chip.draw{color:var(--draw)}
.big{font-size:56px;font-weight:900;line-height:1}
.score-lg{font-size:44px;font-weight:900}
.vs{display:flex;align-items:stretch;gap:10px}
.vs>div{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 8px;text-align:center}
.vs .name{font-size:14px;color:var(--muted);font-weight:600}
.vs .val{font-size:38px;font-weight:900;margin-top:4px}
.vs .win{border-color:var(--win);box-shadow:0 0 0 2px rgba(61,242,160,.25)}
.vs .lose{opacity:.8}
.record{display:flex;justify-content:center;gap:20px;text-align:center}
.record b{display:block;font-size:34px;font-weight:900}
.record span{font-size:13px;color:var(--muted)}
.record .w b{color:var(--win)}.record .l b{color:var(--lose)}.record .d b{color:var(--draw)}
.item{display:flex;gap:12px;align-items:center;text-align:start;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-height:64px}
.item.action{border-color:var(--accent)}
.item .ic{font-size:30px;width:42px;text-align:center}
.item .t{font-weight:800}
.item .s{font-size:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gbtn{flex-direction:column;background:var(--card);border:1px solid var(--line);min-height:110px;padding:12px 8px;font-size:17px;text-align:center}
.gbtn .ic{font-size:34px}
.gbtn small{font-weight:400;color:var(--muted);font-size:13px}
.bubble{background:var(--bg2);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-weight:600}
.bubble .who{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:2px}
.taunts{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto}
.taunt{text-align:start;font-weight:600;background:var(--bg2);border:1.5px solid var(--line);min-height:46px;padding:10px 12px;border-radius:12px}
.taunt[aria-pressed=true]{border-color:var(--accent);background:rgba(255,210,63,.14)}
input[type=text]{font:inherit;width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg2);color:var(--text);min-height:48px}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);display:block}
.dots i.on{background:var(--accent)}
.err{background:rgba(255,90,110,.12);border:1px solid var(--lose);border-radius:14px;padding:12px;color:#ffd5db}
.note{font-size:14px;color:var(--muted)}
.hist{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.hist:first-child{border-top:0}
.sticky-foot{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(transparent,var(--bg) 30%)}
/* play host */
.playhost{position:fixed;inset:0;background:#000;z-index:5}
.playhost iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.playhost .cover{position:absolute;inset:0;background:var(--bg);overflow:auto;padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.playhost .cover .stack{max-width:520px;margin:0 auto;width:100%}
/* reveal */
.reveal{position:fixed;inset:0;z-index:9;background:radial-gradient(circle at 50% 35%,#2a2f6b,var(--bg) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center}
.reveal .drum{font-size:30px;font-weight:900;animation:pulse .5s ease-in-out infinite alternate}
.reveal .bar{width:min(70vw,300px);height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.reveal .bar i{display:block;height:100%;background:var(--accent);width:0;animation:fill 1.5s linear forwards}
@keyframes fill{to{width:100%}}
@keyframes pulse{from{transform:scale(.94);opacity:.7}to{transform:scale(1.06);opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.win-banner{font-size:42px;font-weight:900}
.win-banner.win{color:var(--win)}.win-banner.lose{color:var(--lose)}.win-banner.draw{color:var(--draw)}
@media (prefers-reduced-motion:reduce){.reveal .drum,.pop{animation:none}.reveal .bar i{animation:none;width:100%}}
table.rep{width:100%;border-collapse:collapse;font-size:15px}
table.rep td,table.rep th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:start}