/* v2.1: progress you can see (pacemaker, FAST/SLOW, rating, clear lamps),
   timing calibration and the practice run. */

/* Pacemaker beside SCORE in the HUD */
#hud .score-h small{display:flex;align-items:baseline;justify-content:space-between;gap:4px;white-space:nowrap}
#pace{font-style:normal;font-weight:800;font-size:8px;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#9ff3cf;text-shadow:0 1px 2px #000,0 0 6px #000}
#pace[data-trend=down]{color:#ff9fae}
#pace:before{content:'PB ';color:#d9c9a8;font-weight:700;font-size:6.5px;letter-spacing:.06em}
.landscape #hud .score-h small{width:100%}

/* FAST / SLOW above the judgement */
#timing-hint{position:absolute;left:50%;top:-15px;transform:translateX(-50%);font:italic 800 11px/1 Manrope,sans-serif;letter-spacing:.14em;
  text-shadow:0 1px 2px #000,0 0 7px #000;pointer-events:none;white-space:nowrap}
#timing-hint[data-side=fast]{color:#7cc9ff}#timing-hint[data-side=slow]{color:#ffa06f}

/* Practice run */
.practice-run #mode-tag{color:#9ff0d6}
.ticket-practice{display:flex;align-items:baseline;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:8px;border:1.5px dashed var(--ticket-ink);border-radius:0;
  background:transparent;color:var(--ticket-ink);font-size:13px;font-weight:800;opacity:.82}
