:root{font-family:"Hiragino Sans GB","PingFang SC",sans-serif;color:#36534e;background:#eeeae2;font-synthesis:none;--ink:#36534e;--accent:#365e55;--paper:#fffaf2}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #a85f4f;outline-offset:4px}button:disabled{cursor:wait;opacity:.55}button:active{transform:translateY(1px)}[hidden]{display:none!important}.layout{min-height:100svh;display:flex;align-items:center;justify-content:center;gap:5vw;padding:24px}.intro{width:260px}.brand-mark{display:block;width:48px;height:48px;margin-bottom:42px}.brand-mark svg{fill:none;stroke:#527b70;stroke-width:1.5;stroke-linejoin:round}h1{font-size:42px;letter-spacing:.06em;font-weight:500;margin:0 0 28px}h1 span{display:block;font-size:20px;letter-spacing:.02em;margin-top:14px}.intro p{font-size:14px;line-height:2;color:#607069}.intro-rule{display:flex;align-items:center;gap:12px;margin:64px 0 16px;font-size:11px;letter-spacing:.12em}.intro-rule span{width:30px;height:1px;background:#82978b}.intro .desktop-tip{font-size:12px}.side-note{width:80px;align-self:center;display:flex;flex-direction:column;align-items:center;gap:25px;color:#667b71;font-size:11px}.side-note span{writing-mode:vertical-rl;letter-spacing:.2em}.side-note div{width:1px;height:90px;background:#b5c3b9}#stage{position:relative;width:min(430px,100vw);height:min(860px,calc(100svh - 48px));min-height:570px;overflow:hidden;background:#f3e8de;border-radius:24px;box-shadow:0 24px 75px #49615424;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.hud{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:25px;right:20px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.height{display:flex;flex-direction:column;gap:5px}.height>span{font-size:10px;letter-spacing:.06em}.height strong{font:42px/1.1 Georgia,serif;font-variant-numeric:tabular-nums}.height small{font:12px "Hiragino Sans GB",sans-serif;margin-left:5px}.hud-right{display:flex;align-items:center;gap:2px}.icon-button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:inline-grid;place-items:center;pointer-events:auto}.icon-button:hover{background:#365e5510}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.clock{display:flex;flex-direction:column;align-items:center;gap:2px;width:47px;margin-left:5px}.clock svg{width:28px;height:28px}.clock strong{font:18px Georgia,serif;font-variant-numeric:tabular-nums}.clock.urgent{color:#a24535}.welcome{position:absolute;left:32px;right:32px;bottom:calc(73px + env(safe-area-inset-bottom,0px));text-align:center}.welcome h2,.overlay h2{font-weight:500;font-size:35px;line-height:1.4;letter-spacing:.06em;margin:0 0 14px}.welcome p{font-size:13px;margin:0 0 26px}.primary{border:0;background:var(--accent);color:#fffaf2;min-height:54px;border-radius:13px;width:100%;font-size:15px;padding:14px 22px;display:flex;align-items:center;justify-content:center;gap:25px;transition:background .2s}.primary:hover{background:#244b43}.primary span{font-size:22px}.text-button{background:transparent;border:0;color:var(--ink);min-height:44px;padding:12px 8px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:12px}.text-button:hover{text-decoration:underline}.welcome>.text-button{margin-top:8px}.welcome-note{display:block;font-size:10px;color:#203e32;margin-top:15px}.stage-footer{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:25px;right:25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;pointer-events:none;color:#294637}.play-hint{position:absolute;bottom:70px;width:100%;text-align:center;font-size:12px;color:#45675b;pointer-events:none}#feedback{position:absolute;top:38%;width:100%;text-align:center;font:italic 38px Georgia,serif;color:#3f7c69;pointer-events:none;text-shadow:0 2px 20px #fffc;opacity:0}#feedback.show{animation:praise 1s ease-out forwards}#feedback[data-grade=bad]{color:#a76146}#feedback[data-grade=fantastic]{color:#a56a3c}@keyframes praise{0%{opacity:0;transform:translateY(12px) scale(.92)}15%,55%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-22px)}}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#f6eee6ed;z-index:4;padding:35px;text-align:center}.overlay>div{width:100%}.overlay p{font-size:13px;line-height:1.8}.overlay>div>span{display:block;font-size:12px;margin-bottom:25px;color:#6e7669}.overlay h2{font-size:30px}.result-score{font:18px Georgia,serif;margin:25px 0 10px}.result-score strong{font-size:65px;font-weight:400}.overlay .primary{margin-top:20px}#rank-status{min-height:24px;color:#627265;font-size:12px}dialog{border:0;border-radius:22px;background:var(--paper);color:var(--ink);width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 36px);padding:0;box-shadow:0 20px 80px #284b3930}dialog::backdrop{background:#314f455c;backdrop-filter:blur(4px)}dialog[open]{display:flex;flex-direction:column}dialog header{padding:24px 20px 18px 26px;display:flex;justify-content:space-between;gap:12px;flex-shrink:0;border-bottom:1px solid #e1e5d9}dialog h2{font-size:23px;margin:0 0 8px;font-weight:500}dialog header p{font-size:12px;margin:0;color:#657564}.board-body{padding:12px 26px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0}#board-message{font-size:13px;line-height:1.7}#entries{list-style:none;margin:0;padding:0}#entries li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;min-height:55px;border-bottom:1px solid #e5e6db;font-size:13px}#entries li span:first-child{font:16px Georgia,serif;color:#6e7b69}#entries li:nth-child(-n+3) span:first-child{color:#9a6b37}#entries li span:nth-child(2){overflow-wrap:anywhere}#entries .self{background:#e8eee1;border-radius:8px}form label{display:block;font-size:13px;margin:20px 0 10px}.input-wrap{position:relative}input{width:100%;border:1px solid #aab7a4;background:#fffdf8;border-radius:10px;padding:15px 57px 15px 12px;font-size:16px;color:var(--ink)}.input-wrap span{position:absolute;right:12px;top:18px;font-size:11px;color:#687c69}.privacy{font-size:10px;line-height:1.8;color:#68745e;margin:12px 0 20px}form .text-button{width:100%}@media(max-width:850px){.intro{width:210px}.side-note{display:none}.layout{gap:30px}}@media(max-width:620px){body{background:#f3e8de}.layout{padding:0;min-height:100svh}.intro,.side-note{display:none}#stage{width:100%;max-width:480px;height:100svh;min-height:0;border-radius:0;box-shadow:none}.hud{left:22px;right:17px}.welcome{bottom:calc(70px + env(safe-area-inset-bottom,0px))}}@media(max-height:690px){.welcome h2{font-size:29px}.welcome p{margin-bottom:17px}.welcome-note{margin-top:5px}.welcome{bottom:50px}.hud{top:15px}.height strong{font-size:35px}.overlay h2{font-size:26px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition:none!important}}