/* รถไฟจะไปสนามหลวง — เกมฝึกสมาส ป.๑-๒
   ธีม: ชานชาลากลางคืน คราม-ทองเหลือง ไอน้ำ ตะเกียงแก๊ส · ปลายทางรุ่งอรุณที่สนามหลวง
   กติกาหน้าจอ (handoff ข้อ ๒/๘): หัวอยู่บน · พื้นที่เล่นเต็มแนว · การ์ดครีมโปร่งเฉพาะที่มีเนื้อหา
   ห้ามมีแผ่นทึบสูงยาวที่ว่างเปล่า · ปุ่มแตะสูงอย่างน้อย 44px · ไม่มี horizontal overflow */

[v-cloak] { display: none !important; }

.tr-app {
	--tr-night: #07142c;
	--tr-night-2: #0d2144;
	--tr-ink: #16233c;
	--tr-ink-soft: #55637c;
	--tr-cream: #fffaf0;
	--tr-cream-line: #e6d9bd;
	--tr-brass: #c9a227;
	--tr-lamp: #f6c85f;
	--tr-lamp-soft: #ffeab8;
	--tr-indigo: #2b3f8f;
	--tr-indigo-deep: #0c1538;
	--tr-green: #1f8a5c;
	--tr-green-soft: #dcf3e7;
	--tr-red: #c0392f;
	--tr-red-soft: #fdeae7;
	--tr-tint: var(--tr-lamp);
	--tr-shadow: 0 18px 48px rgba(4, 10, 24, .45);
	--tr-radius: 18px;
}

/* ── โครงหน้า ─────────────────────────────────────────────────────── */

