/* Privacy policy and terms pages (public/privacy/, public/terms/): static pages styled like the login screen. */
@font-face { font-family: 'TA 8 bit'; src: url('/fonts/TA8bit.ttf') format('truetype'); font-display: swap; size-adjust: 135%; }
:root {
  color-scheme: dark;
  --font-display: 'TA 8 bit', 'Kanit', 'Noto Sans Thai', sans-serif;
  --font-body: 'Kanit', 'Noto Sans Thai', sans-serif;
  --gold: #f6cc6b; --gold-dim: #c9974a; --ink: #e4edf2; --muted: #a9bcc8; --line: #2f4a5d; --cyan: #b7fff1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 300 15px/1.75 var(--font-body); background: #0b1822; }
/* Key art behind everything, dimmed so long text stays readable. */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: #183344 url('/assets/elaria-keyart.png') center / cover no-repeat; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 0%, rgba(8,20,30,.55), rgba(5,12,19,.94) 60%), linear-gradient(180deg, rgba(4,12,18,.2), rgba(4,10,16,.9)); backdrop-filter: blur(2px); }
a { color: #9fe3ff; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
img.px { image-rendering: pixelated; }

.brand { display: block; width: fit-content; margin: 34px auto 18px; text-align: center; text-decoration: none; filter: drop-shadow(0 3px 14px #000); }
.brand span { display: block; color: var(--cyan); font-size: 24px; line-height: 1; }
.brand b { display: block; margin-top: 4px; color: #fff9df; font: 700 34px/1 var(--font-display); letter-spacing: .1em; }
.brand small { display: block; margin: 6px 0 0 .8em; color: var(--gold); font: 600 10px/1 var(--font-display); letter-spacing: .8em; }

.tabs { display: flex; gap: 4px; width: min(420px, calc(100% - 32px)); margin: 0 auto 18px; padding: 4px; border: 1px solid #476172; border-radius: 10px; background: rgba(7,20,30,.85); }
.tabs a { flex: 1; padding: 8px 6px; border-radius: 7px; color: #c5d4dd; font-size: 14px; text-align: center; text-decoration: none; }
.tabs a:hover { color: #fff4d2; background: #ffffff0d; }
.tabs a[aria-current="page"] { background: var(--gold); color: #172535; font-weight: 600; }

.panel { position: relative; width: min(820px, calc(100% - 32px)); margin: 0 auto 40px; padding: 34px 40px 30px; border: 1px solid rgba(246,204,107,.38); border-radius: 4px 26px 4px 26px; background: linear-gradient(150deg, rgba(14,30,44,.96), rgba(11,24,35,.9)); box-shadow: 0 30px 80px #02080dcc, inset 0 1px #ffffff1a; }
.panel::before, .panel::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--gold); pointer-events: none; }
.panel::before { left: 6px; top: 6px; border-left: 2px solid; border-top: 2px solid; }
.panel::after { right: 6px; bottom: 6px; border-right: 2px solid; border-bottom: 2px solid; }

.eyebrow { margin: 0 0 6px; color: var(--gold); font-size: 12px; letter-spacing: .14em; }
h1 { margin: 0; color: #fff4d2; font: 700 32px/1.25 var(--font-display); }
.meta { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: #07141e; color: var(--muted); font-size: 12px; }
.lead { margin: 18px 0 0; color: #c9d7df; }

.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; }
.summary div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid #3a5568; border-radius: 10px; background: linear-gradient(#173246, #11263a); }
.summary img { width: 32px; height: 32px; flex: none; }
.summary b { display: block; color: #fff4d2; font-size: 14px; font-weight: 600; line-height: 1.35; }
.summary small { color: var(--muted); font-size: 12px; line-height: 1.4; }

.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 6px; padding: 0; list-style: none; }
.toc li { margin: 0; padding: 0; }
.toc li::before { content: none; }
.toc a { display: inline-block; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: #0a1b27; color: #c5d4dd; font-size: 12px; text-decoration: none; }
.toc a:hover { border-color: var(--gold-dim); color: var(--gold); }

section.block { margin-top: 26px; padding-top: 22px; border-top: 1px solid #ffffff12; scroll-margin-top: 16px; }
h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--gold); font: 700 21px/1.3 var(--font-display); }
h2 img { width: 32px; height: 32px; flex: none; }
p { margin: 0 0 10px; }
ul { margin: 0 0 10px; padding: 0; list-style: none; }
li { position: relative; margin-bottom: 8px; padding-left: 22px; }
li::before { content: '✦'; position: absolute; left: 2px; top: 1px; color: var(--gold-dim); font-size: 11px; }
li b, p b { color: #fff4d2; font-weight: 600; }
.note { padding: 12px 14px; border: 1px solid #8a6631; border-radius: 10px; background: #2a2416cc; color: #f3dfa6; }

.contact { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid #3a5568; border-radius: 12px; background: linear-gradient(#173246, #11263a); }
.contact img { width: 32px; height: 32px; }
.contact b { display: block; color: #fff4d2; font-weight: 600; }

details.en { margin-top: 30px; border: 1px solid var(--line); border-radius: 12px; background: #08161fcc; }
details.en summary { padding: 12px 16px; color: #c5d4dd; font-size: 14px; cursor: pointer; }
details.en summary:hover { color: var(--gold); }
details.en div { padding: 0 18px 14px; color: var(--muted); font-size: 14px; }

footer { width: min(820px, calc(100% - 32px)); margin: -18px auto 40px; color: #7f95a3; font-size: 12px; text-align: center; }
footer a { color: #a9bcc8; text-decoration: none; }
.back { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 10px 20px; border-radius: 8px; background: linear-gradient(180deg, #f6d37f, #c9974a); color: #172535; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px #0007; }
.back:hover { color: #172535; filter: brightness(1.08); }

@media (max-width: 680px) {
  .panel { padding: 26px 18px 22px; }
  h1 { font-size: 26px; }
  .summary { grid-template-columns: 1fr; }
  .brand { margin-top: 22px; }
  .brand b { font-size: 28px; }
}