/* RAN Online: Forever - link page (ranforever.com/links). Same tokens as the site (css/site.css). No scripts. */
:root {
  --bg: #0b0d12; --card: #161b25; --card2: #1b2230; --line: #2a3140; --text: #e8ebf1; --muted: #939bab;
  --gold: #e8b64a; --gold2: #ffd67a; --red: #c8323b;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(ellipse at top, #1a1420 0%, var(--bg) 60%) fixed, var(--bg);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
.wrap { max-width: 520px; margin: 0 auto; padding: 32px 16px 40px; }
.head { text-align: center; margin-bottom: 24px; }
.icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 2px var(--gold); }
h1 { margin: 14px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: 2px; line-height: 1.1; }
h1 span { display: block; color: var(--gold); font-size: 15px; letter-spacing: 7px; }
.tag { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
/* REQ-155 (2026-10-18): a way back to the site, and one line on browser vs app vs PC */
.home { display: block; text-align: left; margin: -8px 0 14px; color: var(--muted); font-size: 13px; text-decoration: none; }
.home:hover { color: var(--gold2); }
.note { margin: 14px 0 0; padding: 10px 12px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.note b { color: var(--text); }
.foot a { color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--gold2); }
/* REQ-155b: the EN | TH switch (js/i18n-page.js, css/i18n-page.css) sits top right, level with the way-back link */
.head { position: relative; }
.head .lang { position: absolute; top: -10px; right: 0; }
.links { display: flex; flex-direction: column; gap: 12px; }
.btn {
  display: block; padding: 14px 18px; border-radius: 12px; text-align: center; text-decoration: none;
  color: var(--text); background: var(--card); border: 1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn b { display: block; font-size: 16px; font-weight: 700; }
.btn small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.btn em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: var(--red); padding: 1px 6px; border-radius: 4px; vertical-align: 2px; margin-left: 4px; }
.btn:hover, .btn:focus-visible { border-color: var(--gold); background: var(--card2); transform: translateY(-1px); outline: none; }
.btn--main { background: linear-gradient(180deg, var(--gold2), var(--gold)); border-color: var(--gold); color: #1a1206; }
.btn--main small { color: #4a3510; }
.btn--main:hover, .btn--main:focus-visible { background: linear-gradient(180deg, #ffe39b, var(--gold2)); }
.help { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.help summary { cursor: pointer; font-weight: 700; color: var(--gold); }
.help ol { margin: 10px 0 2px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.help li { margin: 4px 0; }
.help b { color: var(--text); }
.foot { margin-top: 28px; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 1px; }