:root{--bg0: #071015;--bg1: #0f2129;--ink: #e8f2f4;--dim: #8aa3ab;--green: #3dff6e;--green-d: #15803a;--amber: #ffd23d}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg0);color:var(--ink);overflow:hidden}html.gray{filter:grayscale(1)}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}#app{height:100%}main{height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;padding:max(10px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));background:radial-gradient(120% 70% at 50% 45%,var(--bg1),var(--bg0) 70%);position:relative;isolation:isolate}.scene{position:absolute;inset:0;z-index:-1;background:url(../art/bg.jpg) center / cover no-repeat}.scene:after{content:"";position:absolute;inset:0 0 auto;height:170px;background:linear-gradient(#040a0c8c,#040a0c00)}@media(min-aspect-ratio:1/1){.scene{background-image:url(../art/bg-land.jpg)}}.hud{text-align:center}.title{font-weight:900;letter-spacing:.18em;font-size:15px;color:var(--dim)}.title span{font-weight:600;letter-spacing:.04em;font-size:11px;opacity:.7;margin-left:6px}.infected{margin-top:6px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:clamp(22px,6.4vw,32px);font-weight:800;color:var(--green);text-shadow:0 0 14px rgba(61,255,110,.45)}.infected b{color:#fff}.infected b.x{color:var(--amber)}.infected.hot{animation:hot .9s ease-in-out infinite alternate}@keyframes hot{to{text-shadow:0 0 26px rgba(61,255,110,.95)}}.pop{display:inline-block;animation:pop .28s ease-out}@keyframes pop{0%{transform:scale(1.14)}to{transform:scale(1)}}.meter{position:relative;height:6px;margin:8px auto 0;width:70%;border-radius:3px;background:#1d3038;overflow:visible}.meter i{position:absolute;inset:0 auto 0 0;background:var(--green);border-radius:3px;transition:width .25s ease-out;box-shadow:0 0 8px var(--green)}.meter em{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;background:var(--amber)}.meter{margin-bottom:18px}.meter .goal{position:absolute;top:12px;transform:translate(-50%);font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--amber);white-space:nowrap;padding:1px 6px;border-radius:6px;background:#281a00bf;border:1px solid rgba(255,210,61,.6)}.meter.reached .goal{color:#1a1200;background:var(--amber)}.meter.flash i,.meter.flash em,.meter.flash .goal{animation:mflash .2s ease-in-out infinite alternate}@keyframes mflash{0%{filter:brightness(1)}to{filter:brightness(2.2);box-shadow:0 0 16px var(--amber)}}.banner .p{font-size:clamp(16px,5vw,24px);font-weight:900;color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000;margin-bottom:2px}.caption{height:30px;margin-top:4px;margin-bottom:4px;text-align:center;font-weight:900;font-size:clamp(14px,4.2vw,19px);letter-spacing:.04em;color:#fff}.caption span{display:inline-block;animation:cap .32s cubic-bezier(.2,1.6,.4,1)}@keyframes cap{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.stage{flex:none;display:flex;flex-direction:column;align-items:center}.board{position:relative;width:min(100%,calc(100dvh - 196px - (min(100vw,560px)*.394)));aspect-ratio:1;margin:0 auto}.spacer{min-height:0}.spacer.top{flex:2 1 0}.spacer.bot{flex:1 1 0}.board :global(canvas){position:absolute;inset:0;display:block}.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:2;animation:ban .4s cubic-bezier(.2,1.5,.4,1)}.banner .t{font-size:clamp(40px,12.5vw,70px);font-weight:900;color:var(--green);-webkit-text-stroke:3px #062010;text-shadow:0 0 30px rgba(61,255,110,.9),0 6px 0 #062010;letter-spacing:.03em}.banner .s{margin-top:4px;font-size:clamp(16px,5vw,24px);font-weight:900;color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000}@keyframes ban{0%{transform:scale(2.2);opacity:0}to{transform:scale(1);opacity:1}}.console{position:relative;margin:10px -16px 0;height:calc(min(100vw,560px) * 520 / 1320);overflow:visible;flex:none}.console .panel{position:absolute;left:50%;top:0;width:calc(100% * 1600 / 1320);aspect-ratio:1600 / 520;transform:translate(-50%);background:url(../art/hud-base.webp) center / 100% 100% no-repeat}.readout{position:absolute;top:25.6%;width:20.2%;height:15.4%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.readout small{font-size:clamp(7px,2vw,10px);font-weight:800;letter-spacing:.12em;color:#8fd9a8;opacity:.85}.readout b{margin-top:1px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(12px,3.6vw,18px);color:#b8ffca;text-shadow:0 0 6px rgba(61,255,110,.6)}.readout b.w{color:var(--amber);text-shadow:0 0 6px rgba(255,210,61,.6)}.plate{position:absolute;top:41.3%;height:39.4%;border:0;background:transparent;font:900 clamp(9px,2.6vw,13px) system-ui,sans-serif;letter-spacing:.1em;color:#d7e9e4;text-shadow:0 1px 0 #000;opacity:.75;padding:0}.spin{position:absolute;left:50%;top:64%;width:18.75%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;cursor:pointer;touch-action:manipulation;background:url(../art/hud-spin.webp) center / 100% 100% no-repeat}.spin.turning{animation:spinr .9s linear infinite}.spin:disabled:not(.turning){filter:saturate(.4) brightness(.75)}.spin:active:not(:disabled){transform:translate(-50%,-50%) scale(.94)}@keyframes spinr{to{transform:translate(-50%,-50%) rotate(360deg)}}.big{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#020a0680;animation:fade .3s ease-out}.big .tier{font-size:clamp(44px,13vw,72px);font-weight:900;color:var(--amber);-webkit-text-stroke:3px #3a2400;text-shadow:0 6px 0 #3a2400,0 0 30px rgba(255,210,61,.7)}.big .amt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(48px,15vw,84px);font-weight:900;color:#fff;text-shadow:0 0 24px rgba(61,255,110,.8)}.big .sub{margin-top:6px;font-weight:800;color:var(--green);letter-spacing:.06em}@keyframes fade{0%{opacity:0}to{opacity:1}}main.alarm:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse 85% 70% at 50% 50%,#ff142800 72%,#ff142899);will-change:opacity;animation:alarm .56s ease-in-out infinite alternate}@keyframes alarm{0%{opacity:.25}to{opacity:1}}.banner.red .t{color:#ff3b4a;-webkit-text-stroke:3px #2a0006;text-shadow:0 0 30px rgba(255,40,60,.9),0 6px 0 #2a0006;font-size:clamp(36px,11vw,58px);text-align:center;line-height:1}