:root {
  --bg: #0f1430; --bg2: #171b40; --panel: #1b2148; --panel2: #232a58; --line: #343d75; --ink: #f1f3fb; --mute: #a2abd0;
  --gold: #f6c453; --good: #5fd08a; --bad: #f07272; --accent: #ff8f4d; --accent2: #ffb35c;
  --ui: 'Sarabun', 'Leelawadee UI', 'Thonburi', sans-serif;
  --hand: 'Mali', 'Sarabun', 'Leelawadee UI', sans-serif;
  --head: 'Chakra Petch', 'Sarabun', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--ink); font-family: var(--ui); font-size: 15px; }
body { background: radial-gradient(1200px 700px at 20% -10%, #2a2f6e 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #4a2a5e 0%, transparent 55%), #080a1c; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: rgba(120, 130, 180, .45); border-radius: 8px; }

#app { position: relative; max-width: 480px; height: 100dvh; margin: 0 auto; background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); display: flex; flex-direction: column; overflow: hidden; }
#app.intro #hud, #app.intro #tool { visibility: hidden; }

/* ---------- แถบสถานะ ---------- */
#hud { padding: 8px 12px 9px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; z-index: 2; container-type: inline-size; }
/* มือถือ: แถวบน = ชื่อ อายุ เงิน ปุ่ม / แถวล่าง = สถานะกับช่วงของปี กินเต็มความกว้าง ชื่อจึงไม่โดนเบียด */
.hud-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'face name money btns' 'face meta meta meta'; column-gap: 10px; row-gap: 2px; align-items: center; }
.hud-face { grid-area: face; width: 44px; height: 40px; image-rendering: pixelated; background: #bfe3f7; border: 2px solid #080b1e; border-radius: 4px; outline: 1px solid var(--line); }
.hud-name { grid-area: name; display: flex; align-items: baseline; gap: 7px; min-width: 0; font-family: var(--head); line-height: 1.3; white-space: nowrap; }
.hud-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 17px; font-weight: 700; color: var(--ink); }
.hud-name .ag { flex: none; font-size: 13px; font-weight: 600; color: var(--gold); }
.hud-meta { grid-area: meta; display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-sub { flex: 1; min-width: 0; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-q { flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--head); font-size: 11.5px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.hud-q .qd { display: flex; gap: 3px; } .hud-q .qd i { width: 6px; height: 6px; background: #39427c; } .hud-q .qd i.on { background: var(--accent2); }
.money { grid-area: money; position: relative; text-align: right; font-family: var(--head); white-space: nowrap; line-height: 1.15; }
.money .ml { display: none; font-family: var(--ui); font-size: 11px; color: var(--mute); }
.money .mv { font-size: 16px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; transition: color .2s; }
.money .debt { margin-left: 5px; padding: 0 4px; border: 1px solid var(--bad); border-radius: 3px; font-family: var(--ui); font-size: 10px; font-weight: 600; color: var(--bad); vertical-align: 2px; }
.money.up .mv { color: var(--good); } .money.down .mv { color: var(--bad); }
.hud-btns { grid-area: btns; display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.hud-btn { width: 30px; height: 28px; display: grid; place-items: center; font-family: var(--head); font-size: 12.5px; font-weight: 700; color: var(--mute); transition: background .15s, color .15s; }
.hud-btn + .hud-btn { border-left: 1px solid var(--line); }
.hud-btn:hover { background: #2a3163; color: var(--ink); } .hud-btn:active { background: #343d75; }
.hud-btn.on { background: var(--accent2); color: #1b1206; }
.hud-btn.ic::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hud-btn.snd { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10l-4-3H2z'/%3E%3Cpath d='M11 5.5a3.5 3.5 0 0 1 0 5M12.8 3.6a6 6 0 0 1 0 8.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hud-btn.snd.off { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3v10l-4-3H2z'/%3E%3Cpath d='M11.2 6l3.6 4M14.8 6l-3.6 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hud-btn.snd.off::before { opacity: .55; }
.hud-btn.mnu { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3.5h12v2H2zM2 7h12v2H2zM2 10.5h12v2H2z'/%3E%3C/svg%3E"); }
/* ค่าทั้งสี่: ชื่อ + ตัวเลข แล้วแถบ 10 ช่องแบบพิกเซลให้เข้ากับฉาก */
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 9px; }
.bar { position: relative; min-width: 0; --c: #58c987; }
.bar.happy { --c: #f2c14e; } .bar.skill { --c: #5b9bf0; } .bar.stress { --c: #a884e8; } .bar.low { --c: var(--bad); }
.bar .bl { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-bottom: 4px; line-height: 1.1; white-space: nowrap; }
.bar .bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--mute); }
.bar .bv { flex: none; font-family: var(--head); font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .2s; }
.bar .track { height: 7px; background: #0a0d24; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent 0 10%); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent 0 10%); }
.bar .fill { height: 100%; background: var(--c); transition: width .6s ease, background-color .2s; }
.bar.low .bv, .bar.down .bv { color: var(--bad); } .bar.up .bv { color: var(--good); }
/* ป้ายตัวเลขลอย: เขียว = ดีกับเรา แดง = แย่กับเรา */
.pop { position: absolute; right: 0; top: calc(100% + 3px); z-index: 5; padding: 1px 6px; border-radius: 4px; font-family: var(--head); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; animation: floatup 1.5s ease-out forwards; }
.pop.good { background: #1f8f52; color: #fff; } .pop.bad { background: #c9362e; color: #fff; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }
/* แถบกว้าง (จอคอม): ทุกอย่างอยู่แถวเดียว ช่วงของปี · เงิน · ปุ่ม */
@container (min-width: 640px) {
  .hud-top { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'face name q money btns' 'face sub q money btns'; column-gap: 18px; row-gap: 0; }
  .hud-face { width: 66px; height: 60px; }
  .hud-name { align-self: end; } .hud-name .nm { font-size: 22px; } .hud-name .ag { font-size: 16px; }
  .hud-meta { display: contents; }
  .hud-sub { grid-area: sub; align-self: start; font-size: 13.5px; }
  .hud-q { grid-area: q; flex-direction: column; align-items: flex-end; gap: 7px; font-size: 13px; }
  .hud-q .qd { gap: 4px; } .hud-q .qd i { width: 8px; height: 8px; }
  .money { padding-left: 18px; border-left: 1px solid var(--line); }
  .money .ml { display: block; margin-bottom: 2px; } .money .mv { font-size: 21px; } .money .debt { font-size: 11px; }
  .hud-btn { width: 38px; height: 36px; font-size: 14px; } .hud-btn.ic::before { width: 18px; height: 18px; }
  .bars { gap: 24px; margin-top: 13px; } .bar .bl { margin-bottom: 5px; } .bar .bn { font-size: 13px; } .bar .bv { font-size: 17px; } .bar .track { height: 9px; }
  .pop { font-size: 14px; }
}

/* ---------- ฉาก ---------- */
#stage { position: relative; flex: none; background: #05060f; }
#cv { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; image-rendering: crisp-edges; }
#season, #place { position: absolute; top: 8px; font-family: var(--head); font-size: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(10, 12, 34, .62); color: #fff; backdrop-filter: blur(3px); }
#season { left: 8px; } #place { right: 8px; }
#season:empty, #place:empty { display: none; }
#caption { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(10, 12, 30, .82); font-size: 14px; line-height: 1.5; text-align: center; }

/* ---------- เครื่องมือชีวิต ---------- */
#tool { flex: 1; min-height: 0; padding: 10px; display: flex; }
.tool-frame { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.tool-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 12px; }
.tabs { flex: none; display: flex; gap: 4px; padding: 0 8px 6px; }
.tab { flex: 1; padding: 7px 2px; border-radius: 10px; font-size: 12.5px; white-space: nowrap; transition: background .15s; }
.tool-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; overscroll-behavior: contain; }
.tool-foot { flex: none; padding: 8px 12px 12px; display: flex; gap: 8px; }
.tool-foot:empty { display: none; }
.primary { flex: 1; padding: 12px; border-radius: 13px; font-family: var(--head); font-size: 16px; font-weight: 700; background: linear-gradient(180deg, var(--accent2), var(--accent)); color: #2a1404; box-shadow: 0 4px 0 #b85a26, 0 8px 16px rgba(255, 140, 70, .25); transition: transform .08s, box-shadow .08s, filter .15s; }
.primary:hover { filter: brightness(1.06); }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #b85a26; }
.ghost { padding: 11px 13px; border-radius: 13px; font-size: 14px; border: 1.5px solid currentColor; opacity: .85; transition: opacity .15s; }
.ghost:hover { opacity: 1; }
h3 { font-family: var(--head); font-size: 15px; margin: 2px 0 8px; }
.note { font-size: 13px; opacity: .78; margin: 6px 0; line-height: 1.5; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: -2px 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .07); font-size: 13px; }
.q-head b { font-family: var(--head); font-size: 14px; }
.auto { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13px; cursor: pointer; }
.auto input { width: 18px; height: 18px; accent-color: var(--accent); }

/* สมุดพก (วัยเด็ก) */
.notebook { background: #fdf6e3; color: #3a3226; font-family: var(--hand);
  background-image: linear-gradient(90deg, transparent 22px, #e9a3a3 22px, #e9a3a3 23px, transparent 23px), repeating-linear-gradient(#fdf6e3 0 27px, #c9dcef 27px 28px); }
.notebook .tool-top { background: #3f6fb0; color: #fff; font-weight: 600; background-image: radial-gradient(circle at 9px 7px, #fdf6e3 3px, transparent 3.5px); background-size: 18px 14px; background-repeat: repeat-x; padding: 16px 12px 5px 14px; }
.notebook .tool-body, .notebook .tabs, .notebook .tool-foot { padding-left: 30px; }
.notebook .tabs { padding-top: 6px; }
.notebook .tab { background: #efe3c2; } .notebook .tab.on { background: #3f6fb0; color: #fff; }
.notebook { --q-bg: #fff3a8; --q-line: #d9a514; --q-ink: #4a3a05; --a-bg: #ffffff; --a-line: #3f6fb0; --a-ink: #1f3b63; --a-soft: #e3edfa; }
.notebook .bubble.in { background: #fffbe0; border: 1px solid #e6d58a; }
.notebook .bubble.q { transform: rotate(-.4deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .08); }

/* มือถือ (วัยรุ่น–วัยทำงาน): หน้าตาแบบไอโฟนรุ่นใหม่ — ขอบไทเทเนียมบาง ไดนามิกไอส์แลนด์ แถบแท็บด้านล่าง ขีดโฮม */
.phone {
  --ios-bg: #f2f2f7; --ios-card: #ffffff; --ios-sep: rgba(60, 60, 67, .18); --ios-blue: #0a84ff; --ios-label2: rgba(60, 60, 67, .62);
  --q-bg: #e5f0ff; --q-line: #0a84ff; --q-ink: #0b2a55; --a-bg: #ffffff; --a-line: #1f9d57; --a-ink: #0f4a2a; --a-soft: #e2f6e9;
  /* ขอบจอสีดำ + กรอบไทเทเนียมบาง (ไฮไลต์ด้านบน เงาด้านล่าง) */
  position: relative; background: var(--ios-bg); color: #1c1c1e; border-radius: 46px; border: 6px solid #050507; background-clip: padding-box;
  box-shadow: 0 0 0 1px #2a2b30, 0 0 0 2.5px #7d8089, 0 0 0 3.5px #3b3d43, inset 0 0 0 1px rgba(255, 255, 255, .04), 0 22px 44px rgba(0, 0, 0, .6);
  font-feature-settings: 'tnum';
}
.phone .tool-top { order: 0; position: relative; height: 44px; padding: 0 26px 0 30px; background: var(--ios-bg); color: #000; font-family: -apple-system, 'SF Pro Text', 'Inter', var(--head); font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.phone .island { position: absolute; left: 50%; top: 9px; width: 96px; height: 27px; margin-left: -48px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px #1b1b1f; }
.phone .island::after { content: ''; position: absolute; right: 13px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4a7a 0 2px, #0d1020 3px); }
.phone .sb-right { display: flex; align-items: center; gap: 5px; }
.phone .sb-net { font-size: 12.5px; font-weight: 700; }
.phone .sig { display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.phone .sig b { width: 3px; border-radius: 1px; background: #000; }
.phone .sig b:nth-child(1) { height: 4px; } .phone .sig b:nth-child(2) { height: 6px; } .phone .sig b:nth-child(3) { height: 8.5px; } .phone .sig b:nth-child(4) { height: 11px; }
.phone .bat { position: relative; width: 24px; height: 12px; border-radius: 4px; border: 1.2px solid rgba(0, 0, 0, .4); padding: 1.2px; box-sizing: border-box; display: flex; }
.phone .bat::after { content: ''; position: absolute; right: -3.5px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0, 0, 0, .4); }
.phone .bat b { display: block; height: 100%; border-radius: 2px; background: #000; }
.phone .bat.low b { background: #ff3b30; }
.phone .tool-body { order: 1; background: var(--ios-bg); }
.phone .tool-foot { order: 2; background: var(--ios-bg); border-top: 0; padding: 6px 14px 8px; }
/* แถบแท็บด้านล่างแบบกระจกฝ้า */
.phone .tabs { order: 3; gap: 0; padding: 6px 6px 22px; background: rgba(249, 249, 251, .86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-top: .5px solid var(--ios-sep); border-bottom: 0; }
.phone .tab { background: none; color: #8e8e93; border-radius: 12px; padding: 3px 1px 1px; font-size: 10.5px; font-weight: 600; }
.phone .tab .ti { font-size: 19px; filter: grayscale(1) opacity(.55); transition: filter .15s, transform .15s; }
.phone .tab.on { background: none; color: var(--ios-blue); }
.phone .tab.on .ti { filter: none; transform: scale(1.08); }
/* ขีดโฮมด้านล่าง */
.phone::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 120px; height: 4.5px; margin-left: -60px; border-radius: 3px; background: rgba(0, 0, 0, .82); pointer-events: none; z-index: 3; }
.phone .tabs[hidden] ~ .tool-foot { padding-bottom: 24px; }
.phone .tabs[hidden] ~ .tool-body { padding-bottom: 26px; }
/* การ์ดและปุ่มแบบ iOS */
.phone h3 { font-family: -apple-system, 'SF Pro Display', var(--head); font-size: 17px; letter-spacing: -.2px; }
.phone .rows, .phone .home-card, .phone .q-head { background: var(--ios-card); border-radius: 14px; box-shadow: none; }
.phone .rows { padding: 2px 14px; }
.phone .q-head { border: 0; }
.phone .act, .phone .slot.full { background: var(--ios-card); border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); border-radius: 14px; }
.phone .slot { border-radius: 14px; }
.phone .primary { border-radius: 999px; padding: 13px; background: linear-gradient(180deg, #ffa25f, #ff8a3d); box-shadow: 0 6px 16px rgba(255, 138, 61, .35); }
.phone .primary:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(255, 138, 61, .3); }
.phone .ghost { border-radius: 999px; border: 0; background: rgba(120, 120, 128, .14); color: #1c1c1e; opacity: 1; }
.phone .mini { border-radius: 999px; padding: 6px 13px; }
.phone .mini:not(:disabled):not(.ghost-mini) { background: var(--ios-blue); color: #fff; }
.phone .shop-item, .phone .person { border-bottom: .5px solid var(--ios-sep); }
.phone .bubble.in { background: #fff; border-radius: 6px 18px 18px 18px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.phone .bubble.out { border-radius: 18px 6px 18px 18px; }

/* ปฏิทินแขวนผนัง (วัยชรา) */
.calendar { background: #fbf4e4; color: #3b2a1f; font-size: 16px; border: 1px solid #d9c9a5; }
.calendar .tool-top { background: linear-gradient(180deg, #c8362c, #a3231b); color: #ffe9c9; font-family: var(--head); font-size: 13px; padding: 8px 12px; }
.calendar .tabs { padding-top: 6px; }
.calendar .tab { background: #f0e3c6; font-size: 13px; } .calendar .tab.on { background: #b3261e; color: #fff; }
.calendar { --q-bg: #ffe3dc; --q-line: #b3261e; --q-ink: #5a1410; --a-bg: #ffffff; --a-line: #8a6a1f; --a-ink: #4a3608; --a-soft: #f6ecd0; }
.calendar .bubble.in { background: #fff; border-radius: 4px 10px 10px 4px; }

/* ---------- ตารางชีวิต ---------- */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 7px; margin-bottom: 10px; }
.slot { min-height: 54px; border-radius: 12px; border: 2px dashed rgba(0, 0, 0, .25); font-size: 12.5px; line-height: 1.25; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.slot .e { font-size: 20px; }
.slot.full { border-style: solid; border-color: var(--accent); background: rgba(255, 255, 255, .85); box-shadow: 0 2px 0 rgba(0, 0, 0, .1); animation: pop .2s ease; }
.slot.lock { border-style: solid; border-color: transparent; background: rgba(0, 0, 0, .1); opacity: .85; }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.act { padding: 7px 3px; border-radius: 12px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .12); font-size: 12.5px; line-height: 1.3; position: relative; box-shadow: 0 2px 0 rgba(0, 0, 0, .1); transition: transform .08s, background .15s; }
.act:hover { background: #fff; }
.act .e { display: block; font-size: 20px; }
.act:active { transform: translateY(2px) scale(.97); box-shadow: none; }
.act .n { position: absolute; top: 2px; right: 5px; font-size: 11px; font-weight: 700; color: #c2452d; }
.act-desc { min-height: 20px; font-size: 13px; margin: 8px 0 0; opacity: .8; }

/* ---------- เหตุการณ์ ---------- */
.ev-title { font-family: var(--head); font-weight: 700; font-size: 14px; color: #b3261e; margin-bottom: 6px; }
.sender { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .1); display: grid; place-items: center; font-size: 18px; flex: none; }
.bubble { padding: 10px 13px; border-radius: 13px; line-height: 1.6; margin: 6px 0; max-width: 94%; white-space: pre-line; animation: pop .25s ease; }
.bubble.out { margin-left: auto; width: fit-content; font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.bubble.q { background: var(--q-bg); color: var(--q-ink); border: 0; border-left: 5px solid var(--q-line); border-radius: 6px 14px 14px 6px; font-weight: 600; max-width: 100%; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.bubble.out { background: var(--a-line); color: #fff; }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--a-line); }
.choices-label { font-family: var(--head); font-size: 12.5px; font-weight: 700; color: var(--a-line); letter-spacing: .3px; }
.choice { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 13px; background: var(--a-bg); color: var(--a-ink); border: 2px solid var(--a-line); box-shadow: 0 3px 0 var(--a-line); transition: transform .08s, border-color .15s; animation: pop .25s ease backwards; }
.choice:nth-child(3) { animation-delay: .05s; } .choice:nth-child(4) { animation-delay: .1s; } .choice:nth-child(5) { animation-delay: .15s; } .choice:nth-child(6) { animation-delay: .2s; }
.choice:not(:disabled):hover { background: var(--a-soft); }
.c-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--a-line); color: #fff; font-family: var(--head); font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.c-main { flex: 1; min-width: 0; }
.choice:disabled { border-color: rgba(0, 0, 0, .25); } .choice:disabled .c-num { background: rgba(0, 0, 0, .35); }
.choice:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.choice:disabled { opacity: .5; box-shadow: none; }
.c-label { font-weight: 600; line-height: 1.4; }
.c-sub { font-size: 12.5px; opacity: .75; margin-top: 2px; }
.c-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.c-dis { font-size: 12.5px; margin-top: 3px; color: #a33; }
.tag { font-size: 11.5px; padding: 1px 8px; border-radius: 9px; background: rgba(0, 0, 0, .08); font-family: var(--ui); }
.tag.dice { background: #ffe9a8; color: #6b4a00; font-weight: 600; }
.roll { text-align: center; font-size: 30px; margin: 10px 0; animation: shake .22s infinite; }
@keyframes shake { 50% { transform: translateX(4px) rotate(14deg); } }
.verdict { text-align: center; font-family: var(--head); font-weight: 700; margin: 8px 0 0; animation: pop .3s ease; }
.verdict.ok { color: #1e8a48; } .verdict.no { color: #c2372f; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.chip { font-size: 12.5px; padding: 3px 10px; border-radius: 10px; font-family: var(--ui); font-weight: 700; animation: pop .3s ease backwards; border: 1.5px solid transparent; white-space: nowrap; }
.chip.good { background: #d3f3df; color: #0f5a33; border-color: #5fc98a; } .chip.bad { background: #fdd9d6; color: #8a1f1a; border-color: #ee8078; }
.tag.tgood { background: #d3f3df; color: #0f5a33; } .tag.tbad { background: #fdd9d6; color: #8a1f1a; }
.liverow { padding: 5px 0; border-bottom: 1px dotted rgba(0, 0, 0, .15); animation: pop .2s ease; }
.liverow .livet { font-weight: 600; font-size: 14px; } .liverow .chips { margin: 3px 0 0; }

/* ---------- สรุป / แท็บเงิน คน บันทึก ---------- */
.rows { margin: 0 0 8px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted rgba(0, 0, 0, .18); font-size: 14px; }
.row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row.total { border-bottom: 0; font-weight: 700; font-size: 15px; padding-top: 6px; }
.pos { color: #17703f; } .neg { color: #b22a2a; }
.notes { margin: 8px 0; padding: 0; list-style: none; }
.notes li { padding: 5px 0; line-height: 1.5; font-size: 14px; }
.dream-done { margin: 8px 0; padding: 12px; border-radius: 13px; background: linear-gradient(135deg, #fff3c4, #ffd98a); color: #5c4300; font-weight: 700; text-align: center; animation: pop .4s ease; }
.person, .shop-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dotted rgba(0, 0, 0, .18); }
.person.gone { opacity: .5; }
.who { flex: 1; min-width: 0; line-height: 1.35; font-size: 14px; }
.who small { display: block; opacity: .7; font-size: 12px; }
.hearts { color: #e5484d; letter-spacing: 1px; white-space: nowrap; text-align: right; }
.hearts small { display: block; letter-spacing: 0; color: inherit; opacity: .75; font-size: 11.5px; font-family: var(--head); }
.mini { padding: 6px 11px; border-radius: 10px; background: var(--accent); color: #241203; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mini:disabled { background: rgba(0, 0, 0, .12); color: inherit; opacity: .6; }
.mini.warn { background: #c2372f; color: #fff; }
.who .fx { opacity: 1; color: #1d6b45; font-size: 11.5px; }
.who .fit { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #fff0c2; color: #6b4b00; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.home-card { margin: 4px 0 6px; padding: 9px 11px; border-radius: 12px; background: rgba(0, 0, 0, .05); font-size: 13px; line-height: 1.5; }
.home-card b { font-size: 15px; }
.home-card .fx { color: #1d6b45; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.chips span { padding: 2px 8px; border-radius: 9px; background: rgba(0, 0, 0, .06); font-size: 12.5px; }
.chips span.off { opacity: .5; text-decoration: line-through; }
.act .bo { position: absolute; left: 4px; top: 2px; font-size: 10px; line-height: 1; opacity: .9; }
.logrow { display: flex; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.45; animation: pop .2s ease; }
.logrow .a { flex: none; width: 46px; opacity: .65; font-size: 12px; padding-top: 2px; }

/* ---------- แผ่นซ้อน ---------- */
#overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
#overlay > * { pointer-events: auto; }
/* ต้องเป็น block: ถ้าเป็น flex หนังสือจะถูกบีบให้สูงเท่าจอ พื้นหลังจึงขาดกลางหน้าเมื่อเนื้อหายาว */
#overlay.full { display: block; background: #14100c; overflow-y: auto; }
#overlay.dim { background: rgba(5, 6, 14, .6); pointer-events: auto; backdrop-filter: blur(2px); }
.sheet { background: linear-gradient(180deg, #252c62, var(--panel)); border-radius: 22px 22px 0 0; padding: 18px 18px 22px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); max-height: 74%; overflow-y: auto; border-top: 1px solid #4a54a0; animation: rise .3s ease; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.sheet h1 { font-family: var(--head); font-size: 40px; margin: 0; letter-spacing: 1px; background: linear-gradient(180deg, #ffe59a, #f6a93b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.sheet p { line-height: 1.6; color: #d3d9ef; margin: 6px 0 14px; }
.stack { display: flex; flex-direction: column; gap: 9px; }
.sheet .ghost { color: #d3d9ef; }
.tiny { font-size: 12px; color: var(--mute); text-align: center; margin-top: 10px; }
.volrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
.volrow span { width: 110px; } .vol { flex: 1; accent-color: var(--accent); }
.cert { background: #fffdf3; color: #3a2f22; border-radius: 12px; padding: 14px; border: 3px double #b08d57; font-family: var(--ui); box-shadow: inset 0 0 40px rgba(176, 141, 87, .18); }
.cert h2 { font-family: var(--head); text-align: center; margin: 0 0 2px; font-size: 20px; color: #7a4b12; }
.cert .sub { text-align: center; font-size: 12px; opacity: .7; margin-bottom: 8px; }
.traits { display: flex; gap: 6px; margin: 8px 0 2px; }
.trait { flex: 1; padding: 6px 8px; border-radius: 8px; background: #f3e9cf; font-size: 13px; line-height: 1.35; }
.trait b { display: block; }

.book { width: 100%; max-width: 480px; margin: 0 auto; padding: 22px 18px 30px; color: #2f2418; background: #f7efdc; min-height: 100%; height: auto; flex: none; font-family: var(--ui); }
.book .cover { text-align: center; border: 3px double #8a6a3a; padding: 18px 10px; margin-bottom: 16px; background: #fbf6e8; }
.book .cover small { letter-spacing: 2px; color: #8a6a3a; }
.book .cover h1 { font-family: var(--head); font-size: 28px; margin: 6px 0 2px; }
.book .cover .years { font-size: 14px; opacity: .75; }
.book .cover .title { font-family: var(--head); font-size: 20px; color: #a3271f; margin-top: 12px; }
.book h3 { border-bottom: 1px solid #c9b48a; padding-bottom: 4px; margin-top: 18px; }
.book .quote { padding: 8px 0; border-bottom: 1px dotted #c9b48a; line-height: 1.55; }
.book .quote b { display: block; font-size: 13px; color: #6b5433; }
.book .keeps { display: flex; flex-wrap: wrap; gap: 6px; }
.book .keep { padding: 4px 10px; border-radius: 12px; background: #eadfc3; font-size: 13px; }
.book .carry { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.book .carry button { text-align: left; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1.5px solid #c9b48a; line-height: 1.4; }
.book .carry button small { display: block; opacity: .7; }
.book .carry button.sel { border-color: #a3271f; background: #fff1e6; }
.book .primary { width: 100%; margin-top: 14px; }

@media (max-height: 680px) { #hud { padding: 6px 10px; } .bars { margin-top: 6px; } .slot { min-height: 44px; } }
@media (max-width: 380px) { .bars { gap: 9px; } .hud-top { column-gap: 8px; } }

/* ---------- มือถือจริง: ให้เครื่องมือชีวิตชิดขอบล่างจอ ไม่มีกรอบล่าง ----------
   บนมือถือจริงมีขีดโฮมกับแถบเบราว์เซอร์อยู่แล้ว จึงตัดขอบล่าง มุมโค้งล่าง และขีดโฮมปลอมของโทรศัพท์ในเกมออก
   แล้วเว้นที่ด้านล่างตาม safe-area เพื่อไม่ให้ปุ่มไปอยู่ใต้แถบของ Safari */
@media (max-width: 899px) {
  #tool { padding-bottom: 0; }
  .tool-frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .phone { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .phone::after { display: none; }
  .tool-frame:not(.phone) > :last-child { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .phone .tabs { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .phone .tabs[hidden] ~ .tool-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .phone .tabs[hidden] ~ .tool-body { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- จอคอม: ฉากใหญ่ด้านซ้าย เครื่องมือชีวิตด้านขวา ---------- */
@media (min-width: 900px) {
  html, body { font-size: 16px; }
  body { display: grid; place-items: center; }
  #app { max-width: min(1320px, calc(100vw - 32px)); width: 100%; height: min(100dvh - 32px, 860px); border-radius: 22px; border: 1px solid #343d75; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: grid; grid-template-columns: minmax(0, 1fr) 430px; grid-template-rows: auto minmax(0, 1fr); }
  #hud { grid-column: 1; grid-row: 1; padding: 13px 20px 14px; }
  #stage { grid-column: 1; grid-row: 2; container-type: size; display: grid; place-items: center; background: radial-gradient(ellipse at center, #141a3e 0%, #05060f 80%); }
  #cv { width: min(100cqw - 24px, (100cqh - 24px) * 16 / 9); border-radius: 12px; box-shadow: 0 0 0 3px #2c3568, 0 20px 50px rgba(0, 0, 0, .55); }
  #season, #place { top: 18px; font-size: 14px; padding: 5px 14px; } #season { left: 22px; } #place { right: 22px; }
  #tool { grid-column: 2; grid-row: 1 / span 2; padding: 14px; background: #0c1028; border-left: 1px solid var(--line); }
  #tool:has(.phone) { padding: 22px 26px; background: radial-gradient(ellipse at 50% 40%, #1a2150 0%, #0a0d24 75%); }
  .phone { border-width: 9px; border-radius: 52px; }
  .phone .tool-top { padding: 0 30px 0 34px; }
  #overlay { justify-content: center; align-items: center; }
  #overlay:not(.full):not(.dim) { align-items: flex-end; justify-content: center; padding: 0 444px 40px 14px; }
  .sheet { width: 460px; max-height: 86%; border-radius: 22px; border: 1px solid #4a54a0; }
  #app.intro #overlay { padding: 0 0 36px; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, rgba(8, 10, 28, .15), rgba(8, 10, 28, .7)); }
  #app.intro { grid-template-columns: minmax(0, 1fr) 0; }
  #app.intro #hud { display: none; } #app.intro #stage { grid-row: 1 / span 2; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .tool-body { padding: 14px 18px; }
}

/* ---------- แท็บสองบรรทัด (ไอคอน + ชื่อ) รองรับหกแท็บบนจอมือถือ ---------- */
.tab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 1px 4px; font-size: 11.5px; min-width: 0; }
.tab .ti { font-size: 16px; line-height: 1.1; }
.tab .tl { line-height: 1.2; }
.calendar .tab { font-size: 12.5px; }

/* ---------- แอป "งาน" และ "ลงทุน" ---------- */
.jobcard { margin: 0 0 10px; padding: 4px 10px 8px; border-radius: 13px; background: rgba(0, 0, 0, .05); border: 1px solid rgba(0, 0, 0, .1); }
.jobcard .shop-item:first-child .who { font-family: var(--head); font-weight: 700; font-size: 15px; }
.jobcard .shop-item:first-child .who small { font-family: inherit; font-weight: 400; }
.ladder { list-style: none; margin: 8px 0 4px; padding: 0; }
.ladder li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; font-size: 13px; border-left: 3px solid rgba(0, 0, 0, .15); opacity: .62; }
.ladder li b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.ladder li.done { border-left-color: #1f9d57; opacity: .8; }
.ladder li.cur { border-left-color: var(--accent); background: rgba(240, 168, 48, .2); opacity: 1; font-weight: 700; border-radius: 0 8px 8px 0; }
.checks { margin: 2px 0 8px; }
.chk { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0; }
.chk.ok { color: #157a43; } .chk.no { color: #b3261e; }
.chk b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter { margin: 6px 0 8px; }
.meter-top { display: flex; justify-content: space-between; font-size: 13px; }
.meter-bar { height: 9px; border-radius: 6px; background: rgba(0, 0, 0, .14); overflow: hidden; margin: 3px 0; }
.meter-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f0a830, #e8762c); transition: width .3s; }
.meter small { display: block; font-size: 12px; opacity: .72; line-height: 1.4; }
.seg { display: flex; gap: 5px; margin: 4px 0 8px; }
.seg-b { flex: 1; padding: 7px 4px; border-radius: 10px; font-size: 12.5px; background: rgba(0, 0, 0, .08); white-space: nowrap; min-width: 0; }
.seg-b.on { background: var(--accent); color: #241203; font-weight: 700; }
.shop-item.off { opacity: .55; }
.shop-item .who small + small { margin-top: 1px; }
.mini.on { background: #1f9d57; color: #fff; }
.btncol { display: flex; flex-direction: column; gap: 5px; flex: none; }
.asset .px b { font-weight: 700; }
.asset .px.pos b, .asset .hold.pos { color: #157a43; opacity: 1; }
.asset .px.neg b, .asset .hold.neg { color: #b3261e; opacity: 1; }
.asset .hold { font-weight: 700; }
.spark { font-family: monospace; letter-spacing: -1px; opacity: .8; }
.ev-title.big { padding: 7px 10px; border-radius: 10px; background: linear-gradient(135deg, #3a1d5c, #7a2a4a); color: #ffe9b0; font-size: 15px; animation: pop .45s ease; }
/* ตอนหนึ่งของเส้นเรื่องยาว: ป้ายชื่อเรื่องตัวเล็กอยู่บน ชื่อตอนตัวใหญ่อยู่ล่าง */
.ev-title.arc { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #12304a, #1f5f6b); color: #fff; }
.ev-title.arc small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #9fe3e0; }

/* ---------- กิจกรรมแบ่งหมวด ---------- */
.act-group { margin-top: 8px; }
.act-gname { font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: .3px; opacity: .6; margin: 0 2px 4px; }

/* ---------- สรุปสิ้นปี: เรื่องราวของปี ---------- */
.story { margin: 4px 0 10px; font-size: 15px; line-height: 1.75; }
.memory { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--accent, #e89a3c); background: rgba(232, 154, 60, .10); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.7; }
.memory small { display: block; font-family: var(--head); font-weight: 700; font-size: 11px; letter-spacing: .3px; opacity: .65; margin-bottom: 3px; }
.facts { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.rows.compact { margin-top: 8px; }
.money-more { margin: 2px 0 10px; font-size: 12.5px; }
.money-more summary { cursor: pointer; opacity: .7; padding: 4px 2px; }
.money-more .rows { margin-top: 4px; font-size: 13px; }
.more-items.hide { display: none; }
.ghost-mini { display: block; margin: 8px auto 4px; background: rgba(0, 0, 0, .08); color: inherit; }

/* ---------- สมุดสะสมข้ามชาติ (กระดาษเล่มเดียวกับหนังสืออนุสรณ์) ---------- */
.colbtn { border: 1.5px dashed #6b74b8; border-radius: 12px; }
.colbook { max-width: 560px; padding-bottom: 0; display: flex; flex-direction: column; }
.colbook .cover { position: relative; background: #fbf6e8 repeating-linear-gradient(180deg, transparent 0 27px, rgba(138, 106, 58, .09) 27px 28px); }
.col-big { margin: 12px auto 2px; max-width: 280px; }
.col-track { flex: 1; height: 9px; border-radius: 9px; background: #e6d8b6; overflow: hidden; box-shadow: inset 0 1px 2px rgba(60, 40, 10, .25); }
.col-track i { display: block; height: 100%; min-width: 2px; border-radius: 9px; background: linear-gradient(90deg, #c98a2b, #a3271f); transition: width .5s ease; }
.col-empty { margin-top: 10px; font-family: var(--hand); font-size: 14px; line-height: 1.55; color: #6b5433; }
.col-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; margin: 0 -2px 6px; background: #f7efdc; border-bottom: 1px solid #c9b48a; scrollbar-width: none; }
.col-tabs::-webkit-scrollbar { display: none; }
.col-tabs button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 11px; border-radius: 12px; background: #eadfc3; color: #4a3820; font-size: 13.5px; font-weight: 600; line-height: 1.2; border: 1.5px solid transparent; transition: background .15s, transform .1s; }
.col-tabs button small { font-size: 11px; font-weight: 400; opacity: .7; }
.col-tabs button:hover { background: #e2d3ad; } .col-tabs button:active { transform: scale(.96); }
.col-tabs button.on { background: #fffaf0; border-color: #a3271f; color: #a3271f; box-shadow: 0 2px 0 rgba(163, 39, 31, .2); }
.col-page { padding-bottom: 8px; animation: pop .2s ease; }
.col-hint { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.55; color: #6b5433; }
.col-sub { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 14px; }
.col-sub b { flex: none; min-width: 6em; }
.col-meter { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b5433; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.col-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 8px; border-radius: 12px; background: #fffaf0; border: 1.5px solid #d8c59a; box-shadow: 0 2px 0 rgba(120, 90, 40, .12); min-height: 86px; }
.col-card .col-e { font-size: 24px; line-height: 1.1; }
.col-card .col-n { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.col-t { font-size: 11px; color: #8a6a3a; }
.col-d { font-size: 11.5px; line-height: 1.4; color: #6b5433; opacity: .9; }
.col-card.locked, .col-arc.locked, .col-rec.locked { background: transparent; border: 1.5px dashed #c9b48a; box-shadow: none; color: #a8916a; }
.col-card.locked .col-e { filter: grayscale(1); opacity: .45; }
.col-card.locked .col-n { letter-spacing: 3px; }
.col-list { display: flex; flex-direction: column; gap: 6px; }
.col-arc { border-radius: 12px; background: #fffaf0; border: 1.5px solid #d8c59a; padding: 0; }
.col-arc summary, .col-arc.locked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.col-arc.locked { cursor: default; }
.col-arc summary::-webkit-details-marker { display: none; }
.col-arc summary::after { content: '▾'; margin-left: 2px; opacity: .5; transition: transform .2s; }
.col-arc[open] summary::after { transform: rotate(180deg); }
.col-arc .col-e { font-size: 20px; flex: none; }
.col-arc .col-n { flex: 1; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.col-arc.locked .col-n { font-weight: 400; letter-spacing: .5px; }
.col-end { flex: none; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eadfc3; color: #6b5433; }
.col-arc > .col-q, .col-arc > .col-t { margin: 0 12px; }
.col-arc > .col-t { padding: 6px 0 10px; }
.col-q { padding: 6px 0; border-bottom: 1px dotted #c9b48a; font-family: var(--hand); font-size: 14px; line-height: 1.5; }
.col-q.locked { color: #b09c78; letter-spacing: 2px; }
.col-left { margin: 14px 0 4px; text-align: center; font-family: var(--hand); font-size: 14px; color: #8a6a3a; }
.col-left.done { color: #3f7a3a; }
.col-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.col-stats > div { text-align: center; padding: 10px 4px; border-radius: 12px; background: #fffaf0; border: 1.5px solid #d8c59a; }
.col-stats b { display: block; font-family: var(--head); font-size: 22px; color: #a3271f; }
.col-stats small { font-size: 11.5px; color: #6b5433; }
.col-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.col-rec { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'e n' 'e v' 'e w'; column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: #fffaf0; border: 1.5px solid #d8c59a; }
.col-rec .col-e { grid-area: e; font-size: 22px; } .col-rec .col-n { grid-area: n; font-size: 12.5px; color: #6b5433; }
.col-rec b { grid-area: v; font-family: var(--head); font-size: 17px; } .col-rec small { grid-area: w; font-size: 11.5px; color: #8a6a3a; }
.col-foot { position: sticky; bottom: 0; margin: 10px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(247, 239, 220, 0), #f7efdc 30%); }
.col-foot .primary { margin-top: 0; }
.col-fresh .logrow .a { width: 28px; font-size: 16px; opacity: 1; }
@media (max-width: 380px) { .col-grid { grid-template-columns: repeat(2, 1fr); } .col-stats b { font-size: 18px; } }
@media (min-width: 900px) {
  .colbook { max-width: 760px; padding: 26px 28px 0; }
  .col-foot { margin: 10px -28px 0; padding: 12px 28px 16px; }
  .col-foot .primary { max-width: 320px; display: block; margin: 0 auto; }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* เปิดสมุดจากหน้าแรก: พื้นหลังของหน้าแรกโปร่ง จึงต้องทับให้มืดเหมือนตอนเปิดหนังสืออนุสรณ์ */
#app.intro #overlay.full:has(.colbook) { display: block; padding: 0; background: rgba(12, 9, 6, .9); }

/* ---- ระบบนิสัยติดตัว: ป้ายบอกนิสัยบนตัวเลือกที่มีให้เพราะนิสัย ---- */
.c-trait { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 0 7px; margin-bottom: 3px; border-radius: 999px; background: #f3e6ff; color: #6a2fa0; border: 1px solid #c79ae8; }
.choice:has(.c-trait) { border-style: dashed; }

/* ---- ระบบเทศกาล: แถบเทศกาลถัดไป + หน้าปฏิทินเทศกาล (ui/festcal.js) ---- */
.fest-strip { display: flex; align-items: center; gap: 8px; width: 100%; margin: -2px 0 8px; padding: 7px 10px; border-radius: 12px; border: 1px solid rgba(200, 54, 44, .25); background: linear-gradient(90deg, rgba(255, 214, 120, .35), rgba(255, 160, 120, .18)); color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.fest-strip .fs-e { font-size: 20px; line-height: 1; }
.fest-strip .fs-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fest-strip .fs-t b { color: #b5402a; }
.fest-strip .fs-go { font-size: 20px; opacity: .55; }
.phone .fest-strip { border: 0; border-radius: 14px; background: linear-gradient(90deg, #fff1cf, #ffe2d6); }
.fc-who { font-size: 12px; opacity: .75; margin: -4px 0 8px; }
.fc-h { font-size: 12px; font-weight: 700; letter-spacing: .3px; opacity: .7; margin: 10px 2px 4px; }
.fc-list { display: flex; flex-direction: column; gap: 4px; }
.fc-row { display: grid; grid-template-columns: 34px 24px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.phone .fc-row { background: var(--ios-card, #fff); }
.fc-row.top { outline: 2px solid #ff8f4d; }
.fc-m { font-size: 11px; font-weight: 700; text-align: center; color: #b5402a; }
.fc-e { font-size: 18px; text-align: center; }
.fc-n { min-width: 0; display: flex; flex-direction: column; }
.fc-n b { font-size: 14px; }
.fc-n small { font-size: 11px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-p { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 52px; }
.fc-p small { font-size: 11px; opacity: .7; }
.fc-tag { font-size: 10px; padding: 0 6px; border-radius: 999px; background: rgba(181, 64, 42, .12); color: #b5402a; }
.fc-bar { display: block; width: 48px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.fc-bar b { display: block; height: 100%; background: linear-gradient(90deg, #ffb35c, #ff8f4d); }
.fc-note { font-size: 11px; opacity: .6; margin: 8px 2px 0; }
.fc-past { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .06); }

/* ---------- ระบบเส้นทางความฝัน (ui/dreamui.js) ---------- */
.ev-title.dream { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #4a2a78, #b0527a); color: #fff; }
.ev-title.dream small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #ffd9f0; }
.act .dr { position: absolute; left: 4px; bottom: 2px; font-size: 10px; line-height: 1; }
.dr-mini { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0; padding: 8px 12px; border-radius: 14px; text-align: left; background: linear-gradient(135deg, #fff4fb, #f3e9ff); border: 1px solid rgba(120, 60, 160, .2); color: #3a2350; }
.dr-mini-e { font-size: 26px; flex: none; }
.dr-mini-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dr-mini-t b { font-family: var(--head); font-size: 14px; }
.dr-mini-t small { font-size: 12px; opacity: .78; line-height: 1.35; }
.dr-mini-t .meter-bar { margin: 3px 0 2px; height: 6px; }
.dr-mini-t .meter-bar i, .dr-next .meter-bar i { background: linear-gradient(90deg, #c56bd6, #7a5cff); }
.dr-mini-go { font-size: 22px; opacity: .5; flex: none; }
.dr-card { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.dr-head { display: flex; align-items: center; gap: 10px; }
.dr-head > span:last-child { display: flex; flex-direction: column; }
.dr-head b { font-family: var(--head); font-size: 17px; line-height: 1.25; }
.dr-big { font-size: 34px; line-height: 1; }
.dr-cat { font-size: 11.5px; opacity: .65; }
.dr-desc { margin: 6px 0 4px; font-size: 13.5px; line-height: 1.45; }
.dr-since, .dr-hint { display: block; font-size: 12px; opacity: .6; line-height: 1.4; }
.dr-hint { margin: 4px 2px 10px; }
.dr-next > b { font-family: var(--head); font-size: 15px; }
.dr-warn { display: block; margin-top: 4px; font-size: 12px; color: #b3261e; line-height: 1.4; }
.dr-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .06); opacity: .55; }
.dr-chip.on { background: #efe3ff; color: #4a2a78; opacity: 1; font-weight: 600; }
.dr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 12px; }
.dr-empty small { font-size: 12.5px; opacity: .65; }
.dr-past .row b { font-weight: 500; font-size: 12.5px; }

/* ความชอบ (sim/likes.js): ดาวฝีมือบนปุ่ม และแถบสิ่งที่ชอบในหมวดเวลาของตัวเอง */
.act .lv { position: absolute; bottom: 2px; right: 5px; font-size: 8.5px; line-height: 1; letter-spacing: -1px; color: #d39a1c; }
.like-line { font-size: 11.5px; line-height: 1.45; opacity: .78; margin: -2px 2px 6px; }
.like-line .like-tag.off { opacity: .5; }

/* ---- หน้าปก ---- */
/* โครง (สร้างใน ui/title.js): .tt-hero ฉากพิกเซลเต็มพื้น · .tt-top โลโก้ · .tt-tag คำโปรย · .tt-menu ปุ่ม · .tt-foot · .tt-plate พื้นหลังแผงเมนู
   สามแบบ: ค่าเริ่มต้น = ซ้อนแนวตั้ง (มือถือ/แท็บเล็ตตั้ง) · จอกว้าง ≥900×620 = โปสเตอร์เต็มจอ ปุ่มเรียงแถวล่าง · จอแนวนอนเตี้ย = ซ้ายฉาก ขวาเมนู
   ตำแหน่ง/ขนาดของฉากคำนวณใน title.js จากตำแหน่งจริงของ .tt-top .tt-tag .tt-plate จึงแก้ระยะใน CSS ได้เลยโดยฉากจะปรับตาม */
#app.intro { max-width: none; width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
#app.intro:has(.tt) #stage { visibility: hidden; }
#app.intro #overlay.tt-ov { display: block; padding: 0; background: none; pointer-events: auto; }
.tt { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'top' '.' 'tag' 'menu' 'foot'; background: linear-gradient(180deg, #161c4c, #0b0e26); color: #f6f2e4; font-family: var(--ui); -webkit-user-select: none; user-select: none; }
.tt > * { position: relative; z-index: 2; min-width: 0; }
.tt::before { content: ''; position: absolute; inset: 0 0 auto; height: 44%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 30, .58), rgba(8, 10, 30, .24) 58%, rgba(8, 10, 30, 0)); }
.tt > .tt-hero { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tt-cv { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform; }
.tt > .tt-plate { grid-area: 3 / 1 / 6 / 2; z-index: 1; margin-top: -36px; pointer-events: none; background: linear-gradient(180deg, rgba(14, 18, 50, 0), rgba(14, 18, 50, .9) 36px, #12173e 96px, #0c1030); }

/* โลโก้: ตัวอักษรสองชั้น (i = ขอบเข้ม, b = ทองไล่เฉด) เผื่อที่ด้านบนให้สระและวรรณยุกต์ไม่ถูกตัด */
.tt-top { grid-area: top; padding: calc(env(safe-area-inset-top, 0px) + clamp(10px, 2.6vh, 26px)) 14px 0; text-align: center; pointer-events: none; }
.tt-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; color: #ffe7ae; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.tt-kicker::before, .tt-kicker::after { content: ''; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 217, 138, 0), #ffd98a); }
.tt-kicker::after { transform: scaleX(-1); }
.tt-logo { margin: 0; font-family: 'Pattaya', var(--head); font-weight: 400; font-size: clamp(34px, min(13.6vw, 6.6vh), 92px); line-height: 1.22; letter-spacing: .01em; white-space: nowrap; }
.tt-w { position: relative; display: block; }
.tt-w + .tt-w { margin-top: -.2em; }
.tt-w i, .tt-w b { display: block; font: inherit; font-style: normal; padding: .2em .14em .04em; }
.tt-w i { position: absolute; inset: 0; color: #2a1206; -webkit-text-stroke: .17em #2a1206; text-shadow: 0 .08em 0 #2a1206, 0 .14em .22em rgba(0, 0, 0, .55); }
.tt-w b { position: relative; background: linear-gradient(180deg, #fff8d6 22%, #ffd772 50%, #f79a34 80%, #e06a1c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.tt-tag { grid-area: tag; justify-self: center; max-width: 560px; margin: 0; padding: 0 20px; font-size: 14.5px; line-height: 1.6; color: #dfe4f6; text-align: center; text-wrap: balance; }
.tt-menu { grid-area: menu; justify-self: center; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }
.tt-go { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 9px 14px 9px 10px; border-radius: 18px; text-align: left; color: #2a1404; background: linear-gradient(180deg, #ffc76f, #ff8f4d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #b85a26, 0 12px 26px rgba(255, 130, 60, .3); transition: transform .08s, box-shadow .08s, filter .15s; }
.tt-go:hover { filter: brightness(1.06); }
.tt-go:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 #b85a26; }
.tt-face { flex: none; width: 50px; height: 46px; border-radius: 12px; image-rendering: pixelated; background: linear-gradient(180deg, #8fd0ff, #dff2ff); border: 2px solid #fff6da; box-shadow: 0 2px 0 rgba(120, 50, 10, .35); }
.tt-go-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-go-t small { font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; opacity: .72; }
.tt-go-t b { font-family: var(--head); font-size: 19px; font-weight: 700; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-go-t i { font-style: normal; font-size: 12.5px; line-height: 1.5; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-go-a { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; font-size: 14px; background: rgba(42, 20, 4, .16); }
.tt-born { padding-left: 20px; }
.tt-born .tt-go-t b { font-size: 24px; }
.tt-row { display: flex; gap: 10px; }
.tt-btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 6px 10px; border-radius: 14px; font-size: 14px; line-height: 1.4; text-align: center; color: #eef0fb; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(190, 200, 255, .36); transition: background .15s, border-color .15s; }
.tt-btn:hover { background: rgba(255, 255, 255, .15); }
.tt-btn b { display: block; font-weight: 600; }
.tt-btn small { display: block; font-size: 11.5px; opacity: .7; }
.tt-nb { display: inline-block; white-space: nowrap; }
.tt-new.arm { background: #c0392f; border-color: #ffc3ba; color: #fff; }
.tt-new.arm small { opacity: .95; }
.tt-book { border-style: dashed; border-color: rgba(246, 196, 83, .62); color: #ffe7ae; }
.tt-foot { grid-area: foot; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.5; color: #a9b1d6; text-align: center; }
.tt > .tt-now { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(var(--tt-under, 0px) + 8px); padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.5; color: #fff; background: rgba(10, 12, 34, .5); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tt-now:hover { background: rgba(10, 12, 34, .72); }
.tt :is(.tt-go, .tt-btn, .tt-now):focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(20, 24, 60, .85); }

/* จอเตี้ย: ย่อระยะให้ทุกอย่างอยู่ในจอเดียว */
@media (max-height: 700px) { .tt-kicker { font-size: 11.5px; } .tt-tag { font-size: 13.5px; line-height: 1.5; } .tt-go { min-height: 60px; } .tt-face { width: 44px; height: 40px; } .tt-foot { padding-top: 8px; } }
@media (max-height: 540px) and (orientation: portrait) { .tt-tag { display: none; } }
/* แท็บเล็ตตั้ง: โลโก้บรรทัดเดียว */
@media (min-width: 600px) {
  .tt-logo { font-size: clamp(48px, min(10.6vw, 9vh), 104px); }
  .tt-w { display: inline-block; } .tt-w + .tt-w { margin-top: 0; margin-left: -.1em; }
  .tt-tag { font-size: 15.5px; }
}
/* จอกว้าง: ฉากเต็มจอ โลโก้กับคำโปรยลอยบนฟ้า ปุ่มเรียงแถวเดียวทับถนนด้านล่าง */
@media (min-width: 900px) and (min-height: 620px) {
  .tt { grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: 'top' 'tag' '.' 'menu' 'foot'; }
  .tt-top { padding-top: clamp(14px, 3.2vh, 40px); }
  .tt-kicker { font-size: 14px; }
  .tt-logo { font-size: clamp(54px, min(6.4vw, 11vh), 124px); }
  .tt-tag { max-width: calc(100% - 64px); padding: 2px 0 0; font-size: clamp(15px, 1.22vw, 19px); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 12px rgba(8, 10, 30, .8); }
  .tt > .tt-plate { grid-area: 4 / 1 / 6 / 2; margin-top: -70px; background: linear-gradient(180deg, rgba(8, 10, 28, 0), rgba(8, 10, 28, .5) 70px, rgba(8, 10, 28, .82)); }
  .tt-menu { flex-direction: row; align-items: stretch; gap: 14px; max-width: min(1040px, 100% - 64px); padding: 0; }
  .tt-go { flex: 1.5 1 0; min-height: 76px; padding-right: 18px; }
  .tt-go-t b { font-size: 21px; }
  .tt-row { flex: 2 1 0; gap: 14px; }
  .tt-btn { font-size: 15.5px; background: rgba(20, 24, 60, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .tt-btn:hover { background: rgba(60, 68, 130, .7); }
  .tt.no-save .tt-menu { max-width: min(720px, 100% - 64px); } .tt.no-save .tt-row { flex: 1 1 0; }
  .tt-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: #c3c9e6; }
  .tt > .tt-now { right: 20px; font-size: 13px; padding: 4px 12px; }
}
/* จอแนวนอนเตี้ย (มือถือตะแคง): ฉากด้านซ้าย เมนูด้านขวา */
@media (orientation: landscape) and (max-height: 619px) {
  .tt { grid-template-columns: minmax(0, 1fr) clamp(300px, 44%, 420px); grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr); grid-template-areas: 'hero .' 'hero top' 'hero tag' 'hero menu' 'hero foot' 'hero .'; }
  .tt::before { display: none; }
  .tt > .tt-hero { position: relative; inset: auto; grid-area: hero; }
  .tt > .tt-plate { grid-area: 1 / 2 / 7 / 3; margin: 0 0 0 -28px; background: linear-gradient(90deg, rgba(18, 23, 62, 0), #12173e 28px, #0e1236); }
  .tt-top { padding: 0 14px; }
  .tt-logo { font-size: clamp(27px, min(9.6vh, 4.6vw), 46px); }
  .tt-w { display: inline-block; } .tt-w + .tt-w { margin-top: 0; margin-left: -.1em; }
  .tt-tag { padding: 4px 16px 0; font-size: 13px; line-height: 1.5; }
  .tt-menu { padding: 10px calc(16px + env(safe-area-inset-right, 0px)) 0 16px; }
  .tt-foot { padding: 8px 16px 0; }
  .tt > .tt-now { right: auto; left: calc(10px + env(safe-area-inset-left, 0px)); }
}
@media (orientation: landscape) and (max-height: 440px) { .tt-tag { display: none; } .tt-kicker { font-size: 11px; } }

/* ค่อยๆ ปรากฏ + แสงวาบบนปุ่มหลัก (ปิดเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว) */
@media (prefers-reduced-motion: no-preference) {
  .tt-top { animation: tt-drop .8s cubic-bezier(.2, .8, .2, 1) .12s both; }
  .tt-tag { animation: tt-rise .7s cubic-bezier(.2, .8, .2, 1) .42s both; }
  .tt-menu { animation: tt-rise .7s cubic-bezier(.2, .8, .2, 1) .56s both; }
  .tt-foot, .tt-now { animation: tt-fade .8s ease .9s both; }
  .tt-plate { animation: tt-fade .7s ease .2s both; }
  .tt-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); animation: tt-shine 4.6s ease-in-out 1.8s infinite; pointer-events: none; }
}
@keyframes tt-drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes tt-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tt-fade { from { opacity: 0; } }
@keyframes tt-shine { 0%, 62% { left: -40%; } 100% { left: 125%; } }

/* ---- ยุคสมัย (sim/era.js): สมุดบันทึกก่อนยุคมือถือ, มือถือปุ่มกด, ป้ายปี พ.ศ. ---- */
/* สมุดบันทึกปกหนัง: วัยรุ่น/ผู้ใหญ่ในยุคที่ยังไม่มีมือถือ (ใช้โครงเดียวกับสมุดพก แต่เป็นกระดาษเก่าและปกสีน้ำตาล) */
.notebook.diary { background-color: #f6ecd2; color: #33281c; border: 1px solid #b89a6a; border-radius: 6px 14px 14px 6px; box-shadow: inset 6px 0 0 #6b4226, inset 8px 0 0 #8a5a36;
  background-image: linear-gradient(90deg, transparent 26px, #d7a08f 26px, #d7a08f 27px, transparent 27px), repeating-linear-gradient(#f6ecd2 0 27px, #d9cba6 27px 28px); }
.notebook.diary .tool-top { background: linear-gradient(180deg, #7a4a2a, #5c3620); color: #f3dfb6; padding: 9px 12px 8px 22px; font-weight: 600; letter-spacing: .02em; border-bottom: 2px solid #c9a35a; }
.notebook.diary .tool-body, .notebook.diary .tabs, .notebook.diary .tool-foot { padding-left: 34px; }
.notebook.diary .tab { background: #eadcb8; } .notebook.diary .tab.on { background: #7a4a2a; color: #f8e8c4; }
.notebook.diary { --q-bg: #f7e6b0; --q-line: #a8742c; --q-ink: #4a3208; --a-bg: #fffaf0; --a-line: #7a4a2a; --a-ink: #3e2a14; --a-soft: #efe2c4; }
.notebook.diary .bubble.in { background: #fff8e4; border: 1px solid #dcc79a; }
/* มือถือปุ่มกดจอเขียว (ราว พ.ศ. 2538–2552) */
.keypad { position: relative; background: #e7eedd; color: #1d2a1c; border: 7px solid #3c4650; border-radius: 26px 26px 34px 34px; background-clip: padding-box;
  box-shadow: 0 0 0 1px #20262c, 0 0 0 3px #6d7884, 0 18px 36px rgba(0, 0, 0, .55);
  --q-bg: #d5e6bf; --q-line: #4f7a3a; --q-ink: #1f3a14; --a-bg: #f7faf1; --a-line: #3c4650; --a-ink: #1f2a30; --a-soft: #dfe8d2; }
.keypad .tool-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 14px; background: #b9cf9a; color: #1f3312; font-family: ui-monospace, 'Courier New', monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; border-bottom: 2px solid #8fa873; border-radius: 18px 18px 0 0; }
.keypad .kp-year { flex: 1; text-align: center; }
.keypad .tabs { padding-top: 6px; background: #dfe8d2; }
.keypad .tab { background: #cbd8ba; color: #2c3b25; border-radius: 6px; } .keypad .tab.on { background: #3c4650; color: #e9f3d8; }
.keypad .tool-foot { background: #dfe8d2; border-top: 1px solid #b7c6a3; padding-bottom: 14px; border-radius: 0 0 26px 26px; }
.keypad .bubble.in { background: #f7faf1; border: 1px solid #b7c6a3; border-radius: 4px; }
.keypad .act, .keypad .slot.full { border-radius: 6px; }
.keypad .primary { border-radius: 8px; }
@media (min-width: 900px) { #tool:has(.keypad) { padding: 20px 24px; background: radial-gradient(ellipse at 50% 40%, #2a3340 0%, #10151c 75%); } }
/* ป้ายเหตุการณ์ของยุคสมัย */
.ev-title.era { padding: 6px 10px; border-radius: 8px; background: #efe3c2; color: #5a3d12; border-left: 4px solid #a8742c; }
.ev-title.era.big { background: linear-gradient(135deg, #3b2a14, #7a4a1f); color: #ffe9b0; border-left: 4px solid #e2b04a; }
.cert .era-note { margin: 8px 0 2px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5; border-left: 3px solid #b08d57; background: rgba(176, 141, 87, .12); border-radius: 0 8px 8px 0; }
.book .cover .era-years { font-size: 12.5px; opacity: .85; margin-top: 2px; }

/* ---- ชาติก่อนในสูติบัตร (sim/pastlife.js) ---- */
.pl-box { margin: 10px 0 4px; padding: 9px 11px; border: 1.5px dashed #b08d57; border-radius: 8px; background: rgba(176, 141, 87, 0.09); text-align: left; }
.pl-box > b { display: block; font-size: 0.82em; letter-spacing: 0.04em; opacity: 0.75; }
.pl-box .pl-who { font-weight: 700; margin: 2px 0; }
.pl-box > small { display: block; opacity: 0.8; margin-bottom: 5px; }
.pl-box .pl-fx { font-size: 0.9em; line-height: 1.45; padding: 2px 0; }
.pl-box .pl-fx.good { color: #2f6b3f; }
.pl-box .pl-fx.bad { color: #9a3b2e; }

/* ---- ☕ เลี้ยงกาแฟผู้พัฒนา (ui/support.js · ตั้งค่าใน src/support.js) ---- */
/* ปุ่มมีสามแบบตามที่วาง: ลิงก์เล็กท้ายหน้าปก · ลิงก์เล็กท้ายเมนู · การ์ดหมายเหตุท้ายหนังสืออนุสรณ์ */
.tt-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.sup-btn { font: inherit; cursor: pointer; }
.sup-title { padding: 2px 4px; font-size: inherit; color: #ffe7ae; opacity: .78; text-decoration: underline dotted rgba(255, 231, 174, .55); text-underline-offset: 3px; transition: opacity .15s; }
.sup-title:hover { opacity: 1; }
.sup-title::before { content: '·'; margin-right: 8px; color: #a9b1d6; text-decoration: none; display: inline-block; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 619px) { .sup-title::before { display: none; } } /* จอแคบ ปุ่มขึ้นบรรทัดใหม่เอง ไม่ต้องมีจุดคั่น */
.sup-menu { display: block; margin: 14px auto 0; padding: 4px 8px; font-size: 13px; color: #a2abd0; text-decoration: underline dotted; text-underline-offset: 3px; }
.sup-menu:hover { color: #ffe7ae; }
.sup-card { margin-top: 26px; padding-top: 14px; border-top: 1px dashed #c9b48a; text-align: center; }
.sup-card p { margin: 0 0 8px; font-family: var(--hand); font-size: 13.5px; color: #6b5433; }
.sup-book { padding: 8px 18px; border-radius: 999px; font-size: 14px; color: #6b4a1e; background: #fbf6e8; border: 1.5px solid #b08d57; transition: background .15s; }
.sup-book:hover { background: #fff1d6; }
.sup-btn:focus-visible, .sup-box :is(button, a):focus-visible { outline: 3px solid #f6a93b; outline-offset: 2px; }

/* กล่อง: กระดาษเล่มเดียวกับหนังสืออนุสรณ์ ลอยกลางจอ ปิดได้ด้วย × / ไว้คราวหน้า / Esc / แตะพื้นหลัง */
.sup-ov { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: rgba(5, 6, 14, .64); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: tt-fade .2s ease; }
.sup-box { position: relative; width: min(380px, 100%); padding: 22px 20px 16px; border-radius: 18px; text-align: center; color: #2f2418; background: #f7efdc; border: 3px double #8a6a3a; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-family: var(--ui); animation: rise .25s ease; }
.sup-x { position: absolute; top: 4px; right: 6px; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; line-height: 1; color: #6b5433; }
.sup-x:hover { background: rgba(138, 106, 58, .14); }
.sup-cup { font-size: 34px; line-height: 1.2; }
.sup-box h3 { margin: 2px 0 6px; font-family: var(--head); font-size: 21px; color: #7a3a14; }
.sup-msg { margin: 0 0 4px; font-family: var(--hand); font-size: 14.5px; line-height: 1.65; color: #4a3820; }
.sup-qrbox { margin: 12px 0 0; padding: 12px 12px 10px; border-radius: 12px; background: #fff; border: 1.5px solid #c9b48a; }
.sup-qrbox[hidden] { display: none; }
.sup-qr { display: block; margin: 0 auto; width: 260px; max-width: 100%; height: auto; max-height: 56vh; object-fit: contain; }
.sup-qrbox figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #6b5433; }
.sup-mob, .sup-save { display: none; }
.sup-save { margin-top: 10px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; color: #2a1404; background: linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow: 0 3px 0 #b85a26; }
.sup-save:active { transform: translateY(2px); box-shadow: 0 1px 0 #b85a26; }
.sup-link { display: block; margin-top: 12px; padding: 11px 12px; border-radius: 13px; font-family: var(--head); font-weight: 700; font-size: 15.5px; text-decoration: none; color: #2a1404; background: linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow: 0 4px 0 #b85a26; }
.sup-link:hover { filter: brightness(1.06); }
.sup-link:active { transform: translateY(3px); box-shadow: 0 1px 0 #b85a26; }
.sup-later { display: block; margin: 10px auto 0; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; color: #8a6a3a; }
.sup-later:hover { background: rgba(138, 106, 58, .12); }
/* มือถือ: ข้อความบอกวิธีสแกนจากรูป + ปุ่มบันทึกรูป QR */
@media (pointer: coarse), (max-width: 600px) {
  .sup-desk { display: none; }
  .sup-mob { display: inline; }
  .sup-save { display: inline-block; }
  .sup-qr { width: 230px; }
}

/* ---- 📸 แชร์ชีวิตนี้ ในหนังสืออนุสรณ์ (src/share.js) ---- */
.book .share-box { margin: 0 0 6px; padding: 12px 12px 10px; border: 1.5px solid #c9b48a; border-radius: 12px; background: #fbf6e8; text-align: center; }
.book .share-head b { display: block; font-family: var(--head); font-size: 16px; color: #a3271f; }
.book .share-head small { display: block; font-size: 12.5px; color: #6b5433; margin-top: 1px; }
.book .share-prev { display: block; width: 62%; max-width: 230px; margin: 10px auto 2px; border-radius: 6px; box-shadow: 0 3px 10px rgba(60, 40, 15, .3); image-rendering: auto; }
.book .share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.book .share-btns button { flex: 1 1 auto; min-height: 42px; padding: 9px 12px; border-radius: 11px; font-family: var(--head); font-size: 14px; font-weight: 700; }
.book .share-go { flex-basis: 100% !important; color: #fff; background: linear-gradient(180deg, #c0392b, #a3271f); box-shadow: 0 3px 0 #6f1712; }
.book .share-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #6f1712; }
.book .share-alt { color: #4a3a26; background: #eadfc3; border: 1px solid #c9b48a; }
.book .share-msg { min-height: 1.2em; margin-top: 6px; font-size: 12.5px; color: #2f6b3f; }
.book .share-msg:empty { display: none; }
.book .share-text { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid #c9b48a; border-radius: 8px; background: #fff; color: #2f2418; font: 13px/1.5 var(--ui); resize: vertical; }
.book .share-text[hidden] { display: none; }