@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/noto-sans-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/noto-sans-sc-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/noto-sans-sc-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/noto-sans-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./fonts/noto-sans-sc-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("./fonts/noto-serif-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("./fonts/noto-serif-sc-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #fff7e5;
  --ink-soft: #dcd3bd;
  --night: #07100f;
  --panel: rgba(8, 14, 13, 0.88);
  --panel-solid: #0d1715;
  --line: rgba(255, 244, 216, 0.22);
  --gold: #f2bd43;
  --gold-deep: #b97118;
  --green: #9bb173;
  --danger: #ec765b;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Noto Sans SC", sans-serif;
  font-synthesis: none;
  background: var(--night);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; background: var(--night); }

body {
  min-height: 100svh;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }
button, [role="button"] { touch-action: manipulation; }

::selection { background: var(--gold); color: #171006; }

.world {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(320px, 470px) minmax(280px, 370px);
  place-content: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: 0 clamp(1rem, 4vw, 4rem);
  background:
    linear-gradient(90deg, rgba(7, 16, 15, 0.98), rgba(7, 16, 15, 0.62) 46%, rgba(7, 16, 15, 0.98)),
    url("./assets/stall-main.jpg") center / cover fixed;
}

.game {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #101b18;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.scene, .scene-image, .scene-grade, .reveal-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene { z-index: -2; overflow: hidden; background: #101b18; }

.scene-image {
  object-fit: cover;
  transform: scale(1.02);
  transition: opacity 420ms var(--ease-out), transform 720ms var(--ease-out), filter 450ms var(--ease-out);
}

.scene-image--vendor, .scene-image--result { opacity: 0; }
.scene-image--vendor.is-active { opacity: 1; }

.prince-companion {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 24%;
  width: 23%;
  max-height: 41%;
  object-fit: contain;
  object-position: bottom;
  opacity: 0;
  transform: translateY(0.7rem) scale(0.96);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.46));
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.prince-companion.is-active { opacity: 1; transform: none; }

.scene-grade {
  background:
    linear-gradient(180deg, rgba(3, 8, 8, 0.32) 0%, transparent 22%, transparent 57%, rgba(2, 7, 7, 0.74) 84%, rgba(2, 7, 7, 0.96) 100%),
    linear-gradient(90deg, rgba(2, 8, 8, 0.2), transparent 36%, rgba(5, 8, 7, 0.08));
}

.reveal-flash {
  opacity: 0;
  background: radial-gradient(circle at 50% 66%, rgba(255, 221, 111, 0.95), rgba(242, 165, 42, 0.24) 28%, transparent 62%);
  mix-blend-mode: screen;
  transition: opacity 250ms ease;
}

.hud {
  position: absolute;
  z-index: 5;
  top: max(1rem, env(safe-area-inset-top));
  left: 1rem;
  right: 1rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  gap: 0.55rem;
}

.hud-block, .sound-button, .mission {
  background: rgba(7, 13, 12, 0.82);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.hud-block, .sound-button { height: 4.1rem; min-height: 4.1rem; }
.hud-block { display: grid; align-content: center; padding: 0.45rem 0.7rem; }
.cash-block { min-width: 6.4rem; text-align: right; }
.hud-label { display: block; color: var(--ink-soft); font-size: 0.75rem; letter-spacing: 0.12em; }
.hud strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cash-block strong { color: #ffd56c; }

.day-track { display: flex; gap: 0.16rem; margin-top: 0.22rem; }
.day-track i { flex: 1 1 0; min-width: 2px; height: 2px; background: rgba(255,255,255,0.18); }
.day-track i.is-done, .day-track i.is-current { background: var(--gold); }

.sound-button {
  width: 4.1rem;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
}

.icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sound-off { display: none; }
.sound-button[aria-pressed="true"] .icon-sound-on { display: none; }
.sound-button[aria-pressed="true"] .icon-sound-off { display: block; }

.mission {
  position: absolute;
  z-index: 4;
  top: calc(max(1rem, env(safe-area-inset-top)) + 4.9rem);
  left: 1rem;
  max-width: 14.8rem;
  padding: 0.65rem 0.85rem 0.7rem;
}
.mission span { display: block; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.14em; margin-bottom: 0.15rem; }
.mission strong { font-size: 0.95rem; line-height: 1.4; }

.speech {
  width: 100%;
  padding: 0.58rem 0.75rem;
  background: rgba(247, 239, 216, 0.95);
  color: #171611;
  border-radius: 0.25rem 0.7rem 0.7rem 0.7rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transition: transform 300ms var(--ease-out), opacity 300ms ease;
}

.speaker { color: #72551e; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; }
.speech p { margin: 0.08rem 0 0; font-family: "Noto Serif SC", serif; font-size: clamp(0.92rem, 3.6vw, 1.08rem); font-weight: 700; line-height: 1.45; }

.durian-picker {
  position: absolute;
  z-index: 4;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 26.5%;
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.35rem 0.05rem 0.4rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.durian-picker::-webkit-scrollbar { display: none; }

.durian-choice {
  position: relative;
  min-height: 3.55rem;
  padding: 0.52rem 0.36rem;
  color: var(--ink);
  background: rgba(8, 15, 13, 0.68);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0.35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 220ms var(--ease-out), border-color 220ms ease, background 220ms ease;
  flex: 0 0 calc((100% - 0.9rem) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.durian-choice.is-selected { transform: translateY(-5px); border-color: var(--gold); background: rgba(42, 35, 18, 0.86); }
.durian-choice:active:not(:disabled) { transform: translateY(-2px) scale(0.96); }
.durian-choice:disabled { opacity: 0.46; cursor: not-allowed; }
.durian-choice strong { display: block; color: #ffd56c; font-size: 1rem; font-variant-numeric: tabular-nums; }
.durian-choice span { display: block; margin-top: 0.08rem; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.durian-choice small { display: block; margin-top: 0.08rem; color: #ffc1ad; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.action-deck {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.72rem 1rem max(0.85rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6, 12, 11, 0.08), rgba(6, 12, 11, 0.94) 18%, #07100f 100%);
}

.deck-prompt { margin: 0.45rem 0 0.42rem; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.4; }
.risk-profile { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: baseline; margin-top: 0.42rem; padding: 0.38rem 0.48rem; color: var(--ink-soft); background: rgba(255,255,255,0.05); border-left: 1px solid var(--gold); font-size: 0.72rem; line-height: 1.35; }
.risk-profile span { color: var(--gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; }
.risk-profile strong { font-weight: 500; }

.open-button, .continue-button, .restart-button, .share-button {
  min-height: 3.2rem;
  border: 0;
  border-radius: 0.4rem;
  font-weight: 800;
  cursor: pointer;
}

.open-button {
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #1c1508;
  background: linear-gradient(180deg, #ffd66d, #e7a62b);
  box-shadow: 0 10px 30px rgba(226, 157, 34, 0.26);
}
.open-button:disabled { color: #817968; background: #302f28; box-shadow: none; cursor: not-allowed; }
.open-button:not(:disabled):active, .continue-button:active, .restart-button:active, .share-button:active, .sound-button:active { transform: scale(0.96); }

.opening-status {
  position: absolute;
  z-index: 7;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 12%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  transition: opacity 250ms ease, transform 450ms var(--ease-out);
}
.opening-status span { font-family: "Noto Serif SC", serif; font-size: 1.45rem; font-weight: 900; }
.opening-status small { display: block; margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.72rem; }
.opening-line { height: 3px; margin-top: 0.65rem; background: rgba(255,255,255,0.16); overflow: hidden; }
.opening-line i { display: block; width: 34%; height: 100%; background: var(--gold); transform: translateX(-110%); }

.reveal-moment {
  position: absolute;
  z-index: 8;
  top: 15%;
  left: 1rem;
  right: 1rem;
  text-align: center;
  filter: drop-shadow(0 5px 18px rgba(0,0,0,0.8));
  animation: reveal-title 620ms var(--ease-out) both;
}
.reveal-moment span { color: #ffd56c; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; }
.reveal-moment h1 { margin: 0.2rem 0 0; font-family: "Noto Serif SC", serif; font-size: clamp(2.1rem, 10vw, 4.2rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.reveal-moment > p { margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.82rem; font-weight: 700; }

.result-layout {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  align-content: end;
  gap: 0.55rem;
  pointer-events: none;
}

.result-layout > * { pointer-events: auto; }

.result-reaction {
  position: absolute;
  top: 39%;
  left: 0;
  width: min(64%, 17rem);
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.48rem 0.65rem;
  color: #171611;
  background: rgba(247, 239, 216, 0.93);
  border-radius: 0.35rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32);
  animation: panel-in 420ms var(--ease-out) both;
}
.result-reaction span { flex: 0 0 auto; color: #72551e; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.result-reaction p { margin: 0; font-family: "Noto Serif SC", serif; font-size: 0.8rem; font-weight: 700; line-height: 1.4; }

.result-panel, .season-report {
  padding: 0.9rem 1rem;
  background: rgba(8, 14, 13, 0.94);
  border: 1px solid rgba(255, 228, 163, 0.36);
  box-shadow: 0 18px 52px rgba(0,0,0,0.48);
  animation: panel-in 520ms var(--ease-out) both;
}

.result-panel { position: relative; width: 100%; }
.season-report { position: absolute; z-index: 8; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }

.result-kicker, .report-label { color: var(--gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; }
.result-panel h1, .season-report h1 { margin: 0.2rem 0 0.35rem; font-family: "Noto Serif SC", serif; font-size: clamp(1.7rem, 7vw, 2.8rem); line-height: 1.05; letter-spacing: -0.03em; }
.result-panel > p, .report-subtitle { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.result-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.55rem; padding: 0.42rem 0.5rem; color: var(--ink-soft); background: rgba(255,255,255,0.05); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.result-formula b { color: var(--gold); }
.result-formula strong { color: #ffd56c; }
.result-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.result-net { flex: 0 0 auto; padding-left: 0.8rem; text-align: right; border-left: 1px solid var(--line); }
.result-net small { display: block; color: var(--ink-soft); font-size: 0.7rem; }
.result-net strong { display: block; margin-top: 0.1rem; color: #ffd56c; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.result-net strong.is-loss { color: #ff9a82; }
.result-economy { display: flex; gap: 1.2rem; margin-top: 0.55rem; font-size: 0.72rem; }
.result-economy > span { min-width: 3.2rem; }
.result-economy strong { display: block; margin-top: 0.08rem; color: #ffd56c; font-size: 1rem; font-variant-numeric: tabular-nums; }
#commissionItem strong { color: #ffbd87; }
.collection-gain { margin-top: 0.5rem !important; color: #c7d7a8 !important; font-size: 0.72rem; font-weight: 700; }
.cap-notice { margin-top: 0.45rem !important; padding: 0.35rem 0.45rem; color: #1b170d !important; background: var(--gold); font-size: 0.72rem; font-weight: 800; }
.continue-button { width: 100%; margin-top: 0.65rem; color: #181207; background: var(--gold); }

.report-stamp { position: absolute; top: 1rem; right: 1rem; padding: 0.28rem 0.45rem; color: #ffd2c7; border: 1px solid var(--danger); transform: rotate(4deg); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }
.report-money { margin: 0.6rem 0; padding: 0.5rem 0; border-block: 1px solid var(--line); }
.report-money span, .report-money small { display: block; color: var(--ink-soft); font-size: 0.78rem; }
.report-money strong { display: block; color: #ffd56c; font-size: 2.15rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.report-money small { color: var(--green); }
.report-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; }
.report-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; padding-bottom: 0.28rem; border-bottom: 1px solid rgba(255,255,255,0.09); }
.report-stats span, .risk-counts, .findings-label { color: var(--ink-soft); font-size: 0.68rem; }
.report-stats strong, .risk-counts strong { color: var(--ink); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.risk-counts { display: flex; justify-content: space-between; margin: 0.45rem 0 0.35rem; }
.findings-label { margin: 0 0 0.28rem; color: var(--gold); font-weight: 800; letter-spacing: 0.1em; }
.report-findings { display: flex; flex-wrap: wrap; gap: 0.24rem; }
.report-findings span { padding: 0.2rem 0.32rem; color: #ece1c7; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); font-size: 0.64rem; line-height: 1.25; }
.collection-report { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--line); }
.collection-report > div:first-child { display: flex; align-items: baseline; justify-content: space-between; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.1em; }
.collection-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.28rem; margin-top: 0.3rem; }
.collection-slots span { min-width: 0; padding: 0.32rem 0.2rem; color: #827d70; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12); font-size: 0.65rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-slots span.is-found { color: #152016; background: var(--green); border-style: solid; }
.report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.6rem; }
.share-button { display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--ink); background: #24322d; border: 1px solid rgba(255,255,255,0.16); }
.restart-button { color: #181207; background: var(--gold); }

.toast {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 2rem;
  padding: 0.65rem 0.85rem;
  color: #17130c;
  background: #fff3d1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 260ms var(--ease-out);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.rotate-notice { display: none; }

.game[data-state="opening"] .scene-image--vendor { transform: scale(1.12); filter: brightness(0.74); }
.game[data-state="opening"] .prince-companion,
.game[data-state="reveal"] .prince-companion,
.game[data-state="result"] .prince-companion,
.game[data-state="summary"] .prince-companion { opacity: 0; transform: translateY(0.7rem) scale(0.96); }
.game[data-state="opening"] .action-deck, .game[data-state="opening"] .durian-picker, .game[data-state="opening"] .speech { opacity: 0; pointer-events: none; }
.game[data-state="opening"] .opening-status { opacity: 1; transform: none; }
.game[data-state="opening"] .opening-line i { animation: opening-progress 700ms var(--ease-out) forwards; }
.game[data-state="opening"] .reveal-flash { opacity: 1; animation: flash-pulse 520ms ease-out both; }
.game[data-state="reveal"] .opening-status { opacity: 0; transition: none; }
.game[data-state="reveal"] .scene-image--vendor, .game[data-state="result"] .scene-image--vendor, .game[data-state="summary"] .scene-image--vendor { opacity: 0; }
.game[data-state="reveal"] .scene-image--result, .game[data-state="result"] .scene-image--result, .game[data-state="summary"] .scene-image--result { opacity: 1; transform: scale(1.03); }
.scene-image--result[data-quality="dead"] { filter: brightness(0.46) saturate(0.35) contrast(1.08); }
.scene-image--result[data-quality="unripe"] { filter: brightness(0.82) saturate(0.65) hue-rotate(16deg); }
.scene-image--result[data-quality="overripe"] { filter: brightness(0.68) saturate(0.78) sepia(0.22); }
.scene-image--result[data-quality="wet"] { filter: brightness(0.88) saturate(0.82) contrast(0.92); }
.scene-image--result[data-quality="normal"] { filter: brightness(0.94) saturate(0.98); }
.scene-image--result[data-quality="dry"] { filter: brightness(1.02) saturate(1.08) contrast(1.04); }
.scene-image--result[data-quality="perfect-dry"] { filter: brightness(1.08) saturate(1.2) contrast(1.05); }
.scene-image--result[data-quality="golden"] { filter: brightness(1.12) saturate(1.34) sepia(0.12); }
.game[data-state="reveal"] .action-deck, .game[data-state="reveal"] .durian-picker, .game[data-state="reveal"] .mission,
.game[data-state="result"] .action-deck, .game[data-state="result"] .durian-picker, .game[data-state="result"] .speech,
.game[data-state="summary"] .action-deck, .game[data-state="summary"] .durian-picker, .game[data-state="summary"] .speech,
.game[data-state="result"] .mission, .game[data-state="summary"] .mission { opacity: 0; pointer-events: none; }

.ledger { align-self: center; width: 100%; max-width: 22rem; }
.ledger-brand { margin: 0 0 0.7rem; color: var(--gold); font-weight: 800; letter-spacing: 0.12em; }
.ledger h2 { margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.04em; }
.ledger-rule { width: 3rem; height: 2px; margin: 1.1rem 0; background: var(--gold); }
.ledger ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.28rem; }
.ledger li { display: grid; grid-template-columns: 4rem 1fr; gap: 0.75rem; color: #756f60; }
.ledger li span { font-size: 0.68rem; letter-spacing: 0.1em; }
.ledger li p { margin: 0; overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.ledger li.is-active { color: var(--ink); }
.ledger li.is-done { color: var(--green); }
.ledger-note { margin-top: 0.8rem; color: #8f8878; font-size: 0.72rem; }

button:focus-visible { outline: 3px solid #fff2c2; outline-offset: 3px; }

@media (hover: hover) {
  .durian-choice:hover:not(:disabled) { transform: translateY(-3px); background: rgba(16, 27, 23, 0.88); }
  .open-button:not(:disabled):hover, .continue-button:hover, .restart-button:hover { filter: brightness(1.06); }
  .share-button:hover { background: #30433c; }
}

@keyframes opening-progress { to { transform: translateX(300%); } }
@keyframes flash-pulse { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes reveal-title { 0% { opacity: 0; transform: translateY(0.8rem) scale(0.96); } 22%, 78% { opacity: 1; transform: none; } 100% { opacity: 0.85; transform: translateY(-0.2rem); } }

@media (max-width: 820px) {
  .world { display: block; padding: 0; background: #07100f; }
  .game { width: 100%; height: 100svh; max-height: none; aspect-ratio: auto; box-shadow: none; }
  .ledger { display: none; }
}

@media (max-height: 720px) {
  .durian-picker { bottom: 34%; }
  .speech p { font-size: 0.86rem; }
  .risk-profile { padding-block: 0.3rem; font-size: 0.68rem; }
  .action-deck { padding-top: 0.65rem; }
  .result-reaction { width: min(68%, 16rem); padding: 0.38rem 0.55rem 0.42rem; }
  .result-reaction p { font-size: 0.76rem; line-height: 1.3; }
  .prince-companion { bottom: 25%; width: 21%; }
  .ledger h2 { font-size: 2rem; }
  .ledger-rule { margin: 0.65rem 0; }
  .ledger ol { gap: 0.08rem; }
  .ledger li p { font-size: 0.68rem; }
  .ledger-note { margin-top: 0.45rem; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  html, body { height: 100%; overflow: hidden; }
  .world { display: none; }
  .rotate-notice {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.7rem;
    padding: 2rem;
    color: var(--ink);
    background: radial-gradient(circle at 50% 35%, #173028, var(--night) 68%);
    text-align: center;
  }
  .rotate-notice svg { width: 3.4rem; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .rotate-notice strong { font-family: "Noto Serif SC", serif; font-size: 1.65rem; }
  .rotate-notice span { color: var(--ink-soft); font-size: 0.85rem; }
}

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

/* Accepted room-by-room reveal flow */
.room-progress {
  min-width: 0;
  height: 4.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  background: rgba(7, 13, 12, 0.88);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.room-progress-copy { flex: 0 0 auto; display: grid; gap: 0.05rem; }
.room-progress-copy span { color: var(--ink-soft); font-size: 0.58rem; letter-spacing: 0.08em; }
.room-progress-copy strong { color: var(--ink); font-size: 0.68rem; white-space: nowrap; }
.opened-room-icons { min-width: 0; display: flex; align-items: center; gap: 0.2rem; overflow: hidden; }
.opened-room-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  overflow: hidden;
  background: #17221f;
  border: 1px solid rgba(255, 245, 219, 0.32);
}
.opened-room-icon.is-special { border-color: var(--gold); }
.opened-room-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.room-reveal {
  position: absolute;
  z-index: 7;
  top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.4rem);
  left: 0.85rem;
  right: 0.85rem;
  bottom: calc(6.7rem + env(safe-area-inset-bottom));
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  pointer-events: none;
}

.room-visual { position: relative; min-height: 0; overflow: hidden; }
.room-visual::after {
  content: "";
  position: absolute;
  inset: 42% 7% 3%;
  background: radial-gradient(ellipse, rgba(244, 190, 75, 0.2), transparent 70%);
  filter: blur(12px);
}
.room-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.56));
  animation: room-arrive 520ms var(--ease-out) both;
}

.room-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.12rem 0.75rem;
  align-items: end;
  min-height: 6.2rem;
  padding: 0.68rem 0.75rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(8, 18, 16, 0.9), rgba(5, 12, 11, 0.98));
  border-top: 1px solid rgba(255, 218, 123, 0.52);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.35);
}
.room-rarity { grid-column: 1 / -1; color: var(--gold); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; }
.room-details h1 { margin: 0; font-family: "Noto Serif SC", serif; font-size: clamp(1.45rem, 7vw, 2.1rem); line-height: 1.05; letter-spacing: -0.025em; }
.room-details > p { grid-column: 1; margin: 0.16rem 0 0; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.42; }
.room-return { grid-column: 2; grid-row: 2 / 4; align-self: stretch; min-width: 5.7rem; display: grid; align-content: center; justify-items: end; padding-left: 0.65rem; border-left: 1px solid var(--line); }
.room-return span { color: var(--ink-soft); font-size: 0.64rem; }
.room-return strong { margin-top: 0.08rem; color: #ffd56c; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.room-actions {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.62rem 0.85rem max(0.72rem, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(5, 12, 11, 0), rgba(5, 12, 11, 0.96) 18%, #07100f 100%);
}
.room-actions > div { display: flex; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.38rem; color: var(--ink-soft); font-size: 0.67rem; }
.room-actions > div span { color: var(--gold); font-weight: 800; }
.room-actions small { font-size: inherit; }
.room-continue-button {
  width: 100%;
  min-height: 2.8rem;
  color: #1c1508;
  background: linear-gradient(180deg, #ffd66d, #e7a62b);
  border: 0;
  border-radius: 0.4rem;
  font-weight: 800;
  cursor: pointer;
}
.room-continue-button:disabled { color: #817968; background: #302f28; cursor: wait; }

.whole-overview {
  position: absolute;
  z-index: 6;
  top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.4rem);
  left: 0.85rem;
  right: 0.85rem;
  bottom: calc(min(17.5rem, 34%) + max(0.85rem, env(safe-area-inset-bottom)) + 0.45rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: rgba(8, 17, 15, 0.84);
  border: 1px solid rgba(255, 228, 163, 0.3);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.48);
}
.whole-overview-items { min-height: 0; padding: 0.36rem; }
.whole-result-board { width: 100%; height: 100%; display: grid; gap: 0.3rem; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.whole-result-board.rooms-1 { grid-template-columns: minmax(0, 1fr); }
.whole-result-board.rooms-2, .whole-result-board.rooms-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.whole-result-board.rooms-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.whole-result-board.rooms-5 .whole-room-card { grid-column: span 2; }
.whole-result-board.rooms-5 .whole-room-card:nth-child(4) { grid-column: 2 / span 2; }
.whole-room-card { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: #111b18; border: 1px solid rgba(255, 245, 219, 0.18); }
.whole-room-card img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.42)); }
.whole-room-card span { padding: 0.18rem 0.22rem; overflow: hidden; color: var(--ink-soft); background: rgba(4, 10, 9, 0.9); font-size: 0.55rem; white-space: nowrap; text-overflow: ellipsis; }
.whole-overview-copy { display: flex; align-items: end; justify-content: space-between; gap: 0.65rem; padding: 0.45rem 0.6rem; background: rgba(5, 12, 11, 0.96); border-top: 1px solid rgba(255, 218, 123, 0.48); }
.whole-overview-copy strong { font-family: "Noto Serif SC", serif; font-size: 0.95rem; }
.whole-overview-copy span { color: var(--gold); font-size: 0.67rem; font-weight: 800; text-align: right; }

.room-breakdown { margin-top: 0.2rem; color: var(--ink-soft); font-size: 0.68rem; }
.room-breakdown summary { min-height: 1.7rem; display: flex; align-items: center; color: #f0d68f; cursor: pointer; }
.room-breakdown > div { display: grid; gap: 0.22rem; padding: 0.2rem 0; }
.room-breakdown-line { display: flex; justify-content: space-between; gap: 0.8rem; }

.result-panel {
  height: 17.5rem;
  max-height: min(17.5rem, calc(100% - 5.7rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 218, 123, 0.55) rgba(255, 255, 255, 0.05);
}
.result-panel::-webkit-scrollbar { width: 0.35rem; }
.result-panel::-webkit-scrollbar-thumb { background: rgba(255, 218, 123, 0.55); }
.result-panel h1 { font-size: clamp(1.2rem, 5.5vw, 1.65rem); }
.result-panel > #resultDescription { font-size: 0.72rem; line-height: 1.4; }
.result-economy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.7rem; margin-top: 0.42rem; }
.result-economy > div { min-width: 0; padding-top: 0.2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.result-economy span { color: var(--ink-soft); font-size: 0.65rem; }
.result-economy strong { display: block; margin-top: 0.04rem; color: #ffd56c; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.result-economy strong.is-cost, #cashDeltaValue.is-loss { color: #ff9a82; }
.result-formula { margin-top: 0.3rem; padding: 0.3rem 0.42rem; font-size: 0.64rem; line-height: 1.35; }
.continue-button { position: sticky; bottom: -0.9rem; min-height: 2.8rem; margin-top: 0.35rem; box-shadow: 0 -10px 20px rgba(7, 16, 15, 0.82); }

.game[data-state="opening"] .hud,
.game[data-state="room-reveal"] .hud,
.game[data-state="result"] .hud {
  top: max(0.75rem, env(safe-area-inset-top));
  grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
  gap: 0.42rem;
}
.game[data-state="opening"] .day-block,
.game[data-state="room-reveal"] .day-block,
.game[data-state="result"] .day-block,
.game[data-state="opening"] .sound-button,
.game[data-state="room-reveal"] .sound-button,
.game[data-state="result"] .sound-button { display: none; }
.game[data-state="opening"] .cash-block,
.game[data-state="room-reveal"] .cash-block,
.game[data-state="result"] .cash-block,
.game[data-state="opening"] .room-progress,
.game[data-state="room-reveal"] .room-progress,
.game[data-state="result"] .room-progress { height: 2.75rem; min-height: 2.75rem; }
.game[data-state="opening"] .cash-block,
.game[data-state="room-reveal"] .cash-block,
.game[data-state="result"] .cash-block { min-width: 0; padding: 0.3rem 0.45rem; text-align: left; }
.game[data-state="opening"] .cash-block .hud-label,
.game[data-state="room-reveal"] .cash-block .hud-label,
.game[data-state="result"] .cash-block .hud-label { font-size: 0.58rem; letter-spacing: 0.06em; }
.game[data-state="opening"] .cash-block strong,
.game[data-state="room-reveal"] .cash-block strong,
.game[data-state="result"] .cash-block strong { font-size: 0.86rem; }
.game[data-state="opening"] .room-progress,
.game[data-state="room-reveal"] .room-progress,
.game[data-state="result"] .room-progress { display: flex; }

.game[data-state="room-reveal"] .action-deck,
.game[data-state="room-reveal"] .durian-picker,
.game[data-state="room-reveal"] .mission,
.game[data-state="room-reveal"] .speech,
.game[data-state="result"] .action-deck,
.game[data-state="result"] .durian-picker,
.game[data-state="result"] .mission,
.game[data-state="result"] .speech { opacity: 0; pointer-events: none; }
.game[data-state="room-reveal"] .scene-image--vendor,
.game[data-state="result"] .scene-image--vendor { opacity: 0.84; filter: brightness(0.58); transform: scale(1.05); }
.game[data-state="room-reveal"] .scene-image--result,
.game[data-state="result"] .scene-image--result { opacity: 0; }
.game[data-state="room-reveal"] .room-reveal { animation: room-frame-in 360ms var(--ease-out) both; }
.game[data-state="result"] .result-layout { left: 0.85rem; right: 0.85rem; bottom: max(0.85rem, env(safe-area-inset-bottom)); }
.game[data-state="result"] .result-reaction { top: 36%; width: min(64%, 17rem); }

@keyframes room-arrive { from { opacity: 0; transform: translateY(0.7rem) scale(0.96); filter: blur(5px) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.56)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.56)); } }
@keyframes room-frame-in { from { opacity: 0.01; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }

@media (max-width: 350px) {
  .game[data-state="opening"] .hud,
  .game[data-state="room-reveal"] .hud,
  .game[data-state="result"] .hud { left: 0.55rem; right: 0.55rem; grid-template-columns: 5.3rem minmax(0, 1fr); gap: 0.28rem; }
  .room-progress { padding-inline: 0.38rem; gap: 0.35rem; }
  .room-progress-copy span { display: none; }
  .room-reveal { left: 0.55rem; right: 0.55rem; }
  .room-details { grid-template-columns: minmax(0, 1fr) 4.7rem; gap: 0.1rem 0.5rem; padding: 0.58rem 0.6rem; }
  .room-details h1 { font-size: 1.25rem; }
  .room-details > p { font-size: 0.67rem; }
  .room-return { min-width: 0; padding-left: 0.5rem; }
  .result-layout { left: 0.55rem; right: 0.55rem; }
  .result-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .result-economy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whole-overview { left: 0.55rem; right: 0.55rem; }
}

@media (max-height: 720px) {
  .room-reveal { top: calc(max(0.45rem, env(safe-area-inset-top)) + 3.15rem); bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
  .room-details { min-height: 5.35rem; padding: 0.52rem 0.65rem; }
  .room-details h1 { font-size: 1.22rem; }
  .room-details > p { font-size: 0.66rem; }
  .room-actions { padding-top: 0.5rem; }
  .whole-overview { top: calc(max(0.45rem, env(safe-area-inset-top)) + 3.15rem); bottom: calc(16.2rem + max(0.55rem, env(safe-area-inset-bottom))); }
  .result-panel { height: 16.2rem; max-height: min(16.2rem, calc(100% - 5.2rem)); padding: 0.65rem 0.75rem; }
}