/* Juay Games — "The Realm of Bots": medieval-fantasy theme.
   Cinzel (display) + Spectral (body) + JetBrains Mono (numbers) + RS skill icons.
   Parchment + warm stone + RuneScape gold, with torch glow & drifting embers. */
:root {
  --ink: #2b2018;          /* dark brown body text */
  --ink-soft: #5a4632;     /* muted brown */
  --ink-faint: #8a7355;    /* faint brown */
  --parchment: #f3e6c9;    /* card / surface */
  --parchment-hi: #faf2dd; /* lighter parchment */
  --parchment-lo: #e6d3a8; /* darker parchment / header rows */
  --stone: #1b140d;        /* deep page backdrop */
  --stone-2: #2a2017;      /* raised stone */
  --edge: #b89352;         /* gilt border */
  --edge-soft: #cdb079;    /* softer gilt */
  --accent: #e2b340;       /* RuneScape gold */
  --accent-hi: #f5cf72;    /* bright gold */
  --wine: #7c2f2f;         /* deep red accent */
  --wine-hi: #a83f3f;
  --forest: #3f5d3a;       /* green accent (mining/nature) */
  --green: #5fbf6a;        /* online dot */
  --gold: #f5c518;
  --silver: #d4d8de;
  --bronze: #cd7f32;
  --maxw: 980px;
  --maxw-read: 760px;
  --r: 12px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
img { display: block; }
body {
  margin: 0; color: var(--ink);
  font-family: "Spectral", Georgia, serif; font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 600px at 50% -8%, #34281a 0%, rgba(52,40,26,0) 60%),
    linear-gradient(180deg, #14100a 0%, #1b140d 45%, #120d08 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
a:focus-visible, input:focus-visible, .skill:focus-visible, .topbar nav a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ===== ambient: torch glow + drifting embers + bottom stone band ===== */
.torch {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 0%, rgba(226,179,64,.16), rgba(226,179,64,0) 70%);
  animation: flicker 5s ease-in-out infinite alternate;
}
@keyframes flicker { from { opacity: .8 } to { opacity: 1 } }
.embers { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.embers span {
  position: absolute; bottom: -20px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-hi), rgba(245,207,114,0) 70%);
  opacity: 0; animation: rise linear infinite;
}
.embers span:nth-child(1) { left: 8%;  animation-duration: 17s; animation-delay: 0s;   }
.embers span:nth-child(2) { left: 21%; animation-duration: 23s; animation-delay: -4s;  width: 3px; height: 3px; }
.embers span:nth-child(3) { left: 35%; animation-duration: 19s; animation-delay: -9s;  }
.embers span:nth-child(4) { left: 48%; animation-duration: 26s; animation-delay: -2s;  width: 5px; height: 5px; }
.embers span:nth-child(5) { left: 60%; animation-duration: 21s; animation-delay: -13s; }
.embers span:nth-child(6) { left: 72%; animation-duration: 24s; animation-delay: -6s;  width: 3px; height: 3px; }
.embers span:nth-child(7) { left: 83%; animation-duration: 18s; animation-delay: -11s; }
.embers span:nth-child(8) { left: 92%; animation-duration: 28s; animation-delay: -3s;  width: 5px; height: 5px; }
.embers span:nth-child(9) { left: 15%; animation-duration: 25s; animation-delay: -16s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .7; }
  100% { transform: translateY(-104vh) translateX(24px); opacity: 0; }
}
/* ===== the castle-skyline scene (signature centerpiece) ===== */
.realm-scene {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(190px, 27vh, 280px);
  /* dusk horizon glow behind the keep */
  background: linear-gradient(180deg, rgba(20,14,8,0) 0%, rgba(60,34,16,.55) 58%, #0a0704 100%);
  overflow: hidden;
}
.realm-scene > * { position: absolute; left: 0; right: 0; }
.moon {
  width: 64px; height: 64px; left: auto; right: 9%; top: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff6d8 0%, #f4dca0 55%, #e2b340 100%);
  box-shadow: 0 0 34px 8px rgba(245,220,160,.45);
}
.r-cloud { height: 22px; background: rgba(60,42,24,.55); border-radius: 100px; filter: blur(1px); }
.r-cloud::before, .r-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.rc1 { width: 120px; top: 22%; animation: r-drift 80s linear infinite; }
.rc1::before { width: 44px; height: 44px; top: -22px; left: 18px; }
.rc1::after  { width: 32px; height: 32px; top: -13px; left: 60px; }
.rc2 { width: 90px; top: 9%; opacity: .7; animation: r-drift 115s linear infinite; animation-delay: -50s; }
.rc2::before { width: 34px; height: 34px; top: -16px; left: 14px; }
.rc2::after  { width: 24px; height: 24px; top: -9px; left: 46px; }
@keyframes r-drift { from { transform: translateX(-160px); } to { transform: translateX(108vw); } }

.hills { bottom: 0; height: 100%; background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; }
.hills-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0,160 L0,92 C200,60 380,112 600,80 C820,52 1000,112 1200,74 L1200,160 Z' fill='%23150f09'/%3E%3C/svg%3E");
}
.hills-front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,72 C160,96 360,54 560,82 C760,104 980,58 1200,86 L1200,120 Z' fill='%23060403'/%3E%3C/svg%3E");
}
.skyline { bottom: 0; height: 100%; }
.skyline svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.skyline .pennant { transform-box: fill-box; transform-origin: left center; animation: flutter 3.5s ease-in-out infinite; }
@keyframes flutter { 0%,100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.82) skewY(-3deg); } }
.windows rect { filter: drop-shadow(0 0 3px rgba(255,200,90,.8)); }
.windows .flick  { animation: win 4s steps(1) infinite; }
.windows .flick2 { animation: win 5.5s steps(1) infinite; animation-delay: -2s; }
@keyframes win { 0%,42%,52%,100% { opacity: 1; } 46%,49% { opacity: .25; } }
.torch-flame { left: auto; bottom: 8px; width: 14px; height: 22px; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #fff0b8, #f5a623 55%, rgba(245,166,35,0) 80%);
  filter: blur(.5px); animation: flame .35s ease-in-out infinite alternate; }
