@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Poor+Story&display=swap');

:root {
  --ink: #4b332c;
  --ink-soft: #70544a;
  --paper: #fff8e7;
  --paper-deep: #f3e2bd;
  --coral: #dd6f54;
  --coral-dark: #b94f3e;
  --gold: #efb750;
  --sage: #789b73;
  --sage-dark: #4f755e;
  --blue: #83b4bd;
  --cream: #fff2d5;
  --red: #c94e46;
  --shadow: 5px 6px 0 rgba(75, 51, 44, .2);
  --line: 2.5px solid var(--ink);
  --font-title: "Poor Story", "Apple SD Gothic Neo", sans-serif;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif;
}

* { box-sizing: border-box; }
html {
  color-scheme: light;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100%;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0 5%, transparent 20%),
    radial-gradient(circle at 82% 22%, rgba(238,183,80,.2) 0 3%, transparent 16%),
    #e9b978;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 1000;
}
button, input, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
img { max-width: 100%; }
button, .button, input, select, .tab-button, .order-button, .buy-button,
.work-choices > button, .wellness-card, .filter-row button, .mobile-menu-button,
.decorate-button, .decor-swatch, .challenge-tabs button {
  -webkit-tap-highlight-color: rgba(75, 51, 44, 0.12);
}
button, .button, .tab-button, .order-button, .buy-button, .work-choices > button,
.wellness-card, .filter-row button, .mobile-menu-button, .decorate-button,
.decor-swatch, .challenge-tabs button {
  touch-action: manipulation;
}
.room-item-stickers, .room-item-sticker, .room-item-sticker button {
  touch-action: none;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #286b7a;
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; opacity: .52; }
[hidden] { display: none !important; }
svg { display: block; }
.svg-defs { position: absolute; }

