:root {
  --ink: #162d39; --paper: #fff9e9; --teal: #0e7774; --mint: #b7e6ce;
  --red: #d6422e; --yellow: #f7cd4b; --line: #c6cdbd;
  --font: 'Noto Sans TC Variable', 'Microsoft JhengHei', sans-serif;
  --rl-viewport-height: 100dvh; --header: 62px; --footer: 44px;
  --screen-height: calc(var(--rl-viewport-height) - var(--header) - var(--footer));
  font-family: var(--font); color: var(--ink); background: var(--paper); color-scheme: light;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { min-width: 320px; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .5; }
button, a, summary, input { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--red); }
::selection { color: var(--paper); background: var(--teal); }
* { scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
[hidden] { display: none !important; }
h1,h2,h3,p,figure,fieldset,dl,dd { margin: 0; }
button { color: inherit; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip-link:focus { position:fixed; z-index:30; top:0; left:0; background:var(--paper); padding:12px; }
.cabinet-header { height:var(--header); display:flex; align-items:center; gap:24px; padding:0 3vw; background:var(--paper); border-bottom:2px solid var(--ink); }
.cabinet-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--red); color:var(--paper); border-radius:50%; font-weight:900; font-style:italic; font-size:25px; }
.cabinet-brand b { font-size:16px; font-weight:900; }
.cabinet-location { font-size:11px; font-weight:700; letter-spacing:.14em; }
.cabinet-tools { margin-left:auto; display:flex; gap:8px; }
.cabinet-tools button { min-height:36px; padding:4px 12px; border:1px solid var(--line); border-radius:4px; background:transparent; font-size:12px; font-weight:700; }
.cabinet-tools button:hover { background:var(--mint); border-color:var(--teal); }
.cabinet-footer { height:var(--footer); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 3vw; color:var(--paper); background:var(--ink); font-size:12px; font-weight:700; letter-spacing:.035em; }
.cabinet-freeplay { display:flex; align-items:center; gap:9px; color:var(--yellow); white-space:nowrap; }
.cabinet-freeplay i { width:7px; height:7px; border-radius:50%; background:var(--mint); }
.sl-page { height:var(--screen-height); overflow:hidden; position:relative; }
.arcade-attract { height:100%; display:grid; grid-template-columns:44% 56%; position:relative; overflow:hidden; }
.attract-copy { position:relative; z-index:2; align-self:center; padding:20px 0 40px 6vw; }
.attract-copy h1 { font-size:clamp(38px,4.5vw,76px); line-height:1.24; font-weight:900; letter-spacing:-.035em; }
.attract-copy h1 span { display:block; color:var(--red); }
.attract-copy > p { margin:22px 0 28px; font-size:clamp(14px,1.4vw,20px); font-weight:600; }
.arcade-insert { width:min(360px,95%); min-height:84px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:2px solid var(--ink); border-radius:10px; color:var(--paper); background:var(--red); box-shadow:0 7px 0 #9e3024,0 12px 24px #162d3920; transition:transform 140ms ease-out; }
.arcade-insert b { font-size:28px; font-weight:900; }
.arcade-insert span { font-size:11px; letter-spacing:.14em; }
.arcade-insert:hover { transform:translateY(-2px); }
.arcade-insert:active { transform:translateY(4px); }
.attract-copy > small { display:block; margin-top:24px; font-size:12px; color:#465a60; }
.attract-band { position:relative; background:var(--mint); overflow:hidden; border-bottom:18px solid var(--teal); }
.attract-band::before { content:''; position:absolute; width:125%; height:68%; top:12%; left:-10%; border:44px solid var(--teal); border-radius:50%; transform:rotate(-25deg); }
.attract-type { position:absolute; top:5%; left:7%; color:var(--teal); opacity:.9; font-size:clamp(40px,5.8vw,96px); font-weight:900; line-height:.96; letter-spacing:-.04em; }
.attract-band img { position:absolute; width:43%; height:62%; object-fit:contain; filter:drop-shadow(0 12px 6px #12362e22); }
.attract-shiba { left:-3%; bottom:5%; transform:rotate(-8deg); }
.attract-raccoon { left:23%; bottom:8%; z-index:2; transform:rotate(3deg); }
.attract-cat { right:-8%; bottom:4%; z-index:2; transform:rotate(7deg); }
.attract-otter { right:7%; top:5%; width:34% !important; height:46% !important; z-index:1; }
.attract-seal { position:absolute; right:4%; bottom:4%; z-index:3; width:88px; height:88px; display:grid; place-content:center; background:var(--yellow); border:2px solid var(--ink); border-radius:50%; text-align:center; font-size:20px; font-weight:900; transform:rotate(12deg); }
.arcade-credit { position:absolute; bottom:9px; left:3vw; font-size:10px; color:#465a60; z-index:3; }
body:not(.sl-low-fx) .attract-band img { animation:stage-breathe 5s ease-in-out infinite alternate; }
@keyframes stage-breathe { to { translate:0 -8px; } }
.sl-menu { height:100%; display:grid; grid-template-columns:1fr 1fr; }
.sl-menu-copy { grid-column:2; grid-row:1; display:flex; flex-direction:column; justify-content:center; min-height:0; min-width:0; padding:clamp(16px,2.4vw,40px) clamp(24px,4vw,72px); position:relative; }
.sl-menu-nav { position:absolute; top:18px; left:clamp(24px,4vw,72px); }
.sl-home-link,.sl-player-id-button { padding:7px 0; background:none; border:0; font-size:12px; font-weight:700; }
.sl-home-link { text-decoration:underline; text-underline-offset:4px; }
.sl-player-id-button { position:absolute; right:clamp(24px,4vw,72px); top:18px; display:flex; align-items:center; gap:6px; max-width:42%; }
.sl-player-id-button > span { color:var(--teal); }
.name-pan-window { min-width:0; overflow:hidden; display:block; white-space:nowrap; text-overflow:ellipsis; }
.name-pan-track { display:inline-flex; gap:12px; }
.name-pan-text[aria-hidden],.name-pan-sep { display:none; }
#sl-title { margin:24px 0 20px; font-size:clamp(26px,2.6vw,42px); font-weight:900; letter-spacing:-.035em; }
#sl-title em { color:var(--teal); font-style:normal; }
.sl-lead,.sl-copyright { display:none; }
.arcade-song-navigation { display:flex; justify-content:space-between; align-items:center; gap:8px; border-bottom:2px solid var(--ink); }
.arcade-song-navigation button { min-height:36px; border:0; padding:4px 0; background:none; font-size:12px; font-weight:700; }
.arcade-song-navigation button:hover { color:var(--red); }
#arcade-track-number { color:var(--teal); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.sl-song-line { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:18px 0 10px; background:none; border:0; }
.sl-song-line > span:first-child { min-width:0; flex:1; }
.sl-song-line strong { display:block; font-size:clamp(24px,2.5vw,38px); font-weight:900; letter-spacing:-.03em; line-height:1.25; overflow-wrap:anywhere; max-height:2.5em; overflow:hidden; }
.sl-song-line small { display:block; margin-top:9px; font-size:12px; color:#465a60; }
.arcade-library-cue { font-size:12px; color:var(--teal); white-space:nowrap; }
.arcade-song-extras { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; min-height:30px; font-size:12px; color:var(--teal); }
.arcade-song-extras button { border:1px solid var(--teal); background:none; border-radius:4px; padding:5px 10px; font-size:11px; }
.arcade-song-extras button[aria-pressed=true] { background:var(--teal); color:var(--paper); }
.sl-flow-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:8px; }
.sl-flow-label span { color:#465a60; }
.sl-difficulty { display:grid; grid-template-columns:repeat(4,1fr); border:0; padding:0; gap:6px; min-width:0; }
.sl-difficulty legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.sl-difficulty-option { position:relative; min-height:70px; padding:10px 4px; border:1px solid var(--line); border-bottom-width:4px; border-radius:6px; background:transparent; text-align:center; }
.sl-difficulty-option b { display:block; font-size:18px; font-weight:900; }
.sl-difficulty-option span { display:block; font-size:10px; margin-top:3px; }
.sl-difficulty-option.is-selected { background:var(--teal); color:white; border-color:var(--teal); border-bottom-color:#085654; }
.sl-difficulty-option.is-selected::after { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--yellow); top:6px; right:6px; }
.sl-difficulty-copy { min-height:2.9em; margin:10px 0 14px; color:#465a60; font-size:11px; line-height:1.45; }
.sl-start { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; min-height:68px; padding:10px 18px; color:var(--paper); background:var(--red); border:2px solid var(--red); border-bottom:6px solid #9e3024; border-radius:8px; }
.sl-start > span { font-size:23px; font-weight:900; white-space:nowrap; }
.sl-start small { font-size:10px; line-height:1.5; max-width:48%; text-align:right; }
.sl-start:hover { background:#b93525; }
.sl-start:active { translate:0 2px; }
.sl-menu-help { margin-top:12px; font-size:11px; text-align:center; color:#465a60; }
kbd { font-family:inherit; font-weight:800; }
.sl-touch-hint { display:none; }
.sl-touch .sl-touch-hint { display:inline; }
.sl-touch .sl-keyboard-hint { display:none; }
.sl-menu-art { grid-column:1; grid-row:1; position:relative; background:var(--teal); color:var(--paper); overflow:hidden; }
.sl-menu-art::after { content:''; position:absolute; width:130%; height:50%; left:-15%; bottom:-8%; background:var(--mint); border-radius:50% 50% 0 0; transform:rotate(-8deg); }
.sl-menu-stage-label { position:absolute; top:7%; left:9%; z-index:1; }
.sl-menu-stage-label b { display:block; font-size:clamp(32px,4.5vw,70px); font-weight:900; letter-spacing:-.04em; line-height:1.03; }
.sl-menu-stage-label > span { display:block; margin-top:12px; color:var(--mint); font-size:14px; }
.sl-menu-band { position:absolute; inset:20% 0 0; z-index:2; }
.sl-ip-performer { position:absolute; width:44%; height:67%; bottom:8%; }
.sl-ip-performer img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 5px #062f3030); }
.sl-ip-d { left:-3%; bottom:18%; transform:rotate(-7deg); }
.sl-ip-f { left:19%; z-index:3; }
.sl-ip-j { right:-6%; bottom:12%; z-index:2; transform:rotate(6deg); }
.sl-ip-k { right:10%; bottom:38%; width:36%; z-index:1; }
.sl-ip-performer figcaption { display:none; }
/* Full-screen song wheel. The focused row is the only selection authority. */
dialog { color:var(--ink); }
dialog::backdrop { background:#102e38bd; }
.sl-song-dialog { width:100%; height:100%; max-width:none; max-height:none; inset:0; margin:0; padding:24px max(5vw,16px); border:0; background:var(--paper); }
.sl-song-dialog[open] { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:14px; }
.sl-song-dialog-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.sl-song-dialog-head h2 { font-size:clamp(24px,3vw,40px); font-weight:900; }
.sl-song-dialog-head p { font-size:12px; color:#465a60; margin-top:8px; }
.sl-song-dialog-head button { width:48px; height:48px; border:1px solid var(--line); background:none; border-radius:50%; font-size:26px; }
.sl-song-categories { display:flex; gap:6px; border-bottom:2px solid var(--ink); padding-bottom:12px; }
.sl-song-categories button { flex:1; max-width:140px; min-height:42px; border:1px solid var(--line); background:none; border-radius:4px; font-size:14px; font-weight:800; }
.sl-song-categories button.is-active { background:var(--teal); color:var(--paper); border-color:var(--teal); }
.sl-song-wheel-shell { display:grid; grid-template-columns:70px minmax(0,1fr) 70px; min-height:0; position:relative; max-width:1000px; width:100%; margin:auto; height:100%; }
.sl-song-list { position:relative; overflow:auto; padding:var(--sl-song-wheel-cap,0px) 18px; min-height:0; scroll-snap-type:y proximity; scrollbar-width:none; }
.sl-song-card { display:grid; grid-template-columns:45px minmax(0,1fr) 60px; align-items:center; width:100%; padding:16px 20px; margin:8px 0; min-height:84px; border:1px solid var(--line); background:#f0efdf; border-radius:6px; text-align:left; scroll-snap-align:center; opacity:.5; transition:background 140ms ease-out,opacity 140ms ease-out; }
.sl-song-card.is-wheel-near { opacity:.8; }
.sl-song-card.is-wheel-active { opacity:1; background:var(--teal); border-color:var(--teal); color:var(--paper); }
.sl-song-number { font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; }
.sl-song-card-copy { min-width:0; }
.sl-song-card-copy strong { display:block; font-size:clamp(20px,2.5vw,32px); font-weight:900; overflow-wrap:anywhere; }
.sl-song-card-copy small { display:block; font-size:11px; margin-top:6px; }
.sl-song-record { text-align:right; font-size:11px; }
.sl-song-record b { display:block; font-size:28px; }
.sl-current-badge { display:none; }
.sl-song-step { align-self:center; border:0; background:none; min-height:54px; font-size:12px; font-weight:800; }
.sl-song-step span { display:block; font-size:22px; }
.sl-song-counter { position:absolute; bottom:0; right:0; font-size:12px; font-weight:800; }
.sl-song-dialog-foot { text-align:center; font-size:11px; color:#465a60; }
.sl-song-lb { display:none; }
/* The runway stays dark so notes, targets and judgement remain dominant. */
.sl-game { height:100%; display:grid; grid-template-rows:70px minmax(0,1fr) 82px; background:#0d272d; color:var(--paper); padding:0 3vw 12px; }
body[data-screen=game] .cabinet-header { background:#0d272d; color:var(--paper); border-bottom-color:#35535a; }
body[data-screen=game] .cabinet-brand { color:var(--paper); }
body[data-screen=game] .cabinet-tools { visibility:hidden; }
.sl-game-hud { display:grid; grid-template-columns:44px 100px minmax(0,1fr) 140px 100px; gap:18px; align-items:center; }
.sl-icon-button { width:42px; height:42px; background:#29464d; color:var(--paper); border:1px solid #5e827f; border-radius:5px; font-size:20px; }
.sl-section-cue span,.sl-stage-now-playing > span,.sl-hud-stat span { display:block; font-size:10px; color:#b7d1c8; }
.sl-section-cue strong { font-size:15px; }
.sl-stage-now-playing { text-align:center; min-width:0; }
.sl-stage-now-playing strong { display:block; font-size:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sl-stage-now-playing small { font-size:11px; color:#b7d1c8; }
.sl-hud-stat strong { display:block; font-size:25px; font-variant-numeric:tabular-nums; }
.sl-hud-stat:last-child strong { color:var(--yellow); }
.sl-stage { position:relative; min-height:0; }
.sl-lane-viewport { position:absolute; inset:0 23%; border:2px solid #486f69; border-bottom:5px solid var(--yellow); border-radius:8px 8px 0 0; overflow:hidden; }
#sl-canvas { display:block; width:100%; height:100%; }
.sl-band { position:absolute; inset:0; pointer-events:none; }
.sl-performer { position:absolute; width:22%; height:46%; }
.sl-performer img { height:100%; width:100%; object-fit:contain; }
.sl-performer-d { top:0; left:0; }
.sl-performer-f { bottom:4%; left:0; }
.sl-performer-j { top:0; right:0; }
.sl-performer-k { bottom:4%; right:0; }
.sl-performer figcaption { position:absolute; bottom:0; width:100%; text-align:center; font-size:12px; }
.sl-performer kbd { color:var(--yellow); margin-right:8px; }
.sl-neighbour-note { position:absolute; bottom:0; left:0; width:22%; font-size:10px; color:#b7d1c8; text-align:center; }
.sl-performer.is-hit img { transform:translateY(-5px); }
.sl-performer.is-miss img { opacity:.6; }
.sl-progress { position:absolute; left:0; bottom:0; height:5px; width:100%; background:#395755; }
.sl-progress i { display:block; width:var(--song-progress,0%); height:100%; background:var(--yellow); }
.sl-countdown { position:absolute; inset:0; display:grid; place-items:center; font-size:96px; font-weight:900; color:var(--yellow); pointer-events:none; }
.sl-countdown:empty { display:none; }
.sl-countdown.is-pop { animation:ready-pop 250ms ease-out; }
@keyframes ready-pop { from { transform:scale(1.3); } to { transform:scale(1); } }
.sl-judge { position:absolute; top:66%; translate:-50% 0; text-align:center; pointer-events:none; opacity:0; white-space:nowrap; }
.sl-judge strong { font-size:clamp(16px,2vw,30px); font-weight:900; text-shadow:0 2px 4px #071b20; }
.sl-judge span { display:block; }
.sl-judge.is-perfect { color:var(--yellow); }.sl-judge.is-great { color:#b7e6ce; }.sl-judge.is-good { color:#e1cafc; }.sl-judge.is-miss { color:#ff978b; }
.sl-judge.is-show { opacity:1; animation:judge-flash 600ms ease-out forwards; }
@keyframes judge-flash { 0%,65% { opacity:1; } 100% { opacity:0; } }
.sl-combo { position:absolute; top:12%; left:50%; translate:-50% 0; text-align:center; opacity:0; pointer-events:none; }
.sl-combo.is-visible { opacity:1; }
.sl-combo strong { display:block; font-size:clamp(34px,4vw,60px); line-height:1; font-variant-numeric:tabular-nums; font-weight:900; }
.sl-combo span { font-size:10px; letter-spacing:.18em; }
.sl-hit-controls { width:54%; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:9px; }
.sl-game.is-2k .sl-hit-controls { grid-template-columns:1fr 1fr; }
.sl-game.is-2k .sl-hit-key-d,.sl-game.is-2k .sl-hit-key-k { display:none; }
.sl-hit-key { color:var(--ink); background:#d4e7db; border:2px solid #b7e6ce; border-bottom:7px solid #799f92; border-radius:7px; touch-action:none; user-select:none; }
.sl-hit-key-f { background:#f3b780; border-color:#f3b780; border-bottom-color:#ad7346; }
.sl-hit-key-j { background:var(--yellow); border-color:var(--yellow); border-bottom-color:#ae8a20; }
.sl-hit-key-k { background:#f69280; border-color:#f69280; border-bottom-color:#b3584a; }
.sl-hit-key kbd { display:block; font-size:24px; }
.sl-hit-key span { display:block; font-size:10px; }
.sl-hit-key.is-down { background:white; transform:translateY(3px); border-bottom-width:3px; }
.sl-pause-layer { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:#081c23dd; }
.sl-pause-panel { width:min(390px,90%); text-align:center; }
.sl-pause-character { height:130px; object-fit:contain; }
.sl-pause-panel h2 { font-size:32px; margin:8px 0; }
.sl-pause-panel p { font-size:13px; margin-bottom:20px; }
.sl-pause-panel button { display:block; width:100%; margin:8px 0; }
.sl-panel-primary,.sl-panel-secondary { padding:10px 16px; min-height:46px; border:1px solid var(--ink); border-radius:5px; background:var(--paper); color:var(--ink); font-weight:800; font-size:14px; }
.sl-panel-primary { background:var(--red); border-color:var(--red); border-bottom:4px solid #9e3024; color:white; }
.sl-panel-primary:hover { background:#b93525; }.sl-panel-secondary:hover { background:var(--mint); }
/* Results are a finish screen with one obvious next action, not a report page. */
.sl-result { height:100%; display:grid; grid-template-columns:32% minmax(0,1fr); gap:4vw; padding:clamp(18px,3vw,44px) 6vw; overflow:auto; }
.sl-result-grade { background:var(--teal); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; padding:24px; min-height:0; }
.sl-result-grade > p { font-size:12px; font-weight:800; letter-spacing:.16em; }
.sl-result-grade > strong { font-size:clamp(100px,16vw,220px); font-weight:900; line-height:1.05; color:var(--yellow); font-style:italic; }
.sl-grade-best { text-align:center; font-size:14px; font-weight:800; margin-bottom:20px; }
.sl-grade-best:empty { display:none; }
.sl-grade-stats { display:flex; gap:28px; text-align:center; }
.sl-grade-stats dt { font-size:10px; color:var(--mint); }.sl-grade-stats dd { margin-top:3px; font-size:18px; font-weight:800; }
.sl-result-report { min-height:0; display:flex; flex-direction:column; justify-content:center; }
.sl-result-song { color:var(--teal); font-size:14px; font-weight:800; }
.sl-result-report h2 { font-size:clamp(24px,3vw,42px); font-weight:900; letter-spacing:-.03em; line-height:1.25; margin:8px 0 20px; }
.sl-result-summary { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:16px; margin-bottom:16px; }
.sl-result-summary span { font-size:11px; color:#465a60; }.sl-result-summary strong { display:block; font-size:clamp(24px,3vw,42px); font-weight:900; font-variant-numeric:tabular-nums; }
.sl-result-summary .is-score strong { color:var(--red); }
.sl-j-stack { display:flex; height:8px; background:#d0d8c9; overflow:hidden; border-radius:4px; }
.sj-perfect { background:#9a7300; }.sj-great { background:var(--teal); }.sj-good { background:#9270b8; }.sj-miss { background:var(--red); }
.sl-judgement-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }
.sl-judgement-list div { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:10px; }.sl-judgement-list dd { font-size:16px; font-weight:800; }
.sl-result-tip { color:#465a60; font-size:12px; line-height:1.5; margin:12px 0 18px; }
.sl-result-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sl-result-actions button { flex:1; white-space:nowrap; }
.arcade-result-details { margin-top:16px; font-size:12px; }
.arcade-result-details summary { cursor:pointer; font-weight:800; padding:9px 0; color:var(--teal); }
.arcade-result-details[open] { max-height:220px; overflow:auto; flex-shrink:1; }
.sl-growth { padding:10px 0; border-top:1px solid var(--line); line-height:1.6; }
#sl-growth-summary { font-weight:800; }
#sl-milestones { display:flex; flex-wrap:wrap; gap:5px 12px; list-style:none; padding:0; margin:8px 0; color:#53626a; }
#sl-milestones .is-earned { color:var(--teal); font-weight:800; }
.sl-training { padding:10px 0; border-top:1px solid var(--line); }
.sl-training > div { display:flex; gap:8px; margin:8px 0; }.sl-training small { font-size:11px; }
.sl-ranking-screen { height:100%; padding:24px 6vw; overflow:auto; }
.sl-ranking-card { max-width:1000px; height:100%; margin:auto; display:flex; flex-direction:column; gap:14px; }
.sl-ranking-header { display:grid; grid-template-columns:1fr auto; gap:6px; }
.sl-ranking-header > p { display:none; }.sl-ranking-header h2 { font-size:30px; font-weight:900; }
.sl-ranking-header > span { color:var(--teal); font-size:13px; }.sl-ranking-header > strong { align-self:center; color:var(--red); font-size:14px; }
.sl-result-ranking { flex:1; min-height:0; overflow:auto; }
.sl-ranking-columns,.sl-result-ranking li { display:grid; grid-template-columns:60px minmax(0,1fr) 140px; gap:12px; align-items:center; }
.sl-ranking-columns { padding:10px 16px; background:var(--ink); color:var(--paper); font-size:12px; }
.sl-result-ranking ol { list-style:none; padding:0; margin:0; }.sl-result-ranking li { padding:14px 16px; min-height:55px; border-bottom:1px solid var(--line); font-weight:700; }
.sl-result-ranking li.is-me { background:var(--mint); }.sl-result-ranking li.is-loading { display:block; text-align:center; font-size:14px; }
.sl-result-ranking .score { text-align:right; font-variant-numeric:tabular-nums; }.sl-result-ranking .name { overflow-wrap:anywhere; }.sl-result-ranking .name b { font-size:10px; }
/* Settings and player identity remain optional, with native focus containment. */
.arcade-dialog { width:min(540px,calc(100% - 24px)); max-height:calc(var(--rl-viewport-height) - 32px); margin:auto; padding:24px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); overflow:auto; box-shadow:0 16px 64px #102e3855; }
.arcade-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }.arcade-dialog h2 { font-size:22px; font-weight:900; }
.arcade-dialog header button { border:0; background:var(--mint); border-radius:4px; min-height:40px; padding:8px 12px; font-size:12px; white-space:nowrap; }
.arcade-dialog label { display:flex; justify-content:space-between; margin-top:18px; font-size:14px; font-weight:800; }
.arcade-dialog input[type=range] { width:100%; accent-color:var(--teal); min-height:32px; }
.arcade-dialog p { margin:8px 0; font-size:12px; line-height:1.65; color:#465a60; }
.arcade-dialog .arcade-check { justify-content:flex-start; align-items:center; gap:8px; min-height:32px; }.arcade-check input { width:18px; height:18px; accent-color:var(--teal); }
.arcade-dialog input[type=text] { width:100%; padding:12px; min-height:48px; border:1px solid var(--teal); border-radius:5px; margin-top:8px; background:white; caret-color:var(--red); }
#arcade-name-error { color:#b93525; min-height:20px; }#arcade-name-form > button { width:100%; }
#arcade-notice { position:fixed; bottom:54px; left:50%; translate:-50% 0; z-index:20; background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:6px; font-size:13px; max-width:90%; pointer-events:none; }
#arcade-notice:empty { display:none; }
.sl-recent-board { font-size:12px; }.sl-recent-head { display:none; }.sl-recent-columns,.sl-recent-item { display:grid; grid-template-columns:1fr 1.7fr 65px 75px; gap:10px; align-items:center; }
.sl-recent-columns { border-bottom:2px solid var(--ink); padding:10px 0; font-weight:800; }.sl-recent-list { list-style:none; margin:0; padding:0; }.sl-recent-item { padding:12px 0; border-bottom:1px solid var(--line); }
.sl-recent-item > * { min-width:0; overflow:hidden; text-overflow:ellipsis; }.sl-recent-item em { font-style:normal; font-weight:900; margin-right:5px; }.sl-diff-badge { font-style:normal; font-size:9px; }.sl-recent-item time { font-size:9px; }
.sl-recent-item.is-empty:not(:first-child) { display:none; }
body:not(.sl-low-fx) .sl-menu,body:not(.sl-low-fx) .sl-result { animation:screen-in 220ms cubic-bezier(.16,1,.3,1); }
@keyframes screen-in { from { transform:translateY(8px); opacity:.7; } to { transform:none; opacity:1; } }
@media (min-width:761px) and (max-height:760px) {
  :root { --header:50px; --footer:34px; }
  .sl-menu-copy { padding-block:12px; }.sl-menu-nav,.sl-player-id-button { top:8px; }#sl-title { margin:24px 0 8px; font-size:28px; }
  .sl-song-line { padding-top:12px; }.sl-song-line strong { font-size:28px; }.arcade-song-extras { margin-bottom:8px; }.sl-difficulty-option { min-height:60px; }.sl-difficulty-copy { margin:8px 0; }.sl-start { min-height:58px; }.sl-menu-help { margin-top:8px; }
  .sl-result { padding:20px 5vw; }.sl-result-report h2 { font-size:28px; margin-bottom:14px; }.sl-result-summary strong { font-size:30px; }.sl-result-tip { margin:8px 0 12px; }.sl-result-summary { margin-bottom:10px; }.arcade-result-details { margin-top:6px; }
}
@media (max-width:760px) {
  :root { --header:52px; --footer:36px; }
  .cabinet-header { padding:0 14px; gap:10px; }.cabinet-brand b { font-size:13px; }.brand-mark { width:28px; height:28px; font-size:21px; }.cabinet-location { display:none; }.cabinet-tools { gap:4px; }.cabinet-tools button { padding:4px 8px; font-size:10px; min-height:32px; }#arcade-recent-open { display:none; }
  .cabinet-footer { padding:0 14px; font-size:10px; }.cabinet-freeplay { font-size:9px; }
  .arcade-attract { grid-template-columns:1fr; grid-template-rows:50% 50%; }.attract-band { grid-row:1; border-bottom:8px solid var(--teal); }.attract-copy { grid-row:2; padding:12px 24px 26px; text-align:center; align-self:center; }.attract-copy h1 { font-size:clamp(27px,6.5vw,42px); line-height:1.15; }.attract-copy h1 br { display:none; }.attract-copy h1 span { display:inline; }.attract-copy > p { margin:10px 0 14px; font-size:12px; }.arcade-insert { margin:auto; min-height:64px; width:100%; }.arcade-insert b { font-size:23px; }.arcade-insert span { font-size:9px; }.attract-copy > small { font-size:10px; margin-top:14px; }.arcade-credit { font-size:8px; bottom:4px; width:100%; text-align:center; left:0; }
  .attract-type { font-size:clamp(42px,12vw,70px); top:5%; }.attract-band img { height:75%; width:39%; }.attract-shiba { left:-1%; bottom:0; }.attract-raccoon { left:22%; bottom:2%; }.attract-cat { right:-4%; bottom:0; }.attract-otter { right:10%; top:0; }.attract-seal { width:58px; height:58px; font-size:14px; }
  .sl-menu { grid-template-columns:1fr; grid-template-rows:25% 75%; }.sl-menu-art { grid-column:1; grid-row:1; }.sl-menu-stage-label { top:16%; left:5%; }.sl-menu-stage-label b { font-size:27px; }.sl-menu-stage-label > span { display:none; }.sl-menu-band { inset:0 0 0 34%; }.sl-ip-performer { width:42%; height:90%; bottom:0; }.sl-ip-d { left:-5%; bottom:0; }.sl-ip-f { left:22%; bottom:0; }.sl-ip-j { right:-7%; bottom:0; }.sl-ip-k { bottom:27%; right:12%; height:68%; }.sl-menu-art::after { height:45%; bottom:-18%; }
  .sl-menu-copy { grid-column:1; grid-row:2; padding:32px 20px 12px; justify-content:center; }.sl-menu-nav { top:4px; left:20px; }.sl-player-id-button { top:4px; right:20px; }.sl-home-link,.sl-player-id-button { font-size:10px; }#sl-title { display:none; }
  .sl-song-line { padding:9px 0 6px; }.sl-song-line strong { font-size:26px; }.sl-song-line small { font-size:10px; margin-top:5px; }.arcade-song-navigation button { font-size:11px; min-height:28px; }.arcade-song-extras { margin-bottom:10px; min-height:26px; font-size:11px; }
  .sl-flow-label { font-size:11px; margin-bottom:6px; }.sl-difficulty-option { min-height:60px; padding:8px 3px; }.sl-difficulty-option b { font-size:17px; }.sl-difficulty-option span { font-size:9px; }.sl-difficulty-copy { font-size:10px; min-height:2.9em; margin:8px 0 10px; }.sl-start { min-height:58px; padding:8px 12px; }.sl-start > span { font-size:22px; }.sl-start small { font-size:9px; }.sl-menu-help { font-size:10px; margin-top:8px; }
  .sl-song-dialog { padding:16px 12px; gap:10px; }.sl-song-dialog-head h2 { font-size:22px; }.sl-song-dialog-head p { font-size:9px; }.sl-song-categories { gap:4px; padding-bottom:8px; }.sl-song-categories button { font-size:12px; min-height:38px; }.sl-song-wheel-shell { grid-template-columns:24px minmax(0,1fr) 24px; }.sl-song-step { font-size:0; }.sl-song-step span { font-size:16px; }.sl-song-list { padding-inline:6px; }.sl-song-card { padding:14px 10px; grid-template-columns:28px minmax(0,1fr) 36px; min-height:84px; }.sl-song-number { font-size:12px; }.sl-song-card-copy strong { font-size:20px; }.sl-song-card-copy small { font-size:9px; }.sl-song-record { font-size:9px; }.sl-song-record b { font-size:23px; }.sl-song-dialog-foot { font-size:9px; }
  .sl-game { padding:0 10px 8px; grid-template-rows:62px minmax(0,1fr) 92px; }.sl-game-hud { grid-template-columns:34px minmax(0,1fr) 86px 64px; gap:8px; }.sl-section-cue { display:none; }.sl-icon-button { width:32px; height:36px; }.sl-stage-now-playing strong { font-size:13px; }.sl-stage-now-playing > span { display:none; }.sl-stage-now-playing small { font-size:9px; }.sl-hud-stat strong { font-size:17px; }.sl-hud-stat span { font-size:9px; }.sl-lane-viewport { inset:64px 0 0; }.sl-band { height:60px; display:flex; justify-content:center; gap:10px; }.sl-performer { position:relative; inset:auto; height:60px; width:22%; }.sl-performer figcaption,.sl-neighbour-note { display:none; }.sl-hit-controls { width:100%; gap:6px; }.sl-hit-key kbd { font-size:22px; }.sl-countdown { font-size:76px; }.sl-judge strong { font-size:18px; }
  .sl-result { grid-template-columns:1fr; grid-template-rows:116px minmax(0,1fr); padding:14px 18px; gap:14px; }.sl-result-grade { padding:10px 20px; display:grid; grid-template-columns:30px 1fr auto; border-radius:8px; gap:14px; }.sl-result-grade > p { writing-mode:vertical-rl; font-size:9px; letter-spacing:.06em; }.sl-result-grade > strong { font-size:90px; line-height:1; }.sl-grade-best { font-size:12px; margin:0 0 9px; }.sl-grade-stats { gap:16px; }.sl-grade-stats dd { font-size:14px; }.sl-grade-stats dt { font-size:9px; }
  .sl-result-report { justify-content:flex-start; overflow:auto; }.sl-result-song { font-size:11px; }.sl-result-report h2 { font-size:23px; margin:5px 0 12px; }.sl-result-summary { gap:10px; margin-bottom:10px; }.sl-result-summary strong { font-size:24px; }.sl-result-summary span { font-size:10px; }.sl-judgement-list { gap:6px; padding:9px 0; }.sl-judgement-list div { flex-direction:column; align-items:flex-start; gap:2px; font-size:8px; }.sl-judgement-list dd { font-size:14px; }.sl-result-tip { font-size:11px; margin:8px 0 12px; }.sl-result-actions { gap:6px; }.sl-result-actions button { font-size:12px; padding:8px; min-height:42px; }.sl-result-actions .sl-panel-primary { flex-basis:100%; }.arcade-result-details { margin-top:8px; font-size:11px; }.arcade-result-details[open] { max-height:none; flex-shrink:0; }
  .sl-ranking-screen { padding:18px; }.sl-ranking-header { display:block; }.sl-ranking-header h2 { font-size:25px; }.sl-ranking-header > span,.sl-ranking-header > strong { display:block; margin-top:8px; }.sl-ranking-columns,.sl-result-ranking li { grid-template-columns:32px minmax(0,1fr) 80px; gap:8px; padding:12px 8px; font-size:12px; }.arcade-dialog { padding:18px; }.arcade-dialog h2 { font-size:18px; }
}
@media (max-width:760px) and (max-height:720px) {
  .sl-menu { grid-template-rows:18% 82%; }.sl-menu-stage-label b { font-size:21px; }.sl-menu-copy { padding-top:28px; }.sl-song-line strong { font-size:22px; }.sl-difficulty-copy { display:none; }.sl-start { margin-top:12px; }.arcade-song-extras { margin-bottom:6px; }.sl-menu-help { margin-top:6px; }.sl-result { grid-template-rows:86px minmax(0,1fr); gap:10px; padding:10px 16px; }.sl-result-grade > strong { font-size:70px; }.sl-result-report h2 { font-size:20px; margin-bottom:8px; }
}
@media (max-width:760px) and (min-height:501px) {
  .sl-menu-stage-label b { font-size:23px; }
  .sl-menu-band { left:43%; }
}
@media (max-height:500px) and (orientation:landscape) {
  :root { --header:40px; --footer:28px; }.sl-menu { grid-template-columns:40% 60%; grid-template-rows:1fr; }.sl-menu-art { grid-row:1; grid-column:1; }.sl-menu-copy { grid-row:1; grid-column:2; padding:30px 20px 8px; overflow:auto; justify-content:flex-start; }#sl-title,.sl-difficulty-copy,.sl-menu-help { display:none; }.sl-song-line strong { font-size:21px; }.arcade-song-extras { margin-bottom:4px; }.sl-difficulty-option { min-height:45px; padding:3px; }.sl-start { min-height:44px; margin-top:8px; }.sl-menu-stage-label b { font-size:26px; }.sl-menu-band { inset:20% 0 0; }.sl-game { grid-template-rows:48px minmax(0,1fr) 60px; }.sl-lane-viewport { inset:0 18%; }.sl-band { display:none; }.sl-hit-controls { width:64%; }.sl-hit-key kbd { font-size:17px; }.sl-hit-key span { display:none; }.arcade-attract { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }.attract-copy { grid-column:1; grid-row:1; }.attract-band { grid-column:2; grid-row:1; }.attract-copy h1 { font-size:28px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.sl-low-fx *, .sl-low-fx *::before, .sl-low-fx *::after { animation:none !important; transition:none !important; filter:none !important; }