:root{color-scheme:light;--bg:#f6f5f1;--panel:#fff;--muted:#8792a1;--ink:#344052;--blue:#377cdb;--red:#d77876}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;background:var(--bg);color:var(--ink)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:active{transform:translateY(2px)}button:disabled{opacity:.35;cursor:default}#app{height:100dvh;max-width:1100px;margin:auto;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column}.header{height:63px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#f6f5f1;border-bottom:1px solid #e6e5e1;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#435166;font-weight:900;font-size:16px;letter-spacing:1px}.brand small{display:block;font-size:7px;letter-spacing:2px;color:#94a1b3;margin-top:3px}.brand-mark{width:31px;height:33px;background:#e4edfb;color:var(--blue);border-radius:8px;display:grid;place-items:center;font-size:20px}.header-right{display:flex;align-items:center;gap:18px}.edition{font:9px monospace;letter-spacing:1.2px;color:#97a2b3}.icon-button{width:33px;height:33px;background:#fff;border:1px solid #dce1e8;color:#75859a;display:grid;place-items:center;border-radius:50%}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#main{position:relative;flex:1;min-height:0}#arena{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;display:block}.intro{position:absolute;top:24px;left:0;right:0;text-align:center;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:1.4px;color:#8b96a5;font-weight:700}.intro h1{font-size:24px;line-height:1.4;letter-spacing:1px;margin:9px 0 0;font-weight:800;color:#515f71}.intro h1 span{color:var(--blue)}.preview-note{display:none}.setup{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;width:calc(100% - 32px);max-width:475px;transform:translateX(-50%);padding:16px 18px 13px;background:#ffffffed;border:1px solid #f8fafc;border-radius:14px;box-shadow:0 5px 24px #52647e12}.input-label{display:flex;justify-content:space-between;margin:0 0 8px;font-size:11px;font-weight:700;color:#62738a}.input-label>span{font-size:10px;font-weight:400;color:var(--muted)}.input-box{display:flex;height:47px;background:#f3f6fa;border:1px solid #dde5f0;border-radius:7px}.input-box:focus-within{border-color:#82a9df}input{min-width:0;flex:1;color:var(--blue);border:0;outline:0;background:transparent;padding:0 12px;font-size:23px;font-weight:900;letter-spacing:4px;user-select:text}#clear{background:transparent;color:#9cabbf;border:0;padding:0 14px;font-size:23px}.presets{display:flex;gap:6px;margin-top:9px}.presets button{border:1px solid #e0e5ed;background:#f7f9fc;color:#708198;border-radius:5px;padding:7px 8px;font-size:10px;white-space:nowrap;flex:1}.presets button.selected{color:#306abd;border-color:#91b5e6;background:#eaf2ff}.input-help{font-size:9px;color:#93a0b2;margin:8px 0 13px}.primary{height:49px;display:flex;align-items:center;justify-content:center;position:relative;gap:16px;width:100%;background:var(--blue);color:#fff;border:0;border-radius:7px;font-size:14px;font-weight:800;letter-spacing:1px;box-shadow:0 3px 0 #2763b3}.primary>span{position:absolute;right:17px;font-size:22px;font-weight:400}.instructions{display:flex;gap:22px;align-items:center;justify-content:center;font-size:10px;color:#7c8ca2;margin:13px 0 0}.instructions b{color:var(--blue);font-size:15px;margin-right:4px;font-weight:400}.desktop-tip{color:#9aa7b9;font-size:9px}.hidden{display:none!important}.hud{position:absolute;top:21px;left:20px;right:20px;max-width:690px;margin:auto;padding:13px 18px 12px;background:#ffffffef;border:1px solid #f7f9fc;box-shadow:0 3px 12px #52647e0d;border-radius:11px;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.hud-label{font-size:9px;letter-spacing:.6px;color:#97a2b2}.target-wrap{width:33%}.target-wrap .hud-label{color:#7096c9}#target-word{font-size:21px;color:var(--blue);font-weight:900;letter-spacing:1px;margin-top:5px;overflow:hidden;white-space:nowrap}.time-wrap{text-align:center}.time{font:bold 33px/1.15 monospace;letter-spacing:-2px;color:#68798f;font-variant-numeric:tabular-nums}.time span{font-size:20px;letter-spacing:-1px;color:#96a5b8}.damage-wrap{text-align:right;width:27%}.damage-wrap .hud-label{color:#bc8584}.damage{font:bold 29px/1.4 monospace;color:var(--red)}.damage small{font-size:13px;margin-left:3px}.timer-track{height:3px;background:#edf0f4;margin-top:10px;border-radius:3px;overflow:hidden}#timer-bar{height:100%;background:var(--blue);transform-origin:left center}.hud.urgent .time,.hud.urgent .time span{color:#cc7571}.hud.urgent #timer-bar{background:#d5807a}.countdown{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-shadow:0 3px 0 #fff,0 5px 16px #718cb944;background:#f3f6fa44;font:bold 86px monospace;color:var(--blue);animation:appear .18s ease-out}.countdown small{font:12px Arial,sans-serif;color:#6a7b91;letter-spacing:2px;margin-top:10px}.play-footer{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:20px;right:20px;max-width:440px;margin:auto;text-align:center;pointer-events:none;padding:13px 8px 15px;background:#ffffffc9;border:1px solid #f8fafc;border-radius:10px}.play-footer p{font-size:13px;font-weight:700;letter-spacing:1px;color:#687a93;margin:0 0 5px}.play-footer .instructions{margin-top:5px}.result{position:absolute;inset:0;background:#f6f5f1fa;overflow:auto;padding:25px 23px calc(20px + env(safe-area-inset-bottom));z-index:3}.result-inner{max-width:450px;margin:0 auto}.result .eyebrow{color:#8d9fb9;font:9px monospace;letter-spacing:1.8px}.result .eyebrow>span{color:#a2adbd}.result-top{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.result h2{font-size:25px;letter-spacing:2px;margin:0;color:#4f6584}.rank{border:2px solid #7bacec;color:var(--blue);background:#ffffffa8;border-radius:8px;font:bold 35px monospace;font-style:italic;padding:0 10px;transform:rotate(6deg);min-width:55px;text-align:center}.result-score{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:9px}.result-score>span{font:900 94px/.98 monospace;letter-spacing:-7px;color:var(--blue)}.result-score>small{font:bold 28px monospace;margin-top:17px;color:#7b9ecb}.result-score>small>span{display:block;font:10px Arial,sans-serif;color:#97a7bb;margin-top:5px}#result-comment{font-size:12px;text-align:center;color:#8191a7;margin:13px 0 20px}.comparison{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center}.comparison>div:not(.compare-arrow){position:relative;background:#fff;border:1px solid #e0e6ee;border-radius:9px;aspect-ratio:1.5;overflow:hidden}.comparison span{position:absolute;top:9px;left:10px;font:8px monospace;color:#9daabd;letter-spacing:1.5px}.comparison canvas{display:block;width:100%;height:100%}.compare-arrow{text-align:center;color:#a4b5cc}.stats{display:flex;justify-content:space-around;border-top:1px solid #dce3ed;border-bottom:1px solid #dce3ed;margin-top:17px;padding:12px 0}.stats>div{text-align:center;display:flex;flex-direction:column;gap:4px}.stats strong{font:bold 22px monospace;color:#6481a6}.stats span{font-size:9px;color:#96a4b8}.score-note{color:#9aa8ba;text-align:center;font-size:10px;margin:12px 0 20px}.secondary{width:100%;height:44px;border:0;background:transparent;color:#8599b4;font-size:12px;margin-top:7px}@keyframes appear{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}@media(min-width:700px){.header{padding-left:35px;padding-right:35px}.intro{top:30px}.intro h1{font-size:28px}.setup{bottom:24px}.result{padding-top:35px}.result-inner{max-width:460px}.result-score>span{font-size:112px}.result h2{font-size:30px}.hud{top:25px}.play-footer{bottom:35px}}@media(max-width:480px){.edition,.desktop-tip{display:none}.presets{gap:5px}.presets button{padding:7px 5px}.result{padding-top:22px}.target-wrap{width:35%}#target-word{font-size:18px}}@media(max-height:720px){.header{height:55px}.intro{top:16px}.intro h1{font-size:21px;margin-top:5px}.setup{padding:12px 15px 10px;bottom:10px}.input-help{margin:6px 0 10px}.instructions{margin-top:10px}.input-box{height:41px}.primary{height:44px}.presets button{padding-top:5px;padding-bottom:5px}.result{padding-top:16px}.result-score>span{font-size:77px}.result h2{font-size:23px}.result-top{margin-top:9px}#result-comment{margin:10px 0 13px}.comparison>div:not(.compare-arrow){aspect-ratio:1.85}.stats{margin-top:12px;padding:9px 0}.score-note{margin:10px 0 13px}.hud{top:15px;padding:10px 16px}.play-footer{bottom:18px}}@media(prefers-reduced-motion:reduce){.countdown{animation:none}}

/* Time attack interface on an original matte background. */
.goal-note{text-align:center;color:#a0aabd;font-size:9px;letter-spacing:.5px;margin-top:8px}.play-actions{display:flex;justify-content:center;gap:26px;margin-top:12px;pointer-events:auto}.play-actions button{border:0;border-bottom:1px solid #b9c6d6;padding:2px 0;background:transparent;color:#8a9aaf;font-size:10px}.countdown.finished{font-size:clamp(32px,9vw,57px);letter-spacing:3px}.result-score>span{font-size:clamp(52px,17vw,82px);letter-spacing:-5px}.result-score>small{font-size:20px}.time{font-size:30px}.time span{font-size:18px}.timer-track{height:5px}#timer-bar{transition:transform .12s ease-out}.play-footer{background:#ffffffe0;border-color:#e8ecf1}.intro h1{font-size:25px}.hud{box-shadow:0 2px 15px #57719808}.setup{box-shadow:0 5px 24px #52647e09}.stats strong{font-size:19px}.stats span{font-size:8px}@media(max-height:720px){.play-actions{margin-top:9px}.intro h1{font-size:21px}.result-score>span{font-size:64px}.goal-note{margin-top:5px}}

.input-help{line-height:1.6;min-height:15px}
.privacy-link{color:#8998aa;font-size:9px;text-decoration:underline;text-underline-offset:2px;margin-right:12px}

/* The destruction comparison is the visual focus of the report. */
.result{padding:22px 18px calc(18px + env(safe-area-inset-bottom))}.result-inner{max-width:880px}.result-top{margin-top:12px}.result h2{font-size:25px}.rank{font-size:30px}.result-score{margin-top:6px}.result-score>span{font-size:clamp(48px,10vw,66px);letter-spacing:-3px}.result-score>small{font-size:18px;margin-top:8px}#result-comment{margin:10px 0 20px}.comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.comparison-heading h3{font-size:16px;letter-spacing:1px;margin:0;color:#465c79}.comparison-heading>span{font-size:14px;font-weight:800;color:var(--blue);letter-spacing:3px}.comparison{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:4px}.comparison-card{min-width:0;margin:0;border:1px solid #d9e3f0;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#fff,#f1f6fc);box-shadow:0 6px 20px #4c74a50b}.comparison-card figcaption{display:flex;align-items:center;gap:10px;padding:15px 16px 0;min-height:36px}.comparison-card figcaption span{position:static;font:700 11px monospace;letter-spacing:1.4px;color:#7e93af}.comparison-card strong{font-size:13px;letter-spacing:1px;color:#58759c}.comparison-card b{font:700 8px monospace;letter-spacing:1px;margin-left:auto;background:#377cdb;color:#fff;padding:4px 6px;border-radius:4px}.comparison canvas{height:260px;width:100%;display:block}.comparison .after-card{border:2px solid #8eb9ef;background:linear-gradient(160deg,#fff,#e8f2ff);box-shadow:0 6px 22px #377cdb12}.comparison .after-card strong{color:#286dcc}.compare-arrow{font-size:24px;color:#7b9ac5}.stats,.score-note,.result .primary,.result .secondary{max-width:480px;margin-left:auto;margin-right:auto}.stats{margin-top:20px}.stats span{font-size:10px}.score-note{margin-bottom:16px}.input-help{font-size:10px}
@media(max-width:620px){.result{padding:18px 16px calc(16px + env(safe-area-inset-bottom))}.result .eyebrow{font-size:8px;letter-spacing:1px}.result-top{margin-top:10px}.result h2{font-size:22px}.result-score>span{font-size:52px}.comparison{grid-template-columns:minmax(0,1fr);gap:6px}.comparison canvas{height:clamp(155px,43vw,220px)}.comparison-card figcaption{padding:12px 14px 0;min-height:29px}.comparison-card figcaption span{font-size:10px}.compare-arrow{height:16px;font-size:20px;line-height:16px;transform:rotate(90deg)}.comparison-heading h3{font-size:15px}#result-comment{font-size:11px;margin-bottom:18px}.stats{margin-top:16px}}

/* Successful hits keep the combo alive; color follows actual attack strength. */
.combo-meter{--combo-color:#397edd;margin-top:9px;color:var(--combo-color);transition:color .12s,opacity .18s;opacity:1}.combo-meter.inactive{opacity:.4}.combo-info{display:flex;align-items:center;gap:10px;font:700 9px monospace;min-height:24px}.combo-info>span{white-space:nowrap}.combo-info strong{font:bold 23px/1 monospace;letter-spacing:-1px;vertical-align:-2px}.combo-info b{font:800 12px Arial,sans-serif;white-space:nowrap}.combo-info small{margin-left:auto;font:700 10px Arial,sans-serif;text-align:right}.combo-track{height:3px;margin-top:5px;background:#e5edf7;border-radius:3px;overflow:hidden}.combo-track>div{height:100%;background:var(--combo-color);transform-origin:left center}.combo-meter.inactive .combo-info strong,.combo-meter.inactive .combo-info b{visibility:hidden}@media(max-width:380px){.combo-info{gap:6px}.combo-info b{font-size:11px}.combo-info small{font-size:9px}.combo-info strong{font-size:21px}}

/* Keep the full flight path clear: a narrow top readout and bottom controls. */
#app.is-playing .header{height:42px;padding:0 16px;background:transparent;border-bottom-color:transparent}#app.is-playing .brand{font-size:12px;gap:6px}#app.is-playing .brand-mark{width:23px;height:25px;font-size:16px}#app.is-playing .brand small,#app.is-playing .edition{display:none}
.hud{top:6px;left:14px;right:14px;padding:7px 10px 6px;border:0;border-radius:7px;background:#ffffffa6;box-shadow:none;max-width:690px}.hud-top{gap:8px}.hud-label{font-size:8px;letter-spacing:0}.target-wrap,.damage-wrap{width:30%}#target-word{font-size:16px;margin-top:1px;line-height:1.15;letter-spacing:1px}.time{font-size:23px;line-height:1.15;letter-spacing:-1px}.time span{font-size:14px}.damage{font-size:22px;line-height:1.15}.damage small{font-size:10px}.timer-track{height:2px;margin-top:5px}.goal-note{display:none}
.play-footer{bottom:calc(8px + env(safe-area-inset-bottom));left:14px;right:14px;max-width:470px;padding:0;background:transparent;border:0;border-radius:0}.play-footer .combo-meter{margin:0 0 5px;padding:5px 8px 4px;background:#ffffffb3;border-radius:7px}.play-footer .combo-meter.inactive{opacity:0}.play-footer .combo-info{min-height:22px;gap:9px}.play-footer .combo-info strong{font-size:21px}.play-footer .combo-info b{font-size:11px}.play-footer .combo-info small{font-size:9px}.play-footer .combo-track{height:2px;margin-top:3px}.play-footer .instructions{margin:0;gap:18px;font-size:9px}.play-footer .instructions b{font-size:12px}.play-actions{margin-top:2px;gap:18px}.play-actions button{min-height:36px;min-width:84px;padding:6px 10px;font-size:10px;border:0;border-radius:6px;color:#6d829d;background:#ffffff6b}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(max-height:620px){#app.is-playing .header{height:36px}.hud{top:3px;padding-top:5px;padding-bottom:4px}.hud-label{font-size:7px}.time{font-size:21px}.damage{font-size:20px}#target-word{font-size:14px}.play-footer{bottom:calc(3px + env(safe-area-inset-bottom))}.play-footer .instructions{display:none}.play-footer .combo-meter{margin-bottom:2px}.play-actions button{min-height:32px}}

.input-help:empty,#result-comment:empty,.preview-note:empty{display:none}

.brand>span:last-child{font-size:clamp(11px,3.3vw,16px)}

.info-page{overflow:auto;height:auto;min-height:100vh}.info-content{max-width:620px;margin:32px auto;padding:24px;line-height:1.9}.info-content h1{font-size:24px}.info-content a{color:#377cdb}
