#gamable-game-zone{background:#05030c;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}#gamable-game-zone canvas{display:block}.hud{position:absolute;inset:0;z-index:10;pointer-events:none;font-family:Trebuchet MS,system-ui,-apple-system,sans-serif;color:#eaf6ff;letter-spacing:.02em;text-shadow:0 2px 6px rgba(0,0,0,.85)}.hud-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:10px;padding:12px 14px}@media(hover:none)and (pointer:coarse){.hud-bar{padding-right:56px}}.hud-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}.hud-side.right{align-items:flex-end}.hud-side.left .hud-name{color:#8bffdc}.hud-side.right .hud-name{color:#ff8ab0}.hud-name{font-size:14px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}.hud-health{position:relative;width:100%;height:16px;border:1px solid rgba(255,255,255,.75);border-radius:2px;background:var(--health-lost);overflow:hidden;box-shadow:0 0 14px #000000b3,inset 0 0 8px #0009;transform:skew(-12deg)}.hud-health-fill,.hud-health-trail{position:absolute;top:0;bottom:0;left:0}.hud-side.right .hud-health-fill,.hud-side.right .hud-health-trail{left:auto;right:0}.hud-health-trail{background:#ff5c8a;transition:width .6s ease-in .35s}.hud-health-fill{background:linear-gradient(90deg,var(--health),#ffffff);box-shadow:0 0 12px var(--health)}.hud-health-fill.low{background:linear-gradient(90deg,var(--health-low),#ffb0c6);box-shadow:0 0 12px var(--health-low)}.hud-energy{width:70%;height:7px;border-radius:4px;background:#060a18cc;box-shadow:inset 0 0 6px #000c;overflow:hidden}.hud-side.right .hud-energy{display:flex;justify-content:flex-end}.hud-energy-fill{height:100%;background:var(--energy);box-shadow:0 0 10px var(--energy)}.hud-energy.full .hud-energy-fill{background:#fff;box-shadow:0 0 16px #fff;animation:hud-glow .4s ease-in-out infinite alternate}.hud-pips{display:flex;gap:6px}.hud-pip{width:10px;height:10px;border:1px solid rgba(255,255,255,.85);background:#08061499;transform:rotate(45deg)}.hud-pip.won{background:var(--banner);box-shadow:0 0 10px var(--banner)}.hud-clock{flex:0 0 auto;min-width:58px;padding:1px 10px;border-radius:2px;background:linear-gradient(#140828d9,#080412d9);border:1px solid rgba(140,200,255,.5);font-size:30px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;transform:skew(-12deg)}.hud-banner{position:absolute;top:26%;left:0;right:0;text-align:center;opacity:0}.hud-banner.visible{animation:hud-pop .35s cubic-bezier(.2,1.6,.4,1) forwards}.hud-banner-text{font-size:clamp(38px,12vw,82px);font-weight:900;font-style:italic;letter-spacing:.04em;color:#fff;text-shadow:0 0 6px var(--banner),0 0 26px var(--banner),0 6px 0 #2a0030}.hud-banner-sub{margin-top:8px;font-size:clamp(14px,4vw,20px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9fe9ff}.hud-combo{position:absolute;top:40%;font-size:clamp(20px,5.6vw,32px);font-weight:900;font-style:italic;color:#ffd23f;opacity:0;transition:opacity .2s;text-shadow:0 0 12px #ff9f1c}.hud-combo.left{left:18px}.hud-combo.right{right:18px}.hud-combo.visible{opacity:1;animation:hud-pop .25s ease-out}.hud-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;background:radial-gradient(circle at 50% 42%,#080314b8,#030109f5)}.hud-title{margin:0;font-size:clamp(38px,12vw,84px);font-weight:900;font-style:italic;letter-spacing:.08em;line-height:1;color:#fff;text-shadow:0 0 8px var(--banner),0 0 30px var(--banner),0 0 60px #35e0ff}.hud-subtitle{margin:0;max-width:26em;font-size:clamp(15px,4.2vw,20px);font-weight:700;color:#d6ecff}.hud-hint{margin:18px 0 0;font-size:clamp(16px,4.6vw,22px);font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8bffdc}.hud-small{margin:0;max-width:34em;font-size:16px;line-height:1.6;font-weight:600;color:#cfe6ff;text-shadow:0 2px 8px #000,0 0 2px #000}.hud-pulse{animation:hud-glow .8s ease-in-out infinite alternate}@keyframes hud-glow{0%{opacity:1}to{opacity:.42}}@keyframes hud-pop{0%{opacity:0;transform:scale(1.7)}to{opacity:1;transform:scale(1)}}.hud-select{background:radial-gradient(circle at 50% 60%,#06021240,#030109e0);justify-content:flex-start;padding-top:max(12px,3.5vh);gap:6px}.hud-screen-title{margin:0;font-size:clamp(24px,7.4vw,42px);font-weight:900;font-style:italic;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 0 8px var(--banner),0 0 26px #35e0ff}.hud-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(520px,94%)}.hud-card{pointer-events:auto;position:relative;padding:10px 12px;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:linear-gradient(160deg,#0a061cd1,#04020ceb);cursor:pointer;transform:skew(-4deg);transition:border-color .12s,box-shadow .12s,transform .12s}.hud-card.active{border-color:var(--card);box-shadow:0 0 22px var(--card),inset 0 0 26px #ffffff0f;transform:skew(-4deg) translateY(-2px) scale(1.03)}.hud-card.locked{cursor:default}.hud-card-name{display:block;font-size:clamp(19px,5vw,26px);font-weight:900;font-style:italic;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px var(--card)}.hud-card-tag{display:block;margin-top:2px;font-size:clamp(12px,3.1vw,14px);font-weight:700;color:#cfe6ff}.hud-versus{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;background:radial-gradient(ellipse at center,#0000 32%,#030109c7);opacity:0}.hud-versus.visible{animation:hud-versus-in .45s ease-out forwards}@keyframes hud-versus-in{0%{opacity:0}to{opacity:1}}.hud-versus-side{flex:1 1 0;min-width:0;text-align:center}.hud-versus-name{font-size:clamp(18px,5.6vw,40px);font-weight:900;font-style:italic;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px var(--card),0 0 34px var(--card)}.hud-versus-tag{font-size:clamp(11px,3vw,15px);font-weight:700;color:#d6ecff}.hud-versus-mark{flex:0 0 auto;padding:0 6px;font-size:clamp(30px,9.5vw,68px);font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 14px var(--banner),0 0 44px var(--energy);animation:hud-glow .55s ease-in-out infinite alternate}.hud-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}.hud-button{pointer-events:auto;padding:12px 22px;border:2px solid rgba(255,255,255,.25);border-radius:6px;background:linear-gradient(160deg,#0c0820e6,#05020eeb);font-size:clamp(14px,3.8vw,18px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#d6ecff;cursor:pointer;transform:skew(-8deg);transition:border-color .12s,box-shadow .12s,color .12s}.hud-button.active{border-color:var(--banner);box-shadow:0 0 22px var(--banner);color:#fff}