:root {
  color-scheme: light;
  --paper: #f4efe5;
  --paper-deep: #e7ddca;
  --white: #fffdf8;
  --ink: #20322d;
  --ink-soft: #60706a;
  --line: #263a33;
  --red: #e95948;
  --red-deep: #b7352d;
  --blue: #3f7fbd;
  --green: #2e946b;
  --gold: #e5ad37;
  --orange: #ee8c46;
  --shadow: 0 18px 46px rgb(43 52 47 / 14%);
  --hard-shadow: 8px 8px 0 var(--line);
  --radius: 24px;
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgb(255 255 255 / 70%), transparent 34rem),
    linear-gradient(135deg, var(--paper), #efe8da 56%, #ded4c3);
  overscroll-behavior: none;
}

button, input, select { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid #ffd35c;
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.game-shell { min-height: 100svh; }
.screen { min-height: 100svh; }
.eyebrow {
  margin: 0;
  color: var(--red-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.primary-button, .secondary-button, .text-button, .icon-button {
  border: 0;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.primary-button {
  min-height: 54px;
  padding: 14px 22px;
  border: 2px solid var(--line);
  border-radius: 15px;
  color: #fff;
  background: var(--red);
  box-shadow: 4px 4px 0 var(--line);
  font-weight: 900;
}
.secondary-button {
  min-height: 48px;
  padding: 11px 18px;
  border: 2px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  font-weight: 850;
}
.text-button { padding: 8px; color: var(--ink-soft); background: transparent; font-weight: 800; }
.danger-text { color: var(--red-deep); }
.icon-button {
  width: 44px;
  height: 44px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-weight: 900;
}
.primary-button:hover, .secondary-button:hover, .icon-button:hover { transform: translate(-1px, -1px); filter: brightness(1.03); }
.primary-button:active, .secondary-button:active, .icon-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.5); }

/* Intro */
.intro-screen {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr);
  align-items: stretch;
  max-width: 1500px;
  min-height: 100svh;
  margin: auto;
  padding: clamp(20px, 3vw, 48px);
  gap: clamp(22px, 4vw, 64px);
}
.intro-copy {
  align-self: center;
  padding: clamp(20px, 3vw, 44px);
}
.intro-copy h1 {
  margin: 18px 0 24px;
  font-size: clamp(64px, 8.4vw, 138px);
  line-height: .82;
  letter-spacing: -.09em;
}
.intro-copy h1 span { color: var(--red); }
.intro-lede { margin: 0; color: var(--ink-soft); font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; line-height: 1.55; }
.intro-rules { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
.intro-rules span {
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
  font-weight: 900;
}
.intro-start { display: flex; width: min(100%, 420px); align-items: center; justify-content: space-between; text-align: left; }
.intro-start span { font-size: 20px; }
.intro-start small { opacity: .8; }
.save-actions { display: flex; gap: 8px; margin-top: 14px; }

.intro-scene {
  position: relative;
  align-self: center;
  min-height: min(74svh, 760px);
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 42px 42px 18px 18px;
  background:
    linear-gradient(to bottom, #f9c489 0 41%, #f7ead4 41% 76%, #c78e62 76%);
  box-shadow: var(--hard-shadow);
}
.sunset-window {
  position: absolute; top: 9%; right: 8%; width: 46%; height: 35%; overflow: hidden;
  border: 8px solid #f8f0df; border-radius: 8px; background: linear-gradient(#f28a73, #f8ca8d 62%, #7d8e8d 63%);
  box-shadow: 0 0 0 3px var(--line);
}
.sunset-window::before { content: ""; position: absolute; width: 58px; height: 58px; top: 20px; right: 28px; border-radius: 50%; background: #fff0a4; }
.sunset-window i { position: absolute; bottom: -2px; width: 32%; background: #4f6f68; clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.sunset-window i:nth-child(1) { left: 0; height: 46%; }.sunset-window i:nth-child(2) { left: 31%; height: 35%; }.sunset-window i:nth-child(3) { right: 0; height: 52%; }
.intro-poster { position: absolute; top: 10%; left: 7%; padding: 18px 15px; rotate: -5deg; border: 3px solid var(--line); background: #fbf6e8; color: var(--red); font-size: clamp(24px, 3vw, 50px); font-weight: 950; line-height: .9; box-shadow: 4px 5px 0 #d9a83b; }
.intro-poster b { display: block; color: var(--ink); font-size: .28em; letter-spacing: .02em; margin-top: 8px; }
.desk { position: absolute; right: 4%; bottom: 17%; width: 54%; height: 29%; border: 3px solid var(--line); border-radius: 9px 9px 0 0; background: #8c593f; box-shadow: inset 0 12px rgb(255 255 255 / 14%); }
.desk::before, .desk::after { content: ""; position: absolute; bottom: -35%; width: 8%; height: 38%; border: 3px solid var(--line); background: #68402e; }.desk::before { left: 8%; }.desk::after { right: 8%; }
.monitor { position: absolute; left: 12%; bottom: 45%; width: 74%; aspect-ratio: 1.7; border: 6px solid #293d38; border-radius: 14px; background: #13231f; box-shadow: 5px 5px 0 #e4b651; }
.monitor::after { content: ""; position: absolute; left: 45%; bottom: -32px; width: 13%; height: 32px; background: #293d38; }
.monitor svg { width: 100%; height: 100%; }.monitor path { fill: none; stroke: #f45d4a; stroke-width: 7; stroke-linecap: round; }
.monitor strong { position: absolute; top: 12%; left: 8%; color: #f8f1d7; font-size: clamp(18px, 2.5vw, 38px); }
.monitor-dot { position: absolute; z-index: 1; right: 10px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #66dd9b; box-shadow: 0 0 12px #66dd9b; }
.keyboard { position: absolute; left: 18%; bottom: 8%; width: 62%; height: 12%; rotate: 2deg; border: 3px solid var(--line); border-radius: 6px; background: #e9ddc8; }
.speech-bubble { position: absolute; z-index: 4; left: 9%; bottom: 48%; padding: 13px 18px; border: 3px solid var(--line); border-radius: 16px; background: var(--white); font-size: clamp(16px, 1.6vw, 23px); font-weight: 900; box-shadow: 4px 4px 0 var(--line); }
.speech-bubble::after { content: ""; position: absolute; right: 14px; bottom: -14px; width: 18px; height: 18px; border-right: 3px solid var(--line); border-bottom: 3px solid var(--line); background: var(--white); rotate: 45deg; }
.floor-shadow { position: absolute; bottom: 8%; left: 12%; width: 58%; height: 7%; border-radius: 50%; background: rgb(64 43 33 / 23%); filter: blur(5px); }

/* Code-native initial character; AAA pass replaces key scenes with original raster art. */
.css-person { position: absolute; z-index: 3; width: 150px; height: 280px; transform-origin: 50% 100%; }
.intro-person { left: 12%; bottom: 10%; scale: 1.08; }
.person-face { position: absolute; z-index: 3; left: 33px; top: 34px; width: 82px; height: 78px; border: 4px solid var(--line); border-radius: 44% 48% 46% 44%; background: #f6cda8; }
.person-face::before { content: "•  •"; position: absolute; top: 29px; left: 20px; color: var(--line); font-size: 20px; font-weight: 900; letter-spacing: 12px; white-space: nowrap; }
.person-face::after { content: "⌣"; position: absolute; top: 43px; left: 31px; color: #a6493f; font-size: 24px; font-weight: 900; }
.person-hair { position: absolute; z-index: 4; top: 17px; left: 20px; width: 111px; height: 76px; border: 4px solid var(--line); border-radius: 55% 48% 36% 50%; background: #41372e; clip-path: polygon(0 0,100% 0,100% 80%,75% 66%,62% 24%,45% 51%,20% 43%,8% 100%); }
.person-body { position: absolute; z-index: 2; top: 103px; left: 29px; width: 92px; height: 104px; border: 4px solid var(--line); border-radius: 23px 23px 9px 9px; background: #e86555; }
.person-body::after { content: ""; position: absolute; top: 9px; left: 38px; width: 12px; height: 84px; background: #f7eee1; border-radius: 8px; }
.person-arm, .person-leg { position: absolute; z-index: 1; border: 4px solid var(--line); background: #e86555; }
.person-arm { top: 112px; width: 32px; height: 100px; border-radius: 20px; transform-origin: 50% 10%; }.person-arm.left { left: 12px; rotate: 9deg; }.person-arm.right { right: 11px; rotate: -24deg; }
.person-leg { top: 196px; width: 37px; height: 74px; border-radius: 8px 8px 18px 18px; background: #32443e; }.person-leg.left { left: 34px; }.person-leg.right { right: 32px; }

/* Play shell */
.play-screen { display: grid; grid-template-rows: auto 1fr; padding: 14px; gap: 12px; }
.hud {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  min-height: 76px;
  padding: 9px 14px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 7px 0 rgb(38 58 51 / 10%);
  gap: 18px;
}
.brand-lockup { min-width: 150px; }.brand-lockup span { display: block; color: var(--red-deep); font-size: 10px; font-weight: 950; letter-spacing: .14em; }.brand-lockup strong { font-size: 18px; }
.hud-day { min-width: 110px; padding-left: 18px; border-left: 1px solid #d9d1c4; }.hud-day small, .hud-stats dt { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 800; }.hud-day strong { font-size: 17px; }
.hud-stats { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); margin: 0; gap: 8px; }.hud-stats div { min-width: 0; padding: 7px 10px; border-left: 1px solid #ded8cc; }.hud-stats dd { overflow: hidden; margin: 2px 0 0; font-size: clamp(15px, 1.5vw, 20px); font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }.hud-stats .negative dd { color: var(--blue); }
.hud-actions { display: flex; gap: 7px; }
.play-layout { display: grid; grid-template-columns: minmax(620px, 1.55fr) minmax(330px, .66fr); min-height: 0; gap: 12px; }
.room-stage { position: relative; min-height: 690px; overflow: hidden; border: 3px solid var(--line); border-radius: 28px; background: #e9b97f; box-shadow: var(--shadow); isolation: isolate; }
.room-wall { position: absolute; inset: 0 0 34%; background: linear-gradient(90deg, transparent 49.7%, rgb(38 58 51 / 8%) 50%, transparent 50.3%), #f3dfbb; }
.room-wall::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 56px, rgb(90 70 51 / 5%) 57px 58px); }
.room-floor { position: absolute; inset: 66% 0 0; border-top: 4px solid var(--line); background: repeating-linear-gradient(100deg, #b9774e 0 64px, #a96843 65px 68px); }
.room-window { position: absolute; z-index: 2; top: 7%; left: 38%; width: 31%; height: 30%; border: 7px solid #f7efdc; outline: 3px solid var(--line); background: linear-gradient(#8bc5d1, #f6ce8c 75%); box-shadow: inset 0 -25px #697c6f; }.room-window::after { content: ""; position: absolute; inset: 0 48%; background: #f7efdc; border-left: 2px solid var(--line); border-right: 2px solid var(--line); }.room-window span { position: absolute; bottom: 0; background: #405c52; clip-path: polygon(0 50%,100% 0,100% 100%,0 100%); }.room-window span:first-child { left: 0; width: 55%; height: 34%; }.room-window span:last-child { right: 0; width: 52%; height: 48%; }
.wall-crack { display: none; position: absolute; z-index: 1; left: 72%; top: 14%; width: 60px; height: 80px; border-left: 3px solid #a47753; rotate: 18deg; }.wall-crack::after { content: ""; position: absolute; top: 32px; left: -1px; width: 34px; border-top: 3px solid #a47753; rotate: -38deg; }
.room-object { position: absolute; z-index: 5; padding: 10px; border: 3px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: 4px 5px 0 var(--line); text-align: center; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }.room-object:not(:disabled):hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 5px 9px 0 var(--line); }.room-object:disabled { cursor: not-allowed; opacity: .46; filter: grayscale(.6); }.room-object b, .room-object small { display: block; }.room-object b { margin-top: 5px; font-size: 13px; }.room-object small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }.object-icon { display: block; font-size: 36px; }
.job-object { top: 10%; left: 4%; width: 145px; background: #fff4ca; rotate: -2deg; }
.phone-object { top: 50%; left: 5%; width: 112px; }.phone-screen { display: grid; width: 46px; height: 70px; margin: auto; padding: 12px 7px; border: 3px solid var(--line); border-radius: 9px; background: #8cc6ae; gap: 5px; }.phone-screen i { border-radius: 3px; background: #f7f1df; }
.bank-object { top: 47%; right: 5%; width: 120px; background: #dbeafb; }
.poster-object { position: absolute; z-index: 1; top: 6%; right: 6%; padding: 11px 15px; rotate: 4deg; border: 3px solid var(--line); background: #f26e55; color: #fff; font-size: 15px; font-weight: 800; line-height: .9; box-shadow: 3px 3px 0 #eab646; }.poster-object span,.poster-object b,.poster-object small { display: block; }.poster-object b { font-size: 23px; }.poster-object small { margin-top: 6px; color: #ffe5b4; font-size: 9px; }
.market-object { left: 38%; bottom: 21%; width: 230px; min-height: 160px; background: #253d37; color: #fff; }.market-object small { color: #c5d4ce; }.market-screen-mini { display: block; position: relative; height: 80px; overflow: hidden; border: 3px solid #0d1c18; border-radius: 7px; background: #0d211b; }.market-screen-mini::before { content: "KOPI"; position: absolute; top: 10px; left: 12px; color: #f4d96d; font-size: 12px; font-weight: 900; }.market-screen-mini i { position: absolute; left: 7%; right: 7%; bottom: 16px; height: 38px; background: linear-gradient(140deg, transparent 0 18%, #e95a48 19% 23%, transparent 24% 37%, #e95a48 38% 43%, transparent 44% 59%, #4ab784 60% 65%, transparent 66%); }
.exit-object { right: 7%; bottom: 10%; width: 130px; background: #e8efe9; }
.room-bed { position: absolute; z-index: 1; left: 3%; bottom: 3%; width: 31%; height: 31%; border: 3px solid var(--line); border-radius: 14px 14px 6px 6px; background: #72533d; }.blanket { position: absolute; inset: 24% 0 0; border-top: 3px solid var(--line); border-radius: 14px 14px 4px 4px; background: #668e7e; }.pillow { position: absolute; top: 8%; left: 9%; width: 42%; height: 27%; border: 3px solid var(--line); border-radius: 50%; background: #f4e6ce; }
.room-box { position: absolute; z-index: 2; bottom: 4%; padding: 18px 14px 6px; border: 3px solid var(--line); background: #b98555; color: #68452f; font-size: 11px; font-weight: 900; }.room-box-a { right: 28%; rotate: -4deg; }.room-box-b { right: 21%; bottom: 2%; rotate: 5deg; }
.player-person { left: 26%; bottom: 11%; transform: scale(.72); }
.player-thought { position: absolute; z-index: 7; left: 21%; bottom: 48%; padding: 10px 13px; border: 2px solid var(--line); border-radius: 13px; background: var(--white); font-size: 12px; font-weight: 900; box-shadow: 3px 3px 0 var(--line); }.player-thought::after { content: ""; position: absolute; left: 30px; bottom: -9px; width: 13px; height: 13px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--white); rotate: 45deg; }
.event-ticker { position: absolute; z-index: 8; left: 16px; right: 16px; bottom: 15px; display: flex; min-height: 46px; align-items: center; overflow: hidden; border: 3px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: 4px 4px 0 var(--line); }.event-ticker span { align-self: stretch; display: grid; place-items: center; min-width: 90px; padding: 7px; color: #fff; background: var(--red); font-size: 11px; font-weight: 950; }.event-ticker p { margin: 0; padding: 8px 13px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ad-reserve { position: absolute; z-index: 1; top: 42%; left: 41%; display: none; width: 190px; padding: 6px; border: 1px dashed rgb(38 58 51 / 28%); color: rgb(38 58 51 / 46%); text-align: center; }.ad-reserve span { font-size: 10px; font-weight: 950; }.ad-reserve small { display: block; font-size: 8px; }
.room-stage[data-room-level="2"] .room-box-b, .room-stage[data-room-level="3"] .room-box-b { display: block; }.room-stage[data-room-level="3"] .wall-crack { display: block; }.room-stage[data-room-level="4"] .poster-object { rotate: 12deg; opacity: .65; }.room-stage[data-room-level="5"] .room-bed { filter: saturate(.45); }.room-stage[data-room-level="6"] .room-window { filter: grayscale(.5) brightness(.85); }

.action-panel { display: flex; min-width: 0; flex-direction: column; padding: clamp(18px, 2vw, 28px); overflow: auto; border: 3px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.phase-heading h2 { margin: 7px 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.055em; }.phase-heading p:last-child { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.action-cards { display: grid; margin: 22px 0; gap: 9px; }
.action-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; width: 100%; padding: 11px; border: 2px solid var(--line); border-radius: 14px; background: #fffaf0; text-align: left; gap: 10px; transition: transform .15s ease, background .15s ease; }.action-card:hover { transform: translateX(-3px); background: #fff1ce; }.action-card .card-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid var(--line); border-radius: 11px; background: #fff; font-size: 23px; }.action-card b,.action-card small { display: block; }.action-card b { font-size: 14px; }.action-card small { margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.25; }.action-card .card-value { color: var(--red-deep); font-size: 12px; font-weight: 950; }
.obligation-ledger { margin-top: auto; padding-top: 18px; border-top: 2px dashed #ded5c6; }.obligation-ledger > div { display: flex; align-items: end; justify-content: space-between; gap: 10px; }.obligation-ledger h3 { margin: 0; font-size: 14px; }.obligation-ledger strong { color: var(--green); font-size: 12px; }.obligation-ledger ul { max-height: 132px; margin: 10px 0 0; padding: 0; overflow: auto; list-style: none; }.obligation-ledger li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #eee5d7; color: var(--ink-soft); font-size: 12px; }.obligation-ledger li b { color: var(--blue); }.obligation-ledger .empty { font-style: italic; }
.phase-actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; gap: 9px; }

/* Dialog and game modules */
.game-dialog { width: min(94vw, 820px); max-height: 92svh; padding: 0; overflow: visible; border: 0; background: transparent; }.game-dialog::backdrop { background: rgb(23 35 31 / 72%); backdrop-filter: blur(5px); }.dialog-shell { position: relative; max-height: 90svh; padding: clamp(20px, 4vw, 38px); overflow: auto; border: 3px solid var(--line); border-radius: 26px; background: var(--white); box-shadow: 10px 12px 0 rgb(11 20 17 / 55%); }.dialog-close { position: absolute; z-index: 4; top: 12px; right: 12px; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%; background: #fff; font-size: 25px; font-weight: 900; }
.dialog-header { padding-right: 45px; }.dialog-header h2 { margin: 7px 0 8px; font-size: clamp(30px, 5vw, 54px); letter-spacing: -.06em; }.dialog-header p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 22px; gap: 10px; }.choice-button { min-height: 102px; padding: 14px; border: 2px solid var(--line); border-radius: 15px; background: #fff9ed; text-align: left; }.choice-button:hover { background: #ffefc7; }.choice-button b,.choice-button small,.choice-button strong { display: block; }.choice-button strong { margin-top: 8px; color: var(--red-deep); }.choice-button small { margin-top: 4px; color: var(--ink-soft); line-height: 1.35; }
.minigame-stage { margin-top: 22px; padding: 20px; border: 3px solid var(--line); border-radius: 18px; background: #f6eddc; text-align: center; }.minigame-meta { display: flex; justify-content: space-between; font-weight: 900; }.minigame-progress { height: 14px; margin: 12px 0 20px; overflow: hidden; border: 2px solid var(--line); border-radius: 999px; background: #fff; }.minigame-progress i { display: block; width: 100%; height: 100%; background: var(--red); transform-origin: left; }
.minigame-button { width: min(100%, 360px); min-height: 130px; border: 3px solid var(--line); border-radius: 24px; background: #f5b843; box-shadow: 7px 8px 0 var(--line); font-size: clamp(24px, 5vw, 48px); font-weight: 950; user-select: none; touch-action: manipulation; }.minigame-button:active { transform: translate(5px, 5px); box-shadow: 2px 2px 0 var(--line); }.mini-pad { display: grid; grid-template-columns: repeat(3, minmax(62px, 1fr)); max-width: 400px; margin: auto; gap: 8px; }.mini-pad button { min-height: 72px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font-size: 28px; font-weight: 900; }.sequence-view { min-height: 90px; margin-bottom: 14px; font-size: clamp(32px, 8vw, 60px); letter-spacing: .2em; }.gauge-track { position: relative; height: 54px; margin: 30px 0; border: 3px solid var(--line); border-radius: 10px; background: linear-gradient(90deg,#e65c4d 0 18%,#f5c84c 18% 38%,#4caf75 38% 62%,#f5c84c 62% 82%,#e65c4d 82%); }.gauge-needle { position: absolute; top: -12px; bottom: -12px; left: 0; width: 8px; border: 2px solid #fff; background: var(--line); box-shadow: 0 0 0 2px var(--line); }
.market-dialog { width: min(96vw, 980px); }.stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; gap: 10px; }.stock-choice { min-height: 120px; padding: 14px; border: 3px solid var(--line); border-radius: 16px; background: #f9f2e5; text-align: left; }.stock-choice[data-selected="true"] { background: #fff0b8; box-shadow: 5px 5px 0 var(--line); }.stock-choice span,.stock-choice b,.stock-choice small { display: block; }.stock-choice span { color: var(--red-deep); font-size: 11px; font-weight: 950; }.stock-choice b { margin: 5px 0; font-size: 18px; }.stock-choice small { color: var(--ink-soft); }
.risk-controls { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; gap: 15px; }.risk-group { padding: 14px; border: 2px solid var(--line); border-radius: 14px; }.risk-group label { display: block; margin-bottom: 8px; font-weight: 900; }.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.segmented button { min-height: 42px; border: 2px solid var(--line); border-radius: 9px; background: #fff; font-size: 12px; font-weight: 900; }.segmented button[aria-pressed="true"] { color: #fff; background: var(--red); }
.trading-layout { display: grid; grid-template-columns: 1fr 250px; gap: 14px; }.chart-card { position: relative; min-height: 340px; overflow: hidden; border: 3px solid var(--line); border-radius: 18px; background: #10251f; }.chart-card canvas { display: block; width: 100%; height: 340px; }.chart-hud { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; color: #f7f0dc; }.chart-hud b { font-size: 24px; }.chart-hud span { color: #f4c24f; font-weight: 900; }.market-news { position: absolute; left: 14px; right: 14px; bottom: 12px; padding: 10px; border: 2px solid #e9dcc5; border-radius: 10px; background: rgb(255 253 248 / 94%); color: var(--ink); font-weight: 850; }.trade-console { display: flex; flex-direction: column; padding: 13px; border: 3px solid var(--line); border-radius: 18px; background: #f5eddd; gap: 9px; }.trade-console dl { margin: 0; }.trade-console dl div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #d8cdbb; }.trade-console dt { color: var(--ink-soft); font-size: 12px; }.trade-console dd { margin: 0; font-weight: 900; }.trade-buttons { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; gap: 7px; }.trade-buttons button { min-height: 52px; border: 2px solid var(--line); border-radius: 11px; color: #fff; font-weight: 950; }.trade-buttons .buy { background: var(--red); }.trade-buttons .sell { background: var(--blue); }.trade-buttons .all { grid-column: span 2; background: var(--ink); }.market-timer { height: 12px; overflow: hidden; border: 2px solid var(--line); border-radius: 999px; background: #fff; }.market-timer i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.settlement-list { margin: 20px 0; padding: 0; list-style: none; }.settlement-list li { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #e4d9c8; }.settlement-list strong.positive { color: var(--red-deep); }.settlement-list strong.negative { color: var(--blue); }.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.item-choice { min-height: 128px; padding: 12px; border: 2px solid var(--line); border-radius: 13px; background: #fff9eb; }.item-choice b,.item-choice small { display: block; }.item-choice small { margin-top: 6px; color: var(--ink-soft); line-height: 1.3; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); max-width: min(90vw, 520px); padding: 12px 18px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--ink); box-shadow: 0 8px 24px rgb(0 0 0 / 28%); font-size: 13px; font-weight: 850; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: .22s ease; }.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* Result */
.result-screen { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr); max-width: 1440px; margin: auto; padding: clamp(18px, 4vw, 58px); gap: clamp(22px, 4vw, 60px); }
.result-visual { position: relative; align-self: center; min-height: min(78svh, 780px); overflow: hidden; border: 3px solid var(--line); border-radius: 38px; background: linear-gradient(#f6d79c 0 64%, #af7148 64%); box-shadow: var(--hard-shadow); }.result-visual[data-result-tone="success"] { background: linear-gradient(#9ed4c3 0 64%, #d3a55c 64%); }.result-visual[data-result-tone="failure"] { background: linear-gradient(#7c8b91 0 64%, #55473d 64%); }.result-day-badge { position: absolute; z-index: 5; top: 25px; left: 25px; padding: 9px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 950; }.result-room-art { position: absolute; inset: 0; }.result-door { position: absolute; right: 10%; bottom: 12%; width: 34%; height: 63%; border: 4px solid var(--line); background: #739578; box-shadow: inset 0 0 0 10px #a8bca8; }.result-door::after { content: ""; position: absolute; top: 50%; left: 14%; width: 15px; height: 15px; border: 3px solid var(--line); border-radius: 50%; background: #e4bc58; }.result-person { left: 20%; bottom: 8%; transform: scale(1.35); }.result-prop { position: absolute; left: 10%; right: 10%; bottom: 4%; height: 9%; border-radius: 50%; background: rgb(26 39 34 / 16%); filter: blur(8px); }
.result-copy { align-self: center; padding: clamp(12px, 2vw, 26px); }.result-copy h1 { max-width: 780px; margin: 10px 0 13px; font-size: clamp(50px, 6vw, 92px); line-height: .9; letter-spacing: -.075em; }.result-copy > p:not(.eyebrow,.result-epilogue,.share-status) { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.result-numbers { display: grid; grid-template-columns: 1.45fr 1fr 1fr; margin: 26px 0; gap: 9px; }.result-numbers div { padding: 15px; border-top: 3px solid var(--line); background: rgb(255 253 248 / 55%); }.result-numbers dt { color: var(--ink-soft); font-size: 11px; font-weight: 850; }.result-numbers dd { margin: 5px 0 0; font-size: clamp(19px, 2.4vw, 33px); font-weight: 950; }.result-numbers .primary dd { color: var(--red-deep); }
.ghost-board { padding: 18px; border: 3px solid var(--line); border-radius: 17px; background: #fff7d9; box-shadow: 5px 5px 0 var(--line); }.ghost-board > div { display: flex; justify-content: space-between; align-items: end; gap: 12px; }.ghost-board p,.ghost-board h2 { margin: 0; }.ghost-board p { color: var(--red-deep); font-size: 11px; font-weight: 900; }.ghost-board h2 { font-size: 20px; }.ghost-board ol { margin: 13px 0 8px; padding: 0; list-style: none; counter-reset: ghosts; }.ghost-board li { display: grid; grid-template-columns: 28px 1fr auto; padding: 8px 0; border-top: 1px solid #e4d5ab; counter-increment: ghosts; gap: 8px; }.ghost-board li::before { content: counter(ghosts); display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: 10px; font-weight: 900; }.ghost-board li b { color: var(--red-deep); }.ghost-board small { color: var(--ink-soft); }
.result-epilogue { margin: 20px 0; padding-left: 14px; border-left: 4px solid var(--green); color: var(--ink); font-weight: 800; line-height: 1.55; }.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }.share-status { min-height: 22px; color: var(--green); font-size: 12px; font-weight: 850; }

@media (max-width: 1020px) {
  .intro-screen { grid-template-columns: .8fr 1.2fr; padding: 20px; gap: 18px; }
  .intro-copy h1 { font-size: clamp(58px, 10vw, 100px); }
  .play-layout { grid-template-columns: 1fr; }.room-stage { min-height: 660px; }.action-panel { min-height: 420px; }
  .hud { grid-template-columns: auto 1fr auto; }.hud-day { display: none; }.hud-stats { grid-column: 1 / -1; grid-row: 2; }.play-screen { overflow: visible; }
  .result-screen { grid-template-columns: .85fr 1.15fr; padding: 24px; gap: 28px; }
}

@media (max-width: 720px) {
  body { background: var(--paper); }
  .intro-screen { display: flex; min-height: 100svh; flex-direction: column; padding: 14px 14px 26px; }
  .intro-copy { order: 2; padding: 10px 6px; }.intro-copy h1 { margin: 12px 0 15px; font-size: clamp(62px, 22vw, 102px); }.intro-lede { font-size: 16px; }.intro-rules { margin: 19px 0; }.intro-start { width: 100%; }.intro-scene { order: 1; width: 100%; min-height: 45svh; border-radius: 25px 25px 10px 10px; box-shadow: 5px 6px 0 var(--line); }.intro-poster { font-size: 28px; }.intro-person { left: 7%; bottom: 2%; transform: scale(.7); }.speech-bubble { left: 6%; bottom: 49%; font-size: 13px; }.desk { bottom: 12%; }.sunset-window { top: 8%; }.monitor strong { font-size: 16px; }
  .play-screen { padding: 6px; gap: 6px; }.hud { position: sticky; z-index: 20; top: 4px; grid-template-columns: 1fr auto; min-height: 62px; padding: 7px 9px; border-radius: 14px; gap: 7px; }.brand-lockup strong { font-size: 15px; }.hud-actions { justify-self: end; }.hud-stats { grid-template-columns: repeat(4, 1fr); gap: 0; }.hud-stats div { padding: 5px 4px; }.hud-stats dd { font-size: 13px; }.hud-stats dt { font-size: 9px; }.icon-button { width: 44px; height: 44px; }
  .play-layout { display: flex; flex-direction: column; gap: 6px; }.room-stage { min-height: 610px; border-radius: 19px; }.room-window { left: 30%; width: 43%; }.job-object { left: 3%; width: 112px; }.bank-object { right: 3%; width: 100px; }.phone-object { left: 3%; }.market-object { left: 32%; bottom: 23%; width: 180px; min-height: 145px; }.exit-object { right: 4%; bottom: 10%; width: 104px; }.room-bed { width: 38%; }.player-person { left: 18%; bottom: 10%; transform: scale(.62); }.player-thought { left: 16%; bottom: 49%; }.poster-object { right: 3%; }.event-ticker { left: 7px; right: 7px; bottom: 7px; }.event-ticker span { min-width: 64px; }.event-ticker p { overflow: hidden; padding: 8px; font-size: 11px; text-overflow: ellipsis; }
  .action-panel { min-height: auto; padding: 20px 14px; border-radius: 19px; }.phase-heading h2 { font-size: 32px; }.action-card { grid-template-columns: 42px minmax(0,1fr) auto; }.obligation-ledger ul { max-height: 180px; }
  .dialog-shell { padding: 24px 15px 20px; border-radius: 20px; }.choice-grid,.stock-grid { grid-template-columns: 1fr; }.risk-controls { grid-template-columns: 1fr; }.trading-layout { grid-template-columns: 1fr; }.chart-card,.chart-card canvas { min-height: 280px; height: 280px; }.trade-console { min-height: 250px; }.item-grid { grid-template-columns: 1fr; }.segmented { grid-template-columns: repeat(4, 1fr); }
  .result-screen { display: flex; flex-direction: column; padding: 10px 12px 28px; }.result-visual { min-height: 52svh; border-radius: 25px; box-shadow: 5px 6px 0 var(--line); }.result-person { left: 16%; bottom: 5%; transform: scale(.9); }.result-copy { padding: 14px 2px; }.result-copy h1 { font-size: clamp(48px, 16vw, 78px); }.result-numbers { grid-template-columns: 1.4fr 1fr; }.result-numbers div:last-child { grid-column: span 2; }.result-actions { display: grid; grid-template-columns: 1fr 1fr; }.result-actions .primary-button { grid-column: span 2; }.ghost-board > div { display: block; }.ghost-board h2 { margin-top: 3px; }
}

@media (max-width: 390px) {
  .room-stage { min-height: 570px; }.market-object { left: 29%; width: 165px; }.bank-object { top: 48%; }.poster-object { top: 4%; }.player-person { left: 13%; }.room-box { display: none; }.intro-start small { display: none; }
}

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

@keyframes money-pop { 0% { transform: translateY(0) scale(.7); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-80px) scale(1.1); opacity: 0; } }
@keyframes room-bump { 50% { transform: translateY(-5px) rotate(-1deg); } }
.money-pop { position: fixed; z-index: 200; color: var(--red-deep); font-size: 22px; font-weight: 950; pointer-events: none; animation: money-pop .8s ease forwards; }
.room-bump { animation: room-bump .28s ease; }

/* AAA visual pass: original KOPI LIFE broadcast-room system.
   Radius rule: 16px surfaces, 12px controls, pills only for compact status. */
:root {
  --paper: #ece7dc;
  --paper-deep: #d7d0c3;
  --white: #f9f6ef;
  --ink: #17211f;
  --ink-soft: #5b6662;
  --line: #1d2a27;
  --red: #d94a3f;
  --red-deep: #aa302b;
  --blue: #32698e;
  --green: #35745d;
  --gold: #dfa930;
  --shadow: 0 18px 54px rgb(31 40 36 / 16%);
  --hard-shadow: 7px 7px 0 var(--line);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --radius: 16px;
}

html, body { max-width: 100%; overflow-x: clip; }
body {
  background:
    linear-gradient(115deg, rgb(255 255 255 / 58%), transparent 45%),
    var(--paper);
}
.game-shell, .screen { min-height: 100dvh; }
.screen { width: 100%; }

.primary-button, .secondary-button, .text-button, .icon-button,
.room-object, .action-card, .choice-button, .stock-choice, .segmented button,
.trade-buttons button, .item-choice, .minigame-button {
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.primary-button:active, .secondary-button:active, .icon-button:active,
.room-object:not(:disabled):active, .action-card:active, .choice-button:active,
.stock-choice:active, .segmented button:active, .trade-buttons button:active,
.item-choice:active, .minigame-button:active {
  transform: scale(.97);
}
.primary-button, .secondary-button { border-radius: 12px; }
.primary-button { background: var(--red); box-shadow: 4px 4px 0 var(--line); }
.secondary-button { background: var(--white); }

/* Generated sprite sheets */
.protagonist-sprite, .clown-sprite {
  position: absolute;
  z-index: 4;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 12px 16px rgb(24 32 29 / 20%));
}
.protagonist-sprite {
  background-image: url("./assets/characters/protagonist-sheet.webp");
  background-size: 300% 200%;
}
.clown-sprite {
  background-image: url("./assets/characters/kopi-clown-sheet.webp");
  background-size: 200% 200%;
}
.pose-sit, [data-pose="sit"] { background-position: 0 0; }
.pose-phone, [data-pose="phone"] { background-position: 50% 0; }
.pose-cheer, [data-pose="cheer"] { background-position: 100% 0; }
.pose-crash, [data-pose="crash"] { background-position: 0 100%; }
.pose-tired, [data-pose="tired"] { background-position: 50% 100%; }
.pose-exit, [data-pose="exit"] { background-position: 100% 100%; }
.clown-tip { background-position: 0 0; }
.clown-crash { background-position: 100% 0; }
.clown-whisper { background-position: 0 100%; }
.clown-clap { background-position: 100% 100%; }

/* Intro: compact broadcast poster plus a real game scene */
.intro-screen {
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  width: min(100%, 1460px);
  min-height: 100dvh;
  padding: clamp(18px, 3vw, 44px);
  gap: clamp(24px, 3vw, 48px);
}
.intro-copy { align-self: center; padding: clamp(8px, 2vw, 28px); }
.intro-copy h1 {
  max-width: 7ch;
  margin: 14px 0 18px;
  font-size: clamp(64px, 7.3vw, 112px);
  line-height: .86;
  letter-spacing: -.085em;
}
.intro-lede { max-width: 24ch; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.48; }
.intro-rules { margin: 22px 0; }
.intro-rules span { border-radius: 999px; background: rgb(249 246 239 / 82%); }
.intro-start { width: min(100%, 380px); }
.intro-start small { max-width: 15ch; text-align: right; }
.intro-scene {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  background: #3a3029;
  box-shadow: var(--hard-shadow);
}
.intro-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgb(16 24 22 / 8%) 15%, transparent 58%, rgb(16 24 22 / 24%));
  pointer-events: none;
}
.intro-room-plate, .room-plate, .result-room-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-room-plate { filter: saturate(.9) contrast(1.02); }
.intro-protagonist { left: 4%; bottom: -8%; width: 49%; background-position: 0 0; }
.intro-clown { z-index: 3; top: -5%; right: -7%; width: 34%; rotate: 5deg; }
.speech-bubble {
  z-index: 6;
  left: 29%;
  bottom: 46%;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: clamp(13px, 1.25vw, 18px);
  box-shadow: 3px 3px 0 var(--line);
}
.intro-market-stamp {
  position: absolute;
  z-index: 5;
  right: 4%;
  bottom: 4%;
  display: grid;
  padding: 10px 13px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: rgb(249 246 239 / 93%);
  rotate: -2deg;
  box-shadow: 3px 3px 0 var(--red);
}
.intro-market-stamp small { color: var(--ink-soft); font-size: 10px; font-weight: 850; }
.intro-market-stamp strong { color: var(--red-deep); font-size: 17px; }
.sunset-window, .intro-poster, .desk, .floor-shadow, .css-person { display: none; }

/* One-screen game shell */
.play-screen {
  width: min(100%, 1600px);
  margin: auto;
  min-height: 100dvh;
  padding: 10px;
  gap: 10px;
}
.hud {
  grid-template-columns: auto auto minmax(170px, .62fr) minmax(390px, 1fr) auto;
  min-height: 78px;
  border-radius: 16px;
  background: rgb(249 246 239 / 96%);
  box-shadow: 0 6px 0 rgb(29 42 39 / 10%);
}
.day-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-width: 170px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 10px;
  list-style: none;
}
.day-rail li {
  display: grid;
  min-height: 32px;
  place-items: center;
  border-left: 1px solid rgb(29 42 39 / 22%);
  color: var(--ink-soft);
  background: #e4dfd4;
  font-size: 10px;
  font-weight: 950;
}
.day-rail li:first-child { border-left: 0; }
.day-rail li[data-state="done"] { color: var(--white); background: var(--ink); }
.day-rail li[data-state="current"] { color: var(--white); background: var(--red); }
.play-layout {
  grid-template-columns: minmax(0, 1.63fr) minmax(320px, .67fr);
  min-height: 0;
  gap: 10px;
}
.room-stage, .action-panel {
  height: calc(100dvh - 108px);
  min-height: 580px;
  max-height: 820px;
  border-radius: 16px;
}
.room-stage { background: #40352e; box-shadow: var(--shadow); }
.room-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(12 20 18 / 4%), transparent 60%, rgb(12 20 18 / 34%));
  pointer-events: none;
}
.room-plate { z-index: 0; object-position: center; transition: filter 220ms var(--ease-out); }
.room-wall, .room-floor { position: absolute; inset: 0; z-index: 2; border: 0; background: none; pointer-events: none; }
.room-wall::after, .room-window, .wall-crack, .poster-object, .room-bed, .room-box { display: none !important; }
.room-object {
  min-height: 68px;
  padding: 8px 10px;
  border-width: 2px;
  border-radius: 12px;
  background: rgb(249 246 239 / 92%);
  box-shadow: 3px 3px 0 var(--line);
  backdrop-filter: blur(5px);
  pointer-events: auto;
}
.room-object .object-icon { font-size: 26px; }
.room-object b { margin-top: 2px; font-size: 12px; }
.room-object small { font-size: 9px; }
.job-object { top: 7%; left: 4%; width: 150px; background: rgb(250 229 174 / 94%); }
.phone-object { top: 43%; left: 4%; width: 116px; }
.bank-object { top: 7%; right: 4%; width: 128px; background: rgb(214 225 231 / 94%); }
.market-object {
  top: 39%;
  left: 38%;
  bottom: auto;
  width: 224px;
  min-height: 128px;
  border-color: #711f1b;
  color: var(--white);
  background: linear-gradient(145deg, #e45446, #b8322d);
  box-shadow: 5px 6px 0 var(--line), inset 0 1px rgb(255 255 255 / 24%);
}
.market-object .market-screen-mini {
  height: 52px;
  border-color: #f5d7c6;
  background: #1d2a27;
}
.market-object b { color: #fff; font-size: 17px; letter-spacing: -.025em; }
.market-object small { color: #ffe4d2; font-size: 10px; font-weight: 850; }
.market-object:disabled {
  opacity: .9;
  filter: saturate(.58) contrast(.98);
}
.market-object:not(:disabled) {
  box-shadow: 5px 6px 0 var(--line), 0 0 0 5px rgb(217 74 63 / 22%);
}
.market-screen-mini { height: 60px; }
.exit-object { top: 47%; right: 4%; bottom: auto; width: 126px; background: rgb(230 235 226 / 94%); }
.player-person { z-index: 4; left: 20%; bottom: 4%; width: min(29%, 280px); transform: none; }
.player-thought { z-index: 7; left: 21%; bottom: 38%; border-radius: 11px; }
.event-ticker { z-index: 8; border-radius: 10px; box-shadow: 3px 3px 0 var(--line); }
.event-ticker span { min-width: 86px; }
.room-stage[data-room-level="3"] .room-plate { filter: saturate(.82) brightness(.92); }
.room-stage[data-room-level="4"] .room-plate { filter: saturate(.7) brightness(.84); }
.room-stage[data-room-level="5"] .room-plate,
.room-stage[data-room-level="6"] .room-plate { filter: saturate(.52) brightness(.72) contrast(1.06); }

.action-panel { padding: clamp(16px, 1.8vw, 25px); border-radius: 16px; background: var(--white); }
.phase-heading h2 { max-width: 10ch; font-size: clamp(29px, 2.7vw, 40px); }
.action-cards { margin: 18px 0; gap: 8px; }
.action-card { border-radius: 12px; background: #f6f0e4; }
.action-card .card-icon { border-radius: 9px; }
.obligation-ledger { border-top-style: solid; }

/* Dialogs are rare, so a short centered entrance clarifies the state change. */
.game-dialog::backdrop { background: rgb(17 25 23 / 76%); backdrop-filter: blur(7px); }
.dialog-shell { border-radius: 16px; box-shadow: 8px 9px 0 rgb(10 18 16 / 60%); }
.game-dialog[open] .dialog-shell { animation: dialog-enter 220ms var(--ease-out) both; }
.dialog-close, .choice-button, .stock-choice, .risk-group, .chart-card, .trade-console, .item-choice, .minigame-stage { border-radius: 12px; }
.stock-choice[data-selected="true"] { background: #f7ddb0; box-shadow: 4px 4px 0 var(--line); }
.toast { border-radius: 12px; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }

/* Result: a readable broadcast ending card, not a marketing layout. */
.result-screen {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  width: min(100%, 1440px);
  min-height: 100dvh;
  padding: clamp(14px, 2.2vw, 34px);
  gap: clamp(24px, 3vw, 46px);
}
.result-visual {
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  background: #3b312b;
  box-shadow: var(--hard-shadow);
}
.result-room-plate { object-position: 58% center; filter: saturate(.72) brightness(.76); }
.result-room-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, transparent 35%, rgb(18 25 23 / 45%));
}
.result-day-badge { border-radius: 999px; }
.result-person { z-index: 3; left: -5%; bottom: -4%; width: 76%; }
.result-clown { z-index: 2; top: 13%; right: -13%; width: 56%; }
.result-scrim { position: absolute; inset: auto 0 0; z-index: 2; height: 24%; background: linear-gradient(transparent, rgb(20 29 26 / 52%)); }
.result-visual[data-result-tone="coward"] .result-person { background-position: 100% 100%; }
.result-visual[data-result-tone="coward"] .result-clown { background-position: 100% 100%; }
.result-visual[data-result-tone="failure"] .result-person { background-position: 0 100%; }
.result-visual[data-result-tone="failure"] .result-clown { background-position: 100% 0; }
.result-visual[data-result-tone="success"] .result-person { background-position: 100% 0; }
.result-visual[data-result-tone="success"] .result-clown { background-position: 0 0; }
.result-copy { min-width: 0; padding: clamp(4px, 1.5vw, 20px); }
.result-copy h1 { margin: 9px 0 12px; font-size: clamp(46px, 5.2vw, 76px); line-height: .94; }
.result-copy > p:not(.eyebrow,.result-epilogue,.share-status) { margin: 0; }
.result-numbers { margin: 16px 0; }
.result-numbers div { background: rgb(249 246 239 / 72%); }
.ghost-board { border-radius: 14px; background: #f5e5b6; box-shadow: 4px 4px 0 var(--line); }
.ghost-board { padding: 14px; }
.ghost-board ol { margin: 9px 0 6px; }
.ghost-board li { padding: 6px 0; }
.result-epilogue { margin: 14px 0; }
.result-actions { flex-wrap: nowrap; }
.result-actions button { white-space: nowrap; }
.share-status { margin: 6px 0 0; }

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover, .secondary-button:hover, .icon-button:hover { transform: translateY(-2px); }
  .room-object:not(:disabled):hover { transform: translateY(-4px) rotate(-1deg); }
  .action-card:hover { transform: translateX(-3px); background: #f4e2b8; }
}
@media (hover: none) {
  .primary-button:hover, .secondary-button:hover, .icon-button:hover,
  .room-object:not(:disabled):hover, .action-card:hover { transform: none; filter: none; }
}

@media (max-width: 1180px) {
  .hud { grid-template-columns: auto auto 1fr auto; }
  .day-rail { display: none; }
  .play-layout { grid-template-columns: minmax(0, 1.48fr) minmax(300px, .72fr); }
}

@media (max-height: 760px) and (min-width: 721px) {
  .result-screen { padding: 16px 28px; gap: 30px; }
  .result-copy h1 { margin: 6px 0 8px; font-size: clamp(42px, 4.6vw, 62px); }
  .result-copy > p:not(.eyebrow,.result-epilogue,.share-status) { font-size: 14px; }
  .result-numbers { margin: 11px 0; }
  .result-numbers div { padding: 10px; }
  .result-numbers dd { font-size: clamp(18px, 2vw, 27px); }
  .ghost-board { padding: 10px 13px; }
  .ghost-board ol { margin: 6px 0 4px; }
  .ghost-board li { padding: 4px 0; }
  .result-epilogue { margin: 10px 0; font-size: 13px; line-height: 1.4; }
  .result-actions button { min-height: 48px; padding-block: 10px; }
  .share-status { min-height: 16px; margin-top: 2px; }
}

@media (max-width: 1020px) {
  .intro-screen { grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr); }
  .play-layout { grid-template-columns: 1fr; }
  .room-stage, .action-panel { height: auto; max-height: none; }
  .room-stage { min-height: 620px; }
  .action-panel { min-height: 440px; }
  .result-screen { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

@media (max-width: 720px) {
  .intro-screen { display: flex; min-height: 100dvh; height: auto; padding: 15px 14px 28px; gap: 18px; overflow: visible; }
  .intro-copy { order: 1; flex: 0 0 auto; width: 100%; padding: 9px 3px; }
  .intro-copy h1 { margin: 9px 0 12px; font-size: clamp(54px, 16vw, 70px); }
  .intro-lede { max-width: 100%; font-size: 14px; overflow-wrap: anywhere; }
  .intro-rules { margin: 15px 0; gap: 6px; }
  .intro-rules span { padding: 7px 10px; font-size: 12px; }
  .save-actions { flex-wrap: wrap; }
  .intro-scene { order: 2; flex: 0 0 auto; width: 100%; min-height: 0; aspect-ratio: 5 / 4; border-radius: 16px; }
  .intro-room-plate { object-position: 56% center; }
  .intro-protagonist { left: -2%; bottom: -7%; width: 60%; }
  .intro-clown { top: -3%; right: -12%; width: 42%; }
  .speech-bubble { left: 28%; bottom: 43%; font-size: 12px; }
  .intro-market-stamp { right: 3%; bottom: 3%; }
  .intro-start { min-height: 58px; }

  .hud {
    grid-template-columns: minmax(92px, 1fr) auto auto;
    grid-template-areas:
      "brand day actions"
      "stats stats stats";
    border-radius: 12px;
    gap: 5px 8px;
  }
  .brand-lockup { grid-area: brand; min-width: 0; }
  .hud-day {
    display: block;
    grid-area: day;
    min-width: 0;
    padding-left: 8px;
  }
  .hud-day small { display: none; }
  .hud-day strong { font-size: 14px; white-space: nowrap; }
  .hud-stats { grid-area: stats; }
  .hud-actions { grid-area: actions; }
  .play-screen { padding: 5px; gap: 5px; }
  .play-layout { gap: 5px; }
  .room-stage {
    width: 100%;
    height: clamp(340px, 43svh, 380px);
    min-height: 0;
    max-height: none;
    border-radius: 14px;
  }
  .room-plate { object-position: 53% center; }
  .room-object { min-height: 49px; padding: 5px 7px; border-radius: 9px; }
  .room-object .object-icon { font-size: 19px; }
  .room-object b { font-size: 10px; }
  .room-object small { font-size: 8px; }
  .job-object { top: 4%; left: 2%; width: 104px; }
  .bank-object { top: 4%; right: 2%; width: 98px; }
  .phone-object { top: 44%; left: 2%; width: 91px; }
  .phone-screen { width: 30px; height: 39px; padding: 6px 4px; border-width: 2px; gap: 3px; }
  .market-object { top: 29%; left: 28%; width: 164px; min-height: 88px; padding: 6px 8px; }
  .market-object .market-screen-mini { height: 30px; }
  .market-object .market-screen-mini::before { top: 5px; left: 7px; font-size: 8px; }
  .market-object .market-screen-mini i { bottom: 4px; height: 19px; }
  .market-object b { margin-top: 4px; font-size: 14px; }
  .market-object small { font-size: 8px; }
  .exit-object { top: 45%; right: 2%; width: 91px; }
  .player-person { left: 16%; bottom: 7%; width: 34%; }
  .player-thought {
    right: 10px;
    bottom: 55px;
    left: 10px;
    padding: 6px 9px;
    overflow: hidden;
    font-size: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .player-thought::after { display: none; }
  .event-ticker { min-height: 40px; }
  .action-panel { min-height: 0; padding: 13px 12px 16px; border-radius: 14px; }
  .phase-heading h2 { margin: 5px 0 6px; font-size: 29px; }
  .phase-heading p:last-child { font-size: 12px; line-height: 1.4; }
  .action-cards { margin: 11px 0; gap: 6px; }
  .action-card { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 66px; padding: 7px 8px; gap: 8px; }
  .action-card .card-icon { width: 38px; height: 38px; font-size: 19px; }
  .action-card b { font-size: 12px; }
  .action-card small { font-size: 10px; }
  .action-card .card-value { font-size: 11px; }
  .obligation-ledger { padding-top: 12px; }
  .game-dialog { position: fixed; inset: auto 0 0; width: 100vw; max-width: none; max-height: 94dvh; margin: 0; }
  .dialog-shell { max-height: 94dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 34px rgb(12 20 18 / 30%); }
  .result-screen { display: flex; padding: 10px 12px 28px; gap: 18px; }
  .result-visual { min-height: 0; aspect-ratio: 5 / 4; border-radius: 16px; }
  .result-room-plate { object-position: 55% center; }
  .result-person { left: -2%; bottom: -12%; width: 62%; }
  .result-clown { top: -4%; right: -8%; width: 43%; }
  .result-copy h1 { font-size: clamp(43px, 13.5vw, 68px); }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .intro-start small { display: none; }
  .room-stage { height: clamp(330px, 42svh, 360px); min-height: 0; }
  .market-object { left: 27%; width: 164px; }
  .player-person { left: 14%; width: 35%; }
  .event-ticker span { min-width: 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro-copy > * { animation: intro-rise 520ms var(--ease-out) both; }
  .intro-copy > :nth-child(2) { animation-delay: 45ms; }
  .intro-copy > :nth-child(3) { animation-delay: 90ms; }
  .intro-copy > :nth-child(4) { animation-delay: 135ms; }
  .intro-copy > :nth-child(5) { animation-delay: 180ms; }
  .intro-clown { animation: clown-peek 3.6s var(--ease-in-out) infinite alternate; }
}

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes clown-peek {
  from { transform: translate3d(8px, 0, 0) rotate(2deg); }
  to { transform: translate3d(-3px, 5px, 0) rotate(-1deg); }
}
@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}