.tf-left  { left: 16%; }
.tf-right { right: 16%; left: auto; }
@keyframes flame { from { transform: scaleY(1) translateY(0); opacity: .85; } to { transform: scaleY(1.18) translateY(-2px); opacity: 1; } }

/* reveal pop-in */
.reveal { opacity: 0; transform: translateY(14px); animation: pop-in .7s cubic-bezier(.2,.8,.3,1.1) forwards; }
@keyframes pop-in { to { opacity: 1; transform: none } }
.d1 { animation-delay: .04s } .d2 { animation-delay: .16s } .d3 { animation-delay: .3s }
.d4 { animation-delay: .44s } .d5 { animation-delay: .58s } .d6 { animation-delay: .72s }

/* ===== top bar ===== */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 18px 24px;
}
.topbar .brand {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 21px; letter-spacing: .5px;
  color: var(--accent); text-shadow: 0 1px 0 #000, 0 0 18px rgba(226,179,64,.35);
}
.topbar .brand span { color: var(--edge-soft); font-weight: 600; }
.topbar nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  font-family: "Cinzel", serif; color: var(--edge-soft); font-weight: 600; font-size: 14px; letter-spacing: .4px;
  padding: 7px 13px; border-radius: 9px; transition: color .15s, background .15s, box-shadow .15s;
}
.topbar nav a:hover { color: var(--stone); background: var(--accent); box-shadow: 0 4px 14px rgba(226,179,64,.3); }

.panel { position: relative; z-index: 1; max-width: var(--maxw); margin: 8px auto 80px; padding: 24px; }
h1 { font-family: "Cinzel", serif; font-size: 28px; font-weight: 700; letter-spacing: .3px; margin: 0; color: var(--accent-hi); }
h2 { font-family: "Cinzel", serif; font-size: 18px; font-weight: 600; margin: 0 0 14px; color: var(--wine); }