.ticket-practice small{font-size:10px;font-weight:650}
.landscape .ticket-practice{min-height:34px;margin-top:6px;font-size:12px}
.practice-action{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:48px;margin:0 0 10px;padding:7px 12px;border-radius:9px;
  border:1px solid #9ae7d388;background:linear-gradient(110deg,#9ae7d31f,#9ae7d30a);color:#c9fbea;font-size:14px;font-weight:750}
.practice-action small{font-size:10px;font-weight:600;color:#a9c9c0}
.practice-sheet .sheet-kicker h2{font-size:clamp(21px,6cqw,28px)}
.practice-tag{font-size:10px;font-weight:800;letter-spacing:.16em;color:#9ff0d6;border:1px solid #9ff0d677;border-radius:20px;padding:4px 9px}
.practice-score{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.practice-score small{font-size:10px;color:#b6c0c8;letter-spacing:.1em}
.practice-score b{font:400 clamp(32px,10cqw,44px)/1 TicketDisplay,Impact,sans-serif;color:#fff3d8;letter-spacing:.03em}
.practice-score i{font:400 24px/1 TicketDisplay,Impact,sans-serif;font-style:normal;color:#ffd77e;margin-left:auto}
.practice-counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:6px 0 10px}
.practice-counts>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:7px;background:#ffffff08}
.practice-counts small{font-size:8px;color:#b7c2ca;letter-spacing:.04em}.practice-counts b{font-size:16px;color:#fff1d6;font-variant-numeric:tabular-nums}
.practice-sheet .primary{justify-content:center;margin-top:12px}
.practice-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.practice-actions .text-action{border:1px solid #c6b28f55;border-radius:7px;min-height:42px}

/* Timing review (result and practice) */
#result-counts,.practice-counts{grid-template-columns:repeat(5,1fr) repeat(2,.9fr)}
.result-stats #result-counts div:nth-child(5) b{color:#ecaaaa}
.result-stats #result-counts div.count-fast b{color:#7cc9ff}.result-stats #result-counts div.count-slow b{color:#ffa06f}
#result-counts .count-fast,.practice-counts .count-fast{padding-left:8px;border-left:1px solid #ffffff1c}
#result-counts .count-fast small,.practice-counts .count-fast small,#result-counts .count-fast b,.practice-counts .count-fast b{color:#7cc9ff}
#result-counts .count-slow small,.practice-counts .count-slow small,#result-counts .count-slow b,.practice-counts .count-slow b{color:#ffa06f}
.practice-counts .count-fast{border-left:0;padding-left:2px}
.timing-review:empty{display:none}
.timing-review{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:9px 0 0}
.timing-average{font-size:11px;color:#c3cdd4}
.timing-fix{flex:1;min-width:max-content;min-height:34px;padding:5px 12px;border-radius:8px;border:1px solid #9ae7d377;background:#9ae7d314;
  color:#c9fbea;font-size:12px;font-weight:700}
.timing-fix:disabled{opacity:.7;border-style:dashed}
.landscape .result-stats .timing-review{margin-top:6px}.landscape .timing-fix{min-height:30px;font-size:11px}

/* Rating */
#result-metrics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:4px}
.rating-metric small{color:#d9c39b!important;letter-spacing:.1em!important;font-weight:800}
.rating-metric b{color:#fff1d4}
.rating-metric b small{color:#8ff3cb!important;opacity:1!important;letter-spacing:0!important}
.rating-metric[data-trend=up] b{color:#bff9e2;text-shadow:0 0 10px #69f0c280}
.score-rating{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:2px;flex:none}
.score-rating small{font-size:8px;letter-spacing:.16em;color:#d9c39b;font-weight:800}
.score-rating b{font:400 19px/1 TicketDisplay,Impact,sans-serif;letter-spacing:.04em;color:#fff1d4}
.scores-header>#score-summary{flex:none}

/* Records: song / LV switch and the LV lamp view */
.score-switches{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.score-switches #score-style{margin:0}
#score-view{display:flex;gap:5px}
#score-view button{min-height:38px;min-width:64px;padding:7px 12px;border-radius:18px;font-size:11px;background:#ffffff09;border:1px solid #c6b28f44}
#score-view [aria-pressed=true]{background:#9ae7d3;color:#10272c;border-color:#c9fbea}
.scores-screen[data-view=level] #score-modes{display:none}
.level-group{padding:10px 10px 12px;border:1px solid #b7c5ce26;border-radius:10px;background:linear-gradient(115deg,#ffffff0a,#ffffff03)}
.level-group header{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px;margin-bottom:9px}
.level-group header b{font:400 20px/1 TicketDisplay,Impact,sans-serif;letter-spacing:.04em;color:#ffe9c2}
.level-group header small{justify-self:end;font-size:10px;color:#a9d9c7;font-variant-numeric:tabular-nums}
.level-bar{grid-column:1/-1;height:3px;border-radius:3px;background:linear-gradient(90deg,#69f0c2 var(--share),#ffffff14 var(--share))}
.level-group[data-level="35"] header b,.level-group[data-level="36"] header b{color:#ffb3d6}
.lamp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.lamp{position:relative;aspect-ratio:1;padding:0;border-radius:7px;overflow:hidden;border:2px solid #ffffff1a;background:#0c1118}
.lamp img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.85) brightness(.45)}
.lamp span{position:absolute;left:0;right:0;bottom:0;padding:1px 0;font:800 8px/1.2 Manrope,sans-serif;letter-spacing:.04em;text-align:center;color:#fff;
  background:#000000a6}
.lamp[data-lamp=played]{border-color:#8796a6}
.lamp[data-lamp=played] img{filter:grayscale(.4) brightness(.7)}
.lamp[data-lamp=clear]{border-color:#69f0c2;box-shadow:0 0 7px #69f0c255}
.lamp[data-lamp=clear] img,.lamp[data-lamp=fc] img,.lamp[data-lamp=ap] img{filter:none}
.lamp[data-lamp=fc]{border-color:#ffd36a;box-shadow:0 0 9px #ffd36a77}
.lamp[data-lamp=ap]{border-color:#fff;box-shadow:0 0 0 1px #ff7ab6,0 0 12px #8fb4ff99}
.lamp[data-lamp=ap] span{background:linear-gradient(90deg,#ff7ab6d0,#ffd36ad0,#8ff3d4d0,#8fb4ffd0);color:#1d1430}
.lamp[data-tier=LUNATIC] span{background:linear-gradient(90deg,#ff3d7fd0,#9c4dffd0)}
.scores-screen[data-view=level] .score-list{grid-template-columns:1fr}
.landscape .scores-screen[data-view=level] .score-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.lamp-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10px;color:#aeb8c1;margin:0;grid-column:1/-1}
.lamp-legend span{display:inline-flex;align-items:center;gap:5px}
.lamp-legend span:before{content:'';width:9px;height:9px;border-radius:2px;border:2px solid #ffffff1a;background:#0c1118}
.lamp-legend [data-lamp=played]:before{border-color:#8796a6}.lamp-legend [data-lamp=clear]:before{border-color:#69f0c2}
.lamp-legend [data-lamp=fc]:before{border-color:#ffd36a}.lamp-legend [data-lamp=ap]:before{border-color:#fff;background:linear-gradient(135deg,#ff7ab6,#ffd36a,#8ff3d4,#8fb4ff)}

/* Timing calibration */
.calibrate-open{grid-column:1/-1;justify-self:start;margin-top:6px;min-height:36px;padding:6px 14px;border-radius:18px;border:1px solid #9ae7d377;background:#9ae7d314;
  color:#c9fbea;font-size:12px;font-weight:700}
.calibrate-sheet .sheet-kicker h2{font-size:clamp(21px,6cqw,28px)}
.calibrate-result{min-height:52px;font-size:13px;line-height:1.65;color:#d7dfe3;margin:12px 0 10px}
.calibrate-meter{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;height:30px;margin:0 0 12px;font-size:9px;font-weight:800;letter-spacing:.1em}
.calibrate-meter span:first-child{color:#7cc9ff}.calibrate-meter span:last-child{color:#ffa06f}
#calibrate-dots{position:relative;height:22px;border-radius:11px;background:linear-gradient(90deg,#7cc9ff22,#ffffff0d 40%,#ffffff0d 60%,#ffa06f22);grid-column:2;grid-row:1}
.calibrate-center{grid-column:2;grid-row:1;justify-self:center;width:2px;height:28px;background:#ffe9b8;box-shadow:0 0 6px #ffe9b8;z-index:1}
#calibrate-dots i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffa06f;box-shadow:0 0 5px #0008}
#calibrate-dots i.near{background:#8ff3cb}#calibrate-dots i.mid{background:#ffe08a}
.calibrate-pad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:clamp(110px,24cqh,170px);border-radius:16px;
  border:2px solid #9ae7d355;background:radial-gradient(circle at 50% 40%,#2b4a4a,#14202a);color:#e9fff7;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.calibrate-pad b{font:400 34px/1 TicketDisplay,Impact,sans-serif;letter-spacing:.12em}
.calibrate-pad small{font-size:11px;color:#a9c9c0}
.calibrate-pad:disabled{opacity:.45}
.calibrate-pad.beat{border-color:#c9fbea;box-shadow:0 0 22px #69f0c277,inset 0 0 24px #69f0c233}
.calibrate-pad:active:not(:disabled){transform:scale(.985)}
.calibrate-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:12px}
.calibrate-actions .text-action{border:1px solid #c6b28f77;border-radius:7px;min-height:44px}
.calibrate-actions .primary{justify-content:center;min-height:44px;margin:0}
.calibrate-actions .text-action:only-child,.calibrate-actions .text-action:has(+ [hidden]){grid-column:1/-1}
.landscape .calibrate-sheet{max-width:560px}.landscape .calibrate-pad{height:clamp(80px,26cqh,120px)}.landscape .calibrate-result{min-height:40px;margin:6px 0}
.landscape .practice-sheet{max-width:560px}

@media(prefers-reduced-motion:reduce){.calibrate-pad.beat{box-shadow:none}}