/* The original, dark presentation keeps its return link. */
:root[data-mode="omote"] .ura-only,
:root[data-mode="ura"] .omote-only { display: none; }
.eyebrow b { font-weight: inherit; }
:root[data-mode="ura"] .start-actions:has(.mode-link:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mode-link {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 9px; border: 1px solid #9a7fb0; border-radius: 8px;
  color: #f6e2f5; background: #39294d; font-size: 12px; text-decoration: none; white-space: nowrap;
}
.mode-link:hover { background: #523465; }
.mode-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.result-actions .mode-link { grid-column: 1 / -1; }

@font-face {
  font-family: "Pants Cover";
  src: url("./assets/display.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root[data-mode="omote"] {
  color-scheme: light;
  --bg: #fff1cb;
  --paper: #fff8e6;
  --ink: #352237;
  --cream: #3d263d;
  --muted: #624354;
  --line: #5e3d53;
  --amber: #f9c457;
  --pink: #8a466d;
  --violet: #dfbcfa;
  --jam: #673594;
  color: var(--ink);
  background: var(--bg);
}
:root[data-mode="omote"] body {
  background: radial-gradient(circle, #bd8a5127 .7px, transparent 1px) 0 0/8px 8px,
    radial-gradient(ellipse at 50% 0%, #fff9dd, transparent 65%), var(--bg);
}
:root[data-mode="omote"] .game {
  width: min(100%, 1000px); height: auto; padding: max(16px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
}
:root[data-mode="omote"] .masthead { align-items: center; border: 0; margin-bottom: 8px; padding-bottom: 2px; }
:root[data-mode="omote"] .eyebrow { color: #604250; letter-spacing: .075em; font-size: 11px; }
:root[data-mode="omote"] .eyebrow span { background: #ba5268; box-shadow: none; rotate: 0deg; border-radius: 50%; }
:root[data-mode="omote"] .title-lockup { position: relative; font-size: clamp(29px, 6.4vw, 62px); }
:root[data-mode="omote"] h1 {
  color: var(--jam); text-shadow: 1px 1px 0 #fff8e6;
  font: 400 1em/1.16 "Pants Cover", var(--display); letter-spacing: -.055em;
}
:root[data-mode="omote"] h1 span { color: inherit; margin-left: .035em; }
:root[data-mode="omote"] .title-mode-switch {
  /* Center of the handakuten in the Pants Cover font's ぱ glyph. */
  position: absolute; z-index: 1; left: .865em; top: .18em;
  width: max(28px, .64em); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; color: var(--jam); touch-action: manipulation;
}
:root[data-mode="omote"] .title-mode-switch::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: .34em; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
}
:root[data-mode="omote"] .title-mode-switch:hover::before { box-shadow: 0 0 0 2px #67359466; }
:root[data-mode="omote"] .title-mode-switch:focus-visible { outline: 2px solid var(--jam); outline-offset: 1px; }
:root[data-mode="omote"] .scores { gap: 6px; }
:root[data-mode="omote"] .scores p { min-width: 70px; padding: 5px 9px; border: 1.5px solid var(--ink); background: var(--amber); border-radius: 7px; }
:root[data-mode="omote"] .scores p:last-child { background: var(--paper); }
:root[data-mode="omote"] .scores b { color: var(--ink); }
:root[data-mode="omote"] .show { grid-template: clamp(208px, calc(100svh - 322px), 493px) auto / minmax(0, 1fr); gap: 12px; }
:root[data-mode="omote"] .stage {
  container-type: size;
  background: #ffe0a2; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 #352237;
}
:root[data-mode="omote"] .stage-art {
  background: url("./assets/omote/bakery-wall.webp") center 65% / cover no-repeat,
    radial-gradient(ellipse at 50% 15%, #fff0ad, #ffca72 72%);
}
:root[data-mode="omote"] .character.omote-character {
  width: min(98%, 123cqh); aspect-ratio: 3 / 2; height: auto;
  left: 50%; bottom: 12%; translate: -50% 0; filter: none; pointer-events: none;
}
.chef-frame { width: 100%; height: 100%; display: block; }
:root[data-mode="omote"] .omote-character .scene-prop { padding: 0; border: 0; background: transparent; box-shadow: none; bottom: auto; height: auto; }
:root[data-mode="omote"] .omote-character .scene-prop--bread { width: 24%; left: 14%; top: 60%; transform: translate(-50%, -97%) rotate(-5deg); }
:root[data-mode="omote"] .omote-character .scene-prop--pants { width: 21%; left: 78%; right: auto; top: 51%; transform: rotate(4deg); }
:root[data-mode="omote"] .stage-counter {
  height: 15%; border-top: 3px solid #6d3c41; box-shadow: inset 0 3px 0 #ffdc8f, 0 -2px 0 #ffc778;
  background: radial-gradient(ellipse at 50% 39%, #a9593433 0 13%, transparent 14%),
    repeating-linear-gradient(1deg, transparent 0 14px, #943e241b 15px 16px),
    linear-gradient(#f4ad62 0 18%, #ec9455 18% 55%, #da7d48);
}
:root[data-mode="omote"] .frame-corners { --amber: #945969; opacity: .76; }
:root[data-mode="omote"] .stage-status { background: #fff2ce; border: 1px solid #946963; color: #533b4c; }
:root[data-mode="omote"] .stage-status i { background: #bb536b; box-shadow: none; }
:root[data-mode="omote"] .game[data-phase="reveal"] .stage-status i { background: #a87112; box-shadow: none; }
:root[data-mode="omote"] .shutter {
  background: linear-gradient(90deg,#32213b48,transparent 22% 78%,#32213b48),
    repeating-linear-gradient(0deg,#674765 0 3px,#9a779a 3px 5px,#86638a 5px 21px,#704e72 21px 23px);
  box-shadow: inset 0 -2px 0 #d7a8bd, 0 7px 17px #4122327a;
}
:root[data-mode="omote"] .stage-lettering { color: #fff4d9; }
:root[data-mode="omote"] .game[data-phase="over"] .stage-lettering { color: #ffe3ea; }
:root[data-mode="omote"] .counts span { background: #fff0bd; border-color: var(--ink); color: var(--ink); }
:root[data-mode="omote"] .counts span:last-child { background: #ead5fa; border-color: var(--ink); }
:root[data-mode="omote"] .counts b { color: #513064; }

:root[data-mode="omote"] .controls { width: min(100%, 736px); margin-inline: auto; border: 0; box-shadow: none; background: none; padding: 0 3px 4px; }
:root[data-mode="omote"] .console-head { display: none; }
:root[data-mode="omote"] .prompt { color: var(--ink); font-size: clamp(14px, 2vw, 18px); padding-bottom: 5px; }
:root[data-mode="omote"] .game[data-phase="reveal"] .prompt { color: #52356b; }
:root[data-mode="omote"] .game[data-phase="over"] .prompt { color: #852f49; }
:root[data-mode="omote"] .track-picker { margin-bottom: 10px; }
:root[data-mode="omote"] .tracks { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
:root[data-mode="omote"] .track span { border: 1px solid #976974; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 #b681653d; font-size: clamp(10px,1.55vw,13px); }
:root[data-mode="omote"] .track small { color: #624354; }
:root[data-mode="omote"] .track input:checked + span { border: 1.5px solid var(--jam); background: #ecdbfb; color: #3c2355; box-shadow: 0 2px 0 #8f65aa5a; }
:root[data-mode="omote"] .start-actions { width: min(100%, 414px); margin-inline: auto; }
:root[data-mode="omote"] .button { border: 2px solid var(--ink); background: #ffcd61; box-shadow: 0 4px 0 var(--ink); }
:root[data-mode="omote"] .button.start { color: #fff8ec; background: #7743b1; }
:root[data-mode="omote"] .button.pants { color: #352237; background: #edc1e3; }
:root[data-mode="omote"] .replay { border: 1.5px solid #744e78; background: var(--paper); color: #513064; }
:root[data-mode="omote"] .replay:hover { background: #f3e1f9; }
:root[data-mode="omote"] .beats li { color: #583e4e; background: #fff8e7; border-color: #a77d73; }
:root[data-mode="omote"] .beats li.beat-listen { color: #123e38; background: #c9eee1; border-color: #2e7669; }
:root[data-mode="omote"] .beats li.beat-answer { color: #6b3c1d; border-color: #a16124; }
:root[data-mode="omote"] .beats li[data-active] { color: #fff8f2; background: #7241a2; box-shadow: none; }
:root[data-mode="omote"] .beats li.beat-listen[data-active] { color: #fff; background: #176856; border-color: #fafff9; box-shadow: 0 0 0 2px #176856, 0 0 14px #37b59399; }
:root[data-mode="omote"] .beats li.beat-answer[data-active] { color: #3b2529; background: #ffd259; border-color: #825023; }
:root[data-mode="omote"] .game[data-beat="8"][data-window="open"] .answer,
:root[data-mode="omote"] .game[data-picked="bread"] .answer.bread,
:root[data-mode="omote"] .game[data-picked="pants"] .answer.pants { outline-color: #78408f; }
:root[data-mode="omote"] .share-hint,
:root[data-mode="omote"] .share-status,
:root[data-mode="omote"] .share-links button,
:root[data-mode="omote"] .share-links a { color: #593366; }
:root[data-mode="omote"] .share-dialog { background: #fff1ce; border-color: #774e81; }

@media (max-width: 620px) {
  :root[data-mode="omote"] .game { padding: max(9px,env(safe-area-inset-top)) 11px max(12px,env(safe-area-inset-bottom)); }
  :root[data-mode="omote"] .masthead { gap: 3px; }
  :root[data-mode="omote"] .title-lockup { font-size: clamp(23px, 8.15vw, 43px); }
  :root[data-mode="omote"] .eyebrow { font-size: 9px; }
  :root[data-mode="omote"] .scores { gap: 4px; }
  :root[data-mode="omote"] .scores p { min-width: 44px; padding: 4px 3px; }
  :root[data-mode="omote"] .show { grid-template-rows: clamp(183px, min(95vw, calc(100svh - 247px)), 380px) auto; }
  :root[data-mode="omote"] .stage { border-width: 2px; border-radius: 12px; }
  :root[data-mode="omote"] .tracks { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :root[data-mode="omote"] .track span { min-height: 38px; font-size: 11px; }
  :root[data-mode="omote"] .stage-status { top: 8px; left: 8px; font-size: 8px; }
}
@media (max-width: 620px) and (max-height: 650px) {
  :root[data-mode="omote"] .show { grid-template-rows: clamp(175px, min(83vw, calc(100svh - 281px)), 350px) auto; }
}