:root {
  color-scheme: light;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --ink: #3b2b2a;
  --paper: #fffaf0;
  --cream: #ffe8bd;
  --pink: #ef7184;
  --pink-dark: #c94463;
  --orange: #ee9b45;
  --blue: #4e91bd;
  --green: #64a768;
  --shadow: 0 10px 28px rgba(92, 55, 35, 0.18);
  --pixel-border: 3px solid #6f4435;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    linear-gradient(135deg, #f8c88e, #ffe8bd 45%, #f4a3a9);
  background-size: 26px 26px, auto;
}
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid #315fb4; outline-offset: 3px; }

.game-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border: var(--pixel-border);
  border-radius: 18px;
  background: rgba(255,250,240,.96);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { font-size: 27px; filter: drop-shadow(2px 2px 0 white); }
.brand h1 { margin: 0; font-size: clamp(18px, 2vw, 25px); letter-spacing: .03em; color: var(--pink-dark); }
.brand small { display:inline-block; margin-top:1px; padding:1px 7px; border-radius:999px; background:#fff0c8; color:#765e55; font-size:10px; font-weight:900; }
.status-pills { display: flex; gap: 8px; justify-content: end; flex-wrap: wrap; }
.pill { padding: 6px 10px; border: 2px solid #9c755b; border-radius: 999px; background: white; font-size:13px; font-weight: 900; }
.calendar-pill { border-color:#d39a42; color:#8b581c; background:#fff5ce; }
.motivation-count { display:none; }

/* Shared fixed HUD: the navy-and-gold frame stays visible in every gameplay phase. */
.game-hud {
  position: sticky;
  top: max(4px, var(--safe-area-inset-top,env(safe-area-inset-top)));
  z-index: 90;
  padding: 9px;
  overflow: hidden;
  border: 3px solid #071b3e;
  border-radius: 24px;
  color: #2f201b;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0/20px 20px,
    linear-gradient(145deg,#0b326d,#082655 58%,#051a3d);
  box-shadow: inset 0 0 0 2px #e9b847, inset 0 0 0 5px #174681, 0 8px 20px rgba(34,25,22,.24);
}
.hud-main-row { display:grid; grid-template-columns:minmax(260px,1.15fr) minmax(420px,1.85fr); align-items:center; gap:14px; padding:3px 10px 7px; }
.hud-brand { position:relative; min-width:0; display:flex; align-items:center; justify-content:center; }
.hud-brand img { display:block; width:min(100%,390px); max-height:95px; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(0,0,0,.28)); }
.hud-week {
  position:absolute;
  left:50%;
  bottom:-10px;
  translate:-50% 0;
  z-index:1;
  min-width:112px;
  padding:3px 14px;
  border:2px solid #edbd4b;
  border-radius:999px;
  color:#fff9e8;
  background:#123e78;
  box-shadow:inset 0 0 0 2px #09254d,0 2px 0 #061a39;
  font-size:13px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
}
.hud-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.hud-pill {
  min-height:58px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:3px solid #0c3269;
  border-radius:18px;
  background:linear-gradient(#fffdf7,#fff5dc);
  box-shadow:inset 0 0 0 2px #edbd4b,0 3px 0 rgba(4,16,38,.55);
  font-size:clamp(16px,2vw,26px);
  white-space:nowrap;
}
.hud-pill-icon { font-size:1.08em; }
.hud-motivation { flex-wrap:wrap; gap:3px 5px; }
.hud-motivation small { font-size:.62em; font-weight:900; }
.hud-motivation b { display:none; }
.hud-motivation-faces { display:flex; gap:2px; color:#e8b52e; font-size:.72em; text-shadow:0 1px 0 #7e5310; }
.hud-motivation-face:not(.filled) { color:#d2cec3; text-shadow:none; }
.hud-phase-row {
  min-height:66px;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:8px;
}
.hud-phase-title { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; padding:7px 18px; border:3px solid #e7b747; border-radius:18px; color:#0b326d; background:linear-gradient(100deg,#fffaf0,#fff5dd); box-shadow:inset 0 0 0 3px #0d3874; }
.hud-phase-title span { font-size:clamp(27px,3vw,42px); }
.hud-phase-title strong { overflow:hidden; font-size:clamp(24px,3.2vw,43px); letter-spacing:.03em; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px 0 white; }
.hud-clock {
  flex:0 0 auto;
  min-width:210px;
  padding:5px 17px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:10px;
  border:3px solid #0e3871;
  border-radius:16px;
  background:#fffdf6;
  box-shadow:inset 0 0 0 2px #e8b649;
  text-align:center;
}
.hud-clock::before { content:"🕒"; grid-row:1/3; font-size:29px; }
.hud-clock small { font-size:12px; font-weight:900; }
.hud-clock strong { color:#0b326d; font-size:30px; line-height:1; }
.hud-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 3px 2px; }
.hud-metrics>div {
  min-width:0;
  min-height:48px;
  padding:6px 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:2px solid #e7b747;
  border-radius:14px;
  background:#fffaf0;
  box-shadow:inset 0 0 0 2px #0d3874;
}
.hud-metrics>div>span { font-size:21px; }
.hud-metrics small { overflow:hidden; font-size:14px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.hud-metrics strong { margin-left:auto; color:#cf432a; font-size:24px; white-space:nowrap; }
.hud-metrics i { font-size:.58em; font-style:normal; }
.hud-nickname { flex:0 1 310px; min-width:0; min-height:42px; margin-left:0; padding:5px 14px; display:flex; align-items:center; justify-content:center; gap:8px; border:3px solid #e7b747; border-radius:18px; background:linear-gradient(180deg,#fffdf6,#fff3d4); color:#173f73; cursor:pointer; box-shadow:inset 0 0 0 3px #fff8df; font-family:inherit; }
.hud-nickname span { flex:0 0 auto; font-size:11px; font-weight:900; opacity:.88; white-space:nowrap; }
.hud-nickname strong { min-width:0; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.hud-nickname:hover { filter:brightness(1.12); }

.stage {
  flex: 1;
  min-height: 690px;
  position: relative;
  overflow: hidden;
  border: 4px solid #6f4435;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.screen { min-height: 690px; padding: clamp(18px, 3vw, 40px); }
.screen-title { text-align: center; margin: 0 0 8px; font-size: clamp(28px, 4vw, 48px); color: var(--pink-dark); }
.screen-lead { text-align: center; margin: 0 auto 24px; color: #6e554d; font-weight: 700; max-width: 760px; }

.title-screen {
  min-height: 690px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  background:
    linear-gradient(rgba(255,250,240,.08), rgba(255,250,240,.42)),
    url('./public/assets/backgrounds/title.png') center/cover no-repeat;
}
.title-card { max-width: 780px; padding: 42px; border: 5px solid #754737; border-radius: 28px; background: rgba(255,250,240,.94); box-shadow: 12px 12px 0 rgba(117,71,55,.2); }
.title-kicker { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--blue); color: white; font-weight: 900; }
.title-logo { margin: 10px 0 0; font-size: clamp(46px, 8vw, 92px); line-height: .95; color: var(--pink); text-shadow: 4px 4px 0 white, 7px 7px 0 #6d3f35; }
.title-logo-art { display:block; width:min(100%,650px); max-height:240px; margin:12px auto 0; object-fit:contain; filter:drop-shadow(0 5px 5px rgba(54,29,18,.28)); }
.title-sub { font-size: clamp(17px, 2vw, 24px); font-weight: 900; color: #755044; }
.primary, .secondary, .choice-card, .speed-button {
  border: 3px solid #6f4435;
  cursor: pointer;
  font-weight: 900;
  transition: transform .12s ease, filter .12s ease;
}
.primary:hover, .secondary:hover, .choice-card:hover, .speed-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary { padding: 14px 30px; border-radius: 14px; color: white; background: var(--pink); box-shadow: 0 5px 0 var(--pink-dark); font-size: 18px; }
.secondary { padding: 11px 20px; border-radius: 12px; color: var(--ink); background: #fff4d7; box-shadow: 0 4px 0 #d6af75; }
.primary:disabled, .secondary:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.choice-grid { max-width: 880px; margin: 18px auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.choice-card { min-height: 310px; padding: 22px; border-radius: 24px; background: white; box-shadow: 0 8px 0 #c89970; text-align: left; }
.choice-card.selected { background: #fff0f3; border-color: var(--pink-dark); box-shadow: 0 8px 0 var(--pink-dark); }
.choice-card { min-height:330px; padding:188px 18px 16px; background-position:center; background-size:100% 100%; background-repeat:no-repeat; border-color:transparent; box-shadow:none; }
.choice-card.choice-supply { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_supply_normal.png'); }
.choice-card.choice-consult { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_consult_normal.png'); }
.choice-card.choice-work { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_work_normal.png'); }
.choice-card.choice-supply.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_supply_normal.png'); }
.choice-card.choice-consult.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_consult_normal.png'); }
.choice-card.choice-work.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_work_normal.png'); }
.choice-card.selected,
.choice-card.selected:hover { transform:none; }
.choice-card .choice-icon { display:none; }
.choice-card h3 { margin: 8px 0; text-align: center; font-size: 27px; }
.choice-effect { margin-top: 14px; padding: 12px; border-radius: 12px; background: #fff4d7; font-weight: 800; }
.action-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hint-box { max-width: 760px; margin: 18px auto 0; padding: 14px 18px; border-left: 6px solid var(--blue); background: #eef8ff; border-radius: 12px; font-weight: 700; }
.event-banner-stack { max-width:760px; margin:-8px auto 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; }
.event-banner { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 16px; border:3px solid #d69a42; border-radius:14px; background:#fff4cd; box-shadow:0 4px 0 #d9b36d; }
.event-banner-art { width:48px; height:48px; flex:0 0 auto; object-fit:contain; image-rendering:auto; }
.event-fallback-icon { font-size:30px; }
.event-banner strong,.event-banner small { display:block; }
.event-banner small { color:#855e39; font-weight:800; }

.setup-layout { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; gap: 22px; align-items: start; }
.inventory-panel, .side-panel, .review-card { border: var(--pixel-border); border-radius: 18px; background: rgba(255,250,240,.96); box-shadow: var(--shadow); }
.inventory-panel { padding: 15px; max-height: 590px; overflow: auto; }
.panel-heading { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.inventory-help { margin:-2px 0 13px; padding:8px 9px; border:2px solid #78a8c2; border-radius:12px; background:#eef9ff; color:#425b68; box-shadow:inset 0 0 0 2px white; }
.inventory-help>strong { display:block; margin-bottom:4px; color:#174c82; font-size:11px; }
.inventory-help-steps { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:4px; }
.inventory-help-steps span { display:flex; align-items:center; gap:4px; min-width:0; font-size:9px; font-weight:900; line-height:1.3; }
.inventory-help-steps span>b { flex:0 0 19px; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#2f91c4; color:white; font-size:10px; }
.inventory-help-steps i { color:#2f91c4; font-size:14px; font-style:normal; font-weight:1000; }
.inventory-help p { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px; margin:6px 0 0; padding-top:5px; border-top:1px dashed #78a8c2; font-size:8.5px; font-weight:800; line-height:1.35; }
.inventory-help p>b { color:#bd4e38; font-size:10px; }
.inventory-help.refill-help { background:#fff8df; border-color:#d5a85d; }
.inventory-help.refill-help>strong { color:#8b552f; }
.inventory-help.refill-help .inventory-help-steps i { color:#c57a3e; }
.inventory-help.refill-help .inventory-help-steps span>b { background:#c57a3e; }
.inventory-help.refill-help p { border-top-color:#d5a85d; }
.inventory-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.item-card { position: relative; min-height: 150px; padding: 8px; border: 3px solid #b88b69; border-radius: 14px; background: white; cursor: grab; text-align: center; }
.item-card:hover, .item-card.selected { border-color: var(--pink); background: #fff2f4; transform: translateY(-2px); }
.item-card.empty { opacity: .45; cursor: not-allowed; }
.item-card img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }
.product-placeholder { display:grid; place-items:center; width:76px; height:76px; margin:auto; border:3px solid #7eb5c8; border-radius:18px; background:linear-gradient(145deg,#eefcff,#bfe8f3); font-size:40px; box-shadow:inset 0 0 0 4px rgba(255,255,255,.55); }
.product-placeholder.frozen { border-color:#5d8fd1; background:linear-gradient(145deg,#f3fbff,#b9d8ff); }
.item-card strong { display: block; font-size: 13px; }
.item-card small { color: #78625a; }
.count-badge { position: absolute; right: 7px; top: 7px; min-width: 28px; padding: 3px 7px; border-radius: 999px; background: var(--blue); color: white; font-weight: 900; }
.shelf-area { position: relative; min-height: 500px; display: grid; place-items: center; padding: 70px 26px 26px; border-radius: 22px; background: linear-gradient(#eaf7fb 0 36%, #d7c3a8 36% 100%); overflow: hidden; }
.shelf-area::before { content:""; position:absolute; inset: 36% 0 auto; height: 12px; background:#b89f83; box-shadow:0 170px 0 #c8b49a; }
.shelf-wrap { position: relative; width: min(820px, 100%); padding: 82px 80px 42px; border: 18px solid #76513d; border-radius: 8px 8px 18px 18px; background: linear-gradient(#9a6f50, #80573f); box-shadow: inset 0 0 0 5px #c79464, 10px 14px 0 rgba(70,45,30,.2); }
.shelf-sign { position:absolute; top:-55px; left:50%; translate:-50%; padding:12px 34px; border:5px solid #76513d; border-radius:22px 22px 8px 8px; background:#ffe39f; font-size:24px; font-weight:900; white-space:nowrap; }
.shelf-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 150px); gap: 12px; }
.case-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.equipment-case { min-height:118px; padding:38px 12px 12px; border:5px solid #52799e; border-radius:18px; background:linear-gradient(#dff7ff,#abd8ef); box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 7px 0 rgba(74,92,109,.18); position:relative; }
.chilled-case { overflow:hidden; background:#e8f8fb; }
.equipment-case-art { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:fill; image-rendering:pixelated; pointer-events:none; }
.equipment-case.frozen-case { overflow:hidden; border-color:#5668a7; background:#edf1ff; }
.case-heading { position:absolute; z-index:2; top:8px; left:12px; right:12px; padding:3px 8px; border-radius:999px; color:#315d80; background:rgba(255,255,255,.82); text-align:center; font-weight:1000; }
.case-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:96px; gap:10px; }
.chilled-case .shelf-slot { background:rgba(255,253,239,.74); border-color:#8fc6cf; }
.case-grid .shelf-slot img { max-height:54px; }
.locked-case { min-height:0; display:grid; place-items:center; padding:20px 12px; border-style:dashed; color:#698094; font-weight:1000; background:#e9f1f5; box-shadow:none; }
.shelf-slot { position:relative; display:grid; place-items:center; min-width:0; border:3px dashed #d8ae7e; border-radius:9px; background:rgba(255,247,224,.82); cursor:pointer; }
.shelf-slot::after { content:""; position:absolute; left:-7px; right:-7px; bottom:-9px; height:9px; background:#d8a064; border:2px solid #704b36; }
.shelf-slot.drop-target { background:#dff5df; border-color:#4d9a57; }
.shelf-slot img { max-width:90%; max-height:84px; image-rendering:pixelated; object-fit:contain; }
.shelf-slot .product-placeholder { width:62px; height:62px; margin:0; border-radius:12px; font-size:31px; }
.slot-stock { position:absolute; top:4px; right:4px; padding:3px 6px; border-radius:7px; background:#fff; border:2px solid #6f4435; font-size:12px; font-weight:900; }
.slot-remove { position:absolute; top:-11px; right:-10px; z-index:4; width:31px; height:31px; display:grid; place-items:center; padding:0; border:3px solid #6f4435; border-radius:50%; color:white; background:#df4058; box-shadow:0 3px 0 #9f2940; cursor:pointer; font-size:19px; font-weight:1000; line-height:1; }
.slot-remove:hover { scale:1.08; filter:brightness(1.06); }
.slot-stepper { position:absolute; top:5px; left:4px; z-index:3; display:grid; grid-template-columns:22px 20px 22px; align-items:center; gap:2px; width:68px; }
.slot-stepper button { width:22px; height:25px; display:grid; place-items:center; padding:0; border:2px solid #6f4435; border-radius:7px; background:#fff4d7; color:var(--ink); cursor:pointer; font-weight:1000; line-height:1; }
.slot-stepper button:last-child { color:white; background:var(--blue); }
.slot-stepper button:disabled { opacity:.3; cursor:not-allowed; }
.slot-stepper strong { display:grid; place-items:center; min-width:0; height:25px; border:2px solid #6f4435; border-radius:7px; background:white; font-size:12px; }
.slot-stepper + img { margin-top:25px; max-height:64px; }
.slot-label { position:absolute; bottom:3px; left:3px; right:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:11px; font-weight:900; background:rgba(255,255,255,.88); }
.slot-empty { color:#b79c86; font-size:24px; font-weight:900; }
.slot-soldout { position:absolute; inset:28px 3px auto; padding:4px; rotate:-8deg; color:white; background:#df4058; border:2px solid white; font-size:12px; font-weight:900; }

.observe-screen { background: linear-gradient(#9bd7ed 0 34%, #d8cab2 34% 100%); }
.observation-clock { width:fit-content; min-width:190px; margin:-12px auto 16px; display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 18px; border:3px solid #6f4435; border-radius:999px; background:#fff8dc; box-shadow:0 4px 0 #d8aa69; }
.observation-clock>span { font-size:29px; }
.observation-clock div { display:grid; line-height:1.05; }
.observation-clock small { color:#85624f; font-size:10px; font-weight:900; }
.observation-clock strong { color:#b45137; font-size:25px; letter-spacing:.06em; }
.observe-layout { display:grid; grid-template-columns:1fr 280px; gap:18px; min-height:595px; }
.office { position:relative; overflow:hidden; min-height:570px; border:var(--pixel-border); border-radius:18px; background: linear-gradient(90deg, transparent 49%, rgba(135,110,90,.14) 50% 51%, transparent 52%), linear-gradient(#eef2eb 0 34%, #cfc6b9 34%); background-size:180px 100%, auto; }
.window { position:absolute; top:22px; left:24px; width:220px; height:145px; border:10px solid #6b6670; background:linear-gradient(#7ec7e9,#dbf7ff); box-shadow:inset 0 -25px 0 rgba(255,255,255,.35); }
.window::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:7px; background:#6b6670; }
.office-shelf { position:absolute; left:50%; top:30px; overflow:hidden; width:min(520px,90%); aspect-ratio:1.83; translate:-50%; padding:58px 21px 51px; border:0; border-radius:5px; background:none; box-shadow:0 9px 0 rgba(70,45,30,.16); z-index:2; }
.office-wagon-art { position:absolute; z-index:1; inset:-3% auto auto -22.5%; width:145%; height:145%; object-fit:fill; image-rendering:auto; pointer-events:none; }
.office-awning { position:absolute; z-index:3; left:-10px; right:-10px; top:-31px; height:43px; border:5px solid #6e4632; border-radius:16px 16px 10px 10px; background:repeating-linear-gradient(90deg,#f37f93 0 35px,#fff2d9 35px 70px); box-shadow:0 6px 0 rgba(91,55,38,.18); }
.office-awning::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:18px; background:radial-gradient(circle at 18px 0,#f37f93 0 17px,transparent 18px) 0 0/70px 20px repeat-x,radial-gradient(circle at 53px 0,#fff2d9 0 17px,transparent 18px) 0 0/70px 20px repeat-x; }
.office-shelf-sign { position:absolute; z-index:5; top:-17px; left:50%; translate:-50%; min-width:180px; padding:4px 16px 6px; border:4px solid #6e4632; border-radius:12px; background:#fff0ad; color:#57372c; text-align:center; font-weight:1000; white-space:nowrap; box-shadow:0 4px 0 #c48054; }
.office-shelf-sign small { display:block; color:#c14f68; font-size:7px; letter-spacing:.18em; }
.office-shelf-sign span { display:block; font-size:14px; line-height:1.05; }
.office-garland { position:absolute; z-index:4; left:25px; right:25px; top:30px; display:flex; justify-content:space-around; border-top:2px solid #f6d575; }
.office-garland i { width:10px; height:11px; background:#f0788e; clip-path:polygon(0 0,100% 0,50% 100%); }
.office-garland i:nth-child(even) { background:#66b9c7; }
.office-shelf-grid,.office-shelf-grid.expanded { position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); column-gap:6px; row-gap:4px; height:100%; }
.office-shelf-slot { position:relative; display:grid; place-items:center; min-width:0; border:0; border-radius:7px; background:rgba(255,255,255,.18); box-shadow:none; }
.office-shelf-slot::after { display:none; }
.office-shelf-slot img { width:96%; height:82%; max-width:68px; max-height:58px; object-fit:contain; image-rendering:auto; filter:drop-shadow(2px 4px 0 rgba(84,54,38,.22)); transition:.25s ease; }
.office-product-stack { position:relative; align-self:start; display:block; width:88%; height:74%; margin-top:2px; }
.office-product-stack>img { position:absolute; inset:6% 3%; width:94%; height:92%; }
.office-product-stack>img:nth-child(2),.office-product-stack>img:nth-child(3) { display:none; }
.office-product-stack.multiple>img:nth-child(1) { transform:translate(-9px,2px) rotate(-5deg); }
.office-product-stack.multiple>img:nth-child(2) { display:block; transform:translate(8px,3px) rotate(5deg); }
.office-product-stack.multiple>img:nth-child(3) { display:block; transform:translate(0,-5px); }
.office-product-stack>img:nth-child(n+4) { display:none; }
.office-product-stack.many>img { display:block; }
.office-product-stack.many>img:nth-child(1) { transform:translate(-12px,7px) rotate(-8deg); }
.office-product-stack.many>img:nth-child(2) { transform:translate(12px,7px) rotate(8deg); }
.office-product-stack.many>img:nth-child(3) { transform:translate(-8px,-1px) rotate(-5deg); }
.office-product-stack.many>img:nth-child(4) { transform:translate(8px,-1px) rotate(5deg); }
.office-product-stack.many>img:nth-child(5) { transform:translate(-4px,-8px) rotate(-2deg); }
.office-product-stack.many>img:nth-child(6) { transform:translate(4px,-10px) rotate(2deg); }
.comment small { display:block; margin-top:3px; color:#b07c70; font-size:10px; font-weight:800; }
.office-shelf-slot .product-placeholder { width:86%; height:78%; min-height:48px; margin:0; border-width:2px; border-radius:10px; font-size:30px; }
.office-shelf-slot strong { position:absolute; z-index:7; right:2px; bottom:0; left:auto; display:flex; align-items:center; gap:2px; padding:2px 5px; border:2px solid #6f4435; border-radius:999px; background:#fff7d7; color:#684737; text-align:center; font-size:9px; box-shadow:0 2px 0 #cb9565; }
.office-shelf-slot strong span { font-size:7px; }
.office-shelf-slot strong b { color:#c94d67; font-size:11px; }
.office-shelf-slot small { display:none; }
.office-empty { color:#c69d79; font-size:9px; font-weight:900; letter-spacing:.12em; }
.office-popular { display:none; position:absolute; z-index:4; top:-5px; left:-4px; padding:2px 5px; border:2px solid white; border-radius:999px; rotate:-8deg; background:#f05e7c; color:white; font-size:8px; font-weight:1000; box-shadow:0 2px 0 #a83e55; animation:popularPulse .8s ease-in-out infinite alternate; }
.office-shelf-slot.popular .office-popular { display:block; }
.office-shelf-slot.popular img { filter:drop-shadow(0 0 5px #ffdc60) drop-shadow(2px 4px 0 rgba(84,54,38,.22)); }
@keyframes popularPulse { to { scale:1.08; translate:0 -2px; } }
.office-soldout { display:none; position:absolute; inset:18px 2px auto; z-index:5; padding:3px 2px; rotate:-9deg; color:white; background:#c93e55; border:2px solid white; border-radius:3px; text-align:center; font-size:8px; font-weight:1000; box-shadow:0 2px 0 #8f2b3d; }
.office-shelf-slot.soldout img { opacity:.28; filter:grayscale(.7); }
.office-shelf-slot.soldout strong { gap:3px; border-color:#873142; background:#d4475f; color:white; opacity:1; box-shadow:0 2px 0 #873142; }
.office-shelf-slot.soldout strong span,.office-shelf-slot.soldout strong b { color:white; font-size:8px; letter-spacing:.03em; }
.office-shelf-slot.soldout .office-popular { display:none; }
.office-shelf-slot.soldout .office-soldout { display:block; }
.office-shelf-slot.stock-changed { animation:stockChanged .5s ease; }
@keyframes stockChanged { 35% { scale:1.12; background:#fff09a; box-shadow:0 0 0 5px rgba(239,113,132,.65),inset 0 -7px 0 #e9c58e; } }
.office-cold-case { position:absolute; z-index:3; top:325px; width:230px; aspect-ratio:1.6; filter:drop-shadow(0 8px 0 rgba(70,45,30,.16)); }
.office-chilled-case { right:24px; }
.office-frozen-case { left:24px; }
.office-case-art { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:fill; image-rendering:auto; pointer-events:none; }
.office-frozen-case .office-case-heading { border-color:#5668a7; background:#f0f3ff; color:#374b88; }
.office-case-heading { position:absolute; z-index:4; top:-9px; left:50%; translate:-50%; padding:3px 11px; border:3px solid #52799e; border-radius:999px; background:#ecfbff; color:#315d80; font-size:10px; font-weight:1000; white-space:nowrap; box-shadow:0 3px 0 rgba(74,92,109,.18); }
.office-case-grid { position:absolute; z-index:3; top:17%; right:10%; bottom:25%; left:10%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.office-case-slot { overflow:visible; background:rgba(238,252,255,.22); }
.office-case-slot .office-product-stack { width:92%; height:94%; }
.office-case-slot img { max-width:64px; max-height:62px; }
.office-case-slot strong { right:auto; bottom:-5px; }
.office-wagon-front { position:absolute; z-index:3; left:16px; right:16px; bottom:-30px; height:31px; display:grid; place-items:center; border:3px solid #6e4632; border-radius:4px 4px 9px 9px; background:linear-gradient(#f49aac,#e96f88); color:#fff9e9; text-shadow:0 1px #9b4053; font-size:9px; font-weight:1000; letter-spacing:.08em; }
.wagon-wheel { position:absolute; z-index:1; bottom:-53px; width:27px; height:27px; border:6px solid #5b3a2c; border-radius:50%; background:#d6a15e; box-shadow:inset 0 0 0 4px #80513a; }
.wagon-wheel.left { left:34px; }.wagon-wheel.right { right:34px; }
.desk { position:absolute; width:170px; height:78px; border:5px solid #6f513f; border-radius:8px; background:#b88759; box-shadow:inset 0 14px 0 #d5aa78; }
.desk::before,.desk::after { content:""; position:absolute; bottom:-52px; width:14px; height:52px; background:#704d39; }
.desk::before{left:18px}.desk::after{right:18px}
.d1{left:55px;bottom:145px}.d2{right:55px;bottom:145px}.d3{left:250px;bottom:20px}.d4{right:250px;bottom:20px}
.mob { position:absolute; width:64px; height:96px; z-index:5; background-repeat:no-repeat; background-size:256px 384px; image-rendering:pixelated; filter:drop-shadow(3px 5px 0 rgba(60,45,35,.2)); animation:walkFrames .55s steps(4) infinite, bob .6s ease-in-out infinite alternate; transition:left .8s linear, top .8s linear; }
.mob.direction-down { background-position-y:0; }
.mob.direction-left { background-position-y:-96px; }
.mob.direction-right { background-position-y:-192px; }
.mob.direction-up { background-position-y:-288px; }
@keyframes walkFrames { to { background-position-x:-256px; } }
@keyframes bob { to { translate:0 -2px; } }
.reaction { position:absolute; width:48px; height:48px; z-index:8; object-fit:contain; image-rendering:pixelated; animation:pop .7s ease both; }
.held-snack { position:absolute; z-index:9; right:-8px; bottom:14px; width:35px; height:35px; object-fit:contain; image-rendering:auto; filter:drop-shadow(2px 2px 0 white); animation:heldSnack .35s ease both; }
@keyframes heldSnack { from { scale:.2; rotate:-18deg; } to { scale:1; rotate:7deg; } }
.purchase-showcase { position:absolute; z-index:10; left:50%; top:315px; translate:-50%; min-width:230px; display:flex; align-items:center; justify-content:center; gap:9px; padding:7px 13px; border:3px solid #714839; border-radius:15px; background:#fff8dc; box-shadow:0 5px 0 #dc9d67; animation:showcasePop .28s ease both; }
.purchase-showcase>img { width:46px; height:46px; object-fit:contain; image-rendering:auto; }
.purchase-showcase span { display:grid; color:#6b4738; line-height:1.15; }
.purchase-showcase b { color:#c94d67; font-size:11px; }
.purchase-showcase small { font-size:10px; font-weight:900; }
.purchase-showcase .nickname-change-notice { margin-top:3px; padding-top:3px; border-top:1px dashed #d39a42; color:#0b4d85; font-size:10px; font-style:normal; font-weight:900; }
@keyframes showcasePop { from { opacity:0; scale:.7; translate:-50% 8px; } to { opacity:1; scale:1; translate:-50% 0; } }
@keyframes pop { 0%{scale:.2;opacity:0} 55%{scale:1.3;opacity:1} 100%{scale:1;opacity:1;translate:0 -10px} }
.speech { position:absolute; z-index:7; min-width:180px; max-width:230px; min-height:78px; padding:15px 20px 24px; border:0; border-radius:0; background-color:transparent; background-position:center; background-size:100% 100%; background-repeat:no-repeat; color:#563d34; font-size:12px; font-weight:900; line-height:1.45; filter:drop-shadow(0 4px 0 rgba(76,48,35,.18)); animation:pop .4s ease both; }
.speech-left { background-image:url('./public/assets/ui/dialogue/ui_dialogue_normal_left.png'); }
.speech-right { background-image:url('./public/assets/ui/dialogue/ui_dialogue_normal_right.png'); }
.side-panel { padding:15px; align-self:stretch; }
.speed-row { display:grid; grid-template-columns:repeat(3,minmax(0,92px)); justify-content:center; gap:10px; margin-bottom:12px; }
.speed-button { flex:1; padding:8px; border-radius:9px; background:white; }
.speed-button.active { color:white; background:var(--blue); }
.log { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow:auto; }
.log-entry { padding:9px; border-radius:9px; background:#fff7e7; border-left:4px solid var(--orange); font-size:12px; }
.progress-bar { height:16px; overflow:hidden; border:2px solid #6f4435; border-radius:999px; background:#eadfd2; }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--pink),var(--orange)); transition:width .35s ease; }
.sales-panel { margin:14px 0; padding:10px; border:2px solid #d39a42; border-radius:12px; background:#fff5ce; font-size:11px; }
.sales-panel>div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sales-panel>div:first-child strong { color:#b05d16; font-size:21px; }
.sales-panel .sales-breakdown { display:block; margin:5px 0; padding:5px; border-radius:7px; background:rgba(255,255,255,.7); color:#765733; line-height:1.45; }
.sales-panel b { color:#a75022; }
.affection-panel { margin:14px 0; padding:10px; border:2px solid #d4a77f; border-radius:12px; background:#fffaf0; }
.affection-panel h3 { margin:0 0 7px; font-size:14px; }
.affection-row { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:5px 4px; border-top:1px dashed #dbc2aa; font-size:11px; transition:.25s ease; }
.affection-row>span:last-child { display:flex; align-items:center; gap:5px; }
.affection-row b { min-width:20px; color:var(--pink-dark); text-align:right; }
.affection-hearts { color:#e34d67; letter-spacing:-1px; white-space:nowrap; }
.affection-row.affection-up { scale:1.04; background:#ffe1e7; box-shadow:0 0 0 3px rgba(239,113,132,.22); }
.relationship-stage { max-width:120px; padding:6px 9px; border:2px solid #e0a28a; border-radius:999px; background:#fff0d8; color:#a34f54; font-size:12px; text-align:center; }

.review-grid { max-width:1050px; margin:24px auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card { padding:20px; text-align:center; }
.review-number { font-size:50px; font-weight:1000; color:var(--pink-dark); }
.ranking { text-align:left; margin:0; padding-left:25px; }
.comment-list { max-width:900px; margin:20px auto; display:grid; gap:10px; }
.comment { padding:14px 18px; border:3px solid #c69a71; border-radius:14px; background:white; font-weight:800; }
.review-event { max-width:900px; margin:16px auto; padding:13px 18px; border:3px solid #d69a42; border-radius:14px; background:#fff4cd; text-align:center; }
.review-event span { margin-left:12px; color:#8a5c34; font-weight:900; }
.affection-review { max-width:900px; margin:16px auto; padding:16px; border:3px solid #d799a6; border-radius:16px; background:#fff7f8; text-align:center; }
.affection-review h3 { margin:0 0 12px; }
.affection-review>div { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.affection-review article { display:grid; gap:3px; place-items:center; padding:10px 4px; border:2px solid #efc1ca; border-radius:12px; background:white; font-size:11px; }
.affection-review article>span:first-child { font-size:22px; }
.affection-review article b { color:var(--pink-dark); font-size:18px; }
.sales-review { max-width:900px; margin:16px auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px; border:3px solid #d39a42; border-radius:16px; background:#fff5ce; text-align:center; }
.sales-review>div { display:grid; gap:3px; padding:10px; border-radius:10px; background:white; }
.sales-review strong { color:#a75022; font-size:28px; }
.review-chart-card { max-width:900px; margin:16px auto; padding:16px 18px 12px; border:3px solid #174681; border-radius:18px; background:linear-gradient(180deg,#fffdf1,#fff3cf); box-shadow:0 6px 0 #d6aa65; }
.review-chart-card>header { display:flex; align-items:end; justify-content:space-between; gap:12px; text-align:left; }
.review-chart-card>header span { color:#6f7f8e; font-size:10px; font-weight:1000; letter-spacing:.08em; }
.review-chart-card h3 { margin:2px 0 0; color:#123f76; font-size:18px; }
.review-chart-card>header>strong { color:#d64b2e; font-size:25px; white-space:nowrap; }
.review-chart-comparison { width:max-content; margin:8px 0 4px auto; padding:3px 9px; border-radius:999px; background:#eee8dc; color:#6f6258; font-size:10px; font-weight:1000; }
.review-chart-comparison.up { background:#e5f6e8; color:#278547; }
.review-chart-comparison.down { background:#fff0ee; color:#c44d42; }
.chart-legend { display:flex; justify-content:flex-end; gap:12px; margin:7px 4px 0; color:#6f6258; font-size:9px; font-weight:1000; }
.chart-legend span::before { content:""; display:inline-block; width:13px; height:7px; margin-right:4px; border-radius:4px; vertical-align:1px; }
.chart-legend .sales::before { background:linear-gradient(90deg,#87db49,#25ac4d); }
.chart-legend .purchases::before { height:3px; background:#e5a12a; box-shadow:4px -2px 0 1px #fff,4px -2px 0 3px #e5a12a; }
.sales-purchases-chart { position:relative; }
.sales-purchases-plot { position:relative; padding:0 30px; }
.chart-axis { position:absolute; top:19px; bottom:25px; z-index:3; display:flex; flex-direction:column; justify-content:space-between; color:#758173; font-size:7px; font-weight:1000; pointer-events:none; }
.chart-axis-sales { left:0; align-items:flex-start; color:#2d9e4d; }
.chart-axis-purchases { right:0; align-items:flex-end; color:#d28a18; }
.review-sales-chart { height:170px; display:grid; grid-template-columns:repeat(var(--sales-days,5),minmax(0,1fr)); align-items:end; gap:9px; padding:8px 7px 0; border-bottom:3px solid #b58a55; background:repeating-linear-gradient(to top,transparent 0 39px,rgba(23,70,129,.1) 39px 40px); }
.review-sales-column { min-width:0; height:100%; padding-top:19px; display:grid; grid-template-rows:1fr 22px; align-items:end; justify-items:center; }
.review-sales-column>b { align-self:center; color:#775944; font-size:10px; }
.review-sales-track { width:min(46px,78%); height:100%; display:flex; align-items:end; overflow:visible; border:0; border-radius:5px 5px 0 0; background:transparent; }
.review-sales-track>i { position:relative; display:block; width:100%; height:var(--sales-height); min-height:3px; border-radius:3px 3px 0 0; background:linear-gradient(#8ce34c,#24b14e); box-shadow:inset 0 2px rgba(255,255,255,.45); animation:reviewBarRise .55s cubic-bezier(.2,.8,.3,1) both; transform-origin:bottom; }
.review-sales-track>i>span { position:absolute; z-index:4; left:50%; bottom:calc(100% + 2px); max-width:70px; padding:1px 2px; translate:-50% 0; border-radius:3px; background:rgba(255,253,242,.88); color:#775944; font-size:8px; font-style:normal; font-weight:1000; line-height:1; white-space:nowrap; }
.purchases-line-chart { position:absolute; inset:18px 30px 22px; z-index:2; width:calc(100% - 60px); height:calc(100% - 40px); overflow:visible; pointer-events:none; }
.purchases-line-chart polyline { fill:none; stroke:#e5a12a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 2px 0 #fff); animation:weeklyLineDraw .7s ease both; }
.chart-result-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; padding:9px 11px; border:2px solid #d4b36d; border-radius:11px; background:#fff9c8; box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }
.chart-result-summary span { display:flex; align-items:baseline; justify-content:space-between; gap:5px; min-width:0; }
.chart-result-summary small { color:#765b36; font-weight:1000; }
.chart-result-summary strong { color:#5f4830; font-size:15px; white-space:nowrap; }
.review-chart-card>footer { display:flex; justify-content:space-between; padding-top:5px; color:#867366; font-size:9px; font-weight:900; }
@keyframes reviewBarRise { from { scale:1 0; } }
.milestone-screen,.ending-screen { text-align:center; background:radial-gradient(circle at 50% 20%,#fff7cf,#fffaf0 55%); }
.milestone-kicker { display:inline-block; margin-bottom:10px; padding:7px 16px; border-radius:999px; background:var(--blue); color:white; font-weight:1000; }
.weekly-score { display:grid; place-items:center; width:190px; height:190px; margin:18px auto; border:7px solid #d39a42; border-radius:50%; background:white; box-shadow:0 10px 0 #d8b16b; }
.weekly-score small,.weekly-score b { display:block; }
.weekly-score strong { margin:-10px 0; color:var(--pink-dark); font-size:88px; line-height:1; }
.weekly-score b { font-size:21px; }
.weekly-result-stage { position:relative; isolation:isolate; width:min(430px,100%); margin:0 auto 24px; padding:8px 0 24px; overflow:hidden; }
.weekly-result-stage::before { content:""; position:absolute; z-index:-1; inset:0 8%; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(244,190,55,.22) 0 8deg,transparent 8deg 18deg); animation:weeklyRays 9s linear infinite; }
.weekly-result-stage::after { content:"✦  ✧  ✦  ✧  ✦"; position:absolute; z-index:2; inset:14px 0 auto; color:#e7a429; font-size:24px; letter-spacing:.35em; animation:weeklySparkle 1.15s ease-in-out infinite alternate; }
.weekly-result-stage .weekly-score { position:relative; z-index:1; animation:weeklyScoreReveal .65s cubic-bezier(.18,1.45,.35,1) both; }
.weekly-grade-stamp { position:absolute; z-index:3; right:16%; bottom:10px; padding:6px 15px; border:4px double #cc3f4f; border-radius:9px; background:#fff9e8; color:#cc3f4f; box-shadow:0 3px 0 #e6b2a1; font-size:17px; font-weight:1000; rotate:-7deg; animation:weeklyStamp .42s .48s cubic-bezier(.15,1.6,.45,1) both; }
@keyframes weeklyRays { to { rotate:360deg; } }
@keyframes weeklySparkle { to { opacity:.45; scale:.96; } }
@keyframes weeklyScoreReveal { from { opacity:0; scale:.55; rotate:-12deg; } }
@keyframes weeklyStamp { from { opacity:0; scale:1.8; rotate:9deg; } }
.grade-s { border-color:#db9d25; background:#fff4b5; }
.grade-a { border-color:#e6728d; background:#fff0f4; }
.grade-b { border-color:#5fa974; background:#effff3; }
.grade-c,.grade-d { border-color:#879cad; background:#f0f4f6; }
.weekly-components { max-width:900px; margin:20px auto; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.weekly-components article { display:grid; gap:4px; padding:15px 8px; border:3px solid #c99d77; border-radius:16px; background:white; }
.weekly-components article span { font-size:12px; font-weight:900; }
.weekly-components article strong { color:var(--pink-dark); font-size:32px; }
.weekly-reveal-guide { display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; max-width:100%; margin:4px auto 12px; padding:7px 13px; border:2px solid #e2bd68; border-radius:999px; background:#fff5cd; color:#654b3f; font-size:13px; font-weight:1000; }
.weekly-reveal-guide span { display:inline-block; animation:weeklyTapGuide 1s ease-in-out infinite alternate; }
.weekly-component-reveal article { transition:opacity .28s ease,transform .35s ease,filter .28s ease; }
.weekly-component-reveal article.locked { opacity:.58; filter:grayscale(1); transform:scale(.96); }
.weekly-component-reveal article.revealed { animation:weeklyComponentReveal .48s cubic-bezier(.2,1.4,.35,1) both; }
.weekly-component-reveal article.locked strong { color:#9c928c; }
.weekly-result-stage.locked { opacity:.58; filter:grayscale(1); }
.weekly-result-stage.locked::after { display:none; }
.weekly-result-stage.revealed { animation:weeklyComponentReveal .55s cubic-bezier(.2,1.35,.35,1) both; }
.weekly-reveal-action { position:relative; z-index:4; margin:10px auto 14px; }
.weekly-reveal-action .primary { min-width:min(440px,100%); }
@keyframes weeklyComponentReveal { from { opacity:0; transform:translateY(12px) scale(.82); } }
@keyframes weeklyTapGuide { to { transform:translateY(3px); } }
.weekly-progress,.weekly-report-row { max-width:760px; margin:18px auto; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.weekly-progress span { padding:9px; border-radius:10px; background:#e8ded2; color:#8b776c; font-weight:900; }
.weekly-progress span.done { background:var(--green); color:white; }
.weekly-note,.ending-message,.ending-nickname { max-width:760px; margin:18px auto; padding:15px 18px; border:3px solid #d39a42; border-radius:15px; background:#fff4cd; font-weight:900; }
.weekly-dashboard { max-width:920px; margin:24px auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; text-align:left; }
.weekly-summary-card { min-width:0; padding:15px; border:3px solid #c79a69; border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 6px 0 #e3c69d; }
.weekly-summary-card>header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.weekly-summary-card>header small { color:#778a9a; font-size:9px; font-weight:1000; letter-spacing:.09em; }
.weekly-summary-card h3 { margin:2px 0 0; color:#174681; font-size:18px; }
.weekly-summary-card>header>strong { color:#d84c31; font-size:22px; white-space:nowrap; }
.weekly-summary-card.review-chart-card>footer,.weekly-sales-card>footer { display:flex; justify-content:space-between; padding-top:5px; color:#867366; font-size:9px; font-weight:900; }
.weekly-trend-legend { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:9px; font-weight:1000; }
.weekly-trend-legend span { padding:5px 7px; border-radius:8px; }
.weekly-trend-legend .satisfaction { background:#fff0bd; color:#a26809; }
.weekly-trend-legend .overall { background:#e6f2ff; color:#174681; }
.weekly-metric-lines { position:relative; height:176px; margin-top:10px; padding-bottom:24px; border-bottom:3px solid #b58a55; background:repeating-linear-gradient(to top,transparent 0 37px,rgba(23,70,129,.1) 37px 38px); }
.weekly-metric-lines svg { position:absolute; inset:0 0 24px; width:100%; height:calc(100% - 24px); overflow:visible; }
.weekly-metric-lines polyline { fill:none; stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; animation:weeklyLineDraw .6s ease both; }
.weekly-metric-lines polyline.satisfaction,.weekly-metric-lines circle.satisfaction { stroke:#edae2c; }
.weekly-metric-lines polyline.overall,.weekly-metric-lines circle.overall { stroke:#267bc0; }
.weekly-metric-lines circle { fill:white; stroke-width:2; vector-effect:non-scaling-stroke; }
.weekly-line-value { position:absolute; z-index:2; left:var(--point-x); top:var(--point-y); translate:-50% -125%; padding:1px 3px; border-radius:5px; background:#fffdf7; color:#654f45; font-size:8px; font-weight:1000; line-height:1; }
.weekly-line-value.overall { translate:-50% 35%; }
.weekly-line-days { position:absolute; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); color:#806d60; font-size:9px; text-align:center; }
.weekly-metric-key { display:flex; justify-content:center; gap:16px; margin-top:8px; color:#66554d; font-size:9px; font-weight:1000; }
.weekly-metric-key span::before { content:""; display:inline-block; width:11px; height:7px; margin-right:4px; border-radius:3px; }
.weekly-metric-key .satisfaction::before { background:#edae2c; }
.weekly-metric-key .overall::before { background:#267bc0; }
@keyframes weeklyLineDraw { from { opacity:0; translate:0 8px; } }
.weekly-popular-card ol { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.weekly-popular-card li { display:grid; grid-template-columns:28px 54px minmax(0,1fr); align-items:center; gap:8px; min-height:57px; padding:6px 9px; border:2px solid #ead1a8; border-radius:12px; background:#fffaf0; }
.weekly-popular-card li>b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#174681; color:white; }
.weekly-popular-card li>img { width:52px; height:45px; object-fit:contain; image-rendering:auto; }
.weekly-popular-card li>span { min-width:0; display:grid; }
.weekly-popular-card li strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.weekly-popular-card li small { color:#9b6547; font-weight:900; }
.weekly-popular-card li.weekly-empty { display:block; padding:22px; color:#8b776c; text-align:center; }
.weekly-memory-card { grid-column:1/-1; }
.weekly-event-memory { padding:11px; border-radius:12px; background:#fff7db; }
.weekly-event-memory ul { display:grid; gap:5px; margin:8px 0 0; padding-left:18px; color:#654f45; font-size:11px; font-weight:800; }
.weekly-event-memory p { margin:8px 0 0; color:#89756a; font-size:11px; font-weight:800; }
.ending-symbol { margin:12px 0 0; font-size:80px; animation:eventResultPop .65s cubic-bezier(.2,1.5,.5,1); }
.ending-id { color:#85695e; font-weight:900; }
.final-score { display:grid; place-items:center; width:210px; margin:18px auto; padding:18px; border:5px solid var(--pink-dark); border-radius:22px; background:white; box-shadow:0 8px 0 #e8a5b1; }
.final-score strong { color:var(--pink-dark); font-size:65px; line-height:1; }
.final-score small { color:#776159; }
.weekly-report-row article { display:grid; gap:3px; padding:12px 6px; border:3px solid #c99d77; border-radius:14px; background:white; }
.weekly-report-row article strong { color:var(--pink-dark); font-size:35px; }
.ending-screen.failure { background:radial-gradient(circle at 50% 20%,#eef1f3,#fffaf0 58%); }
.ending-ceremony .ending-art { opacity:.08; scale:1.04; transition:opacity .6s ease,scale .8s ease; }
.ending-ceremony .ending-art.revealed { opacity:.5; scale:1; }
.ending-still { width:min(700px,100%); margin:14px auto; overflow:hidden; border:5px solid #d39a42; border-radius:20px; background:#fff5ce; box-shadow:0 7px 0 #77462f,0 12px 24px rgba(65,35,20,.24); animation:endingStillIn .65s cubic-bezier(.2,1.25,.45,1) both; }
.ending-still img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; image-rendering:auto; }
.ending-still figcaption { padding:8px 12px; color:#173f73; background:#fff7dc; font-weight:1000; }
@keyframes endingStillIn { from { opacity:0; translate:0 18px; scale:.94; } }
.ending-ceremony-lead { color:#765e54; font-weight:900; }
.ending-weekly-reveal article,.final-score,.ending-nickname { transition:opacity .35s ease,transform .35s ease,filter .35s ease; }
.ending-weekly-reveal article.locked,.final-score.locked,.ending-nickname.locked { opacity:.55; filter:grayscale(1); transform:scale(.96); }
.ending-weekly-reveal article.revealed,.final-score.revealed,.ending-nickname.revealed { animation:endingRevealPop .52s cubic-bezier(.2,1.45,.35,1) both; }
@keyframes endingRevealPop { from { opacity:0; transform:scale(.78) translateY(12px); } }
.ending-tap-note { margin:12px auto; color:#846f65; font-size:11px; font-weight:900; }
.ending-reveal-button { min-width:min(420px,100%); }
.final-judgment-stamp { width:max-content; margin:12px auto; padding:8px 22px; border:7px double currentColor; border-radius:9px; font-size:34px; font-weight:1000; letter-spacing:.12em; rotate:-7deg; animation:judgmentStamp .55s cubic-bezier(.1,1.6,.3,1) both; }
.final-judgment-stamp.pass { color:#d63d4e; background:#fff7f2dd; }
.final-judgment-stamp.fail { color:#40556b; background:#f0f3f5dd; }
@keyframes judgmentStamp { from { opacity:0; scale:2.2; rotate:8deg; } }
.ending-confetti { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; }
.ending-confetti i { position:absolute; left:calc(var(--i) * 5%); top:-18px; width:10px; height:18px; border-radius:3px; background:hsl(calc(var(--i) * 43deg) 78% 58%); animation:confettiFall calc(2.5s + var(--i) * .09s) ease-in calc(var(--i) * -.08s) infinite; }
@keyframes confettiFall { to { translate:calc((var(--i) - 10) * 2px) 760px; rotate:720deg; } }
.credits-screen { min-height:720px; padding:12px; background:radial-gradient(circle at top,#174681,#061e40 64%,#040e1d); color:white; }
.credits-only-shell { min-height:100dvh; padding:0; gap:0; }
.credits-only-shell>.stage { min-height:100dvh; overflow:hidden; border:0; border-radius:0; box-shadow:none; }
.credits-only-shell .credits-screen { min-height:100dvh; border-radius:0; }
.credits-only-shell .credits-viewport { height:calc(100dvh - 190px); min-height:360px; max-height:none; }
.credits-only-shell .credits-controls { width:min(700px,100%); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; }
.credits-only-shell .credits-controls button { min-width:0; padding-inline:6px; font-size:11px; }
.credits-share-button,.credits-restart-button { grid-column:1/-1; }
.credits-share-button { min-height:72px; display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:10px; padding:7px 12px!important; border:3px solid #0d396f; background:linear-gradient(180deg,#62b7e5,#287bb6); color:white; box-shadow:0 5px 0 #082b57; text-align:left; }
.credits-share-button img { width:76px; height:50px; border:2px solid #f3c85b; border-radius:8px; object-fit:cover; }
.credits-share-button span,.credits-share-button strong,.credits-share-button small { display:block; }
.credits-share-button strong { font-size:14px; }
.credits-share-button small { margin-top:2px; color:#eaf7ff; font-size:9px; }
.credits-share-button:hover { filter:brightness(1.08); translate:0 -1px; }
.credits-viewport { position:relative; height:min(72dvh,760px); overflow:hidden; border:4px solid #d5a848; border-radius:22px; background:linear-gradient(#061b36,#092952); box-shadow:inset 0 0 50px #0009; }
.credits-viewport::before,.credits-viewport::after { content:""; position:absolute; z-index:2; left:0; right:0; height:60px; pointer-events:none; }
.credits-viewport::before { top:0; background:linear-gradient(#061b36,transparent); }
.credits-viewport::after { bottom:0; background:linear-gradient(transparent,#061b36); }
.credits-roll { display:grid; gap:46px; width:min(680px,calc(100% - 22px)); margin:0 auto; padding:62vh 0 36vh; animation:creditsRoll 38s linear forwards; will-change:transform; }
.credits-roll.paused { animation-play-state:paused; }
@keyframes creditsRoll { from { transform:translateY(0); } to { transform:translateY(calc(-100% + 68vh)); } }
.credits-title small,.credits-result>small { color:#f4c95e; font-size:11px; font-weight:1000; letter-spacing:.15em; }
.credits-title-logo { display:block; width:min(430px,88%); max-height:150px; margin:12px auto 7px; object-fit:contain; filter:drop-shadow(0 5px 5px rgba(0,0,0,.4)); }
.credits-thanks h2 { margin:8px 0; color:white; font-size:42px; }
.credits-title p { color:#cfe2ff; font-weight:900; }
.credits-timeline { display:grid; gap:14px; margin:0; padding:0; list-style:none; text-align:left; }
.credits-timeline li { display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:start; }
.credits-timeline time { padding:5px; border-radius:999px; background:#d5a848; color:#102d50; font-size:10px; font-weight:1000; text-align:center; }
.credits-timeline li>div { padding:11px 13px; border:2px solid #527cac; border-radius:13px; background:#fffdf2; color:#573f35; }
.credits-timeline strong { color:#174681; }
.credits-timeline p { margin:5px 0 0; font-size:11px; font-weight:800; line-height:1.7; }
.credits-weekly h3,.credits-sales h3 { color:#f4c95e; }
.credits-weekly>div { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.credits-weekly article { display:grid; gap:4px; padding:12px 4px; border:2px solid #d5a848; border-radius:12px; background:#fffdf2; color:#50382d; }
.credits-weekly article strong { color:#d1415d; font-size:32px; }
.credits-sales { padding:16px; border:2px solid #527cac; border-radius:16px; background:#071f40; }
.credits-sales-bars { height:150px; display:grid; grid-template-columns:repeat(var(--credits-days),minmax(2px,1fr)); align-items:end; gap:3px; border-bottom:2px solid #f4c95e; }
.credits-sales-bars i { height:var(--bar); min-height:3px; border-radius:4px 4px 0 0; background:linear-gradient(#f5c74f,#ef6c59); }
.credits-sales>div:last-child { display:flex; justify-content:space-between; margin-top:7px; color:#d6e5f9; font-size:9px; }
.credits-result { display:grid; gap:12px; padding:26px 14px; border:4px double #f4c95e; border-radius:18px; background:#fffdf2; color:#563e34; }
.credits-result h2 { margin:0; color:#174681; }
.credits-result>div { display:flex; justify-content:center; gap:22px; }
.credits-result b { color:#d1415d; font-size:24px; }
.credits-result p { margin:5px 0 -8px; color:#9b7750; font-weight:900; }
.credits-result>strong { color:#d1415d; font-size:26px; }
.credits-thanks { display:grid; gap:7px; min-height:420px; align-content:center; }
.credits-thanks span,.credits-thanks p { color:#cfe2ff; font-weight:900; }
.credits-thanks strong { color:#f4c95e; font-size:24px; letter-spacing:.08em; }
.credits-controls { position:relative; z-index:3; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.credits-controls button { min-width:150px; }
.sales-review small { grid-column:1/-1; color:#765733; }
.toast { position:fixed; left:50%; bottom:24px; translate:-50%; z-index:50; padding:12px 20px; border:3px solid #6f4435; border-radius:12px; background:#3f6d55; color:white; box-shadow:var(--shadow); font-weight:900; animation:pop .25s ease; }
.achievement-toast { bottom:calc(100px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom))); width:min(560px,calc(100vw - 28px)); text-align:center; border-color:#d69a42; background:linear-gradient(135deg,#0b4d85,#173a70); color:#fff7d6; box-shadow:0 6px 0 #6f4435,0 12px 28px #173a7040; }
.title-actions { display:grid; gap:10px; width:min(360px,100%); margin:18px auto 0; }
.title-actions .tertiary { padding:9px 14px; border:0; background:transparent; color:#795f50; text-decoration:underline; }
.tutorial-card { max-width:650px; margin:0 auto; text-align:center; }
.tutorial-progress { display:inline-block; padding:5px 13px; border-radius:999px; background:#2775ad; color:white; font-size:11px; font-weight:1000; }
.tutorial-icon { margin:12px 0 2px; font-size:64px; filter:drop-shadow(0 5px 0 rgba(92,57,40,.14)); }
.tutorial-card h2 { margin:3px 0 6px; color:#c34e65; font-size:30px; }
.tutorial-card>p { margin:0 0 13px; color:#6e554d; font-weight:800; }
.tutorial-card ul { display:grid; gap:7px; margin:0; padding:0; list-style:none; text-align:left; }
.tutorial-card li { position:relative; padding:10px 12px 10px 38px; border:2px solid #d8b187; border-radius:11px; background:white; color:#634d44; font-weight:900; }
.tutorial-card li::before { content:"✓"; position:absolute; left:12px; color:#48a06b; font-size:18px; }
.save-section { margin-top:20px; padding-top:18px; border-top:2px dashed #d9ae8d; }
.save-slot-list { display:grid; gap:10px; margin-top:12px; }
.save-slot-list article { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:12px; border:2px solid #d7ad88; border-radius:14px; background:white; }
.save-slot-list h3,.save-slot-list p { margin:2px 0; }
.save-slot-list small { color:#a66b51; font-weight:1000; }
.save-slot-list p { color:#765e55; font-size:12px; }
.save-slot-list button { padding:9px 12px; }

.modal-backdrop {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:rgba(55,35,35,.62); backdrop-filter:blur(3px); animation:fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity:0; } }
.morning-modal {
  width:min(900px,100%); max-height:min(760px,92vh); overflow:auto; padding:24px;
  border:4px solid #6f4435; border-radius:24px; background:#fffaf0; box-shadow:0 18px 0 rgba(70,40,30,.25);
}
.modal-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:16px; }
.modal-heading h2,.activity-card h2 { margin:5px 0; color:var(--pink-dark); font-size:clamp(25px,4vw,40px); }
.modal-heading p,.activity-card>p { margin:4px 0; color:#6e554d; font-weight:700; }
.modal-kicker { display:inline-block; padding:5px 12px; border-radius:999px; color:white; background:var(--blue); font-weight:900; }
.modal-close { flex:0 0 auto; width:44px; height:44px; overflow:hidden; border:0; border-radius:50%; background:transparent url('./public/assets/ui/buttons/batu-128.png') center/contain no-repeat; cursor:pointer; font-size:0; filter:drop-shadow(0 3px 0 rgba(83,43,28,.28)); }
.modal-close:hover { translate:0 -1px; filter:brightness(1.05) drop-shadow(0 4px 0 rgba(83,43,28,.25)); }
.modal-back-button { flex:0 0 auto; min-height:40px; padding:6px 13px; border:3px solid #6f4435; border-radius:999px; background:#fffaf0; color:#6f4435; cursor:pointer; font-size:14px; font-weight:900; white-space:nowrap; box-shadow:0 3px 0 #d8b18c; }
.modal-back-button:hover { translate:0 -1px; background:#fff1d4; }
.shop-budget { margin:12px 0; padding:10px 15px; border-radius:12px; background:#fff0c9; font-size:17px; }
.store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.store-card { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr) auto; grid-template-areas:"icon copy price" "icon copy count" "unlock unlock unlock"; align-items:center; gap:8px 10px; min-height:145px; padding:16px; border:4px solid #b88b69; border-radius:20px; background:white; color:var(--ink); cursor:pointer; text-align:left; box-shadow:0 6px 0 #d8b18c; }
.store-card:hover { translate:0 -3px; border-color:var(--pink-dark); background:#fff8f0; }
.store-card.locked { cursor:not-allowed; opacity:.62; filter:grayscale(.45); box-shadow:none; }
.store-card.locked:hover { translate:0; border-color:#b88b69; background:white; }
.store-card .store-icon { grid-area:icon; display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:#fff1c9; font-size:37px; }
.store-card .store-copy { grid-area:copy; min-width:0; }
.store-card strong,.store-card small { display:block; }
.store-card strong { font-size:20px; }
.store-card small { margin-top:4px; color:#765e55; font-size:12px; }
.store-card b { grid-area:price; color:var(--pink-dark); white-space:nowrap; }
.store-card em { grid-area:count; padding:4px 8px; border-radius:999px; background:#eef8ff; color:#39769d; font-size:12px; font-style:normal; font-weight:900; }
.store-card.store-st02 { order:1; }
.store-card.store-st03 { order:2; }
.store-card.store-st04 { order:3; }
.store-card.store-st01 { order:4; }
.store-unlock { grid-area:unlock; width:fit-content; padding:4px 10px; border-radius:999px; background:#ece5dd; color:#725e54; font-size:11px; font-weight:900; }
.prototype-note { margin:14px 0 0; padding:9px 12px; border-left:5px solid var(--blue); border-radius:8px; background:#eef8ff; color:#517084; font-size:12px; font-weight:800; }
.shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.shop-item { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:7px; min-width:0; padding:10px; border:3px solid #b88b69; border-radius:14px; background:white; text-align:left; }
.shop-item.selected { border-color:var(--pink-dark); background:#fff0f3; }
.shop-item img { width:58px; height:58px; object-fit:contain; image-rendering:pixelated; }
.shop-item>.product-placeholder { width:58px; height:58px; margin:0; border-radius:12px; font-size:30px; }
.shop-item span,.advisor-card span:last-child { min-width:0; }
.shop-item strong,.shop-item small,.advisor-card b,.advisor-card small { display:block; }
.shop-item strong { font-size:13px; }
.shop-item small,.advisor-card small { color:#765e55; font-size:11px; }
.shop-item b { grid-column:1/-1; justify-self:end; color:var(--pink-dark); }
.shop-item b small { display:inline; color:#8b6c60; font-size:10px; }
.shop-item .equipment-label { margin-top:4px; color:#39769d; font-weight:900; }
.shop-item .shop-owned-stock { width:max-content; margin-top:4px; padding:2px 7px; border-radius:999px; background:#fff0c7; color:#8b5a30; font-weight:1000; }
.shop-stepper { grid-column:1/-1; display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:8px; width:100%; }
.shop-stepper button { height:36px; border:2px solid #6f4435; border-radius:9px; background:#fff4d7; color:var(--ink); cursor:pointer; font-size:21px; font-weight:1000; }
.shop-stepper [data-shop-plus],.shop-stepper [data-shop-plus-ten] { color:white; background:var(--pink); }
.shop-stepper button:disabled { opacity:.35; cursor:not-allowed; }
.shop-stepper strong { display:grid; place-items:center; min-height:36px; border:2px solid #d8b18c; border-radius:9px; background:white; font-size:18px; }
.shop-stepper .bulk { height:30px; font-size:13px; }
.shop-stepper .bulk-label { display:grid; place-items:center; color:#8a6758; font-size:10px; font-weight:1000; letter-spacing:.08em; }
.shop-controls-guide-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:12px; background:rgba(24,31,46,.72); backdrop-filter:blur(3px); }
.shop-controls-guide { width:min(560px,100%); max-height:calc(100dvh - 24px); overflow:auto; padding:20px; border:4px solid #6f4435; border-radius:22px; background:#fffaf0; box-shadow:inset 0 0 0 3px #f0c665,0 14px 0 rgba(46,27,21,.3); text-align:center; }
.shop-controls-guide h2 { margin:8px 0 3px; color:var(--pink-dark); }
.shop-controls-guide>p { margin:0 0 12px; color:#705950; font-weight:800; }
.shop-controls-guide-sample { display:grid; grid-template-columns:48px 42px minmax(58px,1fr) 42px 52px; align-items:center; gap:6px; margin:0 auto 13px; }
.shop-controls-guide-sample b,.shop-controls-guide-sample strong { min-height:38px; display:grid; place-items:center; align-content:center; border:2px solid #6f4435; border-radius:9px; background:#fff4d7; color:#513b33; font-size:19px; }
.shop-controls-guide-sample strong { border-color:#d8b18c; background:white; }
.shop-controls-guide-sample .plus { color:white; background:var(--pink); }
.shop-controls-guide-sample small { display:block; font-size:7px; line-height:1; }
.shop-controls-guide ul { display:grid; gap:6px; margin:0 0 15px; padding:0; list-style:none; text-align:left; }
.shop-controls-guide li { display:grid; grid-template-columns:105px minmax(0,1fr); gap:8px; padding:8px 10px; border:2px solid #e2c39d; border-radius:10px; background:white; }
.shop-controls-guide li strong { color:#174681; }
.shop-controls-guide li span { color:#665149; font-size:12px; font-weight:800; }
.shop-controls-guide>.primary { width:100%; }
.modal-actions { display:flex; justify-content:center; gap:10px; margin-top:20px; }
.advisor-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.advisor-card { overflow:hidden; padding:0 8px 12px; border:3px solid #b88b69; border-radius:16px; background:white; cursor:pointer; text-align:center; }
.advisor-card:hover { border-color:var(--pink); background:#fff2f4; transform:translateY(-3px); }
.advisor-portrait-frame { display:grid; place-items:end center; height:136px; margin:0 -8px 9px; overflow:hidden; background:radial-gradient(circle at 50% 38%,#fff 0 35%,#eef6fb 70%,#dbeaf3 100%); border-bottom:2px solid #d9b99f; }
.advisor-portrait { display:block; width:136px; height:136px; object-fit:contain; object-position:center bottom; image-rendering:pixelated; filter:drop-shadow(0 3px 1px rgba(73,45,34,.2)); }
.advisor-card-copy { min-height:38px; }
.advisor-sprite,.talker,.typing-worker,.walking-worker {
  display:block; width:64px; height:96px; margin:0 auto; background-repeat:no-repeat; background-size:256px 384px;
  background-position-y:-96px; image-rendering:pixelated; animation:walkFrames .55s steps(4) infinite, bob .55s ease-in-out infinite alternate;
}
.activity-card { text-align:center; }
.nickname-card-backdrop { z-index:132; }
.nickname-card-modal { width:min(560px,100%); padding:18px; overflow:visible; background:linear-gradient(180deg,#fffdf5,#fff3cf); }
.nickname-unlock-card { display:grid; gap:12px; }
.nickname-unlock-card h2 { margin:0; font-size:clamp(24px,6vw,34px); }
.nickname-unlock-visual { display:grid; place-items:center; width:min(360px,92%); min-height:112px; margin:0 auto; padding:12px; border:3px solid #d79a38; border-radius:18px; background:radial-gradient(circle at 50% 40%,#fff 0 25%,#fff4bf 70%,#f1c567 100%); box-shadow:0 6px 0 #9a5c32; }
.nickname-unlock-visual img { display:block; width:100%; max-height:124px; object-fit:contain; filter:drop-shadow(0 4px 0 rgba(105,60,32,.2)); }
.nickname-unlock-visual>span { font-size:72px; line-height:1; }
.nickname-unlock-card .event-story-message { text-align:left; }
.nickname-unlock-card .modal-actions { margin-top:2px; }
.nickname-unlock-card .modal-actions .primary { min-width:min(260px,100%); }
.gif-scene { position:relative; width:min(560px,100%); height:265px; margin:18px auto; overflow:hidden; border:3px solid #8d6956; border-radius:20px; background:linear-gradient(#b8e3f4 0 62%,#d6c4ab 62%); }
.activity-status,.activity-result { max-width:620px; margin:12px auto; padding:12px 16px; border-radius:12px; background:#eef8ff; font-weight:800; }
.activity-result { border-left:6px solid var(--pink); background:#fff0f3; text-align:left; }
.activity-result strong { color:var(--pink-dark); }
.activity-result p { margin:5px 0 0; }
.spinner { display:inline-block; width:17px; height:17px; vertical-align:-3px; border:3px solid #9dc5dc; border-top-color:var(--blue); border-radius:50%; animation:spin .65s linear infinite; }
@keyframes spin { to { rotate:360deg; } }

.event-scene { position:relative; width:min(560px,100%); height:230px; margin:18px auto; overflow:hidden; border:3px solid #8d6956; border-radius:20px; background:linear-gradient(#d9f0f8 0 64%,#d6c4ab 64%); }
.event-symbol { position:absolute; left:50%; top:35px; translate:-50%; font-size:70px; animation:eventFloat .8s ease-in-out infinite alternate; filter:drop-shadow(0 5px 0 rgba(111,68,53,.18)); }
.event-meta { max-width:620px; margin:10px auto; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.event-meta span { padding:5px 9px; border-radius:999px; background:#eef8ff; color:#53758b; font-size:10px; font-weight:900; }
.event-choice-grid { max-width:720px; margin:14px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.event-choice-prompt { margin:8px auto 0; color:#80675e; font-size:12px; font-weight:800; }
.event-choice-button { min-height:68px; display:grid; place-items:center; align-content:center; padding:10px; border:3px solid #bd8967; border-radius:14px; background:white; color:var(--ink); cursor:pointer; box-shadow:0 5px 0 #dab38c; }
.event-choice-button:hover { translate:0 -2px; border-color:var(--pink-dark); background:#fff1f4; }
.event-choice-button strong { color:var(--pink-dark); font-size:15px; }
.event-choice-button.automatic { grid-column:1/-1; color:white; background:var(--pink); }
.event-choice-button.automatic strong { color:white; }
.event-selected-choice { margin:12px 0; color:#6e554d; font-weight:900; }
.major-memory-intro { display:grid; gap:10px; justify-items:center; max-width:700px; margin:0 auto; padding:10px; border:4px solid #6b3a20; border-radius:18px; background:#fff5d9; box-shadow:inset 0 0 0 4px #f2ce78; }
.major-memory-intro[hidden] { display:none!important; }
.major-memory-intro>span { padding:4px 13px; border-radius:999px; background:#1b6096; color:white; font-size:11px; font-weight:1000; }
.major-memory-intro img { display:block; width:100%; aspect-ratio:16/9; border:3px solid #d39a42; border-radius:12px; object-fit:cover; image-rendering:auto; }
.major-memory-intro p { margin:0; color:#765733; font-size:12px; font-weight:900; }
.major-memory-intro .primary { min-width:min(300px,100%); }
.event-result-symbol { display:grid; place-items:center; width:130px; height:130px; margin:18px auto; border:4px solid #e3ad61; border-radius:50%; background:#fff3c8; font-size:68px; animation:eventResultPop .55s cubic-bezier(.2,1.5,.5,1); }
.event-result-panel { max-width:600px; margin:0 auto; padding:18px; border:3px solid #d39a42; border-radius:18px; background:#fff5ce; }
.event-result-panel strong { color:#a75022; font-size:15px; }
.event-result-effect { margin:8px 0 0; color:var(--pink-dark); font-size:clamp(20px,4vw,30px); font-weight:1000; }
.event-story-modal { width:min(760px,96vw); padding:14px; background:#fff5d9; }
.event-story-card { max-width:700px; margin:0 auto; }
.event-story-layout { display:grid; grid-template-rows:minmax(210px,38vh) auto; gap:0; }
.event-story-layout.official-event-card-layout { grid-template-rows:auto auto; }
.event-story-visual {
  position:relative;
  overflow:hidden;
  min-height:210px;
  border:4px solid #6b3a20;
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background-image:linear-gradient(rgba(255,249,218,.12),rgba(74,36,21,.16)),var(--event-story-bg);
  background-position:center;
  background-size:cover;
  box-shadow:inset 0 0 0 4px #f2ce78;
  isolation:isolate;
}
.event-story-visual::after { content:""; position:absolute; inset:auto 0 0; z-index:-1; height:42%; background:linear-gradient(transparent,rgba(45,25,18,.32)); }
.event-story-visual.has-official-card { min-height:0; aspect-ratio:16/9; background:#f8eedc; }
.event-story-visual.has-official-card::after { display:none; }
.official-event-card { display:block; width:100%; height:100%; object-fit:cover; image-rendering:auto; animation:officialEventCardIn .42s cubic-bezier(.2,.8,.3,1) both; }
@keyframes officialEventCardIn { from { opacity:.25; scale:1.06; } }
.event-story-badge { position:absolute; z-index:5; top:9px; left:50%; max-width:82%; translate:-50%; overflow:hidden; padding:4px 12px; border:2px solid #f5d476; border-radius:999px; color:#fff8d9; background:rgba(22,57,99,.9); font-size:10px; font-weight:1000; text-overflow:ellipsis; white-space:nowrap; }
.event-story-character { position:absolute; z-index:2; bottom:-4px; width:38%; max-height:88%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 6px 3px rgba(42,24,14,.38)); }
.event-story-hero { left:-2%; }
.event-story-partner { right:-2%; }
.event-story-prop { position:absolute; z-index:3; top:26%; left:50%; width:116px; height:116px; translate:-50%; display:grid; place-items:center; }
.event-story-prop .event-prop { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 2px rgba(42,24,14,.35)); }
.event-story-prop .event-fallback-icon { font-size:65px; }
.event-story-focus {
  position:absolute;
  z-index:3;
  right:3%;
  bottom:7%;
  width:49%;
  height:72%;
  display:grid;
  place-items:center;
  border:3px solid rgba(107,53,29,.86);
  border-radius:50%;
  background:radial-gradient(circle,#fff9dc 0 49%,#f6cb72 50% 57%,rgba(255,241,183,.84) 58% 69%,rgba(255,255,255,0) 70%);
  filter:drop-shadow(0 7px 3px rgba(42,24,14,.3));
  isolation:isolate;
}
.event-story-focus::before,.event-story-focus::after { content:""; position:absolute; z-index:-1; inset:10%; border:2px dashed rgba(185,83,32,.4); border-radius:50%; animation:eventFocusSpin 18s linear infinite; }
.event-story-focus::after { inset:20%; border-style:solid; border-color:rgba(255,255,255,.72); animation-direction:reverse; }
.event-story-focus-burst { position:absolute; inset:0; z-index:-2; background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.42) 0 8deg,transparent 8deg 18deg); clip-path:circle(48%); }
.event-story-focus .event-prop { width:82%; height:82%; object-fit:contain; filter:drop-shadow(0 8px 3px rgba(64,32,16,.38)); animation:eventFocusPop .5s cubic-bezier(.2,1.45,.45,1); }
.event-story-focus .event-fallback-icon { font-size:clamp(62px,12vw,100px); filter:drop-shadow(0 6px 2px rgba(64,32,16,.3)); }
@keyframes eventFocusSpin { to { rotate:360deg; } }
@keyframes eventFocusPop { from { opacity:0; scale:.65; rotate:-7deg; } to { opacity:1; scale:1; rotate:0deg; } }
.event-story-message { margin-top:0; border-radius:0 0 14px 14px; }
.event-story-card .event-choice-grid { margin-top:10px; }
.major-event-modal { width:min(920px,94vw); max-height:92vh; overflow:auto; padding:18px; background:linear-gradient(160deg,#fffaf0,#fff0f4); }
.major-event-card { text-align:left; }
.major-event-card>header { display:flex; align-items:center; gap:14px; max-width:760px; margin:0 auto 12px; }
.major-event-card>header>img { width:82px; height:96px; object-fit:cover; object-position:top; border:3px solid #bd8967; border-radius:16px; background:#fff3dc; }
.major-event-card h2 { margin:2px 0; color:var(--pink-dark); font-size:clamp(25px,5vw,40px); }
.major-event-card header p { margin:0; color:#80675e; font-size:12px; font-weight:800; }
.major-event-heading { padding:0 4px; }
.visual-novel { max-width:760px; margin:0 auto 12px; }
.vn-scene {
  position:relative;
  height:clamp(390px,56vh,540px);
  overflow:hidden;
  border:5px solid #17365f;
  border-radius:18px;
  background-image:linear-gradient(rgba(9,25,50,.04),rgba(9,25,50,.14)),var(--vn-background);
  background-position:center;
  background-size:cover;
  box-shadow:inset 0 0 0 3px #e8bd61,0 7px 0 #b98a61;
  isolation:isolate;
}
.vn-scene::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(2,17,40,.15),transparent 30% 70%,rgba(2,17,40,.15)); pointer-events:none; }
.vn-scene-badge {
  position:absolute;
  top:10px;
  left:50%;
  translate:-50% 0;
  z-index:4;
  max-width:80%;
  padding:5px 16px;
  overflow:hidden;
  border:2px solid #e8bd61;
  border-radius:999px;
  color:#fff8db;
  background:rgba(10,45,91,.92);
  font-size:12px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vn-character {
  position:absolute;
  bottom:100px;
  z-index:1;
  width:min(42%,270px);
  margin:0;
  display:grid;
  justify-items:center;
  transform-origin:bottom center;
  transition:filter .2s ease,transform .2s ease,opacity .2s ease;
  filter:brightness(.72) saturate(.78);
  opacity:.86;
}
.vn-character img { display:block; width:100%; max-height:315px; object-fit:contain; object-position:center bottom; image-rendering:auto; filter:drop-shadow(0 7px 3px rgba(0,0,0,.42)); }
.vn-character figcaption { margin-top:-14px; padding:3px 13px; border:2px solid #e8bd61; border-radius:999px; color:white; background:#123d76; font-size:12px; font-weight:900; }
.vn-hero { left:2%; }
.vn-partner { right:2%; }
.vn-character.speaking { z-index:2; filter:brightness(1.04) saturate(1.08); opacity:1; transform:scale(1.045); }
.vn-character.listening { filter:brightness(.62) saturate(.65); opacity:.76; transform:scale(.96); }
.vn-dialogue-box {
  position:absolute;
  right:10px;
  bottom:10px;
  left:10px;
  z-index:5;
  min-height:112px;
  padding:26px 42px 18px 22px;
  display:block;
  border:4px solid #6b351d;
  border-radius:10px;
  color:#fff8dc;
  background:linear-gradient(180deg,#bb6b1c,#9f4f14);
  box-shadow:inset 0 0 0 3px #e3a34d,0 4px 0 rgba(59,28,14,.62);
  cursor:pointer;
  text-align:left;
}
.vn-dialogue-box::before { display:none; }
.vn-dialogue-box.partner::before { display:none; }
.vn-dialogue-box.partner .vn-speaker { right:52px; left:auto; }
.vn-dialogue-box.narration { border-radius:12px; }
.vn-dialogue-box.narration::before { display:none; }
.vn-dialogue-box.pause .vn-speaker,.vn-dialogue-box.pause .vn-text { visibility:hidden; }
.vn-speaker { position:absolute; top:-17px; left:18px; z-index:1; min-width:90px; padding:5px 14px; border:3px solid #17365f; border-radius:999px; color:white; background:#3f8fc1; font-size:13px; font-weight:900; text-align:center; }
.vn-text { position:relative; z-index:1; display:block; white-space:pre-line; font-size:clamp(15px,2.2vw,20px); font-weight:800; line-height:1.65; }
.vn-text-enter { animation:vnTextIn .16s ease-out; }
.vn-next-mark { position:absolute; right:16px; bottom:12px; color:#d44b65; font-size:18px; animation:vnNext 1s ease-in-out infinite; }
.vn-dialogue-box.complete .vn-next-mark { display:none; }
.vn-dialogue-box:disabled { cursor:default; opacity:1; }
.vn-progress { position:absolute; right:14px; top:12px; z-index:4; padding:3px 8px; border-radius:999px; color:#fff6d8; background:rgba(7,31,67,.75); font-size:10px; font-weight:900; }
.major-event-choices[hidden],.major-event-result-controls[hidden] { display:none; }
.major-event-result-controls { max-width:760px; margin:12px auto 0; }
@keyframes vnTextIn { from { opacity:.25; translate:4px 0; } }
@keyframes vnNext { 50% { translate:0 4px; } }
.major-event-cg { max-width:760px; margin:0 auto 12px; overflow:hidden; border:4px solid #8d6956; border-radius:18px; background:#302b34; box-shadow:0 7px 0 #d7ae87; }
.major-event-cg img { display:block; width:100%; max-height:260px; object-fit:cover; image-rendering:auto; }
.major-event-story { max-width:760px; max-height:32vh; margin:14px auto; overflow:auto; padding:15px 18px; border:3px solid #d9aa83; border-radius:16px; background:rgba(255,255,255,.94); box-shadow:inset 0 0 0 4px #fff5df; }
.major-event-story p { white-space:pre-line; }
.major-event-scene { margin:0 0 12px; color:#8a6758; font-size:12px; font-weight:800; }
.major-event-dialogue { margin:0; color:var(--ink); font-size:14px; font-weight:700; line-height:1.8; }
.major-event-outro { margin:14px 0 0; padding-top:12px; border-top:2px dashed #dfb590; color:#754f45; font-weight:800; line-height:1.65; }
.major-event-result .event-result-panel { text-align:center; }
@keyframes eventResultPop { from { opacity:0; scale:.45; rotate:-12deg; } }
.event-scene i { position:absolute; width:14px; height:14px; border-radius:50%; background:#ffd34f; animation:eventSpark 1.1s ease-in-out infinite; }
.event-scene i:nth-of-type(1){left:36%;top:28%}.event-scene i:nth-of-type(2){right:34%;top:42%;animation-delay:.3s}.event-scene i:nth-of-type(3){left:48%;top:70%;animation-delay:.6s}
@keyframes eventFloat { to { translate:-50% -10px; scale:1.08; } }
@keyframes eventSpark { 50% { scale:1.7; opacity:.35; } }

.shop-building { position:absolute; left:36px; bottom:38%; width:170px; height:125px; display:grid; place-items:center; border:8px solid #744b38; background:#fff4d7; color:var(--pink-dark); font-size:28px; font-weight:1000; box-shadow:inset 0 20px 0 var(--pink); }
.walking-worker { position:absolute; left:42%; bottom:8px; background-image:url('./public/assets/mobs/mob-workers-6x5-variants/mob-office-worker-01/variants/v02-blue/mob-office-worker-01-v02-blue-4dir-4frame-32x48.png'); animation:walkFrames .5s steps(4) infinite, shopWalk 2.4s ease-in-out infinite alternate; }
@keyframes shopWalk { from { left:38%; } to { left:58%; } }
.shopping-bag { position:absolute; right:38px; bottom:25px; width:120px; min-height:105px; padding:34px 8px 8px; border:5px solid #a84e70; border-radius:8px 8px 18px 18px; background:#ed79aa; }
.shopping-bag::before { content:""; position:absolute; left:27px; top:-32px; width:55px; height:52px; border:7px solid #a84e70; border-bottom:0; border-radius:28px 28px 0 0; }
.shopping-bag img { width:42px; height:42px; object-fit:contain; animation:bagPop 1.1s ease-in-out infinite alternate; }
.shopping-bag .product-placeholder { display:inline-grid; width:42px; height:42px; margin:0; border-width:2px; border-radius:9px; font-size:22px; animation:bagPop 1.1s ease-in-out infinite alternate; }
@keyframes bagPop { to { translate:0 -9px; rotate:5deg; } }

.consult-scene { display:flex; align-items:end; justify-content:center; gap:110px; padding-bottom:24px; }
.talker-left { margin:0; background-image:url('./public/assets/mobs/mob-workers-6x5-variants/mob-office-worker-01/variants/v02-blue/mob-office-worker-01-v02-blue-4dir-4frame-32x48.png'); }
.talker-right { margin:0; }
.talk-bubble { position:absolute; top:35px; left:50%; translate:-50%; padding:10px 19px; border:3px solid #6f4435; border-radius:50%; background:white; font-size:25px; font-weight:900; animation:bubbleTalk .7s ease-in-out infinite alternate; }
.talk-bubble::after { content:""; position:absolute; left:50%; bottom:-12px; width:15px; height:15px; background:white; border-right:3px solid #6f4435; border-bottom:3px solid #6f4435; rotate:45deg; }
@keyframes bubbleTalk { to { scale:1.12; } }

.work-scene { background:linear-gradient(#e8eee9 0 62%,#c9bca9 62%); }
.work-desk { position:absolute; left:50%; bottom:35px; translate:-50%; width:310px; height:80px; border:6px solid #6f4435; background:#b98358; box-shadow:0 55px 0 -28px #6f4435; }
.typing-worker { position:absolute; left:15px; bottom:60px; margin:0; background-image:url('./public/assets/mobs/mob-workers-6x5-variants/mob-office-worker-02/variants/v02-blue/mob-office-worker-02-v02-blue-4dir-4frame-32x48.png'); }
.laptop { position:absolute; left:120px; top:-42px; width:75px; height:55px; display:grid; place-items:center; border:5px solid #5f6670; border-radius:6px; background:#a9d3df; font-size:28px; animation:typeShake .18s linear infinite alternate; }
@keyframes typeShake { to { translate:2px 0; } }
.paper { position:absolute; right:10px; width:55px; height:65px; display:grid; place-items:center; border:2px solid #9b846d; background:white; color:var(--green); font-size:28px; font-weight:900; }
.paper.p1 { top:-35px; animation:paperWork 1.2s ease-in-out infinite; }
.paper.p2 { top:-48px; right:42px; animation:paperWork 1.2s .4s ease-in-out infinite; }
@keyframes paperWork { 50% { translate:0 -12px; rotate:5deg; } }
.work-dots { position:absolute; right:28px; top:24px; display:flex; gap:6px; }
.work-dots i { width:12px; height:12px; border-radius:50%; background:var(--pink); animation:dotPulse .8s ease-in-out infinite alternate; }
.work-dots i:nth-child(2){animation-delay:.2s}.work-dots i:nth-child(3){animation-delay:.4s}
@keyframes dotPulse { to { scale:.4; opacity:.35; } }

@media (max-width: 900px) {
  .game-shell { padding:8px; }
  .topbar { display:flex; }
  .game-hud { padding:7px; border-radius:19px; }
  .hud-main-row { grid-template-columns:minmax(175px,.9fr) minmax(360px,2.1fr); gap:8px; padding:2px 5px 6px; }
  .hud-brand img { max-height:75px; }
  .hud-status { gap:5px; }
  .hud-pill { min-height:48px; padding:6px 7px; border-width:2px; border-radius:14px; font-size:17px; }
  .hud-phase-row { min-height:56px; padding:5px 9px; }
  .hud-clock { min-width:185px; padding:4px 11px; }
  .hud-clock strong { font-size:26px; }
  .hud-metrics { gap:5px; padding-top:6px; }
  .hud-metrics>div { min-height:42px; padding:4px 8px; }
  .hud-metrics small { font-size:12px; }
  .hud-metrics strong { font-size:20px; }
  .stage,.screen,.title-screen { min-height:680px; }
  .choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .choice-card { min-height:235px; padding:132px 10px 11px; }
  .choice-icon { font-size:40px; }
  .choice-card h3 { font-size:22px; }
  .choice-card p { font-size:13px; }
  .choice-effect { padding:8px; font-size:12px; }
  .setup-layout,.observe-layout { grid-template-columns:1fr; }
  .inventory-list { grid-template-columns:repeat(4,1fr); }
  .inventory-panel { max-height:none; }
  .shelf-wrap { padding:60px 20px 30px; }
  .shelf-grid { grid-template-rows:repeat(2,125px); }
  .office { min-height:520px; }
  .side-panel { min-height:200px; }
  .shop-grid,.advisor-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .topbar { display:flex; flex-wrap:wrap; padding:7px 9px; }
  .game-hud { top:max(2px,var(--safe-area-inset-top,env(safe-area-inset-top))); padding:5px; border-width:2px; border-radius:15px; box-shadow:inset 0 0 0 1px #e9b847,inset 0 0 0 3px #174681,0 5px 13px rgba(34,25,22,.22); }
  .hud-main-row { grid-template-columns:145px minmax(0,1fr); gap:5px; padding:0 3px 5px; }
  .hud-brand img { width:145px; max-height:55px; }
  .hud-week { bottom:-7px; min-width:75px; padding:1px 8px; border-width:1px; font-size:9px; }
  .hud-status { min-width:0; gap:3px; }
  .hud-pill { min-width:0; min-height:39px; padding:3px 4px; gap:2px; border-width:1.5px; border-radius:10px; box-shadow:inset 0 0 0 1px #edbd4b,0 2px 0 rgba(4,16,38,.5); font-size:12px; }
  .hud-pill-icon { display:none; }
  .hud-motivation { flex-wrap:nowrap; }
  .hud-motivation small { display:inline; font-size:8px; }
  .hud-motivation-faces { gap:0; font-size:10px; }
  .hud-phase-row { min-height:43px; padding:0; gap:4px; }
  .hud-phase-title { gap:5px; padding:3px 8px; border-width:2px; border-radius:11px; box-shadow:inset 0 0 0 2px #0d3874; }
  .hud-phase-title span { font-size:21px; }
  .hud-phase-title strong { font-size:20px; }
  .hud-clock { min-width:135px; padding:3px 7px; column-gap:4px; border-width:2px; border-radius:10px; }
  .hud-clock::before { font-size:20px; }
  .hud-clock small { font-size:8px; }
  .hud-clock strong { font-size:21px; }
  .hud-metrics { gap:3px; padding:4px 1px 1px; }
  .hud-metrics>div { min-height:35px; padding:3px 5px; gap:3px; border-width:1.5px; border-radius:9px; box-shadow:inset 0 0 0 1px #0d3874; }
  .hud-metrics>div>span { display:none; }
  .hud-metrics small { font-size:9px; }
  .hud-metrics strong { font-size:15px; }
  .hud-nickname { flex-basis:150px; min-height:31px; margin-left:0; padding:2px 7px; gap:4px; border-width:2px; border-radius:11px; box-shadow:inset 0 0 0 2px #fff8df; }
  .hud-nickname span { font-size:7px; }
  .hud-nickname strong { font-size:9px; }
  .brand-mark { font-size:23px; }
  .brand h1 { font-size:17px; }
  .status-pills { flex:1 1 100%; justify-content:flex-end; gap:4px; }
  .pill { padding:4px 7px; font-size:11px; }
  .inventory-list { grid-template-columns:repeat(2,1fr); }
  .shelf-area { padding:58px 4px 12px; }
  .shelf-wrap { border-width:10px; }
  .shelf-grid { gap:7px; grid-template-rows:repeat(2,112px); }
  .shelf-sign { font-size:16px; top:-45px; }
  .review-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .review-card { min-width:0; padding:10px 4px; border-width:2px; border-radius:12px; }
  .review-card>div:first-child { min-height:34px; display:grid; place-items:center; font-size:11px; font-weight:900; }
  .review-number { font-size:30px; white-space:nowrap; }
  .review-card small { display:block; font-size:9px; line-height:1.25; }
  .review-event span { display:block; margin:5px 0 0; }
  .affection-review { padding:10px 5px; }
  .affection-review>div { grid-template-columns:repeat(2,1fr); gap:6px; }
  .sales-review { padding:8px; gap:6px; }
  .sales-review strong { font-size:21px; }
  .review-chart-card { margin:11px auto; padding:11px 9px 8px; border-width:2px; border-radius:13px; box-shadow:0 4px 0 #d6aa65; }
  .review-chart-card h3 { font-size:14px; }
  .review-chart-card>header>strong { font-size:18px; }
  .review-chart-comparison { margin-top:5px; }
  .review-sales-chart { height:132px; gap:5px; padding-inline:2px; background:repeating-linear-gradient(to top,transparent 0 30px,rgba(23,70,129,.1) 30px 31px); }
  .review-sales-track { width:min(34px,82%); }
  .review-sales-column>span { font-size:8px; }
  .review-sales-column>b { font-size:9px; }
  .weekly-components { grid-template-columns:repeat(2,1fr); gap:6px; }
  .weekly-score { width:155px; height:155px; }
  .weekly-score strong { font-size:68px; }
  .weekly-report-row { gap:4px; }
  .weekly-report-row article { border-width:2px; }
  .weekly-report-row article strong { font-size:27px; }
  .screen { padding:16px 10px; }
  .screen-lead { margin-bottom:14px; font-size:13px; }
  .choice-grid { gap:6px; margin:18px auto; }
  .choice-card { min-height:185px; padding:88px 5px 7px; border-width:2px; border-radius:12px; }
  .choice-icon { font-size:32px; }
  .choice-card h3 { margin:4px 0; font-size:18px; }
  .choice-card p { margin:6px 0; font-size:11px; line-height:1.45; }
  .choice-effect { margin-top:7px; padding:6px 4px; font-size:10px; }
  .modal-backdrop { padding:8px; }
  .morning-modal { padding:15px 11px; border-radius:18px; }
  .shop-grid { grid-template-columns:1fr; gap:6px; }
  .store-grid { grid-template-columns:1fr; gap:10px; }
  .store-card { min-height:125px; padding:11px; grid-template-columns:52px minmax(0,1fr); grid-template-areas:"icon copy" "price price" "unlock count"; }
  .store-card .store-icon { width:48px; height:48px; font-size:30px; }
  .store-card strong { font-size:16px; }
  .store-shop-modal .modal-heading h2 { margin:3px 0; font-size:24px; }
  .store-shop-modal .modal-heading p { margin:3px 0; font-size:10px; line-height:1.35; }
  .store-shop-modal .shop-budget { margin:6px 0 8px; padding:7px 9px; font-size:13px; }
  .shop-item { grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:4px 7px; padding:6px 7px; }
  .shop-item img { width:38px; height:38px; }
  .shop-item>span { align-self:center; }
  .shop-item strong { overflow-wrap:anywhere; font-size:11px; line-height:1.2; }
  .shop-item small { font-size:9px; line-height:1.25; }
  .shop-item .equipment-label { margin-top:1px; }
  .shop-item .shop-owned-stock { display:inline-block; margin-top:2px; padding:1px 5px; font-size:9px; }
  .shop-item>b { grid-column:3; grid-row:1; align-self:center; justify-self:end; font-size:13px; white-space:nowrap; }
  .shop-stepper { grid-column:1/-1; grid-row:2; grid-template-columns:38px 38px minmax(54px,1fr) 38px 48px; gap:5px; }
  .shop-stepper button { height:32px; padding:0; font-size:17px; }
  .shop-stepper .bulk { height:32px; display:grid; place-items:center; align-content:center; padding:2px 0; font-size:12px; line-height:1; white-space:nowrap; }
  .shop-stepper .bulk::after { content:"まとめ"; display:block; margin-top:2px; font-size:6px; font-weight:900; line-height:1; }
  .shop-stepper strong { grid-column:3; grid-row:1; min-height:32px; font-size:15px; }
  .shop-stepper [data-shop-minus-ten] { grid-column:1; grid-row:1; }
  .shop-stepper [data-shop-minus] { grid-column:2; grid-row:1; }
  .shop-stepper [data-shop-plus] { grid-column:4; grid-row:1; }
  .shop-stepper [data-shop-plus-ten] { grid-column:5; grid-row:1; }
  .shop-stepper .bulk-label { display:none; }
  .event-card h2 { margin:6px 0 3px; font-size:22px; line-height:1.2; }
  .event-card>p { margin:4px 0; font-size:11px; }
  .event-card .event-meta { margin:6px auto; gap:4px; }
  .event-card .event-meta span { padding:4px 7px; font-size:9px; }
  .event-card .event-scene { height:140px; margin:8px auto; border-radius:14px; }
  .event-card .event-prop { width:108px; height:108px; }
  .event-card .event-choice-prompt { margin-top:5px; }
  .event-card .event-choice-grid { margin-top:8px; }
  .major-event-modal { width:96vw; max-height:95vh; padding:10px; }
  .major-event-card>header { gap:8px; margin-bottom:8px; }
  .major-event-card>header>img { width:58px; height:72px; border-radius:12px; }
  .major-event-card h2 { font-size:22px; }
  .major-event-heading { padding:0 3px; }
  .major-event-heading p { display:none; }
  .visual-novel { margin-bottom:9px; }
  .vn-scene { height:410px; border-width:3px; border-radius:13px; box-shadow:inset 0 0 0 2px #e8bd61,0 4px 0 #b98a61; }
  .vn-scene-badge { top:7px; max-width:72%; padding:4px 10px; font-size:9px; }
  .vn-character { bottom:114px; width:50%; }
  .vn-character img { max-height:265px; }
  .vn-character figcaption { margin-top:-10px; padding:2px 9px; font-size:9px; }
  .vn-hero { left:-2%; }
  .vn-partner { right:-2%; }
  .vn-dialogue-box { right:6px; bottom:6px; left:6px; min-height:123px; padding:28px 32px 13px 14px; border-width:3px; border-radius:10px 10px 16px 10px; }
  .vn-dialogue-box::before { top:-13px; left:19px; width:20px; height:20px; border-width:3px 0 0 3px; }
  .vn-dialogue-box.narration { border-radius:10px; }
  .vn-speaker { top:-15px; left:38px; min-width:76px; padding:4px 10px; border-width:2px; font-size:11px; }
  .vn-text { font-size:14px; line-height:1.55; }
  .vn-progress { top:8px; right:8px; font-size:8px; }
  .vn-next-mark { right:10px; bottom:8px; font-size:15px; }
  .major-event-cg { margin-bottom:8px; border-width:3px; border-radius:12px; }
  .major-event-cg img { max-height:170px; }
  .major-event-story { max-height:34vh; margin:8px auto; padding:11px 12px; }
  .major-event-dialogue { font-size:12px; line-height:1.65; }
  .advisor-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .advisor-card { padding:0 4px 8px; }
  .advisor-portrait-frame { height:104px; margin:0 -4px 6px; }
  .advisor-portrait { width:108px; height:108px; }
  .gif-scene { height:220px; }
  .shop-building { left:12px; width:135px; }
  .shopping-bag { right:14px; scale:.8; transform-origin:bottom right; }
  .consult-scene { gap:70px; }
}

/* Production artwork integration */
.phase-morning .screen,
.phase-setup .screen,
.phase-refill .screen,
.phase-review .screen,
.phase-weekly .screen {
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:local;
}
.phase-morning .screen { background-image:linear-gradient(rgba(255,250,240,.82),rgba(255,250,240,.88)),url('./public/assets/backgrounds/morning.png'); }
.phase-morning .screen { min-height:560px; padding-top:20px; }
.phase-morning .screen-title { font-size:clamp(28px,3.5vw,42px); }
.phase-setup .screen,.phase-refill .screen { background-image:linear-gradient(rgba(255,250,240,.88),rgba(255,250,240,.92)),url('./public/assets/backgrounds/shelf.png'); }
.phase-review .screen { background-image:linear-gradient(rgba(255,250,240,.84),rgba(255,250,240,.91)),url('./public/assets/backgrounds/review.png'); }
.phase-weekly .screen { background-image:linear-gradient(rgba(255,250,240,.76),rgba(255,250,240,.88)),url('./public/assets/backgrounds/president-room.png'); }
.observe-screen { background-image:linear-gradient(rgba(155,215,237,.72),rgba(216,202,178,.84)),url('./public/assets/backgrounds/office.png'); background-position:center; background-size:cover; }

.office-awning,.office-garland,.office-wagon-front,.wagon-wheel { display:none; }
.office-shelf-sign { top:18px; min-width:150px; padding:3px 12px 5px; }
.office-shelf-sign small { display:none; }
.office-shelf-sign span { font-size:12px; }

.formal-activity-scene { height:auto; aspect-ratio:16/9; background:#f6ead8; }
.activity-animation { display:block; width:100%; height:100%; object-fit:cover; image-rendering:auto; }

.event-scene { isolation:isolate; background-image:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.42)),var(--event-cutin); background-position:center; background-size:cover; }
.event-scene::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(255,247,219,.4),transparent 35% 65%,rgba(255,247,219,.4)); }
.event-prop { position:absolute; z-index:4; left:50%; top:50%; translate:-50% -50%; width:170px; height:170px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 8px 4px rgba(76,44,27,.28)); animation:eventFloatArt .8s ease-in-out infinite alternate; }
.event-scene .event-fallback-icon { position:absolute; z-index:4; left:50%; top:50%; translate:-50% -50%; font-size:70px; }
.event-result-symbol { overflow:hidden; }
.event-result-art { width:116px; height:116px; object-fit:contain; image-rendering:auto; }
@keyframes eventFloatArt { to { translate:-50% calc(-50% - 8px); scale:1.04; } }

.store-shop-modal { background-position:center; background-size:cover; background-repeat:no-repeat; }
.store-bg-st01 { background-image:linear-gradient(rgba(255,250,240,.8),rgba(255,250,240,.88)),url('./public/assets/backgrounds/store-st01.png'); }
.store-bg-st02 { background-image:linear-gradient(rgba(255,250,240,.8),rgba(255,250,240,.88)),url('./public/assets/backgrounds/store-st02.png'); }
.store-bg-st03 { background-image:linear-gradient(rgba(255,250,240,.8),rgba(255,250,240,.88)),url('./public/assets/backgrounds/store-st03-v2.png'); }
.store-bg-st04 { background-image:linear-gradient(rgba(255,250,240,.8),rgba(255,250,240,.88)),url('./public/assets/backgrounds/store-st04-v2.png'); }
.store-shop-modal .shop-item { background:rgba(255,255,255,.94); }

.ending-screen { position:relative; overflow:hidden; min-height:690px; background:#fff8e9; }
.ending-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.ending-content { position:relative; z-index:1; max-width:940px; margin:0 auto; padding:22px; border:4px solid rgba(111,68,53,.75); border-radius:24px; background:rgba(255,250,240,.88); box-shadow:0 12px 30px rgba(60,35,24,.28); backdrop-filter:blur(3px); }

@media (max-width: 900px) {
  .choice-card { min-height:235px; padding:132px 10px 11px; }
  .choice-card h3 { font-size:20px; }
  .office-shelf { width:min(500px,94%); }
}
@media (max-width: 600px) {
  .choice-card { min-height:185px; padding:88px 5px 7px; border-radius:10px; }
  .choice-card h3 { font-size:16px; }
  .choice-card p { font-size:9px; }
  .choice-effect { font-size:9px; }
  .office-shelf { top:34px; width:96%; padding:43px 16px 38px; }
  .office-shelf-sign { top:12px; min-width:120px; }
  .office-shelf-slot img { max-width:48px; max-height:45px; }
  .office-cold-case { top:260px; width:174px; }
  .office-chilled-case { right:11px; }
  .office-frozen-case { left:11px; }
  .office-case-heading { top:-7px; padding:2px 8px; border-width:2px; font-size:8px; }
  .office-case-grid { gap:4px; }
  .office-case-slot img { max-width:45px; max-height:43px; }
  .office-case-slot strong { padding:1px 3px; font-size:7px; }
  .office-case-slot strong span { font-size:6px; }
  .office-case-slot strong b { font-size:9px; }
  .ending-content { padding:12px 7px; }
}

/* Observation phase: compact console-style HUD and persistent menu */
.observe-screen {
  padding:14px;
  background:
    radial-gradient(circle at 20px 20px,rgba(255,255,255,.72) 0 3px,transparent 4px) 0 0/40px 40px,
    linear-gradient(#dcecf0,#f4dfbd);
}
.observe-phase-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
  padding:11px 14px 11px 20px;
  border:4px solid #173e72;
  border-radius:16px;
  background:linear-gradient(180deg,#1f65ad,#154b8b);
  color:white;
  box-shadow:inset 0 0 0 3px #fff6d9,0 5px 0 rgba(39,49,70,.22);
}
.observe-phase-header h2 { margin:1px 0 0; color:#fff8bd; font-size:clamp(24px,3vw,38px); line-height:1; text-shadow:2px 2px 0 #133560; }
.observe-phase-header p { margin:5px 0 0; font-size:12px; font-weight:900; opacity:.9; }
.observe-phase-kicker { display:block; font-size:9px; font-weight:1000; letter-spacing:.16em; opacity:.75; }
.observe-phase-header .observation-clock { flex:0 0 auto; min-width:240px; margin:0; border-color:#704a36; border-radius:13px; box-shadow:inset 0 0 0 2px white,0 3px 0 #c8954f; }
.observe-phase-header .observation-clock strong { font-size:28px; }
.observe-kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-bottom:10px;
}
.observe-kpis>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:7px 12px;
  border:3px solid #70513b;
  border-radius:11px;
  background:#fffaf0;
  box-shadow:inset 0 -4px 0 #ead5ae;
}
.observe-kpis small { color:#846757; font-size:10px; font-weight:1000; }
.observe-kpis b { overflow:hidden; color:#bd4e38; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.observe-layout { grid-template-columns:minmax(0,1fr) 310px; gap:10px; min-height:500px; }
.office-frame {
  min-width:0;
  overflow:hidden;
  border:4px solid #6f4435;
  border-radius:16px;
  background:#fff8e5;
  box-shadow:0 5px 0 rgba(76,50,35,.2);
}
.office-frame-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:39px;
  padding:6px 13px;
  border-bottom:3px solid #6f4435;
  background:linear-gradient(#fff8dc,#ffe8ad);
  color:#56372b;
  font-weight:1000;
}
.office-frame-label span { font-size:17px; }
.office-frame-label small { color:#95705b; font-size:10px; }
.office-frame .office {
  min-height:500px;
  border:0;
  border-radius:0;
  background:
    linear-gradient(rgba(255,248,225,.08),rgba(75,54,40,.08)),
    url('./public/assets/backgrounds/office-break-room-front-v2.png') center/cover no-repeat;
  image-rendering:auto;
}
.office-frame .office>.window,
.office-frame .office>.desk { display:none; }
.observe-side-panel {
  padding:10px;
  border:4px solid #173e72;
  border-radius:16px;
  background:#fffaf0;
  box-shadow:inset 0 0 0 2px #d8e8f4,0 5px 0 rgba(34,63,90,.18);
}
.side-panel-title,.reaction-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side-panel-title { margin:-10px -10px 9px; padding:8px 10px; border-radius:11px 11px 0 0; background:#1d5e9e; color:white; font-size:13px; font-weight:1000; }
.side-panel-title b { padding:3px 7px; border-radius:999px; background:#52a56f; font-size:8px; letter-spacing:.08em; }
.speed-row { margin-bottom:8px; }
.speed-button { padding:7px 4px; border-width:2px; border-radius:8px; box-shadow:inset 0 -3px 0 #e0d1bd; }
.speed-button.active { background:#2083d1; box-shadow:inset 0 -3px 0 #14548b; }
.speed-button.pause-button { flex:.72; color:#724333; background:#ffe4a5; }
.progress-bar { height:13px; }
.sales-panel { margin:9px 0; padding:8px; border-width:3px; }
.sales-panel>div:first-child strong { font-size:23px; }
.reaction-heading { margin:7px 2px 5px; }
.reaction-heading h3 { margin:0; font-size:14px; }
.reaction-heading small { color:#977665; font-size:9px; font-weight:900; }
.message-window {
  position:relative;
  min-width:0;
  min-height:112px;
  margin-top:18px;
  padding:25px 30px 22px;
  border:4px solid #6b351d;
  border-radius:10px;
  background:linear-gradient(180deg,#bb6b1c 0%,#9f4f14 100%);
  box-shadow:inset 0 0 0 3px #e3a34d,0 6px 0 #5b2c16,0 8px 16px rgba(52,30,19,.22);
  color:#fff8dc;
}
.ending-epilogue {
  display:block;
  width:min(700px,100%);
  margin:28px auto 22px;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.ending-epilogue-text {
  display:block;
  min-height:5.4em;
  font-size:clamp(16px,3.8vw,22px);
  line-height:1.8;
  font-weight:700;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.ending-epilogue-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  font-size:12px;
  color:#fff0bd;
}
.ending-epilogue:focus-visible { outline:3px solid #267dc4; outline-offset:4px; }
.text-pages { cursor:pointer; }
.text-pages .log-entry,.review-comment-text { white-space:pre-wrap; }
.text-pages .message-window-cue { display:none; }
.text-page-next {
  display:block; margin:12px 0 0 auto; padding:6px 10px;
  min-height:44px; min-width:44px; max-width:100%; border:0;
  border-radius:8px; background:transparent; color:inherit;
  box-shadow:none; font:inherit; font-size:12px; cursor:pointer;
}
.text-page-next[hidden] { display:none; }
.text-pages-complete { cursor:default; }
.event-story-modal [hidden] { display:none!important; }
.message-window-speaker {
  position:absolute;
  z-index:2;
  top:-21px;
  left:18px;
  min-width:112px;
  padding:5px 16px 6px;
  border:3px solid #123f70;
  border-radius:999px;
  background:#4d9bd0;
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:1000;
  line-height:1.2;
}
.message-window-log-button { position:absolute; z-index:3; top:-20px; right:14px; min-width:62px; min-height:36px; padding:4px 12px; border:3px solid #123f70; border-radius:999px; background:#fff8dc; color:#174681; cursor:pointer; font-size:11px; font-weight:1000; box-shadow:0 3px 0 rgba(35,30,42,.24); }
.message-window-log-button::before { content:"▤ "; }
.message-window-log-button:hover { translate:0 -1px; background:#fff1b8; }
.message-window .log { display:block; max-height:none; overflow:visible; }
.message-window .log-entry { padding:0; border:0; border-radius:0; background:transparent; color:#fff8dc; font-size:15px; font-weight:900; line-height:1.75; text-shadow:0 1px rgba(72,31,10,.55); }
.message-line { display:block; min-height:1.75em; }
.message-line+.message-line { border-top:1px dashed rgba(255,241,190,.28); }
.message-window .log-entry.standby { color:#ffe7b0; }
.message-window-cue {
  position:absolute;
  right:17px;
  bottom:12px;
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:13px solid #eb5b85;
  filter:drop-shadow(0 1px 0 #fff);
}
.phase-message-panel { max-width:1080px; margin:4px auto 18px; padding:0 4px; }
.message-log-backdrop { z-index:180; }
.message-log-modal { width:min(620px,100%); padding:14px; overflow:hidden; background:#fff7e5; }
.message-log-modal { overflow:hidden; }
.message-history-view { min-height:0; height:min(720px,calc(100dvh - 130px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.message-history-view>header { display:flex; align-items:start; justify-content:space-between; gap:12px; padding:4px 4px 10px; }
.message-history-view h2 { margin:5px 0 1px; color:#174681; font-size:24px; }
.message-history-view header p { margin:0; color:#80675e; font-size:11px; font-weight:800; }
.message-history-list { min-height:0; max-height:none; display:grid; grid-auto-rows:max-content; align-content:start; gap:8px; overflow-y:auto; overscroll-behavior:contain; padding:8px 7px 14px; border-block:2px dashed #d5aa77; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.message-history-entry { min-height:max-content; overflow:hidden; border:2px solid #d7ac7b; border-radius:12px; background:#fffdf7; box-shadow:0 3px 0 #ead2b5; }
.message-history-entry>header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 9px; background:#174681; color:white; }
.message-history-entry>header strong { font-size:10px; }
.message-history-entry>header span { color:#e8f3ff; font-size:8px; font-weight:900; }
.message-history-entry>div { padding:9px 11px; color:#583d30; font-size:12px; font-weight:900; line-height:1.65; }
.message-history-entry .message-line { min-height:1.65em; }
.message-history-entry .message-line+.message-line { border-color:#ead2b5; }
.message-history-empty { margin:auto; padding:40px 10px; color:#8c776a; text-align:center; font-weight:900; }
.message-history-view>footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 3px 2px; }
.message-history-view>footer span { color:#8b7567; font-size:9px; font-weight:900; }
.message-history-view>footer .primary { min-width:120px; padding:9px 18px; }
.observe-side-panel .message-window { min-height:104px; padding:24px 18px 18px; }
.observe-side-panel .message-window .log-entry { font-size:11px; line-height:1.55; }
.observe-event-zone {
  margin-top:10px;
  overflow:hidden;
  border:3px solid #1d649b;
  border-radius:13px;
  background:#fffaf0;
}
.observe-section-title { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:#1d649b; color:white; font-size:12px; font-weight:1000; }
.observe-section-title small { font-size:9px; opacity:.8; }
.observe-event-zone .event-banner-stack { max-width:none; margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.observe-event-zone .event-banner { justify-content:flex-start; min-height:65px; padding:7px 12px; border:0; border-radius:0; background:#fff8dc; box-shadow:none; }
.observe-event-zone .event-banner+ .event-banner { border-left:2px dashed #d5b57d; }
.observe-event-zone .event-banner-art { width:48px; height:48px; }
.observe-event-zone .event-banner strong { font-size:12px; }
.observe-event-zone .event-banner small { font-size:10px; }
.observe-no-event { padding:12px; color:#8b7468; text-align:center; font-size:11px; font-weight:900; }
.observe-menu-bar {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
.game-shell:not(.phase-title) { padding-bottom:96px; }
.common-menu-bar {
  position:fixed;
  z-index:120;
  left:50%;
  bottom:max(8px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)));
  width:min(980px,calc(100% - 20px));
  margin:0;
  padding:6px;
  border:3px solid #173e72;
  border-radius:16px;
  background:rgba(255,250,240,.96);
  box-shadow:0 8px 24px rgba(38,45,61,.28);
  translate:-50% 0;
  backdrop-filter:blur(5px);
}
.observation-menu-backdrop { z-index:140; }
body:has(.common-menu-bar) > .modal-backdrop:not(.observation-menu-backdrop) {
  padding-bottom:max(92px,calc(82px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom))));
}
.observe-menu-button {
  position:relative;
  min-width:0;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 9px;
  overflow:hidden;
  border:3px solid #6f4435;
  border-radius:13px;
  background:linear-gradient(#fffef7,#ffe2a9);
  color:#3e302b;
  box-shadow:inset 0 -6px 0 rgba(207,142,74,.28),0 4px 0 rgba(80,52,36,.22);
  cursor:pointer;
  text-align:left;
}
.observe-menu-button::before { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:#e88932; }
.observe-menu-button:hover { translate:0 -2px; filter:brightness(1.04); }
.observe-menu-button:active { translate:0 2px; box-shadow:inset 0 2px 0 rgba(80,52,36,.16); }
.observe-menu-button.menu-affection::before { background:#ef6881; }
.observe-menu-button.menu-inventory::before { background:#7fb04a; }
.observe-menu-button.menu-encyclopedia::before { background:#3aa3a0; }
.observe-menu-button.menu-endings::before { background:#a96ac5; }
.observe-menu-button.menu-settings::before { background:#6d8bab; }
.observe-menu-icon { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border:2px solid #6f4435; border-radius:50%; background:white; color:#d34c68; font-size:22px; font-weight:1000; }
.observe-menu-button b,.observe-menu-button small { display:block; }
.observe-menu-button b { font-size:15px; }
.observe-menu-button small { margin-top:2px; color:#84695c; font-size:8px; font-weight:900; }

/* Observation menu modal */
.observation-menu-backdrop { background:rgba(26,39,58,.72); }
.observation-menu-modal { width:min(1050px,100%); max-height:94vh; padding:16px; border-color:#173e72; border-radius:18px; box-shadow:0 16px 0 rgba(16,31,52,.3); }
.observation-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 10px; }
.observation-menu-heading h2 { margin:4px 0 0; color:#194f8b; font-size:30px; }
.observation-menu-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px; padding:5px; border:3px solid #1d5e9e; border-radius:13px; background:#ddecf5; }
.observation-menu-tabs button { min-height:40px; border:2px solid transparent; border-radius:8px; background:transparent; color:#4f6877; cursor:pointer; font-size:12px; font-weight:1000; }
.observation-menu-tabs button.active { border-color:#6f4435; background:#fff8d8; color:#b64d37; box-shadow:0 3px 0 #c99c61; }
.observation-menu-content { min-height:380px; }
.menu-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; padding:9px 13px; border:2px solid #d3ae73; border-radius:10px; background:#fff4cd; }
.menu-summary strong { color:#9c4d24; font-size:17px; }
.menu-summary span { color:#795f50; font-size:10px; font-weight:900; }
.relationship-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.relationship-grid article { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:10px; padding:12px; border:3px solid #d8a9b3; border-radius:14px; background:#fff; }
.relationship-avatar { display:grid; place-items:center; width:52px; height:52px; border:3px solid #6f4435; border-radius:50%; background:#fff0c7; font-size:28px; }
.relationship-grid h3 { margin:1px 0 3px; font-size:17px; }
.relationship-grid article>div>small { color:#927466; font-size:9px; font-weight:900; }
.relationship-grid article>div>p { margin:4px 0 0; color:#81675b; font-size:9px; font-weight:800; }
.relationship-grid article>b { color:#cf4c68; font-size:27px; }
.relationship-grid article>b small { font-size:9px; }
.relationship-cg-button { margin-top:7px; padding:5px 10px; border:2px solid #b96e86; border-radius:999px; background:#fff0f4; color:#ad4968; cursor:pointer; font-size:10px; font-weight:1000; box-shadow:0 2px 0 #e3b1bf; }
.relationship-cg-button[aria-expanded="true"] { background:#b65373; color:white; }
.relationship-cg-panel { grid-column:1/-1; width:100%; padding-top:9px; border-top:2px dashed #dfb2bd; }
.relationship-cg-panel[hidden] { display:none; }
.relationship-cg-panel>small { display:block; margin-top:5px; color:#846c73; text-align:center; font-size:8px; font-weight:900; }
.relationship-cg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.relationship-cg-grid figure { min-width:0; overflow:hidden; margin:0; border:2px solid #d39a42; border-radius:9px; background:#fff7dc; }
.relationship-cg-grid img,.relationship-cg-grid figure>span { display:grid; place-items:center; width:100%; aspect-ratio:16/9; object-fit:cover; }
.relationship-cg-grid figure>span { background:linear-gradient(135deg,#d9d3ca,#a9a29a); color:white; font-size:25px; font-weight:1000; }
.relationship-cg-grid figcaption { padding:3px; overflow:hidden; color:#765e54; font-size:7px; font-weight:900; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.relationship-cg-grid figure.locked { filter:grayscale(1); opacity:.7; }
.relationship-meter { height:8px; margin-top:5px; overflow:hidden; border:1px solid #9a705e; border-radius:99px; background:#eadfd6; }
.relationship-meter i { display:block; height:100%; background:linear-gradient(90deg,#ef7184,#ffb253); }
.menu-item-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:470px; overflow:auto; padding:2px; }
.menu-item-grid article { min-width:0; display:grid; grid-template-columns:64px 1fr; align-items:center; gap:8px; padding:8px; border:2px solid #cfa77f; border-radius:11px; background:white; }
.menu-item-grid article>div { min-width:0; }
.menu-item-grid article>img,.menu-item-grid article>.product-placeholder { width:60px; height:60px; margin:0; object-fit:contain; image-rendering:pixelated; }
.menu-item-grid h3 { overflow:hidden; margin:2px 0; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.menu-item-grid small { color:#907364; font-size:8px; font-weight:900; }
.menu-item-grid p { margin:4px 0 0; color:#715a50; font-size:9px; font-weight:800; }
.stock-grid article p { display:flex; flex-wrap:wrap; gap:5px; }
.stock-grid article p b,.stock-grid article p span { padding:3px 6px; border-radius:999px; background:#fff0f3; }
.stock-grid article p b { color:#c84d66; }
.stock-grid article p span { color:#397da0; background:#eef8ff; }
.stock-location-badge { display:inline-flex; margin-top:2px; padding:2px 6px; border-radius:999px; background:#eef1f3; color:#6d7478; font-size:8px; font-weight:1000; }
.stock-item-card:not(.warehouse-only) .stock-location-badge { background:#e5f5e7; color:#40744b; }
.collection-tabs { display:flex; flex-wrap:wrap; gap:5px; margin:-3px 0 8px; }
.collection-tabs button { padding:5px 16px; border:2px solid #9bb5c3; border-radius:999px; background:white; color:#718896; cursor:pointer; font-size:10px; font-weight:1000; }
.collection-tabs .active { border-color:#397da0; background:#397da0; color:white; }
.encyclopedia-book { height:min(500px,57vh); display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,.9fr); gap:12px; padding:14px; overflow:hidden; border:4px solid #b98639; border-radius:18px; background:linear-gradient(135deg,#fffaf0,#f7e7c6); box-shadow:inset 0 0 0 3px #ffe7a4,0 5px 0 #805536; color:#4d3529; }
.encyclopedia-catalog { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; padding-right:12px; border-right:3px solid #d3ac6d; }
.encyclopedia-search { min-width:0; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; min-height:40px; padding:3px 9px; border:3px solid #c39a58; border-radius:10px; background:#fffdf6; box-shadow:inset 0 2px 0 rgba(118,81,61,.08); }
.encyclopedia-search>span { color:#72563f; font-size:25px; font-weight:1000; }
.encyclopedia-search input { min-width:0; border:0; outline:0; background:transparent; color:#4d3529; font:inherit; font-size:12px; font-weight:900; }
.encyclopedia-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:8px; overflow:auto; padding:2px 4px 6px 2px; }
.encyclopedia-card { min-width:0; min-height:128px; display:grid; grid-template-rows:minmax(70px,1fr) auto auto; place-items:center; padding:7px 5px 5px; overflow:hidden; border:3px solid #cda96d; border-radius:10px; background:linear-gradient(#fffef8,#f8ecd5); color:#4d3529; cursor:pointer; box-shadow:inset 0 0 0 2px #fff8df,0 3px 0 #b98750; }
.encyclopedia-card:hover { translate:0 -2px; filter:brightness(1.03); }
.encyclopedia-card.selected { border-color:#d76b38; background:#fff4ce; box-shadow:inset 0 0 0 2px #fff,0 3px 0 #a64f2c; }
.encyclopedia-card>img,.encyclopedia-card>.product-placeholder { width:76px; height:70px; margin:0; object-fit:contain; image-rendering:pixelated; }
.encyclopedia-card>b { width:100%; overflow:hidden; font-size:9px; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.encyclopedia-card>small { color:#8a6d55; font-size:7px; font-weight:900; }
.encyclopedia-card.locked { filter:grayscale(1); opacity:.6; }
.encyclopedia-card .collection-lock { display:grid; place-items:center; width:58px; height:64px; border:3px dashed #a59882; border-radius:12px; color:#998c78; font-size:34px; }
.employee-card .employee-book-sprite { align-self:end; width:32px; height:48px; margin:0 0 8px; scale:1.45; }
.employee-card .employee-book-portrait { align-self:end; width:72px; height:72px; margin:0 0 3px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(2px 3px 0 rgba(67,47,37,.2)); }
.employee-card.main-character { border-color:#397da0; background:linear-gradient(#eef8ff,#fff4d6); box-shadow:inset 0 0 0 2px #fff8df,0 3px 0 #246185; }
.employee-card.main-character.selected { border-color:#d76b38; background:linear-gradient(#fff4ce,#fff9e8); box-shadow:inset 0 0 0 2px #fff,0 3px 0 #a64f2c; }
.employee-card.visited { border-color:#d76b38; background:#fff8d4; }
.encyclopedia-detail { min-width:0; display:flex; flex-direction:column; padding:12px; overflow:auto; border:3px solid #cda96d; border-radius:13px; background:rgba(255,253,246,.92); box-shadow:inset 0 0 0 2px #fff3cf; }
.encyclopedia-detail-visual { flex:0 0 185px; display:grid; place-items:center; margin-bottom:8px; overflow:hidden; border:3px solid #d5b273; border-radius:11px; background:radial-gradient(circle,#fffef8,#f5e1bd); }
.encyclopedia-detail-visual>img,.encyclopedia-detail-visual>.product-placeholder { width:88%; height:88%; margin:0; object-fit:contain; image-rendering:pixelated; }
.encyclopedia-detail-visual>.collection-lock { display:grid; place-items:center; width:100px; height:120px; border:4px dashed #a59882; border-radius:18px; color:#998c78; font-size:60px; }
.employee-detail-sprite { width:96px; height:144px; background-repeat:no-repeat; background-position:0 -144px; background-size:384px 576px; image-rendering:pixelated; filter:drop-shadow(4px 6px 0 rgba(69,44,30,.18)); }
.employee-detail-portrait { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(4px 6px 0 rgba(69,44,30,.18)); }
.main-character-detail .encyclopedia-detail-visual { background:radial-gradient(circle,#eef8ff,#f6deb5); }
.encyclopedia-detail>small { color:#91745d; font-size:8px; font-weight:900; }
.encyclopedia-detail h3 { margin:2px 0 7px; font-size:18px; line-height:1.2; }
.encyclopedia-tags { display:flex; flex-wrap:wrap; gap:5px; }
.encyclopedia-tags span { padding:4px 7px; border:2px solid #bd8c47; border-radius:8px; background:#ffe7a1; color:#6c4b31; font-size:8px; font-weight:1000; }
.encyclopedia-hearts { margin:8px 0; color:#e64f67; font-size:18px; letter-spacing:.08em; }
.encyclopedia-detail dl { display:grid; gap:4px; margin:0; }
.encyclopedia-detail dl div { display:grid; grid-template-columns:48px 1fr; gap:7px; padding:5px 7px; border:1px solid #dfc79c; border-radius:7px; background:#fffaf0; font-size:9px; }
.encyclopedia-detail dt { color:#9b6b35; font-weight:1000; }
.encyclopedia-detail dd { margin:0; font-weight:900; }
.encyclopedia-memo { margin:auto 0 0; padding:9px; border:2px solid #d8ba81; border-radius:9px; background:repeating-linear-gradient(#fffaf0 0 21px,#ead4ae 22px); color:#6e5544; font-size:9px; font-weight:800; line-height:1.55; }
.encyclopedia-detail.locked { filter:grayscale(1); opacity:.7; }
.encyclopedia-grid article.locked { filter:grayscale(1); opacity:.58; }
.encyclopedia-grid article { min-height:94px; }
.encyclopedia-grid h3 { display:-webkit-box; overflow:hidden; line-height:1.3; overflow-wrap:anywhere; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.encyclopedia-grid p { overflow-wrap:anywhere; }
.collection-lock { display:grid; place-items:center; width:60px; height:60px; border:3px dashed #78909a; border-radius:13px; background:#dfe7e9; color:#72838a; font-size:27px; font-weight:1000; }
.employee-encyclopedia-grid article { grid-template-columns:64px 1fr; }
.employee-book-sprite { justify-self:center; width:32px; height:48px; background-repeat:no-repeat; background-position:0 -48px; background-size:128px 192px; image-rendering:pixelated; scale:1.25; filter:drop-shadow(2px 3px 0 rgba(67,47,37,.2)); }
.employee-encyclopedia-grid article.visited { border-color:#d39a42; background:#fff9dc; }
.employee-encyclopedia-grid h3 em { display:inline-block; margin-left:3px; padding:2px 5px; border-radius:999px; background:#58a575; color:white; font-size:7px; font-style:normal; vertical-align:middle; }
.employee-encyclopedia-grid p b { color:#c64f65; }
.ending-collection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ending-collection article { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:10px; padding:14px; border:3px solid #b18ac2; border-radius:14px; background:white; }
.ending-collection article>span { display:grid; place-items:center; width:56px; height:56px; border:3px solid #745486; border-radius:12px; background:#f4e9f9; color:#8a7195; font-size:28px; font-weight:1000; }
.ending-collection h3 { margin:2px 0; font-size:16px; }
.ending-collection small,.ending-collection p { color:#816b77; font-size:9px; font-weight:900; }
.ending-collection p { margin:4px 0 0; }
.ending-collection article>b { padding:4px 7px; border-radius:999px; background:#e5dde9; color:#816d8a; font-size:9px; }
.ending-collection article.unlocked { border-color:#d69b34; background:#fff7d3; }
.ending-collection article.unlocked>b { background:#d69b34; color:white; }
.settings-list { display:grid; gap:10px; max-width:760px; margin:0 auto; }
.settings-list>label,.settings-list fieldset { display:grid; grid-template-columns:190px 1fr 45px; align-items:center; gap:13px; min-height:66px; margin:0; padding:10px 13px; border:2px solid #a8bac5; border-radius:12px; background:white; }
.settings-list label span b,.settings-list label span small { display:block; }
.settings-list label span small { margin-top:2px; color:#7e7070; font-size:9px; font-weight:800; }
.settings-list output { color:#1d649b; text-align:center; font-weight:1000; }
.settings-list input[type="range"] { width:100%; accent-color:#1d79bd; }
.settings-list fieldset { grid-template-columns:180px repeat(3,1fr); }
.settings-list legend { position:absolute; clip:rect(0 0 0 0); }
.settings-list fieldset label { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px; border:2px solid #d0c2b3; border-radius:8px; cursor:pointer; font-size:11px; font-weight:900; }
.settings-list fieldset::before { content:"文字送り速度"; font-weight:1000; }
.settings-list fieldset input { accent-color:#1d79bd; }
.settings-list .toggle-setting { grid-template-columns:1fr auto; }
.toggle-setting>input { position:absolute; opacity:0; }
.toggle-setting>i { position:relative; width:52px; height:28px; border:2px solid #6f4435; border-radius:999px; background:#d8d0c7; }
.toggle-setting>i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 2px 0 rgba(0,0,0,.2); transition:.18s ease; }
.toggle-setting>input:checked+i { background:#55a978; }
.toggle-setting>input:checked+i::after { left:27px; }
.menu-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:10px; border-top:2px dashed #bda98f; }
.menu-footer span { color:#7a675c; font-size:10px; font-weight:900; }
.menu-footer .primary { padding:9px 22px; font-size:14px; }
.reduce-motion * { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }

@media (max-width: 1050px) {
  .observe-layout { grid-template-columns:1fr; }
  .office-frame .office { min-height:520px; }
  .observe-side-panel { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
  .observe-side-panel .side-panel-title { grid-column:1/-1; margin:-10px -10px 0; }
  .observe-side-panel .sales-panel { margin:0; }
  .observe-side-panel .message-window { grid-column:2; grid-row:2/6; min-width:0; }
  .observe-side-panel .log { max-height:none; }
}

@media (max-width: 700px) {
  .observe-screen { padding:7px; }
  .observe-phase-header { padding:9px 10px; }
  .observe-phase-header p,.observe-phase-kicker { display:none; }
  .observe-phase-header .observation-clock { min-width:155px; padding:5px 9px; }
  .observe-phase-header .observation-clock>span { font-size:20px; }
  .observe-phase-header .observation-clock strong { font-size:21px; }
  .observe-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .observe-kpis>span { padding:5px 7px; border-width:2px; }
  .office-frame-label small { display:none; }
  .office-frame .office {
    min-height:445px;
    background:
      linear-gradient(rgba(255,248,225,.06),rgba(75,54,40,.06)),
      url('./public/assets/backgrounds/office-break-room-front-mobile-v2.png') center top/cover no-repeat;
  }
  .observe-side-panel { display:flex; flex-direction:column; gap:7px; padding:0 3px 8px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .observe-side-panel .message-window { order:-5; min-height:122px; margin:18px 0 5px; padding:27px 18px 23px; }
  .observe-side-panel .message-window .log-entry { font-size:14px; line-height:1.65; }
  .message-window-log-button { top:-20px; right:8px; min-width:68px; min-height:40px; padding-inline:11px; }
  .message-log-modal { width:calc(100vw - 12px); max-height:calc(100dvh - 96px); padding:8px; border-width:3px; border-radius:13px; }
  .message-history-view { height:calc(100dvh - 118px); }
  .message-history-view>header { padding:2px 2px 8px; }
  .message-history-view h2 { font-size:20px; }
  .message-history-view header p { font-size:9px; }
  .message-history-list { max-height:none; padding:7px 4px 11px; }
  .message-history-entry>div { padding:9px; font-size:11px; }
  .message-history-view>footer .primary { min-height:44px; }
  .observe-side-panel .side-panel-title { order:-4; margin:0; padding:5px 9px; border-radius:8px; font-size:10px; }
  .observe-side-panel .speed-row { order:-3; display:grid; margin:0; }
  .observe-side-panel .progress-bar { order:-2; }
  .observe-side-panel .sales-panel { display:none; }
  .observe-event-zone .event-banner-stack { grid-template-columns:1fr; }
  .observe-event-zone .event-banner+ .event-banner { border-left:0; border-top:2px dashed #d5b57d; }
  .observe-menu-bar { grid-template-columns:repeat(4,1fr); gap:3px; }
  .observe-menu-button { min-height:60px; display:grid; justify-items:center; gap:2px; padding:4px 2px; text-align:center; }
  .observe-menu-icon { width:31px; height:31px; font-size:17px; }
  .observe-menu-button b { font-size:10px; }
  .observe-menu-button small { display:none; }
  .observation-menu-modal { padding:9px; }
  .observation-menu-heading h2 { font-size:22px; }
  .event-story-modal { width:calc(100vw - 12px); max-height:calc(100dvh - 96px); padding:6px; border-width:3px; border-radius:12px; }
  .event-story-layout { grid-template-rows:minmax(210px,34dvh) auto; }
  .event-story-layout.official-event-card-layout { grid-template-rows:auto auto; }
  .event-story-visual { min-height:210px; border-width:3px; border-radius:12px 12px 0 0; box-shadow:inset 0 0 0 2px #f2ce78; }
  .event-story-visual.has-official-card { min-height:0; width:100%; aspect-ratio:16/9; }
  .event-story-character { width:42%; max-height:84%; }
  .event-story-prop { top:29%; width:88px; height:88px; }
  .event-story-focus { right:2%; bottom:5%; width:52%; height:68%; border-width:2px; }
  .event-story-focus .event-prop { width:88%; height:88%; }
  .event-story-message { min-height:136px; padding:28px 17px 24px; }
  .event-story-message .log-entry { font-size:14px; line-height:1.65; }
  .event-story-card .event-choice-prompt { margin:10px 6px 4px; font-size:11px; }
  .event-story-card .event-choice-grid { grid-template-columns:1fr; gap:7px; margin:7px 4px 0; }
  .event-story-card .event-choice-button { min-height:56px; padding:8px; }
  .event-story-card .modal-actions { margin-top:10px; }
  .major-event-modal { width:calc(100vw - 12px); max-height:calc(100dvh - 96px); padding:6px; border-width:3px; border-radius:12px; }
  .major-event-heading { margin:0 auto 5px !important; }
  .major-event-heading h2 { margin:0; font-size:17px; }
  .major-event-heading .modal-kicker { padding:3px 8px; font-size:9px; }
  .vn-scene { height:min(62dvh,520px); min-height:430px; }
  .vn-character { bottom:132px; }
  .vn-dialogue-box { min-height:140px; padding:30px 30px 18px 16px; border-radius:8px; }
  .vn-dialogue-box::before,.vn-dialogue-box.partner::before { display:none; }
  .vn-speaker,.vn-dialogue-box.partner .vn-speaker { right:auto; left:14px; }
  .vn-text { font-size:14px; line-height:1.65; }
  .major-event-choices .event-choice-grid { grid-template-columns:1fr; gap:7px; }
  .major-event-choices .event-choice-button { min-height:56px; }
  .observation-menu-tabs { gap:2px; padding:3px; }
  .observation-menu-tabs button { min-height:36px; padding:3px; font-size:9px; }
  .menu-summary { display:grid; gap:3px; }
  .relationship-grid,.ending-collection { grid-template-columns:1fr; }
  .save-slot-list article { grid-template-columns:1fr 1fr; }
  .save-slot-list article>div { grid-column:1/-1; }
  .menu-item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:52vh; }
  .menu-item-grid article { grid-template-columns:45px 1fr; padding:6px; }
  .menu-item-grid article>img,.menu-item-grid article>.product-placeholder,.collection-lock { width:42px; height:42px; }
  .settings-list>label,.settings-list fieldset { grid-template-columns:1fr; gap:7px; }
  .settings-list fieldset { grid-template-columns:repeat(3,1fr); }
  .settings-list fieldset::before { grid-column:1/-1; }
  .settings-list output { display:none; }
  .settings-list .toggle-setting { grid-template-columns:1fr auto; }
  .menu-footer { position:sticky; bottom:-9px; margin-inline:-9px; padding:9px; background:#fffaf0; }
  .menu-footer span { display:none; }
  .menu-footer .primary { width:100%; }
  .game-shell:not(.phase-title) { padding-bottom:78px; }
  .common-menu-bar { bottom:max(4px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom))); width:calc(100% - 8px); padding:3px; border-width:2px; border-radius:12px; }
}

/* Mobile-first morning screen: keep all three choices readable without visual jumps. */
@media (max-width: 480px) {
  body { min-height:100dvh; }
  .game-shell {
    min-height:100dvh;
    gap:6px;
    padding:4px max(4px,var(--safe-area-inset-right,env(safe-area-inset-right))) 4px max(4px,var(--safe-area-inset-left,env(safe-area-inset-left)));
  }
  .topbar { flex-wrap:nowrap; gap:5px; padding:5px 7px; border-width:2px; border-radius:12px; }
  .hud-main-row { grid-template-columns:123px minmax(0,1fr); }
  .hud-brand img { width:123px; max-height:48px; }
  .hud-pill { min-height:34px; font-size:10px; }
  .hud-motivation-faces { display:none; }
  .hud-motivation b { display:block; font-size:10px; }
  .hud-phase-title strong { font-size:17px; }
  .hud-phase-title span { font-size:18px; }
  .hud-clock { flex-basis:116px; min-width:116px; grid-template-columns:24px minmax(0,1fr); grid-template-rows:1fr; justify-items:center; padding-inline:6px; }
  .hud-clock::before { grid-row:1; }
  .hud-clock small { display:none; }
  .hud-clock strong { grid-column:2; width:100%; font-size:18px; text-align:center; }
  .hud-metrics small { font-size:8px; }
  .hud-metrics strong { font-size:13px; }
  .hud-nickname { flex-basis:128px; min-height:29px; padding-inline:5px; }
  .hud-nickname span { display:inline; font-size:7px; }
  .hud-nickname strong { font-size:8px; }
  .brand { gap:5px; min-width:0; }
  .brand-mark { font-size:20px; }
  .brand h1 { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
  .brand small { display:none; }
  .status-pills { flex:0 0 auto; flex-wrap:nowrap; gap:3px; }
  .pill { padding:3px 5px; border-width:1.5px; font-size:9px; white-space:nowrap; }
  .motivation-hearts { display:none; }
  .motivation-count { display:inline; }

  .stage { min-height:calc(100dvh - 53px); border-width:2px; border-radius:14px; }
  .phase-morning .screen { min-height:0; padding:12px 6px 14px; }
  .phase-morning .screen-title { margin-bottom:3px; font-size:25px; line-height:1.15; }
  .phase-morning .screen-lead { margin-bottom:8px; font-size:11px; line-height:1.4; }
  .choice-grid { gap:4px; margin:8px auto 12px; }
  .choice-card {
    position:relative;
    min-width:0;
    min-height:168px;
    overflow:hidden;
    padding:92px 3px 5px;
    border-width:2px;
    border-radius:10px;
    transform:none;
    background-size:100% 100%;
  }
  .choice-card:hover { transform:none; filter:none; }
  .choice-card h3 { margin:2px 0; font-size:14px; line-height:1.15; white-space:nowrap; }
  .choice-card p { display:none; }
  .choice-effect {
    min-height:30px;
    margin-top:3px;
    padding:3px 2px;
    display:grid;
    place-items:center;
    overflow-wrap:anywhere;
    font-size:8px;
    line-height:1.25;
    text-align:center;
  }
  .choice-card.choice-supply.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_supply_normal.png'); }
  .choice-card.choice-consult.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_consult_normal.png'); }
  .choice-card.choice-work.selected { background-image:url('./public/assets/ui/morning-cards/ui_morning_card_work_normal.png'); }
  .choice-card.selected {
    border-color:var(--pink-dark);
    box-shadow:inset 0 0 0 2px white,0 4px 0 var(--pink-dark);
    filter:brightness(1.03);
  }
.choice-card.selected::after {
    content:"✓";
    position:absolute;
    top:5px;
    right:5px;
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border:2px solid white;
    border-radius:50%;
    background:var(--pink-dark);
    color:white;
    box-shadow:0 2px 0 rgba(80,40,35,.25);
    font-size:14px;
    line-height:1;
  }
  .phase-morning .action-row .primary { width:min(280px,100%); padding:11px 18px; font-size:15px; }
}

@media (max-width: 350px) {
  .brand h1 { font-size:13px; }
  .pill { padding-inline:4px; font-size:8px; }
  .choice-card { min-height:158px; padding-top:86px; }
  .choice-card h3 { font-size:13px; }
  .choice-effect { font-size:7.5px; }
}

/* Morning cards use real images so a selected card can never crop or zoom its art. */
.choice-card {
  position:relative;
  overflow:hidden;
  min-height:0!important;
  aspect-ratio:17/25;
  padding:0!important;
  border:0;
  border-radius:10px;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none;
}
.choice-card-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  object-position:center;
  pointer-events:none;
}
.choice-card-copy {
  position:absolute;
  z-index:1;
  inset:61% 7% 6%;
  min-height:0;
  min-width:0;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
  text-align:center;
}
.choice-card-copy h3,
.choice-card-copy p,
.choice-card-copy .choice-effect { width:100%; max-width:100%; box-sizing:border-box; }
.choice-card-copy .choice-effect { display:grid; }
.choice-card.selected { border:0; box-shadow:0 7px 0 var(--pink-dark); filter:brightness(1.03); }

@media (max-width: 900px) {
  .choice-card-copy { inset:61% 7% 6%; padding:0; }
}

@media (max-width: 600px) {
  .choice-card-copy { inset:61% 6% 6%; padding:0; background:none; }
  .choice-card h3 { margin:0 0 2px; font-size:14px; }
  .choice-card p { display:block; min-width:0; margin:0 0 2px; overflow-wrap:anywhere; font-size:8.5px; line-height:1.15; text-align:center; text-wrap:balance; white-space:normal; }
  .choice-effect { min-height:20px; margin-top:auto; padding:1px 2px; font-size:8px; line-height:1.1; }
}

@media (max-width: 480px) {
  .choice-card-copy { inset:59% 5.5% 6%; padding:0; background:none; }
  .choice-card h3 { font-size:12px; }
  .choice-card p { display:block; font-size:7.5px; line-height:1.15; }
  .choice-effect { min-height:18px; padding:1px; font-size:6.5px; }
}

@media (max-width: 350px) {
  .choice-card-copy { inset:58% 5% 6%; padding:0; }
}

/* Integrated production UI assets */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.observe-menu-icon { overflow:hidden; border:0; background:transparent; }
.observe-menu-icon img { width:100%; height:100%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 2px 0 rgba(68,43,31,.2)); }

.image-speed-button { min-width:0; padding:0; overflow:visible; border:0; background:transparent!important; box-shadow:none!important; }
.image-speed-button img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; image-rendering:auto; }
.image-speed-button:hover { transform:none; filter:brightness(1.04); }

.shelf-slot>.stock-overlay,.office-shelf-slot>.stock-overlay { position:absolute; z-index:8; display:block; height:auto; pointer-events:none; }
.stock-overlay>img { display:block; width:100%; height:auto; object-fit:contain; image-rendering:auto; }
.stock-overlay>b { position:absolute; top:50%; right:4%; left:24%; overflow:hidden; translate:0 -50%; color:#6b432d; font-size:7px; font-weight:1000; line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.stock-overlay-restock_available>b { color:#17645f; }
.stock-overlay-sold_out>b { color:#7f3f2e; }
.shelf-slot>.stock-overlay { left:5%; right:5%; bottom:20px; width:90%; }
.office-shelf-slot>.stock-overlay { left:-8%; bottom:8px; width:116%; }
.office-shelf-slot>.stock-overlay>b { font-size:8px; }
.stock-grid article { position:relative; }
.stock-grid .stock-item-card { grid-template-columns:76px minmax(0,1fr); min-height:100px; padding:10px; }
.stock-grid .stock-item-card>img,.stock-grid .stock-item-card>.product-placeholder { width:72px; height:72px; margin:0; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 3px 0 rgba(70,47,35,.14)); }
.stock-grid .stock-item-card h3 { overflow:visible; margin:3px 0; line-height:1.25; text-overflow:clip; white-space:normal; }

.game-item-card { min-height:190px; padding:22px 13px 18px; border-color:transparent; border-radius:0; background:transparent url('./public/assets/ui/item-cards/ui_item_card_normal.png') center/100% 100% no-repeat; box-shadow:none; }
.game-item-card.selected {
  border-color:transparent;
  outline:4px solid #2f91c4;
  outline-offset:1px;
  transform:none;
  background:transparent url('./public/assets/ui/item-cards/ui_item_card_normal.png') center/100% 100% no-repeat;
}
.game-item-card.popular { border-color:transparent; background-image:url('./public/assets/ui/item-cards/ui_item_card_popular.png'); }
.game-item-card:hover { border-color:transparent; background:transparent url('./public/assets/ui/item-cards/ui_item_card_normal.png') center/100% 100% no-repeat; }
.game-item-card.selected:hover { background-image:url('./public/assets/ui/item-cards/ui_item_card_normal.png'); }
.game-item-card.popular:hover { background-image:url('./public/assets/ui/item-cards/ui_item_card_popular.png'); }
.game-item-card .count-badge { top:14px; right:13px; }
.game-item-card>img,.game-item-card>.product-placeholder { position:absolute; top:10%; left:50%; translate:-50%; width:66%; height:45%; margin:0; object-fit:contain; }
.game-item-card .inventory-card-name { position:absolute; top:59%; left:15%; right:13%; overflow:hidden; font-size:10px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.inventory-card-fields { position:absolute; top:69%; left:8.5%; right:8.5%; bottom:9%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:1fr 1fr; align-items:center; column-gap:3%; row-gap:11%; }
.inventory-card-fields span { display:flex; align-items:center; justify-content:center; min-width:0; height:100%; overflow:hidden; padding:0 2px 0 12px; box-sizing:border-box; color:#6f584e; font-size:7.5px; font-weight:900; line-height:1.05; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.inventory-card-fields span:nth-child(1),.inventory-card-fields span:nth-child(2) { grid-column:span 3; }
.inventory-card-fields span:nth-child(n+3) { grid-column:span 2; }

.setup-placement-coachmark { position:sticky; z-index:24; top:150px; max-width:760px; margin:0 auto 16px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:4px solid #e3ad3c; border-radius:17px; background:#fff8dc; color:#173f72; box-shadow:0 6px 0 rgba(100,62,39,.22),0 0 0 3px #174d85; }
.setup-placement-coachmark .setup-coach-step { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#2587be; color:white; font-size:13px; font-weight:1000; }
.setup-placement-coachmark strong { display:block; font-size:16px; }
.setup-placement-coachmark p { margin:2px 0 0; color:#6f5547; font-size:12px; font-weight:800; line-height:1.35; }
.setup-placement-coachmark button { min-width:96px; padding:9px 11px; font-size:11px; }
.setup-guide-target { z-index:12; outline:5px solid #2b9bd3!important; outline-offset:3px; filter:drop-shadow(0 0 8px #ffe16b); animation:setupGuidePulse 1s ease-in-out infinite alternate; }
.setup-guide-number { position:absolute; z-index:30; top:-14px; left:-12px; display:grid; place-items:center; width:34px; height:34px; border:3px solid white; border-radius:50%; background:#167fbd; color:white; font-size:17px; font-weight:1000; box-shadow:0 3px 0 #154d78; pointer-events:none; }
@keyframes setupGuidePulse { to { outline-color:#f5b82e; filter:drop-shadow(0 0 12px #ffe16b); } }

.relationship-avatar { overflow:hidden; padding:0; background:#fff0c7; }
.relationship-avatar img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; image-rendering:auto; }
.relationship-grid article>.relationship-stage { max-width:120px; padding:6px 9px; border-radius:999px; font-size:12px; line-height:1.25; }
.collection-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:14px 0 8px; padding:6px 10px; border-left:5px solid #397da0; background:#eef8ff; }
.collection-heading strong { font-size:15px; }
.collection-heading small { color:#77665d; font-size:9px; font-weight:900; }
.route-cg-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.route-cg-grid article { position:relative; overflow:hidden; min-width:0; border:3px solid #d39a42; border-radius:12px; background:#2c3340; }
.route-cg-grid img,.route-cg-lock { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.route-cg-lock { display:grid; place-items:center; background:linear-gradient(135deg,#d9d3ca,#a9a29a); color:white; font-size:36px; }
.route-cg-grid article>div { padding:5px 7px; background:#fff7dc; }
.route-cg-grid b,.route-cg-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-cg-grid b { font-size:11px; }.route-cg-grid small { color:#80685a; font-size:8px; font-weight:800; }
.route-cg-grid article.locked { filter:grayscale(1); opacity:.7; }

.title-badge-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.title-badge-grid article { min-width:0; padding:5px; border:2px solid #d7ae62; border-radius:11px; background:#fff9df; text-align:center; }
.title-badge-grid article.locked { border-color:#b8b2aa; background:#ebe8e3; }
.title-badge-grid img { display:block; width:min(82px,100%); height:auto; margin:0 auto; image-rendering:auto; }
.title-badge-grid b { display:block; overflow:hidden; margin-top:2px; font-size:8px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.title-badge-grid article.locked b { color:#8c8781; }
.title-badge-grid article.current { outline:3px solid #f06d87; box-shadow:0 0 0 3px #fff2ad; }
.title-badge-grid article small { display:block; min-height:2.5em; margin-top:3px; color:#806d63; font-size:6.5px; font-weight:800; line-height:1.25; }
.nickname-emoji { display:grid; place-items:center; width:min(82px,100%); aspect-ratio:1; margin:0 auto; border:3px solid #d7ae62; border-radius:50%; background:linear-gradient(#fff7ca,#ffd978); font-size:34px; }
.title-badge-grid article.locked .nickname-emoji { border-color:#aaa59d; background:#d9d6d0; color:#888; }
.nickname-summary { border:3px solid #e1af49; background:linear-gradient(100deg,#fff7d4,#fff0b8); }

.evaluation-fx { display:block; width:min(300px,76vw); height:auto; margin:0 auto 12px; image-rendering:auto; filter:drop-shadow(0 5px 0 rgba(96,58,38,.16)); }
.dialogue-frame { min-height:72px; padding:18px 28px 20px!important; border:0!important; border-radius:0!important; background-color:transparent!important; background-position:center!important; background-size:100% 100%!important; background-repeat:no-repeat!important; box-shadow:none!important; }
.dialogue-left { background-image:url('./public/assets/ui/dialogue/ui_dialogue_normal_left.png')!important; }
.dialogue-right { background-image:url('./public/assets/ui/dialogue/ui_dialogue_normal_right.png')!important; }
.review-comment-row { display:grid; align-items:end; gap:8px; min-width:0; }
.review-comment-row.portrait-left { grid-template-columns:78px minmax(0,1fr); }
.review-comment-row.portrait-right { grid-template-columns:minmax(0,1fr) 78px; }
.portrait-left .review-comment-person { grid-column:1; }
.portrait-left .comment { grid-column:2; }
.portrait-right .review-comment-person { grid-column:2; }
.portrait-right .comment { grid-column:1; grid-row:1; }
.review-comment-person { display:grid; place-items:end center; align-self:end; min-width:0; color:#76513d; text-align:center; }
.review-comment-person strong { width:100%; margin-top:3px; font-size:11px; line-height:1.15; overflow-wrap:anywhere; white-space:normal; }
.review-comment-portrait { width:78px; height:94px; object-fit:contain; object-position:center bottom; image-rendering:auto; filter:drop-shadow(0 4px 0 rgba(76,48,35,.18)); }
.review-comment-text { display:inline; }

.tutorial-visual { position:relative; width:110px; height:82px; margin:8px auto 0; display:grid; place-items:center; }
.tutorial-visual .tutorial-icon { margin:0; font-size:58px; }
.tutorial-visual>img { display:none!important; }
.tutorial-confirm { position:relative; }

.store-selector-modal { background:linear-gradient(rgba(255,250,240,.84),rgba(255,250,240,.92)),url('./public/assets/backgrounds/activities/bg_supply_shop.png') center/cover no-repeat; }
.consult-selector-modal { background:linear-gradient(rgba(255,250,240,.82),rgba(255,250,240,.92)),url('./public/assets/backgrounds/activities/bg_consult.png') center/cover no-repeat; }
.activity-modal.activity-work { background:linear-gradient(rgba(255,250,240,.84),rgba(255,250,240,.94)),url('./public/assets/backgrounds/activities/bg_work.png') center/cover no-repeat; }
.activity-modal.activity-supply { background:linear-gradient(rgba(255,250,240,.84),rgba(255,250,240,.94)),url('./public/assets/backgrounds/activities/bg_supply_shop.png') center/cover no-repeat; }
.activity-modal.activity-consult { background:linear-gradient(rgba(255,250,240,.84),rgba(255,250,240,.94)),url('./public/assets/backgrounds/activities/bg_consult.png') center/cover no-repeat; }

@media (max-width: 700px) {
  .image-speed-button img { min-width:39px; }
  .game-item-card { min-height:205px; padding-top:28px; }
  .game-item-card .inventory-card-name { font-size:11px; }
  .inventory-card-fields span { font-size:8px; }
  .setup-placement-coachmark { top:142px; grid-template-columns:auto minmax(0,1fr); margin:0 4px 14px; padding:8px; }
  .setup-placement-coachmark button { grid-column:1/-1; width:100%; padding:7px 10px; }
  .encyclopedia-book { height:auto; max-height:none; grid-template-columns:1fr; padding:8px; gap:8px; overflow:visible; border-width:3px; }
  .encyclopedia-catalog { grid-row:2; padding:8px 0 0; border-top:3px solid #d3ac6d; border-right:0; }
  .encyclopedia-detail { grid-row:1; max-height:none; display:grid; grid-template-columns:110px minmax(0,1fr); grid-template-rows:auto auto auto auto 1fr; align-content:start; gap:2px 8px; padding:8px; }
  .encyclopedia-detail-visual { grid-column:1; grid-row:1/6; min-height:130px; height:100%; margin:0; }
  .encyclopedia-detail-visual>img,.encyclopedia-detail-visual>.product-placeholder { width:96%; height:96%; }
  .employee-detail-sprite { width:72px; height:108px; background-position:0 -108px; background-size:288px 432px; }
  .encyclopedia-detail>small,.encyclopedia-detail h3,.encyclopedia-tags,.encyclopedia-hearts,.encyclopedia-detail dl { grid-column:2; }
  .encyclopedia-detail h3 { margin:1px 0 3px; font-size:15px; }
  .encyclopedia-hearts { margin:3px 0; font-size:14px; }
  .encyclopedia-detail dl { gap:2px; }
  .encyclopedia-detail dl div { padding:3px 5px; }
  .encyclopedia-memo { grid-column:1/-1; margin-top:6px; }
  .encyclopedia-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:42vh; gap:6px; }
  .encyclopedia-card { min-height:105px; grid-template-rows:minmax(58px,1fr) auto auto; padding:5px 3px 4px; }
  .encyclopedia-card>img,.encyclopedia-card>.product-placeholder { width:62px; height:58px; }
  .employee-card .employee-book-sprite { margin-bottom:5px; scale:1.25; }
  .route-cg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .title-badge-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .title-badge-grid img { width:min(72px,100%); }
  .collection-heading { align-items:flex-start; flex-direction:column; gap:2px; }
  .dialogue-frame { min-height:76px; padding:16px 23px 19px!important; font-size:11.5px!important; line-height:1.45!important; }
  .dialogue-frame small { font-size:8px; }
  .review-comment-row { gap:3px; }
  .review-comment-row.portrait-left { grid-template-columns:54px minmax(0,1fr); }
  .review-comment-row.portrait-right { grid-template-columns:minmax(0,1fr) 54px; }
  .review-comment-portrait { width:54px; height:70px; }
  .review-comment-person strong { font-size:10px; }
  .shelf-slot>.stock-overlay { bottom:17px; }
  .relationship-grid article { grid-template-columns:48px minmax(0,1fr); gap:8px; }
  .relationship-grid article>.relationship-stage { grid-column:2; justify-self:start; max-width:none; margin-top:-4px; padding:4px 8px; font-size:10px; white-space:nowrap; }
  .weekly-dashboard { grid-template-columns:1fr; gap:10px; margin:16px auto; }
  .weekly-summary-card { padding:11px; border-width:2px; border-radius:14px; }
  .weekly-summary-card h3 { font-size:16px; }
  .weekly-summary-card>header>strong { font-size:18px; }
  .weekly-sales-card .review-sales-chart { height:124px; }
  .weekly-trend-chart { height:118px; }
  .weekly-trend-legend { grid-template-columns:1fr; }
  .weekly-memory-card { grid-column:auto; }
  .weekly-grade-stamp { right:10%; font-size:15px; }
  .weekly-popular-card li { grid-template-columns:25px 46px minmax(0,1fr); }
  .weekly-popular-card li>img { width:44px; height:39px; }
  .ending-screen { min-height:620px; }
  .ending-weekly-reveal { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .ending-weekly-reveal article { padding:8px 2px; }
  .ending-weekly-reveal article strong { font-size:25px; }
  .final-score { width:170px; padding:12px; }
  .final-score strong { font-size:48px; }
  .final-judgment-stamp { border-width:5px; padding:6px 14px; font-size:25px; }
  .credits-screen { min-height:calc(100dvh - 12px); padding:6px; }
  .credits-viewport { height:calc(100dvh - 174px); min-height:470px; border-width:3px; border-radius:15px; }
  .credits-roll { gap:34px; width:calc(100% - 14px); padding-top:58vh; animation-duration:42s; }
  .credits-title-logo { width:min(310px,88%); max-height:105px; }
  .credits-thanks h2 { font-size:31px; }
  .credits-timeline li { grid-template-columns:50px 1fr; gap:6px; }
  .credits-timeline li>div { padding:9px; }
  .credits-timeline p { font-size:10px; }
  .credits-weekly>div { gap:3px; }
  .credits-weekly article { padding:8px 2px; }
  .credits-weekly article strong { font-size:25px; }
  .credits-sales { padding:10px; }
  .credits-sales-bars { height:112px; gap:2px; }
  .credits-result { padding:18px 8px; }
  .credits-result>div { gap:10px; font-size:11px; }
  .credits-result>strong { font-size:21px; }
  .credits-thanks { min-height:330px; }
  .credits-thanks strong { font-size:18px; }
  .credits-controls { display:grid; grid-template-columns:1fr 1fr; }
  .credits-controls button { min-width:0; padding:9px 6px; font-size:11px; }
  .credits-controls .primary { grid-column:1/-1; }
}

.reduce-motion .credits-roll { animation:none; transform:none; padding-top:28px; }
.reduce-motion .credits-viewport { overflow-y:auto; }
.reduce-motion .ending-confetti { display:none; }
/* Web demo: keep the five-day result readable down to 320px. */
.demo-result-screen {display:grid;gap:16px;min-width:0}
.demo-result-screen .weekly-summary-card {min-width:0}
.demo-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.demo-stats div {min-width:0}
.demo-stats dt {font-size:12px;color:#655747}
.demo-stats dd {margin:5px 0;font-weight:800;overflow-wrap:anywhere}
.demo-type {text-align:center;background:#fff0c9}
.demo-type h3 {font-size:clamp(22px,5vw,32px);color:#a93755}
.demo-preview li {margin-bottom:10px}
.demo-preview ul {padding-left:22px}
.demo-preview-eyecatch {display:block;width:100%;height:auto;aspect-ratio:1024/500;margin:12px 0 16px;border:3px solid #704a36;border-radius:14px;box-sizing:border-box;object-fit:cover;box-shadow:0 5px 0 #d6aa65}
.demo-footnote {font-size:12px;line-height:1.7}
.demo-link {display:inline-block;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
#demo-share-card {display:block;width:100%;height:auto;border-radius:12px}
.demo-copy-fallback textarea {display:block;width:100%;min-height:130px;box-sizing:border-box}
.demo-result-screen .action-row {flex-wrap:wrap}
.demo-result-screen .action-row>* {min-width:0;max-width:100%;white-space:normal}
/* iOS app safe areas apply to the game, dialogs and the home indicator. */
.native-app body {padding-top:var(--safe-area-inset-top,env(safe-area-inset-top));padding-left:var(--safe-area-inset-left,env(safe-area-inset-left));padding-right:var(--safe-area-inset-right,env(safe-area-inset-right));overscroll-behavior:none}
.native-app .modal-backdrop {padding-top:max(12px,var(--safe-area-inset-top,env(safe-area-inset-top)));padding-bottom:max(12px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)));box-sizing:border-box}
.native-app .morning-modal {max-height:calc(100dvh - var(--safe-area-inset-top,env(safe-area-inset-top)) - var(--safe-area-inset-bottom,env(safe-area-inset-bottom)) - 24px)}
.native-app .title-screen {padding-bottom:max(24px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))}
.native-app button {touch-action:manipulation}
.native-suspended *, .native-suspended *::before, .native-suspended *::after {animation-play-state:paused!important}
.native-resume-overlay {position:fixed;inset:0;z-index:10000;background:#112c50b8;display:grid;place-items:center;padding:24px}
.native-resume-overlay .screen {width:min(100%,440px);box-sizing:border-box;text-align:center;background:#fff6df;border-radius:20px}
.native-save-note {font-size:13px;line-height:1.6}