/* ===== hero ===== */
.hero { text-align: center; padding: 60px 0 44px; }
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img {
  display: block; width: min(380px, 72vw); height: auto; margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(226,179,64,.25));
}
.hero .tag { color: var(--edge-soft); font-size: 19px; font-style: italic; margin: 20px 0 28px; }
.cta {
  display: inline-block; padding: 14px 38px; font-family: "Cinzel", serif; font-weight: 700; font-size: 16px; letter-spacing: .5px;
  color: #2a1c05; border-radius: 11px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border: 1px solid #8a6a1e;
  box-shadow: 0 8px 24px rgba(226,179,64,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.cta:hover { color: #2a1c05; transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px rgba(226,179,64,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.cta:active { transform: translateY(0); }
.status { color: var(--edge-soft); font-size: 14px; margin-top: 22px; }
.status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); margin-right: 6px; vertical-align: middle; }
.status .dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status a { color: var(--accent); font-weight: 600; }

/* hero ensign + 3D wordmark */
.hero .ensign {
  display: inline-block; font-family: "Cinzel", serif; font-weight: 600; font-size: .76rem;
  letter-spacing: .24em; text-transform: uppercase; color: #2a1c05;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  padding: .32rem 1.1rem; border-radius: 999px; border: 1px solid #8a6a1e;
  box-shadow: 0 4px 12px rgba(226,179,64,.3); margin-bottom: 6px;
}
.wordmark {
  font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .04em;
  font-size: clamp(1.9rem, 6.5vw, 3.2rem); line-height: 1.05; margin: 16px 0 0;
  color: var(--accent-hi);
  -webkit-text-stroke: 2px #1c1206; paint-order: stroke fill;
  text-shadow: 0 3px 0 #1c1206, 0 8px 20px rgba(0,0,0,.5);
}
.wordmark .of { color: var(--edge-soft); -webkit-text-stroke-width: 1.5px; }

/* ornamental divider */
.flourish { display: flex; align-items: center; gap: 16px; margin: 32px auto; max-width: 540px; }
.flourish::before, .flourish::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--edge), transparent); }
.flourish span { font-size: 1.15rem; color: var(--accent); filter: drop-shadow(0 0 6px rgba(226,179,64,.4)); }

/* lede / intro card */
.lede { text-align: center; }
.lede .crown { font-size: 1.9rem; display: block; margin-bottom: 4px; }
.lede p { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 12px; }

/* section heading icons */
h2 .ico { font-size: 1.05em; }
.card h2, .browse h2 { display: flex; align-items: center; gap: .5rem; }
.browse h2 { justify-content: center; }

/* articles of the realm */
.articles { text-align: center; }
.articles p { color: var(--ink-soft); margin: 0; line-height: 1.6; }
.articles strong { color: var(--ink); }

/* ===== parchment cards ===== */
.cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; margin: 8px 0 40px; }
.card {
  position: relative;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment));
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 60px rgba(184,147,82,.12);
}
.card h2 { color: var(--wine); }
.card a { color: var(--wine); font-weight: 600; }
.card a:hover { color: var(--wine-hi); }
.howto ol { margin: 0; padding-left: 22px; color: var(--ink-soft); }
.howto li { margin: 9px 0; }
.howto b { color: var(--ink); }
.preview .more { display: inline-block; margin-top: 14px; font-weight: 600; }
.browse { margin-top: 8px; }
.browse h2 { color: var(--accent-hi); text-align: center; }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }

/* ===== hiscores header ===== */
.hs-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.hs-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none; border-radius: 13px;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment-lo));
  border: 1px solid var(--edge);
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.hs-head .sub { color: var(--edge-soft); font-size: 15px; font-style: italic; margin: 4px 0 0; }

