@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101013;--surface:#19191d;--line:#303035;--paper:#fff1db;--soft:#aaa5a5;--red:#ff5149;--green:#c9fb78;--display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--mono:"IBM Plex Mono",monospace}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100svh;color:var(--paper);background:radial-gradient(ellipse at 50% 4%,#271717 0,transparent 53%),var(--bg);font:13px var(--mono);overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4.2vw,72px);border-bottom:1px solid #ffffff12;background:#111114b0}
.studio,.top-actions{display:flex;align-items:center;gap:12px}
.studio{font-size:12px;font-weight:700;letter-spacing:.12em}
.studio-logo{width:26px;height:26px;display:grid;place-items:center;background:var(--red);color:#170d0d;border-radius:5px;transform:skew(-8deg)}
.studio-logo svg{width:17px;height:17px;transform:skew(8deg)}
.top-divider{height:16px;border-left:1px solid #ffffff29}
.arcade-label{color:var(--soft);font-weight:500}
.icon-button,.close{display:grid;place-items:center;width:36px;height:36px;background:transparent;border:1px solid #ffffff21;border-radius:50%;position:relative}
.icon-button:hover,.restart:hover{color:var(--red);border-color:var(--red)}
.icon-button svg{width:18px;height:18px}
.sound-slash{display:none;position:absolute}.is-muted .sound-slash{display:block}.is-muted .audible,.muted{display:none}
main{width:min(980px,100% - 40px);margin:0 auto;padding:22px 0 45px}
.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:19px;padding-bottom:14px;border-bottom:1px solid var(--line)}
h1{font:900 clamp(66px,11vw,134px)/.76 var(--display);letter-spacing:-.042em;margin:5px 0 0;font-style:italic}
h1>span:first-child{color:var(--red)}.period{color:var(--paper)}
.subtitle{color:var(--soft);padding-left:10px;text-align:right}
.cabinet{display:grid;grid-template-columns:minmax(116px,1fr) minmax(300px,468px) minmax(116px,1fr);gap:clamp(16px,3vw,40px);align-items:start}
.left-rail,.right-rail{padding-top:6px}.stat,.charge{padding:13px 0 15px;border-bottom:1px solid var(--line)}
.stat span,.charge-label,.arena-header,.restart,.live-hint{font-weight:600;font-size:11px;letter-spacing:.11em;color:var(--soft)}
.stat strong,.charge strong{display:block;margin-top:2px;font:800 clamp(30px,4.2vw,56px)/.95 var(--display);font-variant-numeric:tabular-nums}
.score strong{color:var(--red)}.charge strong{color:var(--green)}
.charge strong small{font-size:.56em;margin-left:2px}
.charge-label{display:flex;gap:6px;align-items:center}.charge-label svg{width:13px;height:13px;color:var(--green)}
.charge p{color:var(--soft);font-size:11px;line-height:1.55;margin:9px 0 0}
.meter{height:4px;margin-top:10px;background:#29292c;position:relative;border-radius:2px;overflow:hidden}
.meter::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,0%);background:var(--green);transition:width .24s ease}
#move-meter::after{background:var(--red)}
.restart{border:1px solid #ffffff25;background:transparent;display:inline-flex;gap:6px;align-items:center;padding:8px;margin-top:15px;border-radius:5px;min-height:38px;text-align:left}
.restart svg{width:14px;height:14px;flex:none}
.arena{position:relative;overflow:hidden;border:1px solid #603333;border-radius:9px 9px 0 0;background:radial-gradient(ellipse at 50% 100%,#4b2020,transparent 72%),repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px),#171319}
.arena-header{display:flex;justify-content:space-between;align-items:center;padding:9px 12px 3px;color:#f0a49c}
.arena-header i{display:inline-block;width:6px;height:6px;margin-right:3px;background:var(--red);border-radius:50%;box-shadow:0 0 7px var(--red);vertical-align:1px}
.fleet{position:relative;min-height:62px;display:flex;justify-content:space-evenly;gap:3px;align-items:center;padding:6px 10px 9px}
.fleet::before{content:"";position:absolute;inset:3px 12px 5px;border:1px dashed #f88b7630;transform:perspective(120px) rotateX(24deg);pointer-events:none}
.enemy{width:min(12%,52px);display:grid;justify-items:center;gap:4px;color:var(--red);z-index:1;animation:drift 1.5s ease-in-out infinite alternate;animation-delay:var(--delay);transition:opacity .2s}
.enemy svg{width:100%;height:auto;aspect-ratio:4/3;filter:drop-shadow(0 0 6px currentColor)}
.enemy.heavy{color:#ffc17b}.enemy.destroyed{opacity:0}.enemy.hit svg{animation:hit .23s ease-out}
.hp{height:3px;width:66%;background:#ffffff27;border-radius:2px;overflow:hidden}.hp::after{content:"";display:block;width:var(--fill);height:100%;background:currentColor}
@keyframes drift{to{transform:translateY(-4px)}}@keyframes hit{50%{transform:scale(1.25);filter:brightness(3)}}
.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:7px;background:#151518;border:1px solid #363238;border-top:0;border-radius:0 0 9px 9px;touch-action:none;user-select:none}
.cell{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border:1px solid color-mix(in srgb,currentColor 28%,#1b1b1d);border-radius:7px;color:var(--ink);background:linear-gradient(145deg,color-mix(in srgb,currentColor 20%,#222226),color-mix(in srgb,currentColor 9%,#151519));min-width:0;transition:background .14s,opacity .14s,transform .14s;touch-action:none}
.cell svg{width:72%;height:72%;filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 58%,transparent));pointer-events:none}
.cell[data-kind="0"]{--ink:#ff706a}.cell[data-kind="1"]{--ink:#a8f578}.cell[data-kind="2"]{--ink:#d5a0ff}.cell[data-kind="3"]{--ink:#77dcff}.cell[data-kind="4"]{--ink:#ffd273}
.cell:hover,.cell.selected{background:color-mix(in srgb,currentColor 36%,#17171b)}.cell.selected{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor;transform:scale(.91)}
.cell.hinted{animation:hint .65s ease-in-out infinite alternate}.cell.matched{opacity:0;transform:scale(.5)}.cell.drop svg{animation:drop .26s ease-out}.cell.bad{animation:shake .22s ease-in-out}
@keyframes hint{to{box-shadow:inset 0 0 0 2px currentColor;background:color-mix(in srgb,currentColor 42%,#17171b)}}@keyframes drop{from{opacity:.3;transform:translateY(-25%)}}@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.status{color:var(--soft);font-size:11px;margin:9px 0 0;line-height:1.5;min-height:2.8em}
#effects{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.controls{position:fixed;z-index:6;right:max(22px,env(safe-area-inset-right));bottom:max(17px,env(safe-area-inset-bottom));touch-action:none}
.live-stack{position:relative;text-align:center}
.live{width:86px;height:70px;display:flex;justify-content:center;align-items:center;gap:3px;position:relative;padding:0 4px;border:1px solid #ff9a82;border-bottom:6px solid #922622;border-radius:15px;background:linear-gradient(#ff695b,#ee3e39 82%);box-shadow:0 6px 0 #441414,0 0 30px #fa433d44,inset 0 2px #ffad8d85;touch-action:none;text-shadow:0 2px #9a2b28}
.live svg{width:16px;height:16px}.live strong{font:900 29px/.9 var(--display);font-style:italic}
.live:hover,.live[aria-expanded="true"]{filter:brightness(1.15)}.live:active{transform:translateY(4px);box-shadow:0 2px 0 #441414}
.live.ready{box-shadow:0 6px 0 #441414,0 0 25px #ff5c50,0 0 0 3px #c9fb78}
.live-light{width:6px;height:6px;background:#fff3d9;border-radius:50%;position:absolute;right:9px;top:8px;box-shadow:0 0 8px #fff6cc}
.live-hint{display:block;margin-top:10px;font-size:8px;color:#d0b2ab}
.radial{position:absolute;right:0;bottom:14px;width:263px;height:280px;pointer-events:none}
.radial[hidden]{display:none}
.node{position:absolute;width:52px;height:52px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #ff8a79;border-radius:50%;background:radial-gradient(circle at 38% 25%,#873e39,#21191e 76%);box-shadow:0 0 15px #f83e3b55,inset 0 0 7px #ff6b6548;pointer-events:auto;touch-action:none;animation:node-in .18s ease-out both}
.node:hover,.node.active{border-color:var(--paper);box-shadow:0 0 23px #ff574d99;background:#873b36}.node.locked{border-color:#a9918c;color:#d6c7c2}.node.ready{color:var(--green);border-color:var(--green)}
.node svg{width:23px;height:23px}.node span{position:absolute;top:calc(100% + 3px);white-space:nowrap;color:var(--paper);font-size:9px;letter-spacing:.03em;font-weight:700;background:#171116;padding:2px 4px;border-radius:3px;pointer-events:none}
@keyframes node-in{from{opacity:0;scale:.65}to{opacity:1;scale:1}}
dialog{background:#201a1c;border:1px solid #744541;border-radius:12px;color:var(--paper);padding:0;width:min(420px,calc(100% - 32px));box-shadow:0 20px 80px #0009}
dialog::backdrop{background:#0b090bc9}.dialog-inner{padding:24px;position:relative}.close{position:absolute;top:12px;right:12px;font-size:23px;line-height:1}
.dialog-label{color:var(--red);letter-spacing:.2em;font-weight:700;font-size:11px;margin:0 0 4px}
h2{font:900 49px/.95 var(--display);margin:0 0 14px;text-transform:uppercase}
#dialog-content{color:#dacac4;line-height:1.6}#dialog-content p{margin:0 0 10px}
.dialog-actions{display:flex;gap:8px;margin-top:18px}.dialog-actions button{background:var(--red);color:#170d0d;font-weight:700;border:0;border-radius:5px;padding:10px 14px;min-height:44px}.dialog-actions button.secondary{background:#382b30;color:var(--paper)}
@media(max-width:790px){.cabinet{gap:17px}.top{height:52px}main{padding-top:18px}.controls{right:17px}.masthead{margin-bottom:13px}}
@media(max-width:660px){main{width:min(450px,100% - 24px);padding-bottom:105px}.masthead{gap:5px}.subtitle{font-size:10px;max-width:118px}.cabinet{display:flex;flex-direction:column;gap:9px;align-items:stretch}.left-rail{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:9px;padding:0}.stat{padding:3px 0 8px}.stat strong,.charge strong{font-size:33px}.stat span,.charge-label{font-size:9px}.meter{margin-top:6px}.right-rail{display:flex;align-items:center;gap:14px;padding-top:0;padding-right:79px}.charge{flex:1;padding:1px 0 8px;border:0}.charge p{display:none}.restart{margin:0;font-size:9px;max-width:87px}.controls{right:14px;bottom:max(12px,env(safe-area-inset-bottom))}.live{width:68px;height:57px;border-radius:12px}.live strong{font-size:24px}.live svg{width:13px;height:13px}.live-hint{margin-top:8px}.board{gap:3px;padding:5px}.cell{border-radius:5px}.fleet{min-height:48px}.enemy{width:min(11%,45px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.arc-guide{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:#ff685e85;stroke-width:1;filter:drop-shadow(0 0 5px #f44)}
.arc-guide path{stroke-dasharray:2 5}
@media (max-height:520px) and (orientation:landscape){.controls{bottom:9px}.radial{height:245px}}
@media(max-width:660px) and (max-height:715px){
 main{padding-bottom:12px}
 .controls{position:relative;right:auto;bottom:auto;width:max-content;margin:-77px max(13px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) auto}
}
.mode-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;padding:0 9px;border:1px solid #ff6a5d75;border-radius:5px;text-decoration:none;white-space:nowrap;color:#ff8879;font:700 11px var(--mono);letter-spacing:.06em}
.mode-link:hover,.mode-link:focus-visible{background:#ff514927;color:var(--paper);outline-color:var(--paper)}
.mode-link svg{width:12px;height:12px}
@media(max-width:385px){.top{padding-inline:9px}.studio,.top-actions{gap:6px}.studio{font-size:10px;letter-spacing:.06em}.mode-link{padding-inline:6px;font-size:10px}.icon-button{width:31px;height:31px}}