@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');
:root{--ink:#111315;--paper:#eeece5;--lime:#c2fa58;--red:#f05b49}*{box-sizing:border-box}body{margin:0;background:#17191a;color:var(--paper);font-family:'DM Mono',monospace;min-height:100vh;display:grid;place-items:center;padding:24px}.cabinet{width:min(1100px,100%);background:#202324;border:1px solid #454a47;padding:26px 34px;box-shadow:0 24px 80px #0008}header{position:relative;border-bottom:1px solid #414644;padding-bottom:17px}.eyebrow,footer,.tagline,.fighter-label b,.controls{font-size:10px;letter-spacing:.13em}.eyebrow{color:var(--lime)}h1{font:900 clamp(42px,7vw,76px)/.86 'Barlow Condensed',sans-serif;letter-spacing:.02em;margin:12px 0 7px}h1 span{color:var(--lime)}.tagline{margin:0;color:#9b9e97}.hud{display:grid;grid-template-columns:1fr 3fr 80px 3fr 1fr;gap:12px;align-items:center;padding:18px 0}.fighter-label{display:flex;flex-direction:column;gap:6px}.fighter-label b{color:var(--lime);white-space:nowrap}.fighter-label span{font:700 19px 'Barlow Condensed',sans-serif}.righttext{text-align:right}.meter{height:15px;border:2px solid #777d74;padding:2px;transform:skew(-12deg)}.meter i{height:100%;width:100%;display:block;background:var(--lime);transition:width .18s}.meter.right i{margin-left:auto;background:var(--red)}.round{text-align:center;color:#bec0b6;font-size:10px}.arena{position:relative;background:#111;border:1px solid #4e5551;overflow:hidden}.arena:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#c2fa5808 1px,transparent 1px),linear-gradient(#c2fa5808 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000)}canvas{display:block;width:100%;height:auto;aspect-ratio:960/460}.overlay{position:absolute;inset:0;background:#101312c9;display:grid;place-items:center}.overlay.hidden{display:none}.card{text-align:center;padding:26px;max-width:440px}.seal{margin:auto;border:1px solid var(--lime);color:var(--lime);width:45px;height:45px;display:grid;place-items:center;font:800 19px 'Barlow Condensed';transform:rotate(-8deg)}h2{font:800 35px 'Barlow Condensed';margin:15px 0 6px}.card p{font-size:12px;color:#b7bab1}.card button{display:block;margin:22px auto 14px;border:0;padding:13px 30px;background:var(--lime);font:800 16px 'Barlow Condensed';letter-spacing:.08em;cursor:pointer}.card button:hover{background:#d7ff99;transform:translateY(-2px)}.card small{font-size:9px;color:#9da197;letter-spacing:.1em}.controls{display:flex;justify-content:space-between;gap:16px;padding:17px 0;color:#b9bcb3;font-size:9px}.controls strong{color:var(--lime);margin-right:9px}kbd{display:inline-block;background:#343a36;border:1px solid #565d57;padding:4px 6px;margin:0 2px;color:#fff;font:10px 'DM Mono' }footer{border-top:1px solid #414644;padding-top:13px;display:flex;justify-content:space-between;color:#81877f;font-size:9px}footer span:first-child{color:var(--lime)}@media(max-width:700px){body{padding:8px}.cabinet{padding:19px 13px}.hud{grid-template-columns:1fr 2fr 44px 2fr 1fr;gap:5px}.fighter-label b{font-size:7px}.fighter-label span{font-size:15px}.meter{height:12px}.controls{font-size:8px;flex-direction:column}footer{font-size:7px}}