:root{color-scheme:dark;--bg:#101217;--panel:#191d25;--ink:#f2f3f5;--muted:#9ba1ad;--line:#333945;--red:#d93643;--felt:#173044}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}
body{display:grid;place-items:center;background:#080a0d;color:var(--ink);font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif}
button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}button{color:var(--ink)}
#app{position:relative;width:min(100%,460px);height:100dvh;max-height:940px;display:flex;flex-direction:column;background:var(--bg);padding:max(8px,env(safe-area-inset-top)) 16px max(6px,env(safe-area-inset-bottom));overflow:hidden}
header{height:34px;flex-shrink:0;display:flex;align-items:center;gap:12px;font-size:12px}header>a{color:var(--muted);text-underline-offset:3px}header>span{margin-left:auto;font-weight:750}header small{font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}#pause{width:29px;height:29px;border:1px solid var(--line);background:transparent}
#table{min-height:0;flex:1;display:flex;flex-direction:column;gap:10px}.status{height:40px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.status b{color:var(--ink);font-size:17px;margin-left:9px;font-variant-numeric:tabular-nums}
#scene{position:relative;flex:1;min-height:125px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}canvas{display:block;width:100%;height:100%;object-fit:contain}.target-health{position:absolute;top:12px;left:14px;right:14px;font-size:11px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;color:#bac0ca}.target-health b{color:var(--ink);font-variant-numeric:tabular-nums}.target-health>div{width:100%;height:3px;background:#414752}.target-health i{display:block;height:100%;width:100%;background:#d6dbe4;transition:width .15s}#hitLabel{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:14px;font-weight:750;min-height:20px}
#calculation{flex-shrink:0;min-height:78px;padding:8px 0}.hand-line{display:flex;align-items:baseline;gap:12px;justify-content:space-between}.hand-line strong{font-size:14px}.hand-line span{font-size:10px;color:var(--muted);text-align:right}.equation{display:flex;align-items:baseline;justify-content:center;gap:13px;font-size:28px;font-weight:750;font-variant-numeric:tabular-nums;margin-top:6px}.operator{font-size:19px;color:var(--muted);font-weight:400}.equation strong{font-size:34px;color:#fff}
#mathNote{text-align:center;font-size:10px;line-height:1.4;color:var(--muted);margin-top:3px}.impact .equation strong{animation:impact .16s ease-out}@keyframes impact{from{transform:scale(1.2)}to{transform:scale(1)}}
#dice{display:flex;justify-content:center;gap:18px;flex-shrink:0;background:var(--felt);padding:15px 10px 9px;border-top:1px solid #375168;border-bottom:1px solid #375168}.die{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;opacity:1!important}.die svg{width:74px;height:74px;background:#f2f3f5;fill:#202631;border:3px solid #f2f3f5;border-radius:6px;box-shadow:0 3px 0 #06090d}.die[aria-pressed="true"] svg{border-color:var(--red);box-shadow:0 3px 0 #8e1f2a}.die span{font-size:10px;color:#bbc7d3}.die[aria-pressed="true"] span{color:#fff;font-weight:750}.rolling .die:not([aria-pressed="true"]) svg{animation:tumble .1s infinite alternate}@keyframes tumble{from{transform:translateY(-3px) rotate(-5deg)}to{transform:translateY(1px) rotate(5deg)}}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0}.actions button,.primary,.secondary{min-height:46px;border:1px solid var(--line);background:var(--panel);font-weight:750;font-size:13px;border-radius:3px}#punch,.primary{background:var(--red);border-color:var(--red)}#instruction{font-size:11px;line-height:1.4;color:var(--muted);margin:0;text-align:center;min-height:16px;flex-shrink:0}#equipment{flex-shrink:0;display:flex;gap:8px;min-height:37px;align-items:center;color:var(--muted);font-size:11px}.gear{flex:1;border-top:1px solid var(--line);padding-top:7px}.gear b{display:block;color:var(--ink);font-size:11px}.gear span{display:block;margin-top:3px;font-size:10px;line-height:1.4}.gear.active{border-color:#d6dbe4}.gear.active b::after{content:' · 적용';color:#d6dbe4;font-size:9px}
footer{display:flex;height:28px;flex-shrink:0;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);padding-top:3px}#sound{border:0;background:none;color:var(--muted);font-size:10px;padding:6px 0 6px 12px}
#overlay{position:absolute;inset:42px 0 32px;background:var(--bg);z-index:3;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}#overlay.hidden{display:none}.panel{width:100%;max-width:330px}.panel h1{font-size:34px;line-height:1.1;letter-spacing:-.04em;margin:0 0 20px}.panel h2{font-size:25px;margin:0 0 13px}.panel p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 21px}.primary,.secondary{width:100%;display:block;margin-top:10px}.secondary{background:transparent}.demo{display:flex;justify-content:center;gap:12px;padding:20px 0;margin:16px 0;background:var(--felt)}.demo svg{width:60px;height:60px;background:#f2f3f5;fill:#202631;border-radius:5px}.rules{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:20px 0 26px}.rules b{display:block;color:var(--ink);margin-top:4px;font-size:15px}.choice{display:block;width:100%;background:none;border:0;border-top:1px solid var(--line);text-align:left;padding:18px 1px;color:var(--ink)}.choice:last-child{border-bottom:1px solid var(--line)}.choice:hover{background:var(--panel)}.choice b{display:block;font-size:15px;margin-bottom:6px}.choice span{font-size:12px;line-height:1.7;color:var(--muted)}.result{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;font-size:12px}.result:last-of-type{margin-bottom:18px}.footnote{font-size:10px!important;margin:18px 0 0!important}.result b{font-variant-numeric:tabular-nums}
@media(max-height:720px){#app{padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}header{height:29px}#table{gap:7px}.status{height:35px}#calculation{min-height:66px;padding:4px 0}.equation{margin-top:3px;font-size:25px}.equation strong{font-size:30px}#dice{padding-top:10px;padding-bottom:6px;gap:17px}.die svg{width:65px;height:65px}.die{gap:4px}.actions button{min-height:42px}#equipment{min-height:32px}.gear span{font-size:9px}#overlay{inset:34px 0 28px;padding:20px}.panel h1{font-size:30px}.panel p{margin-bottom:16px}.demo{padding:14px 0;margin:12px 0}.rules{margin:17px 0 22px}.choice{padding:14px 1px}}
@media(prefers-reduced-motion:reduce){.rolling .die svg{animation:none}.target-health i{transition:none}}