:root {
  --page: #f3eee5;
  --paper: #f8f8f7;
  --paper-soft: #f1f2f4;
  --ink: #303238;
  --muted: #6f737b;
  --line: #cfd3d9;
  --pink: #d95f89;
  --pink-soft: #f5d8e2;
  --yellow: #f4df32;
  color-scheme: light;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; background: var(--page); color: var(--ink); }
button, a { color: inherit; font: inherit; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

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

.game-header { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; }
.game-header h1 { margin: 0; font-size: clamp(1rem, 4.8vw, 1.35rem); font-weight: 950; letter-spacing: -.055em; text-align: center; }
.game-header a, .game-header button, .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: .67rem; font-weight: 900; text-decoration: none; }
.game-header button, .screen nav button { justify-self: end; justify-content: flex-end; }

.game-body { display: grid; min-width: 0; min-height: 0; grid-template-rows: 122px minmax(0, 1fr); gap: .45rem; overflow: hidden; }
.side-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: 50px minmax(0, 1fr); gap: .35rem; }
.score-strip { display: grid; min-width: 0; grid-template-columns: 1.2fr repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.score-strip p { display: grid; min-width: 0; margin: 0; padding: .25rem; place-items: center; border-left: 1px solid var(--line); }
.score-strip p:first-child { border-left: 0; }
.score-strip span { color: var(--muted); font-size: .5rem; font-weight: 900; letter-spacing: .055em; }
.score-strip strong { font-size: .95rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.score-strip .time-cell strong { color: var(--pink); font-size: 1.45rem; line-height: .8; }

.order-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: 16px minmax(0, 1fr); gap: .2rem; }
.order-heading { display: flex; align-items: center; justify-content: space-between; }
.order-heading h2, .order-heading p { margin: 0; font-size: .56rem; font-weight: 950; letter-spacing: .055em; }
.order-heading p { color: var(--muted); }
.route-order { display: grid; min-width: 0; min-height: 0; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); gap: .35rem; list-style: none; }
.route-order li { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.route-order img {
  display: block;
  width: 58%;
  height: 88%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.route-order b { position: absolute; top: .18rem; left: .28rem; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--pink); color: #fff; font-size: .62rem; }
.route-order li.is-done { border-color: var(--pink); background: var(--pink-soft); }

.route-board {
  position: relative;
  container-type: size;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
.stroke-layer { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stroke-layer polyline { fill: none; stroke: var(--pink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.board-items { position: absolute; inset: 0; }
.board-item { position: absolute; width: min(var(--item-width), var(--item-height)); height: min(var(--item-width), var(--item-height)); transform: translate(-50%, -50%); }
.doll { z-index: 3; display: grid; padding: .15rem; place-items: center; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-soft); }
.doll img { width: 100%; height: 100%; object-fit: contain; }
.doll .number { position: absolute; top: -4px; left: -4px; display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid var(--paper); border-radius: 50%; background: var(--pink); color: #fff; font-size: .72rem; font-weight: 950; }
.doll.is-done { border-color: var(--pink); background: var(--pink-soft); }
.endpoint { z-index: 2; display: grid; place-items: center; color: var(--ink); font-size: .48rem; font-weight: 950; letter-spacing: .03em; }
.envelope { align-items: end; padding-bottom: 3px; border: 2px solid var(--ink); border-radius: 8px; background: var(--pink-soft); }
.envelope::before, .envelope::after { position: absolute; top: 8px; width: 2px; height: 42px; background: var(--ink); content: ""; transform-origin: top; }
.envelope::before { left: 7px; transform: rotate(-49deg); }
.envelope::after { right: 7px; transform: rotate(49deg); }
.mailbox { border: 2px solid var(--ink); border-radius: 24px 24px 9px 9px; background: var(--pink-soft); }
.mailbox::before { position: absolute; top: -12px; right: 9px; width: 5px; height: 22px; background: var(--pink); content: ""; }
.obstacle { z-index: 4; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper-soft); color: var(--muted); font-size: .48rem; font-weight: 950; text-transform: uppercase; }
.obstacle.tape { border-radius: 50%; }
.obstacle.tape::after { width: 42%; height: 42%; border: 2px solid var(--ink); border-radius: 50%; content: ""; }
.obstacle.lemon { border-radius: 52% 48% 54% 46%; background: var(--pink-soft); }
.obstacle.scissors { border-radius: 12px; }
.obstacle.scissors::before, .obstacle.scissors::after { position: absolute; width: 9px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; content: ""; }
.obstacle.scissors::before { transform: translate(-5px, 4px) rotate(35deg); }
.obstacle.scissors::after { transform: translate(5px, 4px) rotate(-35deg); }
.board-help { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.live-status { min-height: 24px; margin: 0; overflow: hidden; color: var(--muted); font-size: .6rem; font-weight: 900; line-height: 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.live-status[data-kind="bad"], .live-status[data-kind="good"] { color: var(--pink); }

.screen { position: fixed; z-index: 10; inset: 0; display: flex; padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.75rem, 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(.2rem, 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-home { position: absolute; top: max(.2rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); }
.screen > p { margin: .35rem 0; font-size: .68rem; font-weight: 900; letter-spacing: .055em; }
.screen h2 { margin: .25rem 0; font-size: clamp(3.2rem, 17vw, 7rem); font-weight: 950; letter-spacing: -.08em; line-height: .82; }
.start-button { width: min(17rem, 82vw); min-height: 54px; margin-top: .9rem; border: 2px solid #342721; border-radius: 14px; background: var(--yellow); color: #342721; font-size: 1rem; font-weight: 950; letter-spacing: .055em; }
.start-button:active { transform: translateY(1px) scale(.985); }
.letter-mark { position: relative; width: 148px; height: 96px; border: 3px solid var(--ink); border-radius: 14px; background: var(--pink-soft); overflow: hidden; }
.letter-mark::before, .letter-mark::after { position: absolute; top: 12px; width: 3px; height: 110px; background: var(--ink); content: ""; transform-origin: top; }
.letter-mark::before { left: 10px; transform: rotate(-54deg); }
.letter-mark::after { right: 10px; transform: rotate(54deg); }
.letter-mark span { position: absolute; z-index: 2; top: 26px; left: 58px; width: 30px; height: 27px; background: var(--pink); transform: rotate(45deg); }
.letter-mark span::before, .letter-mark span::after { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); content: ""; }
.letter-mark span::before { left: -15px; }
.letter-mark span::after { top: -15px; }
.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: 900; }
.final-score dd { margin: .2rem 0 0; font-size: 1.8rem; font-weight: 950; }

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

@media (max-width: 24.375rem) {
  .game-shell { padding-right: max(.45rem, env(safe-area-inset-right)); padding-left: max(.45rem, env(safe-area-inset-left)); }
  .game-body { grid-template-rows: 118px minmax(0, 1fr); }
  .doll { border-radius: 17px; }
  .board-help { max-width: 19ch; font-size: .46rem; }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .game-shell { width: 100%; grid-template-rows: 44px minmax(0, 1fr) 19px; gap: .15rem; }
  .game-body { grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: .4rem; }
  .side-panel { grid-template-rows: 82px minmax(0, 1fr); }
  .score-strip { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .score-strip p:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .score-strip p:nth-child(4) { border-top: 1px solid var(--line); }
  .route-order { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .route-order li { display: flex; padding-left: 1.25rem; align-items: center; justify-content: center; }
  .route-order img { width: 48px; height: 48px; }
  .route-order b { top: 50%; left: .2rem; transform: translateY(-50%); }
  .doll { border-radius: 16px; }
  .board-help { display: none; }
  .live-status { min-height: 19px; font-size: .56rem; line-height: 19px; }
  .screen h2 { font-size: clamp(3rem, 10vw, 5rem); }
  .intro-screen { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; grid-template-rows: 1fr auto auto 1fr; gap: .2rem 1rem; }
  .intro-screen nav { grid-column: 1 / -1; }
  .letter-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; }
  .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; }
}

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

.delivered-splash:not([hidden]) { position: fixed; z-index: 100; inset: 0; display: grid; min-height: 100dvh; place-items: center; align-content: center; gap: 1rem; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: var(--page); color: var(--ink); text-align: center; }
.postcard-paper { position: relative; width: min(82vw, 640px); padding: clamp(1rem, 4vw, 2rem); border: 2px solid var(--ink); background: var(--paper); transform: rotate(1.5deg); }
.delivered-splash-dolls { display: flex; min-height: clamp(180px, 38vh, 370px); align-items: end; justify-content: center; gap: clamp(2px, 2vw, 18px); }
.delivered-splash-dolls img { width: 30%; height: 100%; object-fit: contain; }
.postcard-stamp { position: absolute; right: 6%; top: 7%; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--ink); color: var(--rose); font-size: 1.8rem; }
.delivered-splash h2 { margin: 0; font-size: clamp(2.8rem, 11vw, 7rem); line-height: .85; }
@media (orientation: portrait) {
  .postcard-paper { width: min(92vw, 640px); }
  .delivered-splash-dolls { min-height: min(44vh, 370px); }
  .delivered-splash-dolls img { width: 38%; margin-inline: -2.5%; }
}
@media (prefers-reduced-motion: reduce) { .postcard-paper { transform: none; } }