/* ชะตาสยาม — 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) * 1672 / 941); 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) * 1672 / 941); }
  .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; }