/* Layout dimensions follow the chosen playing direction, including browsers
   whose screen-orientation API is unavailable. Pointer targets rotate with it. */
#app { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);container-type:size; }
#app.rotated { transform:translate(-50%,-50%) rotate(90deg);
  --safe-t:env(safe-area-inset-right,0px);--safe-r:env(safe-area-inset-bottom,0px);
  --safe-b:env(safe-area-inset-left,0px);--safe-l:env(safe-area-inset-top,0px); }
.title-cabinet { width:min(100%,calc((var(--app-h) - var(--safe-t) - var(--safe-b))*941/1672)); }
.landscape-brand { display:none; }
.settings-scroll { max-height:calc(var(--app-h)*.55); }
.options { display:flex;flex-direction:column; }
.options .settings-scroll { flex:1;min-height:0; }
.options>.primary,.options>.sheet-mark,.options>.sheet-kicker { flex-shrink:0; }
.welcome { position:absolute;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:20px;
  background:radial-gradient(ellipse at top,#66382e,#20161a 75%); }
.welcome-card { width:min(100%,510px);padding:26px;border:1px solid #d7a66d88;border-radius:20px;
  background:#261c20;box-shadow:0 14px 45px #0006;text-align:center; }
.welcome-brand { color:#e5be87;font-size:11px;letter-spacing:.2em;font-weight:750; }
.welcome h2 { font-size:clamp(21px,5cqw,29px);line-height:1.4;margin:14px 0 6px;text-wrap:balance; }
.welcome p { color:#d1c5c0;font-size:13px;line-height:1.6;margin:8px 0; }
.orientation-choices { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0; }
.orientation-choices button { min-height:124px;position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:14px 8px;border:1px solid #b1a09780;border-radius:12px;background:#ffffff05; }
.orientation-choices button[aria-pressed=true] { background:#f7c992;color:#302117;border:2px solid #ffe3ad; }
.orientation-choices strong { font-size:16px; }.orientation-choices small { font-size:10px;font-weight:800; }
.device-outline { display:block;border:2px solid currentColor;border-radius:5px;position:relative; }
.device-outline:after { content:"";position:absolute;left:35%;right:35%;bottom:3px;height:2px;background:currentColor; }
.portrait-icon { width:25px;height:40px; }.landscape-icon { width:48px;height:28px;margin:6px 0; }
.welcome-language { display:flex;justify-content:center;gap:6px; }.welcome-language button { min-width:95px;min-height:40px;
  padding:6px 12px;border-radius:7px;background:#ffffff0b;font-size:13px; }
.welcome-language button[aria-pressed=true] { color:#ffdb9b;box-shadow:inset 0 -2px #ffdb9b; }
.welcome .primary { width:100%;justify-content:center;background:#ffcb95;color:#321b16;margin-top:15px; }
.welcome-note { margin-top:14px!important; }
html[lang=en] .title-secondary { background:linear-gradient(#64221b,#3a1312);border:2px solid #d9a56b;color:#fff0cd; }
html[lang=en] .title-secondary .visually-hidden,
.landscape .title-control .visually-hidden { position:static;display:block;clip-path:none;width:auto;height:auto;overflow:visible;white-space:nowrap; }
html[lang=en] .title-secondary span { font-size:clamp(13px,3.8cqw,19px);font-weight:650; }

/* A phone held sideways: a wide playfield and compact controls, with the
   record artwork and song list side by side. */
.landscape .title-cabinet { width:100%;height:100%;aspect-ratio:auto;background-size:0 0; }
.landscape .title-cabinet:before { content:"";position:absolute;inset:6% 57% 6% 4%;
  background-image:inherit;background-position:center 48%;background-size:auto 265%;background-repeat:no-repeat;border:2px solid #b77f47;border-radius:18px;
  box-shadow:0 0 0 3px #371713,0 8px 30px #0008; }
.landscape .landscape-brand { position:absolute;display:flex;flex-direction:column;gap:9px;left:48%;right:5%;top:12%;color:#fff0c8; }
.landscape-brand>span { font-size:11px;letter-spacing:.25em;color:#edbd7b; }
.landscape-brand strong { font-size:clamp(23px,4cqw,40px);line-height:1.22;letter-spacing:.02em;font-weight:760; }
.landscape-brand i { font-size:10px;font-style:normal;letter-spacing:.10em;color:#d6a988; }
.landscape .title-start { left:48%;right:5%;top:49%;height:23%;width:auto;border:1px solid #ffe4b8;
  border-radius:8px;background:linear-gradient(110deg,#ffd29a,#f3a57f);color:#44190f;font-size:clamp(25px,4.8cqw,44px);
  font-weight:850;letter-spacing:.12em;box-shadow:0 0 14px #ffb26b45; }
.landscape .title-start:after { inset:0;width:auto;height:auto; }
.landscape .title-secondary { top:79%;height:14%;width:22%;border:1px solid #c69d71;
  border-radius:9px;background:#321819;color:#ffe7b8;font-size:15px;font-weight:650; }
.landscape #title-settings { left:48%; }.landscape #title-help { left:73%; }
.landscape .title-secondary span { font-size:15px; }
.landscape .jb-top { min-height:42px;padding:5px max(14px,var(--safe-r)) 5px max(14px,var(--safe-l)); }
.landscape #jb-title { font-size:24px; }.landscape .jb-position { font-size:14px; }
.landscape .jb-chassis { grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr);
  grid-template-rows:30px minmax(100px,1fr) 56px;gap:5px 12px;overflow:hidden;margin:0 10px max(8px,var(--safe-b));padding:0 10px 6px; }
.landscape .jb-brand { grid-area:1/1/2/3;min-height:0;padding:2px 4%; }
.landscape .jb-brand strong { font-size:13px; }.landscape .jb-brand small { display:none; }
.landscape .jb-window { grid-area:2/1;min-height:0; }
.landscape .jb-drive { grid-area:3/1;min-height:0;padding:0 6%; }
.landscape .jb-drive-rail { min-height:32px;height:32px; }
.landscape .jb-hint { font-size:9px;margin-top:1px; }
.landscape .jb-index { grid-area:2/2;min-height:0; }
.landscape .jb-row { min-height:43px;font-size:15px; }
.landscape .jb-foot { grid-area:3/2;padding:0 6px;display:flex;align-items:center; }
.landscape .jb-confirm { min-height:45px;height:45px;width:100%;font-size:18px; }
.landscape .jb-foot>.jb-screw { display:none; }
.landscape .ticket-header { min-height:42px;padding:0 3%; }
.landscape .ticket-header h1 { font-size:24px; }.landscape .nav-icon { height:40px;width:40px; }
.landscape .ticket-scroll { padding:6px 3% max(18px,var(--safe-b)); }
.landscape .concert-ticket { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.landscape .ticket-upper,.landscape .ticket-lower { padding:14px 18px; }
.landscape .ticket-upper { mask:none;clip-path:none;border-right:1px dashed #191d1b80; }
.landscape .ticket-upper:after { display:none; }
.landscape .ticket-mast { display:flex;align-items:flex-start;flex-direction:column-reverse;gap:8px;margin-top:12px; }
.landscape .ticket-jacket { width:clamp(58px,13cqw,100px); }
.landscape .ticket-mast h2 { font-size:clamp(24px,4.4cqw,43px);line-height:1.03; }
.landscape .ticket-mast h2>span.title-word { font-size:clamp(23px,4cqw,38px); }
.landscape .ticket-meta { font-size:12px;gap:3px;min-height:36px;margin-top:7px; }
.landscape #about-open { min-height:36px;font-size:12px; }
.landscape .ticket-section-title { margin:0; }.landscape .ticket-section-title h3 { margin:0;font-size:14px; }
.landscape .ticket-section-title span { font-size:12px; }
.landscape .mode-choice { min-height:36px;padding:5px 9px; }
.landscape .mode-choice b { font-size:17px; }.landscape .ticket-mode-level { font-size:14px; }
.landscape .ticket-stat { margin-top:8px; }.landscape .ticket-stat span { font-size:11px; }.landscape .ticket-stat strong { font-size:14px; }
.landscape .ticket-record { min-height:3px;font-size:10px; }
.landscape .ticket-play { min-height:44px;font-size:18px;padding:7px 12px;margin-top:6px; }
.landscape .ticket-help { font-size:12px;margin:6px 2px; }
.landscape #song-story p { font-size:15px;line-height:1.65; }.landscape .youtube-action { font-size:16px; }
.landscape #hud { padding:max(6px,var(--safe-t)) 3% 4px; }
.landscape .hud-main { grid-template-columns:minmax(0,1fr) auto 40px;gap:12px; }
.landscape .track-h strong { font-size:clamp(18px,3cqw,25px);letter-spacing:-.03em; }
.landscape .score-h b { font-size:23px; }.landscape .hud-main>button { height:30px; }
.landscape .hud-bottom { margin-top:2px;gap:20px; }.landscape .mode-badge { font-size:10px; }
.landscape .stage-photo { height:100%; }.landscape .stage-shade { background:linear-gradient(#10131b22,#10131b88 65%,#10131bf2); }
.landscape #combo { font-size:10px; }.landscape #combo b { font-size:23px; }
.landscape #judgement { font-size:20px; }.landscape #judgement small { font-size:9px; }
.landscape #fever-banner span { font-size:15px; }.landscape .pad img { position:absolute;inset:3% 4%;width:92%;height:94%;min-height:0;max-width:none;object-fit:fill; }
.landscape #count-in b { font-size:64px; }
.landscape #overlay { padding:8px max(15px,var(--safe-r)) 8px max(15px,var(--safe-l)); }
.landscape .sheet { max-width:760px;padding:16px 22px;border-radius:12px; }
.landscape .sheet h2 { font-size:25px; }.landscape .sheet-mark { margin-bottom:6px; }
.landscape .settings-scroll { max-height:calc(var(--app-h) - 148px);display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding-right:5px; }
.landscape .setting { margin:7px 0; }.landscape .setting label,.landscape .setting>span { font-size:12px; }
.landscape .photo-setting button { min-height:38px; }.landscape .options .primary { min-height:42px;margin-top:9px; }
.landscape #pause-sheet { max-width:520px; }.landscape #pause-sheet .sheet-row { min-height:39px; }
.landscape #pause-sheet .primary { min-height:44px; }.landscape .paused-track { margin:7px 0 10px; }
.landscape .title-help dl { margin:8px 0; }.landscape .title-help dt { margin-top:8px; }
.landscape .title-help dd { font-size:13px; }
.landscape .welcome { padding:12px; }.landscape .welcome-card { width:min(720px,96%);padding:16px 23px;display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:center; }
.landscape .welcome-brand { grid-column:1/3; }.landscape .welcome h2 { grid-column:1;grid-row:2;font-size:24px;margin:8px 0 0; }
.landscape #orientation-recommendation { grid-column:1;grid-row:3;font-size:12px; }
.landscape .orientation-choices { grid-column:2;grid-row:2/5;margin:10px 0;gap:9px; }
.landscape .orientation-choices button { min-height:121px; }.landscape .welcome-language { grid-column:1;grid-row:4; }
.landscape .welcome-note { grid-column:1/3;font-size:12px;margin:5px 0!important; }.landscape #welcome-continue { grid-column:1/3;min-height:43px;margin-top:5px; }
.landscape .result-inner { display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding:12px 4% max(16px,var(--safe-b));align-content:center; }
.landscape .section-line { grid-column:1/3; }.landscape .result-track { grid-column:1;margin:6px 0; }
.landscape .result-track h2 { font-size:19px; }.landscape .result-track img { width:44px; }
.landscape .result-verdict { grid-column:1;grid-row:3;margin:6px 0; }.landscape .result-verdict h1 { font-size:31px; }
.landscape .score-card { grid-column:2;grid-row:2/4;padding:8px 0;align-self:center; }
.landscape .score-card strong { font-size:43px; }.landscape #result-metrics { grid-column:2;grid-row:4;margin:6px 0; }
.landscape #result-counts { grid-column:2;grid-row:5;margin:5px 0; }
.landscape #result-unlock,.landscape #result-progress { grid-column:1;margin:3px 0;font-size:11px; }
.landscape #retry { grid-column:2;min-height:43px;margin-top:8px; }
.landscape #result-library { grid-column:1;min-height:43px;align-self:end;margin-top:8px; }