/* b67 誰がやった?: b66's look (墨・ベロ・光, entry peek, bottom sheet); the seats, the line and the beat band are new. */
:root{ --c-go:#22B34C; --c-x:#C8372D; }

/* entry */
#opening{justify-content:flex-start; text-align:center; gap:8px; overflow:hidden; padding-top:14px;}
#opening .spot{flex:1; min-height:60px; max-height:130px; padding-bottom:6px;}
#opening .spot::before{width:110px; height:110px;}
#opening h1{font-size:32px; font-weight:800; letter-spacing:.04em; margin:0;}
#opening .kicker{margin:0;}
.cpeek{width:100%; flex:none; padding:10px 10px 12px; border-radius:18px; background:var(--kinari); color:var(--sumi); display:flex; flex-direction:column; gap:8px;}
.cask{font-size:16px; font-weight:800; margin:0;}
#opening .primary{margin-top:4px;}

/* seats: 1 (keeper) on the left and highest, 5 on the right and lowest */
.cseats{width:100%; flex:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; align-items:end;}
.cseat{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; transition:transform .35s;}
.cseat .step{width:100%; border-radius:10px 10px 4px 4px; background:var(--day-line); color:var(--sumi); font-size:11px; font-weight:800; display:flex; align-items:flex-start; justify-content:center; padding-top:2px;}
.cseat:nth-child(1) .step{height:34px; background:var(--hoshi);}
.cseat:nth-child(2) .step{height:29px;}
.cseat:nth-child(3) .step{height:24px;}
.cseat:nth-child(4) .step{height:19px;}
.cseat:nth-child(5) .step{height:14px;}
.cface{position:relative; width:48px; height:48px; border-radius:50%; background:#fff; border:3px solid var(--sumi); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--sumi); transition:transform .08s, box-shadow .08s, background .08s; font-family:inherit; padding:0;}
.cface.you{background:var(--bero-line); border-color:var(--bero-line); color:#fff; font-size:12px;}
.cface.talk{transform:scale(1.12); box-shadow:0 0 0 4px var(--c-go);}
.cface.you.talk{box-shadow:0 0 0 4px var(--bero-ink);}
.cface.accused::after{content:"?"; position:absolute; top:-10px; right:-8px; width:20px; height:20px; border-radius:50%; background:var(--bero-line); color:#fff; font-size:13px; line-height:20px; text-align:center; border:2px solid #fff;}
.cface.pickable{animation:cpick .5s ease-in-out infinite alternate; border-color:var(--bero-line); box-shadow:0 0 0 4px var(--bero-line);}
@keyframes cpick{0%{transform:scale(1)} 100%{transform:scale(1.1)}}
.cface.picked{background:var(--hoshi);}
.cface.drop{animation:cdrop .6s ease-out;}
@keyframes cdrop{0%{transform:translateY(-26px) rotate(-20deg); background:var(--c-x); border-color:var(--c-x)} 100%{transform:none}}
.cface.up{animation:cup .5s ease-out;}
@keyframes cup{0%{transform:translateY(14px)} 100%{transform:none}}
.cseat .me{font-size:10px; font-weight:800; line-height:1; color:var(--bero-line); margin-top:5px;}
.cjar{width:20px; height:20px; border:3px solid var(--sumi); border-top-width:5px; border-radius:4px 4px 8px 8px; background:#C98A4B; margin-bottom:1px;}
.cseat:not(:first-child) .cjar{visibility:hidden;}

/* the line: on a beat, the line said now (yours pink and filled, theirs plain with who says it); in a stop, your next line dashed */
.cline{width:100%; flex:none; margin:0; min-height:86px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:30px; font-weight:800; line-height:1.15; border-radius:18px; border:3px dashed var(--day-line); color:var(--day-muted); padding:6px 8px; letter-spacing:.01em;}
.cline small{font-size:12px; font-weight:800; color:var(--bero-line); letter-spacing:.06em;}
.cline.you{border-color:var(--bero-line); color:var(--sumi); background:#FDEEF3;}
.cline.long{font-size:21px;}
.cline.on{background:var(--bero-line); color:#fff; border-style:solid;}
.cline.on small{color:#fff;}
.cline.wait{font-size:40px;}
.cline.them{border-style:solid; background:#fff; color:var(--sumi);}
.cline.them small{color:var(--day-muted);}

/* the beat band: one cell per beat, 4 to a row; your cells pink, the tap mark on your strong beat */
.cband{width:100%; flex:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px;}
.cb{position:relative; height:44px; border-radius:11px; background:#fff; border:3px solid var(--day-line); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--day-muted); line-height:1.05; text-align:center; padding:0 2px; overflow:hidden; transition:transform .06s;}
.cb.you{border:3px dashed var(--bero-line); color:var(--bero-ink); background:#FDEEF3;}
.cb.tap::before{content:""; position:absolute; top:3px; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--bero-line);}
.cb.tap{padding-top:8px;}
.cb.on{border-color:var(--c-go); border-style:solid; box-shadow:0 0 0 3px var(--c-go); transform:scale(1.04); z-index:1; color:var(--sumi);}
.cb.you.on{background:var(--bero-line); color:#fff; border-color:var(--bero-line); box-shadow:0 0 0 4px var(--bero-line), 0 0 18px 5px rgba(232,69,127,.5);}
.cb.you.on.tap::before{background:#fff;}
.cb.past{opacity:.35;}
.cb.hit{box-shadow:0 0 0 4px var(--c-go) !important;}
.cb .tick{position:absolute; bottom:2px; width:3px; height:12px; border-radius:2px; background:var(--sumi);}
.cb.empty{background:transparent; border-color:transparent;}
.cpeek .cb{height:38px; font-size:12px;}
.cpeek .cline{min-height:56px; font-size:26px;}
.cpeek .cseats{gap:4px;}
.cpeek .cface{width:38px; height:38px; font-size:12px;}
.cpeek .cface.you{font-size:10px;}

/* play */
#cplay{position:relative; padding-top:12px; gap:9px; overflow:hidden; touch-action:manipulation; user-select:none; -webkit-user-select:none;}
.chead{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:32px; flex:none;}
.bchip{font-weight:800; font-size:15px; padding:5px 12px; border-radius:999px; background:var(--sumi); color:var(--hikari); white-space:nowrap;}
.bchip.you{background:var(--bero-line); color:#fff;}
.cspeed{font-size:13px; font-weight:800; color:var(--day-muted); letter-spacing:.04em;}
.cspeed i{display:inline-block; width:9px; height:14px; margin-left:3px; border-radius:2px; background:var(--day-line); vertical-align:-2px;}
.cspeed i.on{background:var(--sumi);}
.cspeed.up{animation:cspeedup .8s ease-out;}
@keyframes cspeedup{0%{transform:scale(1.4); color:var(--bero-line)} 100%{transform:none}}
#cmarks{width:100%; height:20px; flex:none; display:flex; justify-content:center; align-items:center; gap:14px; margin:0;}
#cmarks i{width:16px; height:16px; border-radius:50%; border:3px solid var(--day-line); transition:background .06s, transform .06s;}
#cmarks i.on{background:var(--bero-ink); border-color:var(--bero-ink); transform:scale(1.3);}
#crow{width:100%; flex:1; min-height:0; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-bottom:12px;}
#cmachoWrap{flex:none; width:96px; min-height:0; display:flex; align-items:flex-end; justify-content:flex-start;}
#cpad{flex:1; height:100%; max-height:150px; min-height:96px; border-radius:24px; border:3px solid var(--sumi); background:#fff; color:var(--sumi); font-size:30px; font-weight:800; box-shadow:0 6px 0 var(--sumi); font-family:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
#cpad small{font-size:13px; color:var(--day-muted);}
#cpad:disabled{opacity:.25; box-shadow:none; border-style:dashed;}
#cpad.press{transform:translateY(5px); box-shadow:0 1px 0 var(--sumi);}
#cpad.faces{background:var(--kinari); color:var(--bero-line); font-size:22px;}
#cplay.fell{animation:cshake .45s ease-out;}
@keyframes cshake{0%,100%{transform:none} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}}
#cplay:has(#csheet:not([hidden])) #cmachoWrap{visibility:hidden;}

/* the bottom sheet (b66) */
#csheet{position:absolute; left:0; right:0; bottom:0; z-index:6; padding:14px 20px calc(18px + env(safe-area-inset-bottom)); background:var(--kinari); border-top:3px solid var(--sumi); border-radius:22px 22px 0 0; box-shadow:0 -10px 28px rgba(20,18,16,.22); display:flex; flex-wrap:wrap; gap:10px;}
#csheet[hidden]{display:none;}
.bask{width:100%; text-align:center; font-size:22px; font-weight:800; margin:0;}
.bask small{display:block; font-size:13px; color:var(--day-muted);}
.bask .say{display:block; margin:6px 0 2px; font-size:30px; color:var(--bero-line);}
#csheet .primary{width:100%; padding:18px; font-size:23px; background:var(--bero-line); color:#fff; border:3px solid var(--sumi); box-shadow:0 5px 0 var(--sumi);}

/* result */
#cresult{gap:12px; text-align:center; justify-content:center;}
.bbig{font-size:26px; font-weight:800; line-height:1.5; margin:0;}
.cresSub{font-size:15px; color:var(--day-muted); margin:0; line-height:1.6;}
#retryBtn{margin-top:22px;}

/* mic-1: the no-mic badge and the second button of the mic stop */
.cmic{font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; border:2px solid var(--day-muted); color:var(--day-muted); margin-left:auto; margin-right:8px;}
.cnomic{width:100%; margin-top:0; background:none; border:none; color:var(--day-muted); font:inherit; font-size:13px; font-weight:800; text-decoration:underline; padding:6px;}

/* fix-2: the rounds left in the header; the named stop's run-up to your naming */
.cleft{font-size:13px; font-weight:800; color:var(--sumi); white-space:nowrap; margin-left:auto;}
.cleft.last{color:var(--bero-line);}
.cmic:not([hidden]) + .cleft{margin-left:0;}
.chead .cmic{margin-right:0;}
.bask .then{display:block; margin-top:2px; font-size:14px; color:var(--bero-ink);}
.chead{gap:6px;}
.chead .cmic{white-space:nowrap; padding:2px 6px;}
.cspeed{white-space:nowrap;}
.cspeed i{width:7px; margin-left:2px;}

/* fix-3: your beat shows a beat ahead — a ring closes on the judged beat (cell and pad); the stop's button arms after a moment; the record */
.cb.soon::after{content:""; position:absolute; inset:-2px; border-radius:11px; border:4px solid var(--bero-line); animation:csoon var(--beat, 625ms) linear var(--lag, 0ms) forwards; pointer-events:none;}
@keyframes csoon{0%{transform:scale(1.5); opacity:.2} 100%{transform:scale(1); opacity:1}}
.cb.soon{overflow:visible; z-index:1;}
#cpad{position:relative;}
#cpad.soon::after{content:""; position:absolute; inset:-3px; border-radius:24px; border:5px solid var(--bero-line); animation:cpadsoon var(--beat, 625ms) linear var(--lag, 0ms) forwards; pointer-events:none;}
#csheet .primary.arming{opacity:.45; box-shadow:none; transform:translateY(5px);}
.crecord{font-size:14px; font-weight:800; margin:0; color:var(--bero-ink);}
#opening .crecord{color:var(--hikari);}
@keyframes cpadsoon{0%{transform:scale(1.18); opacity:.2} 100%{transform:scale(1); opacity:1}}