:root{color-scheme:dark;--bg:#080c10;--panel:#0e1419;--line:#253038;--text:#e8eee8;--muted:#94a39f;--lime:#b9ff5f;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif}body{padding:0 24px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.shell{max-width:1300px;margin:0 auto}
.topline{height:74px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #202a30}.brand{display:flex;align-items:center;gap:8px;font:700 20px var(--mono);letter-spacing:-.08em}.brand img{width:43px;height:43px;object-fit:contain}.brand span{color:var(--lime)}.back-link{color:#a5b5ae;font-size:13px}.back-link:hover{color:var(--lime)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.sound-toggle,.round-icon{height:40px;border:1px solid #34443c;background:#101918;color:#d8e7d5;border-radius:5px}.sound-toggle{padding:0 13px;font-size:13px}.round-icon{width:42px;display:grid;place-items:center;font-size:19px}.sound-toggle:hover,.round-icon:hover{border-color:#93c85a}
.game-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:24px auto 18px;max-width:1050px}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 7px;color:#82958c;font:11px var(--mono);letter-spacing:.12em}.eyebrow span{display:block;width:23px;height:1px;background:var(--lime)}.game-heading h1{margin:0;font-size:clamp(25px,3vw,38px);letter-spacing:-.055em;line-height:1.2}.game-heading h1 em{color:var(--lime);font-style:normal}.heading-copy{margin:7px 0 0;color:#a7b2ae;font-size:14px;line-height:1.6}.game-badge{padding:8px 11px;border:1px solid #314039;border-radius:4px;color:#a9c39a;background:#111b17;font-size:12px;white-space:nowrap}.game-badge i,.tip-dot,.fail-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--lime)}
.hud{max-width:1050px;margin:0 auto 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hudbox{height:70px;display:flex;align-items:center;gap:12px;padding:10px 15px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.stat-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #3c4b3a;border-radius:5px;color:var(--lime);background:#18241a;font-size:19px}.stack{min-width:0;display:flex;flex-direction:column;gap:3px}.hudbox .stack span{font-size:12px;color:#9caeaa}.hudbox strong{font:600 21px var(--mono);color:#e7f3dc;font-variant-numeric:tabular-nums}.hp strong{color:var(--lime)}
.playzone{max-width:1050px;margin:auto}.arena-frame{position:relative;overflow:hidden;aspect-ratio:1/1;width:min(100%,70vh,760px);max-height:760px;margin:auto;border:1px solid #26352e;border-radius:6px;background-color:#101a20;background-image:linear-gradient(#849e9e0c 1px,transparent 1px),linear-gradient(90deg,#849e9e0c 1px,transparent 1px);background-size:32px 32px}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.scrim{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:14px;background:#080d10e8;overflow:auto}.scrim.hidden{display:none}.overlay-card{width:min(100%,490px);max-height:100%;overflow:auto;padding:26px 32px;background:#101819;border:1px solid #35433a;border-radius:7px;text-align:center;box-shadow:0 18px 50px #0007}.intro-shapes{display:flex;justify-content:center;margin:-9px auto 4px}.intro-shapes img{width:65px;height:65px;object-fit:contain;margin:0 -6px}.mini-label{color:#9caf9a;font:11px var(--mono);letter-spacing:.14em}.mini-label.danger{color:#f18d96}.overlay-card h2{margin:8px 0;font-size:clamp(27px,3.2vw,40px);line-height:1.22;letter-spacing:-.06em}.overlay-card h2 span{color:var(--lime)}.tagline,.overlay-card>p{margin:8px 0 14px;color:#aebcb6;font-size:14px;line-height:1.6}.good{color:var(--lime)}.bad{color:#ff8f9d}.how{display:grid;gap:8px;text-align:left;margin:0 auto 16px;padding:14px;border:1px solid #293830;background:#0b1211;border-radius:5px;color:#bac7c0;font-size:13px}.how span{display:inline-block;width:30px;color:#a9cb7e;font:11px var(--mono)}.main-btn{width:min(100%,320px);min-height:49px;display:inline-flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;border:0;border-radius:5px;background:var(--lime);color:#10180c;font-size:15px;font-weight:800;text-align:left}.main-btn:hover{background:#d0ff95}.main-btn span{font-size:19px}.record{margin-top:12px;color:#94a59b;font-size:12px}.record b{color:#d3e6c4;font:600 13px var(--mono)}
.overlay-card.compact{max-width:460px}.overlay-card.compact h2{font-size:32px}.game-over{color:#f0f4ef}.ghost-btn{display:block;margin:9px auto 0;padding:7px 12px;border:0;background:transparent;color:#b4c3ba;font-size:13px;text-decoration:underline;text-underline-offset:4px}.ghost-btn:hover{color:var(--lime)}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:16px 0;padding:13px 0;border-block:1px solid #2b3932}.result-stats>div{display:flex;flex-direction:column;gap:7px}.result-stats small{font-size:12px;color:#94a59c}.result-stats strong{font:600 17px var(--mono);color:#e8f1e6}.result-details{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 15px;color:#a7b6aa;font-size:12px}.result-details b{color:#e5efda}.result-details strong{color:var(--lime)}.result-details strong[hidden]{display:none}#shareStatus:empty{display:none}
.footer{max-width:1050px;margin:14px auto 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#98aaa1;font-size:12px;line-height:1.5}.tip{display:flex;align-items:center;gap:6px}.tip-dot,.fail-dot{width:6px;height:6px;margin:0}.fail-dot{background:#ff8192}.tip b{color:#dbe8dd}.sep{height:15px;border-left:1px solid #344039;margin:0 7px}.site-footer{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #202a30;color:#7e8d87;font:12px var(--mono)}.site-footer nav{display:flex;gap:16px;font-family:system-ui,sans-serif}.site-footer a:hover{color:var(--lime)}
@media(max-width:850px){body{padding:0 14px}.topline{height:62px;gap:14px}.brand{font-size:17px}.brand img{width:34px;height:34px}.back-link{font-size:12px}.header-actions{gap:6px}.sound-toggle{height:37px;padding:0 9px;font-size:12px}.round-icon{height:37px;width:38px}.game-heading{margin:18px auto 14px}.game-heading h1{font-size:28px}.heading-copy{font-size:13px}.game-badge{font-size:11px;padding:6px}.hud{gap:6px;margin-bottom:10px}.hudbox{height:61px;gap:7px;padding:7px}.stat-icon{width:28px;height:28px;font-size:15px}.hudbox .stack span{font-size:11px}.hudbox strong{font-size:16px}.arena-frame{width:100%;max-height:none}.scrim{padding:6px}.overlay-card{padding:14px 17px}.intro-shapes{margin:-6px auto 1px}.intro-shapes img{width:48px;height:48px;margin:0 -5px}.overlay-card h2{font-size:27px;margin:5px 0}.tagline,.overlay-card>p{font-size:12px;margin:5px 0 9px}.how{gap:5px;padding:9px;margin-bottom:10px;font-size:12px}.how span{width:25px}.main-btn{min-height:43px;font-size:14px}.record{margin-top:8px}.footer{margin:11px auto 20px;font-size:11px}.foot-right{display:none}.site-footer{font-size:11px;flex-wrap:wrap;padding:16px 0}}
@media(max-width:390px){body{padding:0 10px}.brand{font-size:15px}.brand img{width:30px;height:30px}.topline{gap:9px}.game-heading h1{font-size:25px}.game-badge{display:none}.hudbox{padding:6px;gap:5px}.stat-icon{width:24px;height:28px}.hudbox strong{font-size:14px}.intro-shapes img{width:42px;height:42px}.overlay-card{padding:10px 12px}.overlay-card h2{font-size:24px}.how{gap:3px}.overlay-card.compact h2{font-size:25px}.result-stats{margin:9px 0;padding:8px 0}.result-stats strong{font-size:14px}.result-details{margin-bottom:8px}.ghost-btn{margin:3px auto;padding:5px}.site-footer nav{gap:10px}}

/* The supplied transparent sprite sheets remain intact; SVG viewBoxes select the art. */
.hud{gap:12px}
.hudbox{position:relative;isolation:isolate;display:grid;grid-template-columns:22% minmax(0,1fr);align-items:center;gap:3%;height:88px;padding:8px 6% 12px 6%;border:0;border-radius:0;background:none}
.hud-frame{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden}
.hudbox .stat-icon{display:block;justify-self:center;width:min(100%,48px);height:48px;border:0;border-radius:0;background:none;overflow:hidden}
.hudbox .combo-icon{width:min(100%,56px)}
.hudbox .stack{gap:4px;overflow:hidden}
.hudbox .stack span{color:#b6ccc5;font-size:13px;font-weight:600;white-space:nowrap}
.hudbox strong{color:#f3fbe9;font-size:clamp(16px,2vw,24px);line-height:1.1;white-space:nowrap;letter-spacing:-.04em;text-shadow:0 0 12px #b9ff5f33}
.hudbox.hp strong{color:#c7ff8e}
@media(max-width:850px){.hud{gap:6px}.hudbox{height:70px;padding:7px 5% 10px;gap:2%}.hudbox .stat-icon{height:35px;width:min(100%,35px)}.hudbox .combo-icon{width:min(100%,39px)}.hudbox .stack span{font-size:11px}.hudbox strong{font-size:clamp(12px,3.4vw,18px)}}
@media(max-width:390px){.hudbox{height:62px;padding:6px 4% 9px}.hudbox .stat-icon{height:28px;width:min(100%,28px)}.hudbox .combo-icon{width:min(100%,32px)}.hudbox .stack span{font-size:10px}.hudbox strong{font-size:clamp(11px,3.3vw,14px)}}
.hudbox{display:block;padding:0}
.hudbox .stat-icon{position:absolute;left:7%;top:48%;transform:translateY(-50%);width:20%;height:56%}
.hudbox .combo-icon{width:21%}
.hudbox .stack{position:absolute;left:34%;right:6%;top:47%;transform:translateY(-50%);overflow:hidden}
@media(max-width:600px){.hud{grid-template-columns:1.3fr 1fr 1fr}.hudbox{height:72px;padding:0}.hudbox .stat-icon{width:20%;height:52%}.hudbox .combo-icon{width:21%}.hudbox .stack span{font-size:11px}.hudbox strong{font-size:clamp(12px,3.5vw,15px)}}