/* Sawasdee Passport: loaded after the shared styles.css. Swaps the palette and fonts for old Siam:
   warm teak paper, temple gold, lotus pink and river blue. */
:root {
  --paper: #FFF8EC; --paper2: #F6E9D2; --washi: #F4E6C8; --line: #E8D6B8;
  --ink: #1F2B4D; --ink-soft: #5A6178; --sea: #CDEAF2;
  --beni: #C2185B; --beni-deep: #880E4F; --sakura: #F8BBD0; --gold: #E9A23B; --matcha: #3F9E6B;
  --accent: var(--beni); --band: #FCE4EC;
  --f-display: "Chonburi", "Mitr", system-ui, serif;
  --f-body: "Mitr", "Sarabun", system-ui, sans-serif;
  --f-mincho: "Chonburi", "Sarabun", serif;
  --f-kana: "Sarabun", "Itim", "Mitr", system-ui, sans-serif;
}
body { font-weight: 300; }
b, strong, .btn, .tabs a, .chip { font-weight: 500; }

.theme-cool { --accent: #3F9E6B; --band: #DFF2E6; }
.theme-hot { --accent: #E07A1F; --band: #FFEBCC; }
.theme-rain { --accent: #2F7FB5; --band: #DDEFFA; }
.theme-sea { --accent: #138A8A; --band: #D8F3F1; }
.theme-night { --accent: #E9A23B; }

/* the map of Siam is tall and narrow */
.mapbox { aspect-ratio: 640 / 1100; max-width: 620px; margin-inline: auto; }
.japan.siam .maplabel { font-family: var(--f-body); font-weight: 500; font-size: 15px; stroke: #FFF8EC; }
.japan.siam .maplabel.sea { font-style: italic; font-size: 17px; }
.japan.siam .maplabel.land { fill: #8C8FA3; stroke: none; font-size: 13px; letter-spacing: .2em; }
.japan.siam .cartouche rect { fill: #FFF8EC; stroke: var(--gold); }
.japan.siam .ct-jp { font-family: "Chonburi", serif; font-weight: 400; font-size: 26px; letter-spacing: .02em; }
.japan.siam .ct-en { fill: var(--beni); }

/* map motion */
.siam .flow { animation: th-flow 2.4s linear infinite; }
@keyframes th-flow { to { stroke-dashoffset: -32; } }
.siam .sun .rays { transform-origin: 0 0; animation: th-spin 30s linear infinite; }
@keyframes th-spin { to { transform: rotate(360deg); } }
.siam .cloud { animation: th-drift 26s ease-in-out infinite alternate; }
.siam .cloud.slow { animation-duration: 38s; }
@keyframes th-drift { to { transform: translateX(60px); } }
.siam .wave-s { animation: th-bob 3s ease-in-out infinite alternate; }
.siam .sway-p { transform-box: fill-box; transform-origin: 50% 100%; animation: th-sway 4s ease-in-out infinite alternate; }
@keyframes th-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.siam .ele .ear { transform-box: fill-box; transform-origin: 80% 20%; animation: th-flap 1.8s ease-in-out infinite alternate; }
@keyframes th-flap { to { transform: rotate(14deg); } }
.siam .ele .leg.a { animation: th-step .9s ease-in-out infinite alternate; }
.siam .ele .leg.b { animation: th-step .9s ease-in-out infinite alternate-reverse; }
@keyframes th-step { to { transform: translateY(-2px); } }
.siam .bob-b { animation: th-bob 1.6s ease-in-out infinite alternate; }
@keyframes th-bob { to { transform: translateY(-2px); } }
.siam .lantern-up { animation: th-rise 7s ease-in infinite; }
@keyframes th-rise { 0% { opacity: 0; translate: 0 10px; } 15% { opacity: 1; } 100% { opacity: 0; translate: 6px -60px; } }
.siam .fireball { animation: th-fire 3.4s ease-out infinite; }
@keyframes th-fire { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
.siam .naga { animation: th-bob 2.4s ease-in-out infinite alternate; }
.siam .phimai .glint { animation: th-glint 2.6s ease-in-out infinite; }
@keyframes th-glint { 50% { r: 5; opacity: .5; } }
.siam .puppet { transform-box: fill-box; transform-origin: 50% 100%; animation: th-sway 1.3s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .siam *, .siam *::before { animation: none !important; } }

/* Thai letters: grouped by class rather than a 5 by 10 grid */
.kgroup { margin: 14px 0 6px; font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.kana-row.thai { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

/* Thai script needs more room above and below than kana: tone marks sit high, some vowels hang low */
.big-kana, .kana, .kcell b { line-height: 1.35; }

/* the night chapter keeps its lanterns, in temple gold rather than red */
.player.theme-night { --night: #120F24; --night-card: #1F1A3A; --line: #3A3260; }