.app-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--paper);
  box-shadow: 0 0 42px rgba(75,51,44,.26);
}
.ink { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; filter: url(#wobble); }
.ink-thin { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: url(#wobble); }
.code-stroke, .screen-code, .video-lines, .keyboard-lines, .face-stroke, .face-line, .steam, .floor-board, .wall-pattern, .poster-code, .neon-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.code-stroke, .screen-code { stroke-width: 7; }
.screen-code.green { stroke: #71987d; }
.screen-code.coral { stroke: #da7357; stroke-width: 4; }
.video-lines, .keyboard-lines, .poster-code { stroke-width: 4; opacity: .74; }
.face-stroke, .face-line { stroke-width: 5; }
.steam { stroke-width: 4; opacity: .7; }
.floor-board { stroke-width: 2; opacity: .35; }
.wall-pattern { stroke: #d69e73; stroke-width: 3; opacity: .28; }
.neon-line { stroke: #f4c95d; stroke-width: 7; filter: drop-shadow(0 0 5px #f5c65a); }

.button {
  border: var(--line);
  min-height: 48px;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--cream);
  font-weight: 700;
  box-shadow: 3px 4px 0 rgba(75,51,44,.22);
  border-radius: 12px 16px 11px 15px;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(75,51,44,.2); }
.button:active:not(:disabled) { transform: translateY(2px); box-shadow: 1px 2px 0 rgba(75,51,44,.24); }
.button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { background: var(--coral); color: #fffaf0; text-shadow: 0 1px rgba(75,51,44,.25); }
.button-ghost { background: rgba(255,248,231,.82); }

/* Setup */
.setup-screen {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 54px);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
  grid-template-areas: "copy form" "art form";
  gap: 12px 42px;
  align-items: center;
  background:
    linear-gradient(118deg, rgba(255,250,229,.92), rgba(247,221,176,.75)),
    repeating-linear-gradient(5deg, transparent 0 19px, rgba(105,72,49,.035) 20px 21px);
}
.setup-screen::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -110px;
  top: -120px;
  border: 3px dashed rgba(75,51,44,.14);
  border-radius: 50%;
}
.setup-copy { grid-area: copy; position: relative; z-index: 2; align-self: end; }
.eyebrow, .modal-kicker {
  margin: 0 0 5px;
  color: var(--coral-dark);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
}
.setup-copy h1 {
  margin: -6px 0 5px;
  font: 400 clamp(2.6rem, 8vw, 4.4rem)/.95 var(--font-title);
  letter-spacing: -.04em;
  transform: rotate(-1.5deg);
}
.setup-copy h1 span { color: var(--coral); text-shadow: 3px 3px 0 #f3c567; }
.setup-copy p:not(.eyebrow) { margin: 0; max-width: 520px; font-size: 1rem; line-height: 1.75; }
.setup-copy .button { margin-top: 18px; }
.setup-visual { grid-area: art; position: relative; align-self: start; width: min(100%, 520px); }
.setup-room-canvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px 18px 12px 16px;
  cursor: default;
}
.setup-room-canvas.has-save { cursor: pointer; }
.setup-room-stickers,
.setup-room-stickers .room-item-sticker {
  pointer-events: none !important;
  cursor: default;
}
.setup-status-chip {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  max-width: min(78%, 340px);
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: rgba(255,253,242,.93);
  box-shadow: 2px 3px 0 rgba(75,51,44,.15);
  font-size: .62rem;
  line-height: 1.35;
  pointer-events: none;
}
.setup-status-chip b { font-size: .8rem; font-family: var(--font-title); }
.setup-status-chip span {
  padding: 2px 6px;
  border: 1px solid rgba(75,51,44,.28);
  background: #fff6df;
  border-radius: 999px;
}
.profile-sheet {
  grid-area: form;
  position: relative;
  z-index: 2;
  padding: 28px;
  background: rgba(255,250,235,.94);
  border: var(--line);
  box-shadow: var(--shadow);
  transform: rotate(.35deg);
}
.paper-tape { position: absolute; width: 100px; height: 26px; left: calc(50% - 50px); top: -14px; background: rgba(237,184,83,.63); transform: rotate(-2deg); }
.form-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-title small { color: var(--coral-dark); font-weight: 700; }
.form-title h2 { margin: -2px 0 0; font: 2.2rem/1 var(--font-title); }
.form-title > span { display: grid; place-items: center; width: 58px; height: 50px; background: var(--sage); color: white; border: var(--line); border-radius: 50%; transform: rotate(7deg); font: 1.3rem var(--font-title); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field { display: grid; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field > span:first-child, .choice-fieldset legend, .avatar-fieldset legend { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select {
  width: 100%;
  height: 46px;
  border: 2px solid var(--ink);
  padding: 0 12px;
  background: #fffdf5;
  border-radius: 8px 12px 9px 11px;
  color: var(--ink);
}
.unit-input { position: relative; display: block; }
.unit-input small { position: absolute; right: 11px; top: 12px; color: var(--ink-soft); }
.unit-input input { padding-right: 38px; }
.choice-fieldset, .avatar-fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.choice-fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-fieldset legend, .avatar-fieldset legend { margin-bottom: 7px; }
.choice-fieldset label input, .avatar-fieldset label input { position: absolute; opacity: 0; }
.choice-fieldset label > span {
  min-height: 86px;
  padding: 12px 9px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 2px solid #bda98d;
  background: #fffdf6;
  text-align: center;
  border-radius: 11px;
  transition: .18s ease;
}
.choice-fieldset label b { font-size: .88rem; }
.choice-fieldset label small { font-size: .67rem; line-height: 1.35; color: var(--ink-soft); }
.choice-fieldset input:checked + span { border-color: var(--ink); background: #f7dca8; box-shadow: 2px 3px 0 rgba(75,51,44,.18); transform: translateY(-2px) rotate(-1deg); }
.avatar-fieldset { display: flex; flex-wrap: wrap; gap: 7px; }
.avatar-fieldset legend { width: 100%; }
.avatar-fieldset label > span { min-height: 42px; padding: 7px 11px; display: flex; align-items: center; gap: 7px; border: 2px solid #bda98d; background: #fffdf6; border-radius: 999px; font-size: .78rem; }
.avatar-fieldset input:checked + span { border-color: var(--ink); background: #dce8ca; }
.hair-dot { display: block; width: 23px; height: 23px; background: #4b302a; border: 2px solid var(--ink); }
.hair-dot.bob { border-radius: 50% 50% 42% 42%; }
.hair-dot.long { border-radius: 50% 50% 18% 18%; height: 27px; }
.hair-dot.bun { border-radius: 50%; position: relative; }
.hair-dot.bun::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #4b302a; top: -7px; left: 5px; }
.start-button { width: 100%; margin-top: 20px; font-size: 1rem; }
.save-note { margin: 10px 0 0; text-align: center; font-size: .68rem; color: var(--ink-soft); line-height: 1.5; }

/* Game shell */
.game-screen { padding: 18px clamp(14px, 3vw, 34px) 46px; background: linear-gradient(#fff7e5, #f8ead1); min-height: 100dvh; }
.game-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand-mark { border: 0; background: none; min-height: 48px; display: flex; align-items: center; gap: 10px; font: 1.7rem var(--font-title); padding: 0; }
.brand-bowl { width: 39px; height: 26px; display: block; position: relative; border: 2px solid var(--ink); border-radius: 5px 5px 20px 20px; background: var(--coral); transform: rotate(-3deg); }
.brand-bowl::before { content: ""; position: absolute; left: 5px; right: 5px; top: -6px; border-top: 3px solid var(--ink); border-radius: 50%; }
.brand-bowl i { position: absolute; width: 9px; height: 14px; left: 14px; top: -16px; border-left: 2px solid var(--ink); border-radius: 50%; transform: rotate(12deg); }
.period-pill { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); padding: 7px 11px; background: #f0cf86; border-radius: 7px 14px 8px 12px; box-shadow: 2px 3px 0 rgba(75,51,44,.16); }
.period-pill span { font-size: .72rem; color: var(--ink-soft); }
.period-pill b { font: 1.2rem var(--font-title); }
.month-track { height: 24px; position: relative; margin: 13px 2px 8px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; border-bottom: 5px solid #d9c29d; }
.month-track > div { position: absolute; left: 0; bottom: -5px; width: 4%; height: 5px; background: var(--coral); transition: width .45s ease; }
.month-track span { position: relative; z-index: 1; text-align: center; font: .7rem var(--font-title); color: var(--ink-soft); }
.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 16px; }
.status-strip > div { min-height: 61px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 2px solid var(--ink); background: rgba(255,253,244,.84); box-shadow: 2px 3px 0 rgba(75,51,44,.11); }
.status-strip > div:nth-child(1) { transform: rotate(-.5deg); }
.status-strip > div:nth-child(2) { transform: rotate(.45deg); }
.status-strip > div:nth-child(3) { transform: rotate(-.3deg); }
.status-strip svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--coral-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.status-strip small, .status-strip b { display: block; }
.status-strip small { font-size: .62rem; color: var(--ink-soft); }
.status-strip b { font-size: .86rem; font-variant-numeric: tabular-nums; }

/* Main room */
.room-hero { margin-bottom: 14px; }
.room-topline { display: flex; align-items: end; justify-content: space-between; margin: 0 4px 8px; }
.room-topline small, .week-title small, .panel-heading small, .next-week-card small { color: var(--coral-dark); font-size: .72rem; font-weight: 700; }
.room-topline h1 { margin: -4px 0 0; font: 2rem var(--font-title); }
.decorate-button { min-height: 42px; padding: 8px 13px; background: #dce9ca; font-size: .78rem; }
.decorate-button svg { width: 18px; height: 18px; }
.room-canvas-wrap { position: relative; border: 3px solid var(--ink); background: #ecd0a0; box-shadow: var(--shadow); overflow: hidden; }
.room-canvas-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.1), transparent 35% 75%, rgba(85,52,36,.1)); mix-blend-mode: multiply; }
.room-art-frame { position: relative; width: 100%; height: auto; }
.room-art-frame .generated-room-art { display: block; width: 100%; height: auto; object-fit: contain; }
.room-scene { width: 100%; height: auto; min-height: 310px; }
.generated-room-art { display: block; width: 100%; height: auto; object-fit: contain; }
.room-scene { display: none; }
.room-item-stickers { position: absolute; z-index: 2; inset: 0; display: block; pointer-events: auto; touch-action: none; }
.room-item-sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 16%);
  height: auto;
  z-index: var(--z, 2);
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  -webkit-user-drag: none;
}
.room-item-sticker.painted { width: var(--size, 18%); height: auto; z-index: var(--z, 2); mix-blend-mode: normal; filter: none; }
.room-item-sticker.floor { transform: translate(-50%, -100%) rotate(var(--rotation)); transform-origin: 50% 100%; }
.room-item-sticker.flat { transform: translate(-50%, -50%) rotate(var(--rotation)); transform-origin: 50% 50%; }
.room-item-sticker.wall { transform: translate(-50%, -50%) rotate(var(--rotation)); transform-origin: 50% 50%; }
.room-item-sticker.dragging { cursor: grabbing; z-index: 40 !important; }
.room-item-sticker.selected { outline: 1.5px dashed rgba(75, 51, 44, .42); outline-offset: 4px; border-radius: 8px; }
.room-item-sticker .sticker-art,
.room-item-sticker img.sticker-art { width: 100%; height: auto; display: block; pointer-events: none; position: relative; z-index: 1; }
.room-item-sticker svg { width: 100%; height: auto; }
.room-item-sticker.floor::after,
.room-item-sticker.flat::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(50, 28, 18, .28) 0%, rgba(50, 28, 18, .1) 46%, transparent 74%);
}
.room-item-sticker.floor::after {
  left: 50%;
  bottom: 0;
  width: 64%;
  height: 11%;
  transform: translate(-42%, 38%);
}
.room-item-sticker.floor[data-item-id="lamp"]::after,
.room-item-sticker.floor[data-item-id="plant"]::after,
.room-item-sticker.floor[data-item-id="fridge"]::after {
  width: 72%;
  height: 13%;
  background: radial-gradient(ellipse at center, rgba(45, 26, 16, .32) 0%, rgba(45, 26, 16, .12) 50%, transparent 74%);
}
.room-item-sticker.floor[data-item-id="lamp"]::after { width: 58%; height: 9%; }
.room-item-sticker.flat::after {
  left: 50%;
  top: 50%;
  width: 90%;
  height: 38%;
  transform: translate(-50%, -35%);
  background: radial-gradient(ellipse at center, rgba(50, 28, 18, .16) 0%, rgba(50, 28, 18, .06) 55%, transparent 78%);
}
.room-item-sticker.wall .sticker-art { filter: drop-shadow(3px 5px 4px rgba(55, 32, 22, .26)); }
.rotate-handle {
  display: none;
  position: absolute;
  left: 50%;
  top: -11px;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff8e7;
  color: var(--ink);
  font: 700 12px/1 var(--font-title);
  box-shadow: 1px 2px 0 rgba(75, 51, 44, .18);
  transform: translate(-50%, -70%);
  cursor: grab;
  z-index: 3;
  pointer-events: auto;
}
.room-item-sticker.selected .rotate-handle { display: grid; place-items: center; }
.rotate-handle:active { cursor: grabbing; }
.clear-handle {
  display: none;
  position: absolute;
  left: calc(50% + 14px);
  top: -11px;
  margin: 0;
  padding: 0 7px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff8e7;
  color: var(--ink);
  font: 700 10px/1 var(--font-title);
  box-shadow: 1px 2px 0 rgba(75, 51, 44, .18);
  transform: translate(0, -70%);
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  white-space: nowrap;
}
.room-item-sticker.selected .clear-handle { display: grid; place-items: center; }
.clear-handle:active { transform: translate(0, calc(-70% + 1px)); }
.room-canvas-wrap.is-placing .thought-bubble { z-index: 1; }
.room-canvas-wrap.is-placing .room-item-stickers { z-index: 6; }
.shop-photo { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: normal; }
.game-menu-drawer { display: contents; }
.mobile-menu-button, .mobile-menu-backdrop, .mobile-drawer-head { display: none; }
.hero-portrait {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 24%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(3px 6px 8px rgba(55, 32, 22, .32));
  transition: opacity .2s ease, width .2s ease;
}
.hero-portrait.is-moment { width: 30%; }
.thought-bubble { position: absolute; z-index: 5; left: 15px; top: 13px; max-width: 260px; padding: 10px 13px; border: 2px solid var(--ink); background: rgba(255,253,242,.93); box-shadow: 2px 3px 0 rgba(75,51,44,.15); font-size: .72rem; transform: rotate(-1deg); pointer-events: none; }
.thought-bubble::after { content: ""; position: absolute; left: 38px; bottom: -9px; width: 14px; height: 14px; background: #fffdf2; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.room-caption { min-height: 35px; padding: 7px 11px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 2px solid var(--ink); background: #f8e5bd; font-size: .65rem; }
.room-caption > span { display: flex; align-items: center; gap: 6px; }
.room-caption b { color: var(--sage-dark); }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(201,78,70,.18); animation: pulse 2s ease-in-out infinite; }
.owned-item { display: none; }
.owned-item.visible { display: inline; animation: popIn .35s cubic-bezier(.2,.9,.3,1.4); }
g.owned-item.visible { display: inline; }
.room-scene[data-wall="peach"] .room-wall { fill: #f5dfb9; }
.room-scene[data-wall="sage"] .room-wall { fill: #cdd9b1; }
.room-scene[data-wall="blue"] .room-wall { fill: #b8d2d5; }
.room-scene[data-wall="night"] .room-wall { fill: #7e829f; }
.room-scene[data-wall="night"] .wall-pattern { stroke: #f5dc9a; opacity: .35; }
.room-scene[data-rug="sunset"] .room-rug { fill: #e97859; }
.room-scene[data-rug="leaf"] .room-rug { fill: #719474; }
.room-scene[data-rug="ocean"] .room-rug { fill: #74aeb7; }
.room-scene[data-poster="sun"] .poster-sun { display: block; }
.room-scene[data-poster="none"] .poster-sun { display: none; }
.room-scene[data-hair="bob"] .hair:not(.bob), .room-scene[data-hair="long"] .hair:not(.long), .room-scene[data-hair="bun"] .hair:not(.bun) { display: none; }
.room-scene[data-hair="bob"] .hair.bob, .room-scene[data-hair="long"] .hair.long, .room-scene[data-hair="bun"] .hair.bun { display: block; }

.week-dashboard { border: var(--line); background: #fffaf0; padding: 14px; box-shadow: 3px 4px 0 rgba(75,51,44,.14); margin-bottom: 14px; }
.week-title { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 10px; }
.week-title h2 { margin: 0; font: 1.55rem var(--font-title); }
.week-slots { display: flex; gap: 7px; }
.week-slots span { padding: 5px 8px; border: 1.5px solid var(--ink); background: #f5e8c9; border-radius: 5px; font-size: .65rem; }
.work-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.work-choices > button { min-height: 74px; border: 2px solid var(--ink); padding: 9px 12px; display: flex; align-items: center; gap: 10px; text-align: left; background: #f8e1ac; box-shadow: 2px 3px 0 rgba(75,51,44,.14); transition: .18s ease; }
.work-choices > button:nth-child(2) { background: #f3cbc0; }
.work-choices > button:hover:not(:disabled) { transform: translateY(-2px); }
.work-choices > button.done { background: #c9dcbf; }
.work-choices span:not(.work-icon) { display: grid; }
.work-choices small { font-size: .58rem; color: var(--ink-soft); }
.work-choices b { font-size: .82rem; }
.work-choices em { font-style: normal; font-size: .65rem; color: var(--sage-dark); }
#incomeStory { margin: 8px 2px 0; font-size: .68rem; color: var(--ink-soft); }
.work-icon { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff8e7; font: 1rem var(--font-title); border-radius: 50%; }
.play-icon i { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--coral); margin-left: 4px; }

/* Tabs and panels */
.game-tabs { position: sticky; top: 6px; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border: var(--line); background: rgba(246,226,190,.94); backdrop-filter: blur(8px); box-shadow: 3px 4px 0 rgba(75,51,44,.14); }
.tab-button { position: relative; min-height: 51px; border: 0; background: transparent; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; border-radius: 7px; }
.tab-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-button.active { background: var(--coral); color: white; box-shadow: 2px 3px 0 rgba(75,51,44,.2); }
.tab-button i { position: absolute; top: 4px; right: 12px; width: 17px; height: 17px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 .65rem sans-serif; }
.tab-panel { margin-top: 12px; padding: clamp(14px, 3vw, 24px); border: var(--line); background: rgba(255,252,242,.91); box-shadow: var(--shadow); animation: panelIn .22s ease-out; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 9px; }
.panel-heading small { display: block; }
.panel-heading h2 { margin: -2px 0 0; font: 1.85rem var(--font-title); }
.limit-badge { flex: 0 0 auto; padding: 6px 9px; display: flex; align-items: center; gap: 6px; border: 2px solid var(--ink); background: #f4c66c; transform: rotate(2deg); }
.limit-badge b { font: 1.8rem/1 var(--font-title); }
.limit-badge span { font-size: .56rem; line-height: 1.25; }
.limit-badge.green { background: #c4d7ad; }
.panel-note { margin: 0 0 14px; padding: 9px 11px; background: #f8dfcf; border-left: 4px solid var(--coral); font-size: .7rem; line-height: 1.55; }
.green-note { background: #e2edd2; border-color: var(--sage); }
.filter-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 8px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { flex: 0 0 auto; min-height: 39px; padding: 7px 13px; border: 1.5px solid var(--ink); background: #fffdf5; border-radius: 999px; font-size: .68rem; }
.filter-row button.active { background: var(--ink); color: #fff8e7; }

/* Food */
.food-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.food-card { overflow: hidden; border: 2px solid var(--ink); background: #fffdfa; box-shadow: 2px 3px 0 rgba(75,51,44,.12); transition: transform .18s ease, box-shadow .18s ease; }
.food-card:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: 4px 6px 0 rgba(75,51,44,.12); }
.food-art { position: relative; aspect-ratio: 1.65; display: grid; place-items: center; overflow: hidden; background: #f4d8a6; border-bottom: 2px solid var(--ink); }
.food-art::before { content: ""; position: absolute; width: 120%; height: 70%; left: -10%; bottom: -38%; border: 2px solid rgba(75,51,44,.2); border-radius: 50%; background: rgba(255,255,255,.2); }
.food-art svg { position: relative; width: 88%; height: 88%; filter: drop-shadow(2px 3px 0 rgba(75,51,44,.14)); }
.ai-food-crop {
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("art/food-sheet.webp");
  background-size: 300% 400%;
  background-position: var(--sprite-x) var(--sprite-y);
  background-repeat: no-repeat;
}
.food-tag { position: absolute; top: 7px; left: 7px; z-index: 2; padding: 3px 6px; background: #fff5da; border: 1.5px solid var(--ink); font-size: .53rem; transform: rotate(-2deg); }
.food-copy { padding: 10px; }
.food-store { color: var(--ink-soft); font-size: .58rem; }
.food-copy h3 { margin: 2px 0 7px; min-height: 37px; font-size: .84rem; line-height: 1.4; }
.food-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; font-size: .57rem; color: var(--ink-soft); }
.food-rating { color: #976818; font-weight: 700; }
.food-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.food-price { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-button { min-height: 38px; border: 1.5px solid var(--ink); padding: 6px 9px; background: var(--coral); color: white; font-size: .65rem; font-weight: 700; box-shadow: 1px 2px 0 rgba(75,51,44,.2); }
.order-button.ordered { background: var(--sage); }

/* Wellness */
.wellness-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.wellness-card { position: relative; min-height: 125px; padding: 14px; display: grid; grid-template-columns: 49px 1fr; gap: 11px; border: 2px solid var(--ink); background: #fffdf6; text-align: left; box-shadow: 2px 3px 0 rgba(75,51,44,.12); transition: .18s ease; }
.wellness-card:hover:not(:disabled) { transform: translateY(-2px); }
.wellness-card.done { background: #dce9cd; }
.wellness-art { width: 49px; height: 49px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #f5d9a2; }
.wellness-art svg { width: 31px; height: 31px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wellness-copy { display: grid; align-content: start; gap: 3px; }
.wellness-copy small { color: var(--coral-dark); font-size: .56rem; font-weight: 700; }
.wellness-copy b { font-size: .84rem; }
.wellness-copy span { font-size: .62rem; line-height: 1.45; color: var(--ink-soft); }
.wellness-effects { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; }
.wellness-effects i { padding: 3px 6px; background: #edf1df; border: 1px solid #9aae87; font: normal .54rem var(--font-body); }

/* Shop */
.shop-wallet { padding: 7px 10px; border: 2px solid var(--ink); background: #f5cb73; text-align: right; transform: rotate(1deg); }
.shop-wallet small, .shop-wallet b { display: block; }
.shop-wallet small { font-size: .52rem; color: var(--ink-soft); }
.shop-wallet b { font: 1.2rem var(--font-title); }
.weight-recommendation { margin-bottom: 12px; padding: 12px; border: 2px solid var(--ink); background: #f5dfd5; font-size: .7rem; line-height: 1.5; }
.weight-recommendation b { color: var(--coral-dark); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.shop-card { position: relative; overflow: hidden; border: 2px solid var(--ink); background: #fffdfa; box-shadow: 2px 3px 0 rgba(75,51,44,.12); }
.shop-card.locked::after { content: ""; position: absolute; inset: 0; background: rgba(75,51,44,.16); pointer-events: none; }
.shop-art { height: 113px; position: relative; display: grid; place-items: center; background: #e6edcf; border-bottom: 2px solid var(--ink); }
.shop-art svg { width: 85%; height: 90%; }
.shop-arrival { position: absolute; left: 6px; top: 6px; padding: 3px 5px; border: 1px solid var(--ink); background: #75a682; color: white; font-size: .5rem; }
.shop-card[data-category="방꾸미기"] .shop-art { background: #f1d2bb; }
.shop-card[data-category="가구"] .shop-art { background: #f1d2bb; }
.shop-card[data-category="생활"] .shop-art { background: #f5e4c8; }
.shop-card[data-category="운동"] .shop-art { background: #c9e0df; }
.shop-copy { padding: 9px; }
.shop-copy > small { color: var(--ink-soft); font-size: .53rem; }
.shop-copy h3 { margin: 2px 0 5px; min-height: 35px; font-size: .75rem; line-height: 1.4; }
.shop-benefit { min-height: 31px; font-size: .55rem; line-height: 1.4; color: var(--sage-dark); }
.shop-price-row { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-top: 7px; }
.shop-price-row b { font-size: .7rem; font-variant-numeric: tabular-nums; }
.buy-button { min-height: 36px; border: 1.5px solid var(--ink); padding: 5px 7px; background: var(--gold); font-size: .59rem; font-weight: 700; }
.buy-button.owned { background: #bdcfac; }
.lock-note { position: relative; z-index: 2; margin: 5px 9px 9px; padding: 4px; background: var(--ink); color: white; font-size: .52rem; text-align: center; }
.medical-note { margin: 14px 0 0; color: var(--ink-soft); font-size: .57rem; line-height: 1.5; }

/* Records */
.goal-chip { padding: 7px 9px; border: 2px solid var(--ink); background: #caddb9; font-size: .65rem; }
.trend-chart { min-height: 210px; padding: 9px; border: 2px solid var(--ink); background: #f9f0dc; }
.trend-chart svg { width: 100%; height: auto; }
.chart-grid { stroke: #c9b99e; stroke-width: 1; stroke-dasharray: 4 5; }
.chart-weight { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.chart-health { fill: none; stroke: var(--sage-dark); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.chart-goal { fill: none; stroke: #a98b67; stroke-width: 2; stroke-dasharray: 7 6; }
.chart-label { font: 10px var(--font-body); fill: var(--ink-soft); }
.record-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.record-totals > div { padding: 9px; border: 1.5px solid var(--ink); background: #fffdf5; text-align: center; }
.record-totals small, .record-totals b { display: block; }
.record-totals small { font-size: .52rem; color: var(--ink-soft); }
.record-totals b { margin-top: 2px; font: 1.05rem var(--font-title); }
.month-rows { display: grid; gap: 6px; }
.month-row { display: grid; grid-template-columns: 65px repeat(4, 1fr); gap: 5px; align-items: center; padding: 8px 9px; border: 1.5px solid #aa9477; background: #fffaf0; font-size: .58rem; }
.month-row b { font-size: .67rem; }
.month-row.empty { color: #9b8972; background: #f0e6d2; }

.next-week-card { margin-top: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border: var(--line); background: #e1ebcf; box-shadow: 3px 4px 0 rgba(75,51,44,.13); }
.next-week-card p { margin: 2px 0 0; font-size: .7rem; line-height: 1.45; }
.button-next { flex: 0 0 auto; min-width: 132px; background: var(--sage); color: white; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(53,37,31,.66); backdrop-filter: blur(4px); }
.modal-backdrop > section { position: relative; width: min(100%, 510px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 28px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 8px 10px 0 rgba(35,23,18,.28); animation: modalIn .25s cubic-bezier(.2,.85,.3,1.15); }
.modal-backdrop h2 { margin: 0 0 7px; font: 2rem/1.05 var(--font-title); }
.modal-backdrop p { font-size: .72rem; line-height: 1.6; }
.modal-close { position: absolute; right: 10px; top: 9px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; }
.modal-close svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.decor-options { display: grid; gap: 13px; margin: 18px 0; }
.decor-group > span { display: block; margin-bottom: 6px; font-size: .66rem; font-weight: 700; }
.decor-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.decor-swatch { min-height: 62px; padding: 7px; border: 2px solid #ad997f; background: #fffdf5; font-size: .58rem; }
.decor-swatch i { display: block; height: 28px; margin-bottom: 4px; border: 1px solid var(--ink); }
.decor-swatch.active { border-color: var(--ink); box-shadow: 2px 3px 0 rgba(75,51,44,.2); transform: translateY(-2px); }
.owned-count { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px dashed #a99173; font-size: .7rem; }
.owned-items { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.owned-items span { padding: 5px 8px; border: 1.5px solid var(--ink); background: #e4edcf; font-size: .58rem; }
.decor-modal > .button { width: 100%; }
.challenge-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 0 10px; }
.challenge-tabs button { min-height: 44px; border: 2px solid var(--ink); background: #fffdf5; font-size: .7rem; }
.challenge-tabs button.active { background: var(--gold); box-shadow: 2px 3px 0 rgba(75,51,44,.18); }
.challenge-stage { position: relative; padding: 12px; border: 2px solid var(--ink); background: #f5e3bd; }
.timer { position: absolute; right: 8px; top: 7px; z-index: 2; width: 50px; height: 44px; display: grid; place-items: center; background: #fff6dd; border: 2px solid var(--ink); font: .7rem var(--font-body); transform: rotate(3deg); }
.timer span { font: 1.2rem var(--font-title); }
.tap-target { width: 184px; height: 184px; margin: 8px auto 13px; display: grid; place-items: center; align-content: center; gap: 3px; border: 3px solid var(--ink); border-radius: 50%; background: var(--coral); color: white; box-shadow: 0 8px 0 #a54d3d, 0 10px 0 var(--ink); touch-action: manipulation; user-select: none; }
.tap-target:active { transform: translateY(6px) scale(.98); box-shadow: 0 2px 0 #a54d3d, 0 4px 0 var(--ink); }
.tap-target b { font: 2rem var(--font-title); }
.tap-target small { font-size: .72rem; }
.shake-target { min-height: 205px; text-align: center; padding: 13px; }
.shake-target > b, .shake-target > small { display: block; }
.shake-target > b { margin-top: 6px; }
.shake-target > small { margin: 2px 0 10px; }
.phone-drawing { width: 68px; height: 111px; margin: 0 auto; padding: 10px 7px; border: 3px solid var(--ink); border-radius: 12px; background: #fffdf4; transform: rotate(-6deg); animation: phoneShake .7s ease-in-out infinite; }
.phone-drawing i { display: block; width: 100%; height: 100%; background: #87b9bf; border: 2px solid var(--ink); }
.shake-target p { margin: 8px 0 0; font-size: .58rem; color: var(--ink-soft); }
.challenge-progress { height: 13px; border: 2px solid var(--ink); background: #fff8e6; overflow: hidden; }
.challenge-progress i { display: block; width: 0; height: 100%; background: var(--sage); transition: width .08s ease-out; }
.challenge-message { margin: 10px 0 0 !important; text-align: center; font-weight: 700; color: var(--coral-dark); }
.report-pin { position: absolute; top: 12px; right: 14px; width: 33px; height: 33px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); box-shadow: 2px 3px 0 rgba(75,51,44,.18); }
.month-modal { transform: rotate(-.3deg); }
.month-report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 16px 0; }
.month-report-stats > div { padding: 11px 6px; border: 1.5px solid var(--ink); background: #fffdf5; text-align: center; }
.month-report-stats small, .month-report-stats b { display: block; }
.month-report-stats small { font-size: .54rem; color: var(--ink-soft); }
.month-report-stats b { font: 1.1rem var(--font-title); }
.month-comparison { padding: 10px 12px; border-left: 4px solid var(--sage); background: #e4ecd4; font-size: .68rem; line-height: 1.5; }
.month-modal > .button { width: 100%; margin-top: 15px; }

/* Ending */
.ending-screen { min-height: 100dvh; padding: clamp(18px, 4vw, 48px); background: linear-gradient(#7f9db1 0 24%, #edbe7c 24% 100%); }
.ending-card { position: relative; width: min(100%, 760px); margin: 0 auto; padding: clamp(23px, 5vw, 48px); border: 3px solid var(--ink); background: var(--paper); box-shadow: 9px 11px 0 rgba(55,35,28,.25); text-align: center; }
.ending-card::before { content: ""; position: absolute; inset: 11px; border: 1px dashed #b79570; pointer-events: none; }
.ending-stamp { position: relative; display: inline-block; padding: 6px 11px; border: 2px solid var(--ink); background: var(--gold); transform: rotate(-3deg); font-size: .72rem; }
#endingFor { position: relative; margin: 18px 0 0; color: var(--coral-dark); font-size: .8rem; }
.ending-card h1 { position: relative; margin: 3px 0 9px; font: clamp(2.5rem, 7vw, 4.6rem)/.95 var(--font-title); color: var(--coral-dark); }
.ending-description { position: relative; max-width: 580px; margin: 0 auto 16px; font-size: .84rem; line-height: 1.75; }
.ending-room { position: relative; min-height: 180px; border: 2px solid var(--ink); background: #e8ca99; overflow: hidden; }
.ending-room svg { width: 100%; height: auto; }
.ending-stats { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 12px 0; }
.ending-stats > div { padding: 10px 4px; border: 1.5px solid var(--ink); background: #fffdf5; }
.ending-stats small, .ending-stats b { display: block; }
.ending-stats small { font-size: .5rem; color: var(--ink-soft); }
.ending-stats b { margin-top: 3px; font: 1rem var(--font-title); }
.ending-chart { position: relative; border: 1.5px solid var(--ink); background: #f8edd7; padding: 8px; }
.ending-chart svg { width: 100%; }
.ending-section-title { position: relative; display: flex; justify-content: space-between; margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--ink); font-size: .7rem; font-weight: 700; }
.ending-alternatives { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; text-align: left; }
.ending-alt { padding: 11px; border: 1.5px solid var(--ink); background: #eee4cf; opacity: .67; }
.ending-alt.unlocked { background: #dce9ca; opacity: 1; }
.ending-alt small, .ending-alt b, .ending-alt span { display: block; }
.ending-alt small { color: var(--coral-dark); font-size: .53rem; }
.ending-alt b { margin: 2px 0 4px; font-size: .75rem; }
.ending-alt span { font-size: .58rem; line-height: 1.45; }
.ending-card > .button { position: relative; margin-top: 20px; width: 100%; }

.toast-region { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 200; width: min(calc(100% - 28px), 430px); transform: translateX(-50%); pointer-events: none; }
.toast { margin-top: 8px; padding: 12px 14px; border: 2px solid var(--ink); background: #fff8e5; box-shadow: 4px 5px 0 rgba(47,31,25,.2); font-size: .7rem; line-height: 1.45; animation: toastIn .2s ease-out; display: flex; gap: 10px; align-items: center; }
.toast-hero { width: 56px; height: auto; flex: 0 0 auto; }
.toast b { color: var(--coral-dark); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .22s ease; }

@keyframes pulse { 50% { transform: scale(.75); opacity: .65; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(7px); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96) rotate(-1deg); } }
@keyframes popIn { from { opacity: 0; transform: scale(.7) translateY(16px); } }
@keyframes phoneShake { 25% { transform: rotate(7deg); } 75% { transform: rotate(-8deg); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 900px) {
  .game-screen { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); grid-template-areas: "header header" "track track" "status status" "room tabs" "room panel" "week panel" "next panel"; align-items: start; column-gap: 18px; }
  .game-header { grid-area: header; }
  .month-track { grid-area: track; }
  .status-strip { grid-area: status; }
  .room-hero { grid-area: room; position: sticky; top: 8px; }
  .week-dashboard { grid-area: week; }
  .game-tabs { grid-area: tabs; top: 8px; }
  .tab-panel { grid-area: panel; margin-top: 0; min-height: 490px; }
  .next-week-card { grid-area: next; }
  .room-topline { min-height: 46px; }
  .room-scene { min-height: 345px; }
  .food-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .food-copy h3 { min-height: 35px; }
}

@media (max-width: 780px) {
  .setup-screen { grid-template-columns: 1fr; grid-template-areas: "copy" "art" "form"; gap: 18px; padding: 24px 16px 38px; }
  .setup-copy { align-self: auto; }
  .setup-copy h1 { font-size: clamp(2.2rem, 11vw, 3rem); letter-spacing: -.03em; }
  .setup-copy p:not(.eyebrow) { font-size: .9rem; }
  .setup-visual { margin: 0; width: 100%; }
  .profile-sheet { padding: 25px 18px 20px; transform: none; }
  .choice-fieldset { grid-template-columns: 1fr; }
  .choice-fieldset label > span { min-height: 60px; text-align: left; padding: 9px 12px; }
  .status-strip { gap: 5px; }
  .status-strip > div { min-height: 58px; padding: 8px 6px; gap: 5px; justify-content: center; }
  .status-strip svg { width: 20px; height: 20px; flex-basis: 20px; }
  .status-strip small { font-size: .5rem; }
  .status-strip b { font-size: .65rem; }
  .room-scene { min-height: auto; }
  .thought-bubble { max-width: 220px; }
}

@media (max-width: 540px) {
  .game-screen { padding: 12px 10px calc(30px + env(safe-area-inset-bottom)); }
  .brand-mark { font-size: 1.45rem; }
  .month-track { margin-top: 7px; }
  .room-topline h1 { font-size: 1.65rem; }
  .decorate-button { min-height: 40px; padding: 7px 10px; }
  .room-canvas-wrap { box-shadow: 3px 4px 0 rgba(75,51,44,.2); }
  .room-caption { padding: 6px 8px; }
  .thought-bubble { top: 8px; left: 8px; max-width: 190px; padding: 7px 9px; font-size: .6rem; }
  .week-dashboard { padding: 11px; }
  .week-title { align-items: center; }
  .week-title h2 { font-size: 1.28rem; }
  .week-slots { display: grid; gap: 3px; }
  .week-slots span { padding: 3px 5px; font-size: .57rem; }
  .work-choices > button { padding: 8px; gap: 7px; }
  .work-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .work-choices b { font-size: .69rem; }
  .work-choices em { font-size: .54rem; }
  .game-tabs { bottom: max(5px, env(safe-area-inset-bottom)); top: auto; }
  .tab-button { display: grid; align-content: center; gap: 2px; min-height: 52px; font-size: .59rem; }
  .tab-button svg { margin: 0 auto; width: 20px; height: 20px; }
  .tab-button i { right: 16%; top: 3px; }
  .tab-panel { padding: 13px 11px; box-shadow: 3px 4px 0 rgba(75,51,44,.14); }
  .panel-heading h2 { font-size: 1.55rem; }
  .limit-badge { padding: 5px 7px; }
  .limit-badge b { font-size: 1.55rem; }
  .food-grid { gap: 7px; }
  .food-copy { padding: 8px; }
  .food-copy h3 { font-size: .73rem; min-height: 32px; }
  .food-meta { gap: 4px; font-size: .5rem; }
  .food-bottom { align-items: end; }
  .food-price { font-size: .66rem; }
  .order-button { min-height: 35px; padding: 5px 7px; font-size: .57rem; }
  .wellness-grid { grid-template-columns: 1fr; }
  .wellness-card { min-height: 108px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .shop-art { height: 94px; }
  .shop-copy { padding: 7px; }
  .shop-copy h3 { min-height: 31px; font-size: .66rem; }
  .shop-benefit { font-size: .5rem; }
  .record-totals { grid-template-columns: repeat(2, 1fr); }
  .month-row { grid-template-columns: 52px repeat(4, 1fr); padding: 7px 4px; gap: 2px; font-size: .48rem; }
  .next-week-card { padding: 10px; }
  .next-week-card p { font-size: .6rem; }
  .button-next { min-width: 112px; padding: 8px 10px; font-size: .72rem; }
  .modal-backdrop { padding: 10px; }
  .modal-backdrop > section { padding: 25px 17px 18px; }
  .decor-swatches { grid-template-columns: repeat(2, 1fr); }
  .ending-stats { grid-template-columns: repeat(3, 1fr); }
  .ending-alternatives { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .form-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .status-strip > div { display: grid; justify-items: center; text-align: center; gap: 2px; }
  .room-topline small { font-size: .6rem; }
  .decorate-button { font-size: .66rem; }
  .work-choices { grid-template-columns: 1fr; }
  .food-grid { grid-template-columns: 1fr; }
  .food-art { aspect-ratio: 2; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-art { height: 120px; }
}

@media (max-width: 899px) {
  body.menu-open { overflow: hidden; }
  .app-shell { width: 100%; min-height: 100dvh; box-shadow: none; }
  .game-screen {
    position: relative;
    display: block;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #d9b982;
  }
  .game-header {
    position: fixed;
    z-index: 25;
    top: max(10px, env(safe-area-inset-top));
    left: max(11px, env(safe-area-inset-left));
    right: max(11px, env(safe-area-inset-right));
    min-height: 48px;
    padding: 5px 8px;
    border: 1.5px solid rgba(75,51,44,.72);
    background: rgba(255,249,232,.86);
    box-shadow: 2px 3px 0 rgba(75,51,44,.16);
    backdrop-filter: blur(10px);
  }
  .brand-mark { min-height: 38px; font-size: 1.3rem; }
  .brand-bowl { width: 32px; height: 22px; }
  .period-pill { padding: 5px 8px; background: rgba(240,207,134,.9); }
  .month-track {
    position: fixed;
    z-index: 24;
    top: calc(max(10px, env(safe-area-inset-top)) + 55px);
    left: 15px;
    right: 15px;
    width: auto;
    height: 13px;
    margin: 0;
    border-bottom-width: 3px;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
  }
  .month-track > div { bottom: -3px; height: 3px; }
  .month-track span { font-size: .52rem; color: #3f2c26; }
  .status-strip {
    position: fixed;
    z-index: 24;
    top: calc(max(10px, env(safe-area-inset-top)) + 76px);
    left: 11px;
    right: 11px;
    margin: 0;
    gap: 4px;
  }
  .status-strip > div {
    min-height: 46px;
    padding: 5px 4px;
    gap: 3px;
    border-width: 1.5px;
    background: rgba(255,252,240,.82);
    box-shadow: 1px 2px 0 rgba(75,51,44,.12);
    backdrop-filter: blur(8px);
  }
  .status-strip svg { width: 17px; height: 17px; flex-basis: 17px; }
  .status-strip small { font-size: .52rem; }
  .status-strip b { font-size: .64rem; }
  .room-hero { height: 100svh; height: 100dvh; margin: 0; }
  .room-topline {
    position: absolute;
    z-index: 5;
    top: calc(max(10px, env(safe-area-inset-top)) + 132px);
    left: 13px;
    right: 13px;
    margin: 0;
    align-items: center;
    color: #3f2c26;
    text-shadow: 0 1px rgba(255,255,255,.8);
  }
  .room-topline h1 { margin: -2px 0 0; font-size: 1.55rem; }
  .room-topline small { color: #8d3f35; font-size: .58rem; }
  .decorate-button {
    min-height: 44px;
    padding: 7px 10px;
    background: rgba(231,239,212,.88);
    backdrop-filter: blur(7px);
    font-size: .66rem;
  }
  .game-screen .room-canvas-wrap {
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    box-shadow: none;
    background: #e8cf9e;
  }
  .game-screen .room-canvas-wrap::after {
    z-index: 1;
    background: linear-gradient(180deg, rgba(43,29,24,.12), transparent 23% 68%, rgba(43,29,24,.24));
    mix-blend-mode: normal;
  }
  .game-screen .room-art-frame {
    position: relative;
    width: min(100%, calc(100dvh * 3 / 2));
    max-width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: 100%;
    flex: 0 0 auto;
  }
  .game-screen .room-art-frame .generated-room-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
  .room-item-sticker.painted { width: var(--size, 18%); height: auto; z-index: var(--z, 2); mix-blend-mode: normal; filter: none; }
  .room-scene { display: none; }
  .room-item-stickers {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    pointer-events: auto;
    touch-action: none;
  }
  .room-item-sticker {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size, 16%);
    animation: none;
  }
  .room-item-sticker.floor { transform: translate(-50%, -100%) rotate(var(--rotation)); transform-origin: 50% 100%; }
  .room-item-sticker.flat { transform: translate(-50%, -50%) rotate(var(--rotation)); transform-origin: 50% 50%; }
  .room-item-sticker.wall { transform: translate(-50%, -50%) rotate(var(--rotation)); transform-origin: 50% 50%; }
  .room-item-sticker svg { width: 100%; height: auto; }
  .game-screen .room-art-frame .hero-portrait {
    right: 5%;
    bottom: 8%;
    width: 22%;
  }
  .game-screen .room-art-frame .hero-portrait.is-moment { width: 26%; }
  .thought-bubble {
    z-index: 5;
    top: auto;
    left: 14px;
    bottom: calc(122px + env(safe-area-inset-bottom));
    max-width: min(72vw, 285px);
    padding: 9px 11px;
    font-size: .64rem;
    background: rgba(255,253,242,.9);
    backdrop-filter: blur(8px);
  }
  .room-caption {
    position: absolute;
    z-index: 4;
    left: 13px;
    right: 13px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    min-height: 34px;
    padding: 6px 9px;
    border: 1.5px solid rgba(75,51,44,.8);
    background: rgba(248,229,189,.88);
    backdrop-filter: blur(8px);
  }
  .mobile-menu-button {
    position: fixed;
    z-index: 32;
    right: max(15px, env(safe-area-inset-right));
    bottom: calc(15px + env(safe-area-inset-bottom));
    min-width: 132px;
    min-height: 54px;
    padding: 9px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    background: var(--coral);
    color: white;
    box-shadow: 4px 6px 0 rgba(75,51,44,.26);
    font-weight: 700;
  }
  .mobile-menu-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mobile-menu-button i {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font: normal 700 .62rem var(--font-body);
  }
  .mobile-menu-backdrop {
    position: fixed;
    z-index: 38;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(44,29,24,.48);
    backdrop-filter: blur(3px);
  }
  .game-menu-drawer {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: min(86dvh, 760px);
    padding: 0 10px calc(18px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 2.5px solid var(--ink);
    border-radius: 22px 22px 0 0;
    background: #f8edd5;
    box-shadow: 0 -10px 30px rgba(43,28,23,.28);
    transform: translateY(105%);
    transition: transform 240ms cubic-bezier(.2,.78,.25,1);
    pointer-events: none;
  }
  .game-menu-drawer.open { transform: translateY(0); pointer-events: auto; }
  .mobile-drawer-head {
    position: sticky;
    z-index: 14;
    top: 0;
    min-height: 58px;
    margin: 0 -10px 10px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--ink);
    background: rgba(248,237,213,.96);
    backdrop-filter: blur(10px);
  }
  .mobile-drawer-head small, .mobile-drawer-head b { display: block; }
  .mobile-drawer-head small { color: var(--coral-dark); font-size: .55rem; }
  .mobile-drawer-head b { font: 1.15rem var(--font-title); }
  .mobile-drawer-head button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: #fff9e9;
  }
  .mobile-drawer-head svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
  .game-menu-drawer .week-dashboard { margin: 0 0 10px; }
  .game-menu-drawer .game-tabs {
    position: sticky;
    z-index: 12;
    top: 59px;
    bottom: auto;
    margin-bottom: 10px;
  }
  .game-menu-drawer .tab-panel { margin-top: 0; box-shadow: 2px 3px 0 rgba(75,51,44,.13); }
  .game-menu-drawer .next-week-card { margin-bottom: 8px; }
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-art { aspect-ratio: 1; background: #fbf5e7; }
  .food-art::before { display: none; }
  .food-art svg { display: none; }

  .order-button, .buy-button, .filter-row button { min-height: 44px; }
  .avatar-fieldset label > span { min-height: 44px; }
  .game-screen .next-week-card .button-next { min-height: 48px; }

  .modal-backdrop {
    align-items: end;
    justify-content: center;
    place-items: unset;
    padding: 0;
  }
  .modal-backdrop > section,
  .life-event-modal {
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -10px 28px rgba(35,23,18,.28);
  }
  .modal-backdrop > section .button,
  .life-event-modal .button,
  .life-event-modal button:not(.modal-close) {
    width: 100%;
    min-height: 44px;
  }
  .challenge-tabs { grid-template-columns: 1fr; }
  .challenge-tabs button { width: 100%; min-height: 44px; }

  .toast-region {
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: min(calc(100% - 28px), 430px);
  }
}

/* Life-event bottom-sheet hook (modal may be added by another pass) */
.life-event-modal {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.life-event-modal button:not(.modal-close) {
  min-height: 44px;
}

/* Setup preview must not inherit in-game full-bleed room */
.setup-room-canvas.room-canvas-wrap {
  width: 100%;
  height: auto;
  max-height: min(42dvh, 360px);
  aspect-ratio: 4 / 3;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.setup-room-canvas .generated-room-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.setup-room-canvas .hero-portrait {
  right: 5%;
  bottom: 7%;
  width: 22%;
}
.setup-room-canvas .hero-portrait.is-moment { width: 22%; }
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 899px) {
  .setup-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
    min-height: 0;
    overflow-x: hidden;
  }
  .setup-visual { width: 100%; max-width: 100%; order: 1; }
  .setup-copy { order: 2; }
  .setup-copy h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    line-height: .95;
    letter-spacing: -.03em;
    transform: none;
    margin: 0 0 6px;
  }
  .setup-copy p:not(.eyebrow) { font-size: .88rem; }
  .setup-copy .button,
  #resumeButton {
    min-height: 48px;
    width: 100%;
  }
  .setup-screen .profile-sheet { order: 3; width: 100%; max-width: 100%; }
  .setup-screen .field input,
  .setup-screen .field select {
    font-size: 16px;
    min-height: 44px;
  }
  .setup-room-canvas.room-canvas-wrap {
    width: 100%;
    height: auto !important;
    max-height: min(38dvh, 280px);
    aspect-ratio: 4 / 3;
    border: 3px solid var(--ink) !important;
    box-shadow: 3px 4px 0 rgba(75,51,44,.2);
    overflow: hidden;
  }
  .setup-status-chip {
    max-width: calc(100% - 20px);
  }
}


/* Forced weekly life event — card language, phone-first sheet */
body.life-event-open { overflow: hidden; }
#lifeEventModal.modal-backdrop {
  z-index: 110;
  overflow-x: hidden;
}
#lifeEventModal .life-event-modal {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#lifeEventModal .life-event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
#lifeEventModal .life-event-copy { min-width: 0; flex: 1; }
#lifeEventModal .life-event-copy h2 { margin: 0; }
#lifeEventModal .life-event-hero {
  width: 88px;
  height: auto;
  flex: 0 0 88px;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 rgba(75,51,44,.16));
}
#lifeEventModal p#lifeEventBody {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
}
.life-event-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.life-event-choices button {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: #fffdf5;
  box-shadow: 2px 3px 0 rgba(75,51,44,.14);
  border-radius: 12px 16px 11px 15px;
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.life-event-choices button b { font-size: 16px; font-weight: 700; }
.life-event-choices button small { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.life-event-choices button:disabled small { color: var(--red); }
.life-event-choices button:last-child { background: #f5e8c9; }
.life-event-choices button:not(:disabled):hover { transform: translateY(-1px); }
.life-event-choices button:not(:disabled):active { transform: translateY(2px); box-shadow: 1px 2px 0 rgba(75,51,44,.18); }

@media (max-width: 899px) {
  #lifeEventModal.modal-backdrop {
    align-items: end;
    justify-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top);
  }
  #lifeEventModal .life-event-modal {
    width: 100%;
    max-width: 100%;
    min-height: 52dvh;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top)));
    margin: 0;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 24px rgba(35,23,18,.28);
    animation: lifeSheetIn .28s cubic-bezier(.2,.78,.25,1);
  }
  #lifeEventModal .life-event-modal h2 { font-size: 1.7rem; line-height: 1.15; }
  #lifeEventModal p#lifeEventBody { font-size: 16px; line-height: 1.55; }
  #lifeEventModal .life-event-hero { width: 72px; flex-basis: 72px; }
}

@keyframes lifeSheetIn {
  from { opacity: 0; transform: translateY(28px); }
}

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

/* Visit loop HUD */
.light-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  min-height: 44px;
}
.light-gauge {
  flex: 1;
  min-height: 44px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--ink);
  background: rgba(255,253,244,.88);
  box-shadow: 2px 3px 0 rgba(75,51,44,.11);
}
.light-gauge small { font-size: .62rem; color: var(--ink-soft); font-weight: 700; }
.light-track {
  display: block;
  height: 10px;
  border: 1.5px solid var(--ink);
  background: #efe0c4;
  overflow: hidden;
  border-radius: 999px;
}
.light-track i {
  display: block;
  height: 100%;
  width: 26%;
  background: linear-gradient(90deg, #f0c45d, #fff3c4);
  transition: width .35s ease;
}
.light-gauge b { font: 1rem var(--font-title); min-width: 1.4em; text-align: right; }
.boyfriend-chip {
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--ink);
  background: #fff8e7;
}
.boyfriend-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(1px 2px 0 rgba(75,51,44,.16));
}
.boyfriend-chip small, .boyfriend-chip b { display: block; }
.boyfriend-chip small { font-size: .52rem; color: var(--ink-soft); }
.boyfriend-chip b { font-size: .78rem; }
.clock-chip {
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  background: #f0cf86;
  text-align: right;
}
.clock-chip small, .clock-chip b { display: block; }
.clock-chip small { font-size: .52rem; color: var(--ink-soft); }
.clock-chip b { font: 1.05rem var(--font-title); }

.player-verbs {
  display: grid;
  gap: 8px;
}
.player-verbs button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: #fffdf5;
  box-shadow: 2px 3px 0 rgba(75,51,44,.12);
  border-radius: 12px 16px 11px 15px;
  text-align: left;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  touch-action: manipulation;
}
.player-verbs button .verb-kicker {
  grid-row: 1 / 3;
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: #f5e1b0;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 8px;
}
.player-verbs button b { font-size: .92rem; }
.player-verbs button em { font-style: normal; font-size: .62rem; color: var(--ink-soft); }
.player-verbs button:disabled { opacity: .5; }
.player-verbs button:not(:disabled):active { transform: translateY(2px); box-shadow: 1px 2px 0 rgba(75,51,44,.18); }
.game-tabs { grid-template-columns: repeat(3, 1fr); }

.food-overlay, .art-viewer { z-index: 120; }
.food-overlay-stage, .art-viewer-stage {
  width: min(100%, 480px);
  margin: 0;
  padding: 22px 16px 20px;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 10px 0 rgba(35,23,18,.28);
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
}
.food-overlay-art {
  width: min(88vw, 420px);
  aspect-ratio: 1;
  background-image: url("art/food-sheet.png"), url("food-sheet.png");
  background-size: 300% 400%;
  background-position: var(--sprite-x) var(--sprite-y);
  background-repeat: no-repeat;
  border: 2px solid var(--ink);
  filter: drop-shadow(3px 5px 0 rgba(75,51,44,.16));
}
.food-overlay-stage h2, .art-viewer-stage p {
  margin: 0;
  font: 1.5rem/1.2 var(--font-title);
}
#foodOverlayLine, #artViewerCaption {
  font: .78rem/1.5 var(--font-body);
  max-width: 36ch;
}
.food-overlay-hint { font-size: .58rem; color: var(--ink-soft); }
.art-viewer-stage img {
  width: min(70vw, 420px);
  max-height: 70dvh;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(4px 8px 0 rgba(55,32,22,.22));
}

@media (min-width: 900px) {
  .game-screen {
    grid-template-areas: "header header" "track track" "status status" "light light" "room tabs" "room panel" "week panel" "next panel";
  }
  .light-strip { grid-area: light; }
  .player-verbs { grid-template-columns: 1fr 1fr; }
  .player-verbs button[data-verb="watch"] { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .light-strip {
    position: fixed;
    z-index: 24;
    top: calc(max(10px, env(safe-area-inset-top)) + 126px);
    left: 11px;
    right: 11px;
    margin: 0;
  }
  .light-gauge, .clock-chip, .boyfriend-chip {
    min-height: 40px;
    padding: 4px 8px;
    border-width: 1.5px;
    background: rgba(255,252,240,.86);
    backdrop-filter: blur(8px);
  }
  .room-topline {
    top: calc(max(10px, env(safe-area-inset-top)) + 172px);
  }
  .food-overlay.modal-backdrop, .art-viewer.modal-backdrop {
    align-items: end;
    justify-content: center;
    padding: 0;
  }
  .food-overlay-stage, .art-viewer-stage {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .player-verbs button { min-height: 48px; font-size: 16px; }
}