/* ผู้พิทักษ์กาลเวลา — อาขยาตข้อ ๔ */
[v-cloak] { display: none !important; }

:root {
	--tg-ink: #eef4f8;
	--tg-muted: #aab8c4;
	--tg-night: #07111c;
	--tg-panel: rgba(10, 21, 31, .92);
	--tg-panel-soft: rgba(17, 31, 43, .84);
	--tg-brass: #d4a54f;
	--tg-brass-light: #f5d68b;
	--tg-copper: #b96e38;
	--tg-cyan: #80c9d7;
	--tg-good: #59d69d;
	--tg-bad: #f07b72;
	--tg-border: rgba(224, 190, 117, .24);
	--tg-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { font-size: 110%; background: var(--tg-night); }
body.tg-body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--tg-night); color: var(--tg-ink); font-family: "Noto Sans Thai", "Sarabun", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.tg-app { min-height: 100vh; background: radial-gradient(circle at 50% 0, #183348 0, var(--tg-night) 48rem); }
.tg-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.tg-skip { position: fixed; top: -6rem; left: 1rem; z-index: 200; padding: .8rem 1rem; border-radius: .6rem; background: #fff; color: #111827; font-weight: 800; transition: top .18s; }
.tg-skip:focus { top: 1rem; }

/* ───────────────────────────────────────────────────────── Top bar */
.tg-topbar { position: sticky; top: 0; z-index: 80; display: grid; grid-template-columns: 44px auto 1fr 44px; align-items: center; gap: .7rem; min-height: 64px; padding: .55rem clamp(.7rem, 2vw, 1.5rem); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5, 13, 22, .86); box-shadow: 0 8px 30px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.tg-icon-link { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.05); color: #dce7ee; text-decoration: none; cursor: pointer; transition: .18s ease; }
.tg-icon-link:hover { border-color: var(--tg-brass); color: var(--tg-brass-light); transform: translateY(-1px); }
.tg-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--tg-ink); text-decoration: none; }
.tg-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--tg-border); border-radius: 50%; background: radial-gradient(circle, #3f341f 0 23%, #121b23 25% 100%); color: var(--tg-brass-light); box-shadow: inset 0 0 0 4px rgba(212,165,79,.08); }
.tg-brand b, .tg-brand small { display: block; line-height: 1.15; }
.tg-brand b { font-family: Georgia, "Noto Serif Thai", serif; font-size: 1rem; letter-spacing: .01em; }
.tg-brand small { margin-top: .16rem; color: #8295a4; font-size: .66rem; }
.tg-nav { display: flex; justify-content: center; gap: .35rem; }
.tg-nav button { display: inline-flex; align-items: center; gap: .42rem; min-height: 42px; padding: .45rem .78rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #93a5b3; font-size: .78rem; font-weight: 750; cursor: pointer; }
.tg-nav button:hover, .tg-nav button.is-on { border-color: rgba(212,165,79,.25); background: rgba(212,165,79,.1); color: var(--tg-brass-light); }

/* ───────────────────────────────────────────────────────── Common */
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .68rem 1.1rem; border: 1px solid transparent; border-radius: .75rem; font-weight: 800; line-height: 1.2; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease; }
.tg-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.tg-btn:active:not(:disabled) { transform: translateY(0); }
.tg-btn:disabled { opacity: .42; cursor: not-allowed; }
.tg-btn-primary { border-color: #c99e4d; background: linear-gradient(145deg, #d9ad59, #a6682e); color: #130e08; box-shadow: 0 9px 28px rgba(183,112,45,.25), inset 0 1px rgba(255,255,255,.5); }
.tg-btn-amber { border-color: #f4cc78; background: linear-gradient(145deg, #ffe39a, #c68a35); color: #1b1207; box-shadow: 0 9px 30px rgba(216,158,67,.26); }
.tg-btn-glass, .tg-btn-ghost { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #e9f0f4; }
.tg-btn-xl { min-height: 56px; padding: .85rem 1.5rem; border-radius: .9rem; font-size: 1rem; }
.tg-btn-small { min-height: 40px; padding: .55rem .82rem; border-color: var(--tg-border); background: rgba(212,165,79,.09); color: var(--tg-brass-light); font-size: .78rem; }
.tg-text-btn { min-height: 44px; padding: .55rem .7rem; border: 0; background: none; color: var(--tg-brass-light); font-weight: 750; cursor: pointer; }
.tg-eyebrow, .tg-kicker { color: var(--tg-brass-light); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.tg-page-shell { position: relative; z-index: 2; width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0 5rem; }
.tg-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.tg-page-head h1 { margin: .25rem 0 .4rem; font-family: Georgia, "Noto Serif Thai", serif; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1; }
.tg-page-head p { margin: 0; color: var(--tg-muted); }
.tg-world { position: relative; min-height: calc(100vh - 64px); isolation: isolate; overflow: hidden; }
.tg-world-bg { position: fixed; inset: 64px 0 0; z-index: -2; background-position: center; background-size: cover; }
.tg-world-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,16,.45), rgba(4,10,16,.92)), linear-gradient(90deg, rgba(4,10,16,.4), transparent 50%, rgba(4,10,16,.35)); }
.tg-bg-engine { background-image: url('/assets/game/akhayata-time-guardian/scenes/engine-hall.webp?v=20260814.1'); }

/* ───────────────────────────────────────────────────────── Home */
.tg-home { position: relative; display: grid; min-height: calc(100vh - 64px); isolation: isolate; overflow: hidden; }
.tg-home-backdrop { position: absolute; inset: 0; z-index: -3; background: url('/assets/game/akhayata-time-guardian/scenes/tower-arrival.webp?v=20260814.1') 64% center / cover no-repeat; transform: scale(1.015); animation: tg-breathe 16s ease-in-out infinite alternate; }
.tg-home::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3,10,17,.94) 0%, rgba(3,10,17,.78) 38%, rgba(3,10,17,.18) 72%), linear-gradient(0deg, rgba(3,10,17,.88), transparent 45%); }
.tg-rain { position: absolute; inset: 0; z-index: -1; opacity: .16; pointer-events: none; background-image: repeating-linear-gradient(107deg, transparent 0 12px, rgba(190,220,235,.5) 13px, transparent 14px 28px); background-size: 38px 60px; animation: tg-rain .65s linear infinite; }
.tg-home-content { align-self: center; width: min(680px, calc(100% - 2rem)); margin-left: clamp(1rem, 7vw, 7rem); padding: 4rem 0 5rem; }
.tg-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; }
.tg-kicker span { width: 34px; height: 1px; background: var(--tg-brass); }
.tg-home h1 { margin: 0; font-family: Georgia, "Noto Serif Thai", serif; font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 700; line-height: .92; letter-spacing: -.045em; text-shadow: 0 7px 30px rgba(0,0,0,.62); }
.tg-home h1 em { display: block; color: var(--tg-brass-light); font-weight: 500; font-style: normal; }
.tg-home-lead { margin: 1.45rem 0 1.7rem; color: #cbd7de; font-size: clamp(.98rem, 1.7vw, 1.18rem); line-height: 1.8; }
.tg-home-status { display: flex; align-items: stretch; gap: .7rem; margin: 0 0 1.6rem; }
.tg-home-status > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .55rem; min-width: 130px; padding: .66rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: rgba(6,16,25,.58); backdrop-filter: blur(12px); }
.tg-home-status > div > i { grid-row: 1 / 3; color: var(--tg-brass-light); font-size: 1.2rem; }
.tg-home-status b { font-family: Georgia, serif; font-size: 1.18rem; }
.tg-home-status p { margin: 0; color: #93a5b3; font-size: .66rem; }
.tg-status-dial { grid-row: 1 / 3; display: grid; grid-template-columns: auto auto; place-content: center; width: 38px; height: 38px; border: 2px solid var(--tg-brass); border-radius: 50%; }
.tg-status-dial b { font-size: .78rem; }.tg-status-dial small { font-size: .52rem; }
.tg-home-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.tg-home-proof { margin: 1.15rem 0 0; color: #8ba0ae; font-size: .75rem; }
.tg-home-proof i { margin-right: .3rem; color: var(--tg-brass); }

/* ───────────────────────────────────────────────────────── Atlas */
.tg-world-atlas::after { content: ""; position: fixed; inset: 64px 0 0; z-index: -1; background: rgba(4,11,17,.78); }
.tg-power { flex: 0 0 auto; text-align: center; }
.tg-power span { display: grid; place-items: center; width: 80px; height: 80px; border: 2px solid var(--tg-brass); border-radius: 50%; background: radial-gradient(circle, rgba(212,165,79,.17), rgba(7,17,28,.7)); box-shadow: 0 0 30px rgba(212,165,79,.17); }
.tg-power b { font-family: Georgia, serif; font-size: 1.65rem; }.tg-power small { display: block; margin-top: .3rem; color: #8fa2af; font-size: .66rem; }
.tg-atlas { position: relative; display: grid; gap: .75rem; width: min(860px, 100%); margin: 0 auto; }
.tg-atlas::before { content: ""; position: absolute; top: 2rem; bottom: 2rem; left: 43px; width: 2px; background: linear-gradient(var(--tg-brass), rgba(212,165,79,.08)); }
.tg-floor { position: relative; display: grid; grid-template-columns: 70px 54px minmax(0,1fr) auto auto; align-items: center; gap: 1rem; min-height: 106px; padding: .85rem 1rem .85rem .6rem; border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; background: linear-gradient(100deg, rgba(9,20,30,.96), rgba(16,31,42,.86)); box-shadow: 0 12px 35px rgba(0,0,0,.18); overflow: hidden; }
.tg-floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 50%, rgba(212,165,79,.08), transparent 30%); }
.tg-floor.is-active { border-color: rgba(89,214,157,.27); }
.tg-floor.is-locked { opacity: .72; filter: saturate(.45); }
.tg-floor.is-locked .tg-floor-icon,.tg-floor.is-locked .tg-floor-state i { color: #8b9aa4; border-color: rgba(255,255,255,.12); }
.tg-floor-no { position: relative; z-index: 1; color: #8295a3; font-size: .72rem; font-weight: 800; text-align: center; }
.tg-floor-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--tg-border); border-radius: 50%; background: #101d27; color: var(--tg-brass-light); font-size: 1.1rem; box-shadow: inset 0 0 0 5px rgba(212,165,79,.05); }
.tg-floor.is-active .tg-floor-icon { border-color: var(--tg-good); color: var(--tg-good); }
.tg-floor-copy { position: relative; z-index: 1; min-width: 0; }
.tg-floor-copy h2 { margin: 0; font-family: Georgia, "Noto Serif Thai", serif; font-size: 1.15rem; }
.tg-floor-copy p { margin: .15rem 0; color: #a9b7c1; font-size: .82rem; }
.tg-floor-copy small { color: #738896; font-size: .68rem; }
.tg-floor-copy small i { margin-right: .25rem; color: var(--tg-brass); }
.tg-floor-state { position: relative; z-index: 1; color: #8093a1; font-size: .72rem; white-space: nowrap; }
.tg-floor-state i { color: var(--tg-good); }
.tg-floor .tg-btn { position: relative; z-index: 1; }
.tg-floor-line { position: absolute; left: 42px; z-index: 3; width: 4px; height: 100%; }
.tg-floor-line span { position: absolute; top: 50%; left: -5px; width: 14px; height: 14px; border: 2px solid #715b35; border-radius: 50%; background: #101a22; transform: translateY(-50%); }
.tg-floor.is-active .tg-floor-line span { border-color: var(--tg-good); background: var(--tg-good); box-shadow: 0 0 16px rgba(89,214,157,.5); }
.tg-atlas-end { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(860px, 100%); margin: 1rem auto 0; padding: 1.2rem 1.3rem; border: 1px solid var(--tg-border); border-radius: 1rem; background: linear-gradient(110deg, rgba(75,49,20,.65), rgba(9,20,30,.94)); }
.tg-atlas-end > div { display: grid; grid-template-columns: 42px 1fr; column-gap: .8rem; }.tg-atlas-end > div > i { grid-row: 1/3; align-self: center; color: var(--tg-brass-light); font-size: 1.7rem; }.tg-atlas-end h2,.tg-atlas-end p { margin: 0; }.tg-atlas-end h2 { font-family: Georgia, serif; font-size: 1.05rem; }.tg-atlas-end p { color: #9cabb6; font-size: .75rem; }

/* ───────────────────────────────────────────────────── Encounter */
.tg-encounter { min-height: calc(100vh - 64px); }
.tg-encounter-shade { position: fixed; inset: 64px 0 0; z-index: -1; background: linear-gradient(180deg, rgba(3,9,15,.24), rgba(3,9,15,.82) 63%, #061019 100%); }
.tg-encounter-shell { display: flex; flex-direction: column; width: min(980px, calc(100% - 1.5rem)); min-height: calc(100svh - 64px); margin: 0 auto; padding: 1.2rem 0 4rem; }
.tg-mission-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 72px; text-shadow: 0 2px 14px #000; }
.tg-mission-head > div:nth-child(2) { text-align: center; }.tg-mission-head span { color: #b8c6cf; font-size: .7rem; }.tg-mission-head h1 { margin: .1rem 0 0; font-family: Georgia, "Noto Serif Thai", serif; font-size: clamp(1.3rem, 3vw, 2rem); }
.tg-back { min-height: 44px; padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(3,10,16,.62); color: #dce6ec; cursor: pointer; backdrop-filter: blur(10px); }
.tg-mission-score { display: flex; align-items: center; gap: .3rem; min-width: 60px; padding: .55rem .7rem; border: 1px solid var(--tg-border); border-radius: 999px; background: rgba(3,10,16,.65); color: var(--tg-brass-light); font-weight: 800; }
.tg-console { position: relative; margin-block: auto; padding: clamp(1rem, 3vw, 1.8rem); border: 1px solid rgba(218,179,103,.35); border-radius: 1.2rem; background: linear-gradient(145deg, rgba(13,27,38,.97), rgba(5,14,22,.97)); box-shadow: var(--tg-shadow), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(18px); }
.tg-console::before, .tg-console::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid #6f542d; border-radius: 50%; background: #1b2020; }.tg-console::before { top: 12px; left: 12px; }.tg-console::after { top: 12px; right: 12px; }
.tg-console.is-correct { border-color: rgba(89,214,157,.55); box-shadow: var(--tg-shadow), 0 0 45px rgba(89,214,157,.12); }
.tg-console.is-wrong { border-color: rgba(240,123,114,.48); }
.tg-console-top { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.tg-task-tag, .tg-recall-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #aebdc7; font-size: .68rem; }
.tg-task-tag i { color: var(--tg-brass); }.tg-recall-tag i { color: var(--tg-cyan); }
.tg-mechanic { text-align: center; }
.tg-instruction { margin: 0 0 .35rem; color: var(--tg-brass-light); font-size: .76rem; font-weight: 800; letter-spacing: .03em; }
.tg-mechanic h2 { margin: 0 auto .35rem; max-width: 770px; font-size: clamp(1.1rem, 3vw, 1.55rem); line-height: 1.5; }
.tg-target.is-pali { font-family: "Noto Serif Thai", Georgia, serif; font-size: clamp(1.55rem, 4.5vw, 2.6rem); color: #fff; }
.tg-target-sub { margin: 0 0 1rem; color: #a4b3bd; font-size: .86rem; }
.tg-submit { width: min(330px, 100%); margin-top: 1rem; }
.tg-console-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 48px; margin-top: .45rem; }

.tg-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; max-width: 760px; margin: 1.1rem auto 0; }
.tg-choices button { min-height: 56px; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: .75rem; background: rgba(255,255,255,.05); color: #e4ecf1; font-weight: 720; line-height: 1.45; cursor: pointer; transition: .16s; }
.tg-choices button:hover, .tg-choices button.is-picked { border-color: var(--tg-brass); background: rgba(212,165,79,.13); box-shadow: inset 0 0 0 1px rgba(212,165,79,.17); }
.tg-choices button.is-answer { border-color: var(--tg-good); background: rgba(89,214,157,.16); color: #d9fff0; }.tg-choices button.is-wrong { border-color: var(--tg-bad); background: rgba(240,123,114,.12); }
.tg-time-dial { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: .9rem auto 0; color: #8498a6; font-size: .7rem; }.tg-time-dial i { width: 26px; height: 1px; background: #536473; }.tg-time-dial span:nth-of-type(2) { color: var(--tg-brass-light); }
.tg-roles { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1rem auto 0; }.tg-roles span { display: flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 1px solid rgba(224,190,117,.24); border-radius: 999px; background: rgba(110,68,28,.24); color: #f3d6a3; font-size: .75rem; }.tg-roles > i { color: #7f929f; font-size: .65rem; }

.tg-engine-mechanic .tg-instruction { font-size: .88rem; }.tg-engine-mechanic > h2 { font-size: clamp(1.45rem,3vw,2rem); }
.tg-component-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; max-width: 820px; margin: 1.25rem auto .8rem; }
.tg-component-card { display: grid; grid-template-columns: 32px minmax(0,1fr) 22px; grid-template-rows: auto auto; align-items: center; min-height: 76px; padding: .7rem .8rem; border: 1px solid rgba(205,178,119,.25); border-radius: .8rem; outline: 0; background: linear-gradient(145deg,rgba(30,46,56,.9),rgba(10,22,30,.94)); color: #d9e3e9; text-align: left; cursor: pointer; transition: border-color .16s, background-color .16s, transform .16s; }.tg-component-card > i:first-child { grid-row: 1/3; color: #8da0ab; font-size: 1.1rem; }.tg-component-card > b { grid-column: 2; grid-row: 1; font-family: "Noto Serif Thai",serif; font-size: 1.15rem; line-height: 1.3; }.tg-component-card > span { grid-column: 2; grid-row: 2; color: #91a4af; font-size: .74rem; }.tg-component-card > i:last-child { grid-column: 3; grid-row: 1/3; color: var(--tg-good); }.tg-component-card:hover { border-color: rgba(224,190,117,.62); transform: translateY(-1px); }.tg-component-card:focus-visible { box-shadow: 0 0 0 3px rgba(212,165,79,.22); }.tg-component-card.is-selected { border-color: var(--tg-brass); background: linear-gradient(145deg,rgba(91,66,29,.86),rgba(30,38,38,.96)); color: #ffe3a4; }.tg-component-card.is-selected > i:first-child { color: var(--tg-brass-light); }.tg-component-card.is-error { border-color: var(--tg-bad); background: rgba(111,40,37,.4); }
.tg-engine-meter { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 auto; color: #aebdc6; font-size: .8rem; }.tg-engine-meter > span { white-space: nowrap; }.tg-engine-meter > span i { margin-right: .25rem; color: var(--tg-brass); }.tg-engine-meter > span b { color: var(--tg-brass-light); font-size: .95rem; }.tg-engine-meter > div { width: min(220px,38vw); height: 6px; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.09); }.tg-engine-meter > div i { display: block; height: 100%; border-radius: inherit; background: var(--tg-brass); }
.tg-recall-answer { display: block; width: min(720px,100%); margin: 1rem auto 0; text-align: left; }.tg-recall-answer > span { display: block; margin-bottom: .35rem; color: #b9c7cf; font-size: .82rem; }.tg-recall-answer textarea { width: 100%; resize: vertical; min-height: 130px; padding: .9rem 1rem; border: 1px solid rgba(224,190,117,.35); border-radius: .7rem; outline: none; background: rgba(255,255,255,.055); color: #f3f7f9; line-height: 1.7; }.tg-recall-answer textarea:focus { border-color: var(--tg-brass); box-shadow: 0 0 0 3px rgba(212,165,79,.14); }.tg-recall-review { max-width: 720px; margin: 1rem auto 0; padding: 1rem; border: 1px solid rgba(224,190,117,.3); border-radius: .8rem; background: rgba(212,165,79,.08); text-align: left; }.tg-recall-review > p { margin: 0 0 .4rem; color: var(--tg-brass-light); font-weight: 800; }.tg-recall-review > div:not(.tg-paper-actions) { color: #eef4f8; font-family: "Noto Serif Thai",serif; font-size: 1.05rem; line-height: 1.8; white-space: pre-wrap; }

.tg-table-head { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: .7rem 0 1rem; }.tg-table-head label { color: #8fa1ad; font-size: .75rem; }.tg-table-head select { min-height: 44px; padding: .5rem 2.2rem .5rem .7rem; border: 1px solid var(--tg-border); border-radius: .7rem; background: #10202c; color: #f2d69a; }
.tg-clock-grid { display: grid; grid-template-columns: minmax(105px,.75fr) repeat(2,minmax(110px,1fr)); gap: 2px; max-width: 680px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(224,190,117,.3); border-radius: .8rem; background: rgba(212,165,79,.16); }
.tg-grid-head,.tg-grid-person,.tg-grid-corner { display: grid; place-items: center; min-height: 46px; background: #132633; }.tg-grid-head { color: var(--tg-brass-light); font-size: .76rem; font-weight: 800; }.tg-grid-person { padding: .4rem; color: #b7c5cd; font-size: .75rem; font-weight: 750; }.tg-grid-corner { color: var(--tg-brass); }
.tg-grid-cell { display: grid; padding: .35rem; background: rgba(5,15,23,.9); }.tg-grid-cell input { width: 100%; min-height: 51px; border: 1px solid rgba(255,255,255,.11); border-radius: .55rem; outline: 0; background: rgba(255,255,255,.045); color: #fff; font-family: "Noto Serif Thai", serif; font-size: 1.25rem; font-weight: 800; text-align: center; }.tg-grid-cell input:focus { border-color: var(--tg-brass); box-shadow: 0 0 0 3px rgba(212,165,79,.14); }.tg-grid-cell.is-right input { border-color: var(--tg-good); background: rgba(89,214,157,.12); }.tg-grid-cell.is-wrong input { border-color: var(--tg-bad); background: rgba(240,123,114,.1); }
.tg-table-score { margin-top: .7rem; color: #b8c5cc; font-size: .8rem; }
.tg-feedback { display: flex; align-items: flex-start; gap: .7rem; max-width: 760px; margin: 1rem auto 0; padding: .75rem .9rem; border: 1px solid; border-radius: .75rem; text-align: left; }.tg-feedback > i { margin-top: .14rem; font-size: 1.15rem; }.tg-feedback b,.tg-feedback p { margin: 0; }.tg-feedback p { margin-top: .12rem; color: #bdc8cf; font-size: .78rem; line-height: 1.55; }.tg-feedback.is-correct { border-color: rgba(89,214,157,.32); background: rgba(89,214,157,.08); color: var(--tg-good); }.tg-feedback.is-wrong { border-color: rgba(240,123,114,.3); background: rgba(240,123,114,.07); color: var(--tg-bad); }

/* ───────────────────────────────────────────────────────── Archive */
.tg-archive { min-height: calc(100vh - 64px); background: radial-gradient(circle at 70% 5%, #21303a, transparent 32rem), linear-gradient(#0b171f,#061017); }
.tg-archive-bg { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(90deg, transparent 49.8%, rgba(212,165,79,.1) 50%, transparent 50.2%), repeating-linear-gradient(0deg, transparent 0 74px, rgba(255,255,255,.03) 75px); }
.tg-archive-tools { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }.tg-archive-tools > label { display: flex; align-items: center; gap: .5rem; width: min(430px,100%); min-height: 48px; padding: 0 .8rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; background: rgba(255,255,255,.05); color: #8294a0; }.tg-archive-tools input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; }.tg-legend { display: flex; gap: .8rem; color: #91a2ad; font-size: .68rem; }.tg-legend span { display: flex; align-items: center; gap: .3rem; }.tg-legend i { width: 9px; height: 9px; border-radius: 50%; background: #52626d; }.tg-legend i.is-written { background: var(--tg-brass); }.tg-legend i.is-remembered { background: var(--tg-good); }
.tg-card-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.tg-time-card { position: relative; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; align-items: center; gap: .2rem .75rem; min-height: 130px; padding: .9rem; overflow: hidden; border: 1px solid rgba(224,190,117,.22); border-radius: .8rem; background: linear-gradient(145deg,#e8dcc1,#baa77d); color: #2b2316; text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: .18s; }.tg-time-card::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(67,51,26,.18); border-radius: .5rem; pointer-events: none; }.tg-time-card:hover { z-index: 2; transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 17px 35px rgba(0,0,0,.32); }.tg-card-stamp { position: absolute; top: .55rem; right: .6rem; padding: .18rem .35rem; border: 1px solid #8e7140; border-radius: .25rem; color: #6b522e; font-family: monospace; font-size: .6rem; transform: rotate(2deg); }.tg-time-card strong,.tg-time-card small { grid-column: 2; }.tg-time-card strong { align-self: end; font-family: Georgia, "Noto Serif Thai", serif; }.tg-time-card small { align-self: start; color: #65583f; font-size: .65rem; }.tg-mini-clock { grid-row: 1/3; position: relative; display: block; width: 60px; height: 60px; border: 3px double #665231; border-radius: 50%; background: radial-gradient(circle,#f7edd6,#c9b98e); }.tg-mini-clock b { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #4c3b24; transform: translate(-50%,-50%); }.tg-mini-clock i { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; height: 19px; background: #948164; transform-origin: bottom; }.tg-mini-clock i.tg-hour { height: 15px; transform: rotate(-60deg); }.tg-mini-clock i.tg-minute { transform: rotate(45deg); }.tg-mini-clock i.is-on { background: #3d2b17; box-shadow: 0 0 3px #7a5e2a; }.tg-time-card.is-written { background: linear-gradient(145deg,#f0dfb9,#c89a4d); }.tg-time-card.is-remembered,.tg-time-card.is-timed { border-color: #a8ddc2; background: linear-gradient(145deg,#e8e5ca,#91b69a); }

/* ───────────────────────────────────────────────────── Exam paper */
.tg-paper-world { min-height: calc(100vh - 64px); padding: clamp(1rem,4vw,3rem) 1rem 5rem; background: radial-gradient(circle at 50% 0,#24333e,#07121b 50rem); }
.tg-paper-shell { width: min(900px,100%); margin: 0 auto; }.tg-paper-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 1rem; }.tg-paper-head > button { justify-self: start; min-height: 44px; border: 0; background: transparent; color: #aebcc5; cursor: pointer; }.tg-paper-head > div { text-align: center; }.tg-paper-head small { color: var(--tg-brass-light); font-size: .68rem; }.tg-paper-head h1 { margin: .15rem 0 0; font-family: Georgia, serif; font-size: 1.25rem; }.tg-paper-head > span { justify-self: end; color: #93a4af; font-size: .75rem; }
.tg-hand-progress { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 auto 1rem; color: #71828e; font-size: .7rem; }.tg-hand-progress > div { display: flex; align-items: center; gap: .35rem; }.tg-hand-progress b { width: 42px; height: 1px; background: #445461; }.tg-hand-progress .is-on { color: var(--tg-brass-light); }
.tg-exam-paper { position: relative; padding: clamp(1.3rem,4vw,3rem); border-radius: .35rem; background: #f1ead8; color: #2f2a23; box-shadow: 0 30px 80px rgba(0,0,0,.48); }.tg-exam-paper::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(85,65,34,.18); pointer-events: none; }.tg-question-no { position: relative; margin: 0 0 .5rem; color: #8b6d3d; font-size: .75rem; font-weight: 800; }.tg-exam-paper h2 { position: relative; margin: 0 0 1.2rem; font-family: "Noto Serif Thai", Georgia, serif; font-size: clamp(1.05rem,3vw,1.4rem); line-height: 1.7; }.tg-answer-area { position: relative; display: block; }.tg-answer-area > span { display: block; margin-bottom: .35rem; color: #6f6557; font-size: .72rem; }.tg-answer-area textarea,.tg-timed-paper textarea { display: block; width: 100%; resize: vertical; padding: 1rem; border: 1px solid #c4b99f; border-radius: .4rem; outline: 0; background-color: rgba(255,255,255,.42); background-image: repeating-linear-gradient(transparent 0 31px, rgba(73,91,102,.16) 32px); color: #2d2922; font-family: "Noto Serif Thai", serif; line-height: 2rem; }.tg-answer-area textarea:focus { border-color: #9f7433; box-shadow: 0 0 0 3px rgba(159,116,51,.13); }.tg-paper-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }.tg-exam-paper .tg-btn-ghost { border-color: #b9ab91; background: rgba(255,255,255,.4); color: #524838; }
.tg-model-answer { position: relative; margin-top: 1rem; padding: 1rem; border: 1px solid #b8a47d; border-radius: .5rem; background: #e5dac1; }.tg-model-answer > p:first-child { margin: 0 0 .5rem; color: #7b5b2d; font-size: .72rem; font-weight: 800; }.tg-model-answer > div { padding: .75rem; border: 1px solid rgba(169,129,66,.48); border-radius: .4rem; background: rgba(255,255,255,.3); white-space: pre-line; line-height: 1.8; }.tg-model-answer h3 { margin: 1rem 0 .15rem; font-size: .9rem; }.tg-check-note { margin: 0; color: #665e53; font-size: .75rem; }

/* ───────────────────────────────────────────────────── Notebook */
.tg-notebook { min-height: calc(100vh - 64px); background: linear-gradient(90deg,#121b21,#071119 22%,#071119 78%,#121b21); }.tg-notebook-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; overflow-x: auto; scrollbar-width: none; }.tg-notebook-tabs button { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .65rem .65rem 0 0; background: rgba(255,255,255,.04); color: #91a2ad; cursor: pointer; }.tg-notebook-tabs button.is-on { border-color: #ad9464; background: #e7dbc0; color: #392f22; }
.tg-note-page { min-height: 480px; padding: clamp(1.2rem,4vw,3rem); border: 1px solid #9b7541; border-radius: .7rem; background: #eee4cd; color: #342d24; box-shadow: 0 25px 70px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.5); }.tg-note-page h2 { margin: 0 0 1rem; font-family: Georgia,"Noto Serif Thai",serif; font-size: 1.6rem; }.tg-note-page blockquote { margin: 0 0 1.2rem; padding: 1rem; border: 1px solid rgba(155,117,65,.55); border-radius: .5rem; background: rgba(255,255,255,.33); font-family: "Noto Serif Thai",serif; line-height: 1.9; }.tg-note-chips { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }.tg-note-chips span { padding: .7rem; border: 1px solid #baaa88; border-radius: .5rem; background: rgba(255,255,255,.28); font-weight: 800; text-align: center; }
.tg-note-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }.tg-note-list article { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .2rem .6rem; padding: .8rem; border-bottom: 1px solid #c9b997; }.tg-note-list b { color: #785728; font-family: "Noto Serif Thai",serif; font-size: 1.1rem; }.tg-note-list span { font-weight: 750; }.tg-note-list p { grid-column: 1/-1; margin: 0; color: #655c50; font-size: .78rem; }
.tg-mini-table { display: inline-block; width: calc(50% - .5rem); margin: 0 .7rem .8rem 0; vertical-align: top; }.tg-mini-table h3 { margin: 0 0 .35rem; }.tg-mini-table h3 small { color: #766c5f; }.tg-mini-table table { width: 100%; border-collapse: collapse; }.tg-mini-table th,.tg-mini-table td { padding: .45rem; border: 1px solid #c1b18f; text-align: center; }.tg-mini-table thead th { background: #d9c9a6; }.tg-vacaka-note { margin-bottom: .75rem; padding: .9rem; border: 1px solid #c5b38c; border-radius: .5rem; background: rgba(255,255,255,.25); }.tg-vacaka-note h3 { margin: 0 0 .35rem; color: #6d4c20; }.tg-vacaka-note h3 small { color: #71675a; font-size: .72rem; }.tg-vacaka-note > b { font-family: "Noto Serif Thai",serif; }.tg-vacaka-note p { margin: .25rem 0; }.tg-vacaka-note > span { color: #6e6254; font-size: .75rem; }

/* ───────────────────────────────────────────────────── Belfry */
.tg-belfry { position: relative; display: grid; min-height: calc(100vh - 64px); isolation: isolate; overflow: hidden; }.tg-belfry-bg { position: absolute; inset: 0; z-index: -2; background: url('/assets/game/akhayata-time-guardian/scenes/clockface-walkway.webp?v=20260814.1') center/cover; }.tg-belfry::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(2,8,14,.72); }.tg-belfry-shell { align-self: center; width: min(860px,calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 5rem; }.tg-belfry-intro { max-width: 640px; margin: auto; padding: clamp(1.3rem,4vw,2.5rem); border: 1px solid var(--tg-border); border-radius: 1rem; background: rgba(6,16,25,.88); text-align: center; box-shadow: var(--tg-shadow); backdrop-filter: blur(18px); }.tg-belfry-intro > i { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 1rem; border: 1px solid var(--tg-brass); border-radius: 50%; color: var(--tg-brass-light); font-size: 2rem; box-shadow: 0 0 35px rgba(212,165,79,.16); }.tg-belfry-intro h1 { margin: .3rem 0 .8rem; font-family: Georgia,"Noto Serif Thai",serif; font-size: clamp(1.8rem,4vw,2.7rem); }.tg-belfry-intro > p:not(.tg-eyebrow) { color: #b6c3cb; line-height: 1.7; }.tg-belfry-intro .tg-btn { margin-top: .5rem; }
.tg-timed-paper { padding: clamp(1.2rem,4vw,2.5rem); border: 1px solid #d2c29e; border-radius: .5rem; background: #eee6d4; color: #302a22; box-shadow: var(--tg-shadow); }.tg-timed-paper header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.tg-timed-paper small { color: #7c6848; }.tg-timed-paper h1 { margin: .1rem 0; font-size: 1rem; }.tg-timed-paper > h2 { font-family: "Noto Serif Thai",serif; font-size: 1.25rem; line-height: 1.7; }.tg-timer { padding: .5rem .7rem; border: 1px solid #a9936c; border-radius: .4rem; font-family: monospace; font-size: 1.25rem; font-weight: 800; }.tg-timer.is-low { border-color: #b84d45; color: #a83730; }.tg-timed-paper .tg-btn-ghost { border-color: #b9ab91; color: #554b3b; }
.tg-belfry-intro.is-locked { border-color: rgba(255,255,255,.14); }.tg-belfry-intro.is-locked > i { border-color: rgba(255,255,255,.2); color: #aebbc4; }

/* ───────────────────────────────────────────────────── Victory */
.tg-victory { position: relative; display: grid; min-height: calc(100vh - 64px); padding: 2rem 1rem 5rem; isolation: isolate; overflow: hidden; }.tg-victory-bg { position: absolute; inset: 0; z-index: -2; background: url('/assets/game/akhayata-time-guardian/scenes/tower-arrival.webp?v=20260814.1') center/cover; }.tg-victory::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 30%,rgba(212,165,79,.16),rgba(2,8,14,.9) 62%); }.tg-victory-card { align-self: center; width: min(700px,100%); margin: auto; padding: clamp(1.5rem,5vw,3rem); border: 1px solid rgba(245,214,139,.55); border-radius: 1.2rem; background: rgba(7,17,27,.9); text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.55),0 0 65px rgba(212,165,79,.1); backdrop-filter: blur(18px); }.tg-victory-card > i { color: var(--tg-brass-light); font-size: 3.5rem; }.tg-victory-card h1 { margin: .4rem 0 .8rem; font-family: Georgia,"Noto Serif Thai",serif; font-size: clamp(2rem,6vw,3.5rem); }.tg-victory-card > p:not(.tg-eyebrow) { color: #c2ced5; line-height: 1.8; }.tg-victory-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 1.4rem 0; }.tg-victory-stats span { padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; color: #9fb0ba; }.tg-victory-stats b { display: block; color: var(--tg-brass-light); font-family: Georgia,serif; font-size: 1.5rem; }

/* ───────────────────────────────────────────────────────── System */
.tg-loading,.tg-error { display: grid; place-items: center; align-content: center; gap: 1rem; min-height: calc(100vh - 64px); padding: 2rem; text-align: center; }.tg-loader { width: 64px; height: 64px; border: 3px solid rgba(212,165,79,.18); border-top-color: var(--tg-brass); border-radius: 50%; animation: tg-spin 1.1s linear infinite; }.tg-error > i { color: var(--tg-bad); font-size: 3rem; }.tg-error h1,.tg-error p { margin: 0; }.tg-error p { color: var(--tg-muted); }
.tg-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: flex; align-items: center; gap: .7rem; width: min(390px,calc(100% - 2rem)); padding: .85rem 1rem; border: 1px solid rgba(224,190,117,.35); border-radius: .8rem; background: rgba(9,20,30,.96); box-shadow: var(--tg-shadow); animation: tg-toast-in .3s ease-out; }.tg-toast > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(212,165,79,.13); color: var(--tg-brass-light); }.tg-toast span,.tg-toast b,.tg-toast small { display: block; }.tg-toast small { margin-top: .12rem; color: #9babb5; font-size: .7rem; line-height: 1.45; }
.tg-bell-flash { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(250,213,133,.24), transparent 44%); animation: tg-bell-fade .9s both; }.tg-bell-flash i { color: var(--tg-brass-light); font-size: clamp(4rem,15vw,9rem); filter: drop-shadow(0 0 35px rgba(245,214,139,.55)); animation: tg-bell .7s ease-in-out; }.tg-bell-flash span { position: absolute; width: 230px; height: 230px; border: 2px solid rgba(245,214,139,.45); border-radius: 50%; animation: tg-ring .8s ease-out both; }
.tg-modal-wrap { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1rem; background: rgba(0,6,11,.7); backdrop-filter: blur(8px); }.tg-settings { width: min(460px,100%); padding: 1.1rem; border: 1px solid var(--tg-border); border-radius: 1rem; background: #0d1d28; box-shadow: var(--tg-shadow); }.tg-settings header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .7rem; }.tg-settings header p,.tg-settings header h2 { margin: 0; }.tg-settings header button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); cursor: pointer; }.tg-settings > label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }.tg-settings > label span { display: grid; grid-template-columns: 24px 1fr; gap: .1rem .55rem; }.tg-settings > label i { grid-row: 1/3; color: var(--tg-brass); }.tg-settings > label b,.tg-settings > label small { display: block; }.tg-settings > label small { color: #899ca9; }.tg-settings input { width: 22px; height: 22px; accent-color: var(--tg-brass); }.tg-settings > .tg-btn { width: 100%; margin-top: .6rem; }
.tg-draft-conflicts { position: relative; margin-bottom: 1rem; padding: .85rem; border: 1px solid #b67a43; border-radius: .65rem; background: #fff4d9; color: #4f3a22; }.tg-draft-conflicts > b,.tg-draft-conflicts > p { display: block; margin: 0 0 .45rem; }.tg-draft-conflicts button { display: block; width: 100%; min-height: 44px; margin-top: .35rem; padding: .5rem .7rem; border: 1px solid #c6a46f; border-radius: .45rem; background: #fffaf0; color: #4f3a22; text-align: left; cursor: pointer; }.tg-card-rubric { display: grid; gap: .45rem; margin-top: .8rem; }.tg-card-rubric label { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .55rem .7rem; border: 1px solid #c7b99c; border-radius: .5rem; background: rgba(255,255,255,.35); cursor: pointer; }.tg-card-rubric input { width: 22px; height: 22px; accent-color: #8b682e; }

/* ตัวอักษรสำหรับผู้เรียนสูงวัย: ฐานเนื้อหา 1rem และปรับทั้งเกมได้จากห้องควบคุม */
.tg-note-list p,.tg-vacaka-note p,.tg-vacaka-note > span,.tg-vacaka-note h3 small { font-size: 1rem; line-height: 1.7; }
.tg-mini-table h3 small { font-size: .95rem; }
.tg-settings header .tg-eyebrow { font-size: .875rem; letter-spacing: .06em; }
.tg-settings > label small { font-size: .9rem; line-height: 1.5; }
.tg-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.tg-settings-row > span { display: grid; grid-template-columns: 24px 1fr; gap: .1rem .55rem; }
.tg-settings-row > span i { grid-row: 1/3; color: var(--tg-brass); }
.tg-settings-row > span b,.tg-settings-row > span small { display: block; }
.tg-settings-row > span small { color: #a7b6c1; font-size: .9rem; line-height: 1.5; }
.tg-font-stepper { display: grid; grid-template-columns: 44px minmax(3.8rem,auto) 44px; align-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(224,190,117,.3); border-radius: .75rem; background: rgba(255,255,255,.04); }
.tg-font-stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tg-brass-light); cursor: pointer; }
.tg-font-stepper button:hover:not(:disabled),.tg-font-stepper button:focus-visible { background: rgba(212,165,79,.13); }
.tg-font-stepper button:disabled { color: #60717d; cursor: not-allowed; }
.tg-font-stepper output { color: #f5e2b8; font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; }

@keyframes tg-spin { to { transform: rotate(360deg); } }
@keyframes tg-breathe { to { transform: scale(1.04); } }
@keyframes tg-rain { to { background-position: -18px 60px; } }
@keyframes tg-toast-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes tg-bell-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tg-bell { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(9deg); } }
@keyframes tg-ring { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.7); } }

/* ───────────────────────────────────────────────────── Responsive */
@media (max-width: 800px) {
	.tg-topbar { grid-template-columns: 44px 1fr auto 44px; }
	.tg-nav button span { display: none; }.tg-nav button { width: 42px; padding: .4rem; justify-content: center; }
	.tg-home-content { align-self: end; margin: 0 auto; padding: 5rem 0 2.5rem; }.tg-home::after { background: linear-gradient(0deg,rgba(3,10,17,.97) 0%,rgba(3,10,17,.78) 54%,rgba(3,10,17,.15) 100%); }.tg-home h1 { font-size: clamp(3.5rem,16vw,6rem); }.tg-home-backdrop { background-position: 68% center; }
	.tg-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.tg-floor { grid-template-columns: 44px 48px 1fr auto; gap: .7rem; }.tg-floor-state { display: none; }.tg-floor-no { font-size: .62rem; }.tg-atlas::before,.tg-floor-line { left: 23px; }
	.tg-note-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }.tg-mini-table { width: 100%; margin-right: 0; }
}

@media (max-width: 560px) {
	.tg-topbar { grid-template-columns: 44px minmax(74px,1fr) auto 44px; min-height: 58px; padding: .4rem .55rem; gap: .3rem; }.tg-brand-mark { display: none; }.tg-brand b { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.tg-brand small { font-size: .58rem; }.tg-nav { gap: 0; }.tg-nav button { width: 44px; min-height: 44px; padding: .35rem; justify-content: center; }.tg-icon-link { width: 44px; height: 44px; }
	.tg-home { min-height: calc(100svh - 58px); }.tg-home-content { width: calc(100% - 1.4rem); }.tg-kicker { font-size: .62rem; }.tg-home-lead br { display: none; }.tg-home-status { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; }.tg-home-status > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: .55rem .25rem; text-align: center; }.tg-home-status > div > i { font-size: 1rem; }.tg-home-status p { margin-top: .12rem; font-size: .56rem; }.tg-status-dial { width: 32px; height: 32px; }.tg-home-actions { display: grid; }.tg-home-actions .tg-btn { width: 100%; }.tg-home-proof { text-align: center; }
	.tg-page-shell { width: calc(100% - 1rem); padding-top: 1.5rem; }.tg-page-head { align-items: flex-start; margin-bottom: 1rem; }.tg-page-head h1 { font-size: 1.65rem; }.tg-page-head > .tg-btn { display: none; }.tg-power span { width: 62px; height: 62px; }.tg-power b { font-size: 1.25rem; }
	.tg-floor { grid-template-columns: 40px 42px 1fr; min-height: 116px; padding: .75rem .6rem; }.tg-floor-icon { width: 42px; height: 42px; }.tg-floor-copy h2 { font-size: .95rem; }.tg-floor-copy small { display: none; }.tg-floor > .tg-btn { grid-column: 2/4; width: 100%; min-height: 38px; }.tg-atlas::before,.tg-floor-line { left: 21px; }.tg-atlas-end { align-items: stretch; flex-direction: column; }.tg-atlas-end > .tg-btn { width: 100%; }
	.tg-encounter-shell { width: calc(100% - .75rem); min-height: calc(100svh - 58px); padding-top: .5rem; }.tg-world-bg { top: 58px; background-position: center top; height: 42vh; }.tg-mission-head { grid-template-columns: 44px 1fr 46px; gap: .35rem; margin-bottom: .75rem; }.tg-mission-head .tg-back { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; overflow: hidden; padding: 0; border-radius: 50%; color: transparent; font-size: 0; line-height: 0; white-space: nowrap; }.tg-mission-head .tg-back i { color: #fff; font-size: .8rem; line-height: 1; }.tg-mission-head h1 { font-size: 1rem; }.tg-mission-score { min-width: 46px; padding: .5rem; }.tg-console { margin-block: 0; padding: .8rem .65rem; border-radius: .85rem; }.tg-console-top { margin-bottom: .6rem; }.tg-recall-tag { display: none; }.tg-mechanic h2 { font-size: 1.05rem; }.tg-target.is-pali { font-size: 1.5rem; }.tg-choices { grid-template-columns: 1fr; gap: .45rem; }.tg-choices button { min-height: 50px; }.tg-roles { gap: .2rem; }.tg-roles span { padding: .4rem .45rem; font-size: .66rem; }.tg-roles > i { display: none; }
	.tg-component-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin: .65rem auto .55rem; }.tg-component-card { grid-template-columns: 22px minmax(0,1fr); grid-template-rows: auto; min-height: 56px; padding: .5rem .45rem; }.tg-component-card > i:first-child { grid-row: 1; font-size: .95rem; }.tg-component-card > b { grid-column: 2; grid-row: 1; font-size: 1rem; }.tg-component-card > span { display: none; }.tg-component-card > i:last-child { position: absolute; top: .3rem; right: .35rem; font-size: .65rem; }.tg-engine-meter { gap: .45rem; }.tg-engine-meter > div { width: min(130px,34vw); }.tg-engine-mechanic .tg-submit { margin-top: .55rem; }.tg-clock-grid { grid-template-columns: 92px repeat(2,minmax(0,1fr)); }.tg-grid-cell { padding: .2rem; }.tg-grid-cell input { min-height: 48px; font-size: 1.1rem; }
	.tg-archive-tools { display: grid; }.tg-legend { justify-content: center; }.tg-card-grid { gap: .45rem; }.tg-time-card { grid-template-columns: 47px 1fr; min-height: 112px; padding: .65rem; }.tg-mini-clock { width: 46px; height: 46px; }.tg-mini-clock i { height: 15px; }.tg-mini-clock i.tg-hour { height: 12px; }.tg-card-stamp { font-size: .5rem; }.tg-time-card strong { font-size: .8rem; }.tg-time-card small { font-size: .56rem; }
	.tg-paper-world { padding: .7rem .45rem 3rem; }.tg-paper-head { grid-template-columns: 44px 1fr 44px; }.tg-paper-head > button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; overflow: hidden; padding: 0; color: transparent; font-size: 0; line-height: 0; white-space: nowrap; }.tg-paper-head > button i { color: #fff; font-size: .8rem; line-height: 1; }.tg-paper-head > span { font-size: .58rem; }.tg-exam-paper { padding: 1.2rem .8rem; }.tg-exam-paper::before { inset: 7px; }.tg-paper-actions .tg-btn { flex: 1 1 100%; }
	.tg-note-page { padding: 1rem; }.tg-note-list { grid-template-columns: 1fr; }.tg-notebook-tabs { margin-inline: -.25rem; }
	.tg-settings-row { align-items: stretch; flex-direction: column; }.tg-font-stepper { grid-template-columns: 44px 1fr 44px; width: 100%; }
	.tg-belfry-shell { width: calc(100% - .8rem); }.tg-timed-paper { padding: 1rem .7rem; }.tg-timed-paper header { align-items: flex-start; }.tg-timer { font-size: 1rem; }.tg-timed-paper > h2 { font-size: 1rem; }
	.tg-toast { right: .5rem; bottom: .5rem; width: calc(100% - 1rem); }
}

@media (max-width: 340px) {
	.tg-topbar { grid-template-columns: 44px 1fr 44px; }.tg-brand { display: none; }.tg-home h1 { font-size: 3.25rem; }.tg-home-status p { display: none; }.tg-card-grid { grid-template-columns: 1fr; }.tg-clock-grid { grid-template-columns: 80px repeat(2,minmax(0,1fr)); }.tg-grid-person { font-size: .63rem; }
}

@media (prefers-reduced-motion: reduce) {
	*,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.tg-rain { display: none; }
}
.tg-app.is-reduced .tg-rain { display: none; }.tg-app.is-reduced .tg-home-backdrop,.tg-app.is-reduced .tg-bell-flash i,.tg-app.is-reduced .tg-bell-flash span { animation: none; }

/* ---- ส่วนเสริม ๑๔ ส.ค.: คลังคำช่วยจัดสำรับ · สนามแนะนำ · ตารางบนกระดาษการ์ดเวลา ---- */
.tg-table-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: center; margin-top: .9rem; }
.tg-table-actions .tg-submit { margin-top: 0; }
.tg-word-bank { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; max-width: 680px; margin: .8rem auto 0; padding: .7rem; border: 1px dashed rgba(224,190,117,.45); border-radius: .8rem; background: rgba(212,165,79,.08); }
.tg-word-bank small { flex-basis: 100%; color: #9fb0ba; font-size: .68rem; text-align: center; }
.tg-chip { min-height: 44px; padding: .35rem .9rem; border: 1px solid rgba(224,190,117,.5); border-radius: 999px; background: rgba(5,15,23,.85); color: #fff; font-family: "Noto Serif Thai", serif; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.tg-chip:hover { background: rgba(212,165,79,.28); transform: translateY(-2px); }
.tg-recommend { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid rgba(224,190,117,.4); border-radius: .9rem; background: linear-gradient(120deg, rgba(212,165,79,.16), rgba(5,15,23,.65)); }
.tg-recommend > i { color: var(--tg-brass-light); font-size: 1.3rem; }
.tg-recommend b { color: #fff; font-size: .95rem; }
.tg-recommend p { margin-top: .15rem; color: #b8c5cc; font-size: .74rem; }
.tg-card-table { margin-top: 1rem; }
.tg-card-table .tg-check-note { margin-bottom: .6rem; }
.tg-clock-grid-paper { border-color: rgba(107,80,32,.35); background: rgba(107,80,32,.14); }
.tg-clock-grid-paper .tg-grid-head, .tg-clock-grid-paper .tg-grid-person, .tg-clock-grid-paper .tg-grid-corner { background: #efe4cb; }
.tg-clock-grid-paper .tg-grid-head { color: #7a5a1e; }
.tg-clock-grid-paper .tg-grid-person { color: #574931; }
.tg-clock-grid-paper .tg-grid-corner { color: #a07c33; }
.tg-clock-grid-paper .tg-grid-cell { background: #f8f1de; }
.tg-clock-grid-paper .tg-grid-cell input { border-color: rgba(107,80,32,.3); background: #fffdf6; color: #2c2415; }
.tg-clock-grid-paper .tg-grid-cell.is-right input { background: rgba(89,214,157,.16); }
.tg-clock-grid-paper .tg-grid-cell.is-wrong input { background: rgba(240,123,114,.14); }
@media (max-width: 560px) {
	.tg-recommend { grid-template-columns: auto 1fr; }
	.tg-recommend > .tg-btn { grid-column: 1 / -1; width: 100%; }
}

/* ───────────────────────────── Accessibility + world depth (Aug 14) */
.tg-topbar { grid-template-columns: 44px minmax(0,1fr) 44px; }
.tg-nav { position: fixed; top: .62rem; left: 50%; z-index: 81; transform: translateX(-50%); }
.tg-nav button { min-width: 44px; min-height: 44px; font-size: .9rem; }
.tg-mentor-letter { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: start; margin: -1rem 0 1.2rem; padding: .8rem 1rem; border: 1px solid rgba(245,214,139,.35); border-radius: .8rem; background: linear-gradient(120deg,rgba(66,48,23,.78),rgba(7,17,27,.76)); box-shadow: 0 14px 36px rgba(0,0,0,.25); }
.tg-mentor-letter > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(212,165,79,.15); color: var(--tg-brass-light); }
.tg-mentor-letter b { color: #ffe2a2; }.tg-mentor-letter p { margin: .15rem 0 0; color: #d7e0e5; font-size: .94rem; line-height: 1.6; }
.tg-readiness { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .7rem .85rem; border: 1px solid rgba(128,201,215,.3); border-radius: .8rem; background: rgba(7,22,32,.72); }
.tg-readiness.is-ready { border-color: rgba(89,214,157,.55); background: rgba(17,65,50,.58); }
.tg-readiness-dial { display: grid; grid-template-columns: auto auto; place-content: center; flex: 0 0 auto; width: 54px; height: 54px; border: 2px solid var(--tg-cyan); border-radius: 50%; }
.tg-readiness-dial b { font: 800 1rem Georgia,serif; }.tg-readiness-dial span { font-size: .75rem; }
.tg-readiness > div:last-child > b { color: #eaf5f7; }.tg-readiness p { margin: .12rem 0 0; color: #b6c6ce; font-size: .9rem; line-height: 1.45; }
.tg-empty-search { display: grid; justify-items: center; gap: .45rem; padding: 3rem 1rem; border: 1px dashed rgba(255,255,255,.18); border-radius: 1rem; background: rgba(5,15,23,.56); text-align: center; }
.tg-empty-search > i { color: var(--tg-brass-light); font-size: 2rem; }.tg-empty-search h2,.tg-empty-search p { margin: 0; }.tg-empty-search p { color: var(--tg-muted); }
.tg-source-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tg-source-head h2,.tg-source-head p { margin: 0; }.tg-source-head p { margin-top: .25rem; color: #6b6256; }
.tg-source-head > span { flex: 0 0 auto; padding: .5rem .7rem; border: 1px solid #b5823b; border-radius: 999px; background: #fff3d5; color: #754d14; font-weight: 800; }
.tg-source-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.tg-source-list article { padding: .7rem .8rem; border: 1px solid #c9b78f; border-radius: .55rem; background: rgba(255,255,255,.28); }.tg-source-list article.is-invalid { border-color: #b55b4d; }
.tg-source-list p { margin: .2rem 0 0; color: #6a5e4e; font-size: .92rem; line-height: 1.5; }

/* หน้าจบคือ peak ของเรื่อง: key art, วงแหวน และสถิติหลักฐานจริง */
.tg-victory { min-height: calc(100svh - 64px); padding: clamp(1rem,4vw,3rem) 1rem 5rem; }
.tg-victory-bg { background-image: url('/assets/game/akhayata-time-guardian/concepts/key-art-time-guardian.png'); background-position: center; }
.tg-victory::after { background: radial-gradient(circle at 50% 35%,rgba(249,201,95,.13),rgba(2,8,14,.74) 48%,rgba(2,8,14,.97) 100%); }
.tg-victory-rings { position: absolute; top: 50%; left: 50%; z-index: -1; width: min(76vw,760px); aspect-ratio: 1; transform: translate(-50%,-50%); }
.tg-victory-rings i { position: absolute; inset: 10%; border: 1px solid rgba(245,214,139,.3); border-radius: 50%; box-shadow: 0 0 50px rgba(212,165,79,.1); animation: tg-victory-orbit 18s linear infinite; }
.tg-victory-rings i:nth-child(2) { inset: 21%; border-style: dashed; animation-direction: reverse; animation-duration: 13s; }.tg-victory-rings i:nth-child(3) { inset: 32%; animation-duration: 9s; }
.tg-victory-card { width: min(780px,100%); padding: clamp(1.2rem,4vw,2.6rem); border-radius: 1.5rem; background: linear-gradient(150deg,rgba(7,17,27,.93),rgba(32,25,16,.87)); box-shadow: 0 34px 110px rgba(0,0,0,.72),0 0 90px rgba(212,165,79,.18),inset 0 1px rgba(255,255,255,.15); }
.tg-victory-medal { display: grid; place-items: center; width: 78px; height: 78px; margin: -3.7rem auto .9rem; border: 2px solid #f5d68b; border-radius: 50%; background: radial-gradient(circle,#c68a35,#4c3318 72%); box-shadow: 0 0 0 8px rgba(212,165,79,.12),0 0 45px rgba(245,214,139,.35); }
.tg-victory-medal i { color: #fff3cf; font-size: 2rem; }.tg-victory-card h1 em { display: block; color: #f5d68b; font-style: normal; text-shadow: 0 0 25px rgba(245,214,139,.25); }
.tg-victory-stats { grid-template-columns: repeat(4,1fr); }.tg-victory-stats span { background: rgba(255,255,255,.035); }
@keyframes tg-victory-orbit { to { transform: rotate(1turn); } }

/* ขนาดอ่านจริง: สถานะสำคัญต้องไม่ย้อนกลับไปเป็น 9–10px */
.tg-eyebrow,.tg-kicker,.tg-brand small,.tg-home-status p,.tg-home-proof,.tg-floor-no,.tg-floor-copy p,.tg-floor-copy small,.tg-floor-state,.tg-task-tag,.tg-recall-tag,.tg-mission-head span,.tg-question-no,.tg-paper-head > span,.tg-card-stamp,.tg-time-card small,.tg-toast small,.tg-word-bank small,.tg-recommend p { font-size: .92rem; line-height: 1.45; }

@media (max-width: 800px) {
	.tg-topbar { grid-template-columns: 44px minmax(0,1fr) 44px; }
	.tg-nav button span { display: inline; }.tg-nav button { width: auto; padding: .4rem .65rem; }
}
@media (max-width: 560px) {
	body.tg-body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
	.tg-topbar { grid-template-columns: 44px minmax(0,1fr) 44px; }
	.tg-nav { top: auto; right: 0; bottom: 0; left: 0; z-index: 140; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; min-height: calc(64px + env(safe-area-inset-bottom)); padding: .25rem .35rem env(safe-area-inset-bottom); border-top: 1px solid rgba(224,190,117,.22); background: rgba(5,13,22,.97); box-shadow: 0 -12px 34px rgba(0,0,0,.4); transform: none; backdrop-filter: blur(18px); }
	.tg-nav button { display: flex; flex-direction: column; gap: .16rem; width: 100%; min-height: 58px; padding: .32rem .2rem; border-radius: .65rem; font-size: .92rem; line-height: 1.1; }
	.tg-nav button span { display: inline; }.tg-nav button i { font-size: 1rem; }
	.tg-archive .tg-page-head { flex-wrap: wrap; }.tg-archive .tg-page-head > .tg-btn { display: inline-flex; width: 100%; }
	.tg-home-content { padding-bottom: 1.5rem; }.tg-mentor-letter { margin-top: -.6rem; }.tg-readiness { align-items: flex-start; }
	.tg-source-head { flex-direction: column; }.tg-source-list { grid-template-columns: 1fr; }
	.tg-victory { min-height: calc(100svh - 126px); }.tg-victory-card { margin-top: 2.4rem; }.tg-victory-stats { grid-template-columns: repeat(2,1fr); }.tg-victory-medal { margin-top: -3.2rem; }
	.tg-toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
	.tg-home-status p,.tg-floor-no,.tg-card-stamp,.tg-time-card small,.tg-paper-head > span { font-size: .92rem; }
}

/* ───────────────────────────── Signature mechanics: seven floors, seven actions */
.tg-signature-grid,.tg-gear-machine { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; max-width: 900px; margin: 1rem auto; }
.tg-signature-slot { min-width: 0; padding: .8rem; border: 1px solid rgba(224,190,117,.26); border-radius: .9rem; background: rgba(4,14,22,.58); }
.tg-signature-slot h3,.tg-signature-slot header { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 32px; margin: 0 0 .6rem; color: var(--tg-brass-light); font-size: 1rem; }
.tg-signature-options,.tg-gear-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.tg-signature-options button,.tg-gear-options button { min-height: 52px; padding: .55rem .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: rgba(255,255,255,.045); color: #dce7ed; line-height: 1.4; cursor: pointer; }
.tg-signature-options button:hover,.tg-gear-options button:hover { border-color: rgba(224,190,117,.6); background: rgba(212,165,79,.1); }
.tg-signature-options button.is-picked,.tg-gear-options button.is-picked { border-color: var(--tg-brass); background: rgba(212,165,79,.18); color: #ffe5a8; box-shadow: inset 0 0 0 1px rgba(245,214,139,.14); }
.tg-signature-options button.is-answer,.tg-gear-options button.is-answer { border-color: var(--tg-good); background: rgba(89,214,157,.14); color: #d9fff0; }
.tg-signature-options button.is-wrong,.tg-gear-options button.is-wrong { border-color: var(--tg-bad); background: rgba(240,123,114,.12); color: #ffd6d1; }

.tg-time-gears .tg-target { margin-bottom: .1rem; }.tg-gear-machine { position: relative; }
.tg-gear-machine::before { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; border: 7px dotted rgba(212,165,79,.55); border-radius: 50%; transform: translate(-50%,-50%); }
.tg-gear-slot { border-radius: 1.2rem; background: radial-gradient(circle at 50% 0,rgba(212,165,79,.15),rgba(4,14,22,.68) 55%); box-shadow: inset 0 0 28px rgba(212,165,79,.06); }
.tg-gear-slot header i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(245,214,139,.4); border-radius: 50%; color: var(--tg-brass-light); }

.tg-signal-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; max-width: 850px; margin: 1rem auto .75rem; }
.tg-signal-board button { position: relative; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: .55rem; min-height: 60px; padding: .65rem .75rem; border: 1px solid rgba(128,201,215,.25); border-radius: .8rem; background: rgba(11,30,42,.72); color: #d9e6ec; text-align: left; cursor: pointer; }
.tg-signal-board button > i { color: #7fa5b6; }.tg-signal-board button > b { width: 14px; height: 14px; border: 2px solid #6d8795; border-radius: 50%; }
.tg-signal-board button.is-routed { border-color: var(--tg-cyan); background: rgba(50,122,139,.2); }.tg-signal-board button.is-routed > i { color: #a8edfa; }.tg-signal-board button.is-routed > b { border-color: #a8edfa; background: #80c9d7; box-shadow: 0 0 14px rgba(128,201,215,.55); }
.tg-signal-board button.is-answer { border-color: var(--tg-good); }.tg-signal-board button.is-wrong { border-color: var(--tg-bad); background: rgba(240,123,114,.12); }
.tg-signal-meter { color: #a9bdc7; font-weight: 750; }.tg-signal-meter i { margin-right: .35rem; color: var(--tg-cyan); }

.tg-forge-equation { display: flex; align-items: center; justify-content: center; gap: .55rem; max-width: 900px; margin: 1rem auto; }
.tg-forge-equation span { display: grid; place-items: center; min-width: 135px; min-height: 58px; padding: .55rem .8rem; border: 1px solid rgba(224,190,117,.32); border-radius: .65rem; background: linear-gradient(145deg,rgba(83,53,24,.56),rgba(8,20,28,.8)); color: #ffe1a0; font-family: "Noto Serif Thai",serif; font-weight: 800; }
.tg-forge-equation i { color: #b58a48; }.tg-root-forge .tg-signature-slot { border-color: rgba(128,180,120,.32); background: linear-gradient(180deg,rgba(31,72,51,.28),rgba(4,14,22,.7)); }

.tg-stage-actors { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 1rem auto; }
.tg-stage-actors span { display: grid; justify-items: center; gap: .3rem; min-width: 100px; padding: .65rem; border: 1px solid rgba(224,190,117,.28); border-radius: .7rem; background: rgba(89,53,24,.35); color: #f3d6a3; }.tg-stage-actors span i { font-size: 1.25rem; }
.tg-stage-actors b { width: 36px; height: 2px; background: linear-gradient(90deg,var(--tg-brass),transparent); }.tg-role-stage .tg-signature-slot { background: rgba(54,35,20,.5); }

.tg-inspection-lens { position: relative; display: grid; place-items: center; align-content: center; width: 190px; height: 190px; margin: .6rem auto 1rem; border: 3px solid rgba(128,201,215,.55); border-radius: 50%; background: radial-gradient(circle,rgba(33,74,89,.52),rgba(5,16,24,.95) 68%); box-shadow: 0 0 0 10px rgba(128,201,215,.06),0 0 45px rgba(128,201,215,.14); }
.tg-inspection-lens > i { position: absolute; right: -18px; bottom: 1px; color: #9ed9e3; font-size: 2.2rem; transform: rotate(-12deg); }.tg-inspection-lens h2 { margin: 0; font-size: 2rem; }.tg-inspection-lens small { margin-top: .35rem; color: #9db0ba; }
.tg-form-inspector .tg-signature-slot { border-color: rgba(128,201,215,.28); background: rgba(13,39,51,.56); }

/* งานเขียนปิดชั้น: ตรวจเป็นรายองค์ประกอบและให้ซ่อมเฉพาะส่วนที่ขาด */
.tg-recall-review > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(224,190,117,.2); }
.tg-recall-review > header p { margin: 0; color: var(--tg-brass-light); font-size: 1rem; font-weight: 800; }.tg-recall-review > header small { display: block; margin-top: .2rem; color: #b9c7cf; font-size: .88rem; line-height: 1.45; }
.tg-recall-review > header strong { display: grid; place-items: center; flex: 0 0 auto; min-width: 58px; min-height: 58px; border: 1px solid rgba(224,190,117,.45); border-radius: 50%; background: rgba(212,165,79,.12); color: #ffe2a2; font: 800 1.05rem Georgia,serif; }
.tg-recall-review > .tg-recall-criteria { display: grid; gap: .6rem; margin-top: .8rem; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
.tg-recall-criteria section { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: .65rem; padding: .75rem .8rem; border: 1px solid; border-radius: .7rem; }
.tg-recall-criteria section > i { margin-top: .18rem; font-size: 1.1rem; }.tg-recall-criteria h3,.tg-recall-criteria p { margin: 0; }.tg-recall-criteria h3 { color: #f0f5f7; font-size: 1rem; }.tg-recall-criteria p { margin-top: .12rem; color: #c3d0d7; font-size: .94rem; line-height: 1.5; }
.tg-recall-criteria section.is-right { border-color: rgba(89,214,157,.4); background: rgba(89,214,157,.08); }.tg-recall-criteria section.is-right > i { color: var(--tg-good); }.tg-recall-criteria section.is-right p { color: #aee9cf; }
.tg-recall-criteria section.is-missing { border-color: rgba(240,123,114,.38); background: rgba(240,123,114,.07); }.tg-recall-criteria section.is-missing > i { color: var(--tg-bad); }.tg-recall-criteria section.is-missing b { color: #ffd2cc; }
.tg-recall-criteria label { display: block; margin-top: .55rem; }.tg-recall-criteria input { width: 100%; min-height: 48px; padding: .6rem .7rem; border: 1px solid rgba(240,123,114,.4); border-radius: .55rem; outline: none; background: rgba(3,12,19,.68); color: #fff; font-family: "Noto Serif Thai",serif; font-size: 1rem; }.tg-recall-criteria input:focus { border-color: var(--tg-brass-light); box-shadow: 0 0 0 3px rgba(212,165,79,.14); }
.tg-recall-model { margin-top: .8rem; border: 1px solid rgba(224,190,117,.25); border-radius: .65rem; background: rgba(4,14,22,.45); }.tg-recall-model summary { min-height: 48px; padding: .75rem .85rem; color: #e6c986; font-size: .95rem; font-weight: 800; cursor: pointer; }.tg-recall-model > div { padding: 0 .85rem .85rem; color: #eef4f8; font-family: "Noto Serif Thai",serif; font-size: 1.02rem; line-height: 1.75; white-space: pre-wrap; }
.tg-recall-review > .tg-paper-actions { margin-top: .85rem; }.tg-recall-review > .tg-paper-actions .tg-btn { min-height: 48px; }

@media (max-width: 700px) {
	.tg-signature-grid,.tg-gear-machine { grid-template-columns: 1fr; gap: .55rem; }
	.tg-gear-machine::before { display: none; }.tg-signature-slot { padding: .65rem; }
	.tg-signature-options,.tg-gear-options { gap: .35rem; }.tg-signature-options button,.tg-gear-options button { min-height: 48px; padding: .45rem; }
	.tg-signal-board { grid-template-columns: 1fr; gap: .4rem; }.tg-signal-board button { min-height: 52px; }
	.tg-forge-equation { display: grid; grid-template-columns: 1fr auto 1fr; gap: .35rem; }.tg-forge-equation span { min-width: 0; min-height: 50px; }.tg-forge-equation span:last-child { grid-column: 1/-1; }.tg-forge-equation i.fa-arrow-right { grid-column: 1/-1; transform: rotate(90deg); }
	.tg-stage-actors { gap: .3rem; }.tg-stage-actors span { min-width: 0; flex: 1; padding: .45rem .25rem; }.tg-stage-actors b { width: 14px; }
	.tg-inspection-lens { width: 150px; height: 150px; }.tg-inspection-lens h2 { font-size: 1.7rem; }
	.tg-recall-review { padding: .75rem; }.tg-recall-review > header { align-items: flex-start; }.tg-recall-review > header strong { min-width: 52px; min-height: 52px; }.tg-recall-criteria section { padding: .65rem; }
}