/* ===== skill selector (icon chips) ===== */
.skillnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.skill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 10px; border-radius: 11px;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment-lo));
  border: 1px solid var(--edge);
  color: var(--ink-soft); font-size: 14px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s, border-color .15s, color .15s, box-shadow .15s;
}
.skill img { width: 22px; height: 22px; }
/* Skill icons get a light outline so dark ones (thieving, agility) stay legible. */
.skill img, .hs-badge img { filter: drop-shadow(0 0 1px rgba(0,0,0,.5)) drop-shadow(0 1px 1px rgba(255,255,255,.5)); }
.skill:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.skill.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); border-color: #8a6a1e; color: #2a1c05; }

/* ===== tables ===== */
.board-wrap {
  overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--parchment);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.3);
}
table.board { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--ink); }
.board thead th {
  font-family: "Cinzel", serif; text-align: left; font-weight: 600; font-size: 13px; letter-spacing: .4px;
  color: var(--wine); padding: 14px 18px; border-bottom: 2px solid var(--edge);
  background: linear-gradient(180deg, var(--parchment-lo), #ddc796);
}
.board tbody td { padding: 13px 18px; border-bottom: 1px solid rgba(184,147,82,.4); }
.board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr:nth-child(even) td { background: rgba(184,147,82,.08); }
.board tbody tr:hover td { background: rgba(226,179,64,.16); }
.board td.num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.board a { color: var(--wine); font-weight: 600; }
.board a:hover { color: var(--wine-hi); }
/* empty state */
.empty {
  margin: 0; padding: 30px 20px; text-align: center; color: var(--ink-soft); font-style: italic;
  background: var(--parchment); border: 1px dashed var(--edge); border-radius: var(--r);
}
/* rank medals for the top three */
.board tbody tr:nth-child(1) td:first-child { color: #b8860b; font-weight: 700; }
.board tbody tr:nth-child(2) td:first-child { color: #8a8d93; font-weight: 700; }
.board tbody tr:nth-child(3) td:first-child { color: var(--bronze); font-weight: 700; }

/* ===== player lookup ===== */
.lookup { margin: 0 0 24px; }
.lookup label { display: block; font-family: "Cinzel", serif; font-size: 13px; color: var(--edge-soft); margin-bottom: 7px; letter-spacing: .4px; }
.lookup input {
  width: min(380px, 100%); padding: 12px 15px; font-size: 16px; font-family: "Spectral", serif;
  color: var(--ink); background: var(--parchment-hi); border: 1px solid var(--edge); border-radius: 11px;
  box-shadow: inset 0 2px 6px rgba(43,32,24,.18);
}
.lookup input::placeholder { color: var(--ink-faint); }
#lookup-result { margin-top: 18px; }
#lookup-result h2 { margin-bottom: 12px; }

/* ===== feed ===== */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { padding: 13px 0; border-bottom: 1px solid rgba(184,147,82,.3); color: var(--edge-soft); }
.feed li b { color: var(--accent-hi); font-weight: 600; }

/* ===== footer ===== */
.foot {
  position: relative; z-index: 1;
  text-align: center; color: var(--ink-faint); font-size: 13px;
  padding: 28px 0 clamp(210px, 30vh, 300px); /* clear the fixed castle scene */
  font-style: italic;
}

/* =========================================================
   ROADMAP — "Chronicle of the Realm"
   ========================================================= */
.chronicle { max-width: var(--maxw-read); margin: 0 auto; }
.chronicle .scroll-head { text-align: center; padding: 46px 0 26px; }
.chronicle .ensign {
  display: inline-block; font-family: "Cinzel", serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: #2a1c05;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  padding: .32rem 1.1rem; border-radius: 999px; border: 1px solid #8a6a1e;
  box-shadow: 0 4px 12px rgba(226,179,64,.3);
}
.chronicle .scroll-head h1 { margin: 1rem 0 .3rem; font-size: clamp(2rem, 6vw, 3rem); }
.chronicle .scroll-head .subtitle { color: var(--edge-soft); font-style: italic; font-size: 1.1rem; }
.back-link {
  display: inline-block; margin-top: 1rem; font-family: "Cinzel", serif; font-weight: 600; font-size: 14px;
  color: var(--edge-soft); padding: .35rem 1rem; border-radius: 999px;
  border: 1px solid var(--edge); transition: color .15s, background .15s;
}
.back-link:hover { color: var(--stone); background: var(--accent); }

.card .intro { color: var(--ink-soft); font-size: 1rem; margin-bottom: 1.3rem; }

/* timeline ("The Chronicle So Far") */
ol.log { list-style: none; margin: 0; padding: 0; }
ol.log > li {
  position: relative; padding: 0 0 1.8rem 1.7rem; margin-left: .55rem;
  border-left: 3px dotted var(--edge);
}
ol.log > li:last-child { border-left-color: transparent; padding-bottom: .2rem; }
ol.log > li::before {
  content: ''; position: absolute; left: -.62rem; top: .4rem;
  width: .95rem; height: .95rem; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 0 0 4px var(--parchment), 0 2px 6px rgba(0,0,0,.4);
}
.log .date {
  font-family: "Cinzel", serif; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #2a1c05; background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  padding: .2rem .7rem; border-radius: 999px; display: inline-block; border: 1px solid #8a6a1e;
}
.log h3 { font-family: "Cinzel", serif; font-size: 1.12rem; font-weight: 600; color: var(--wine); margin: .5rem 0 .3rem; }
.log p { color: var(--ink-soft); font-size: 1rem; margin-bottom: .4rem; }
.log p strong { color: var(--ink); }
.log .faded { opacity: .7; font-style: italic; }

/* charted course ("The Road Ahead") */
ol.steps { list-style: none; counter-reset: leg; margin: 0; padding: 0; }
ol.steps > li { counter-increment: leg; position: relative; padding: 0 0 1.6rem 3.7rem; }
ol.steps > li::before {
  content: ''; position: absolute; left: 1.25rem; top: 2.9rem; bottom: .2rem;
  border-left: 3px dotted var(--edge); opacity: .6;
}
ol.steps > li:last-child { padding-bottom: .2rem; }
ol.steps > li:last-child::before { display: none; }
ol.steps > li::after {
  content: counter(leg); position: absolute; left: 0; top: .1rem;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  font-family: "Cinzel", serif; font-size: 1.1rem; color: #2a1c05;
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment-lo));
  border: 1px solid var(--edge); border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
ol.steps > li.now::after {
  content: '\265A'; /* black chess king ♚ — "you are here" */
  color: #fff; background: linear-gradient(180deg, var(--wine-hi), var(--wine));
  border-color: #5a1f1f; box-shadow: 0 4px 12px rgba(124,47,47,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
ol.steps h3 { font-family: "Cinzel", serif; font-size: 1.1rem; font-weight: 600; color: var(--wine); margin-bottom: .25rem; }
ol.steps > li.now h3 { color: var(--wine-hi); }
ol.steps p { color: var(--ink-soft); font-size: 1rem; }

/* the decree (honest-grind code) */
.decree {
  margin: 0 0 1.4rem; background: #fff7df; border: 2px dashed var(--accent);
  border-radius: 12px; padding: .7rem 1rem; font-size: .96rem; color: #6e5208; line-height: 1.55;
}
.decree strong { color: #4d390a; }

code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .88em;
  background: rgba(124,47,47,.1); border: 1px solid rgba(124,47,47,.25);
  border-radius: 6px; padding: .08em .4em; color: var(--wine);
}

/* ===== responsive ===== */
@media (max-width: 560px) {
  .topbar { padding: 14px 16px; gap: 8px; }
  .topbar nav { gap: 2px; }
  .topbar nav a { padding: 6px 9px; font-size: 13px; }
  .panel { padding: 18px 14px; }
  .board thead th, .board tbody td { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .torch, .embers span, .reveal,
  .r-cloud, .skyline .pennant, .windows .flick, .windows .flick2, .torch-flame { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cta:hover, .skill:hover { transform: none; }
}