:root{color-scheme:dark;--bg:#0b0b0c;--panel:#161617;--fg:#f5f5f3;--muted:#898989;--edge:#383839;--green:#62ec8c;--red:#ff6065}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#050505;color:var(--fg);font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{height:100vh;height:100dvh;width:100%;max-width:600px;position:relative;margin:auto;background:var(--bg);overflow:hidden} .screen{position:absolute;inset:0;display:none;flex-direction:column;min-width:0;min-height:0;padding:calc(13px + env(safe-area-inset-top)) calc(15px + env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom)) calc(15px + env(safe-area-inset-left));overflow:hidden}.screen.active{display:flex}
.kicker{letter-spacing:.2em;font-weight:800;font-size:10px;color:var(--muted)}.start{justify-content:center;align-items:center;text-align:center;gap:0}.start .kicker{margin-bottom:17px}.start-number{font-size:clamp(105px,31dvh,220px);font-weight:900;letter-spacing:-.095em;line-height:.82;margin-left:-.08em;font-variant-numeric:tabular-nums}.start-title{font-size:clamp(24px,7.5vw,36px);font-weight:900;letter-spacing:.13em;margin-top:15px}.start-sub{font-size:12px;letter-spacing:.15em;color:var(--muted);margin-top:19px}.main-button{appearance:none;border:1px solid #fff;background:var(--fg);color:#0a0a0a;border-radius:1px;font-size:17px;font-weight:900;min-height:53px;width:100%;cursor:pointer;letter-spacing:.09em}.main-button:active{opacity:.75}.start .main-button{margin-top:clamp(24px,6dvh,55px);max-width:360px}.start-bottom{margin-top:18px;font-size:10px;letter-spacing:.2em;color:#696969}
.game{gap:0}.hud{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;min-height:53px}.hud-panel{display:flex;flex-direction:column;gap:3px;min-width:0}.hud-label{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.15em}.hud-num{font-size:clamp(24px,6.7dvh,36px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}.hud-score{text-align:right}.hud-combo{text-align:center;align-items:center;padding-bottom:1px}.combo{font-weight:900;font-size:19px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .1s,transform .1s}.combo.streak2{color:var(--green);font-size:24px}.combo.streak5{color:var(--red);font-size:27px}.combo.pop{animation:combo-pop .22s ease-out}@keyframes combo-pop{0%{transform:scale(1)}42%{transform:scale(1.38)}100%{transform:scale(1)}}.timer-track{height:2px;background:#383838;flex:0 0 2px;margin-top:11px}.timer-fill{height:100%;width:100%;background:#e6e6e6;transform-origin:left;will-change:transform}.flag-area{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px 5px}.flag-figure{width:100%;height:100%;display:flex;align-items:center;justify-content:center;visibility:hidden}.flag-figure.visible{visibility:visible}.flag-picture{width:min(80vw,410px);max-width:100%;max-height:90%;height:auto;object-fit:contain;filter:drop-shadow(0 14px 15px rgba(0,0,0,.35))}.flag-picture:not([src]){display:none}.feedback{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:100px;font-weight:900;opacity:0;z-index:3;transform:scale(.7)}.feedback.show{animation:flash .21s ease-out}@keyframes flash{10%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.3)}}.choices{flex:none;display:grid;grid-template-columns:1fr;gap:8px;padding-top:6px}.choice{background:var(--panel);color:var(--fg);border:1px solid var(--edge);min-height:clamp(43px,7.1dvh,61px);border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 12px;font-weight:750;font-size:clamp(13px,4vw,18px);line-height:1.18;overflow-wrap:anywhere;transition:background .1s,color .1s,border-color .1s}.choice:active:not(:disabled){background:#383838}.choice:disabled{cursor:default}.choice.correct-answer{background:#f2f2f2;color:#080808;border-color:#fff}.choice.wrong-answer{border-color:#999;color:#999;text-decoration:line-through}.choices.loading{visibility:hidden}#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.result{gap:clamp(4px,.8dvh,8px)}.result-top{display:flex;align-items:center;justify-content:space-between;flex:none}.small-label{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.13em}.result-hero{display:grid;grid-template-columns:1.15fr .9fr 1.3fr;align-items:center;gap:8px;flex:none;min-width:0;padding:0 0 6px;border-bottom:1px solid var(--edge)}.hero-number{font-size:clamp(48px,10dvh,83px);line-height:.95;font-weight:900;letter-spacing:-.075em;font-variant-numeric:tabular-nums}.hero-rank{font-size:clamp(33px,7.2dvh,53px);font-weight:900;line-height:1}.rank-rule{font-size:8px;line-height:1.2;color:var(--muted);margin-top:4px}.hero-best{text-align:right}.best-value{font-size:clamp(23px,4.5dvh,32px);font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums}.best-delta{font-size:10px;font-weight:750;margin-top:4px;font-variant-numeric:tabular-nums}.best-updated{display:inline-block;background:#eee;color:#0b0b0c;font-size:9px;font-weight:900;padding:2px 4px;margin-top:4px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:4px;flex:none}.metric{border:1px solid var(--edge);min-width:0;padding:6px 3px 5px;text-align:center}.metric strong{display:block;font-size:clamp(13px,3.9vw,20px);font-weight:900;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}.metric span{display:block;font-size:clamp(7px,2.2vw,10px);color:var(--muted);margin-top:2px;line-height:1.2;white-space:nowrap}.compact-line{display:flex;align-items:center;gap:8px;min-width:0;flex:none;border-bottom:1px solid #292929;padding-bottom:4px;font-size:11px}.compact-line strong{font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}.compact-line .small-label{font-size:9px;white-space:nowrap}.fastest-flag{height:22px;max-width:35px;object-fit:contain;flex:0 0 auto}.fastest-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fastest-time{margin-left:auto;white-space:nowrap}.pace-line{gap:12px}.pace-line strong{font-size:12px}.result-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px;min-width:0;flex:none}.result-panel{min-width:0}.panel-title{font-size:9px;letter-spacing:.12em;font-weight:900;color:#bcbcbc;margin-bottom:5px}.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3px;align-items:center;margin-bottom:4px;min-width:0}.bar-label{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-nums{font-size:9px;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}.bar-track{height:3px;background:#303030;grid-column:1/-1;margin-top:3px}.bar-progress{height:100%;background:#e5e5e5;width:0}.history{flex:none;min-width:0}.history-marks{display:flex;flex-wrap:wrap;align-content:flex-start;gap:1px 3px;max-height:44px;overflow:hidden;padding-top:3px;font-size:11px;line-height:12px;font-family:Arial,sans-serif}.history-marks .no{color:#858585}.history-marks .yes{color:#f1f1f1}.review-section{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border-top:1px solid #333;padding-top:5px}.review-header{display:flex;justify-content:space-between;align-items:center;flex:none;margin-bottom:4px}.review-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#777 transparent}.review-row{display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:7px;border-bottom:1px solid #252525;padding:5px 1px;min-width:0}.review-row img{width:42px;height:30px;object-fit:contain}.review-name{font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.review-chosen{font-size:9px;color:#999;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review-time{font-size:10px;font-variant-numeric:tabular-nums}.review-empty{padding:5px 0;font-size:11px;color:#aaa}.retry-button{flex:none;min-height:clamp(38px,6dvh,55px);font-size:14px}
@media(max-height:730px){.screen{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.result{gap:3px}.metric{padding:3px 2px}.result-hero{padding-bottom:3px}.result-panels{gap:5px}.panel-title{margin-bottom:3px}.bar-row{margin-bottom:2px}.bar-track{margin-top:2px;height:2px}.history-marks{max-height:34px;font-size:9px;line-height:10px}.review-section{padding-top:3px}.review-header{margin-bottom:2px}.review-row{padding:3px 1px}.compact-line{padding-bottom:2px}.flag-area{padding:6px 5px}}
@media(max-height:600px){.hero-number{font-size:45px}.hero-rank{font-size:30px}.metric strong{font-size:13px}.metric span{font-size:7px}.metric{padding:2px 2px}.result-panels .bar-row{margin-bottom:1px}.panel-title{margin-bottom:1px}.history-marks{max-height:27px}.fastest-flag{height:17px}.result .compact-line{font-size:9px}.retry-button{min-height:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
/* Reserve exactly three compact rows for all 105 answer marks, even at 320px. */
.history-marks{display:grid;grid-template-columns:repeat(35,minmax(0,1fr));grid-auto-rows:10px;gap:1px 0;max-height:none;min-height:10px;align-content:start;font-size:8px;line-height:10px}
.history-marks span{text-align:center;min-width:0}
.hero-number{font-size:clamp(44px,9dvh,72px)}
.hero-rank{font-size:clamp(29px,6dvh,45px)}
@media(max-height:600px){.hero-number{font-size:43px}.hero-rank{font-size:29px}}
/* --- v2: modes, unified score, ghost, flag wave --- */
.flag-area{perspective:900px}
.flag-figure{width:min(84vw,430px);height:auto;max-height:100%;position:relative;flex:none;margin:auto}
.flag-picture{width:100%;height:auto;max-height:100%;animation:flag-wave 2.4s ease-in-out infinite alternate;transform-origin:4% 50%;will-change:transform}
.flag-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,0) 26%,rgba(255,255,255,.14) 46%,rgba(0,0,0,.22) 63%,rgba(0,0,0,0) 84%);background-size:280% 100%;animation:flag-sheen 2.4s ease-in-out infinite alternate;pointer-events:none}
@keyframes flag-wave{from{transform:rotateY(-13deg) rotateZ(-1deg) skewY(1.1deg) translateY(0)}to{transform:rotateY(11deg) rotateZ(1deg) skewY(-1.2deg) translateY(-4px)}}
@keyframes flag-sheen{from{background-position:110% 0}to{background-position:-30% 0}}
.mode-select{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:360px;margin-top:clamp(18px,4dvh,34px)}
.mode-btn{appearance:none;background:transparent;color:var(--muted);border:1px solid var(--edge);border-radius:2px;padding:9px 6px 8px;font-weight:900;font-size:13px;letter-spacing:.06em;cursor:pointer;line-height:1.25}
.mode-btn span{display:block;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.03em;margin-top:3px}
.mode-btn.selected{background:var(--fg);color:#0a0a0a;border-color:#fff}
.mode-btn.selected span{color:#444}
.start .main-button{margin-top:14px}
.hud-sub{font-size:10px;color:var(--muted);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.ghost-line{display:flex;justify-content:space-between;align-items:center;flex:0 0 15px;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.ghost-diff{color:var(--muted)}
.ghost-diff.lead{color:var(--green)}
.ghost-diff.behind{color:var(--red)}
.point-pop{position:absolute;left:50%;top:16%;transform:translateX(-50%);font-size:clamp(20px,6vw,30px);font-weight:900;color:var(--green);opacity:0;pointer-events:none;z-index:4;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.point-pop.bad{color:var(--red)}
.point-pop.show{animation:point-rise .65s ease-out}
@keyframes point-rise{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}18%{opacity:1;transform:translate(-50%,0) scale(1.12)}100%{opacity:0;transform:translate(-50%,-26px) scale(1)}}
#timeText.penalty{animation:penalty-flash .45s ease-out}
@keyframes penalty-flash{0%,55%{color:var(--red)}100%{color:var(--fg)}}
.hero-sub{font-size:11px;font-weight:800;color:var(--muted);margin-top:3px}
.result-buttons{display:flex;gap:8px;flex:none}
.result-buttons .retry-button{flex:1}
.title-button{appearance:none;background:transparent;color:var(--muted);border:1px solid var(--edge);border-radius:2px;font-weight:900;font-size:12px;letter-spacing:.05em;padding:0 14px;cursor:pointer;min-height:clamp(38px,6dvh,55px)}
.title-button:active{opacity:.75}
.best-detail{font-size:10px;color:var(--muted);font-weight:750;margin-top:3px;font-variant-numeric:tabular-nums}