:root { --red:#d7263d; --gold:#ffcf3f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:#000; color:#fff; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  font-family:"Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans CJK JP",system-ui,sans-serif; }
body { display:flex; align-items:center; justify-content:center; }
/* 1280x720 の論理画面を JS で拡大縮小（レターボックス）。他のゲームと同じ横画面固定 */
#stage { position:relative; width:1280px; height:720px; flex:none; transform-origin:50% 50%; overflow:hidden; background:#10101a; }
#view { position:absolute; inset:0; width:1280px; height:720px; display:block; }
[hidden] { display:none !important; }
button { font:inherit; color:#fff; cursor:pointer; }
#loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; letter-spacing:.4em; font-size:22px; color:#ccc; }
#rotate { display:none; position:fixed; inset:0; z-index:99; background:#000; color:#fff; align-items:center; justify-content:center; text-align:center; font-size:20px; line-height:1.8; }
@media (orientation: portrait) { #rotate { display:flex; } #stage { visibility:hidden; } }

#hud { position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; padding:14px 150px 0 18px; pointer-events:none; }
#hud .box { background:rgba(10,8,16,.72); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:4px 16px; min-width:120px; }
#hud .box.center { text-align:center; } #hud .box.right { text-align:right; }
#hud .lbl { display:block; font-size:11px; letter-spacing:.14em; color:#b9b3c9; }
#hud b { font-size:32px; font-variant-numeric:tabular-nums; line-height:1.1; }
#time.low { color:#ff5a5a; animation:blink .5s infinite alternate; }
@keyframes blink { to { opacity:.45; } }

#topbtns { position:absolute; right:14px; top:14px; display:flex; flex-direction:column; gap:6px; align-items:flex-end; z-index:30; }
#topbtns button { background:rgba(10,8,16,.75); border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:8px 14px; font-size:15px; min-width:46px; }
#topbtns button.off { opacity:.5; }

#touch { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:space-between; padding:0 24px; pointer-events:none; z-index:12; }
#touch button { pointer-events:auto; width:76px; height:76px; border-radius:50%; background:rgba(10,8,16,.55); border:2px solid rgba(255,255,255,.4); font-size:28px; }
#touch button:active { background:rgba(215,38,61,.6); }
body.nbopen #touch { display:none; }

#pops { position:absolute; inset:0; pointer-events:none; z-index:14; }
.pop { position:absolute; transform:translate(-50%,-50%); font-size:30px; font-weight:900; white-space:nowrap; text-shadow:0 0 3px #000,0 0 3px #000,2px 2px 0 #000; animation:floatup 1.5s ease-out forwards; }
@keyframes floatup { 0% { opacity:0; margin-top:10px; } 12% { opacity:1; } 100% { opacity:0; margin-top:-80px; } }

#count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:220px; font-weight:900; color:#fff; text-shadow:0 0 30px var(--red), 0 6px 0 #000; pointer-events:none; z-index:15; }
#count.pop { animation:pop .5s ease-out; }
@keyframes pop { from { transform:scale(1.8); opacity:0; } to { transform:scale(1); opacity:1; } }

#title, #result { position:absolute; inset:0; z-index:20; display:flex; justify-content:center; }
#title { align-items:flex-start; padding:16px; } #result { align-items:center; background:rgba(5,3,10,.6); }
.card { background:rgba(12,8,18,.84); border:1px solid rgba(215,38,61,.7); border-radius:14px; padding:10px 22px 12px; max-width:660px; width:100%; text-align:center; box-shadow:0 8px 40px rgba(0,0,0,.6); transition:opacity .25s; }
.card .en { color:var(--red); letter-spacing:.3em; font-size:12px; font-weight:700; }
.card h1 { margin:2px 0 6px; font-size:42px; letter-spacing:.12em; text-shadow:0 0 18px rgba(215,38,61,.8); }
.card h2 { margin:2px 0; font-size:30px; letter-spacing:.2em; }
.card .lead { margin:0 0 8px; font-size:15px; line-height:1.7; color:#ddd; }
.card ul { margin:0 0 10px; padding:0; list-style:none; text-align:left; font-size:14px; line-height:1.75; color:#cfc8e0; }
.card li::before { content:"✒ "; color:var(--red); }
.card b { color:#fff; } .card b.g { color:#6fe38a; } .card b.r { color:#ff6b6b; }
.start { font-weight:700; color:var(--gold); animation:blink .8s infinite alternate; }
#hubLink { position:absolute; left:16px; bottom:16px; color:#fff; text-decoration:none; background:rgba(10,8,16,.75); border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:10px 16px; font-size:15px; z-index:25; }
.big { font-size:68px; font-weight:900; line-height:1.1; color:var(--gold); } .big small { font-size:20px; margin-left:4px; }
.rank { font-size:21px; letter-spacing:.1em; margin:2px 0 8px; }
.card table { margin:0 auto 12px; border-collapse:collapse; font-size:16px; }
.card td { padding:3px 16px; border-bottom:1px solid rgba(255,255,255,.12); } .card td:last-child { text-align:right; font-weight:700; }
.btns { display:flex; gap:10px; justify-content:center; }
.btns button { background:var(--red); border:0; border-radius:10px; padding:11px 24px; font-size:17px; font-weight:700; }
.btns button#btnTitle { background:#3a3550; }
body.nbopen #title .card { opacity:.08; }

/* ノート */
#notebook { position:absolute; left:0; right:0; bottom:0; z-index:18; display:flex; justify-content:center; padding:0 0 8px; pointer-events:none; animation:rise .22s ease-out; }
@keyframes rise { from { transform:translateY(40%); opacity:0; } to { transform:none; opacity:1; } }
.nb { pointer-events:auto; background:linear-gradient(#1b1512,#0c0908); border:2px solid #000; outline:1px solid rgba(215,38,61,.6); border-radius:12px 12px 6px 6px; padding:8px 14px 10px; box-shadow:0 -6px 30px rgba(0,0,0,.7); }
.nbhead { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.nbtitle { font-weight:900; letter-spacing:.35em; color:#e9e2d0; }
.nbname { font-weight:900; font-size:22px; letter-spacing:.2em; color:#ff8a9a; }
.nbhint { font-size:12px; color:#b7aa92; margin-left:auto; }
.nbpage { background:#efe6d0; border-radius:4px; overflow:hidden; line-height:0; }
#nbInk { display:block; touch-action:none; cursor:crosshair; }
.nb.auto #nbInk { pointer-events:none; }
.nbfoot { display:flex; justify-content:flex-end; gap:8px; margin-top:7px; }
.nbfoot button { background:#3a2e28; border:1px solid #6a5a50; border-radius:8px; padding:7px 14px; font-size:13px; }