@font-face {
  font-family: 'Wanted Sans';
  src: url('./assets/WantedSansVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f9f3e9;
  --surface: #fffaf2;
  --surface-raised: #fffdf8;
  --ink: #49332c;
  --muted: #90756a;
  --line: #e9dace;
  --berry: #8d5261;
  --berry-dark: #663d48;
  --berry-light: #f1e1e1;
  --sage: #74856a;
  --radius: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { min-width: 280px; background: #e7d7ce; }
body {
  margin: 0;
  color: var(--ink);
  background: #e7d7ce;
  font-family: 'Wanted Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
button {
  transition: transform .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}
button:disabled { cursor: default; opacity: .43; }
button:active:not(:disabled) { transform: translateY(2px); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--berry-dark);
  outline-offset: 3px;
}
button svg { width: 20px; height: 20px; flex: none; vertical-align: middle; }
button:disabled:active { transform: none; }

.app-shell {
  width: min(100%, 520px);
  min-height: calc(100svh - 48px);
  margin: 24px auto;
  padding: 0 16px 20px;
  border: 1px solid #ffffff9c;
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 0 22px 70px #68463b20, 0 3px 10px #68463b0b;
  overflow: clip;
}
.masthead {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.brand img { width: 27px; height: 34px; }
.brand > span { font-size: 18px; font-weight: 850; letter-spacing: -.8px; }
.brand small, .small-note, .page-footer, .board-caption { display: none; }
.header-actions { display: flex; gap: 5px; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #d8c6b966;
  border-radius: 50%;
  background: #fffaf2bb;
  box-shadow: inset 0 1px 0 #fff;
}
.icon-button:hover { background: #f4e6dc; }

#app { min-height: 0; }
.work-heading { margin: 7px 0 13px; text-align: center; }
.work-heading h1 { margin: 0; font-size: 26px; font-weight: 850; letter-spacing: -1.2px; line-height: 1.25; }
.work-heading p { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.steps, .phase-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.steps li, .phase-nav li { min-width: 0; flex: 1; }
.steps button, .phase-nav button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  color: #a58c7f;
}
.steps .number, .phase-nav .number {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  background: #eaded2;
  color: #94786a;
}
.steps .active, .phase-nav .active { color: var(--berry-dark); background: #ecdad7; border-color: #e1c5c4; }
.steps .active .number, .phase-nav .active .number { color: #fff9f2; background: var(--berry); }
.steps .done, .phase-nav .done { color: var(--sage); }
.steps .done .number, .phase-nav .done .number { color: var(--sage); background: #e4e5d6; }
.steps button:disabled, .phase-nav button:disabled { opacity: .55; }

.workspace { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.art-column { position: relative; min-width: 0; padding-bottom: 26px; }
.canvas-wrap { width: 100%; margin: 0 auto; position: relative; border-radius: 23px; overflow: hidden; isolation: isolate; }
.canvas-wrap::after { content: none; }
.game-canvas { width: 100%; height: auto; display: block; aspect-ratio: 1; touch-action: none; border-radius: inherit; }
.package-canvas { aspect-ratio: 600 / 640; touch-action: auto; }
.selection-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
.stick-select {
  min-width: 70px;
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid #dfcaba;
  border-radius: 22px;
  background: #fffaf2;
  box-shadow: 0 3px 8px #674a3712, inset 0 1px 0 #fff;
  font-size: 12px;
  font-weight: 700;
  color: #977768;
}
.stick-select[aria-pressed='true'] { color: var(--berry-dark); background: #f0ddda; border-color: #b67e88; box-shadow: 0 2px 5px #76504c16, inset 0 1px 0 #fff8f3; }

.control-panel {
  position: relative;
  padding: 16px;
  border: 1px solid #ffffffa6;
  border-radius: 25px;
  background: #fffaf2;
  box-shadow: 0 7px 24px #6746350a, inset 0 1px 0 #fff;
}
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.section-label strong { color: var(--ink); font-size: 13px; font-weight: 800; }
.tiny-tag { padding: 4px 8px; border-radius: 12px; color: #98766a; background: #f0e5da; font-size: 10px; font-weight: 600; white-space: nowrap; }
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.choice {
  min-width: 0;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  padding: 9px 3px 8px;
  border: 1px solid #e7d7c9;
  border-radius: 17px;
  background: #fcf5eb;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #eadccf;
  font-size: 12px;
  font-weight: 750;
}
.choice:hover { background: #f6e9dc; border-color: #c9a494; }
.choice[aria-pressed='true'] { color: var(--berry-dark); background: #f1e0dd; border-color: #ab7680; box-shadow: inset 0 1px 0 #fff9f6, 0 3px 0 #c99ba0; }
.choice[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--berry);
  color: #fff8f2;
  font-size: 8px;
  font-weight: 850;
}
.choc-swatch {
  width: 33px;
  height: 31px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transform: rotate(-9deg);
  box-shadow: inset -3px -4px 1px #3d211c25, inset 2px 2px 1px #fff9e45c, 1px 3px 2px #73452a20;
}
.choc-swatch::after { content: ''; width: 22px; height: 20px; border: 1px solid #fff6dc70; border-bottom-color: #41221a20; border-right-color: #41221a20; border-radius: 4px; box-shadow: inset 1px 1px 1px #0000000a; }
.tool-icon { display: flex; align-items: center; justify-content: center; width: 33px; height: 31px; filter: drop-shadow(1px 3px 1px #67402e25); }
.tool-icon svg { width: 29px; height: 29px; }
.instruction { display: none; }
.divider { height: 1px; margin: 18px 0; background: var(--line); }
.primary {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border: 1px solid #7b4554;
  border-radius: 16px;
  color: #fffbf4;
  background: var(--berry);
  box-shadow: 0 4px 0 var(--berry-dark), inset 0 1px 0 #d4aab266;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}
.primary:hover:not(:disabled) { background: #7d4655; }
.primary:active:not(:disabled) { transform: translateY(3px); }
.primary > span { font-size: 21px; line-height: 1; font-weight: 400; }
.primary:disabled { color: #fffcf6; background: #c4a7a8; border-color: #c4a7a8; box-shadow: 0 3px 0 #b39799; opacity: .75; }
.primary.light { background: #f0dfce; color: var(--ink); border-color: #dfc5b0; box-shadow: 0 4px 0 #cdb09d, inset 0 1px 0 #fff7ee; }
.secondary {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #dfc9b8;
  border-radius: 15px;
  color: #765345;
  background: #fbf0e4;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #e9d7c6;
  font-size: 12px;
  font-weight: 750;
}
.secondary:hover:not(:disabled) { background: #f4e3d2; }
.secondary:disabled { box-shadow: none; }
.secondary svg { margin: 0; width: 17px; height: 17px; }
.text-button { min-height: 44px; padding: 12px 3px; border: 0; background: transparent; color: #977667; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.button-row { display: flex; gap: 8px; margin: 12px 0 0; }
.button-row > * { flex: 1; min-width: 0; }
.progress-copy { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 11px; color: #977667; }
.progress-copy strong { color: var(--berry); font-weight: 800; }
.hint { min-height: 16px; margin: 12px 0 0; color: #a08576; font-size: 10px; line-height: 1.5; text-align: center; }
.control-panel:has(#dip-button) { display: grid; grid-template-columns: 1fr 1.18fr; gap: 11px 9px; }
.control-panel:has(#dip-button) > .section-label,
.control-panel:has(#dip-button) > .choices,
.control-panel:has(#dip-button) > .progress-copy,
.control-panel:has(#dip-button) > .hint { grid-column: 1 / -1; margin: 0; }
.control-panel:has(#dip-button) > .section-label { order: 0; }
.control-panel:has(#dip-button) > .choices { order: 1; }
.control-panel:has(#dip-button) > .progress-copy { order: 2; padding: 2px 2px 0; }
.control-panel:has(#dip-button) > #dip-button { order: 3; }
.control-panel:has(#dip-button) > #next-step { order: 3; min-height: 48px; font-size: 13px; padding: 11px 13px; }
.control-panel:has(#dip-button) > .hint { order: 4; }
.control-panel:has(#dip-button) > .divider { display: none; }
.control-panel:has(#auto-decorate) > .divider { display: none; }
.control-panel:has(#auto-decorate) > .primary { margin-top: 13px; }
.control-panel:has(#auto-decorate) > .button-row { margin-top: 12px; }

.input-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
label { display: block; margin: 17px 0 8px; color: #8b695a; font-size: 12px; font-weight: 700; }
label #letter-count { float: right; font-size: 10px; font-weight: 500; color: #aa8b79; }
input, textarea { display: block; width: 100%; padding: 12px; border: 1px solid #e2cebb; border-radius: 13px; background: #fffdf8; color: var(--ink); font-size: 15px; outline-offset: 2px; }
input { min-height: 48px; }
textarea { min-height: 100px; line-height: 1.7; resize: vertical; }
input::placeholder, textarea::placeholder { color: #b09987; }
.swatch-row { display: flex; gap: 9px; }
.color-choice { position: relative; min-width: 0; min-height: 46px; flex: 1; padding: 8px; border: 1px solid #cfbda9; border-radius: 13px; font-size: 12px; font-weight: 750; box-shadow: inset 0 1px 0 #ffffff80; }
.color-choice[aria-pressed='true'] { outline: 2px solid var(--berry); outline-offset: 2px; }
.ribbon-choice { color: #fffaf0; }
body[data-stage='wrap'] .art-column,
.workspace:has(#to-name) .art-column { padding-bottom: 0; }
body[data-stage='wrap'] .canvas-wrap,
.workspace:has(#to-name) .canvas-wrap { max-width: 330px; }
body[data-stage='send'] .art-column,
.workspace:has(#share-button) .art-column { padding-bottom: 0; }
body[data-stage='send'] .canvas-wrap,
.workspace:has(#share-button) .canvas-wrap { max-width: 330px; }

.panel-title { margin: 0 0 12px; font-size: 24px; line-height: 1.3; letter-spacing: -.9px; font-weight: 850; overflow-wrap: anywhere; }
.panel-copy { margin: 0 0 19px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.share-badge { display: inline-flex; align-items: center; min-height: 27px; margin-bottom: 12px; padding: 5px 10px; border: 1px solid #d2d6be; border-radius: 20px; background: #f2f1e5; color: #748161; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.sealed-note { display: flex; align-items: center; gap: 10px; margin: 19px 0; padding: 13px; border-radius: 13px; background: #f2e7d9; color: #977667; font-size: 11px; line-height: 1.7; }
.sealed-note svg { width: 24px; height: 24px; flex: none; }
.preview-label { color: #aa8a76; font-size: 10px; line-height: 1.6; text-align: center; }
#new-gift { display: block; width: 100%; margin-top: 5px; }
.receipt-code { color: var(--muted); font-family: monospace; font-size: 10px; overflow-wrap: anywhere; }
.receive-layout { padding: 10px 0 0; }
.receive-layout .work-heading { margin-top: 4px; margin-bottom: 18px; }
.receive-layout h1 { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: -1px; overflow-wrap: anywhere; }
.receive-layout .art-column { padding-bottom: 0; }
.receive-layout .canvas-wrap { max-width: 348px; }
.receive-layout .control-panel { padding: 20px; }
.receive-layout .panel-title { font-size: 22px; }
.letter { margin: 15px 0 18px; padding: 18px; border: 1px solid #e6d7c6; border-radius: 13px; background: #fffdf7; color: #6a4b3e; font-size: 15px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
#back-workshop { display: block; width: 100%; margin: 7px 0 0; }
.error-text { min-height: 18px; color: #a14353; font-size: 12px; line-height: 1.6; }

:modal { max-height: calc(100svh - 32px); }
dialog {
  width: min(410px, calc(100% - 32px));
  padding: 27px;
  border: 1px solid #fffaf3;
  border-radius: 27px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 80px #462e2c40;
}
dialog::backdrop { background: #3e292858; backdrop-filter: blur(5px); }
dialog h2 { margin: 33px 0 13px; font-size: 23px; letter-spacing: -.8px; }
dialog p { color: var(--muted); font-size: 13px; line-height: 1.7; }
dialog label { margin-top: 20px; }
dialog textarea { min-height: 115px; }
.dialog-close { position: absolute; top: 13px; right: 13px; font-size: 25px; font-weight: 400; }
.toast { position: fixed; z-index: 10; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: min(430px, calc(100% - 32px)); transform: translateX(-50%); padding: 13px 18px; border: 1px solid #fff7ed25; border-radius: 15px; background: #523930; color: #fffaf0; box-shadow: 0 6px 20px #492f2626; font-size: 12px; line-height: 1.5; text-align: center; }
.toast[hidden] { display: none; }
.opened canvas { animation: reveal-present .5s var(--ease); }
@keyframes reveal-present { from { opacity: .3; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  html, body { background: var(--paper); }
  .app-shell { width: 100%; max-width: 520px; min-height: 100svh; margin: 0 auto; padding: 0 14px max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; }
  .masthead { height: 59px; }
  .work-heading { margin-top: 5px; margin-bottom: 10px; }
  .work-heading h1 { font-size: 24px; }
  .work-heading p { margin-top: 5px; font-size: 11px; }
  .steps, .phase-nav { margin-bottom: 10px; }
  .steps button, .phase-nav button { min-height: 44px; font-size: 11px; }
  .workspace { gap: 12px; }
  .canvas-wrap { border-radius: 21px; }
  .art-column { padding-bottom: 23px; }
  .stick-select { min-height: 44px; min-width: 66px; }
  .control-panel { padding: 14px; border-radius: 24px; }
  .choice { min-height: 70px; border-radius: 15px; gap: 5px; padding-top: 7px; padding-bottom: 7px; }
  .choc-swatch { width: 30px; height: 29px; }
  .tool-icon { width: 30px; height: 29px; }
  .tool-icon svg { width: 27px; height: 27px; }
  .control-panel:has(#dip-button) { gap: 10px 8px; }
  .control-panel:has(#dip-button) > .hint { font-size: 10px; }
  .control-panel:has(#auto-decorate) > .hint { margin-top: 11px; }
  .section-label strong { font-size: 12px; }
}
@media (max-width: 560px) and (max-height: 850px) {
  .masthead { height: 54px; }
  .work-heading h1 { font-size: 23px; }
  .work-heading p { display: none; }
  .work-heading { margin: 4px 0 8px; }
  .steps, .phase-nav { margin-bottom: 8px; }
  .steps button, .phase-nav button { min-height: 44px; }
  .art-column .canvas-wrap { max-width: min(100%, 40svh); }
  .control-panel:has(#dip-button) > .hint,
  .control-panel:has(#auto-decorate) > .hint { display: none; }
  .control-panel:has(#auto-decorate) > .primary { margin-top: 12px; }
  .choice { min-height: 67px; }
  .receive-layout .canvas-wrap { max-width: min(100%, 41svh); }
  body[data-stage='wrap'] .canvas-wrap, .workspace:has(#to-name) .canvas-wrap,
  body[data-stage='send'] .canvas-wrap, .workspace:has(#share-button) .canvas-wrap { max-width: min(100%, 37svh); }
}
@media (max-width: 359px) {
  .app-shell { padding-left: 11px; padding-right: 11px; }
  .brand > span { font-size: 16px; }
  .masthead { gap: 6px; }
  .icon-button { width: 44px; height: 44px; min-width: 44px; padding: 10px; }
  .header-actions { gap: 2px; }
  .work-heading h1 { font-size: 22px; }
  .steps button, .phase-nav button { gap: 3px; font-size: 10px; padding-left: 2px; padding-right: 2px; }
  .choice { font-size: 11px; }
  .control-panel { padding: 12px; }
  .control-panel:has(#dip-button) { grid-template-columns: .95fr 1.05fr; gap: 9px 6px; }
  .control-panel:has(#dip-button) > #next-step { font-size: 11px; padding: 10px; }
  #dip-button { font-size: 11px; padding: 10px 6px; }
  .primary { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Continuous workbench: the canvas stays in place while the tool belt changes. */
body[data-stage='craft'] .work-heading,
body[data-stage='craft'] .steps,
body[data-stage='craft'] .phase-nav { display: none; }
body[data-stage='craft'] #app { padding-top: 0; }
.craft-topline {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 1px 2px 7px;
}
.craft-topline h1 {
  min-width: 0;
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.7px;
}
#craft-undo {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  padding: 8px 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #906f5d;
  font-size: 12px;
  font-weight: 650;
}
#craft-undo:hover:not(:disabled) { background: #eddfd0; }
#craft-undo svg { width: 19px; height: 19px; }
#craft-undo:disabled { opacity: .35; }
.craft-stage {
  width: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 21px;
  background: #d6b895;
  box-shadow: inset 0 0 0 1px #6c483b0d;
}
#craft-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  touch-action: none;
  border-radius: inherit;
  cursor: grab;
}
#craft-canvas:active { cursor: grabbing; }
.craft-zoom {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 10px;
  right: 10px;
  gap: 5px;
  z-index: 1;
}
.craft-zoom button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #fff9edb3;
  border-radius: 50%;
  background: #fff8e7e8;
  box-shadow: 0 2px 9px #4e362223;
  color: #6d4e3d;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.craft-zoom button:hover:not(:disabled) { background: #fffdf4; }
.craft-zoom button:disabled { opacity: .43; }
.craft-live-hint {
  max-width: calc(100% - 24px);
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #fffaf094;
  border-radius: 20px;
  background: #fff9edeb;
  box-shadow: 0 2px 9px #5d3f2212;
  color: #79573e;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.craft-live-hint:empty { display: none; }
.craft-dock { padding: 10px 0 0; }
.craft-mode-tabs {
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 4px;
  border: 1px solid #e9d7c3;
  border-radius: 17px;
  background: #ecdfce;
}
.craft-mode-tabs button {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #977764;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}
.craft-mode-tabs button:hover:not(:disabled) { color: #694a38; background: #f7eadb; }
.craft-mode-tabs button[aria-pressed='true'] {
  border-color: #e3cab3;
  background: #fffaf1;
  box-shadow: 0 2px 4px #60452c12, inset 0 1px 0 #fff;
  color: #714b42;
}
.craft-mode-tabs button:disabled { opacity: .4; }
.craft-tool-icon,
.craft-tool-icon svg {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.craft-mode-tabs .craft-tool-icon,
.craft-mode-tabs .craft-tool-icon svg { width: 20px; height: 20px; }
.craft-ingredients {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-top: 10px;
}
.craft-ingredients button {
  min-width: 0;
  min-height: 65px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 3px;
  position: relative;
  border: 1px solid #e4d3c0;
  border-radius: 15px;
  background: #fff8ed;
  box-shadow: inset 0 1px 0 #fffdf8, 0 2px 0 #e7d5c1;
  color: #8b6a54;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.craft-ingredients button:hover:not(:disabled) { border-color: #bf9a7e; background: #fffaf2; }
.craft-ingredients button[aria-pressed='true'] {
  border-color: #ae7a7d;
  background: #f3e2dc;
  box-shadow: inset 0 1px 0 #fff7f0, 0 2px 0 #c99a99;
  color: #734747;
}
.craft-ingredients button[aria-pressed='true']::after {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  top: 6px;
  right: 6px;
  border-radius: 50%;
  background: var(--berry);
}
.craft-swatch {
  display: block;
  width: 27px;
  height: 27px;
  flex: none;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  background: var(--swatch, #9c6b4d);
  box-shadow: inset -3px -4px 4px #42211721, inset 3px 3px 3px #fff6d84a, 0 2px 3px #65432d24;
}
.craft-ingredients .craft-tool-icon { filter: drop-shadow(0 2px 1px #60452b24); }
.craft-session-actions { display:flex; gap:4px; }
.craft-session-actions .icon-button { font-size:23px; }
#wrap-canvas { display:block; width:100%; height:auto; aspect-ratio:1; touch-action:none; }
.receive-layout #work-canvas { touch-action:none; cursor:grab; }
.receive-layout #work-canvas:active { cursor:grabbing; }
#receive-letter[hidden] { display:none; }
#open-gift[hidden] { display:none; }
.wrap-materials { display:grid; gap:8px; margin-top:10px; }
.wrap-dock #wrap-send { margin-top:15px; }
.craft-guidance {
  min-height: 19px;
  margin: 10px 4px 0;
  color: #967760;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
.craft-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding: 0 2px 4px;
}
#craft-status {
  flex: 1;
  min-width: 0;
  color: #98765f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#craft-pack {
  width: auto;
  min-width: 143px;
  min-height: 48px;
  flex: none;
  padding: 11px 17px;
  font-size: 13px;
}
@media (max-width: 560px) {
  body[data-stage='craft'] .masthead { height: 54px; }
  .craft-topline { min-height: 38px; margin-top: 0; margin-bottom: 5px; }
  .craft-topline h1 { font-size: 18px; }
  .craft-stage { border-radius: 18px; }
  .craft-dock { padding-top: 9px; }
  .craft-ingredients { margin-top: 9px; gap: 6px; }
  .craft-mode-tabs { padding: 3px; }
  .craft-mode-tabs button { gap: 5px; }
  .craft-guidance { margin-top: 8px; }
  .craft-foot { margin-top: 9px; }
}
@media (max-width: 359px) {
  .craft-topline h1 { font-size: 17px; }
  #craft-undo { font-size: 11px; padding-left: 7px; padding-right: 7px; }
  .craft-mode-tabs button { gap: 4px; font-size: 12px; }
  .craft-ingredients { gap: 5px; }
  .craft-ingredients button { min-height: 62px; font-size: 12px; }
  #craft-pack { min-width: 129px; padding-left: 13px; padding-right: 13px; font-size: 12px; }
  .craft-foot { gap: 9px; }
}

/* A continuous kitchen: tools stay within reach while the materials keep time. */
.workbench-zones {display:flex;gap:4px;margin:0 0 10px;padding:4px;background:#eadbc9;border-radius:14px;overflow:auto;}
.workbench-zones button {flex:1;min-width:68px;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:#85654e;font-size:13px;font-weight:750;white-space:nowrap;}
.workbench-zones button[aria-pressed=true] {background:#fff9ef;color:#53372c;box-shadow:0 2px 4px #65432d18;}
.craft-mode-tabs {overflow:auto;}
.craft-mode-tabs button {white-space:nowrap;min-width:55px;min-height:44px;flex:1;}
.kitchen-actions {display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;}
.kitchen-actions button {min-height:40px;padding:9px 12px;border:1px solid #ddc8b2;background:#fff9ef;border-radius:12px;color:#795c45;font-size:12px;font-weight:650;}
.kitchen-actions button:active {background:#ead2bc;}
.material-notice {margin:8px 3px 0;color:#9b453a;font-size:13px;line-height:1.55;min-height:0;}
.material-notice:empty {display:none;}
.expiry-copy {font-size:13px;line-height:1.5;color:#785a4c;text-align:center;}
.challenge-list {display:grid;gap:8px;margin-top:16px;}
.challenge-list button {display:grid;gap:5px;text-align:left;background:#fffaf1;border:1px solid #e0cdb7;border-radius:14px;padding:15px;color:#53382c;min-height:68px;}
.challenge-list span,.inbox-entry small {display:block;font-size:12px;color:#96765f;line-height:1.5;}
.inbox-entry {display:flex;gap:8px;margin-top:8px;}
.inbox-entry button {border:1px solid #ddc8b2;border-radius:12px;background:#fff9ef;padding:12px;color:#634736;min-height:48px;}
.inbox-entry button:first-child {flex:1;text-align:left;}
#inbox-list {margin-top:20px;}
button:focus-visible,canvas:focus-visible {outline:3px solid #8c534c;outline-offset:3px;}
[hidden] {display:none!important;}
@media(max-width:560px){.workbench-zones {margin-bottom:8px}.kitchen-actions {gap:5px}.kitchen-actions button{font-size:11px;padding:8px 10px}.craft-stage{isolation:isolate}.craft-mode-tabs button{font-size:12px}.craft-live-hint{pointer-events:none}}
.letter {position:relative;isolation:isolate;}
.letter::after {content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:var(--letter-dirt,0);background:radial-gradient(ellipse at 91% 10%,#74493499 0 5%,transparent 10%),radial-gradient(ellipse at 8% 88%,#704532aa 0 4%,transparent 9%),repeating-radial-gradient(ellipse at 90% 13%,transparent 0 2px,#714a2f60 3px 4px,transparent 5px 7px);mask-image:radial-gradient(ellipse 28px 35px at 90% 12%,black 0 70%,transparent 100%),radial-gradient(ellipse 20px 26px at 8% 88%,black,transparent);}

/* The work surface is a perspective WebGL scene; controls are ordinary UI. */
.scene-stage{position:relative;width:100%;aspect-ratio:4/5;max-height:580px;border-radius:20px;overflow:hidden;background:#eee2d3;box-shadow:inset 0 0 0 1px #d5bda740;}
.scene-canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px;}
.scene-loading{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:#f7f0e4d9;color:#765540;font-size:14px;line-height:1.7;pointer-events:none;}
.scene-camera{position:absolute;top:10px;right:10px;display:flex;gap:4px;}
.scene-camera button{min-width:36px;min-height:38px;border:1px solid #dbc6ae99;border-radius:12px;background:#fffaf0e8;color:#795a44;font-size:15px;font-weight:700;backdrop-filter:blur(8px);}
.scene-camera button:first-child{font-size:11px;padding:0 10px;}
.scene-touch-hint{position:absolute;left:12px;bottom:12px;color:#7a6656;background:#fff9eecc;border-radius:20px;padding:6px 10px;font-size:10px;pointer-events:none;}
.scene-zones button{min-width:56px;padding:8px 5px;font-size:12px;}
.scene-dock .craft-mode-tabs button{min-width:54px;}
.scene-hand-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 4px 0;}
.scene-hand-controls label{display:grid;gap:6px;font-size:11px;color:#886750;font-weight:650;}
.scene-hand-controls input{width:100%;min-width:0;margin:0;accent-color:#9f6977;touch-action:pan-x;}
.scene-dock .craft-guidance{font-size:12px;min-height:38px;}
.scene-dock #scene-next{min-width:138px;width:auto;padding:12px 15px;font-size:13px;}
.scene-dock #scene-letter{margin-top:12px;}
#work-canvas.package-canvas{touch-action:none;}
@media(min-width:700px){body[data-stage=craft] .app-shell,body[data-stage=wrap] .app-shell{max-width:960px}.scene-stage{aspect-ratio:16/10;max-height:560px}.scene-hand-controls{max-width:470px}.scene-zones{max-width:620px}.scene-dock .craft-ingredients{max-width:480px;}}
@media(prefers-reduced-motion:reduce){.scene-camera button{transition:none}}
@media(min-width:700px){body[data-stage=craft] .app-shell,body[data-stage=wrap] .app-shell{width:min(960px,calc(100% - 40px));max-width:960px;}}
.scene-recover{position:absolute;z-index:3;left:50%;top:62%;transform:translateX(-50%);min-height:44px;padding:12px 18px;border:1px solid #cba78d;border-radius:14px;background:#fff9ef;color:#694a37;font-size:13px;font-weight:650;}
/* Override legacy square-canvas rules: rendering, picking and clipping share one viewport. */
.scene-stage #craft-canvas.scene-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;}

/* One readable instruction stays next to the actual object it describes. */
.scene-top-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.scene-top-actions .text-button{min-height:44px;margin:0;font-size:12px;}
.scene-guide{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:17px 19px;border:1px solid #dbc1a5;border-radius:17px;background:#fffaf0;color:#51372a;}
.scene-guide-copy{min-width:0;}
.scene-guide-eyebrow{font-size:11px;letter-spacing:.04em;color:#81593e;font-weight:750;}
.scene-guide h2{font-size:19px;line-height:1.35;margin:5px 0 6px;letter-spacing:-.045em;}
.scene-guide p{font-size:14px;line-height:1.55;margin:0;max-width:580px;color:#664c3a;word-break:keep-all;}
#guide-progress{display:block;min-height:0;margin-top:6px;font-size:12px;font-weight:700;color:#80583e;}
#guide-progress:empty{display:none;}
#guide-recipe{display:block;min-height:44px;margin:4px 0 -6px;padding:4px 0;font-size:12px;color:#775037;text-decoration:underline;text-underline-offset:3px;}
.guide-action{flex-shrink:0;min-height:46px;max-width:210px;border:1px solid #74482f;border-radius:12px;background:#704830;padding:11px 15px;font-family:inherit;font-weight:700;font-size:13px;line-height:1.4;color:#fffaf0;word-break:keep-all;cursor:pointer;}
.guide-action:active{background:#4b3022;}
.guide-action:disabled{opacity:.5;cursor:wait;}
.scene-guide.is-feedback{border-color:#a45035;}
.scene-guide.is-urgent{border-color:#bb3d23;background:#fff0df;}
.scene-guide.is-urgent .guide-action{background:#a73921;border-color:#a73921;}
.scene-guide.is-urgent h2{color:#98351f;}
.scene-guide-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;}
.scene-guide-path>path{fill:none;stroke:#a64c32;stroke-width:3;stroke-dasharray:5 6;stroke-linecap:round;}
.scene-guide-path marker path{fill:none;stroke:#a64c32;stroke-width:1.8;stroke-linejoin:round;}
.scene-target{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;}
.scene-target i{display:block;width:34px;height:34px;border:3px solid #a64c32;border-radius:50%;box-shadow:0 0 0 5px #fff8eab8;animation:target-breathe 1.8s ease-in-out infinite;}
.scene-target.is-stir-circle i{width:8px;height:8px;border:0;background:#a64c32;box-shadow:none;animation:none;}
.scene-target.is-stir-circle.label-above span{bottom:34px;}
.scene-target span{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:max-content;max-width:160px;padding:7px 10px;border-radius:9px;background:#fff9efee;border:1px solid #c8a688;color:#603b29;font-size:12px;font-weight:750;box-shadow:0 2px 7px #5c3e2017;}
.scene-target.label-above span{top:auto;bottom:44px;}
.scene-zones button{display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;}
.scene-zones button>span{font-size:10px;opacity:.7;}
.scene-advanced{margin:9px 0 0;border:1px solid #ddc8b2;border-radius:12px;background:#fff9ef;}
.scene-advanced summary{cursor:pointer;min-height:44px;padding:13px 12px;color:#6a4933;font-size:13px;font-weight:700;}
.scene-advanced .scene-hand-controls{padding:2px 12px 12px;max-width:none;}
.scene-stage>.scene-advanced{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;margin:0;max-width:450px;background:#fff9eff5;box-shadow:0 3px 15px #52381d17;}
.scene-stage>.scene-advanced summary{min-height:44px;}
.scene-hand-controls input{min-height:34px;}
.scene-help-dialog{max-width:490px;padding:28px 24px 24px;}
.scene-help-dialog h2{font-size:23px;margin:8px 0 20px;letter-spacing:-.05em;}
.scene-help-dialog ol{display:grid;gap:16px;padding-left:23px;margin:0;}
.scene-help-dialog li{padding-left:4px;color:#704830;font-size:14px;line-height:1.5;}
.scene-help-dialog li p{margin:3px 0 0;color:#745845;font-size:13px;line-height:1.55;word-break:keep-all;}
.scene-help-note{font-size:12px;line-height:1.6;color:#785c48;margin:22px 0 14px;}
.scene-help-dialog .primary{width:100%;min-height:48px;}
@keyframes target-breathe{0%,100%{box-shadow:0 0 0 5px #fff8eab8}50%{box-shadow:0 0 0 10px #fff8ea45}}
@media(max-width:600px){.craft-topline{align-items:center;gap:8px}.craft-topline h1{font-size:17px}.scene-top-actions{gap:9px}.scene-top-actions .text-button{font-size:11px}.scene-guide{display:block;padding:15px;margin-bottom:12px}.scene-guide h2{font-size:18px}.scene-guide p{font-size:13px}.guide-action{display:block;width:100%;max-width:none;margin-top:12px;min-height:44px}.scene-zones button{display:grid;gap:2px;font-size:11px;min-width:53px}.scene-zones button>span{font-size:9px}.scene-camera button{min-width:39px;min-height:44px}.scene-hand-controls{gap:9px}.scene-advanced .scene-hand-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.scene-target span{max-width:135px;font-size:11px}.scene-help-dialog{width:calc(100% - 28px);padding:25px 22px;max-height:calc(100dvh - 64px)}}
@media(prefers-reduced-motion:reduce){.scene-target i{animation:none;}.scene-guide-path>path{stroke-dasharray:none;}}

/* Fullscreen game HUD. The document never becomes a second control surface. */
:root{--hud-top:max(12px,env(safe-area-inset-top));--hud-bottom:max(12px,env(safe-area-inset-bottom));--hud-side:max(12px,env(safe-area-inset-left));--hud-glass:#fffaf0ed;--hud-border:#d7bfa5b8;}
html,body{width:100%;height:100%;min-width:0;overflow:hidden;overscroll-behavior:none;background:#cbd0c2;}
body .app-shell,body[data-stage] .app-shell,#app{position:fixed;inset:0;width:100%!important;height:100%;max-width:none!important;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden;}
.page-footer{display:none!important;}
.masthead{position:fixed;z-index:50;top:var(--hud-top);right:var(--hud-side);width:auto;height:44px;padding:0;gap:6px;pointer-events:none;}
.masthead>*{pointer-events:auto;}
.brand{width:38px;height:44px;justify-content:center;gap:0;padding:4px;background:var(--hud-glass);border:1px solid var(--hud-border);border-radius:12px;backdrop-filter:blur(12px);}
.brand>span{display:none;}
.brand img{width:24px;height:29px;}
.header-actions{gap:5px;}
.header-actions .icon-button{width:44px;height:44px;background:var(--hud-glass);border-color:var(--hud-border);border-radius:12px;box-shadow:none;backdrop-filter:blur(12px);}
.scene-stage{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;overflow:hidden;}
.scene-stage #craft-canvas.scene-canvas{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
.scene-stage>.craft-topline{position:absolute;z-index:30;top:var(--hud-top);left:var(--hud-side);display:flex;align-items:center;gap:6px;height:44px;margin:0;padding:0;}
.craft-topline #scene-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.scene-top-actions{gap:6px;}
.hud-button,.scene-top-actions .text-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 10px;border:1px solid var(--hud-border);border-radius:12px;background:var(--hud-glass);color:#5c3b2a;text-decoration:none;font-size:12px;font-weight:750;backdrop-filter:blur(12px);}
.hud-button:active,.scene-top-actions .text-button:active{background:#edd7be;}
.scene-stage>.scene-guide{position:absolute;z-index:20;top:calc(var(--hud-top) + 56px);left:var(--hud-side);display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:6px;width:min(390px,calc(100% - 84px));max-height:42dvh;overflow:auto;margin:0;padding:10px;border:1px solid var(--hud-border);border-radius:15px;background:var(--hud-glass);box-shadow:0 3px 15px #45331e12;backdrop-filter:blur(12px);}
.scene-guide .scene-guide-eyebrow{font-size:10px;letter-spacing:0;}
.scene-guide h2{font-size:14px;line-height:1.4;margin:2px 0 3px;letter-spacing:-.04em;}
.scene-guide-copy{min-width:0;}
.scene-guide p,.scene-guide #guide-recipe{display:none;}
.scene-guide.is-expanded p{display:block;margin-top:8px;font-size:13px;line-height:1.55;}
.scene-guide.is-expanded #guide-recipe:not([hidden]){display:block;margin-top:8px;}
.scene-guide #guide-progress{font-size:10px;line-height:1.4;margin:3px 0 0;}
.scene-guide .guide-action{display:grid;place-items:center;width:44px;min-width:44px;max-width:none;min-height:44px;height:44px;padding:0;margin:0;border-radius:12px;font-size:0;line-height:0;background:#795037;color:#fff9ef;}
.scene-guide .guide-action::before{content:"";display:block;width:21px;height:21px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff9ef' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 2v5m0 10v5M2 12h5m10 0h5'/%3E%3C/svg%3E");}
.scene-guide #hud-guide-toggle{padding:4px;min-width:44px;font-size:11px;}
.scene-guide.is-urgent{z-index:85;grid-template-columns:minmax(0,1fr) auto;background:#fff0dfef;}
.scene-guide.is-urgent #hud-guide-toggle{display:none;}
.scene-guide.is-urgent .guide-action,.scene-guide .guide-action[data-action]:not([data-action=focus]){width:auto;min-width:70px;padding:8px;font-size:12px;line-height:1.4;height:auto;}
.scene-guide.is-urgent .guide-action::before,.scene-guide .guide-action[data-action]:not([data-action=focus])::before{display:none;}
.scene-stage>.scene-zones{position:absolute;z-index:60;top:calc(var(--hud-top) + 54px);left:var(--hud-side);display:grid;gap:5px;width:min(250px,calc(100% - 24px));max-height:calc(100dvh - 84px);overflow:auto;margin:0;padding:8px;border:1px solid var(--hud-border);border-radius:16px;background:var(--hud-glass);box-shadow:0 8px 30px #37281924;backdrop-filter:blur(16px);}
.scene-zones button{display:flex;justify-content:flex-start;gap:12px;min-height:44px;padding:10px 12px;text-align:left;font-size:13px;}
.scene-zones button>span{font-size:11px;}
.scene-zones #scene-back{margin:0;text-decoration:none;}
.scene-stage>.scene-camera{position:absolute;z-index:18;top:calc(var(--hud-top) + 56px);right:var(--hud-side);display:flex;flex-direction:column;gap:4px;}
.scene-camera button{width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border-radius:12px;background:var(--hud-glass);border-color:var(--hud-border);font-size:18px;}
.scene-camera button:first-child{font-size:11px;padding:0;}
.scene-stage>.scene-dock{position:absolute;z-index:25;left:var(--hud-side);right:var(--hud-side);bottom:var(--hud-bottom);display:flex;flex-direction:column;gap:6px;width:auto;max-width:900px;max-height:30dvh;margin:0 auto;padding:8px;border:1px solid var(--hud-border);border-radius:17px;background:var(--hud-glass);box-shadow:0 4px 20px #3d2b191c;backdrop-filter:blur(14px);overflow-y:auto;}
.scene-stage>.scene-dock{width:max-content;min-width:min(340px,calc(100% - var(--hud-side) - var(--hud-side)));max-width:min(900px,calc(100% - var(--hud-side) - var(--hud-side)));}
.scene-dock .craft-mode-tabs{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:5px;min-height:44px;margin:0;padding:0;overflow-x:auto;border:0;border-radius:0;background:transparent;touch-action:pan-x;scrollbar-width:thin;}
.scene-dock .craft-mode-tabs button{flex:1 0 auto;min-width:56px;min-height:44px;padding:8px 12px;border:1px solid #ddc5aa9c;border-radius:11px;background:#fffaf2a8;font-size:12px;}
.scene-dock .craft-mode-tabs button[aria-pressed=true]{background:#805337;color:#fff9ef;border-color:#805337;}
.scene-dock .kitchen-actions{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:6px;margin:0;padding:0;overflow-x:auto;touch-action:pan-x;scrollbar-width:thin;}
.scene-dock .kitchen-actions button{flex:0 0 auto;min-height:44px;margin:0;padding:8px 12px;border-radius:11px;background:#fffaf2a8;font-size:12px;}
.scene-dock .craft-ingredients{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:6px;margin:0;padding:0;overflow-x:auto;touch-action:pan-x;}
.scene-dock .craft-ingredients button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1 0 auto;min-width:74px;min-height:44px;padding:6px 10px;font-size:12px;border-radius:11px;}
.scene-dock .craft-swatch{width:19px;height:19px;margin:0;font-size:13px;}
.scene-stage>.craft-foot{position:absolute;z-index:26;left:var(--hud-side);right:var(--hud-side);bottom:calc(var(--hud-bottom) + var(--hud-dock-height,112px) + 10px);display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;pointer-events:none;}
.scene-stage>.craft-foot>*{pointer-events:auto;}
.craft-foot #craft-status{min-height:32px;padding:8px 10px;border:1px solid var(--hud-border);border-radius:20px;background:var(--hud-glass);font-size:11px;line-height:1.4;color:#694b36;backdrop-filter:blur(12px);}
.craft-foot #craft-status{flex:0 0 auto;max-width:max-content;}
.craft-foot #scene-next{width:auto;min-width:0;max-width:190px;min-height:44px;padding:10px 15px;font-size:12px;border-radius:13px;}
.scene-stage>.scene-advanced{z-index:28;left:auto;right:calc(var(--hud-side) + 56px);bottom:calc(var(--hud-bottom) + var(--hud-dock-height,112px) + 64px);width:min(320px,calc(100% - 80px));max-width:none;max-height:42dvh;overflow:auto;background:var(--hud-glass);border-color:var(--hud-border);backdrop-filter:blur(14px);}
.scene-advanced summary{font-size:12px;padding:12px;}
.scene-advanced .scene-hand-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;padding:0 12px 12px;}
.scene-stage>.scene-touch-hint{left:var(--hud-side);bottom:calc(var(--hud-bottom) + var(--hud-dock-height,112px) + 64px);max-width:calc(100% - 180px);font-size:10px;}
.scene-stage>#scene-notice{position:absolute;z-index:24;top:calc(var(--hud-top) + var(--hud-guide-height,90px) + 66px);left:var(--hud-side);max-width:min(340px,calc(100% - 84px));max-height:90px;overflow:auto;margin:0;padding:9px 12px;border:1px solid #b7684580;border-radius:12px;background:#fff0dfed;color:#8b3928;font-size:12px;line-height:1.5;backdrop-filter:blur(12px);}
.scene-stage>#scene-notice:empty{display:none;}
.hud-letter-panel{position:absolute;z-index:70;top:calc(var(--hud-top) + 56px);right:var(--hud-side);bottom:var(--hud-bottom);width:min(420px,calc(100% - var(--hud-side) - var(--hud-side)));overflow:auto;overscroll-behavior:contain;padding:16px;border:1px solid var(--hud-border);border-radius:18px;background:#fffaf0f5;box-shadow:0 8px 35px #3526152b;backdrop-filter:blur(18px);}
.hud-panel-heading{position:sticky;z-index:1;top:-16px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -16px 16px;padding:10px 14px;border-bottom:1px solid var(--hud-border);background:#fffaf0f5;}
.hud-panel-heading h2{margin:0;font-size:17px;}
.hud-letter-panel #scene-letter{margin:0;}
.hud-letter-panel input,.hud-letter-panel textarea{font-size:16px;}
.hud-letter-panel .input-pair{grid-template-columns:repeat(2,minmax(0,1fr));}
.hud-letter-panel .input-pair>div{min-width:0;}
.hud-letter-panel .swatch-row{flex-wrap:wrap;}
.hud-letter-panel .color-choice{min-height:44px;}
.scene-loading{z-index:5;border-radius:0;}
.scene-recover{z-index:15;}
#toast{z-index:100;max-width:calc(100% - 24px);}
dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain;}
@media(max-height:500px) and (min-width:601px){.scene-stage>.scene-guide{width:min(370px,calc(100% - 84px));max-height:35dvh;}.scene-stage>.scene-dock{left:70px;right:70px;min-width:min(340px,calc(100% - 140px));max-width:calc(100% - 140px);padding:5px;gap:4px;max-height:30dvh;}.scene-dock .kitchen-actions button,.scene-dock .craft-mode-tabs button{min-height:44px;height:44px;padding:6px 9px;}.scene-stage>.scene-camera{flex-direction:column;top:calc(var(--hud-top) + 56px);bottom:auto;right:var(--hud-side);}.scene-camera button{width:44px;min-width:44px;height:44px;min-height:44px}.scene-stage>.scene-touch-hint{display:none}.scene-stage>.scene-advanced{max-height:50dvh;}.hud-letter-panel{top:var(--hud-top);}}
@media(max-height:500px) and (min-width:601px){.scene-stage>.craft-foot{right:calc(var(--hud-side) + 56px);}}

/* Basic touch is a single drag; precise wrist controls stay optional. */
.scene-stage>.scene-advanced:not([open]){width:auto;max-width:150px;right:var(--hud-side);border-radius:20px;}
.scene-advanced:not([open]) summary{min-height:44px;padding:12px 14px;}
.scene-advanced #hand-auto{margin:0 12px 10px;min-height:44px;}
.scene-guide .guide-action::after{content:"보기";font-size:10px;line-height:1.1;margin-top:2px;}
.scene-guide .guide-action{align-content:center;}
.scene-guide .guide-action[data-action]:not([data-action=focus])::after{display:none;}
#scene-next[aria-disabled=true]{background:#8e7569;}

.scene-zones>.scene-advanced{position:static;grid-column:1/-1;width:100%;max-width:none;margin:0;border:1px solid var(--hud-border);border-radius:12px;background:#fffaf2;}
.scene-zones>.scene-advanced summary{min-height:44px;font-size:12px;}
.scene-zones>.scene-advanced .scene-hand-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px 12px;}

.game-legal{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0;}.game-legal a{display:inline-flex;align-items:center;min-height:44px;color:#765549;font-size:13px;text-underline-offset:4px;}

/* Mobile game HUD: current task first, optional controls on demand. */
.scene-stage>.scene-guide{grid-template-columns:minmax(0,1fr) 86px;gap:6px 10px;align-items:start;}
.scene-guide-copy{grid-column:1;grid-row:1 / span 2;}
.scene-guide h2{font-size:15px;line-height:1.35;}
.scene-guide .scene-guide-eyebrow{font-size:11px;color:#76503e;}
.scene-guide p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:1.45;margin:5px 0 0;}
.scene-guide.is-expanded p{-webkit-line-clamp:unset;display:block;}
.scene-guide #guide-progress{font-size:12px;line-height:1.4;}
.scene-guide .guide-action{grid-column:2;grid-row:1;display:flex;width:86px;min-width:86px;max-width:86px;min-height:44px;height:auto;padding:8px;font-size:12px;line-height:1.35;}
.scene-guide .guide-action::before,.scene-guide .guide-action::after{display:none!important;}
.scene-guide .guide-action[data-intent=focus]{background:#f1e3d4;color:#69452f;border:1px solid #d6bda4;}
.scene-guide #hud-guide-toggle{grid-column:2;grid-row:2;width:86px;min-height:44px;font-size:12px;}
.scene-guide.is-urgent .guide-action{grid-row:1 / span 2;align-self:center;}
.scene-stage>.scene-camera:not(.is-expanded)>[data-camera]{display:none;}
.scene-camera #hud-camera-toggle{font-size:12px;width:44px;height:44px;min-height:44px;}
.scene-tool-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:9px 12px;border:1px solid #d9bfa4;border-radius:11px;background:#fffaf2;color:#65422f;font-size:13px;text-align:left;}
.scene-tool-toggle svg{width:20px;height:20px;flex:none;transition:transform .16s ease;}
.scene-tool-toggle[aria-expanded=true] svg{transform:rotate(180deg);}
.scene-dock .craft-mode-tabs,.scene-dock .craft-ingredients{gap:8px;}
.scene-dock .craft-mode-tabs button{flex:0 0 auto;}
.scene-zones>.scene-supplies{grid-column:1/-1;min-width:0;border:1px solid var(--hud-border);border-radius:12px;background:#fffaf2;}
.scene-supplies summary{min-height:44px;padding:12px;font-size:13px;font-weight:750;}
.scene-supplies .kitchen-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 10px 10px;margin:0;}
.scene-supplies .kitchen-actions button{min-height:44px;min-width:0;font-size:12px;padding:8px;}
.scene-zones>.menu-reset{grid-column:1/-1;min-height:44px;font-size:13px;background:#efe0d8;color:#714b3c;}
.craft-foot #craft-status{font-size:12px;}
@media(prefers-reduced-motion:reduce){.scene-tool-toggle svg{transition:none;}}

.brand{width:44px;min-width:44px;}
.scene-guide .guide-action[data-action],.scene-guide .guide-action[data-action]:not([data-action=focus]){width:86px;min-width:86px;max-width:86px;padding:8px;line-height:1.35;font-size:12px;}
.scene-zones>.menu-pack{grid-column:1/-1;min-height:44px;font-size:13px;background:#8b5264;color:#fffaf2;}

.masthead{min-height:0;}
.scene-guide p{font-size:14px;}
.scene-guide #guide-recipe:not([hidden]){display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:6px 0;font-size:12px;}
.scene-camera #hud-camera-toggle[aria-expanded=true]{background:#805337;color:#fff9ef;}

.scene-stage>.scene-zones{width:min(390px,calc(100% - 24px));grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.scene-zones #scene-back{grid-column:1/-1;}
.scene-guide.is-expanded p{font-size:14px;}
.hud-letter-panel{display:flex;flex-direction:column;}
.hud-letter-panel #scene-letter{flex:1 0 auto;}
#hud-letter-done{flex-shrink:0;min-height:44px;margin-top:16px;}
.hud-letter-panel [data-ribbon3d=chocolate]{color:#fff;}
.hud-letter-panel [data-ribbon3d=berry]{color:#000;}
.hud-letter-panel [data-ribbon3d=sage]{color:#21150f;}
@media(max-width:340px) and (min-height:501px){
 .scene-stage>.scene-guide{width:calc(100% - 24px);}
 .scene-stage>.scene-camera{top:auto;bottom:calc(var(--hud-bottom) + var(--hud-dock-height,62px) + 60px);flex-direction:column-reverse;gap:8px;}
}

/* The workbench owns the screen; tool and task surfaces share one quiet material. */
:root{--work-surface:#fffcf3f2;--work-ink:#49332c;--work-line:#bda68d;--work-selected:#70482f;}
.masthead{height:48px;gap:8px;}
.brand,.header-actions .icon-button{width:48px;min-width:48px;height:48px;border-radius:8px;}
.scene-stage>.craft-topline{height:48px;gap:8px;}
.hud-button,.scene-top-actions .text-button{min-width:48px;min-height:48px;font-size:16px;padding:10px;border-radius:8px;color:var(--work-ink);}
.scene-stage>.scene-guide{top:calc(var(--hud-top) + 60px);width:min(460px,calc(100% - var(--hud-side) - var(--hud-side)));grid-template-columns:minmax(0,1fr) 88px;gap:8px 16px;padding:12px 14px;border:0;border-left:3px solid var(--work-selected);border-radius:4px;background:var(--work-surface);box-shadow:none;}
.scene-guide .scene-guide-eyebrow{font-size:14px;line-height:1.25;color:#76503e;}
.scene-guide h2{font-size:18px;line-height:1.4;letter-spacing:-.025em;margin:5px 0;word-break:keep-all;}
.scene-guide p{display:none;}
.scene-guide.is-expanded p{display:block;font-size:16px;line-height:1.5;}
.scene-guide #guide-progress{font-size:14px;line-height:1.4;color:#65452f;}
.scene-guide .guide-action,.scene-guide .guide-action[data-action],.scene-guide .guide-action[data-action]:not([data-action=focus]){width:88px;min-width:88px;max-width:88px;min-height:48px;font-size:16px;line-height:1.4;padding:8px;border-radius:8px;}
.scene-guide #hud-guide-toggle{width:88px;min-height:48px;font-size:16px;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;}
.scene-guide #guide-recipe:not([hidden]){min-height:48px;font-size:16px;}
.scene-stage.is-camera-open>.scene-guide{visibility:hidden;}
.scene-stage>.scene-camera{z-index:55;top:calc(var(--hud-top) + 60px);right:auto;left:var(--hud-side);bottom:auto;display:grid;grid-template-columns:repeat(5,48px);gap:8px;padding:8px;background:var(--work-surface);border:1px solid var(--work-line);border-radius:8px;}
.scene-stage>.scene-camera:not(.is-expanded){display:none;}
.scene-camera button,.scene-camera button:first-child{width:48px;min-width:48px;height:48px;min-height:48px;font-size:18px;border-radius:6px;}
.scene-camera button:first-child{font-size:16px;}
.scene-stage>.scene-dock{padding:0;gap:8px;border:0;border-radius:8px;background:transparent;box-shadow:none;backdrop-filter:none;max-height:36dvh;}
.scene-tool-toggle{min-height:52px;font-size:16px;font-weight:700;padding:12px 16px;border-radius:8px;background:var(--work-surface);border-color:var(--work-line);box-shadow:0 2px 0 #49332c26;}
.scene-dock .craft-mode-tabs,.scene-dock .craft-ingredients{padding:8px;border-radius:8px;background:var(--work-surface);gap:8px;}
.scene-dock .craft-mode-tabs button,.scene-dock .craft-ingredients button{font-size:16px;min-height:48px;min-width:72px;padding:10px 14px;border-radius:6px;border-color:var(--work-line);color:var(--work-ink);}
.scene-dock .craft-mode-tabs button[aria-pressed=true]{color:#fffaf2;background:var(--work-selected);}
.scene-dock .craft-ingredients button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--work-selected);}
.scene-stage>.scene-zones{top:calc(var(--hud-top) + 60px);padding:12px;border-radius:8px;background:var(--work-surface);}
.scene-zones button,.scene-zones #scene-help-open,.scene-zones>.menu-pack,.scene-zones>.menu-reset,.scene-supplies summary,.scene-zones>.scene-advanced summary,.scene-supplies .kitchen-actions button{min-height:48px;font-size:16px;line-height:1.4;border-radius:6px;}
.scene-zones #scene-help-open{grid-column:1/-1;text-align:left;text-decoration:none;margin:0;padding:12px;}
.scene-zones button>span{font-size:14px;}
.scene-advanced .scene-hand-controls label{font-size:16px;}
.scene-hand-controls input{min-height:48px;}
.craft-foot #craft-status{font-size:14px;background:var(--work-surface);border:0;border-radius:4px;}
.craft-foot #scene-next,.scene-stage>#scene-notice,.scene-target span{font-size:16px;line-height:1.4;}
.scene-stage>.scene-touch-hint{display:none;}
.scene-help-dialog li,.scene-help-dialog li p,.scene-help-note,.game-legal a{font-size:16px;}
.scene-help-dialog .primary,.hud-letter-panel .hud-button,#hud-letter-done{min-height:48px;font-size:16px;}
.hud-button:focus-visible,.scene-tool-toggle:focus-visible,.scene-guide button:focus-visible{outline:3px solid #9e4e36;outline-offset:3px;}
@media(max-width:500px){.scene-dock .craft-mode-tabs{flex-wrap:wrap;}.scene-dock .craft-mode-tabs button{flex:1 1 calc(50% - 8px);min-width:0;}}
@media(max-width:340px){.header-actions{gap:4px;}.masthead{gap:4px;}.scene-stage>.scene-guide{gap:6px 8px;padding:10px;grid-template-columns:minmax(0,1fr) 80px;}.scene-guide .guide-action,.scene-guide .guide-action[data-action],.scene-guide .guide-action[data-action]:not([data-action=focus]),.scene-guide #hud-guide-toggle{width:80px;min-width:80px;max-width:80px;}.scene-stage>.scene-camera{grid-template-columns:repeat(5,48px);gap:6px;padding:8px;}}
@media(max-height:500px) and (min-width:601px){.scene-stage>.scene-guide{width:min(390px,calc(100% - 180px));max-height:44dvh;}.scene-stage>.scene-dock{max-height:38dvh;}.scene-dock .craft-mode-tabs button{height:auto;min-height:48px;}.scene-stage>.scene-camera{top:calc(var(--hud-top) + 60px);bottom:auto;left:var(--hud-side);right:auto;}}

/* Confectionery workbench HUD: readable controls float above the playable scene. */
:root{--work-surface:#fffaf1f5;--work-ink:#4a2928;--work-line:#e5cdbb;--work-selected:#a83f48;}
.brand,.header-actions .icon-button,.hud-button,.scene-top-actions .text-button{
  border:1px solid #ead4c3;border-radius:16px;background:#fffaf3f2;
  box-shadow:0 4px 14px #693d2c1a;color:var(--work-ink);
}
.scene-stage>.scene-guide{
  border:1px solid #f1d9c9;border-left:4px solid #d35a62;border-radius:18px;
  background:linear-gradient(135deg,#fffdf8f7,#fff0e8f5);
  box-shadow:0 8px 24px #693d2c20;
}
.scene-guide .scene-guide-eyebrow{color:#a7474e;font-weight:800;letter-spacing:.04em;}
.scene-guide h2{color:#482b2b;font-weight:800;}
.scene-guide #guide-progress{color:#79514b;}
.scene-guide .guide-action,.scene-guide .guide-action[data-action],.scene-guide .guide-action[data-action]:not([data-action=focus]){
  border:0;border-radius:13px;background:#f6d4c8;color:#713b38;font-weight:800;
}
.scene-guide #hud-guide-toggle{color:#80534e;text-decoration-color:#c69d91;}
.scene-tool-toggle{border:1px solid #e8c9b9;border-radius:16px;background:#fffaf2f7;color:#54342f;box-shadow:0 6px 20px #693d2c24;}
.scene-dock .craft-mode-tabs,.scene-dock .craft-ingredients,.scene-stage>.scene-zones,.scene-stage>.scene-camera{border-radius:16px;box-shadow:0 8px 24px #693d2c20;}
.scene-dock .craft-mode-tabs button,.scene-dock .craft-ingredients button,.scene-zones button{border-radius:11px;}
.craft-foot #craft-status{border-radius:12px;padding:9px 12px;color:#67423c;box-shadow:0 3px 12px #693d2c1a;}
.scene-target span{border-radius:12px;background:#fffaf2;color:#6a3b36;box-shadow:0 4px 12px #693d2c24;}
@media(prefers-reduced-motion:reduce){.scene-target i,.scene-guide-path{animation:none!important;}}

/* A slightly panicked assistant for a very serious handmade gift. */
.scene-stage>.scene-guide{
  position:absolute;padding:12px 12px 12px 76px;border:2px solid #4b2828;
  border-radius:18px;background:#fff9e7;box-shadow:4px 5px 0 #4b2828;
}
.scene-stage>.scene-guide::before{
  content:"";position:absolute;left:4px;bottom:4px;width:68px;height:84px;
  background:url('/assets/panic-stick.svg') center bottom/contain no-repeat;pointer-events:none;
}
.scene-guide .scene-guide-eyebrow{display:inline-block;padding:3px 8px;border-radius:6px;background:#df4f4d;color:#fff;font-size:13px;line-height:1.3;letter-spacing:0;}
.scene-guide h2{margin:5px 0;color:#392326;font-weight:900;line-height:1.25;}
.scene-guide #guide-progress{display:block;color:#65433d;font-size:14px;}
.scene-guide .comic-aside{display:block;margin-top:4px;color:#a34443;font-size:14px;font-weight:800;line-height:1.3;word-break:keep-all;}
.scene-guide .guide-action,.scene-guide .guide-action[data-action],.scene-guide .guide-action[data-action]:not([data-action=focus]){background:#ffd35c;border:2px solid #4b2828;color:#392326;box-shadow:2px 3px 0 #4b2828;}
.scene-guide #hud-guide-toggle{color:#62403a;}
.scene-tool-toggle{background:#ffdb68;border:2px solid #4b2828;color:#392326;box-shadow:3px 4px 0 #4b2828;font-weight:850;}
.scene-tool-toggle:active,.scene-guide .guide-action:active{box-shadow:none;}
@media(max-width:340px){.scene-stage>.scene-guide{padding-left:64px}.scene-stage>.scene-guide::before{width:57px;height:75px}.scene-guide .comic-aside{font-size:13px}}
@media(max-height:500px) and (min-width:601px){.scene-guide .comic-aside{display:none}.scene-stage>.scene-guide::before{height:65px;width:54px}.scene-stage>.scene-guide{padding-left:62px}}
@font-face{font-family:Gaegu;src:url('/assets/Gaegu-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

/* Result UI uses the same playful story language as the share image. */
body[data-stage=send] .gift-hud-title{background:#3a1725;border:2px solid #3a1725;box-shadow:4px 4px 0 #f45c43;border-radius:16px;}
body[data-stage=send] .gift-hud-title>span{color:#ffcb53;font-size:14px;font-weight:800;}
body[data-stage=send] .gift-hud-title h1{color:#fff6dc;font-family:"Wanted Sans",sans-serif;font-size:clamp(20px,5vw,28px);font-weight:800;white-space:normal;overflow:visible;max-width:min(52vw,470px);}
body[data-stage=send] .gift-action-buttons{border:2px solid #3a1725;background:#fff4d7;box-shadow:4px 4px 0 #3a1725;}
body[data-stage=send] .gift-action-buttons .primary{background:#ffcd4e;color:#321c20;border:2px solid #321c20;font-weight:800;}

/* Shared confectionery brand for the native workbench and result actions. */
:root{--pepero-violet:#5632ed;--pepero-ink:#33212e;--pepero-paper:#fff8ed;--pepero-yellow:#ffcf52;--pepero-line:#dfc9c0;}
.scene-stage>.scene-guide{background:var(--pepero-paper);border-color:var(--pepero-ink);box-shadow:4px 5px 0 var(--pepero-ink)}
.scene-guide .scene-guide-eyebrow{background:var(--pepero-violet);color:var(--pepero-paper)}
.scene-tool-toggle,.scene-guide .guide-action,.scene-guide .guide-action[data-action]{background:var(--pepero-yellow);border-color:var(--pepero-ink);color:var(--pepero-ink)}
body[data-stage=send] .gift-hud-title{background:var(--pepero-violet);border-color:var(--pepero-violet);box-shadow:4px 4px 0 var(--pepero-yellow)}
body[data-stage=send] .gift-hud-title>span{color:var(--pepero-yellow)}
body[data-stage=send] .gift-action-buttons{background:var(--pepero-paper);border-color:var(--pepero-ink);box-shadow:4px 4px 0 var(--pepero-ink)}
body[data-stage=send] .gift-action-buttons .primary{background:var(--pepero-yellow);border-color:var(--pepero-ink);color:var(--pepero-ink)}

/* Public, optional result board uses the same paper and purple gift palette. */
.leaderboard{width:100%;min-width:0;margin:18px 0;border:2px solid #d8cbed;border-radius:18px;background:#fffdf8;color:#35243c;overflow:hidden}
.leaderboard summary{min-height:56px;padding:16px;font-size:max(18px,1.125rem);font-weight:800;cursor:pointer}
.leaderboard summary:focus-visible,.leaderboard button:focus-visible,.leaderboard input:focus-visible{outline:3px solid #6949d7;outline-offset:2px}
.leaderboard-body{display:grid;gap:12px;padding:0 16px 16px}
.leaderboard-body p{margin:0;color:#4f3b58;font-size:max(16px,1rem);line-height:1.5}
.leaderboard-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.leaderboard-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:48px;padding:8px 10px;border-radius:12px;background:#f0eaff;font-size:max(16px,1rem)}
.leaderboard-list li span{min-width:0;overflow-wrap:anywhere}.leaderboard-list li strong{white-space:nowrap;color:#6042c9}
.leaderboard-register{display:grid;gap:8px;padding-top:12px;border-top:1px solid #d8cbed}.leaderboard-register label{font-size:max(16px,1rem);font-weight:700}
.leaderboard-register input{width:100%;min-width:0;min-height:48px;padding:10px 12px;border:2px solid #d8cbed;border-radius:12px;background:#fffdf8;color:#35243c;font:inherit;font-size:max(16px,1rem)}
.leaderboard-register button{width:100%;min-height:48px;padding:12px;border:0;border-radius:12px;background:#6042c9;color:white;font-size:max(16px,1rem);font-weight:750}
.leaderboard-register button.leaderboard-remove{background:#f0eaff;color:#35243c}.leaderboard-register button:disabled{opacity:.55}.leaderboard [hidden]{display:none!important}

/* The result moment is a one-time invitation; the public board remains optional. */
.result-reveal{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:28px;background:transparent;color:#33212e;overflow:auto}
.result-reveal::backdrop{background:rgba(30,14,42,.78)}
.result-reveal-card{position:relative;overflow:hidden;display:grid;gap:10px;padding:32px 24px 24px;background:#fff8ea;border:3px solid #33212e;border-radius:28px;text-align:center;box-shadow:0 7px 0 #33212e;animation:result-pop .42s cubic-bezier(.19,1.4,.4,1) both}
.result-reveal-card>*:not(.result-confetti){position:relative;z-index:1}.result-reveal-kicker{margin:0;color:#6540de;font-weight:900;font-size:20px}.result-reveal-card h2{margin:0;font-size:clamp(28px,8vw,40px);line-height:1.2;word-break:keep-all;font-weight:900}.result-reveal-score{margin:0 auto 4px;padding:5px 24px;border-radius:18px;background:#ffda57;color:#33212e;line-height:1;transform:rotate(-3deg)}.result-reveal-score strong{font-size:clamp(62px,18vw,86px);font-weight:900}.result-reveal-score span{font-size:27px;font-weight:900}.result-reveal-label{margin:0;font-size:24px;font-weight:900}.result-name-label{font-size:16px;font-weight:700;text-align:left}.result-reveal-card input{width:100%;min-height:54px;padding:12px 16px;border:2px solid #d2bed9;border-radius:14px;background:#fff;color:#33212e;font:inherit;font-size:18px}.result-reveal-notice{margin:0;color:#695567;font-size:16px;line-height:1.45}.result-reveal-status{min-height:1.4em;margin:0;color:#a43837;font-size:16px;line-height:1.4}.result-reveal-primary,.result-reveal-skip{width:100%;min-height:52px;padding:12px;border:0;border-radius:14px;font:inherit;font-weight:850;font-size:18px;cursor:pointer}.result-reveal-primary{background:#5c37e8;color:#fff}.result-reveal-skip{background:#eee7fa;color:#382b42}.result-reveal-card button:disabled{opacity:.55}.result-reveal-card :is(input,button):focus-visible{outline:3px solid #f4974d;outline-offset:3px}.result-confetti{position:absolute;inset:0;pointer-events:none}.result-confetti i{position:absolute;color:#ff9a77;font-size:30px;font-style:normal;animation:result-sparkle 1s ease-in-out infinite alternate}.result-confetti i:nth-child(1){top:8%;left:7%}.result-confetti i:nth-child(2){top:15%;right:7%;color:#ffbf32;animation-delay:.2s}.result-confetti i:nth-child(3){top:42%;left:5%;color:#9e8bff;animation-delay:.35s}.result-confetti i:nth-child(4){top:42%;right:5%;animation-delay:.5s}@keyframes result-pop{from{opacity:0;transform:scale(.82) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes result-sparkle{from{transform:scale(.7) rotate(-15deg);opacity:.55}to{transform:scale(1.15) rotate(15deg);opacity:1}}@media(prefers-reduced-motion:reduce){.result-reveal-card,.result-confetti i{animation:none}}

/* Home: one clear first action, with the inbox and the shared board beside it. */
body[data-stage=home] .masthead,body[data-stage=home] .page-footer{display:none}
body[data-stage=home] .app-shell{min-height:100svh;margin:0 auto;padding:0 16px max(20px,env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background:#fff8ed}
.pepero-home{min-height:100svh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:28px 0 max(24px,env(safe-area-inset-bottom));color:#33212e}
.pepero-home-art{width:min(100%,342px);min-height:140px;margin:12px auto;display:grid;place-items:center}
.pepero-home-art img{width:100%;max-height:224px;object-fit:contain}
.pepero-home-spark{position:absolute;color:#f06b72;font-size:32px;font-weight:900}.pepero-home-spark-a{top:12%;left:5%}.pepero-home-spark-b{right:4%;bottom:15%;color:#f0a526}
.pepero-home-title{text-align:center}.pepero-home-title p{margin:0 0 6px;color:#6143db;font-size:18px;font-weight:850}.pepero-home-title h1{margin:0;color:#5632ed;font-size:clamp(42px,13vw,64px);font-weight:900;line-height:1.02;letter-spacing:-.06em}
.pepero-home-actions{display:grid;gap:12px;margin-top:32px;container-type:inline-size}.pepero-home-actions button,.pepero-home-back{min-height:60px;border:0;border-radius:16px;font:inherit;font-size:20px;font-weight:850;cursor:pointer}.pepero-home-actions button{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;word-break:keep-all}.pepero-home-actions button span{font-size:24px}.pepero-home-start{background:#5632ed;color:#fff9ea;box-shadow:0 5px 0 #33212e}.pepero-home-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pepero-home-inbox{background:#ffdb60;color:#33212e}.pepero-home-ranking{background:#eee6ff;color:#33212e}
@container (max-width:20rem){.pepero-home-shortcuts{grid-template-columns:1fr}}
.pepero-home-board{justify-content:flex-start;padding-top:max(24px,env(safe-area-inset-top))}.pepero-home-nav{display:flex;align-items:center;gap:16px;margin-bottom:16px}.pepero-home-nav h1{margin:0;font-size:26px}.pepero-home-back{padding:0 12px;background:#eee6ff;color:#33212e;font-size:16px}.pepero-home-board .leaderboard{margin:0;overflow:visible}.pepero-home-board .leaderboard summary{min-height:56px}
@media(max-height:600px){.pepero-home{justify-content:flex-start;padding-top:14px}.pepero-home-art{width:min(27vh,145px);margin-bottom:8px}.pepero-home-title h1{font-size:clamp(34px,8vh,48px)}.pepero-home-actions{margin-top:15px}}
/* Make start and restart choices legible without losing a saved draft. */
.pepero-home-nickname{display:grid;gap:6px;min-width:0;text-align:left}.pepero-home-nickname label{font-size:16px;font-weight:800}.pepero-home-nickname input{width:100%;min-width:0;min-height:48px;padding:10px 14px;border:2px solid #d2bed9;border-radius:14px;background:#fffdf8;color:#33212e;font:inherit;font-size:18px}.pepero-home-nickname p{margin:0;color:#594458;font-size:16px;line-height:1.4}.pepero-home-name-error:empty{display:none}.pepero-home-name-error:not(:empty){color:#a43837}.pepero-home-fresh{justify-content:center!important;background:#f0eaff;color:#33212e}.restart-confirm{width:min(420px,calc(100% - 32px));padding:24px;border:2px solid #33212e;border-radius:20px;background:#fff8ed;color:#33212e}.restart-confirm::backdrop{background:#241527a8}.restart-confirm h2{margin:0 0 8px;font-size:24px}.restart-confirm p{margin:0 0 20px;font-size:16px}.restart-confirm div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.restart-confirm button{min-height:48px;padding:10px;border:0;border-radius:12px;background:#ede5ff;color:#33212e;font:inherit;font-weight:800}.restart-confirm .restart-discard{background:#ffdc60}.result-reveal[data-auto=true] :is(.result-reveal-label,.result-name-label,#result-name,.result-reveal-notice,[type=submit],.result-reveal-skip){display:none}
.recipient-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:2px solid #33212e;border-radius:20px;background:#fff8ed;color:#33212e}.recipient-dialog::backdrop{background:#241527a8}.recipient-dialog h2{margin:0 0 16px;font-size:24px}.recipient-dialog label{display:block;margin:12px 0 6px;font-size:16px;font-weight:700}.recipient-dialog label span{font-weight:400}.recipient-dialog :is(input,textarea){display:block;width:100%;min-height:48px;padding:10px 12px;border:2px solid #d2bed9;border-radius:12px;background:white;color:#33212e;font:inherit;font-size:18px}.recipient-dialog textarea{resize:vertical}.recipient-hint{margin:10px 0 0;color:#66566a;font-size:15px;line-height:1.4}.recipient-status{min-height:1.4em;margin:8px 0;color:#a43837}.recipient-dialog form>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.recipient-dialog button{min-height:48px;padding:10px;border:0;border-radius:12px;background:#ede5ff;color:#33212e;font:inherit;font-weight:800}.recipient-dialog .recipient-confirm{background:#ffdc60}.recipient-dialog :is(input,textarea,button):focus-visible{outline:3px solid #6949d7;outline-offset:2px}

/* Received gifts are visible on the web as well as inside the native apps. */
body[data-stage=receive] .gift-hud-title>span{display:none}
body[data-stage=receive] .gift-hud-title h1{white-space:normal;overflow-wrap:anywhere}
body[data-stage=receive] .gift-scene-receive #work-canvas.game-canvas{top:calc(env(safe-area-inset-top) + 76px);bottom:calc(env(safe-area-inset-bottom) + 176px);height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 252px)}
body[data-stage=receive] .gift-scene-receive::before{content:'✦     ✧     ✦';position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 84px);right:18px;bottom:calc(env(safe-area-inset-bottom) + 184px);left:18px;padding-top:13px;border:2px solid #d3c4e7;border-radius:22px;box-shadow:inset 0 0 0 6px rgba(255,248,237,.45);color:#6942dc;font-size:18px;font-weight:800;letter-spacing:.08em;text-align:center;pointer-events:none}
body[data-stage=receive] .gift-scene-receive.gift-panel-open::before{display:none}
.gift-just-opened::after{content:'✦  ✧  ✦';position:absolute;z-index:7;top:22%;left:0;right:0;color:#ffce4b;font-size:32px;text-align:center;pointer-events:none;animation:gift-celebrate 1.2s ease-out both}
@keyframes gift-celebrate{0%{opacity:0;transform:translateY(24px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-55px) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.gift-just-opened::after{animation:none;display:none}}
.inbox-group{margin-top:20px}.inbox-group h3{margin:0 0 8px;font-size:18px}.inbox-group h3 span{color:#6340cf}.inbox-entry strong{display:block;overflow-wrap:anywhere}.inbox-empty{margin-top:18px;padding:18px;border-radius:14px;background:#f1eaff;color:#33212e}.inbox-empty p{margin:8px 0 0;line-height:1.5}