:root{--accent: #e0b24c;--felt: #0c5c3a;--felt-dark: #07321f;--bg: #0a120e;--panel: #11241b;--line: #1f4533;--text: #eaf3ee;--muted: #8fae9d;--red: #e54b4b;--black: #16202a}*{box-sizing:border-box}html,body{margin:0}body{background:radial-gradient(120% 120% at 50% 0%,#133a28 0%,var(--bg) 60%);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}#app{max-width:560px;margin:0 auto;padding:18px 16px 40px}header h1{margin:0;font-size:30px;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent),#fff2c8);-webkit-background-clip:text;background-clip:text;color:transparent}header .sub{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.4}.bar{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px;gap:8px}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:0;padding:8px 14px;font-size:13px;cursor:pointer}.seg button.active{background:var(--accent);color:#2a2003;font-weight:700}.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#2a2003;border-color:var(--accent);font-weight:700}.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.readout{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:22px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}.readout span{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:700}.queuebar{display:flex;align-items:center;gap:10px;margin-bottom:10px}.qlabel{font-size:11px;letter-spacing:1.5px;color:var(--muted);font-weight:700}.queue{display:flex;gap:6px}.qcard{transform:scale(.82);transform-origin:left center;opacity:.7}.qcard.now{transform:scale(1);opacity:1}.qcard .cell{width:40px;height:54px}.stage{position:relative}.droprow,.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.droprow{margin-bottom:6px}.drophead{background:var(--felt-dark);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:4px 0;font-size:14px;cursor:pointer}.drophead.sel{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px #e0b24c40}.drophead.full{color:var(--red);cursor:not-allowed}.grid{background:linear-gradient(160deg,var(--felt),var(--felt-dark));border:1px solid var(--line);border-radius:14px;padding:8px}.cellwrap{border-radius:8px}.cellwrap.selcol{box-shadow:inset 0 0 0 2px #e0b24c73;border-radius:9px}.cell{width:100%;aspect-ratio:3 / 4;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;user-select:none}.cell.empty{background:#ffffff0a;border:1px dashed rgba(255,255,255,.08)}.cell.card{background:linear-gradient(180deg,#fff,#f0f0ee);border:1px solid #d6d6cf;box-shadow:0 2px 5px #0000004d;animation:drop-in .18s ease}.cell.card.red{color:var(--red)}.cell.card.black{color:var(--black)}.cell .r{font-size:clamp(14px,5vw,22px);font-weight:800;line-height:1}.cell .s{font-size:clamp(12px,4.5vw,20px);line-height:1}@keyframes drop-in{0%{transform:translateY(-12px);opacity:.2}to{transform:none;opacity:1}}.flash{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:#081e14eb;border:2px solid var(--accent);color:var(--accent);font-weight:900;font-size:22px;letter-spacing:.5px;padding:12px 20px;border-radius:14px;text-shadow:0 0 12px rgba(224,178,76,.5);pointer-events:none;white-space:nowrap;z-index:5}.flash.pop{animation:flashpop .9s ease forwards}@keyframes flashpop{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}35%{transform:translate(-50%,-50%) scale(1);opacity:1}82%{opacity:1}to{transform:translate(-50%,-60%) scale(1);opacity:0}}.hidden{display:none!important}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#050c09d1;border-radius:14px;z-index:10}.card-modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;text-align:center;max-width:340px}.card-modal h2{margin:0 0 6px;font-size:22px}.card-modal p{margin:6px 0;color:var(--muted);font-size:14px}.card-modal b{color:var(--text)}.card-modal .row{margin-top:14px;display:flex;gap:10px;justify-content:center}.hint{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}