/* ---------- Theme tokens ---------- */
:root{
  --paper:#FDF6EC; --ink:#3A2E2A; --soft:#8A7A72;
  --sun:#F6B93B; --leaf:#2E9E6B; --berry:#E05B4B; --sky:#4A90D9;
  --card:#FFFFFF; --line:#E8DCCB;
  --sky-tint:#EAF3FC; --sun-tint:#FFF9E8;
  --font:"Comic Sans MS","Chalkboard SE","Segoe UI Rounded",-apple-system,sans-serif;
  --radius:16px; --radius-sm:8px; --pill:999px;
  --bw:2px; --bw-game:3px;
  --pop-ink:3px 3px 0 var(--ink); --pop-ink-down:1px 1px 0 var(--ink);
  --pop-line:3px 3px 0 var(--line); --pop-line-down:1px 1px 0 var(--line);
  --pop-big:5px 5px 0 var(--line);
  --panel-shadow:0 8px 24px rgba(58,46,42,.12);
  --btn-bg:var(--sky); --btn-fg:#fff; --btn-hover:#3a7ec4;
  --on-sun:var(--ink);
}
html[data-theme="white"]{
  --paper:#FFFFFF; --ink:#222222; --soft:#6B6B6B;
  --sun:#E8A317; --leaf:#2A8F5F; --berry:#D64545; --sky:#2F7FD0;
  --card:#FAFAF8; --line:#E4E4DF;
  --sky-tint:#EEF5FC; --sun-tint:#FFF8E5;
  --panel-shadow:0 8px 24px rgba(0,0,0,.10);
}
html[data-theme="terminal"]{
  --paper:#1A1A1A; --ink:#E6E6E6; --soft:#9A9A9A;
  --sun:#D97757; --leaf:#7EC699; --berry:#E06C75; --sky:#7FB4E0;
  --card:#232323; --line:#3C3C3C;
  --sky-tint:#26313D; --sun-tint:#3A2A22;
  --font:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --radius:4px; --radius-sm:3px; --pill:4px;
  --bw:1px; --bw-game:1px;
  --pop-ink:none; --pop-ink-down:none; --pop-line:none; --pop-line-down:none; --pop-big:none;
  --panel-shadow:0 8px 24px rgba(0,0,0,.5);
  --btn-bg:var(--sun); --btn-fg:#1A1A1A; --btn-hover:#E58A6C;
  --on-sun:#1A1A1A;
}
html[data-theme="github"]{
  --paper:#F6F8FA; --ink:#1F2328; --soft:#59636E;
  --sun:#9A6700; --leaf:#1A7F37; --berry:#CF222E; --sky:#0969DA;
  --card:#FFFFFF; --line:#D0D7DE;
  --sky-tint:#DDF4FF; --sun-tint:#FFF8C5;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --radius:6px; --radius-sm:6px; --pill:6px;
  --bw:1px; --bw-game:1px;
  --pop-ink:none; --pop-ink-down:none; --pop-line:none; --pop-line-down:none; --pop-big:none;
  --panel-shadow:0 8px 24px rgba(140,149,159,.2);
  --btn-bg:#1F883D; --btn-fg:#fff; --btn-hover:#1A7F37;
  --on-sun:#FFFFFF;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html.theming, html.theming *{ transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
body{
  margin:0; padding:24px 16px 64px;
  background:var(--paper); color:var(--ink);
  font-family:var(--font); line-height:1.6;
}
.wrap{ max-width:720px; margin:0 auto; }
a{ color:var(--sky); }

/* ---------- Header (home) ---------- */
.byline{
  display:flex; align-items:center; gap:18px;
  margin:0 0 28px; padding-bottom:20px; border-bottom:var(--bw) solid var(--line);
}
.byline img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--sun); flex-shrink:0; }
.byline .text{ flex:1; }
.byline .name{ font-size:1.5rem; font-weight:bold; margin:0; }
.byline .role{ margin:0; color:var(--soft); }
.byline .links{ margin:6px 0 0; font-size:.95rem; }
.byline .links a{ color:var(--sky); text-decoration:none; }
.byline .links a:hover{ text-decoration:underline; }
.byline .links span{ color:var(--line); margin:0 8px; }

/* ---------- Top bar (sub pages) ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px; }
.back{ color:var(--sky); text-decoration:none; }
.back:hover{ text-decoration:underline; }

/* ---------- Menu ---------- */
.menu{ position:relative; margin-left:auto; align-self:flex-start; }
.menu-btn{
  width:44px; height:44px; padding:0; cursor:pointer;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-btn:hover{ border-color:var(--sun); }
.menu-btn span{ display:block; width:20px; height:3px; border-radius:2px; background:var(--ink); }
.menu-panel{
  position:absolute; right:0; top:52px; min-width:240px; z-index:10;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:12px;
  box-shadow:var(--panel-shadow); padding:8px 0; font-family:var(--font);
}
.menu-panel a, .menu-panel button{
  display:block; width:100%; text-align:left; padding:10px 18px;
  color:var(--ink); text-decoration:none; background:none; border:0;
  font:inherit; cursor:pointer;
}
.menu-panel a:hover, .menu-panel button:hover{ background:var(--paper); }
.menu-panel hr{ border:0; border-top:1px solid var(--line); margin:6px 0; }
.menu-panel .label{ padding:6px 18px 2px; font-size:.8rem; color:var(--soft); text-transform:uppercase; letter-spacing:.05em; }
.menu-panel button.on::after{ content:"\2713"; float:right; color:var(--leaf); }

/* ---------- Home content ---------- */
h2.section{ font-size:2rem; margin:0 0 8px; }
p.lead{ color:var(--soft); margin:0 0 32px; }
.games{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.games a{
  display:block; padding:20px 24px;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius);
  color:var(--ink); text-decoration:none;
  transition:transform .1s, border-color .1s;
}
.games a:hover{ transform:translateY(-2px); border-color:var(--sun); }
.games .card{
  padding:20px 24px;
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--radius);
}
.games .card .btn{ margin-top:14px; }
.games h2{ margin:0 0 4px; font-size:1.25rem; }
.games p{ margin:0; color:var(--soft); }
.objective{
  margin:12px 0 0; padding:8px 12px;
  background:var(--paper); border-left:4px solid var(--leaf); border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--ink);
}
.objective strong{ color:var(--leaf); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:10px 18px;
  background:var(--btn-bg); color:var(--btn-fg); border-radius:var(--pill);
  text-decoration:none; font-weight:bold;
}
.btn:hover{ background:var(--btn-hover); }

/* ---------- Terminal flourishes ---------- */
html[data-theme="terminal"] .byline .name::before{ content:"> "; color:var(--sun); }
html[data-theme="terminal"] .byline .name::after{
  content:""; display:inline-block; width:.6em; height:1.1em; margin-left:.25em;
  background:var(--sun); vertical-align:text-bottom;
  animation:blink 1s steps(1) 5 forwards;
}
html[data-theme="terminal"] h1::before{ content:"$ "; color:var(--leaf); }
@keyframes blink{ 50%,100%{ opacity:0; } }