:root{--ink:#173e43;--green:#157467;--cream:#f7f3e9;--paper:#fff9ea;--line:#c8d1c4;--orange:#d95535}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.65}a{color:inherit;text-underline-offset:5px}button,a,input{-webkit-tap-highlight-color:transparent}button,a.primary,a.secondary{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);border-radius:16px;padding:10px 17px;min-height:46px}button:hover,a.primary:hover,a.secondary:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #e7a438;outline-offset:4px}button:disabled{cursor:default;opacity:.58}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.topbar{max-width:1140px;margin:auto;display:flex;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid var(--line);font-size:14px}.topbar a{text-decoration:none;font-weight:700}main{max-width:1140px;margin:auto;padding:36px 24px}.eyebrow{font-weight:800;letter-spacing:.15em;color:var(--green);font-size:13px;margin:15px 0}h1{font-size:clamp(38px,6vw,66px);line-height:1.18;margin:12px 0 22px;letter-spacing:-.04em}h1 em{font-style:normal;color:var(--green)}h2{font-size:28px;line-height:1.4}.lead{font-size:18px;max-width:620px}.intro-note{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 35px}.intro-note span{border:1px solid var(--line);border-radius:50px;padding:6px 14px;font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;background:var(--paper);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 8px 22px #173e4314}.card canvas{display:block;width:100%;height:auto}.card div{padding:18px 20px 22px}.card small{color:var(--green);font-weight:700}.card h2{margin:4px 0;font-size:27px}.card p{font-size:14px;margin:0 0 12px}.card strong{color:var(--green)}.old-game{display:block;margin-top:28px}#game{max-width:780px;margin:auto}#game h1{font-size:clamp(38px,6vw,60px)}.back{font-size:14px}.arena{background:var(--paper);border:1px solid var(--line);border-radius:25px;overflow:hidden;margin-top:28px;box-shadow:0 8px 40px #23443808}.scorebar{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}#stage{font-size:16px}#time{font-size:23px;font-weight:800;white-space:nowrap}.soundbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;font-size:12px}.soundbar button{font-size:12px;padding:6px 10px;min-height:40px}.soundbar #sound-state{flex:1;min-width:80px}#stage-canvas{width:100%;height:auto;display:block}.progress-wrap{padding:10px 24px 0;text-align:center;font-size:14px}.progress-wrap p{margin:0 0 8px}progress{width:100%;height:10px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:#e4e6d8}progress::-webkit-progress-bar{background:#e4e6d8}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}.controls{padding:22px;text-align:center}.controls ol{text-align:left;padding-left:24px;max-width:490px;margin:0 auto 22px}.controls li{margin:8px 0}.controls fieldset{border:0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:10px}.controls legend{font-size:12px;color:#5c756e}.controls input{accent-color:var(--green);width:17px;height:17px;vertical-align:middle}.primary,.secondary{display:block;width:100%;padding:15px 20px;text-align:center;text-decoration:none;font-weight:800;border-radius:17px;min-height:56px}.primary{background:var(--green);color:white;border:0;box-shadow:0 5px 0 #10594f;margin:9px 0}.secondary{border:1px solid #a6b8ab;background:transparent;margin:9px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions button{flex:1;min-width:100px;font-weight:800;font-size:18px}.actions .cue{background:#dbeaab;border-color:#758d3e;color:#20492f}.actions .next{border:2px solid var(--green)}.guide{font-weight:700;margin:8px 0 16px;color:var(--green)}#feedback{min-height:27px}#action-guide{min-height:27px}.meter{height:24px;margin:18px 4px 10px;position:relative;background:#e6e7d7;border-radius:20px;overflow:hidden}.meter span{position:absolute;top:0;height:100%;background:#a8cd71}.meter i{position:absolute;top:2px;width:7px;height:20px;border-radius:4px;background:var(--ink);transform:translateX(-50%)}.big-score strong{font-size:76px;line-height:1.2;color:var(--green)}.big-score span{font-size:13px;margin-left:10px}.result-actions{display:flex;gap:12px;align-items:stretch}.registration{display:block;margin:20px 0;font-weight:800;font-size:18px}.text-button{border:0;text-decoration:underline}.small{font-size:13px;color:#5b716c;line-height:1.7}#share-fallback{width:100%;min-height:80px}.under{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0;font-size:14px}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:14px}summary{cursor:pointer;font-weight:700}.invite{margin:60px auto 36px;max-width:700px;text-align:center;padding:36px 16px;border-top:1px solid var(--line)}.invite .primary{max-width:410px;margin:22px auto}.invite h2{font-size:36px}footer{max-width:780px;margin:auto;font-size:12px;color:#5a706a;border-top:1px solid var(--line);padding:22px 0}.empty{padding:30px}@media(max-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}main{padding:25px 16px}.card div{padding:14px}.card h2{font-size:23px}}@media(max-width:460px){.cards{grid-template-columns:1fr}.topbar{padding:16px}.controls{padding:18px 14px}.scorebar{padding:14px}#stage{font-size:13px}#time{font-size:21px}.scorebar button{font-size:12px;min-height:40px;padding:7px 10px}.soundbar{padding:9px}.result-actions{flex-direction:column;gap:0}.lead{font-size:16px}h1{font-size:44px}.invite h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.card:hover{transform:none}}