html,body{margin:0;height:100%;background:#0f1830;overflow:hidden;overscroll-behavior:none}
body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;color:#fff}
/* 390×844 の論理画面を作って、画面に収まるように縮める（game.js が transform を入れる） */
#stage{position:fixed;left:0;top:0;width:390px;height:844px;transform-origin:0 0;overflow:hidden}
#cv{position:absolute;inset:0;width:390px;height:844px;display:block;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;text-align:center;text-shadow:0 1px 4px #000c}
#title{position:absolute;top:14px;left:0;right:0;font-size:13px;font-weight:700;letter-spacing:.2em;opacity:.7}
#bn{position:absolute;top:34px;left:16px;display:flex;align-items:baseline;gap:6px;background:#0008;border-radius:14px;padding:4px 14px 6px}
#bn small{font-size:14px;font-weight:700;opacity:.85}
#bn b{font-size:34px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
#bn b.down{color:#ffd27a}
#bn b.up{color:#ff8a7a}
#cnt{position:absolute;top:38px;right:16px;background:#0008;border-radius:14px;padding:6px 12px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#cnt small{font-size:13px;font-weight:700}
#dots{display:flex;gap:5px}
#dots i{width:12px;height:12px;border-radius:50%;border:2px solid #fff8;box-sizing:border-box}
#dots i.great{background:#ffd34d;border-color:#ffd34d}
#dots i.good{background:#7fe08a;border-color:#7fe08a}
#dots i.soft,#dots i.strong{background:#b9c6d6;border-color:#b9c6d6}
#dots i.weak{background:#6b7a92;border-color:#6b7a92}
#dots i.tooStrong{background:#ff6b5b;border-color:#ff6b5b}
#say{position:absolute;top:662px;left:0;right:0;font-size:38px;font-weight:900;line-height:1.1;opacity:0;transform:scale(.7);transition:opacity .15s,transform .3s cubic-bezier(.2,1.6,.4,1)}
#say.on{opacity:1;transform:scale(1)}
#say.great{color:#ffd34d}#say.good{color:#9ff0a6}#say.weak,#say.soft,#say.timing{color:#c8d4e6}#say.strong{color:#ffe08a}#say.tooStrong{color:#ff7b6b}#say.miss{color:#c8d4e6}
#sub{position:absolute;top:712px;left:0;right:0;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
#tip{position:absolute;top:742px;left:12px;right:12px;font-size:14px;font-weight:700;opacity:.85}
#hint{position:absolute;bottom:22px;left:0;right:0;font-size:17px;font-weight:800;color:#ffe9b8;transition:opacity .3s}
#hint.off{opacity:0}
#hint.nudge{animation:nudge .35s}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#bnUp{color:#ff8a7a;font-size:13px}
#wind{position:absolute;top:104px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#0009;border-radius:14px;padding:5px 14px;font-size:15px;font-weight:800}
#wind.w-tail{color:#ffd27a}#wind.w-head{color:#9fd0ff}#wind.w-calm{color:#e8edf3}

.ov{position:absolute;inset:0;background:#070b18cc;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;touch-action:auto}
.ov[hidden]{display:none}
.card{width:100%;max-width:358px;background:#fbf5e8;color:#2a2018;border-radius:18px;padding:22px 20px 18px;box-sizing:border-box;box-shadow:0 10px 30px #0009;text-align:center}
.card h1{margin:0 0 8px;font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;font-size:34px;letter-spacing:.08em}
.lead{margin:0 0 18px;font-size:15px;line-height:1.7}
.card label{display:block;text-align:left;font-size:15px;font-weight:800;margin-bottom:6px}
.card label span{display:block;font-weight:500;font-size:13px;color:#6b5a48}
#bnText{width:100%;box-sizing:border-box;font-size:18px;padding:11px 12px;border:2px solid #c9b597;border-radius:10px;background:#fff;color:#2a2018;-webkit-user-select:text;user-select:text}
#bnText:focus{outline:none;border-color:#b5452f}
#chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
#chips button{font-size:14px;padding:7px 12px;border-radius:16px;border:1.5px solid #c9b597;background:#f3e8d2;color:#4a3828;font-weight:700}
#chips button:active{background:#e8d6b4}
.btn{display:block;width:100%;font-size:19px;font-weight:900;border:0;border-radius:12px;padding:14px;margin-top:10px;font-family:inherit}
.btn.main{background:#b5452f;color:#fff}
.btn.main:active{background:#963622}
.btn.x{background:#111;color:#fff}
.link{background:none;border:0;color:#6b5a48;font-size:14px;text-decoration:underline;margin-top:10px;padding:4px;font-family:inherit}
.rh{font-size:15px;font-weight:800;color:#6b5a48;margin-bottom:10px}
#rPlaque{position:relative;display:inline-block;max-width:100%;background:linear-gradient(#e9cf9f,#d7b47c);border:3px solid #8a5d33;border-radius:6px;padding:10px 16px;font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;font-size:22px;line-height:1.35;color:#1c140e;word-break:break-all;box-sizing:border-box}
#rPlaque i{font-style:normal}
#rPlaque i.b{color:#9a6a4a;opacity:.45;text-decoration:line-through;text-decoration-color:#b5452f}
#rPlaque.cleared span{text-decoration:line-through;text-decoration-color:#b5452f;text-decoration-thickness:3px;opacity:.55}
#rPlaque em{position:absolute;right:-8px;top:-12px;transform:rotate(14deg);font-style:normal;font-size:15px;font-weight:900;color:#b5452f;border:2.5px solid #b5452f;border-radius:6px;padding:1px 6px;background:#fbf5e8e6;font-family:system-ui,sans-serif}
.nums{display:flex;justify-content:space-between;gap:6px;margin:14px 0 8px}
.nums div{flex:1;background:#f1e5cd;border-radius:10px;padding:6px 2px}
.nums small{display:block;font-size:12px;font-weight:700;color:#6b5a48}
.nums b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
#rList{list-style:none;margin:0 0 6px;padding:0;font-size:13px;color:#4a3828;text-align:left}
#rList li{display:flex;justify-content:space-between;padding:2px 6px;border-bottom:1px dashed #d9c7a6}
#rLine{margin:8px 0 4px;font-size:15px;font-weight:700;line-height:1.5}
.back{display:block;margin-top:10px;font-size:13px;color:#8a6f55;text-decoration:none}
.back:active{text-decoration:underline}