:root{--panel:#101820c7;--panel-solid:#141c24;--text:#f3f6f9;--muted:#a9b7c4;--accent:#ffb547;--accent-text:#1b1205;--good:#6ad08a;--bad:#ff7b6b;--border:#ffffff29;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif}*{box-sizing:border-box}html,body{background:#9cc3e6;height:100%;margin:0;overflow:hidden}#app{position:fixed;inset:0}#stage{position:absolute;inset:0}#view{cursor:none;width:100%;height:100%;display:block}.hidden{display:none!important}button{font:inherit;border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffff1a;border-radius:10px;padding:.6em 1.2em}button:hover{background:#fff3}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:700}button.primary:hover{filter:brightness(1.08)}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #7cc4ff}button:disabled{opacity:.45;cursor:default}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}.hud-top{pointer-events:none;justify-content:space-between;gap:12px;display:flex;position:absolute;top:12px;left:12px;right:12px}.question-card,.status-card,.guide,.answer-form,.panel,.tutorial{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:12px}.question-card{pointer-events:auto;max-width:min(640px,70vw);padding:10px 16px}.q-counter{color:var(--accent);font-size:.85rem;font-weight:700}.q-text{margin-top:2px;font-size:1.15rem;font-weight:700}.status-card{pointer-events:auto;min-width:180px;padding:8px 14px;font-size:.9rem;line-height:1.6}.label{color:var(--muted);width:2.5em;display:inline-block}.guide{padding:10px 14px;font-size:.85rem;position:absolute;bottom:74px;left:12px}.guide-title{margin-bottom:4px;font-weight:700}.guide table{border-collapse:collapse}.guide td{padding:1px 8px 1px 0}.guide tr.active td{color:var(--accent);font-weight:700}.formula{margin-top:6px;font-weight:700}.formula.small{color:var(--muted);margin-top:2px;font-weight:400}.key{border:1px solid var(--border);text-align:center;min-width:1.5em;color:var(--muted);border-radius:4px;padding:0 4px;font-size:.75rem;display:inline-block}.answer-form{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 24px);padding:8px 10px 8px 16px;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.answer-form input{width:8em;font:inherit;border:1px solid var(--border);color:#111;text-align:right;background:#fffffff2;border-radius:8px;padding:6px 10px;font-size:1.2rem}.answer-error{background:var(--panel-solid);width:max-content;max-width:calc(100vw - 24px);color:var(--bad);border-radius:8px;padding:4px 10px;font-size:.85rem;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.answer-error:empty{display:none}.controls-hint{color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap;text-overflow:ellipsis;max-width:calc(100vw - 24px);font-size:.75rem;position:absolute;bottom:10px;left:50%;overflow:hidden;transform:translate(-50%);pointer-events:none!important}.reveal{text-align:center;width:min(340px,100vw - 32px);padding:16px 20px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.reveal.left{left:16px;right:auto}.grade{color:var(--accent);font-size:1.4rem;font-weight:800}.rv-score{font-size:2.6rem;font-weight:800}.rv-score small{margin-left:4px;font-size:1rem}.rv-list{text-align:left;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0;display:grid}.rv-list dt{color:var(--muted)}.rv-list dd{margin:0;font-weight:700}.explain{text-align:left;color:var(--muted);font-size:.85rem;line-height:1.6}.screen{background:#0a121a8c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0;overflow:auto}.title-box{background:var(--panel-solid);border:1px solid var(--border);text-align:center;border-radius:16px;width:100%;max-width:560px;margin:auto;padding:28px 32px}h1{letter-spacing:.08em;margin:0 0 8px;font-size:2.4rem}h2{margin:0 0 12px}.lead{color:var(--muted);line-height:1.7}.buttons{flex-direction:column;gap:10px;max-width:320px;margin:18px auto 8px;display:flex}.best{color:var(--accent);min-height:1.2em;font-weight:700}.note{color:var(--muted);font-size:.8rem}.version{color:var(--muted);font-family:ui-monospace,monospace;font-size:.7rem}.final{justify-content:center;align-items:baseline;gap:16px;display:flex}.rank{color:var(--accent);font-size:4rem;font-weight:900}.total{font-size:1.8rem;font-weight:800}.rs-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:.9rem}.rs-table th,.rs-table td{border-bottom:1px solid var(--border);padding:4px 6px}.rs-table td:nth-child(n+3){text-align:right}.tutorial{width:min(400px,50vw - 40px);max-height:calc(100vh - 220px);padding:14px 18px;position:absolute;top:100px;right:12px;overflow:auto}.tu-step{color:var(--accent);font-size:.85rem;font-weight:700}.tu-text{margin:6px 0 10px;line-height:1.7}.tu-text .done{color:var(--good);font-weight:700}.tu-buttons{justify-content:flex-end;gap:8px;display:flex}#settings-form .row{border:none;justify-content:center;align-items:center;gap:10px;margin:12px 0;display:flex}#settings-form fieldset label{margin:0 8px}@media (max-width:720px){.hud-top{flex-direction:column}.guide,.controls-hint{display:none}.tutorial{width:calc(100vw - 24px);max-height:40vh;top:170px}.reveal,.reveal.left{inset:auto auto 110px 50%;transform:translate(-50%)}}:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}#view{touch-action:none}button{touch-action:manipulation}.touch-bar{display:none}body.touch #app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}body.touch .tutorial,body.touch .reveal,body.touch .screen{touch-action:pan-y}body.touch input{-webkit-user-select:text;user-select:text}body.touch .touch-bar{left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2);bottom:calc(var(--safe-bottom) + 74px);width:min(560px, calc(100vw - 16px - var(--safe-left) - var(--safe-right)));background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:12px;padding:8px;display:block;position:absolute;transform:translate(-50%)}.tb-buttons{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.tb-buttons button{border-radius:8px;flex-direction:column;justify-content:center;align-items:center;min-height:46px;padding:4px 2px;font-size:.85rem;line-height:1.15;display:flex}.tb-buttons button small{color:var(--muted);font-size:.7rem}.tb-buttons button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:700}.tb-buttons button[aria-pressed=true] small{color:var(--accent-text)}.tb-hint{color:var(--muted);text-align:center;margin-top:6px;font-size:.7rem}body.touch .guide,body.touch .controls-hint,body.touch .status-card{display:none!important}body.touch .hud-top{top:calc(var(--safe-top) + 8px);left:calc(var(--safe-left) + 8px);right:calc(var(--safe-right) + 8px)}body.touch .question-card{max-width:100%;padding:8px 12px}body.touch .q-text{font-size:1rem}body.touch .answer-form{z-index:2;bottom:calc(var(--safe-bottom) + 10px);padding:6px 8px 6px 12px}body.touch .tutorial{top:calc(var(--safe-top) + 84px);left:calc(var(--safe-left) + 8px);right:calc(var(--safe-right) + 8px);width:auto;max-height:34dvh;padding:10px 12px;font-size:.85rem}body.touch .tu-text{margin:4px 0 6px;line-height:1.55}body.touch .reveal,body.touch .reveal.left{z-index:3;left:calc(50% + (var(--safe-left) - var(--safe-right)) / 2);top:auto;right:auto;bottom:calc(var(--safe-bottom) + 10px);width:min(400px, calc(100vw - 16px - var(--safe-left) - var(--safe-right)));max-height:62dvh;padding:12px 16px;overflow:auto;transform:translate(-50%)}body.touch .rv-score{font-size:2rem}@media (min-aspect-ratio:3/2){body.touch .tb-buttons{grid-template-columns:repeat(8,1fr)}}@media (orientation:landscape) and (max-height:500px){body.touch .touch-bar{padding:6px}body.touch .tb-buttons button{min-height:40px}body.touch .tb-hint{margin-top:3px;font-size:.65rem}body.touch .question-card{max-width:50vw}body.touch .tutorial{top:calc(var(--safe-top) + 8px);left:auto;right:calc(var(--safe-right) + 8px);width:min(380px,45vw);max-height:calc(100dvh - 160px)}body.touch .reveal,body.touch .reveal.left{top:calc(var(--safe-top) + 8px);bottom:auto;left:auto;right:calc(var(--safe-right) + 8px);width:min(340px,45vw);max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));transform:none}body.touch .reveal.left{left:calc(var(--safe-left) + 8px);right:auto}body.touch .rv-list{margin:4px 0}body.touch .grade{font-size:1.1rem}}.screen.loading{background:#0a121af0}.loading .title-box{max-width:360px}.loading .spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;margin:0 auto 12px;animation:.9s linear infinite spin}.loading.failed .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading .spinner{animation:none}}