:root{
  --cell:clamp(30px,min(calc((100vh - 300px)/10),calc((100vw - 330px)/10)),64px);
  --ts:var(--cell);
  --chips:#12a89d; --mult:#7d78d6; --x:#a55fd0; --gold:#ffc93c; --panel:#10242a; --panel2:#17333a; --ink:#f3ecd8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:#0e2a2a;color:var(--ink);font-family:"Arial Rounded MT Bold",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#bg{position:fixed;left:50%;top:50%;width:50vmax;height:50vmax;margin:-25vmax 0 0 -25vmax;background:conic-gradient(from 0deg,#17463c,#0f2f33,#1f5a4a,#123a3a,#1a4d52,#17463c);animation:bgspin 180s linear infinite;will-change:transform}
@keyframes bgspin{from{transform:scale(4.2) rotate(0)}to{transform:scale(4.2) rotate(360deg)}}
#vig{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px);pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
#app{position:fixed;inset:0}
button{font:inherit;color:#fff;background:#35606a;border:0;border-radius:10px;padding:8px 14px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .06s,filter .1s}
button:hover{filter:brightness(1.15)}
button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
button:disabled{opacity:.4;cursor:default;filter:none;transform:none}
button.play{background:#e8743b}button.blue{background:#2f7fe0}button.green{background:#2fa05a}button.red{background:#c0392b}

/* ---------- tiles ---------- */
.tile{width:var(--ts);height:var(--ts);flex:none;border-radius:14%;background:linear-gradient(160deg,#fbf1d3,#e9d5a1);box-shadow:inset 0 -4px 0 #c9ad6d,inset 0 2px 0 #fffbe8,0 2px 4px rgba(0,0,0,.45);color:#3a2a14;position:relative;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:calc(var(--ts)*.56);line-height:1;touch-action:none}
.tile .l{transform:translateY(-4%)}
.tile .v{position:absolute;right:9%;bottom:9%;font-size:.36em}
.tile[data-drag]{cursor:grab}
.tile.blank .l{color:#b0552a;font-style:italic}
.tile.sapphire{background:linear-gradient(160deg,#dcf7e6,#6fcf9f);box-shadow:inset 0 -4px 0 #2f8f63,inset 0 2px 0 #f2fff7,0 2px 4px rgba(0,0,0,.45),0 0 8px rgba(80,220,150,.7)}
.tile.ruby{background:linear-gradient(160deg,#eeeaff,#aaa1ec);box-shadow:inset 0 -4px 0 #6259b3,inset 0 2px 0 #f8f6ff,0 2px 4px rgba(0,0,0,.45),0 0 8px rgba(150,140,255,.65)}
.tile.gold{background:linear-gradient(135deg,#fff6bf 0 35%,#ffe066 45%,#f0bb22 100%);box-shadow:inset 0 -4px 0 #b3840c,inset 0 2px 0 #fffbe0,0 2px 4px rgba(0,0,0,.45),0 0 8px rgba(255,205,60,.75)}
.tile.crystal{background:linear-gradient(135deg,#f1fdff 0 28%,#b5edf5 28% 42%,#eafcff 42% 58%,#9fe0ec 100%);box-shadow:inset 0 -4px 0 #62b3c2,inset 0 2px 0 #fff,0 2px 4px rgba(0,0,0,.45),0 0 9px rgba(150,240,255,.8)}
.tile.iron{background:linear-gradient(160deg,#e4e9ee,#939fab);box-shadow:inset 0 -4px 0 #56616c,inset 0 2px 0 #f6f8fa,0 2px 4px rgba(0,0,0,.45);color:#1c242c}
.tile.bonus .v{color:#0f7d76}
.tile.debuffed{filter:grayscale(1) brightness(.6)}
.tile.sel{transform:translateY(-22%);outline:3px solid var(--gold)}
.tile.pend.drop{animation:drop .16s ease-out}
.tile.pend{outline:2px solid rgba(255,255,255,.75)}
.tile.ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;margin:calc(var(--ts)/-2) 0 0 calc(var(--ts)/-2);box-shadow:inset 0 -4px 0 #c9ad6d,0 14px 18px rgba(0,0,0,.5);rotate:-4deg}
.tile.pop{animation:pop .28s ease-out}
@keyframes drop{from{transform:scale(1.35);opacity:.5}}
@keyframes pop{30%{transform:scale(1.32) rotate(-6deg)}60%{transform:scale(.94) rotate(3deg)}}

/* ---------- title ---------- */
#app.title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center}
.logo{display:flex;gap:5px;justify-content:center}
.logo .tile{animation:bob 2.6s ease-in-out infinite}
.logo.big{--ts:clamp(40px,7.5vw,86px)}
.logo.small{--ts:23px;gap:2px;margin-bottom:2px}
.logo.small .tile{animation:none;box-shadow:inset 0 -2px 0 #c9ad6d,0 1px 2px rgba(0,0,0,.4)}
@keyframes bob{50%{transform:translateY(-9%) rotate(2deg)}}
.tag{font-size:19px;opacity:.85;margin:0}
.bags{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.bagc{width:210px;padding:14px;border-radius:14px;background:var(--panel);border:3px solid transparent;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.bagc.on{border-color:var(--gold)}.bagc.locked{opacity:.5;cursor:default}
.bagc svg{width:64px;height:64px}.bagc h3{margin:6px 0 4px;font-size:16px}.bagc p{margin:0;font-size:12.5px;opacity:.8;font-family:system-ui,sans-serif;line-height:1.35}
.tbtns{display:flex;gap:12px}.tbtns button{font-size:19px;padding:12px 24px}
.records{font-size:13px;opacity:.7;font-family:system-ui,sans-serif}

/* ---------- game layout ---------- */
#app.game{display:grid;grid-template-columns:268px 1fr;gap:10px;padding:10px}
#side{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;scrollbar-width:none}
.panel{background:var(--panel);border-radius:12px;padding:9px 11px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.sub{font-size:11.5px;opacity:.7;font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.round{border-left:6px solid #e8743b}.round.boss{border-left-color:#d9442e;background:#2a1a22}
.rname{font-size:21px;margin:2px 0}.bdesc{font-size:13px;color:#ffb3a6;font-family:system-ui,sans-serif;margin-bottom:4px}
.target{font-size:14px}.target b{font-size:25px;color:#ffe9a8;display:block}
.scorep{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px}.scorep span{font-size:13px;opacity:.8}.scorep b{font-size:25px}
.bar{grid-column:1/3;height:8px;border-radius:5px;background:#06141a;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#2fa05a,#b5e04a);transition:width .5s}
.calc{text-align:center}
#calcLabel{font-size:12.5px;min-height:34px;font-family:system-ui,sans-serif;font-weight:600;display:flex;flex-wrap:wrap;gap:3px 7px;align-items:center;justify-content:center;line-height:1.25}
#calcLabel.bad{color:#ff9d8f}
#calcLabel .ok{color:#9cf08a}#calcLabel .no{color:#ff7d6e;text-decoration:line-through}
.cm{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px}
.cm span{flex:1;font-size:23px;padding:5px 4px;border-radius:9px;min-width:0;overflow:hidden}
#chips{background:var(--chips);text-align:right}#mult{background:var(--mult);text-align:left}
.cm em{font-style:normal;font-size:20px;color:var(--gold)}
.cm span.bump{animation:bump .18s}
@keyframes bump{40%{transform:scale(1.18)}}
#calcTotal{font-size:26px;color:var(--gold);height:0;overflow:hidden;transition:height .15s}
#calcTotal.on{height:32px;animation:bump .3s}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st{background:var(--panel);border-radius:12px;padding:6px 10px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.st span{display:block;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;font-family:system-ui,sans-serif}
.st b{font-size:23px}.st.plays b{color:#f3ecd8}.st.swaps b{color:#c9b6ff}.st.money b{color:var(--gold)}
.sbtns{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto}.sbtns button{padding:7px;font-size:14px}

#main{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;min-height:0}
#top{display:flex;gap:10px;width:100%;justify-content:center}
.slots{background:rgba(6,20,26,.55);border-radius:12px;padding:5px 9px 8px}
.slabel{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.06em;font-family:system-ui,sans-serif;margin-bottom:3px}
.srow{display:flex;gap:7px}
.charm,.ink{width:66px;height:88px;border-radius:9px;position:relative;flex:none}
.ink{width:54px}
.charm svg,.ink svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.charm.own,.ink.own{cursor:pointer;transition:transform .12s}
.charm.own:hover,.ink.own:hover{transform:translateY(-4px) rotate(-2deg)}
.charm.empty,.ink.empty{border:2px dashed rgba(255,255,255,.16)}
.charm.sel,.ink.sel{transform:translateY(-4px);outline:3px solid var(--gold);z-index:5}
.charm.pop,.ink.pop{animation:pop .28s ease-out}
.pop-btns{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;gap:4px;margin-top:6px;z-index:20;white-space:nowrap}
.pop-btns button{padding:5px 9px;font-size:12px}

/* ---------- board ---------- */
#board{display:grid;grid-template-columns:repeat(9,var(--cell));grid-auto-rows:var(--cell);gap:3px;padding:8px;background:#0a1c21;border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.35),inset 0 0 0 3px #24525a}
.cell{background:#1d4b45;border-radius:14%;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.cell .tile{width:100%;height:100%}
.cell .pl{font-size:calc(var(--cell)*.3);opacity:.92;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.cell.DL{background:#3f8ccc}.cell.TL{background:#2256b8}.cell.DW{background:#b06c8c}.cell.TW{background:#d9482f}.cell.ST{background:#d6a11f}
.cell.ST .pl{font-size:calc(var(--cell)*.55)}
.cell.blocked{background:#05090b radial-gradient(circle at 40% 35%,#1a1f2b 0,#05090b 70%);box-shadow:none}
.cell.cur{outline:3px solid var(--gold);outline-offset:-1px;z-index:3}
.cell.cur::after{content:'▶';position:absolute;right:-1px;top:50%;transform:translate(50%,-50%);color:var(--gold);font-size:13px;text-shadow:0 0 3px #000;z-index:4;animation:blink 1s infinite}
.cell.cur.v::after{content:'▼';right:auto;left:50%;top:auto;bottom:-1px;transform:translate(-50%,50%)}
@keyframes blink{50%{opacity:.3}}
#rackwrap{display:flex;align-items:center;gap:12px}
#rack{--ts:calc(var(--cell)*1.08);display:flex;gap:6px;justify-content:center;align-items:flex-end;min-width:calc(var(--cell)*8.4);min-height:calc(var(--cell)*1.08 + 22px);padding:14px 12px 8px;background:linear-gradient(#8a5a2b,#6d4420);border-radius:10px;box-shadow:0 6px 0 #48290f,inset 0 3px 0 #a87340}
#rack .tile{transition:transform .1s}
.bagcount{font-size:12px;opacity:.8;text-align:center;font-family:system-ui,sans-serif;cursor:pointer}.bagcount b{display:block;font-size:20px;font-family:inherit}
#actions{display:flex;gap:8px;align-items:center}
#actions .playbtn{font-size:19px;padding:9px 28px}
.hint{font-size:11.5px;opacity:.55;font-family:system-ui,sans-serif}
body.busy #actions,body.busy #rack{pointer-events:none}

/* ---------- shop ---------- */
#shop{flex:1;width:100%;max-width:980px;background:rgba(6,20,26,.7);border-radius:16px;padding:12px 18px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto}
#shop h2{margin:0;font-size:25px;color:var(--gold)}
.shead{display:flex;justify-content:space-between;align-items:center}
.srows{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.ssec h4{margin:0 0 5px;font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.08em;font-family:system-ui,sans-serif}
.scards{display:flex;gap:10px}
.scard{flex:1;background:var(--panel2);border-radius:12px;padding:9px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:2px 10px;min-height:118px}
.scard .art{grid-row:1/4;width:66px;align-self:center}.scard .art svg{width:100%;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.scard .sname{font-size:15px}.scard .sname small{font-size:10px;opacity:.65;font-family:system-ui,sans-serif;margin-left:5px;text-transform:uppercase}
.scard .sdesc{font-size:12.5px;opacity:.85;font-family:system-ui,sans-serif;line-height:1.3}
.scard .buy{justify-self:start;background:#2fa05a;padding:5px 14px;font-size:15px}
.scard.sold{display:flex;align-items:center;justify-content:center;opacity:.3;font-size:20px;letter-spacing:.2em}
.sfoot{display:flex;justify-content:space-between;margin-top:auto;padding-top:4px}.sfoot button{font-size:18px;padding:10px 24px}

/* ---------- overlays ---------- */
#modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,10,13,.72);z-index:60}
#modal.on{display:flex}
.mbox{background:var(--panel);border-radius:18px;padding:20px 26px;max-width:min(680px,92vw);max-height:88vh;overflow:auto;box-shadow:0 10px 0 rgba(0,0,0,.4),0 0 0 3px #2b5560;animation:drop .18s;text-align:center}
.mbox h2{margin:0 0 8px;font-size:28px;color:var(--gold)}
.mbox p,.mbox li,.mbox td,.mbox th{font-family:system-ui,sans-serif;font-size:14px;line-height:1.45}
.mbox ul{text-align:left;padding-left:20px;margin:8px 0}
.mbox table{border-collapse:collapse;margin:8px auto;width:100%}.mbox td,.mbox th{padding:5px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.mbtns{display:flex;gap:10px;justify-content:center;margin-top:14px}.mbtns button{font-size:17px;padding:10px 22px}
.letters{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:12px 0}.letters button{padding:9px 0;font-size:17px;background:#e9d5a1;color:#3a2a14}
.cash td:last-child{text-align:right;color:var(--gold);font-size:17px}
.bagview{--ts:34px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:10px 0}.bagview .tile.out{opacity:.25}
.packopts{--ts:74px;display:flex;gap:22px;justify-content:center;margin:16px 0}
.packopt{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:12px;width:150px}.packopt:hover{background:var(--panel2)}
.packopt small{font-family:system-ui,sans-serif;font-size:12px;opacity:.85;line-height:1.3}
.chip-c{color:#4fd8cc}.chip-m{color:#b3adff}.chip-x{color:#cf9bff}.chip-d{color:var(--gold)}
#tip{position:fixed;display:none;z-index:90;max-width:250px;background:#fdf6e0;color:#2a2114;border-radius:9px;padding:8px 11px;font-family:system-ui,sans-serif;font-size:13px;line-height:1.35;box-shadow:0 5px 14px rgba(0,0,0,.5);pointer-events:none}
#tip b{font-family:"Arial Rounded MT Bold",ui-rounded,system-ui;font-size:14.5px}#tip i{font-size:10.5px;text-transform:uppercase;opacity:.6;margin-left:6px;font-style:normal}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#2a1a22;border:2px solid #d9442e;padding:9px 18px;border-radius:10px;z-index:95;opacity:0;pointer-events:none;transition:opacity .2s;font-size:15px}
#toast.on{opacity:1}
#banner{position:fixed;left:0;right:0;top:36%;text-align:center;z-index:70;pointer-events:none;display:none}
#banner.on{display:block;animation:banner 2.1s forwards}
#banner div{display:inline-block;background:rgba(6,14,18,.92);padding:16px 44px;border-radius:16px;border:3px solid var(--gold);font-size:32px}
#banner small{display:block;font-size:15px;color:#ffb3a6;font-family:system-ui,sans-serif;margin-top:4px}
@keyframes banner{0%{opacity:0;transform:scale(.7)}12%{opacity:1;transform:scale(1.04)}18%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
.fl{position:fixed;transform:translate(-50%,-100%);z-index:80;pointer-events:none;padding:2px 8px;border-radius:7px;color:#fff;font-size:16px;white-space:nowrap;animation:rise .85s ease-out forwards;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.fl.c{background:var(--chips)}.fl.m{background:var(--mult)}.fl.x{background:var(--x);font-size:19px}.fl.d{background:#d59a10}.fl.t{background:#37474f}
@keyframes rise{0%{opacity:0;margin-top:10px;scale:.6}15%{opacity:1;scale:1.15}25%{scale:1}75%{opacity:1}100%{opacity:0;margin-top:-30px}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translate(-7px,4px) rotate(-.4deg)}40%{transform:translate(6px,-5px) rotate(.4deg)}60%{transform:translate(-4px,3px)}80%{transform:translate(3px,-2px)}}
@media (max-width:900px){#app.game{grid-template-columns:210px 1fr}.logo.small{--ts:18px}}
button{white-space:nowrap}
#top{min-width:0}
@media (max-width:1040px){.charm{width:48px;height:64px}.ink{width:40px;height:64px}.srow{gap:5px}.slabel{font-size:9.5px}.srows{grid-template-columns:1fr}#actions button{padding:7px 10px;font-size:13px}#actions .playbtn{font-size:15px;padding:8px 14px}.hint{display:none}}
.tile.pend.vapor{animation:vapor .65s ease-in forwards}
@keyframes vapor{0%{transform:none;filter:none;opacity:1}25%{transform:scale(1.12) rotate(-3deg);filter:brightness(1.9) saturate(.3)}100%{transform:translateY(-70%) scale(1.7) rotate(8deg);filter:blur(12px) brightness(2.4);opacity:0}}
#calcLabel .proj{color:var(--gold);font-size:15px;font-family:"Arial Rounded MT Bold",ui-rounded,system-ui}
.hint{opacity:.7}
@media (prefers-reduced-motion:reduce){#bg,.logo .tile,.cell.cur::after{animation:none}#bg{transform:scale(4.2)}.shake{animation:none}}

/* plays-left urgency and round status cues */
.pips{display:flex;gap:5px;justify-content:center;margin:3px 0 2px;color:#f3ecd8}
.pips i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.18}.pips i.on{opacity:1}
.st.plays.low b,.st.plays.low .pips{color:#ffb547}
.st.plays.low{box-shadow:0 4px 0 rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,181,71,.55)}
.st.plays.crit{background:#3a161a;box-shadow:0 4px 0 rgba(0,0,0,.3),inset 0 0 0 2px #ff6a5a}
.st.plays.crit b,.st.plays.crit .pips{color:#ff6a5a}.st.plays.crit span{opacity:1;color:#ffb3a6}
.st.plays.crit b{display:inline-block;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.22)}}
.st.swaps.none b{opacity:.35}
.need{grid-column:1/3;font-size:12px;font-family:system-ui,sans-serif;opacity:.85}.need b{font-size:13px;color:#ffe9a8}
#calcLabel .clears{color:#9cf08a;flex-basis:100%}#calcLabel .short{color:#ff9d8f;flex-basis:100%}
@media (prefers-reduced-motion:reduce){.st.plays.crit b{animation:none}}
#copy{position:fixed;left:0;right:0;bottom:10px;text-align:center;font-size:12px;font-family:system-ui,sans-serif;opacity:.6;pointer-events:none;display:none}
#app.title~#copy{display:block}