:root{--ink:#172638;--blue:#2764a6;--sky:#d7edf4;--coral:#e86a4d;--gold:#efb73e;--mint:#48a89b;--paper:#f7f3e8;--line:#bed1d8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{min-height:100vh;background:radial-gradient(circle at 12% 10%,#fff 0 4%,transparent 22%),radial-gradient(circle at 88% 82%,#e1f0e6 0 3%,transparent 27%),var(--paper)}.shell{width:min(940px,100%);margin:auto;padding:clamp(14px,3vw,28px);min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:12px}.brand{display:flex;gap:10px;align-items:center}.mark{font-size:26px;color:var(--coral)}h1,h2,p{margin:0}h1{font-size:clamp(23px,4vw,34px);letter-spacing:-1.5px}button{font:inherit;cursor:pointer}.quiet{border:1.5px solid var(--ink);border-radius:100px;background:transparent;color:var(--ink);padding:8px 15px;font-weight:700}.quiet:active{transform:translateY(1px);background:var(--ink);color:var(--paper)}.intro{display:flex;justify-content:space-between;gap:20px;padding:18px 2px 12px;align-items:end}.intro div{flex:1}#stageLabel,.lower span{font-size:10px;letter-spacing:1.45px;font-weight:800;color:var(--blue)}h2{font-family:Georgia,serif;font-size:clamp(25px,4vw,38px);line-height:1.05;margin-top:3px}.intro p{max-width:410px;font-size:14px;line-height:1.35;text-align:right}.game-wrap{position:relative;min-height:390px;flex:1;border:2px solid var(--ink);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#e8f3f2,#fffaf0 65%,#f7dfbc)}canvas{display:block;width:100%;height:100%;touch-action:manipulation}#touchHint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;white-space:nowrap;background:#f7f3e8df;padding:7px 12px;border-radius:20px;pointer-events:none;transition:opacity .4s}.lower{display:grid;grid-template-columns:120px 1fr auto;gap:12px;margin-top:14px;align-items:stretch}.beat-card,.rule-card{border:1.5px solid var(--ink);border-radius:15px;padding:10px 13px;background:#fff9}.beat-card{display:grid;grid-template-columns:auto 1fr;align-items:center}.beat-card span{grid-column:1/-1}.beat-card strong{font-family:Georgia,serif;font-size:37px;line-height:38px}.beat-card i{font-size:10px;font-style:normal;font-weight:800;text-align:right;color:var(--coral)}.rule-card strong{display:block;font-size:14px;margin:2px 0}.rule-card p{font-size:12px;line-height:1.2}.legend{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;white-space:nowrap}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px}.moving{background:var(--blue)}.held{background:var(--coral)}.rest{background:var(--gold)}#message{position:fixed;left:50%;top:22%;transform:translate(-50%,-8px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 18px;border-radius:18px;font-weight:700;text-align:center;transition:.25s;max-width:88vw}.show{opacity:1!important;transform:translate(-50%,0)!important}@media(max-width:620px){.shell{padding:12px}.intro{display:block;padding:14px 2px 10px}.intro p{text-align:left;margin-top:8px}.game-wrap{min-height:360px;border-radius:20px}.lower{grid-template-columns:105px 1fr}.legend{grid-column:1/-1;justify-content:center;height:24px}.beat-card strong{font-size:31px}.rule-card p{font-size:11px}}@media(max-height:620px) and (orientation:landscape){.shell{padding:10px;min-height:100vh}.intro{padding:8px 2px}.intro p{display:none}.game-wrap{min-height:250px}.lower{margin-top:8px}.rule-card p{display:none}h2{font-size:24px}}