*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:#f3ead8;font-family:system-ui,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#4a2f1a;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 96px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),linear-gradient(#5b3a20,#3a2413);background-attachment:fixed}
header{display:flex;align-items:center;gap:6px;padding:6px 8px 4px}
h1{margin:0;font-family:Georgia,serif;font-size:clamp(18px,5vw,28px);color:#f5c542;text-shadow:2px 2px 0 #000;flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.corner{font:600 14px system-ui;padding:6px 10px;border-radius:8px;border:1px solid #c4a35a;background:rgba(20,12,6,.7);color:#f3ead8;text-decoration:none;cursor:pointer;white-space:nowrap}
@media(max-width:560px){.wide{display:none}h1{font-size:19px}h1 .em{display:none}}
section{max-width:620px;margin:0 auto;padding:4px 10px 16px}
h3{font-family:Georgia,serif;color:#f5c542;margin:18px 0 8px;font-size:19px}
.hello{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;font-size:17px}
.lnk{background:none;border:0;color:#f5c542;font:600 14px system-ui;cursor:pointer;text-decoration:underline;padding:6px}
.big{display:block;width:100%;font:800 21px Georgia,serif;padding:16px;border-radius:14px;border:2px solid #f5c542;background:linear-gradient(#3b8f3f,#22662a);color:#fff;cursor:pointer;box-shadow:0 4px 0 #123d17,0 6px 16px rgba(0,0,0,.4);transition:transform .1s}
.big:active{transform:translateY(3px);box-shadow:0 1px 0 #123d17}.big:disabled{filter:grayscale(.8);opacity:.6}
.sub{font-size:13px;opacity:.85;margin:6px 2px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sb{font:700 15px system-ui;padding:9px 13px;border-radius:9px;border:1px solid #c4a35a;background:#2e7d32;color:#fff;cursor:pointer;transition:transform .08s,filter .15s}.sb:active{transform:scale(.96)}.sb:disabled{opacity:.4;cursor:default}
.sb.alt{background:rgba(20,12,6,.75)}.sb.red{background:#7d2420}
.gi{display:flex;align-items:center;gap:10px;padding:12px;margin:8px 0;border-radius:12px;background:rgba(20,12,6,.72);border:1px solid #6b5230;cursor:pointer;transition:transform .12s,border-color .12s}
.gi:hover{transform:translateY(-2px);border-color:#c4a35a}.gi.mine{border:2px solid #f5c542;box-shadow:0 0 14px rgba(245,197,66,.25)}
.gi .who{flex:1;font-weight:700;font-size:16px}.gi .who small{display:block;font-weight:500;opacity:.8;font-size:13px;margin-top:2px}
.gi .sc{font:800 17px ui-monospace,monospace;color:#ffe68a}.tag{font:800 11px system-ui;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:6px;background:#3a2a18}.tag.go{background:#f5c542;color:#2b1d12}
.board{background:rgba(20,12,6,.6);border-radius:10px;padding:6px 10px}.board div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.07)}
/* game */
#scores{display:flex;align-items:stretch;gap:6px;margin:2px 0 4px}.pl{flex:1;display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:10px;background:rgba(20,12,6,.7);border:2px solid transparent;transition:border-color .25s,box-shadow .25s}
.pl.on{border-color:#f5c542;box-shadow:0 0 12px rgba(245,197,66,.35)}.pl .n{font-weight:700;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl .s{font:800 24px ui-monospace,monospace;color:#ffe68a}
#mid{display:flex;align-items:center;justify-content:center;min-width:64px;font-size:12px;text-align:center;opacity:.9}
#status{text-align:center;font-weight:700;min-height:22px;margin:2px 0 4px;color:#f5c542}
#invite{background:rgba(20,12,6,.8);border:1px dashed #f5c542;border-radius:10px;padding:8px;margin:4px 0;font-size:14px}.inv{display:flex;gap:6px;margin-top:6px}.inv input{flex:1;min-width:0;font:14px ui-monospace,monospace;padding:8px;border-radius:8px;border:1px solid #c4a35a;background:#1d140c;color:#f3ead8}
#bwrap{display:flex;justify-content:center}
#bd{--s:calc(min(100vw - 20px, 600px, 100dvh - 290px) / 15);display:grid;grid-template-columns:repeat(15,var(--s));grid-template-rows:repeat(15,var(--s));gap:0;padding:4px;border-radius:10px;background:#2a1a0d;box-shadow:0 0 0 3px #7a5428,0 8px 24px rgba(0,0,0,.55);touch-action:manipulation}
@media(max-height:620px){#bd{--s:calc(min(100vw - 20px, 600px) / 15)}}
.c{position:relative;border:1px solid rgba(60,38,18,.55);background:#d8c08e;display:flex;align-items:center;justify-content:center;font:800 calc(var(--s)*.3) system-ui;color:rgba(255,255,255,.95);letter-spacing:-.02em;overflow:visible}
.c.dl{background:#4f8fb8}.c.tl{background:#2f6e3b}.c.dw{background:#c0703a}.c.tw{background:#9c2a24}.c.st{background:#c0703a;font-size:calc(var(--s)*.6);color:#ffe68a}
.c.hot{outline:2px solid #ffe68a;outline-offset:-2px;z-index:1}
.t{position:absolute;inset:1px;border-radius:calc(var(--s)*.14);background:linear-gradient(160deg,#fbecc6 0%,#ecd09a 55%,#d9b571 100%);box-shadow:inset 0 -2px 0 rgba(120,80,30,.55),inset 0 1px 0 #fff8e4,0 1px 2px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#3a210c;font:900 calc(var(--s)*.62)/1 Georgia,"Times New Roman",serif;text-shadow:0 1px 0 rgba(255,255,255,.5);z-index:2}
.t i{position:absolute;right:9%;bottom:5%;font:800 calc(var(--s)*.25)/1 system-ui;font-style:normal;color:#6b4518}
.t.bl{color:#8a2b1a}.t.bl i{display:none}
.t.pend{background:linear-gradient(160deg,#fff6d5,#f5d98a);box-shadow:0 0 0 2px #f5c542,0 3px 6px rgba(0,0,0,.5);cursor:grab;animation:pop .22s cubic-bezier(.3,1.6,.5,1)}
.t.last{box-shadow:inset 0 -2px 0 rgba(120,80,30,.55),0 0 0 2px #ff9d3a}.t.drop{animation:drop .45s cubic-bezier(.25,1.4,.5,1) both}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}@keyframes drop{from{transform:translateY(-40px) scale(1.4);opacity:0}to{transform:none;opacity:1}}
#preview{text-align:center;min-height:24px;font-weight:700;margin:6px 0 2px}#preview.bad{color:#ff9d8a}#preview.good{color:#a8f0a0}
#rack{--r:min(calc((100vw - 64px) / 7),58px);display:flex;justify-content:center;gap:6px;padding:8px;margin:2px auto;max-width:520px;border-radius:12px;background:linear-gradient(#7a5428,#5b3a1a);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 3px 0 #2e1c0c;min-height:calc(var(--r) + 16px);touch-action:none}
.rt{position:relative;width:var(--r);height:var(--r);flex:none;border-radius:calc(var(--r)*.14);background:linear-gradient(160deg,#fbecc6 0%,#ecd09a 55%,#d9b571 100%);box-shadow:inset 0 -3px 0 rgba(120,80,30,.6),inset 0 1px 0 #fff8e4,0 3px 5px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#3a210c;font:900 calc(var(--r)*.62)/1 Georgia,serif;cursor:grab;transition:transform .15s,opacity .15s;user-select:none;-webkit-user-select:none}
.rt i{position:absolute;right:8%;bottom:5%;font:800 calc(var(--r)*.26)/1 system-ui;font-style:normal;color:#6b4518}
.rt.sel{transform:translateY(-8px);box-shadow:0 0 0 3px #f5c542,0 8px 12px rgba(0,0,0,.5)}.rt.ghost{opacity:.25}.rt.sw{box-shadow:0 0 0 3px #ff6a4a;transform:translateY(-6px)}
.drag{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-60%) scale(1.15);box-shadow:0 12px 24px rgba(0,0,0,.55)!important;transition:none}
#acts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0}#bPlay{min-width:110px;font-size:17px}
#log{font-size:13px;opacity:.85;max-height:120px;overflow:auto;padding:4px 6px}#log div{padding:2px 0}
.ov{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(10,6,3,.72);padding:16px;animation:fade .2s}
.ov[hidden],[hidden]{display:none!important}@keyframes fade{from{opacity:0}}
.card{background:#2b1d12;border:2px solid #c4a35a;border-radius:16px;padding:18px;max-width:420px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:rise .25s ease-out}@keyframes rise{from{transform:translateY(20px);opacity:0}}
.card h2{font-family:Georgia,serif;color:#f5c542;margin:0 0 8px}.card input{width:100%;font:700 20px system-ui;padding:10px;border-radius:10px;border:1px solid #c4a35a;background:#1d140c;color:#fff;text-align:center;margin:6px 0}
.err{color:#ff9d8a;min-height:20px;font-size:14px}
.btn{display:inline-block;font:700 16px system-ui;padding:10px 14px;margin:4px;border-radius:10px;border:1px solid #c4a35a;background:#2e7d32;color:#fff;text-decoration:none;cursor:pointer}.btn.alt{background:#1d140c}
.endnav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin-top:8px}
#abc{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}#abc button{font:900 22px Georgia,serif;padding:8px 0;border-radius:8px;border:0;background:#ecd09a;color:#3a210c;cursor:pointer}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(30px);background:#1d140c;border:1px solid #c4a35a;padding:10px 16px;border-radius:10px;opacity:0;transition:.25s;z-index:60;pointer-events:none;font-weight:600;max-width:90vw;text-align:center}#toast.on{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#acts{align-items:center}#acts .gap{flex:0 0 28px}
#bRes{background:transparent;border:1px solid rgba(255,140,120,.45);color:#ff9d8a;font-size:13px;padding:6px 10px;opacity:.85}
@media(max-width:560px){#acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}#acts .gap{display:none}#bPlay{grid-column:3/5;grid-row:1}#bRecall{grid-column:1/3;grid-row:1}#bShuf{grid-column:1/3;grid-row:2}#bSwap{grid-column:3;grid-row:2}#bPass{grid-column:4;grid-row:2}#bRes{grid-column:1/3;grid-row:4;margin-top:18px;justify-self:start}}
#mb.danger{flex-direction:column;align-items:center;gap:14px}
.btn.cancel{font-size:19px;padding:14px 40px;background:#2e7d32;border:2px solid #f5c542;box-shadow:0 0 0 4px rgba(245,197,66,.25);min-width:70%}
.btn.yes{background:transparent;border:1px solid #c0503f;color:#ff8f7a;font-size:14px;padding:7px 14px}
#rack .rt{transition:transform .16s ease-out}#rack .rt.gap{opacity:.18!important;box-shadow:inset 0 0 0 2px rgba(245,197,66,.6)}
#bd .t.pend{touch-action:none}