.tr-body {
	margin: 0;
	background: var(--tr-night, #07142c);
	color: #f3ece0;
	font-family: 'Sarabun', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.tr-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.tr-app *, .tr-app *::before, .tr-app *::after { box-sizing: border-box; }
.tr-app img { max-width: 100%; }

.tr-system {
	flex: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; padding: 48px 20px; text-align: center;
	background: radial-gradient(120% 90% at 50% 0%, #12294f 0%, var(--tr-night) 70%);
}
.tr-system strong { font-size: 1.15rem; color: var(--tr-lamp-soft); }
.tr-system small, .tr-system p { color: #b9c4d8; max-width: 34rem; }
.tr-system h1 { font-size: 1.5rem; margin: 0; color: #fff; }
.tr-lamp {
	width: 62px; height: 62px; border-radius: 50%;
	display: grid; place-items: center; font-size: 1.5rem;
	background: radial-gradient(circle at 35% 30%, #ffe9b0, var(--tr-brass));
	color: #3a2a06; box-shadow: 0 0 34px rgba(246, 200, 95, .5);
	animation: tr-lamp-pulse 2.4s ease-in-out infinite;
}
.tr-lamp.is-stop { background: radial-gradient(circle at 35% 30%, #ffb3aa, var(--tr-red)); color: #fff; box-shadow: 0 0 34px rgba(192, 57, 47, .5); }
@keyframes tr-lamp-pulse { 50% { box-shadow: 0 0 46px rgba(246, 200, 95, .78); } }

/* ── ฉาก ──────────────────────────────────────────────────────────── */

.tr-intro, .tr-run, .tr-arrival {
	position: relative; flex: 1;
	display: flex; flex-direction: column;
	background-size: cover; background-position: center;
	background-color: var(--tr-night);
}
.tr-scene-shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 12, 26, .72) 0%, rgba(5, 12, 26, .3) 26%, rgba(5, 12, 26, .58) 62%, rgba(4, 9, 20, .9) 100%),
		radial-gradient(90% 60% at 50% 100%, rgba(4, 9, 20, .78), transparent 70%);
}
.tr-scene-shade.is-warm {
	background:
		linear-gradient(180deg, rgba(20, 12, 4, .58) 0%, rgba(30, 18, 5, .18) 30%, rgba(12, 8, 3, .68) 100%);
}

.tr-back-link {
	position: relative; z-index: 3;
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 10px 16px; margin: 14px 0 0 14px;
	border: 1px solid rgba(255, 250, 240, .28); border-radius: 999px;
	background: rgba(7, 20, 44, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: #f0e6d4; font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}
.tr-back-link:hover { background: rgba(7, 20, 44, .8); border-color: var(--tr-lamp); }
.tr-back-link:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }

/* ── ชานชาลา (intro) ──────────────────────────────────────────────── */

.tr-intro-copy {
	position: relative; z-index: 2;
	margin: auto auto 0; width: 100%; max-width: 60rem;
	padding: 24px 22px 42px; text-align: center;
}
.tr-intro-sound {
	position: absolute; z-index: 31; top: 14px; right: 154px;
}
.tr-intro-passport {
	position: absolute; z-index: 31; top: 14px; right: 206px;
}
.tr-intro-passport i { color: var(--tr-lamp); }
.tr-eyebrow {
	margin: 0 0 10px; font-size: .78rem; letter-spacing: .22em;
	text-transform: uppercase; color: var(--tr-lamp);
}
.tr-intro-copy h1 {
	margin: 0 0 14px; font-size: clamp(2.1rem, 7vw, 3.9rem); line-height: 1.12; font-weight: 700;
	color: #fffaf0; text-shadow: 0 4px 26px rgba(0, 0, 0, .7);
}
.tr-intro-copy h1 em {
	font-style: normal; color: var(--tr-lamp);
	text-shadow: 0 0 34px rgba(246, 200, 95, .55);
}
.tr-lede { margin: 0 auto 22px; max-width: 44rem; color: #dfe6f2; line-height: 1.85; font-size: clamp(.94rem, 2.4vw, 1.05rem); }

.tr-intro-facts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin: 0 0 20px; padding: 0;
}
.tr-intro-facts > div {
	min-width: 8.5rem; padding: 12px 18px; border-radius: 14px;
	background: rgba(255, 250, 240, .1); border: 1px solid rgba(255, 250, 240, .2);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tr-intro-facts dt { font-size: .74rem; letter-spacing: .06em; color: #c2cde0; margin: 0 0 4px; }
.tr-intro-facts dd { margin: 0; font-size: 1.16rem; font-weight: 700; color: var(--tr-lamp-soft); }

.tr-due-callout {
	display: flex; align-items: center; gap: 12px; text-align: left;
	margin: 0 auto 20px; max-width: 32rem; padding: 12px 16px; border-radius: 14px;
	background: rgba(246, 200, 95, .13); border: 1px solid rgba(246, 200, 95, .42); color: #ffeec4;
}
.tr-due-callout i { font-size: 1.2rem; color: var(--tr-lamp); }
.tr-due-callout strong { display: block; font-size: .95rem; }
.tr-due-callout small { color: #e3d6b8; }

.tr-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }

.tr-play-mode {
	display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto 12px;
}
.tr-play-mode-label, .tr-theme-label { color: #dfe6f2; font-size: .76rem; font-weight: 700; letter-spacing: .08em; }
.tr-mode-switch {
	position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 24rem); padding: 1px; gap: 2px; border-radius: 12px;
	background: rgba(4, 12, 28, .76); border: 1px solid rgba(255, 250, 240, .3);
	box-shadow: inset 0 1px 0 rgba(255, 250, 240, .1), 0 7px 18px rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tr-mode-slider {
	position: absolute; z-index: 0; inset: 1px auto 1px 1px; width: calc(50% - 1.5px);
	border-radius: 8px; background: linear-gradient(145deg, rgba(246, 200, 95, .3), rgba(201, 162, 39, .12));
	box-shadow: 0 4px 12px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(246, 200, 95, .68);
	transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.tr-mode-switch.is-line .tr-mode-slider { transform: translateX(100%); }
/* สวิตช์กรองพาสปอร์ตใช้ค่า visited/all — ตัวเลื่อนไปขวาเมื่อเลือก "ทั้งหมด" */
.tr-mode-switch.is-all .tr-mode-slider { transform: translateX(100%); }
.tr-mode-btn {
	position: relative; z-index: 1; min-height: 44px; padding: 2px 16px; border: 0; border-radius: 8px;
	background: transparent; color: #dfe6f2; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
	transition: color .16s ease, transform .16s ease;
}
.tr-mode-btn:hover { color: #fff8e9; transform: translateY(-1px); }
.tr-mode-btn:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-mode-btn.is-on { color: #fff3d6; }

/* ── ตั๋วโดยสาร: การตั้งค่าของเที่ยวนี้ ─────────────────────────────── */

.tr-journey-ticket {
	position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 96px;
	width: min(100%, 58rem); margin: 14px auto 12px; overflow: hidden; border-radius: 14px;
	background:
		linear-gradient(90deg, rgba(126, 83, 21, .05) 1px, transparent 1px) 0 0 / 7px 100%,
		linear-gradient(180deg, #f7ebca 0%, #ead29a 100%);
	color: #392b17; text-align: left;
	box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(115, 76, 19, .46);
}
.tr-journey-ticket::before, .tr-journey-ticket::after {
	content: ""; position: absolute; z-index: 4; top: 50%; width: 24px; height: 24px; border-radius: 50%;
	background: #071124; box-shadow: inset 0 0 0 1px rgba(246, 200, 95, .18);
}
.tr-journey-ticket::before { left: -12px; }
.tr-journey-ticket::after { right: -12px; }
.tr-ticket-face { min-width: 0; padding: 11px 14px 12px; }
.tr-ticket-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid rgba(112, 73, 17, .32);
}
.tr-ticket-head > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; }
.tr-ticket-kind { display: flex; align-items: center; gap: 6px; margin: 0; color: #815d20; font-size: .67rem; font-weight: 800; letter-spacing: .06em; }
.tr-ticket-kind i { color: #a26f0f; }
.tr-ticket-head strong { display: block; color: #34230d; font-size: .9rem; line-height: 1.25; }
.tr-ticket-head strong i { margin: 0 5px; color: #ad791a; font-size: .72em; }
.tr-ticket-serial { flex: 0 0 auto; color: #765828; font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.tr-ticket-passenger {
	display: grid; grid-template-columns: max-content minmax(9rem, 1fr) max-content; align-items: center; gap: 9px;
	padding: 0 8px 9px; margin-bottom: 8px;
}
.tr-ticket-passenger > label { color: #5d431a; font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.tr-ticket-passenger > small { color: #806431; font-size: .64rem; white-space: nowrap; }
.tr-passenger-field {
	min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 6px;
	border-bottom: 1px solid rgba(91, 58, 15, .62);
}
.tr-passenger-field i { flex: 0 0 auto; color: #a17018; font-size: .8rem; }
.tr-passenger-field input {
	min-width: 0; width: 100%; min-height: 44px; padding: 4px 0; border: 0; outline: 0;
	background: transparent; color: #35230c; font: inherit; font-size: 1rem; font-weight: 700;
}
.tr-passenger-field input::placeholder { color: #8d7446; font-weight: 500; opacity: .9; }
.tr-passenger-field:focus-within { border-radius: 7px; outline: 3px solid var(--tr-indigo); outline-offset: 2px; }
.tr-ticket-options {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
	padding-top: 8px; border-top: 1px solid rgba(112, 73, 17, .28);
}
.tr-ticket-setting {
	min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 0 8px;
	border-radius: 0; background: transparent; box-shadow: none;
}
.tr-ticket-setting + .tr-ticket-setting { box-shadow: inset 1px 0 rgba(100, 64, 12, .3); }
.tr-ticket-label { color: #5d431a; font-size: .67rem; font-weight: 800; letter-spacing: .03em; }
.tr-ticket-setting small { display: none; }
.tr-journey-ticket .tr-mode-switch, .tr-journey-ticket .tr-theme-switch, .tr-vocab-switch {
	width: 100%; border-radius: 10px; border-color: rgba(71, 51, 20, .55); background: #172137; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tr-vocab-switch {
	position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 1px; gap: 2px; border: 1px solid rgba(71, 51, 20, .55); border-radius: 12px;
}
.tr-vocab-slider {
	position: absolute; z-index: 0; inset: 1px auto 1px 1px; width: calc(50% - 1.5px); border-radius: 8px;
	background: linear-gradient(145deg, rgba(246, 200, 95, .32), rgba(201, 162, 39, .16));
	box-shadow: inset 0 0 0 1px rgba(246, 200, 95, .72);
	transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.tr-vocab-switch.is-all .tr-vocab-slider { transform: translateX(100%); }
.tr-vocab-btn {
	position: relative; z-index: 1; min-height: 44px; padding: 2px 5px; border: 0; border-radius: 8px;
	background: transparent; color: #dfe6f2; font: inherit; font-size: .7rem; font-weight: 700; line-height: 1.2; cursor: pointer;
	transition: color .16s ease, transform .16s ease;
}
.tr-vocab-btn:hover { color: #fff8e9; transform: translateY(-1px); }
.tr-vocab-btn.is-on { color: #fff3d6; }
.tr-vocab-btn:focus-visible { outline: 3px solid var(--tr-indigo); outline-offset: 2px; }
.tr-ticket-stub {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	padding: 10px 8px; border-left: 1px dashed rgba(100, 64, 12, .58); text-align: center;
	background: rgba(230, 198, 126, .46);
}
.tr-ticket-stub > span { color: #6f4e19; font-size: .57rem; font-weight: 900; letter-spacing: .13em; writing-mode: vertical-rl; }
.tr-ticket-stub > strong { color: #4b3514; font-size: 1.55rem; line-height: 1; }
.tr-ticket-barcode {
	display: block; width: 46px; height: 18px;
	background: repeating-linear-gradient(90deg, #3d2b10 0 2px, transparent 2px 4px, #3d2b10 4px 5px, transparent 5px 8px);
}
.tr-ticket-stub small { color: #65491e; font-size: .72rem; font-weight: 700; }
.tr-ticket-stamp {
	position: absolute; z-index: 6; left: auto; right: 110px; top: 13px; pointer-events: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	min-width: 92px; min-height: 52px; padding: 7px 10px;
	border: 3px double rgba(137, 40, 31, .9); border-radius: 50%; color: rgba(137, 40, 31, .92);
	background: rgba(247, 235, 202, .76); font-size: .8rem; font-weight: 900;
	opacity: 0; transform: translateY(-28px) rotate(-9deg) scale(1.55);
	filter: blur(2px); box-shadow: 0 5px 14px rgba(82, 28, 21, .18);
}
.tr-ticket-stamp.is-stamped {
	animation: tr-ticket-stamp-impact .38s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes tr-ticket-stamp-impact {
	0% { opacity: 0; transform: translateY(-28px) rotate(-9deg) scale(1.55); filter: blur(2px); }
	58%, 100% { opacity: 1; transform: translateY(0) rotate(-9deg) scale(1); filter: blur(0); }
}
.tr-journey-ticket .tr-mode-btn, .tr-journey-ticket .tr-theme-btn { min-height: 44px; padding: 0 5px; font-size: .78rem; }

/* ── ปุ่ม ─────────────────────────────────────────────────────────── */

.tr-primary, .tr-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 46px; padding: 12px 22px; border-radius: 999px;
	font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.tr-primary {
	border: 1px solid #d9ae3a;
	background: linear-gradient(180deg, #ffdd8a, var(--tr-brass));
	color: #2c1e02; box-shadow: 0 8px 24px rgba(201, 162, 39, .38);
}
.tr-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 162, 39, .5); }
.tr-primary-lg { min-height: 54px; padding: 15px 30px; font-size: 1.05rem; }
.tr-ghost {
	border: 1px solid rgba(255, 250, 240, .34);
	background: rgba(7, 20, 44, .5); color: #f0e6d4; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tr-ghost:hover { background: rgba(7, 20, 44, .78); border-color: var(--tr-lamp); }
.tr-ghost-sm { min-height: 44px; padding: 10px 16px; font-size: .88rem; }
.tr-primary:focus-visible, .tr-ghost:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 3px; }
.tr-intro-actions button:disabled { cursor: wait; opacity: .82; transform: none; }

.tr-icon-btn {
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid rgba(255, 250, 240, .28); background: rgba(7, 20, 44, .55);
	color: #f0e6d4; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tr-icon-btn:hover { border-color: var(--tr-lamp); }
.tr-icon-btn:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }

/* ── เลือกธีมภาพ (เป็นการตั้งค่า ไม่ใช่สถานะเกม จึงไม่อยู่ใน URL) ─────── */

.tr-theme-pick {
	display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; margin: 0 auto 14px;
}
.tr-theme-switch {
	position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 24rem); padding: 1px; gap: 2px; border-radius: 12px;
	background: rgba(4, 12, 28, .72); border: 1px solid rgba(255, 250, 240, .26);
	box-shadow: inset 0 1px 0 rgba(255, 250, 240, .1), 0 8px 22px rgba(0, 0, 0, .18);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tr-theme-slider {
	position: absolute; z-index: 0; inset: 1px auto 1px 1px; width: calc(50% - 1.5px);
	border-radius: 8px; background: linear-gradient(145deg, rgba(246, 200, 95, .28), rgba(201, 162, 39, .12));
	box-shadow: 0 5px 14px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(246, 200, 95, .68);
	transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.tr-theme-switch.is-magic .tr-theme-slider { transform: translateX(100%); }
.tr-theme-btn {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 2px 16px; border: 0; border-radius: 8px; cursor: pointer;
	background: transparent; color: #dfe6f2; font: inherit; font-size: .9rem; font-weight: 700; text-align: center;
	transition: color .16s ease, transform .16s ease;
}
.tr-theme-name { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.tr-theme-btn:hover { color: #fff8e9; transform: translateY(-1px); }
.tr-theme-btn:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-theme-btn.is-on {
	color: #fff3d6;
}
.tr-journey-ticket .tr-theme-pick { width: 100%; margin: 0; align-items: stretch; justify-content: flex-start; }

/* ── สามเณรภูริ ─────────────────────────────────────────────────────── */

/* หน้าชานชาลา — ยืนถือตะเกียงมุมซ้ายล่าง ไม่ทับข้อความที่จัดกลาง */
.tr-platform-buddy {
	position: absolute; z-index: 2; left: 2vw; bottom: 0;
	width: clamp(96px, 13vw, 190px); height: auto;
	filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
	pointer-events: none; -webkit-user-select: none; user-select: none;
}

/* ในขบวน — โผล่ข้างคำติชม ขนาดเล็ก ไม่แย่งที่กับบาลี */
.tr-buddy {
	flex: 0 0 auto; width: 62px; height: auto; align-self: center;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22));
	animation: tr-buddy-in .3s ease both;
}
@keyframes tr-buddy-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }

/* ถึงสนามหลวง — โบกธงอยู่หัวการ์ด */
.tr-arrival-buddy {
	width: clamp(88px, 18vw, 122px); height: auto; align-self: center;
	margin-bottom: -6px;
	filter: drop-shadow(0 8px 18px rgba(90, 60, 10, .3));
}

/* ── รายชื่อ: เลือกได้หลายข้อพร้อมกัน ────────────────────────────────── */

.tr-name-task {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	padding: 7px 13px; border-radius: 999px; font-size: .86rem; font-weight: 600;
	background: #f3ead7; border: 1px solid #d7c39a; color: #6b5a2c;
}
.tr-name-task i { color: var(--tr-brass); }
.tr-choice.is-selected {
	border-color: var(--tr-indigo); background: #eef1fd; color: var(--tr-indigo-deep);
}
.tr-choice.is-selected .tr-choice-key { background: #ccd5f7; color: var(--tr-indigo-deep); }
.tr-choice.is-selected .tr-choice-mark { color: var(--tr-indigo); }
.tr-name-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.tr-sync { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .82rem; color: #a8b6cd; }
/* เขียว = ของถึงที่ปลอดภัยแล้ว (ในเครื่อง หรือขึ้นบัญชี) · ส้ม = ยังไม่ถึง เก็บในเครื่องไว้ก่อน */
.tr-sync.is-saved,
.tr-sync.is-synced { color: #9fd8bb; }
.tr-sync.is-error { color: #f0b3ac; }

/* ── แผนที่สาย ────────────────────────────────────────────────────── */

.tr-map {
	flex: 1; padding: 0 0 44px;
	background: radial-gradient(120% 80% at 50% -10%, #16305c 0%, var(--tr-night) 62%);
}
.tr-map-head { max-width: 66rem; margin: 0 auto; padding: 0 20px 22px; }
.tr-map-toolbar {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
	padding-top: 14px; margin-bottom: 18px;
}
.tr-passport-link {
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 9px 14px; border: 1px solid rgba(246, 200, 95, .48); border-radius: 12px;
	background: rgba(7, 20, 44, .66); color: #ffe7ad; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.tr-passport-link:hover { border-color: var(--tr-lamp); background: rgba(13, 31, 62, .9); }
.tr-passport-link:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-map-head .tr-back-link { margin: 0; flex: 0 0 auto; }
.tr-map-mode { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1; }
.tr-map-mode .tr-mode-switch { width: min(100%, 24rem); }
.tr-map-head h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 2.2rem); color: #fffaf0; }
.tr-map-head p { margin: 0 0 10px; color: #c3cee2; line-height: 1.8; max-width: 46rem; }
.tr-map-head .tr-map-passenger {
	display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 4px 10px;
	border: 1px solid rgba(246, 200, 95, .34); border-radius: 8px; color: #ffe7ad; font-size: .82rem; line-height: 1.4;
}

.tr-line-list {
	list-style: none; margin: 0 auto; padding: 0 20px;
	max-width: 66rem; display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.tr-line-list.is-hub-only { grid-template-columns: 1fr; }
.tr-line-card {
	position: relative; width: 100%; display: flex; align-items: stretch; gap: 0;
	padding: 0; border-radius: var(--tr-radius); overflow: hidden; cursor: pointer;
	border: 1px solid rgba(255, 250, 240, .16);
	background: linear-gradient(180deg, rgba(20, 36, 68, .94), rgba(9, 20, 40, .97));
	color: #eef3fb; font: inherit; text-align: left;
	box-shadow: 0 12px 30px rgba(3, 8, 18, .45);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tr-line-card:hover { transform: translateY(-3px); border-color: var(--tr-tint); box-shadow: 0 18px 40px rgba(3, 8, 18, .6); }
.tr-line-card:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 3px; }
.tr-line-card.is-complete { border-color: rgba(31, 138, 92, .7); }
.tr-line-card.has-due { border-color: rgba(246, 200, 95, .7); }
.tr-line-card.is-hub {
	grid-column: 1 / -1; border-color: rgba(246, 200, 95, .72);
	background: linear-gradient(180deg, rgba(37, 45, 69, .97), rgba(12, 24, 44, .98));
}
.tr-line-card.is-hub .tr-line-art { flex-basis: 25%; }
.tr-hub-description { max-width: 48rem; font-size: .92rem !important; color: #dce4f1 !important; }
.tr-hub-lines { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.tr-hub-lines b {
	padding: 4px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600;
	background: rgba(246, 200, 95, .12); border: 1px solid rgba(246, 200, 95, .32); color: #ffe8b2;
}

.tr-line-art {
	flex: 0 0 34%; min-height: 158px;
	background-size: cover; background-position: center;
	border-right: 1px solid rgba(255, 250, 240, .12);
}
.tr-line-body { flex: 1; min-width: 0; padding: 14px 15px; display: flex; flex-direction: column; gap: 3px; }
.tr-line-code {
	align-self: flex-start; font-size: .7rem; letter-spacing: .14em;
	padding: 3px 9px; border-radius: 999px; margin-bottom: 3px;
	background: color-mix(in srgb, var(--tr-tint) 28%, transparent);
	border: 1px solid color-mix(in srgb, var(--tr-tint) 60%, transparent);
	color: #fff3d6;
}
.tr-line-body strong { font-size: 1.12rem; color: #fffaf0; }
.tr-line-body em { font-style: normal; font-weight: 600; font-size: .92rem; color: var(--tr-tint); }
.tr-line-body small { font-size: .82rem; color: #bcc8dd; line-height: 1.6; }
.tr-line-metaphor { font-size: .78rem; color: #93a3bd; line-height: 1.6; margin-top: 2px; }
.tr-line-metaphor i { color: var(--tr-tint); margin-inline-end: 4px; }

.tr-line-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 250, 240, .16); margin: 8px 0 6px; overflow: hidden; }
.tr-line-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tr-tint); transition: width .3s ease; }
.tr-line-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: .76rem; }
.tr-line-stats b { font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 250, 240, .1); color: #cfd9ea; }
.tr-line-stats b.is-good { background: rgba(31, 138, 92, .24); color: #a7e3c6; }
.tr-line-stats b.is-due { background: rgba(246, 200, 95, .2); color: #ffe3a3; }
.tr-line-stats b.is-exam { background: rgba(43, 63, 143, .35); color: #c3cffb; }
.tr-line-go { align-self: center; padding-inline-end: 12px; color: #7d8daa; }

/* ── ในขบวน ───────────────────────────────────────────────────────── */

.tr-hud {
	position: relative; z-index: 3;
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; width: 100%;
}
.tr-hud .tr-back-link { margin: 0; flex: 0 0 auto; }
.tr-hud-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tr-hud-line {
	font-size: .8rem; font-weight: 600; padding: 3px 12px; border-radius: 999px;
	background: color-mix(in srgb, var(--tr-tint) 26%, rgba(7, 20, 44, .7));
	border: 1px solid color-mix(in srgb, var(--tr-tint) 55%, transparent);
	color: #fff3d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tr-hud-station { font-size: .76rem; color: #c3cee2; letter-spacing: .04em; }
.tr-hud-world-stop { color: #ffe4a1; font-size: .72rem; font-weight: 700; }
.tr-hud-passenger {
	display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
	color: #ffe4a1; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-hud-passenger i { flex: 0 0 auto; font-size: .65rem; }
.tr-hud-right { flex: 0 0 auto; }

/* รางความคืบหน้า */
.tr-track { position: relative; z-index: 3; height: 26px; margin: 2px 20px 6px; }
.tr-track-rail { position: absolute; inset-inline: 0; top: 12px; height: 3px; border-radius: 999px; background: rgba(255, 250, 240, .2); }
.tr-track-fill { position: absolute; inset-inline-start: 0; top: 12px; height: 3px; border-radius: 999px; background: var(--tr-lamp); transition: width .35s ease; }
.tr-track-mark { position: absolute; top: 9px; width: 9px; height: 9px; margin-inline-start: -4px; border-radius: 50%; background: rgba(255, 250, 240, .3); }
.tr-track-mark.is-done { background: var(--tr-lamp); box-shadow: 0 0 10px rgba(246, 200, 95, .7); }
.tr-track-loco {
	position: absolute; top: 0; margin-inline-start: -12px; width: 26px; height: 26px;
	display: grid; place-items: center; font-size: .95rem; color: var(--tr-lamp);
	text-shadow: 0 0 12px rgba(246, 200, 95, .9); transition: left .35s ease;
}

/* พื้นที่เล่น — เต็มแนว ไม่แบ่งคอลัมน์ */
.tr-stage {
	position: relative; z-index: 2; flex: 1;
	width: 100%; max-width: 62rem; margin: 0 auto;
	padding: 4px 18px 34px;
	display: flex; flex-direction: column; gap: 14px; justify-content: center;
}

/* ป้ายศัพท์ — ลำดับสายตาแรก */
.tr-word-plate {
	align-self: center; max-width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 13px 22px; border-radius: 14px; text-align: center;
	background: rgba(7, 18, 38, .62); border: 1px solid rgba(246, 200, 95, .3);
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.tr-plate-tag { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #9db0cd; }
.tr-plate-word {
	font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; line-height: 1.24;
	color: var(--tr-lamp-soft); text-shadow: 0 0 26px rgba(246, 200, 95, .35);
	word-break: break-word;
}
.tr-plate-trans { font-size: .95rem; color: #d3dcec; line-height: 1.65; }
.tr-plate-vik { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; margin-top: 3px; }
.tr-plate-vik b { font-weight: 600; font-size: 1.02rem; color: #cddaf4; padding: 1px 4px; border-radius: 5px; }
.tr-plate-vik b.is-signal {
	color: #2c1e02; background: var(--tr-lamp);
	box-shadow: 0 0 16px rgba(246, 200, 95, .65);
}
.tr-plate-vik i { color: #6f7f9c; font-style: normal; }
.tr-plate-exam { font-size: .74rem; color: #a9b7cf; }

/* การ์ดโจทย์ — ครีมโปร่ง สูงเท่าเนื้อหา ไม่มีแผ่นว่าง */
.tr-card {
	background: rgba(255, 250, 240, .95);
	border: 1px solid var(--tr-cream-line); border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow); color: var(--tr-ink);
	padding: 18px 18px 16px;
	display: flex; flex-direction: column; gap: 12px;
	animation: tr-card-in .28s ease both;
}
@keyframes tr-card-in { from { opacity: 0; transform: translateY(10px); } }

.tr-task-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.tr-review-label {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 9px; border-radius: 999px;
	background: var(--tr-lamp-soft); color: var(--tr-indigo-deep);
	border: 1px solid var(--tr-brass);
	font-size: .7rem; font-weight: 800; line-height: 1.25;
}
.tr-scope-fallback { display: inline-flex; align-items: center; gap: 6px; color: #765b24; font-size: .75rem; font-weight: 700; }
.tr-review-label i { font-size: .7rem; }
.tr-stage-label {
	padding: 3px 7px; border-radius: 7px; background: #e6eafb;
	color: var(--tr-indigo); font-size: .7rem; font-weight: 700; line-height: 1.35;
}
.tr-task-kicker {
	margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: #8a6a1c;
}
.tr-prompt {
	margin: 0; font-size: clamp(1.18rem, 3.4vw, 1.5rem); font-weight: 700; line-height: 1.55;
	color: var(--tr-indigo-deep);
}
.tr-prompt:focus-visible { outline: 3px solid var(--tr-indigo); outline-offset: 4px; border-radius: 6px; }

/* ขบวนที่ต่อแล้ว */
.tr-consist {
	position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
	min-height: 92px; padding: 16px 12px 28px; border-radius: 12px; overflow: visible;
	background: linear-gradient(180deg, #f3ead7 0%, #eadcc0 100%); border: 1px solid #d7c39a;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.tr-consist::before,
.tr-consist::after {
	content: ""; position: absolute; z-index: 0; inset-inline: 12px; bottom: 12px;
	border-radius: 999px; pointer-events: none;
}
.tr-consist::before {
	height: 3px; background: #6a6b70; box-shadow: 0 7px 0 #a99b7d, 0 8px 0 rgba(83, 70, 47, .28);
}
.tr-consist::after {
	bottom: 19px; height: 2px; background: #b1b3b4; opacity: .9;
}
.tr-car {
	position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
	min-width: 78px; min-height: 56px; padding: 13px 15px 16px; border-radius: 7px 7px 5px 5px;
	font-weight: 700; font-size: 1.02rem; line-height: 1.2;
	background: linear-gradient(180deg, #fffdf7 0%, #f5ead4 22%, #ddc9a1 23%, #eee0c3 100%);
	border: 1px solid #9c8b69; color: var(--tr-indigo-deep);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 0 #a99468, 0 7px 12px rgba(73, 59, 32, .16);
	animation: tr-car-couple .18s cubic-bezier(.2, .8, .2, 1) both;
}
.tr-car::before {
	content: ""; position: absolute; z-index: 0; top: -6px; inset-inline: 5px; height: 7px;
	border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #8e7a55, #b69b65);
	border: 1px solid #6f6046; box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.tr-car::after {
	content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -8px; height: 14px;
	background:
		radial-gradient(circle at 23% 50%, #252c3a 0 4px, #b69a5f 4.5px 6px, transparent 6.5px),
		radial-gradient(circle at 77% 50%, #252c3a 0 4px, #b69a5f 4.5px 6px, transparent 6.5px);
	pointer-events: none;
}
.tr-car-label { position: relative; z-index: 3; text-align: center; white-space: nowrap; }
@keyframes tr-car-couple {
	from { opacity: .2; transform: translateX(10px); filter: brightness(1.12); }
}
.tr-car.is-name { font-size: .92rem; }
.tr-car.is-empty {
	background: rgba(255, 250, 240, .18); border: 1px dashed #a99a72; color: #a99a72;
	box-shadow: none; font-weight: 400; animation: none;
}
.tr-car.is-empty::before { background: rgba(169, 154, 114, .45); border-color: #a99a72; }
.tr-car.is-final { animation: tr-car-arrive .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tr-car-arrive {
	from { opacity: .2; transform: translateX(18px) scale(.96); filter: brightness(1.18); }
}
.tr-coupler {
	position: relative; z-index: 2; flex: 0 0 14px; width: 14px; height: 6px; border-radius: 2px;
	background: #675b48; box-shadow: inset 0 1px 0 #c0a873, 0 2px 0 rgba(71, 56, 31, .38);
}
.tr-consist-progress {
	position: absolute; z-index: 2; inset-inline-end: 12px; bottom: 3px;
	padding-inline: 5px; border-radius: 4px; background: #eadcc0;
	color: #766746; font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.tr-name-task {
	display: flex; align-items: center; gap: 9px; padding: 10px 12px;
	border-radius: 11px; background: #f3ead7; border: 1px dashed #d7c39a;
	color: #6d6045; font-size: .92rem; font-weight: 700;
}
.tr-name-task i { color: #9a7a28; }

/* ตัวเลือก — โหมดรายชื่อมีหลายคำตอบ */
.tr-choices { display: grid; gap: 9px; }
.tr-choices.is-row { grid-template-columns: repeat(3, 1fr); }
.tr-choices.is-pair { grid-template-columns: repeat(2, 1fr); }
.tr-choices.is-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-choice {
	position: relative; display: flex; align-items: center; gap: 11px;
	width: 100%; min-height: 54px; padding: 12px 14px;
	border-radius: 12px; border: 2px solid #ded0af;
	background: #fffdf8; color: var(--tr-ink);
	font: inherit; font-size: 1.08rem; line-height: 1.55; text-align: start; cursor: pointer;
	transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.tr-choice:hover:not(:disabled) { border-color: var(--tr-brass); background: #fffbee; }
.tr-choice:active:not(:disabled) { transform: scale(.99); }
.tr-choice:focus-visible { outline: 3px solid var(--tr-indigo); outline-offset: 2px; }
.tr-choice-key {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-size: .82rem; font-weight: 700;
	background: #efe3c6; color: #7a5f14;
}
.tr-choice-text { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tr-choice-mark { flex: 0 0 auto; width: 20px; text-align: center; }
.tr-choice.is-wrong {
	border-color: var(--tr-red); background: var(--tr-red-soft); color: #7c241c;
	opacity: 1; cursor: not-allowed;
}
.tr-choice.is-wrong .tr-choice-key { background: #f3c9c3; color: #7c241c; }
.tr-choice.is-wrong .tr-choice-mark { color: var(--tr-red); }
.tr-choice.is-right { border-color: var(--tr-green); background: var(--tr-green-soft); color: #145c3e; }
.tr-choice.is-right .tr-choice-key { background: #b9e6d1; color: #145c3e; }
.tr-choice.is-right .tr-choice-mark { color: var(--tr-green); }
.tr-choice.is-selected { border-color: var(--tr-indigo); background: #edf2ff; color: var(--tr-indigo-deep); }
.tr-choice.is-selected .tr-choice-key { background: #cbd7fa; color: var(--tr-indigo-deep); }
.tr-choice.is-dimmed { opacity: .38; cursor: not-allowed; }
.tr-choice:disabled { cursor: not-allowed; }
.tr-name-submit:disabled { opacity: .45; cursor: not-allowed; }

/* ผลถูก/ผิด — สีไม่ใช่สัญญาณเดียว มีไอคอน+ข้อความเสมอ */
/* สามเณรยืนซ้าย ข้อความอยู่ขวา — ไม่ให้รูปกินบรรทัดของตัวเอง */
.tr-feedback { display: flex; align-items: center; gap: 10px; min-height: 0; }
.tr-verdict {
	flex: 1; min-width: 0;
	display: flex; align-items: flex-start; gap: 9px; margin: 0;
	padding: 11px 13px; border-radius: 11px; font-size: .93rem; line-height: 1.72;
}
.tr-verdict i { flex: 0 0 auto; margin-top: 4px; font-size: 1rem; }
.tr-verdict strong { font-weight: 700; }
.tr-verdict.is-idle { background: #f4eddc; color: #6d6045; border: 1px solid #e3d6b8; }
.tr-verdict.is-idle i { color: #a08a4c; }
.tr-verdict.is-right { background: var(--tr-green-soft); color: #145c3e; border: 1px solid #a8ddc4; }
.tr-verdict.is-right i { color: var(--tr-green); }
.tr-verdict.is-wrong { background: var(--tr-red-soft); color: #7c241c; border: 1px solid #f0c2bc; }
.tr-verdict.is-wrong i { color: var(--tr-red); }

.tr-card-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; align-items: center; }
.tr-card-actions .tr-ghost-sm { background: #f2e9d5; border-color: #d9c9a4; color: #6b5a2c; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tr-card-actions .tr-ghost-sm:hover { background: #ece0c5; border-color: var(--tr-brass); }
.tr-card-actions .tr-primary { margin-inline-start: auto; }

/* หลัก (modal) */
.tr-modal {
	position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
	padding: 20px; background: rgba(4, 10, 22, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	animation: tr-fade-in .18s ease both;
}
@keyframes tr-fade-in { from { opacity: 0; } }
.tr-modal-card {
	width: min(100%, 44rem); max-height: 84vh; overflow-y: auto;
	background: var(--tr-cream); border: 1px solid var(--tr-cream-line);
	border-radius: var(--tr-radius); box-shadow: var(--tr-shadow);
	padding: 20px; color: var(--tr-ink);
	display: flex; flex-direction: column; gap: 13px;
}
.tr-modal-card h3 { margin: 0; font-size: 1.06rem; color: var(--tr-indigo-deep); display: flex; align-items: center; gap: 8px; }
.tr-modal-card h3 i { color: var(--tr-brass); }
.tr-principle-text {
	margin: 0; padding: 13px 15px; border-radius: 11px; line-height: 1.95;
	background: #f6efdd; border-inline-start: 4px solid var(--tr-brass); color: #40342a;
}
.tr-principle-lead { margin: 0; color: #514630; line-height: 1.65; }
.tr-principle-list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 7px;
}
.tr-principle-list li {
	display: grid; grid-template-columns: minmax(10.5rem, .8fr) minmax(15rem, 1.2fr); gap: 10px 16px;
	align-items: baseline; padding: 9px 11px; border-radius: 9px;
	background: #f6efdd; border-inline-start: 3px solid #dbc270;
}
.tr-principle-list strong { color: var(--tr-indigo-deep); font-size: .93rem; }
.tr-principle-list span { color: #514630; line-height: 1.55; }
.tr-principle-list b { color: #8d2f27; font-weight: 800; }
.tr-principle-signal {
	margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-size: .9rem; color: #6b5a2c;
}
.tr-principle-signal b {
	font-weight: 700; padding: 5px 12px; border-radius: 9px;
	background: #fff3d0; border: 1px solid #e2cd94; color: var(--tr-indigo-deep);
}
.tr-modal-card .tr-primary { align-self: flex-end; }

@media (max-width: 580px) {
	.tr-principle-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* ── ถึงสนามหลวง ──────────────────────────────────────────────────── */

.tr-arrival { justify-content: center; align-items: center; padding: 26px 18px 40px; }
.tr-arrival-card {
	position: relative; z-index: 2; width: min(100%, 44rem);
	background: rgba(255, 250, 240, .96); border: 1px solid var(--tr-cream-line);
	border-radius: 22px; box-shadow: var(--tr-shadow); color: var(--tr-ink);
	padding: 26px 22px 22px; text-align: center;
	display: flex; flex-direction: column; gap: 14px;
	animation: tr-card-in .34s ease both;
}
.tr-stamp {
	align-self: center; padding: 7px 20px; border-radius: 999px;
	border: 2px solid var(--tr-green); color: var(--tr-green);
	font-weight: 700; letter-spacing: .16em; font-size: .82rem;
	transform: rotate(-3deg);
}
.tr-arrival-card h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--tr-indigo-deep); }
.tr-arrival-line { margin: 0; color: #6f6754; font-size: .95rem; }
.tr-arrival-sub { margin: 8px 0 16px; color: #8a6a1c; font-size: .86rem; font-weight: 700; }
.tr-station-arrival-visual {
	position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 0; margin: 0 0 18px; overflow: hidden; border-radius: 14px;
	background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(91, 61, 20, .28), 0 12px 26px rgba(42, 28, 11, .18);
}
.tr-station-arrival-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 11, 24, .72)); }
.tr-station-sign {
	position: absolute; z-index: 2; left: 18px; bottom: 16px; display: grid; gap: 2px; min-width: 170px;
	padding: 9px 14px; border: 1px solid rgba(246, 200, 95, .7); border-radius: 8px;
	background: rgba(7, 20, 44, .88); color: #fff4d5; text-align: left;
}
.tr-station-sign strong { font-size: 1rem; }
.tr-station-sign span { color: #d5c69d; font-size: .75rem; }

.tr-score { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 0; padding: 0; }
.tr-score > div {
	min-width: 8rem; padding: 11px 16px; border-radius: 13px;
	background: #f5eeda; border: 1px solid #e3d6b8;
}
.tr-score dt { font-size: .76rem; color: #7d6c47; margin-bottom: 3px; }
.tr-score dd { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--tr-indigo-deep); }

.tr-arrival-entries { text-align: start; }
.tr-arrival-entries h2 { margin: 0 0 9px; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: #8a6a1c; }
.tr-arrival-entries ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tr-arrival-entries li {
	display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
	background: #f7f1e1; border: 1px solid #e6dac0;
	border-inline-start: 4px solid var(--tr-brass);
}
.tr-arrival-entries strong { font-size: 1.14rem; color: var(--tr-indigo-deep); }
.tr-arrival-vik { font-size: 1rem; font-weight: 600; color: var(--tr-indigo); }
.tr-arrival-name { font-size: .88rem; font-weight: 600; color: #8a6a1c; }
.tr-arrival-trans { font-size: .88rem; color: #6b6151; }

.tr-review-note {
	display: flex; align-items: flex-start; gap: 11px; text-align: start;
	margin: 0; padding: 14px 16px; border-radius: 13px; font-size: .94rem; line-height: 1.65;
	background: var(--tr-lamp-soft); border: 2px solid var(--tr-brass); color: var(--tr-indigo-deep);
}
.tr-review-note-icon {
	flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
	margin-top: 1px; border-radius: 50%; background: var(--tr-brass); color: #fffaf0;
}
.tr-review-note-icon i { font-size: .88rem; }
.tr-review-note-copy { display: grid; gap: 2px; min-width: 0; }
.tr-review-note-copy strong { font-size: 1.12rem; line-height: 1.35; color: var(--tr-indigo-deep); }
.tr-review-note-copy span { overflow-wrap: anywhere; }
.tr-arrival-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 2px; }
.tr-arrival-actions .tr-ghost { background: #f2e9d5; border-color: #d9c9a4; color: #6b5a2c; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── พาสปอร์ตท่องโลก ─────────────────────────────────────────────── */
.tr-passport-page { flex: 1; min-height: 100vh; padding: 18px 20px 54px; background: radial-gradient(circle at 50% 0, #18345e, #071124 58%); }
.tr-passport-head { max-width: 68rem; margin: 0 auto 18px; display: flex; align-items: center; gap: 18px; color: #fffaf0; }
.tr-passport-head h1 { margin: 0 0 4px; font-size: clamp(1.45rem, 3vw, 2rem); }
.tr-passport-head p { margin: 0; color: #c3cee2; }
.tr-passport-book {
	max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr); gap: 18px;
	padding: 18px; border-radius: 16px; background: #f2e4bd; color: #35230c; box-shadow: 0 22px 54px rgba(0, 0, 0, .38);
}
.tr-passport-cover {
	position: sticky; top: 18px; align-self: start; min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 22px 18px; border-radius: 12px; background: #182b52; color: #f6df9e; text-align: center;
	box-shadow: inset 0 0 0 2px #b9933c, inset 0 0 0 7px #182b52, inset 0 0 0 8px rgba(246, 223, 158, .4);
}
.tr-passport-cover > span { font-size: .78rem; font-weight: 900; letter-spacing: .16em; }
.tr-passport-cover > strong { font-size: 1.3rem; }
.tr-passport-cover img { width: 100%; max-width: 260px; height: auto; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .36)); }
.tr-passport-cover p { margin: 0; color: #e3cf98; font-size: .84rem; }
.tr-passport-stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-passport-stamps li { position: relative; min-width: 0; padding: 10px; border: 1px dashed #b79b65; border-radius: 10px; background: rgba(255, 251, 239, .62); }
.tr-passport-stamps li.is-visited { border-style: solid; border-color: #c79a2f; background: #fffaf0; opacity: 1; }
.tr-passport-photo {
	height: 105px; margin-bottom: 9px; border-radius: 7px;
	background-position: center; background-size: cover;
	filter: blur(10px) saturate(.18) brightness(.48);
	transform: scale(1.07); opacity: .58;
}
.tr-passport-stamps .is-visited .tr-passport-photo { filter: none; transform: none; opacity: 1; }
.tr-passport-line { display: block; color: #8a6a1c; font-size: .67rem; font-weight: 800; }
.tr-passport-stamps strong { display: block; margin-top: 2px; color: var(--tr-indigo-deep); }
.tr-passport-stamps li > span:not(.tr-passport-line) { display: block; color: #665a43; font-size: .78rem; }
.tr-passport-stamps small {
	display: block; min-height: 1.2rem; margin-top: 5px; padding-inline-end: 7.7rem; color: #6d6045;
}
.tr-passport-stamps li:not(.is-visited) .tr-passport-line,
.tr-passport-stamps li:not(.is-visited) strong,
.tr-passport-stamps li:not(.is-visited) > span:not(.tr-passport-line),
.tr-passport-stamps li:not(.is-visited) small { opacity: .58; }
.tr-passport-stamp, .tr-passport-pending {
	position: absolute; inset-inline-end: 10px; inset-block-end: 9px;
	display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: .7rem;
}
.tr-passport-stamp {
	padding: 7px 11px; border: 3px double #983c31; border-radius: 50%;
	background: rgba(255, 250, 240, .88); color: #983c31;
	font-size: .82rem; transform: rotate(-4deg);
}
.tr-passport-pending { color: #8a7c60; }

/* ── จอแคบ (ทดสอบที่ 390×844 และ 320px) ───────────────────────────── */

/* จอแคบ: ชานชาลาไม่มีมุมว่างให้สามเณรยืน จึงย้ายมายืนกลางใต้เนื้อหาแทนการทับปุ่ม */
@media (max-width: 700px) {
	.tr-platform-buddy {
		position: static; align-self: center; order: 2;
		width: 104px; margin: -4px auto 10px;
	}
	.tr-intro { justify-content: flex-end; }
	.tr-intro-copy { order: 1; padding-bottom: 8px; }
	.tr-journey-ticket { grid-template-columns: 1fr; }
	.tr-ticket-stub {
		min-height: 54px; flex-direction: row; justify-content: flex-start; gap: 11px;
		padding: 8px 16px; border-left: 0; border-top: 1px dashed rgba(100, 64, 12, .58); text-align: left;
	}
	.tr-ticket-stub > span { writing-mode: horizontal-tb; }
	.tr-ticket-stub > strong { font-size: 1.35rem; }
	.tr-ticket-stub b { right: 12px; bottom: 10px; }
	.tr-ticket-stamp { right: 13px; top: 12px; }
}

@media (max-width: 640px) {
	.tr-intro-sound { position: fixed; top: 10px; right: 64px; }
	.tr-intro-passport { position: fixed; top: 10px; right: 118px; }
	.tr-stage { padding: 4px 12px 28px; gap: 11px; }
	.tr-card { padding: 15px 14px 14px; border-radius: 15px; }
	.tr-choices.is-row, .tr-choices.is-pair, .tr-choices.is-names { grid-template-columns: 1fr; }
	.tr-word-plate { padding: 11px 14px; width: 100%; }
	.tr-consist { gap: 8px; padding: 15px 9px 28px; }
	.tr-car { min-width: 72px; min-height: 52px; padding-inline: 10px; font-size: .96rem; }
	.tr-coupler { flex-basis: 10px; width: 10px; }
	.tr-track { margin: 2px 12px 4px; }
	.tr-hud { padding: 10px 10px; gap: 7px; }
	.tr-hud .tr-back-link { padding: 10px 12px; font-size: .82rem; }
	.tr-hud-line { font-size: .74rem; padding: 3px 9px; }
	.tr-line-card { flex-direction: column; }
	.tr-line-art { flex: 0 0 auto; width: 100%; min-height: 116px; border-right: 0; border-bottom: 1px solid rgba(255, 250, 240, .12); }
	.tr-line-go { display: none; }
	.tr-map-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
	.tr-passport-link { width: 100%; }
	.tr-map-mode { align-items: stretch; flex-direction: column; gap: 6px; }
	.tr-map-mode .tr-mode-switch { width: 100%; }
	.tr-intro-copy { padding: 18px 16px 34px; }
	.tr-ticket-face { padding: 10px 12px; }
	.tr-ticket-head { gap: 8px; }
	.tr-ticket-passenger { grid-template-columns: max-content minmax(0, 1fr); padding-inline: 4px; }
	.tr-ticket-passenger > small { grid-column: 2; margin-top: -5px; }
	.tr-ticket-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-theme-pick { grid-column: 1 / -1; margin-top: 7px !important; padding: 7px 8px 0; box-shadow: inset 0 1px rgba(100, 64, 12, .3) !important; }
	.tr-theme-switch { width: 100%; }
	.tr-theme-btn { padding-inline: 10px; }
	.tr-mode-switch { width: 100%; }
	.tr-mode-btn { padding-inline: 10px; }
	.tr-card-actions { justify-content: stretch; }
	.tr-card-actions .tr-primary, .tr-card-actions .tr-ghost-sm { flex: 1; }
	.tr-arrival-card { padding: 20px 16px 18px; }
	.tr-passport-page { padding: 12px 12px 36px; }
	.tr-passport-head { align-items: stretch; flex-direction: column; }
	.tr-passport-book { grid-template-columns: 1fr; padding: 12px; }
	.tr-passport-cover { position: static; min-height: 220px; }
	.tr-passport-stamps { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
	.tr-ticket-options { grid-template-columns: 1fr; }
	.tr-ticket-setting { padding: 7px 0; }
	.tr-ticket-setting + .tr-ticket-setting { box-shadow: inset 0 1px rgba(100, 64, 12, .3); }
	.tr-theme-pick { grid-column: auto; margin-top: 0 !important; }
	.tr-choice { padding: 11px 11px; gap: 8px; }
	.tr-choice-key { width: 23px; height: 23px; font-size: .76rem; }
	.tr-intro-facts > div { min-width: 7rem; padding: 10px 13px; }
}

/* ── ลดการเคลื่อนไหว ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tr-app *, .tr-app *::before, .tr-app *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.tr-line-card:hover, .tr-primary:hover { transform: none; }
	.tr-lamp { animation: none; }
}

/* ── ตารางเดินรถ = เมนูของเกม ─────────────────────────────────────────
   เกม immersive ไม่มี topbar ของ game-tools จึงต้องมีทางไปวิชาอื่นในตัวเอง
   หน้าตาเป็นป้ายตารางเดินรถในสถานี ให้เข้ากับธีมแทนที่จะเป็นเมนูลอย ๆ */

.tr-menu-fab {
	position: fixed; z-index: 30; top: 14px; right: 14px;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 10px 15px; border-radius: 999px;
	border: 1px solid rgba(246, 200, 95, .5);
	background: rgba(7, 20, 44, .72); color: #ffeec4;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
	box-shadow: 0 8px 22px rgba(3, 8, 18, .45);
	transition: border-color .16s ease, background .16s ease, transform .14s ease;
}
.tr-menu-fab i { color: var(--tr-lamp); }
.tr-menu-fab:hover { background: rgba(7, 20, 44, .9); border-color: var(--tr-lamp); transform: translateY(-1px); }
.tr-menu-fab:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 3px; }

.tr-menu {
	position: fixed; inset: 0; z-index: 60;
	display: flex; justify-content: flex-end;
	background: rgba(4, 10, 22, .72);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	animation: tr-fade-in .18s ease both;
}
.tr-menu-board {
	width: min(100%, 27rem); height: 100%; overflow-y: auto;
	padding: 18px 18px 30px;
	display: flex; flex-direction: column; gap: 18px;
	background:
		linear-gradient(180deg, rgba(12, 26, 52, .98), rgba(6, 14, 30, .99));
	border-left: 1px solid rgba(246, 200, 95, .3);
	box-shadow: -18px 0 46px rgba(2, 6, 14, .6);
	animation: tr-menu-in .24s ease both;
}
@keyframes tr-menu-in { from { transform: translateX(24px); opacity: 0; } }

.tr-menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tr-menu-kicker {
	margin: 0 0 2px; font-size: .68rem; letter-spacing: .2em;
	text-transform: uppercase; color: var(--tr-lamp);
}
.tr-menu-head h2 { margin: 0; font-size: 1.35rem; color: #fffaf0; }

.tr-menu-section { display: flex; flex-direction: column; gap: 9px; }
.tr-menu-section h3 {
	margin: 0; display: flex; align-items: center; gap: 8px;
	font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
	color: #9db0cd; padding-bottom: 7px; border-bottom: 1px dashed rgba(255, 250, 240, .18);
}
.tr-menu-section h3 i { color: var(--tr-lamp); }

.tr-menu-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-menu-chip {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 44px; padding: 10px 15px; border-radius: 12px;
	border: 1px solid rgba(255, 250, 240, .24); background: rgba(255, 250, 240, .07);
	color: #e8eef9; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.tr-menu-chip i { color: var(--tr-lamp); }
.tr-menu-chip:hover { border-color: var(--tr-lamp); background: rgba(246, 200, 95, .14); }
.tr-menu-chip:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-menu-chip.is-here { border-color: var(--tr-lamp); background: rgba(246, 200, 95, .2); color: #fff3d6; }

.tr-menu-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tr-menu-line {
	width: 100%; display: flex; align-items: center; gap: 10px;
	min-height: 52px; padding: 9px 12px; border-radius: 11px; cursor: pointer;
	border: 1px solid rgba(255, 250, 240, .14);
	border-left: 3px solid var(--tr-tint, #f6c85f);
	background: rgba(255, 250, 240, .05); color: #e8eef9;
	font: inherit; text-align: start;
	transition: background .16s ease, border-color .16s ease;
}
.tr-menu-line:hover { background: rgba(255, 250, 240, .12); border-color: rgba(246, 200, 95, .5); }
.tr-menu-line:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-menu-line.is-here { background: rgba(246, 200, 95, .16); border-color: var(--tr-lamp); }
.tr-menu-line-code {
	flex: 0 0 auto; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
	padding: 3px 8px; border-radius: 999px; white-space: nowrap;
	background: color-mix(in srgb, var(--tr-tint, #f6c85f) 26%, transparent);
	color: #fff3d6;
}
.tr-menu-line-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-menu-line-name strong { font-size: .95rem; color: #fffaf0; }
.tr-menu-line-name small { font-size: .74rem; color: #9db0cd; }
.tr-menu-line-stat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tr-menu-line-stat b { font-size: .82rem; font-weight: 700; color: #cfd9ea; }
.tr-menu-line-stat em { font-style: normal; font-size: .68rem; color: #ffe3a3; }
.tr-menu-line-stat em.is-good { color: #a7e3c6; }


.tr-menu-allgames {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 16px; border-radius: 999px; margin-top: 2px;
	border: 1px solid rgba(255, 250, 240, .28); background: rgba(255, 250, 240, .06);
	color: #f0e6d4; text-decoration: none; font-size: .88rem; font-weight: 600;
}
.tr-menu-allgames:hover { border-color: var(--tr-lamp); background: rgba(246, 200, 95, .12); }
.tr-menu-allgames:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }

.tr-menu-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-menu-setting > span { font-size: .9rem; color: #cfd9ea; }
.tr-menu-themes { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-menu-toggle {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 44px; padding: 9px 14px; border-radius: 999px;
	border: 1px solid rgba(255, 250, 240, .26); background: rgba(255, 250, 240, .06);
	color: #e8eef9; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.tr-menu-toggle:hover { border-color: var(--tr-lamp); }
.tr-menu-toggle:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-menu-toggle.is-on { border-color: var(--tr-lamp); background: rgba(246, 200, 95, .18); color: #fff3d6; }

@media (max-width: 640px) {
	.tr-menu-fab { top: 10px; right: 10px; padding: 10px 12px; }
	.tr-menu-fab span { display: none; }
	.tr-menu-board { width: 100%; border-left: 0; padding: 14px 14px 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.tr-menu-board { animation: none; }
	.tr-menu-fab:hover { transform: none; }
}

/* ปุ่มตารางเดินรถลอยอยู่มุมขวาบนทุกหน้าจอ จึงต้องเว้นที่ให้ HUD ตอนเล่นจริง
   ไม่งั้นมันจะไปทับปุ่มเปิด-ปิดเสียง */
.tr-run .tr-hud { padding-right: 158px; }
@media (max-width: 640px) {
	.tr-run .tr-hud { padding-right: 60px; }
}

/* ── ตัวกรองในปกพาสปอร์ต ─────────────────────────────────────────── */
.tr-passport-filter { margin-top: 12px; width: 100%; }
.tr-passport-filter .tr-mode-switch { width: 100%; }
.tr-passport-filter .tr-mode-btn { font-size: .84rem; padding: 2px 10px; }
.tr-passport-empty {
	display: flex; align-items: center; gap: 10px; margin: 0;
	padding: 16px 18px; border-radius: 14px; line-height: 1.75;
	background: rgba(255, 250, 240, .07); border: 1px dashed rgba(246, 200, 95, .45);
	color: #e3d6b8;
}
.tr-passport-empty i { color: var(--tr-lamp); font-size: 1.1rem; }

/* ── กดการ์ดสถานที่ดูรูปเต็ม ─────────────────────────────────────────── */

.tr-passport-open {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	position: relative; cursor: zoom-in; border-radius: 10px; overflow: hidden;
}
.tr-passport-open:disabled { cursor: default; }
.tr-passport-open:focus-visible { outline: 3px solid var(--tr-lamp); outline-offset: 2px; }
.tr-passport-open .tr-passport-photo { display: block; }
.tr-passport-zoom {
	position: absolute; inset-inline-end: 8px; inset-block-end: 8px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 11px; border-radius: 999px;
	background: rgba(7, 20, 44, .78); color: #ffeec4;
	font-size: .72rem; font-weight: 700;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease;
}
.tr-passport-open:hover .tr-passport-zoom,
.tr-passport-open:focus-visible .tr-passport-zoom { opacity: 1; transform: none; }
.tr-passport-open:disabled .tr-passport-zoom {
	opacity: 1; transform: none;
	background: rgba(31, 37, 51, .78); color: #e8dfca;
}

.tr-photo-view {
	position: fixed; inset: 0; z-index: 70;
	display: grid; place-items: center; padding: 20px;
	background: rgba(4, 10, 22, .82);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: tr-fade-in .18s ease both;
}
.tr-photo-card {
	position: relative; margin: 0;
	width: min(100%, 56rem); max-height: 90vh; overflow-y: auto;
	background: var(--tr-cream); border: 1px solid var(--tr-cream-line);
	border-radius: 18px; box-shadow: var(--tr-shadow);
	animation: tr-card-in .26s ease both;
}
.tr-photo-card img {
	display: block; width: 100%; height: auto;
	border-radius: 18px 18px 0 0; background: var(--tr-night);
}
.tr-photo-card figcaption { padding: 16px 20px 20px; color: var(--tr-ink); }
.tr-photo-line { margin: 0 0 2px; font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: #8a6a1c; }
.tr-photo-card h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.8rem); color: var(--tr-indigo-deep); }
.tr-photo-where { margin: 2px 0 0; font-size: 1rem; font-weight: 600; color: var(--tr-indigo); }
.tr-photo-sub { margin: 6px 0 0; font-size: .9rem; line-height: 1.7; color: #6b6151; }
.tr-photo-stamp, .tr-photo-pending {
	display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0;
	padding: 7px 13px; border-radius: 999px; font-size: .85rem; font-weight: 700;
}
.tr-photo-stamp { background: var(--tr-green-soft); color: #145c3e; border: 1px solid #a8ddc4; }
.tr-photo-pending { background: #f4eddc; color: #6d6045; border: 1px solid #e3d6b8; }
.tr-photo-close {
	position: absolute; top: 12px; inset-inline-end: 12px;
	background: rgba(7, 20, 44, .72); border-color: rgba(255, 250, 240, .4);
}

@media (max-width: 640px) {
	.tr-photo-view { padding: 12px; }
	.tr-photo-card figcaption { padding: 14px 15px 18px; }
	/* จอเล็กแตะง่ายกว่าถ้าป้ายโชว์ตลอด ไม่ต้องรอ hover */
	.tr-passport-zoom { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tr-passport-zoom { transition: none; }
	.tr-photo-card { animation: none; }
}

/* ── พาสปอร์ต: ให้รูปสถานที่เป็นพระเอกของการ์ด ─────────────────────────
   ของเดิมสูง 105px เล็กจนดูไม่ออกว่าที่ไหน · ใช้อัตราส่วนแทนความสูงตายตัว
   รูปจะได้โตตามความกว้างการ์ด และการ์ดกว้างขึ้นเมื่อจอกว้างพอ */
.tr-passport-stamps { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 14px; }
.tr-passport-photo { height: auto; aspect-ratio: 4 / 3; }

@supports not (aspect-ratio: 4 / 3) {
	.tr-passport-photo { height: 168px; }
}

@media (max-width: 640px) {
	/* จอแคบเหลือคอลัมน์เดียว รูปจะได้เต็มความกว้างจริง ๆ */
	.tr-passport-stamps { grid-template-columns: 1fr; }
	.tr-passport-photo { aspect-ratio: 16 / 10; }
}

/* ── ปุ่มหลักบนชานชาลา ────────────────────────────────────────────────
   เดิมปุ่ม "ขึ้นขบวนที่ค้างไว้" เรียงแถวเดียวกับปุ่มรอง เลยไม่รู้ว่าต้องกดอะไรก่อน
   ยกมาอยู่แถวของตัวเองกลางจอ ตัวใหญ่ขึ้น มีวงแสงรอบ */
.tr-intro-lead {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	margin-bottom: 12px;
}
.tr-primary-hero {
	min-height: 60px;
	padding: 17px 38px;
	font-size: clamp(1.02rem, 2.6vw, 1.18rem);
	border-radius: 999px;
	box-shadow:
		0 0 0 6px rgba(246, 200, 95, .14),
		0 12px 32px rgba(201, 162, 39, .45);
	animation: tr-hero-glow 2.8s ease-in-out infinite;
}
.tr-primary-hero:hover {
	box-shadow:
		0 0 0 8px rgba(246, 200, 95, .2),
		0 16px 38px rgba(201, 162, 39, .55);
}
@keyframes tr-hero-glow {
	50% { box-shadow: 0 0 0 10px rgba(246, 200, 95, .07), 0 12px 32px rgba(201, 162, 39, .5); }
}
.tr-intro-lead-note {
	font-size: .8rem; color: #cbd6e8;
	background: rgba(7, 20, 44, .5); border: 1px solid rgba(255, 250, 240, .2);
	padding: 4px 12px; border-radius: 999px;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

@media (max-width: 640px) {
	.tr-intro-lead { width: 100%; }
	.tr-primary-hero { width: 100%; justify-content: center; padding: 17px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.tr-primary-hero { animation: none; }
}