/* ชะตาสยาม — Fortunes of Siam · Phase 1 test page (landscape first). Offline: system Thai fonts only. */
:root {
  --paper: #f4ead6; --paper-2: #ebdcc0; --ink: #2b1d12; --ink-soft: #6b5440;
  --teak: #5a3519; --teak-dark: #3a210e; --gold: #c4952f; --gold-soft: #e7c873;
  --lacquer: #9b2d20; --jade: #2f6b55; --line: rgba(58, 33, 14, .22);
  --shadow: 0 2px 10px rgba(40, 20, 5, .18);
  --radius: 10px;
  font-family: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", sans-serif;
  color: var(--ink); background: var(--teak-dark);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(circle at 30% 0%, #6d4220 0%, var(--teak-dark) 70%); min-height: 100%; }
button, select, input { font: inherit; }
button {
  cursor: pointer; border: 1px solid var(--teak); background: linear-gradient(#fff8ea, var(--paper-2)); color: var(--ink);
  border-radius: 8px; padding: 6px 12px; min-height: 36px; line-height: 1.2;
}
button:hover:not(:disabled) { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(196,149,47,.25); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(#b3402f, var(--lacquer)); color: #fff7e6; border-color: #6e1d14; }
button.gold { background: linear-gradient(#f2d98b, var(--gold)); border-color: #8a6516; }
button.ghost { background: transparent; border-color: var(--line); }
button.active { background: var(--teak); color: var(--gold-soft); border-color: var(--gold); }
input, select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fffaf0; min-height: 36px; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; }
.muted { color: var(--ink-soft); font-size: .88em; }
.tag { display: inline-block; font-size: .75em; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); background: #fff6e2; white-space: nowrap; }
.tag.draft { background: #fff1c9; border-color: #d9b45a; }
.tag.dead { background: #e6ddd2; color: #6b5d50; }
.tag.red { background: #f6d9d2; border-color: #c97b6b; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }

/* portraits built from real assets (layers use manifest offsets) */
.portrait { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff5df, #e5d1ab); border-radius: 8px; border: 1px solid var(--line); }
.portrait img { position: absolute; display: block; user-select: none; pointer-events: none; }
.portrait.single img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.portrait.deceased { filter: grayscale(1) contrast(.9); }

/* new game */
.title-screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.title-card { width: min(1100px, 100%); display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; }
.brand { text-align: center; color: var(--gold-soft); margin-bottom: 10px; }
.brand h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: .02em; margin: 0; color: #f7e3a9; text-shadow: 0 2px 0 #2a1508; }
.brand .en { font-size: clamp(14px, 1.6vw, 18px); letter-spacing: .3em; text-transform: uppercase; color: #d9b864; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.form-grid label { display: grid; gap: 4px; font-size: .9em; }
.members-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.members-prev .portrait { height: 140px; }

/* main layout — landscape */
.shell { height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: linear-gradient(var(--teak), var(--teak-dark)); color: #f6e7c4; border-bottom: 2px solid var(--gold); }
.topbar .game-title { font-weight: 700; color: var(--gold-soft); white-space: nowrap; }
.topbar .date { font-weight: 600; font-variant-numeric: tabular-nums; }
.topbar button { min-height: 32px; padding: 4px 10px; }
.clock { display: flex; gap: 4px; align-items: center; }
.layout { display: grid; grid-template-columns: minmax(230px, 280px) minmax(320px, 1fr) minmax(260px, 340px); gap: 10px; padding: 10px; min-height: 0; }
.col { min-height: 0; overflow: auto; }
.member { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; background: transparent; width: 100%; text-align: left; min-height: 0; }
.member:hover, .member.sel { border-color: var(--gold); background: #fff5df; }
.member .portrait { width: 56px; height: 72px; }
.detail-head { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.detail-head .portrait { width: 150px; height: 210px; }
.stat { display: grid; grid-template-columns: 52px 1fr 64px; gap: 6px; align-items: center; font-size: .9em; }
.bar { height: 8px; background: #e2d2b2; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), #58a084); }
.bar.apt > i { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.section { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.log { font-size: .88em; display: grid; gap: 4px; }
.log div { padding: 4px 6px; border-left: 3px solid var(--gold); background: #fff8ea; border-radius: 4px; }
.npc-house { margin-bottom: 10px; }
.npc-row { display: flex; gap: 6px; }
.npc-row .p { width: 33%; text-align: center; font-size: .8em; }
.npc-row .portrait { height: 96px; }
.goal { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf0; margin-bottom: 6px; font-size: .9em; }
.err { color: var(--lacquer); font-weight: 600; }
.okmsg { color: var(--jade); font-weight: 600; }
.cand { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.cand .portrait { width: 44px; height: 58px; }

/* modal: exactly one at a time (story queue head) */
.modal-back { position: fixed; inset: 0; background: rgba(25, 12, 4, .62); display: grid; place-items: center; padding: 12px; z-index: 50; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 24px); overflow: auto; }
.modal .portraits { display: flex; gap: 10px; flex-wrap: wrap; }
.modal .portraits .portrait { width: 96px; height: 130px; }
.night { background: linear-gradient(#1b1430, #3a2340); color: #f1e3c8; }
.night .muted { color: #cdb9a0; }

/* tutorial */
.tut { min-height: 100vh; display: grid; place-items: center; padding: 14px; }
.tut .card { width: min(1000px, 100%); }
.tut-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; }
.narr { white-space: pre-line; font-size: 1.02em; line-height: 1.7; }
.speaker { font-weight: 700; color: var(--teak); }
.steps { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.steps span { font-size: .75em; padding: 2px 8px; border-radius: 99px; background: #e9dcc2; }
.steps span.done { background: var(--jade); color: #fff; }
.steps span.cur { background: var(--gold); }

.rotate { position: fixed; inset: 0; z-index: 80; background: rgba(20,10,3,.92); color: #f4e2b8; display: grid; place-items: center; text-align: center; padding: 24px; }
.toast { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 90; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: #fff3d6; box-shadow: var(--shadow); max-width: 90vw; }

@media (max-width: 1100px) { .layout { grid-template-columns: 220px 1fr 260px; } .detail-head { grid-template-columns: 110px 1fr; } .detail-head .portrait { width: 110px; height: 154px; } }
/* small landscape phones: compact everything so all controls stay reachable */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { padding: 4px 8px; gap: 6px; font-size: .85em; }
  .topbar button { min-height: 28px; padding: 2px 8px; }
  .layout { grid-template-columns: 190px 1fr 230px; gap: 6px; padding: 6px; font-size: .88em; }
  .member { grid-template-columns: 40px 1fr; } .member .portrait { width: 40px; height: 52px; }
  .detail-head { grid-template-columns: 90px 1fr; } .detail-head .portrait { width: 90px; height: 126px; }
  .tut-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .layout { grid-template-columns: 1fr; } .title-card { grid-template-columns: 1fr; } .tut-grid { grid-template-columns: 1fr; }
}
.topbar .tag { color: var(--ink); }
.night button.ghost { color: #f1e3c8; border-color: rgba(241,227,200,.45); }
.night .tag, .steps span { color: var(--ink); }
.steps span.done { color: #fff; }
/* Phase 2 economy panels */
img.ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
img.ic2 { width: 40px; height: 40px; display: block; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.bcard { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fffaf0; font-size: .9em; }
.bcard.wide { grid-column: 1 / -1; margin-bottom: 10px; }
.bcard .bimg { width: 100%; height: 110px; object-fit: contain; background: radial-gradient(circle at 50% 60%, #f3e6c8, #e3d0a8); border-radius: 6px; display: block; margin-bottom: 4px; }
.bcard.wide .bimg { width: 160px; height: 100px; float: right; margin-left: 8px; }
.mrow { display: grid; grid-template-columns: 56px minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: .9em; }
.mrow .portrait { width: 48px; height: 62px; }
.mrow .quote { grid-column: 2 / -1; }
.gimg { width: 52px; height: 52px; object-fit: contain; }
.quote { font-size: .85em; background: #f6ecd6; border-radius: 6px; padding: 6px 8px; margin: 6px 0; line-height: 1.55; }
.why { font-size: .78em; color: var(--lacquer); }
.tbl { width: 100%; border-collapse: collapse; font-size: .82em; margin: 6px 0; }
.tbl td, .tbl th { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: right; }
.tbl td:first-child, .tbl th:first-child { text-align: left; }
.topbar img.ic { filter: invert(.9) sepia(.4); }
.mrow > .row { flex-wrap: nowrap; align-items: flex-start; }
.mrow > .row > .why { max-width: 140px; }

/* Phase 3 minimal UI */
.scene-bg { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }
.story-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fffaf0; }
.story-card.unread { border-color: var(--gold); box-shadow: 0 0 0 2px #f3d48a inset; }
.story-card h2 { font-size: 1.05em; margin: 4px 0; }
.story-card .narr { font-size: .92em; }
.choice { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; background: #fffaf0; }
.choice.off { opacity: .72; }
.warn { color: #8a3b1f; font-weight: 600; }
.news.unread { border-left-color: #c0392b !important; }
.news.sev3 { background: #fbe7dc !important; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.bgrid .scene-bg { display: none; }
.speaker { font-weight: 700; color: #6b3a12; }

/* ───────── Phase 4: landscape shell (header resources · news left · scene centre · details right · time/menu bottom) ───────── */
.shell.p4 { height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.shell.p4 .topbar { padding-top: max(6px, env(safe-area-inset-top)); }
.bottombar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 12px; padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: linear-gradient(var(--teak-dark), var(--teak)); color: #f6e7c4; border-top: 2px solid var(--gold); }
.bottombar .muted { color: #e2cfa6; }
.bottombar .tag { color: var(--ink); }
.shell.p4 .layout { grid-template-columns: minmax(220px, 270px) minmax(340px, 1fr) minmax(250px, 330px); }
.bottombar button, .clock button, .pin, .place, .p4-panel button, .hint button, .return-bar button, [data-act="ctab"], [data-act="tab"] { min-height: 44px; min-width: 44px; }
.filebtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--gold); border-radius: 8px; cursor: pointer; }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn:focus-within { outline: 2px solid var(--gold-soft); }

/* scene: one coordinate box = image + pins + props share the image's own aspect ratio (contain, never cover) */
.scene-head { margin-bottom: 6px; }
.scene-wrap { width: 100%; display: flex; justify-content: center; }
.scene-box { position: relative; width: 100%; max-height: calc(100dvh - 260px); max-width: calc((100dvh - 260px) * 3000 / 1100); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); background: #3a2a1a; }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-box .pin { position: absolute; transform: translate(-50%, -100%); border: 1px solid #f3dfb3; border-radius: 6px; background: #493a2eea; color: #fff5de;
  box-shadow: 0 2px 8px #24190b55; padding: 4px 10px; font-size: clamp(11px, 1.1vw, 14px); white-space: nowrap; z-index: 2; }
.scene-box .pin.home { background: #8a2b1eee; }
.scene-box .pin.bld { background: #2f6b55ee; transform: translate(-50%, -50%); }
.scene-box .pin:focus-visible { outline: 3px solid var(--gold-soft); }
.estate-layer { position: absolute; pointer-events: none; user-select: none; height: auto; }
.place-list { margin-top: 8px; }
.place-list summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.place { display: grid; text-align: left; gap: 2px; }

/* Phase 4 panels (upgrade page, help): visible close button, internal scroll, footer always reachable */
.p4-back { position: fixed; inset: 0; background: rgba(25, 12, 4, .55); z-index: 40; }
.p4-panel { position: fixed; z-index: 41; top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right));
  width: min(680px, calc(100vw - 16px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 10px; }
.p4-panel:focus { outline: none; }
.p4-panel-head h2 { margin: 0; }
.p4-body { overflow: auto; min-height: 0; padding-right: 4px; }
.p4-panel-foot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; }
.upg-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.upg-levels .bimg { width: 100%; height: 110px; object-fit: contain; background: radial-gradient(circle at 50% 60%, #f3e6c8, #e3d0a8); border-radius: 6px; display: block; margin-bottom: 4px; }
.tbl-wrap { overflow-x: auto; }
.tbl.upg td, .tbl.upg th { text-align: right; padding: 4px 6px; }
.src { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.src ul { margin: 4px 0; padding-left: 18px; }
.src li { margin-bottom: 6px; }
.return-bar { background: #fff1c9; border: 1px solid #d9b45a; border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.mrow.focus { outline: 3px solid var(--gold); border-radius: 6px; background: #fff4d6; }
.hint { background: #fff6dc; border-color: #d9b45a; margin: 8px 0; font-size: .92em; }
.hint p { margin: 4px 0; }
.warnbox { background: #fff1c9; border-color: #d9b45a; margin-top: 10px; }
.tbl.feat td, .tbl.feat th { text-align: left; vertical-align: top; }
.minilog { font-size: .88em; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.minilog div { padding: 4px 6px; border-left: 3px solid var(--gold); background: #fff8ea; border-radius: 4px; }

@media (max-height: 500px) and (orientation: landscape) {
  .shell.p4 .layout { grid-template-columns: 190px 1fr 230px; }
  .scene-box { max-height: calc(100dvh - 150px); max-width: calc((100dvh - 150px) * 3000 / 1100); }
  .bottombar { padding: 2px 8px; gap: 4px; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .shell.p4 { height: auto; min-height: 100dvh; }
  .shell.p4 .layout { grid-template-columns: 1fr; }
  .shell.p4 .col { overflow: visible; }
  .shell.p4 .center { order: -1; }
  .scene-box { max-height: none; max-width: 100%; }
  .scene-box .pin { font-size: 10px; padding: 2px 5px; min-height: 0; min-width: 0; } /* the place list below is the 44px alternative */
  .upg-levels { grid-template-columns: 1fr; }
  .p4-panel { left: max(6px, env(safe-area-inset-left)); width: auto; }
  .bottombar { position: sticky; bottom: 0; z-index: 30; flex-wrap: nowrap; overflow-x: auto; }
  .bottombar > * { flex: 0 0 auto; }
  .bottombar .grow { display: none; }
}
.modal-back.top { z-index: 60; }
/* image loading / failure (Phase 4 load budget) */
.scene-box .scene-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; background: #2b1d12e6; color: #fff3d6; padding: 8px 14px; border-radius: 8px; text-align: center; }
.scene-box.ready .scene-status { display: none; }
.scene-box.failed .scene-status { display: block; }
.scene-box .scene-status button { margin-left: 6px; }
.img-fail { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 70; background: #6e1d14; color: #fff3d6; padding: 6px 12px; border-radius: 8px; box-shadow: var(--shadow); }
.img-fail button { min-height: 44px; margin-left: 6px; }

/* ───────── v0.5 frame: the scene is the screen · compact HUD · dock with household faces · one drawer at a time ───────── */
.shell.v5 { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 40%, #4a2c14, #1d1108 75%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.hud5 { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: linear-gradient(#3a210ef2, #3a210ec0); color: #fbecc7; white-space: nowrap; overflow-x: auto; z-index: 5; }
.hud5 .fam { color: var(--gold); }
.chip5 { background: #ffffff1a; border: 1px solid #ffffff2a; border-radius: 99px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.chip5 .ic { width: 16px; height: 16px; }
.ib5 { min-width: 44px; min-height: 42px; border-radius: 10px; border: 1px solid #e7c87366; background: #ffffff14; color: #fbecc7; padding: 0 10px; position: relative; }
.ib5.on { background: var(--gold); color: var(--ink); }
.ib5.gold { background: linear-gradient(#f2d98b, #c4952f); color: var(--ink); border-color: #8a6516; }
.ib5:disabled { opacity: .5; }
.dot5 { position: absolute; top: -4px; right: -4px; background: #9b2d20; color: #fff; border-radius: 99px; font-style: normal; font-size: 11px; padding: 0 5px; line-height: 16px; }
.stage5 { position: relative; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 6px; }
.stage5 .scene-head { color: #fbecc7; width: 100%; max-width: calc((100dvh - 150px) * 3000 / 1100); margin: 0 auto 4px; }
.stage5 .scene-head .ghost { background: #ffffff14; color: #fbecc7; border-color: #e7c87366; }
.stage5 .scene-box { max-height: calc(100dvh - 150px); max-width: calc((100dvh - 150px) * 3000 / 1100); }
.stage5 .place-list { color: #fbecc7; width: 100%; max-width: calc((100dvh - 150px) * 3000 / 1100); margin: 6px auto 0; }
.stage5 .place-list .place { background: #fffaf0; }
.stage5 .muted { color: #e2cfa6; }
.hint5 { position: absolute; left: 10px; bottom: 8px; width: min(340px, 46vw); z-index: 4; }
.hint5 .hint { margin: 0; box-shadow: 0 4px 14px #0007; }
.dock5 { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: linear-gradient(#3a210ec0, #3a210ef2); z-index: 5; color: #fbecc7; }
.time5, .nav5, .faces5 { display: flex; gap: 6px; align-items: center; }
.faces5 { flex: 1; justify-content: center; overflow-x: auto; padding: 2px; }
.paused5 { color: #e2cfa6; font-size: 13px; white-space: nowrap; }
.dock5 .tag { white-space: nowrap; }
.face5 { width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 2px solid #f3dfb399; overflow: hidden; background: #f6ead0; flex: 0 0 auto; position: relative; }
.face5.lead { border-color: var(--gold); } .face5.sel { box-shadow: 0 0 0 3px #ffe08a; }
.face5 .portrait.face-pt { position: absolute; inset: 0; border: 0; border-radius: 50%; }
.face5 .portrait.face-pt.layered > div { height: 300% !important; top: -6% !important; }
.face5 .portrait.face-pt.single img { inset: auto; left: 50%; top: 0; width: auto; height: 280%; transform: translateX(-50%); object-fit: initial; }
.scrim5 { position: fixed; inset: 0; background: #0006; z-index: 20; }
.drawer5 { position: fixed; z-index: 21; top: calc(env(safe-area-inset-top) + 6px); bottom: calc(env(safe-area-inset-bottom) + 6px); right: calc(env(safe-area-inset-right) + 6px);
  width: min(560px, calc(100vw - 12px)); background: var(--paper, #f4ead6); color: var(--ink); border-radius: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: 0 6px 24px #0008; }
.dh5 { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid #3a210e22; }
.dh5 .ib5 { color: var(--ink); border-color: #3a210e44; background: #fff8ea; }
.db5 { overflow: auto; padding: 8px 12px 14px; min-height: 0; }
.dtabs { position: sticky; top: -8px; background: var(--paper, #f4ead6); z-index: 2; padding: 4px 0; flex-wrap: nowrap; overflow-x: auto; }
.dtabs button { flex: 0 0 auto; }
.menu5 h3 { margin: 12px 0 6px; } .menu5 h3:first-child { margin-top: 2px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.mgrid > * { min-height: 44px; justify-content: center; }
.scene-box .pin.bld { width: 46px; height: 46px; min-width: 46px; padding: 0; border-radius: 50%; border: 2px solid #f3dfb3; display: grid; place-items: center; font-size: 18px; }
.scene-box .pin.bld .lv { position: absolute; right: -5px; bottom: -5px; background: var(--gold); color: var(--ink); border-radius: 99px; font-size: 11px; min-width: 18px; line-height: 18px; font-weight: 700; }
.scene-box .pin.bld .tip { position: absolute; top: 100%; margin-top: 3px; left: 50%; transform: translateX(-50%); background: #2b1d12d9; color: #fff4dc; font-size: 11px; border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
@media (orientation: portrait) {
  .hide-s { display: none; }
  .stage5 { place-items: start center; }
  .stage5 .scene-box, .stage5 .scene-head, .stage5 .place-list { max-width: 100%; max-height: none; }
  .dock5 { flex-wrap: wrap; justify-content: space-between; }
  .faces5 { order: -1; flex-basis: 100%; }
  .drawer5 { top: auto; left: calc(env(safe-area-inset-left) + 6px); width: auto; max-height: 78dvh; height: 78dvh; }
  .hint5 { position: static; width: 100%; margin-top: 6px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  .hud5 { padding: 2px 6px; font-size: 14px; } .ib5 { min-height: 38px; }
  .dock5 { padding: 2px 6px; } .face5 { width: 40px; height: 40px; }
  .stage5 .scene-box { max-height: calc(100dvh - 100px); max-width: calc((100dvh - 100px) * 3000 / 1100); }
  .stage5 .scene-head, .stage5 .place-list { max-width: calc((100dvh - 100px) * 3000 / 1100); }
}
.stage5 .place .muted, .stage5 .place small { color: #5a4532; }
.hud5 .ic { filter: invert(.88) sepia(.4); }
.hint5-pill { min-height: 40px; border-radius: 99px; border: 1px solid #d9b45a; background: #fff6dcf2; color: var(--ink); padding: 0 14px; box-shadow: 0 3px 10px #0006; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint5 { display: grid; gap: 4px; justify-items: start; }
.hint5-min { justify-self: end; color: var(--ink) !important; background: #fff8ea !important; }
.spdc { display: none; }
@media (orientation: portrait) { .spd { display: none; } .spdc { display: inline-block; } .dock5 { flex-wrap: wrap; } .time5 { flex: 1; } }
/* v0.5 new-game steps */
.t5-wrap { width: min(1000px, 100%); }
.t5 .brand { margin-bottom: 6px; }
.steps5 { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 4px 0 10px; }
.steps5 span { padding: 4px 10px; border-radius: 99px; background: #ffffff1a; color: #e9d8b0; font-size: 14px; }
.steps5 .cur { background: var(--gold); color: var(--ink); font-weight: 700; } .steps5 .done { background: #2f6b55; color: #fff; }
.t5-card { grid-template-columns: minmax(200px, 1fr) 1.3fr; }
.t5-pic { display: grid; align-items: center; }
.pick5 { margin: 10px 0; } .pick5-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pick5-row b { flex: 1; text-align: center; background: #fffaf0; border: 1px solid var(--line); border-radius: 10px; min-height: 44px; display: grid; place-items: center; }
.ib6 { min-width: 48px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff8ea; }
.seg button { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff8ea; } .seg button.on { background: var(--gold); font-weight: 700; }
.namefield { display: grid; gap: 4px; max-width: 320px; } .namefield input { min-height: 44px; font-size: 1.1em; }
.nav6 { margin-top: 16px; } .nav6 button { min-height: 46px; min-width: 120px; }
.t5-foot { margin-top: 10px; justify-content: center; gap: 10px; color: #e9d8b0; } .t5-foot .muted { color: #d8c39a; }
.t5-foot .ghost, .t5-foot .filebtn { background: #ffffff14; color: #fbecc7; border-color: #e7c87366; }
.sum5 { padding-left: 18px; } .sum5 li { margin: 4px 0; }
.adv5 { margin-top: 10px; } .adv5 select { max-width: 100%; }
select { max-width: 100%; }
@media (orientation: portrait) and (max-width: 700px) { .t5-card { grid-template-columns: 1fr; } .t5-pic > div { height: 34dvh !important; } .t5-pic .portrait.single { height: 34dvh !important; } }
@media (max-height: 500px) and (orientation: landscape) { .t5 .brand { display: none; } .t5-pic > div { height: 62dvh !important; } .t5-pic .portrait.single { height: 62dvh !important; } }
/* v0.5 prologue on the scene: background house · info card · short dialogue with portrait at the bottom */
.tut5 { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #1d1108; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.tut5-bg { position: absolute; inset: 0; overflow: hidden; }
.tut5-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tut5-bg .tut5-house { width: auto; height: 62%; left: 50%; top: 14%; transform: translateX(-50%); object-fit: contain; inset: auto; }
.night5 .tut5-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0b0820d9, #1b1430cc); }
.tut5-hud { position: relative; z-index: 3; }
.tsteps { margin: 0; flex-wrap: nowrap; } .tsteps span { font-size: 12px; padding: 2px 8px; white-space: nowrap; }
.tut5-info { position: relative; z-index: 3; justify-self: end; align-self: start; margin: 8px; width: min(520px, calc(100vw - 16px)); max-height: 100%; overflow: auto; background: #f4ead6f2; }
.tut5-talk { position: relative; z-index: 3; grid-row: 3; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; margin: 0 8px 8px; padding: 8px 12px; border-radius: 14px;
  background: #2b1d12eb; color: #fff4dc; border: 1px solid #e7c87366; max-height: 52dvh; overflow: auto; }
.tut5-pt .portrait { width: 96px; height: 136px; border: 2px solid var(--gold); border-radius: 10px; }
.tut5-text .narr { white-space: pre-line; margin: 0 0 6px; } .tut5-text .speaker { color: var(--gold); font-weight: 700; }
.tut5-text .muted { color: #e2cfa6; } .tut5-text h3 { color: var(--gold); margin: 4px 0; }
.tut5-text button.ghost, .tut5-text button:not(.primary):not(.gold) { background: #ffffff14; color: #fff4dc; border: 1px solid #ffffff40; border-radius: 10px; min-height: 44px; }
.tut5-text select { color: var(--ink); }
.tut5-text .hint { background: #fff6dc; color: var(--ink); }
.tut5-text .hint .muted { color: #5a4532; }
.tut5-text .okmsg { color: #9fe0b8; } .tut5-text .err { color: #ffb4a8; }
.tut5-err { position: relative; z-index: 3; margin: 6px; }
.tut5 .tut5-info .portraits .portrait, .tut5 .tut5-info .portrait { max-width: 100%; }
@media (orientation: portrait) { .tsteps { display: none; } .tut5-info { justify-self: stretch; width: auto; max-height: 38dvh; } .tut5-pt .portrait { width: 64px; height: 92px; } .tut5-talk { max-height: 48dvh; } }
@media (max-height: 430px) and (orientation: landscape) { .tut5-pt .portrait { width: 64px; height: 92px; } .tut5-talk { max-height: 50dvh; padding: 6px 10px; } .tut5-info { width: min(420px, 48vw); } }
.tut5-bg .tut5-house { inset: auto; left: 50%; top: 10%; height: 58%; width: auto; transform: translateX(-50%); object-fit: contain; }
.t5-card > .card:last-child { display: flex; flex-direction: column; }
@media (max-height: 520px) and (orientation: landscape) {
  .title-screen.t5 { padding: 6px; place-items: start center; }
  .t5-card { height: calc(100dvh - 96px); }
  .t5-card > .card { overflow: auto; min-height: 0; }
  .t5-card > .card:last-child h2 { margin: 0 0 4px; } .pick5 { margin: 6px 0; } .form-grid { gap: 6px 10px; }
  .nav6 { position: sticky; bottom: -12px; background: inherit; padding: 6px 0; margin-top: auto; }
  .t5-foot { margin-top: 4px; } .t5-foot .muted { display: none; }
}
.tut5-pt .portrait.single img { inset: auto; left: 0; top: 0; width: 100%; height: 230%; object-fit: cover; object-position: 50% 0; }
.tut5-pt .portrait.layered > div { height: 230% !important; }
@media (max-height: 520px) and (orientation: landscape) {
  .tut5-talk { font-size: 14px; max-height: 58dvh; } .tut5-text .narr { margin-bottom: 4px; }
  .tut5-text .hint { font-size: 13px; padding: 6px 8px; }
  .tut5-info { max-height: calc(100dvh - 60px - 58dvh); }
}
.tut5-talk { align-items: start; } .tut5-pt { position: sticky; top: 0; }
@media (max-height: 520px) and (orientation: landscape) { .tut5-talk { max-height: 64dvh; } .tut5-info { max-height: calc(100dvh - 60px - 64dvh); } }
.drawer5 { bottom: calc(var(--dock5, 60px) + env(safe-area-inset-bottom) + 4px); }
.scrim5 { bottom: calc(var(--dock5, 60px) + env(safe-area-inset-bottom)); }
@media (orientation: portrait) { .drawer5 { height: auto; max-height: calc(100dvh - var(--dock5, 120px) - 60px); top: 52px; } }
.ib5, .hint5-pill { min-height: 44px; }
@media (max-height: 430px) and (orientation: landscape) { .ib5 { min-height: 44px; } }
.menu5 .goal button, .drawer5 .goal button { min-height: 44px; min-width: 44px; }
/* v0.5.1b: user rejected vertical scrolling → landscape scene fits the screen again (contain); scene title row removed for height */
@media (orientation: landscape) { .stage5 .scene-head { display: none; } .stage5 .scene-box, .stage5 .place-list { max-width: calc((100dvh - 110px) * 3000 / 1100); } .stage5 .scene-box { max-height: calc(100dvh - 110px); } }
.model5 { height: 100%; background: radial-gradient(circle at 50% 35%, #fff5df, #e5d1ab); } .model5 img { object-fit: contain; object-position: center top; }
/* v0.5.3 wide scenes: in landscape the scene fills the stage (no list under it); places are one tap away in the dock */
@media (orientation: landscape) { .stage5 .place-list, .stage5 > .muted, .stage5 p.muted { display: none; } .stage5 { overflow: hidden; display: grid; place-items: center; } }
@media (orientation: portrait) { .places5 { display: none; } }
/* v0.5.4 city pins: small dot, 44 px hit area, name on tap/hover/focus; bubble kept inside the picture */
.scene-box .pin.dot5 { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; transform: translate(-50%, -50%); display: grid; place-items: center; }
.scene-box .pin.dot5 i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold, #e7c873); border: 2px solid #2b1d12; box-shadow: 0 0 0 2px #fff4dccc, 0 2px 6px #0008; }
.scene-box .pin.dot5.home i { background: #b3402f; } .scene-box .pin.dot5.npc i { background: #f3dfb3; }
.scene-box .pin.dot5.sel i { width: 20px; height: 20px; box-shadow: 0 0 0 3px #ffe08a, 0 0 12px #ffe08a; }
.scene-box .pin.dot5 .pin-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #2b1d12e6; color: #fff4dc; font-size: 12px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
@media (hover: hover) { .scene-box .pin.dot5:hover .pin-tip { opacity: 1; } }
.scene-box .pin.dot5:focus-visible .pin-tip { opacity: 1; }
.scene-box .pin.dot5.sel .pin-tip { display: none; }
.pin-bubble { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 16px)); background: #f4ead6f5; color: var(--ink); border: 1px solid #d9b45a; border-radius: 12px; padding: 8px 10px; box-shadow: 0 6px 18px #0008; min-width: 170px; max-width: 46%; display: grid; gap: 4px; }
.pin-bubble.below { transform: translate(-50%, 16px); }
.pin-bubble small { color: #5a4532; } .pin-bubble .row { gap: 6px; } .pin-bubble button { min-height: 44px; }
/* v0.5.4: no list under the scene in either orientation; “สถานที่” opens it */
.stage5 .place-list, .stage5 .est-list, .stage5 .est-note { display: none !important; }
@media (orientation: portrait) { .places5 { display: inline-block !important; } }
/* portrait: the picture is only ~140 px tall → the name bubble docks under the scene as a small sheet (never covers the buildings) */
/* (v0.5.4 portrait bubble sheet removed in v0.5.5: the portrait picture is tall enough for the in-picture bubble) */
/* v0.5.5 portrait scenes (941×1672): the picture uses the space between header and dock (contain, never cropped); no title row */
@media (orientation: portrait) {
  .stage5 { display: grid; place-items: center; overflow: hidden; padding: 4px; }
  .stage5 .scene-head { display: none; }
  .stage5 .scene-box.tall { width: min(100%, calc((100dvh - var(--hud5, 48px) - var(--dock5, 110px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px) * 941 / 1672)); max-width: 100%; max-height: none; }
  .hint5 { position: absolute; left: 8px; bottom: 8px; width: auto; margin: 0; z-index: 4; }
  .pin-bubble { position: absolute; left: auto; right: auto; bottom: auto; transform: translate(-50%, calc(-100% - 16px)) !important; max-width: 72%; }
  .pin-bubble.below { transform: translate(-50%, 16px) !important; }
}
/* v0.5.5 portrait: the bubble spans the picture width (inside it) and sits above/below the pin — works on 375-px phones too */
@media (orientation: portrait) { .scene-box.tall .pin-bubble { left: 4% !important; right: 4%; min-width: 0; max-width: none; transform: translateY(calc(-100% - 16px)) !important; } .scene-box.tall .pin-bubble.below { transform: translateY(16px) !important; } }
/* v0.5.6 header: every key value visible — resources never scroll away; buttons keep 44 px */
.shell.v5 .hud5 { overflow: visible; flex-wrap: nowrap; gap: 6px; }
.hud5-res { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.hud5-btn { display: flex; gap: 6px; flex: 0 0 auto; }
.hud5 .chip5 { white-space: nowrap; padding: 2px 8px; }
@media (orientation: portrait) {
  .shell.v5 .hud5 { align-items: flex-start; padding: 4px 6px; }
  .hud5 .chip5 { font-size: 12.5px; padding: 2px 6px; } .hud5 .chip5 .ic { width: 14px; height: 14px; }
  .hud5-btn .ib5 { padding: 0 8px; }
}
/* v0.5.6 portrait dock: two rows (faces · time + places) instead of three; pause text hidden when just paused (button says ▶ เล่น) */
@media (orientation: portrait) {
  .dock5 { flex-wrap: wrap; justify-content: space-between; row-gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .time5 { flex: 0 1 auto; gap: 4px; } .nav5 { gap: 4px; }
  .time5 .paused5 { display: none; }
  .dock5 .ib5 { padding: 0 8px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .faces5 { flex-basis: 100%; order: -1; padding: 0; } .face5 { width: 44px; height: 44px; }
  .hud5 .fam { flex-basis: auto; }
}
/* v0.5.6 messages never cover controls: toast and image-failure banner sit just under the header, and let taps pass through around them */
.toast { top: calc(var(--hud5, 48px) + env(safe-area-inset-top) + 6px); bottom: auto; pointer-events: none; }
.img-fail { top: calc(var(--hud5, 48px) + env(safe-area-inset-top) + 6px); bottom: auto; max-width: calc(100vw - 16px); }
@media (max-height: 430px) and (orientation: landscape) { .face5 { width: 44px; height: 44px; } } /* v0.5.6: faces keep 44 px on short landscape too */
.toast { left: 8px; right: 8px; transform: none; max-width: none; margin: 0 auto; width: fit-content; text-align: center; font-size: 14px; } /* v0.5.6: wide, short message bar under the header */
/* ───────── v0.5.7: fill the real visible screen (iOS Safari toolbars), scene sized to its area, chat-style log ───────── */
.shell.v5, .tut5 { inset: auto; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; }
.body5 { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 380px); }
.body5.chat-min { grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 380px); }
.stage5 { container-type: size; min-height: 0; min-width: 0; overflow: hidden !important; display: grid !important; place-items: center !important; padding: 4px !important; }
.stage5 .scene-wrap { width: 100%; height: 100%; display: grid; place-items: center; }
.stage5 .scene-box, .stage5 .scene-box.tall { width: min(100cqw, 100cqh * var(--arw) / var(--arh)) !important; max-width: none !important; max-height: none !important; height: auto; }
.chat5 { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #1c1109f0; border-left: 1px solid #e7c87333; color: #f4e6c6; }
.chat5.min { grid-template-rows: auto auto; }
.chat5-tabs { display: flex; gap: 4px; padding: 4px; border-bottom: 1px solid #e7c87333; align-items: center; }
.chat5-tabs button { min-height: 44px; min-width: 44px; border-radius: 10px; border: 1px solid #e7c87355; background: #ffffff10; color: #f4e6c6; padding: 0 10px; position: relative; }
.chat5-tabs button.on { background: var(--gold, #e7c873); color: var(--ink); }
.chat5-list { overflow-y: auto; padding: 6px 8px 10px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat5-ticker { padding: 6px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg5 { background: #ffffff0f; border-left: 3px solid #a08a62; border-radius: 4px 12px 12px 12px; padding: 6px 9px; font-size: 14px; line-height: 1.4; }
.msg5 small { color: #cdb990; font-size: 12px; } .msg5 p { margin: 2px 0; }
.msg5.sev2 { border-left-color: var(--gold, #e7c873); } .msg5.sev3 { border-left-color: #d0533f; }
.msg5.unread { background: #e7c8731f; } .msg5.story { border-left-color: #7fb3a0; }
.msg5 .row { gap: 6px; margin-top: 4px; } .msg5 button, .chat5-foot button { min-height: 44px; border-radius: 10px; border: 1px solid #e7c87366; background: #ffffff14; color: #f4e6c6; padding: 0 10px; }
.msg5 button.primary { background: linear-gradient(#b3402f, #9b2d20); border-color: #6e1d14; color: #fff7e6; }
.msg5.pin { background: transparent; border: 0; padding: 0; } .msg5.pin .hint { margin: 0; }
.msg5 a { color: #ffe08a; }
.chat5-foot { gap: 6px; flex-wrap: wrap; }
@media (orientation: portrait) {
  .body5, .body5.chat-min { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) clamp(150px, 32%, 280px); }
  .body5.chat-min { grid-template-rows: minmax(0, 1fr) auto; }
  .chat5 { border-left: 0; border-top: 1px solid #e7c87333; }
}
/* v0.5.7 tutorial: one pulsing button + "next step" line; compact header with a save menu */
.todo5 { margin: 0 0 6px; color: #ffe08a; font-weight: 700; }
.tut5 [data-go] { position: relative; outline: 3px solid #ffe08a; box-shadow: 0 0 0 6px #ffe08a44, 0 0 16px #ffe08a; animation: go5 1.1s ease-in-out infinite; }
.tut5 [data-go]::before { content: '👉'; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); font-size: 22px; animation: go5x 1.1s ease-in-out infinite; }
@keyframes go5 { 50% { box-shadow: 0 0 0 2px #ffe08a22, 0 0 6px #ffe08a; } }
@keyframes go5x { 50% { left: -24px; } }
@media (prefers-reduced-motion: reduce) { .tut5 [data-go], .tut5 [data-go]::before { animation: none; } }
.tut5-text .row { padding-left: 30px; }
.tutmenu5 { position: absolute; z-index: 6; right: 8px; top: calc(var(--hud5t, 52px) + env(safe-area-inset-top)); display: flex; gap: 6px; flex-wrap: wrap; background: #2b1d12f2; padding: 8px; border-radius: 12px; border: 1px solid #e7c87366; }
.why5 { margin: 4px 0 8px; padding-left: 20px; } .why5 li { margin: 2px 0; }
.tut5-hud { flex-wrap: nowrap; } .tut5-hud .fam { white-space: nowrap; }
@media (max-width: 700px) { .tsteps { display: none; } }
.chat5-tabs button { white-space: nowrap; padding: 0 8px; font-size: 14px; } .chat5-tabs .grow { flex: 1; }
/* v0.5.7 short screens: folded log = slim tab column (landscape) / tab strip (portrait); opened = overlay over the scene, scene size unchanged */
.body5.short.chat-min { grid-template-columns: minmax(0, 1fr) 92px; }
.body5.short.chat-min .chat5-tabs { flex-direction: column; align-items: stretch; border: 0; }
.body5.short.chat-min .chat5-tabs .grow { display: none; }
.body5.short.chat-min .chat5-ticker { display: none; }
.body5.short:not(.chat-min) { grid-template-columns: minmax(0, 1fr) 92px; position: relative; }
.body5.short:not(.chat-min) .chat5 { position: absolute; z-index: 8; top: 0; bottom: 0; right: 0; width: min(360px, 46vw); box-shadow: -6px 0 18px #0009; }
@media (orientation: portrait) {
  .body5.short.chat-min { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .body5.short.chat-min .chat5-tabs { flex-direction: row; }
  .body5.short:not(.chat-min) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 54px; }
  .body5.short:not(.chat-min) .chat5 { top: auto; left: 0; width: auto; height: min(62%, 420px); box-shadow: 0 -6px 18px #0009; }
}
.scene-box .pin-bubble.corner-l, .scene-box .pin-bubble.corner-r { top: 6px !important; transform: none !important; max-width: 48%; min-width: 0; padding: 6px 8px; }
.scene-box .pin-bubble.corner-l { left: 6px !important; } .scene-box .pin-bubble.corner-r { right: 6px; left: auto !important; }
.pin-bubble.corner-l small, .pin-bubble.corner-r small { display: none; }
.chat5-list > * { flex-shrink: 0; } /* v0.5.7: messages keep their height (no overlap) */ .msg5 .hint { background: #fff6dc; color: var(--ink); } .msg5 .hint .muted { color: #5a4532; }
.msg5 .hint button { color: var(--ink); background: #fff8ea; border: 1px solid #d9b45a; }
/* v0.5.8 landscape: log column always on the right (tabs at its top corner); slightly narrower so the scene keeps room */
@media (orientation: landscape) { .body5, .body5.chat-min { grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 360px); } }
.pop5 { animation: pop5 .5s ease-out; } @keyframes pop5 { from { opacity: 0; transform: translateY(8px); background: #ffe08a44; } }
@media (prefers-reduced-motion: reduce) { .pop5 { animation: none; } }
/* v0.5.8 step-by-step menus */
.stage5-tag { align-self: center; font-size: 12px; color: #e2cfa6; border: 1px dashed #e7c87366; border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.unlock5 { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); top: calc(var(--hud5, 48px) + env(safe-area-inset-top) + 10px); width: min(420px, calc(100vw - 16px)); background: #fff6dc; color: var(--ink); border: 2px solid #d9b45a; border-radius: 14px; padding: 10px 12px; box-shadow: 0 8px 24px #000a; animation: pop5 .4s ease-out; }
.unlock5 p { margin: 4px 0 8px; } .unlock5 .row { gap: 8px; } .unlock5 button { min-height: 44px; }
.ib5.new5 { outline: 3px solid #ffe08a; box-shadow: 0 0 12px #ffe08a; animation: go5 1.1s ease-in-out infinite; }

/* ───────── v0.5.9: first-month checklist · market result · lesson planting · narrow market rows ───────── */
.first59 { display: grid; gap: 6px; }
.first59 > p { margin: 0; }
.first59 ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.first59 li { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #fffaf0; border: 1px solid #e3cf9a; color: #3b2a14; }
.first59 li.next { border: 2px solid #c9a24a; background: #fff1c9; }
.first59 li.done { opacity: .62; }
.first59 li.done b { color: #2e7d32; }
.first59 li.lock { opacity: .45; }
.first59 li small { line-height: 1.5; }
.first59 li button { justify-self: start; min-height: 44px; }
.trade59 { border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #eaf6e4; border: 2px solid #6aa85a; line-height: 1.6; font-size: 1.02em; }
.trade59.buy { background: #fff3dc; border-color: #c9a24a; }
.trade59 > b { font-size: 1.1em; display: block; margin-bottom: 2px; }
.trade59 .gain { color: #1f7a1f; }
.trade59 .loss { color: #b3261e; }
.how59 { background: #f6ecd6; border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; font-size: .92em; line-height: 1.55; }
.how59 ul { margin: 4px 0 0; padding-left: 18px; }
.lesson59 { margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: #e7f4dc; color: #2d5a1f; font-size: .9em; }
.db5 { container-type: inline-size; }
@container (max-width: 560px) {
  .mrow { grid-template-columns: 52px minmax(0,1fr); }
  .mrow > input, .mrow > .row, .mrow .quote { grid-column: 2; }
  .mrow > input { justify-self: start; }
  .mrow > .row { flex-wrap: wrap; }
  .mrow > .row > .why { max-width: none; flex-basis: 100%; }
}
.first59, .first59 > p, .first59 small { color: #3b2a14; }
.first59 small { opacity: 1; font-size: .9em; }
.first59 li.lock small { color: #7a6650; }
.first59 { padding: 6px 8px; }

/* ───────── v0.6.0: explain abilities / training / careers / marriage; reasons for disabled buttons ───────── */
.guide60 { margin: 8px 0; background: #f6ecd6; border: 1px solid #e3cf9a; border-radius: 10px; padding: 6px 10px; font-size: .92em; line-height: 1.55; }
.guide60 > summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.g60 { margin: 4px 0 6px; padding-left: 18px; }
.g60 li { margin: 2px 0; }
.g60.fit { list-style: none; padding-left: 0; }
.g60.fit li { padding: 4px 8px; border-radius: 6px; margin: 4px 0; background: #fffaf0; }
.g60.fit li.ok { border-left: 4px solid #4c9a4c; }
.g60.fit li.no { border-left: 4px solid #c58b2c; }
.g60h { margin: 6px 0 0; font-weight: 700; }
.note60 { background: #f6ecd6; border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px; font-size: .9em; line-height: 1.6; }
.why60 { color: #8a4b12; font-size: .88em; margin: 4px 0; }
.cinfo60 { font-size: .86em; line-height: 1.5; margin-top: 4px; }
.cinfo60 .pro { color: #2e6b2e; }
.cinfo60 .con { color: #9a4a12; }
.cand { align-items: start; }

/* ───────── v0.6.1: story text in the log · what-next list · child guide ───────── */
.msg5 .ln5 { margin: 3px 0; line-height: 1.55; }
.msg5 details summary { cursor: pointer; min-height: 32px; }
.next60 ul { margin: 4px 0 0; padding-left: 18px; }
.next60 li { margin: 6px 0; line-height: 1.5; }
.next60 li.warn { color: #ffb36b; }
.next60 .mini { min-height: 36px; padding: 2px 12px; margin-left: 6px; }

/* ───────── v0.6.2: chapters · reveal glow · slim menu ───────── */
.ch62 ol { margin-top: 6px; }
.ch62 .mini, .next60 .mini { font-size: .85em; }
.more5 { margin-top: 10px; }
.more5 > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--muted, #8a7a62); }
.pin .lv.new5, .chip5.new5 { animation: go5 1.2s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(240,200,90,.8); }

/* ═════════ v0.6.3 (user iPhone notes) ═════════ */
/* 2: time state is a badge (what is happening now), the button is the action */
.clock63 { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.clock63.run { background: #2f6b55; color: #eafff4; border-color: #8fe0b8; animation: run63 1.6s ease-in-out infinite; }
.clock63.stop { background: #5a4532; color: #ffe6b0; border-color: #e7c87388; }
.clock63.block { background: #7a2a1e; color: #ffe0d6; }
@keyframes run63 { 50% { box-shadow: 0 0 0 4px #8fe0b833; } }
.stage5.paused63 > *:not(.pausenote63) { filter: saturate(.55) brightness(.82); transition: filter .25s; }
.pausenote63 { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; pointer-events: none; background: #2b1d12e6; color: #ffe6b0; border: 1px solid #e7c87388; border-radius: 99px; padding: 4px 12px; font-size: 14px; white-space: nowrap; }
.stage5 { position: relative; }
.chip5.date.tick63 { animation: tick63 .5s ease-out; }
@keyframes tick63 { 0% { background: #e7c873; color: #2b1d12; } 100% { background: #ffffff1a; } }
@media (prefers-reduced-motion: reduce) { .clock63.run, .chip5.date.tick63 { animation: none; } }
.chip5.low63 { background: #7a2a1e; border-color: #ffb9a8; color: #fff0ea; }
/* 1: portrait — faces become a column beside a taller log */
.chatrow63 { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 0; min-width: 0; }
.chatrow63 .chat5 { border-left: 1px solid #e7c87333; }
.faces5.col63 { flex-direction: column; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; padding: 6px 4px; gap: 8px; background: #1c1109f0; border-top: 1px solid #e7c87333; }
.faces5.col63 .face5 { width: 46px; height: 46px; flex: 0 0 auto; }
@media (orientation: portrait) {
  .body5.side63:not(.chat-min) { grid-template-rows: minmax(0, 1fr) clamp(200px, 36%, 360px); }
  .body5.side63 .chatrow63 { border-top: 1px solid #e7c87333; }
}
/* 3/6/7: careers, reasons under each button */
.best63 { display: inline-block; background: #2f6b55; color: #fff; border-radius: 99px; padding: 0 8px; font-size: 13px; margin-right: 4px; }
.cnt63 { color: #5a4532; }
.bw63 { display: inline-flex; flex-direction: column; gap: 2px; max-width: 100%; vertical-align: top; margin: 2px 6px 2px 0; }
.why63 { color: #8a3b2a; font-size: 13px; line-height: 1.3; max-width: 260px; }
.note63 { background: #fff6dc; border: 1px solid #e7c87399; border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: 14px; }
.fail63 { background: #fbe5df; border-left: 3px solid #b3402f; border-radius: 6px; padding: 6px 10px; font-size: 14px; }
.warn63 { background: #fbe5df; color: #6e1d14; border-radius: 8px; padding: 6px 10px; }
.hint.warn63 { background: #fbe5df !important; }
.rel63 .cand { align-items: center; }
/* 9: buildings folded in year 1, below the fields */
.bld63 > summary { cursor: pointer; padding: 8px 4px; font-size: 16px; }
.tag.yr2 { background: #e8dcc2; border-color: #b9a37a; }
/* 10: training finished */
.train63 .small63 { font-size: 14px; }

/* ═════════ v0.6.4: approved portrait UI · labelled places · ลานเรือน (courtyard with character models) ═════════ */
/* labels always visible on city places and estate buildings (cream pill, gold for the player's house); the 44-px hit area is unchanged */
.scene-box .pin.dot5.lbl64 .pin-tip { opacity: 1; bottom: auto; top: 50%; transform: translate(-50%, -50%); background: #fbf0d6f2; color: #3a2210; border: 1px solid #a67c3d; font-size: 11.5px; font-weight: 700; padding: 1px 7px; box-shadow: 0 1px 4px #0006; }
.scene-box .pin.dot5.lbl64 i { display: none; }
.scene-box .pin.dot5.lbl64.home .pin-tip { background: linear-gradient(#f7dc8c, #e2b552); border-color: #7a5317; }
.scene-box .pin.dot5.lbl64.sel .pin-tip { display: block; box-shadow: 0 0 0 3px #ffe08a, 0 0 10px #ffe08a; }
.scene-box .pin.bld.lbl64 { background: none; border: 0; box-shadow: none; min-width: 44px; min-height: 44px; }
.scene-box .pin.bld.lbl64 .tip { position: static; transform: none; margin: 0; display: inline-block; background: #fbf0d6f2; color: #3a2210; border: 1px solid #a67c3d; font-size: 12px; font-weight: 700; padding: 3px 10px; box-shadow: 0 1px 4px #0006; }
.scene-box .pin.bld.lbl64 .tip .lv { font-weight: 400; color: #6b5030; }
.court-go64 { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 50; min-height: 44px; border-radius: 99px; border: 1px solid #7a5317; background: linear-gradient(#f7dc8c, #e2b552); color: #3a2210; font-weight: 700; padding: 0 16px; box-shadow: 0 2px 8px #0008; white-space: nowrap; }
/* courtyard entities: bottom-centre anchored (building base / feet), stacked by depth */
.court-box64 .ent64 { position: absolute; transform: translate(-50%, -100%); padding: 0; border: 0; background: none; box-shadow: none; min-width: 44px; min-height: 44px; display: block; cursor: pointer; }
.court-box64 .ent64 img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; pointer-events: none; filter: drop-shadow(0 3px 2px #0005); }
.court-box64 .nm64 { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px); background: #fbf0d6f2; color: #3a2210; border: 1px solid #a67c3d; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 0 7px; white-space: nowrap; pointer-events: none; }
.court-box64 .bld64 .nm64 { top: auto; bottom: 8%; }
.court-box64 .ppl64.lead .nm64 { background: linear-gradient(#f7dc8c, #e2b552); }
.court-box64 .ppl64.sel img, .court-box64 .ppl64.sel .tok64 { filter: drop-shadow(0 0 4px #ffe08a) drop-shadow(0 0 2px #ffe08a); }
.court-more64 { position: absolute; left: 8px; bottom: 8px; margin: 0; background: #2b1d12e6; color: #ffe6b0; border-radius: 99px; padding: 2px 10px; font-size: 13px; }
/* portrait shell (approved mockups) */
.hud64 { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.hud64 .fam { font-size: 18px; color: #f7dc8c; white-space: nowrap; }
.pill64 { flex: 1; min-width: 0; text-align: center; border: 1px solid #a67c3d; border-radius: 99px; padding: 4px 10px; background: #00000033; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill64 .low63 { color: #ffb9a8; font-weight: 700; } .pill64 .tick63 { animation: tick63 .5s ease-out; border-radius: 6px; }
.ib5.menu64 { border: 1px solid #c9a24f; border-radius: 10px; padding: 0 12px; min-height: 40px; color: #f7dc8c; }
.body5.p64 { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto auto !important; }
.body5.p64:not(.chat-min) { grid-template-rows: minmax(0, 1fr) clamp(240px, 46%, 430px) auto !important; }
.body5.p64 .chat5 { position: static !important; width: auto !important; height: auto !important; border-top: 2px solid #c9a24f; background: #fbf0d6; color: #3a2210; box-shadow: none !important; }
.body5.p64 .chat5:not(.min) { grid-template-rows: auto auto minmax(0, 1fr); }
.body5.p64 .chat5-tabs { flex-direction: row !important; border-bottom: 1px solid #c9a24f66; overflow-x: auto; }
.body5.p64 .chat5-tabs button { background: #efe0bc; color: #3a2210; border-color: #c9a24f; }
.body5.p64 .chat5-tabs button.on { background: #5a3418; color: #fbf0d6; }
.body5.p64 .chat5-list { color: #3a2210; }
.body5.p64 .msg5 { background: #fff8e8; color: #3a2210; border-left-color: #a67c3d; } .body5.p64 .msg5 small { color: #6b5030; }
.body5.p64 .msg5 button, .body5.p64 .chat5-foot button { background: #fff3d6; color: #3a2210; border-color: #c9a24f; }
.body5.p64 .msg5 a { color: #8a3b2a; }
.jhead64 { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; } .jhead64 b { font-size: 18px; } .jhead64 .grow { flex: 1; }
.jclose64 { min-height: 44px; min-width: 56px; border-radius: 10px; border: 1px solid #3a2210; background: #3a2210; color: #fbf0d6; }
.chat5.jbar64 { display: flex !important; align-items: center; gap: 6px; padding: 4px 8px; }
.jtitle64, .jopen64 { min-height: 44px; border: 0; background: none; color: #3a2210; font-weight: 700; white-space: nowrap; padding: 0 4px; }
.jopen64 { border: 1px solid #a67c3d !important; border-radius: 99px; padding: 0 12px; background: #fff3d6; position: relative; }
.jopen64 .dot5 { position: absolute; top: -4px; right: -4px; }
.jfaces64 { flex: 1; min-width: 0; overflow-x: auto; flex-wrap: nowrap; gap: 4px; justify-content: flex-start; }
.jfaces64 .face5 { width: 40px; height: 40px; flex: 0 0 auto; }
.quest64 { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; padding: 0 10px; border: 0; border-top: 1px solid #c9a24f; background: #f3e4bf; color: #3a2210; text-align: left; }
.quest64 .muted { color: #6b5030; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .quest64 .grow { flex: 1; }
.qgo64 { border: 1px solid #a67c3d; border-radius: 99px; padding: 4px 12px; white-space: nowrap; background: #fff8e8; }
.dock5.dock64 { flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 6px calc(2px + env(safe-area-inset-bottom)); }
.dock64 .time5 { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
.dock64 .time5 .paused5 { display: none; }
.dock64 .navx64:empty { display: none; }
.dock64 .navx64 { margin-left: auto; display: inline-flex; }
.nav64 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid #e7c87333; }
.nb64 { min-height: 46px; border: 0; background: none; color: #f4e6c6; font-size: 16px; position: relative; }
.nb64.on { color: #f7dc8c; font-weight: 700; } .nb64.on::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 4px; height: 3px; border-radius: 3px; background: #e2b552; }
.nb64[data-new] { animation: go5 1.2s ease-in-out infinite; }
/* journal: คนในเรือน / สรุปปี */
.jpeople64 p, .jyear64 p { margin: 4px 0; }
.jrow64 { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid #c9a24f44; }
.jface64 { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid #c9a24f; background: #e8d6b0; }
.jface64 .portrait, .jface64 img, .jface64 svg { width: 100%; height: 100%; }
.jtxt64 { min-width: 0; flex: 1; }
.jname64 { border: 0; background: none; padding: 0; min-height: 30px; font-weight: 700; color: #3a2210; font-size: 15px; text-decoration: underline dotted #a67c3d; }
.jdo64 { font-size: 14px; line-height: 1.45; }
.ysum64 { background: #fff8e8; border: 1px solid #c9a24f; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ysum64 h4 { margin: 0 0 6px; font-size: 16px; }
.ygrid64 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 12px; }
.ygrid64 > div { background: #f3e4bf; border-radius: 8px; padding: 4px 2px; } .ygrid64 b { display: block; font-size: 16px; }
.yl64 { margin: 0 0 4px; padding-left: 20px; font-size: 14px; } .yl64 li { margin: 1px 0; }
@media (max-width: 380px) { .ygrid64 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chat5 .jpeople64 { background: #fbf0d6; color: #3a2210; border-radius: 8px; padding: 6px; }
.chat5.jbar64 .jtitle64 { order: 1; } .chat5.jbar64 .jfaces64 { order: 2; } .chat5.jbar64 .jopen64 { order: 3; }
/* two neighbouring labels in the portrait city would touch: ธาราทอง sits a little lower, อินทรรักษ์ a little higher (hit areas unchanged) */
@media (orientation: portrait) { .scene-box .pin.dot5.lbl64[data-arg="thara"] .pin-tip { top: calc(50% + 9px); } .scene-box .pin.dot5.lbl64[data-arg="intra"] .pin-tip { top: calc(50% - 9px); } }
.ysum64, .ysum64 * { color: #3a2210; } .ysum64 .err { color: #b3402f; } .ysum64 .okmsg { color: #2f6b55; } .chat5 .jyear64 .muted { color: #cdb990; } .body5.p64 .jyear64 > .muted, .ysum64 .muted { color: #6b5030; }
@media (orientation: portrait) { .scene-box .pin.dot5.lbl64[data-arg="chang"] .pin-tip { top: calc(50% - 12px); } .scene-box .pin.dot5.lbl64[data-arg="market"] .pin-tip { top: calc(50% + 12px); } }
.jfaces64 .face5, .body5 .jfaces64 .face5 { width: 44px !important; height: 44px !important; }
.ib5.menu64 { min-height: 44px; } .jhead64 .jfaces64 { margin: 0 4px; }
/* v0.6.4: the opened journal lies over the lower part of the scene (approved mockup) — the scene keeps its size, so pins never shrink or crowd */
.body5.p64 { position: relative; }
.body5.p64:not(.chat-min) { grid-template-rows: minmax(0, 1fr) auto !important; }
.body5.p64:not(.chat-min) .chat5 { position: absolute !important; left: 0; right: 0; bottom: var(--q64, 0px); height: min(56%, 460px) !important; z-index: 9; box-shadow: 0 -8px 20px #0007 !important; border-radius: 14px 14px 0 0; }
.body5.p64:not(.chat-min) .quest64 { grid-row: 2; }
/* journal tabs always fit the phone width (no hidden tab off to the side) */
.body5.p64 .chat5-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
.body5.p64 .chat5-tabs .grow { display: none; }
.body5.p64 .chat5-tabs button { white-space: normal; line-height: 1.15; font-size: 13px; padding: 2px 4px; }
/* v0.6.4: 4 journal tabs in the landscape log column wrap to a second row instead of hiding off to the side */
.body5:not(.p64) .chat5-tabs { flex-wrap: wrap; } .body5:not(.p64) .chat5-tabs button { min-height: 44px; }
.pill64 { font-size: 12px; white-space: normal; line-height: 1.25; text-overflow: clip; padding: 3px 8px; }
.hud64 .fam { font-size: 16px; }
.menu64 .stage5-tag { font-size: 11px; padding: 0 4px; margin-left: 2px; }
.scene-box .pin.bld.lbl64 .tip .lv { position: static; display: inline; background: none; min-width: 0; line-height: inherit; font-size: 11px; margin-left: 4px; }
/* labels near the picture edge grow inward so they are never cut off */
.scene-box .pin.bld.lbl64.er64 { justify-items: end; } .scene-box .pin.bld.lbl64.el64 { justify-items: start; }
.court-go64 { max-width: 94%; white-space: normal; line-height: 1.2; font-size: 14px; padding: 4px 14px; }
.court-go64 { width: max-content; white-space: nowrap; font-size: 13px; }
.scene-box .pin.bld.lbl64.er64 .tip, .scene-box .pin.bld.lbl64.el64 .tip { position: absolute !important; top: 50%; transform: translateY(-50%) !important; white-space: nowrap; }
.scene-box .pin.bld.lbl64.er64 .tip { right: 0; left: auto; } .scene-box .pin.bld.lbl64.el64 .tip { left: 0; right: auto; }
.scene-box .pin.bld.lbl64 .tip { text-align: center; line-height: 1.15; padding: 2px 9px; } .scene-box .pin.bld.lbl64 .tip .lv { display: block; margin: 0; font-size: 10.5px; }

/* ═════════ v0.6.5 courtyard camera ═════════ */
.stage5.court64s { padding: 0 !important; }
.stage5.court64s .scene-wrap { width: 100%; height: 100%; display: block; }
.court-view64 { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #3b2a18; border-radius: 8px; cursor: grab; }
.court-view64:active { cursor: grabbing; }
.stage5 .court-world64.scene-box { position: absolute !important; left: 0; top: 0; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; border-radius: 0; transform-origin: 0 0; box-shadow: none; overflow: visible; }
.court-world64 > .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.court-world64 .ppl64 { width: max(66px, calc(44px / var(--s, 1))); height: max(110px, calc(44px / var(--s, 1))); }
.court-world64 .ppl64 img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); object-fit: contain; }
.court-world64 .nm64 { font-size: calc(12px / var(--s, 1)); padding: 0 calc(7px / var(--s, 1)); border-width: calc(1px / var(--s, 1)); transform: translate(-50%, calc(2px / var(--s, 1))); }
.court-world64 .bld64 .nm64 { transform: translateX(-50%); }
.court-cam64 { position: absolute; right: 8px; top: 8px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.court-cam64 button { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid #a67c3d; background: #fbf0d6f0; color: #3a2210; font-size: 18px; font-weight: 700; box-shadow: 0 2px 6px #0006; }
.court-cam64 button[data-cz="fit"] { font-size: 12px; padding: 0 6px; }
.court-more64 { position: absolute; left: 8px; bottom: 8px; z-index: 5; min-height: 44px; border: 1px solid #a67c3d; border-radius: 99px; background: #2b1d12e6; color: #ffe6b0; padding: 0 12px; font-size: 13px; max-width: calc(100% - 70px); }
.stage5 .scene-box.court-world64 { width: 1536px !important; height: 1024px !important; }
/* v0.6.5: landscape dock — the face row gives way (scrolls) so the scene buttons are never pushed off screen */
@media (orientation: landscape) { .dock5:not(.dock64) { flex-wrap: nowrap; } .dock5:not(.dock64) > .faces5 { flex: 1 1 0; min-width: 0; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; } .dock5:not(.dock64) > .faces5 .face5 { flex: 0 0 auto; } .dock5:not(.dock64) .nav5 { flex: 0 0 auto; } .dock5:not(.dock64) .time5 { flex: 0 0 auto; } }

/* ═════════ v0.6.6 guided quests (จับมือทำ) ═════════ */
.g66 { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.g66-pane { position: fixed; background: rgba(12, 7, 3, .66); pointer-events: auto; }
.g66-ring { position: fixed; border: 3px solid #ffe08a; border-radius: 12px; box-shadow: 0 0 0 4px #ffe08a55, 0 0 22px #ffe08a; pointer-events: none; animation: g66p 1.1s ease-in-out infinite; }
@keyframes g66p { 50% { box-shadow: 0 0 0 1px #ffe08a22, 0 0 8px #ffe08a; } }
.g66-hand { position: fixed; font-size: 28px; pointer-events: none; animation: go5x 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 2px #0008); }
.g66-bubble { position: fixed; left: 10px; right: 10px; max-width: 520px; margin: 0 auto; pointer-events: auto; background: #fff6dc; color: #3a2210; border: 2px solid #c9a24f; border-radius: 14px; padding: 10px 12px 8px; box-shadow: 0 6px 24px #000a; font-size: 15px; line-height: 1.45; }
.g66-bubble.mid { top: 50%; transform: translateY(-50%); }
.g66-bubble p { margin: 4px 0 6px; }
.g66-bubble .row { display: flex; gap: 8px; flex-wrap: wrap; }
.g66-bubble button { min-height: 44px; border-radius: 10px; border: 1px solid #a67c3d; background: #fff8e8; color: #3a2210; padding: 0 14px; font-weight: 700; }
.g66-bubble button.primary { background: linear-gradient(#b3402f, #9b2d20); color: #fff7e6; border-color: #6e1d14; }
.g66-n { color: #6b5030; font-size: 12px; }
.g66-skip { float: right; margin-top: 4px; min-height: 36px !important; font-weight: 400 !important; font-size: 12px; background: none !important; border: none !important; color: #6b5030 !important; text-decoration: underline; padding: 0 4px !important; }
.g66-target { position: relative; }
@media (prefers-reduced-motion: reduce) { .g66-ring, .g66-hand { animation: none; } }
.court-go64 { z-index: 5 !important; }
.g66-bubble { overflow-y: auto; } @media (orientation: landscape) { .g66-bubble { max-width: 460px; } }