/* Semantic studio palette: the canvas keeps the original arcade artwork. */
:root{--deck:oklch(.19 .015 265);--deck2:oklch(.23 .018 265);--well:oklch(.14 .015 265);--line:oklch(.3 .025 265);--line2:oklch(.37 .03 265);--ink:oklch(.96 .01 250);--mute:oklch(.76 .025 260);--faint:oklch(.68 .025 260);--cyan:oklch(.83 .13 205);--phos:oklch(.86 .19 130);--phos-d:oklch(.65 .15 140);--mag:oklch(.72 .2 335);--amber:oklch(.87 .16 90);--red:oklch(.7 .2 20);--r:6px;--shadow:0 8px 28px color-mix(in oklab,var(--well) 70%,transparent)}
html,body{letter-spacing:0}button,input,select{touch-action:manipulation}button{min-height:40px}
.modal .switch{white-space:normal;align-items:flex-start;line-height:1.5;max-width:100%}.modal .switch input{flex:none;margin-top:1px}.modal .keys kbd{display:inline-block}.modal .body{min-width:0}.pill span{min-width:0;overflow:hidden;text-overflow:ellipsis}.brand{overflow:hidden}
#app{grid-template-columns:286px minmax(0,1fr);grid-template-rows:112px minmax(0,1fr) 152px;height:100dvh;min-height:580px}
#topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 54px;gap:0 16px;padding:0 18px}
.brand{min-width:0;gap:10px}.brand div{display:block}.brand b{font:700 14px/1.3 var(--ui);letter-spacing:0;white-space:normal;color:var(--ink)}.brand small{font-size:9px;letter-spacing:0;color:var(--faint)}
.studio-mark{font:32px/1 var(--ui);color:var(--phos);width:32px;flex:none}.grow{display:none}#pill{justify-self:end;font:15px/1 var(--ui);font-weight:600;padding:8px 12px}.round-controls{display:flex;align-items:center;gap:8px;min-width:0}.utility-controls{display:flex;align-items:center;gap:4px;justify-self:end}.btn{border-radius:6px;background:var(--deck2);border-color:var(--line2)}.btn:hover{background:var(--line);border-color:var(--cyan)}.btn.icon{width:36px;height:36px;min-height:36px;background:transparent;border-color:transparent;color:var(--mute)}.btn.icon:hover{color:var(--cyan);background:var(--deck2)}kbd{display:none}
.cta{background:var(--phos);color:var(--well);border-radius:6px;box-shadow:none;min-width:150px;height:40px;font-size:13px;letter-spacing:0}.cta:active{transform:translateY(1px);box-shadow:none}.cta:hover{box-shadow:none}.cta:disabled{box-shadow:none}.btn.on{background:color-mix(in oklab,var(--amber) 12%,var(--deck));color:var(--amber)}
#dock{padding:18px 16px;scrollbar-width:thin;scrollbar-color:var(--line2) var(--deck)}.card{background:transparent;border:0;border-radius:0;padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.card:last-child{border-bottom:0}.card h3{font-size:12px;letter-spacing:0}.card h3 .sub{font-size:10px}.card h3 .count{font:600 12px var(--ui)}.addbox input{font:14px var(--ui);padding:0 10px}.addbox .btn{padding:0 10px;color:var(--well)}.addbox .btn:hover{background:var(--cyan)}.msg{font-size:11px;line-height:1.5;margin-top:8px}.chip{height:32px;font-size:12px;border-radius:5px}.empty{font-size:12px;line-height:1.6;padding:10px;border-radius:6px}.board{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.tile{border-radius:4px;min-height:0}.tile b{font:15px var(--vt)}.legend{gap:8px;font-size:9px;flex-wrap:wrap}
#stageWrap{padding:16px;background:var(--well)}#stage{box-shadow:none;border:1px solid var(--line);border-radius:4px}.stagehint{display:none}.modebar{top:8px;max-width:95%;border-radius:6px;font-size:12px;white-space:normal;background:var(--deck);line-height:1.4}
#deck{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:82px 54px;align-content:center;gap:0;padding:0 18px;overflow:visible}#hazards{grid-column:1/-1;gap:16px;border:0;border-bottom:1px solid var(--line);padding:10px 0 12px}.grp{border:0;padding:0}.grp-label{display:none}.arcade{width:48px;min-height:54px;gap:7px}.arcade .cap{width:40px;height:36px;border-radius:6px;box-shadow:none;background:color-mix(in oklab,var(--c) 18%,var(--deck2));border:1px solid color-mix(in oklab,var(--c) 50%,var(--line));color:var(--c);font:700 13px var(--ui)}.arcade:active .cap,.arcade.hit .cap{box-shadow:none;transform:translateY(1px)}.arcade:disabled .cap{box-shadow:none}.arcade span{font-size:10px}.deckbtns{gap:6px}.deckbtns .btn{font-size:11px;padding:0 10px;height:36px;min-height:36px}.deckbtns .lbl{display:inline}.deckbtns svg.i{width:15px;height:15px}.aim-switch{margin-left:auto;font-size:11px}
.pop,.modal,.toast{background:var(--deck);border-color:var(--line2);border-radius:8px;box-shadow:var(--shadow)}.modal header,.modal .body,.modal footer{padding:16px}.modal .grow{display:block}.tabs{padding:0 8px;overflow-x:auto;flex-shrink:0}.tabs button{white-space:nowrap;font-size:12px}.field{grid-template-columns:140px minmax(0,1fr)}.note{margin-left:152px;color:var(--mute)}.modal .primary{color:var(--well)}.modal .body .row{flex-wrap:wrap}.modal .body{overflow:auto}.modal:has(.lb) .body{overflow:auto}.focusexit{opacity:.55}.scrim{padding:14px}#toasts{bottom:168px;right:14px;max-width:calc(100% - 28px)}.toast{max-width:100%;font-size:12px}.toast .btn{flex:none}
#splash{background:var(--well);padding:24px}#splash>div{max-width:700px}#splash .logo{font-size:40px;color:var(--amber);text-shadow:none;line-height:1.5}#splash .logo span{color:var(--mag)}#splash p{font-size:15px;line-height:1.7;max-width:460px}#splash .cta{min-width:220px;height:48px;margin-top:24px;font-size:15px}#splash small{font-size:11px}.splash-badge{margin-top:28px;color:var(--cyan);font-size:10px;font-weight:600}
body.focus #app{min-height:0}body.focus #stageWrap{background:var(--well)}
@media(max-width:1050px){#app{grid-template-columns:248px minmax(0,1fr)}#topbar{padding:0 12px;gap:0 10px}.round-controls{gap:6px}.round-controls .btn{padding:0 9px;font-size:11px}.cta{min-width:120px}#autoBtn svg{display:none}.utility-controls{gap:0}.btn.icon{width:30px}#hazards{gap:10px}.deckbtns .btn{padding:0 7px}.deckbtns .lbl{display:none}#deck{padding:0 12px}}
@media(max-width:759px){html,body{height:auto;min-height:100%;overflow:auto}#app{height:auto;min-height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:148px auto auto auto;grid-template-areas:"top" "stage" "deck" "dock"}#topbar{grid-template-rows:44px 48px 46px;grid-template-columns:minmax(0,1fr) auto;padding:5px 12px;gap:0}.brand b{font-size:12px}.brand small{font-size:8px}.studio-mark{width:24px;font-size:26px}#pill{font-size:11px;padding:6px 8px;gap:5px}.round-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);gap:6px}.round-controls .btn,.round-controls .cta{min-width:0;justify-content:center;padding:0 5px;font-size:11px;height:40px}.round-controls svg.i{width:14px}.utility-controls{grid-column:1/-1;justify-self:stretch;justify-content:space-between}.btn.icon{width:40px;height:40px}.brand div{display:block}#stageWrap{height:auto;min-height:230px;aspect-ratio:16/10;padding:8px}#stageWrap[data-layout="V"]{aspect-ratio:9/16;min-height:500px}#deck{grid-template-rows:84px 48px 48px;grid-template-columns:minmax(0,1fr);padding:0 12px 8px;min-height:188px;border-bottom:1px solid var(--line)}#hazards{gap:0;justify-content:space-between}.arcade{width:36px}.arcade .cap{width:32px;height:34px}.arcade span{font-size:8px}.aim-switch{margin-left:4px;font-size:10px;gap:4px;flex-direction:column}.switch input{width:30px}.switch input:checked::after{left:13px}.deckbtns{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.deckbtns .btn{justify-content:center;min-height:40px;height:40px}.deckbtns .lbl{display:inline}#dock{border:0;padding:18px;overflow:visible}.board{grid-template-columns:repeat(8,minmax(0,1fr))}.tile{min-height:36px}.tile b{font-size:20px}.legend{font-size:10px}.card h3{font-size:14px}.card h3 .sub{font-size:11px}.field{grid-template-columns:minmax(0,1fr);gap:6px;margin:16px 0}.note{margin:0 0 12px!important}.modal .body .row{margin-left:0!important}.modal header h2{font-size:15px}.modal header{flex-wrap:wrap}.modal{max-height:90dvh}.modal footer{flex-wrap:wrap}.pop{width:min(300px,calc(100vw - 24px));max-height:80dvh;overflow:auto}.scrim{padding:10px}.keys{grid-template-columns:90px minmax(0,1fr)}#toasts{bottom:16px}.toast{font-size:12px}#splash .logo{font-size:24px}#splash p{font-size:14px}body.focus #app{height:100dvh;grid-template-rows:0 minmax(0,1fr) 0}body.focus #stageWrap{height:100%;aspect-ratio:auto;min-height:0}body.focus .focusexit{opacity:.65}}