:root {
  --page: #f3eee5;
  --surface: #ffffff;
  --surface-soft: #f5f7f9;
  --ink: #2f3036;
  --muted: #6f737c;
  --line-soft: #d9dee5;
  --rose: #d85f88;
  --rose-soft: #f8dce5;
  --yellow: #f4df32;
  --shadow: rgb(85 96 112 / .14);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--page); color: var(--ink); font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, a { color: inherit; font: inherit; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .38; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
button:active:not(:disabled), a:active { transform: translateY(1px) scale(.985); }
[hidden] { display: none !important; }

.game-shell {
  display: grid;
  width: min(100%, 52rem);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: max(.2rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) max(.25rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
  overflow: hidden;
  grid-template-rows: 44px 66px minmax(0, 1fr) 22px;
  gap: .25rem;
}

.game-header {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4.8rem;
  align-items: center;
}
.game-header h1 { margin: 0; font-size: clamp(1rem, 4.8vw, 1.35rem); font-weight: 900; letter-spacing: -.055em; text-align: center; white-space: nowrap; }
.home-link, .text-button { display: inline-flex; min-width: 44px; min-height: 44px; padding: 0; align-items: center; border: 0; background: transparent; font-size: .66rem; font-weight: 850; letter-spacing: .035em; text-decoration: none; }
.text-button { justify-self: end; justify-content: flex-end; }

.score-strip { display: grid; min-height: 0; grid-template-columns: minmax(6rem, .9fr) minmax(0, 2.1fr); align-items: stretch; }
.score-strip p { margin: 0; }
.score-strip span { color: var(--muted); font-size: .56rem; font-weight: 850; letter-spacing: .07em; }
.score-strip strong { font-variant-numeric: tabular-nums; line-height: 1; }
.hud-time { display: grid; padding: .1rem .2rem; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: center; column-gap: .4rem; }
.hud-time span { grid-row: 1; }
.hud-time strong { grid-column: 1 / -1; grid-row: 2; font-size: clamp(2.5rem, 12vw, 3rem); font-weight: 900; letter-spacing: -.08em; }
.hud-secondary { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-radius: 12px; background: rgb(255 255 255 / .56); }
.hud-secondary p { display: grid; min-width: 0; padding: .35rem .25rem; place-items: center; gap: .2rem; }
.hud-secondary strong { font-size: 1rem; font-weight: 850; }

.game-main { display: grid; min-width: 0; min-height: 0; padding: .15rem 0; overflow: hidden; grid-template-rows: 90px minmax(0, 1fr) auto; gap: .45rem; }
.order-panel { display: grid; min-width: 0; min-height: 0; padding: .38rem .45rem .45rem; grid-template-rows: 16px minmax(0, 1fr); gap: .25rem; border-radius: 18px; background: rgb(255 255 255 / .62); }
.order-heading { display: flex; align-items: center; justify-content: space-between; }
.order-heading h2, .order-heading p, .stage-heading h2, .polaroid h2 { margin: 0; font-size: .58rem; font-weight: 900; letter-spacing: .065em; }
.order-heading p { color: var(--muted); }
.order-dolls { display: grid; min-height: 0; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.order-doll { display: grid; min-width: 0; min-height: 0; padding: .12rem; place-items: center; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 3px 10px var(--shadow); }
.order-doll img { width: 88%; height: 88%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }

.stage { position: relative; display: grid; min-width: 0; min-height: 0; padding: .1rem 0; overflow: hidden; grid-template-rows: 18px minmax(0, 1fr) 58px; gap: .4rem; }
.stage-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; padding: 0 .2rem; }
.stage-heading p { margin: 0; color: var(--rose); font-size: .58rem; font-weight: 900; letter-spacing: .035em; }
.lanes { display: grid; min-width: 0; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .42rem; }
.lane-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: .25rem 3.8rem .25rem 2.2rem;
  overflow: hidden;
  touch-action: manipulation;
  grid-template-columns: 1fr minmax(7rem, 2.4fr) 1fr;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 5px 14px var(--shadow);
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.lane-button:hover:not(:disabled) { box-shadow: 0 7px 18px var(--shadow); }
.lane-button.is-frozen { border-color: rgb(216 95 136 / .34); background: var(--rose-soft); }
.lane-number { position: absolute; left: .85rem; color: var(--muted); font-size: .62rem; font-weight: 900; }
.lane-window { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; grid-column: 2; place-items: center; overflow: hidden; border-radius: 12px; }
.lane-window::before, .lane-window::after { position: absolute; z-index: 2; left: calc(50% - 2px); width: 4px; height: 27%; border-radius: 3px; background: var(--rose); content: ""; pointer-events: none; }
.lane-window::before { top: 8%; }
.lane-window::after { bottom: 8%; }
.lane-window img {
  z-index: 1;
  width: min(94%, 8rem);
  height: 96%;
  object-fit: contain;
  transform: translateX(var(--lane-x, 0));
  transition: filter 160ms ease;
}
.lane-button.is-frozen .lane-window img { filter: saturate(.92); }
.lane-next { position: absolute; z-index: 3; top: 50%; right: .48rem; display: grid; width: 50px; height: 50px; padding: .16rem; place-items: center; border-radius: 12px; background: var(--surface-soft); box-shadow: 0 2px 8px var(--shadow); transform: translateY(-50%); }
.lane-next span { position: absolute; top: .18rem; color: var(--muted); font-size: .42rem; font-weight: 900; }
.lane-next img { width: 90%; height: 82%; margin-top: .35rem; object-fit: contain; }
.lane-rating { display: none; }
.snap-button, .start-button, #download-photo { min-height: 44px; border: 0; border-radius: 14px; background: var(--rose); color: #fff; font-weight: 900; letter-spacing: .055em; box-shadow: 0 5px 14px var(--shadow); transition: filter 160ms ease, transform 120ms ease; }
.snap-button { width: 100%; min-height: 58px; font-size: 1.15rem; }
.snap-button:disabled { opacity: 1; background: var(--line-soft); color: var(--muted); box-shadow: none; }
.snap-button:hover:not(:disabled), .start-button:hover, #download-photo:hover { filter: brightness(.96); }

.lemon-crossing { position: absolute; z-index: 4; inset: 24px 0 64px; pointer-events: none; animation: lemon-cross 1.15s linear infinite; }
.lemon-crossing span { position: absolute; top: 42%; left: 0; width: 52px; height: 34px; border-radius: 18px; background: var(--rose); transform: rotate(-8deg); box-shadow: 0 3px 10px var(--shadow); }
.lemon-crossing span::before { position: absolute; top: -8px; left: 24px; width: 16px; height: 9px; border-radius: 9px 2px 9px 2px; background: var(--ink); content: ""; }

.polaroid { display: grid; min-width: 0; min-height: 64px; padding: .35rem; grid-template-columns: minmax(7rem, 1.2fr) minmax(5.5rem, .9fr) 64px; align-items: center; gap: .45rem; border-radius: 18px; background: var(--surface); box-shadow: 0 5px 14px var(--shadow); }
.photo-preview { display: grid; min-width: 0; height: 54px; padding: .1rem; grid-template-columns: repeat(3, 1fr); gap: .1rem; border-radius: 12px; background: var(--surface-soft); }
.photo-preview img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.photo-copy { min-width: 0; }
.polaroid p { margin: .22rem 0 0; overflow: hidden; color: var(--rose); font-size: .62rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
#download-photo { width: 64px; min-width: 44px; padding: .2rem; font-size: .62rem; }
.polaroid.has-photo { animation: photo-flash 220ms ease-out; }

.live-status { min-height: 22px; margin: 0; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 800; letter-spacing: .035em; line-height: 22px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.live-status[data-kind="bad"], .live-status[data-kind="good"] { color: var(--rose); }

.screen { position: fixed; z-index: 10; inset: 0; display: flex; padding: max(.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--page); text-align: center; }
.screen-nav { position: absolute; top: max(.25rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); left: max(1rem, env(safe-area-inset-left)); display: flex; min-height: 44px; align-items: center; justify-content: space-between; }
.screen-nav a, .screen-nav button, .screen-home { display: inline-flex; min-width: 44px; min-height: 44px; padding: 0; align-items: center; border: 0; background: transparent; font-size: .66rem; font-weight: 850; text-decoration: none; }
.screen-nav button { justify-content: flex-end; }
.screen-home { position: absolute; top: max(.25rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); }
.screen > p { max-width: 28rem; margin: .35rem 0; font-size: .68rem; font-weight: 850; letter-spacing: .065em; }
.screen h2 { margin: .25rem 0; font-size: clamp(3.4rem, 17vw, 7rem); font-weight: 950; letter-spacing: -.085em; line-height: .78; }
.start-button { width: min(17rem, 82vw); min-height: 54px; margin-top: .9rem; border: 2px solid #342721; background: var(--yellow); color: #342721; box-shadow: none; font-size: 1rem; }
.booth-mark { display: grid; width: 146px; height: 98px; padding: 10px; grid-template-columns: repeat(3, 1fr); gap: 7px; border-radius: 24px; background: var(--surface); box-shadow: 0 7px 20px var(--shadow); }
.booth-mark span { border-radius: 18px; background: var(--rose-soft); }
.final-score { display: grid; width: min(22rem, 90vw); margin: .9rem 0 0; grid-template-columns: repeat(3, 1fr); }
.final-score dt { color: var(--muted); font-size: .6rem; font-weight: 850; }
.final-score dd { margin: .2rem 0 0; font-size: 1.7rem; font-weight: 900; }
.photo-gallery {
  width: min(36rem, 100%);
  min-width: 0;
  margin-top: .65rem;
  overflow: hidden;
  flex: 0 0 auto;
  text-align: left;
}
.photo-gallery h3 { margin: 0; font-size: .62rem; font-weight: 900; letter-spacing: .065em; }
.photo-gallery-list {
  display: flex;
  width: 100%;
  margin: .3rem 0 0;
  padding: 0 .15rem .3rem;
  gap: .5rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  list-style: none;
}
.photo-gallery-list > li { flex: 0 0 min(11rem, 72vw); min-width: 0; scroll-snap-align: start; }
.photo-gallery-card { display: grid; height: 112px; min-width: 0; padding: .4rem; grid-template-rows: auto minmax(0, 1fr) auto; gap: .18rem; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: 0 3px 10px var(--shadow); }
.photo-gallery-card h4, .photo-gallery-card p { margin: 0; font-size: .56rem; font-weight: 900; letter-spacing: .035em; }
.photo-gallery-card p { overflow: hidden; color: var(--rose); text-overflow: ellipsis; white-space: nowrap; }
.photo-gallery-dolls { display: grid; min-width: 0; min-height: 0; grid-template-columns: repeat(3, 1fr); gap: .15rem; }
.photo-gallery-card img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.game-over-actions { display: grid; width: min(17rem, 82vw); margin-top: .9rem; gap: .45rem; }
.game-over-actions .start-button { width: 100%; margin-top: 0; }
.final-save-button {
  width: 100%;
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid rgb(216 95 136 / .42);
  border-radius: 14px;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .045em;
  box-shadow: 0 3px 10px var(--shadow);
}
.final-save-button:hover { filter: brightness(.97); }

.how-dialog { width: min(32rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: .85rem; overflow: auto; border: 1px solid var(--line-soft); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 34px var(--shadow); }
.how-dialog::backdrop { background: rgb(47 48 54 / .58); }
.dialog-top { display: flex; min-height: 44px; align-items: center; justify-content: space-between; }
.dialog-top h2 { margin: 0; font-size: 1.15rem; font-weight: 900; }
.dialog-top button { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: .65rem; font-weight: 850; }
.how-dialog ol { margin: .5rem 0; padding: 0; list-style: none; }
.how-dialog li { display: grid; min-height: 56px; grid-template-columns: 4rem 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); text-align: left; }
.how-dialog li b { font-size: .68rem; }
.how-dialog li p, .help-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.help-note { font-weight: 700; }

@keyframes lemon-cross { from { transform: translateX(-64px); } to { transform: translateX(calc(100% + 64px)); } }
@keyframes photo-flash { 0% { opacity: .45; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 24.375rem) {
  .game-shell { padding-right: max(.55rem, env(safe-area-inset-right)); padding-left: max(.55rem, env(safe-area-inset-left)); }
  .lane-button { padding-right: 3.65rem; padding-left: 1.9rem; grid-template-columns: .4fr minmax(6.5rem, 2.5fr) .4fr; }
  .lane-number { left: .7rem; }
  .lane-next { right: .4rem; }
  .photo-gallery-list > li { flex: 0 0 min(10.5rem, 76vw); }
}

@media (orientation: landscape) and (max-height: 30rem) and (min-width: 40rem) {
  .game-shell { width: 100%; padding-top: max(.1rem, env(safe-area-inset-top)); grid-template-rows: 38px 42px minmax(0, 1fr) 18px; gap: .15rem; }
  .game-header { grid-template-columns: 4rem minmax(0, 1fr) 4.8rem; }
  .game-header h1 { font-size: 1rem; }
  .score-strip { grid-template-columns: 7.5rem minmax(0, 18rem); justify-content: center; }
  .hud-time { grid-template-columns: auto 1fr; grid-template-rows: 1fr; gap: .45rem; }
  .hud-time span, .hud-time strong { grid-column: auto; grid-row: 1; }
  .hud-time strong { font-size: 2rem; }
  .hud-secondary p { padding: .15rem; grid-template-columns: auto auto; justify-content: center; gap: .25rem; }
  .game-main { grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage target" "stage photo"; gap: .35rem; }
  .order-panel { grid-area: target; width: 100%; height: 126px; min-height: 0; padding: .3rem; align-self: start; grid-template-rows: 15px minmax(0, 1fr); }
  .order-dolls { gap: .25rem; }
  .order-doll img { width: 82%; height: 82%; }
  .stage { grid-area: stage; padding: 0; grid-template-rows: 16px minmax(0, 1fr) 50px; gap: .25rem; }
  .lanes { gap: .28rem; }
  .lane-button { padding: .12rem 3.45rem .12rem 1.8rem; grid-template-columns: .5fr minmax(7rem, 2.6fr) .5fr; }
  .lane-number { left: .65rem; }
  .lane-window img { width: min(60px, 100%); height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
  .lane-next { right: .35rem; width: 44px; height: 44px; }
  .lane-rating { right: 3.25rem; bottom: .2rem; }
  .snap-button { min-height: 50px; }
  .polaroid { grid-area: photo; min-height: 60px; padding: .25rem; grid-template-columns: minmax(5.5rem, 1.2fr) minmax(4rem, .8fr) 54px; gap: .25rem; }
  .photo-preview { height: 50px; }
  .polaroid p { line-height: 1.05; text-overflow: clip; white-space: normal; }
  #download-photo { width: 54px; }
  .live-status { min-height: 18px; line-height: 18px; }
  .intro-screen { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; grid-template-rows: 1fr auto auto 1fr; gap: .2rem 1rem; }
  .intro-screen .screen-nav { grid-column: 1 / -1; }
  .booth-mark { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .intro-screen > p:first-of-type { grid-column: 2; grid-row: 1; align-self: end; }
  .intro-screen h2 { grid-column: 2; grid-row: 2; font-size: clamp(3rem, 9vw, 4.8rem); }
  .intro-screen > p:last-of-type { grid-column: 2; grid-row: 3; }
  .intro-screen .start-button { grid-column: 3; grid-row: 1 / -1; width: 140px; margin: 0; align-self: center; }
  .game-over-screen h2 { font-size: clamp(3rem, 10vw, 5rem); }
  .game-over-screen { padding-top: max(.3rem, env(safe-area-inset-top)); padding-bottom: max(.3rem, env(safe-area-inset-bottom)); }
  .game-over-screen > p { margin: .15rem 0; }
  .game-over-screen .final-score { margin-top: .35rem; }
  .photo-gallery { width: min(40rem, calc(100vw - 2rem)); margin-top: .35rem; }
  .photo-gallery-list { margin-top: .2rem; padding-bottom: .15rem; }
  .photo-gallery-list > li { flex-basis: 9rem; }
  .photo-gallery-card { height: 78px; padding: .25rem .35rem; gap: .08rem; }
  .photo-gallery-card h4, .photo-gallery-card p { font-size: .5rem; }
  .game-over-actions { display: flex; width: auto; margin-top: .65rem; }
  .game-over-actions .start-button { width: 140px; }
  .final-save-button { width: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lane-window img { transform: none; }
}

.photo-splash:not([hidden]) { position: fixed; z-index: 100; inset: 0; display: grid; min-height: 100dvh; place-items: center; align-content: center; gap: .7rem; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: var(--page); color: var(--ink); text-align: center; }
.photo-splash-frame { display: grid; width: min(88vw, 900px); max-height: 78dvh; place-items: end start; padding: clamp(.5rem, 2vw, 1rem); border: 8px solid var(--ink); background: var(--surface); }
.photo-splash-frame canvas { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; }
.photo-splash-frame h2 { margin: 0; font-size: clamp(1rem, 3vw, 2rem); }
.photo-splash p { margin: 0; font-size: clamp(1.1rem, 4vw, 2.6rem); font-weight: 900; }
@media (orientation: portrait) { .photo-splash-frame { width: min(94vw, 900px); } }
@media (prefers-reduced-motion: reduce) { .photo-splash-frame { transform: none !important; } }