:root{
  --bg:#EEF6FF;
  --surface:#FFFFFF;
  --muted:#516273;
  --text:#0C1B2A;
  --accent:#1668C4;
  --accent2:#10B981;
  --ring:#3B82F6;
  --paper:#FFFDF6;
  --ink:#16222E;
  --rule:rgba(22,34,46,.18);
  --stamp:#FDD835;
  --radius:16px;
  --space:1rem;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.site-header{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,2rem);background:linear-gradient(180deg,rgba(22,104,196,.08),transparent)}

.brand a{display:flex;gap:.5rem;align-items:center;color:var(--text);font-weight:700;font-size:1.125rem}
.logo{filter:drop-shadow(0 1px 0 #000)}
.site-nav{display:flex;gap:1rem;flex-wrap:wrap}
.site-nav a{padding:.25rem .5rem;border-radius:10px}
.site-nav a:hover{background:rgba(22,104,196,.10)}
.nav-toggle{display:none}

.layout{display:flex;gap:clamp(1rem,3vw,2rem);padding:clamp(1rem,4vw,2rem);align-items:flex-start}
.sidebar{position:sticky;top:1rem;flex:0 0 300px;background:var(--paper);border:2px solid var(--ink);padding:1.1rem;border-radius:var(--radius);box-shadow:5px 5px 0 rgba(22,34,46,.1)}
.sidebar h2{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sidebar h2::after{content:"";flex:1;height:2px;background:var(--rule)}
.sidebar ul{margin:0;padding:0;list-style:none}

/* Extras entries. One markup block serves both layouts: the sidebar used to
   carry a separate mobile copy, which quietly dropped the heading and ran the
   links together as one paragraph. Each entry is a card so a long blurb reads
   as its own thing rather than as more of the link above it. */
.extras{display:grid;gap:.5rem}
.extra{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.6rem .7rem;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:background .15s,border-color .15s;
}
.extra:hover{background:rgba(22,104,196,.08);border-color:var(--accent)}
.extra:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.extra-mark{font-size:1.1rem;line-height:1.3}
.extra-title{display:block;font-weight:700;color:var(--accent)}
.extra-note{display:block;margin-top:.15rem;font-size:.85rem;line-height:1.35;color:var(--muted)}
@media(min-width:768px) {
  .content--centre {margin-left:3em; margin-right:3em;}
}
.content{flex:1;display:grid;gap:1rem}
.content--wide{max-width:70ch}
.widget{display:grid;gap:.5rem}
.stack{display:grid;gap:.5rem}
.button,button{display:inline-block;border:1px solid rgba(0,0,0,.15);background:transparent;color:var(--text);padding:.6rem 1rem;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
button:hover,.button:hover{background:rgba(22,104,196,.10);border-color:var(--accent)}
.button:active,button:active{transform:translateY(1px)}
/* Focus was styled on three components and nowhere else, which left every
   button and link on the site with no visible ring for keyboard users. */
a:focus-visible,button:focus-visible,.button:focus-visible,
input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--ring); outline-offset:2px
}
input{width:100%;padding:.6rem;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#FAFCFF;color:var(--text)}
.note,.muted{color:var(--muted)}

/* ---------- Home page ----------
   Handcrafted look: ink outlines + hard offset shadows (a zine/sticker feel),
   not gradients. Sections are told apart by their material, not by a box. */

.home{gap:2.5rem}

/* Section label: small hand-written-ish kicker with a rule running off it */
.kicker{
  display:flex;align-items:center;gap:.75rem;
  margin:0 0 .9rem;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.kicker::after{content:"";flex:1;height:2px;background:var(--rule)}
.home-block{margin:0}
.lede{margin:0;max-width:60ch;font-size:1.05rem}

/* Hero — cream paper, taped-on cover */
.hero{
  display:grid;grid-template-columns:150px 1fr;gap:1.75rem;align-items:center;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:8px 8px 0 rgba(22,34,46,.12);
  padding:1.75rem;
}
.hero-book{transform:rotate(-3deg)}
.hero .book{border-radius:6px;border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(22,34,46,.18)}
.hero-text h1{margin:0 0 .6rem;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.15}
.hero-text h1 del{color:var(--muted);text-decoration-thickness:3px}
.hero-tagline{margin:0 0 .5rem;font-size:1.1rem;max-width:46ch}
.hero-ask{margin:0 0 1.25rem;color:var(--muted);font-style:italic}

/* Feature — a banner that says what it is. Yellow ribbon across the top
   carries the "New" flag, so it reads as an announcement rather than a
   mystery strip of navy. Loud, but only ~150px tall. */
/* The whole card is one link, so a tap anywhere on it opens the game. */
.feature{
  display:block;
  text-decoration:none;
  border:3px solid var(--ink);
  border-radius:var(--radius);
  background:#15497A;
  color:#fff;
  box-shadow:6px 6px 0 var(--stamp);
  overflow:hidden;
}
.feature-ribbon{
  display:flex;align-items:center;gap:.6rem;
  margin:0;padding:.5rem 1.1rem;
  background:#0E3560;
  border-bottom:3px solid var(--ink);
  color:#fff;
  font-size:.85rem;font-weight:700;letter-spacing:.04em;
}
.feature-ribbon .badge{margin-left:0}
.feature-row{display:flex;align-items:center;gap:1.1rem;padding:1rem 1.1rem}
.feature-art{
  flex:0 0 88px;height:88px;
  border:2px solid var(--ink);border-radius:12px;
  background:#D9E9F8;overflow:hidden;
}
.feature-art img{width:100%;height:100%;object-fit:cover}
.feature-body{flex:1;min-width:0}
/* h2 on the games hub (its h1 is the page title), h3 on the home page.
   Same banner either way. */
.feature h2,.feature h3{margin:0 0 .2rem;font-size:1.35rem;color:#fff}
.feature-body p{margin:0;color:rgba(255,255,255,.88);font-size:.95rem}
.feature-cta{
  flex:0 0 auto;font-weight:800;white-space:nowrap;
  background:var(--stamp);color:var(--ink);
  border:2px solid var(--ink);
  padding:.5rem 1.1rem;border-radius:999px;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
}
/* The button is a span now - the card around it is the link - so it needs the
   hover and focus states of the card, not its own. */
.feature:hover{text-decoration:none}
.feature:hover .feature-cta{box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.feature:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

/* Article panel — used by the notes pages, the games and thanks/feedback */
.article{
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  box-shadow:5px 5px 0 rgba(22,34,46,.1);
}
.article h1,.article h2,.article h3{margin-top:1.5rem}
.article h1:first-child,.article h2:first-child{margin-top:0}

/* Cards — white index cards; only the heading reads as a link */
.cards{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:1.1rem 1.2rem;
  box-shadow:5px 5px 0 rgba(22,34,46,.1);
  transition:transform .12s ease,box-shadow .12s ease;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(22,34,46,.16);text-decoration:none}
.card h3{margin:0 0 .45rem;font-size:1.05rem;color:var(--accent)}
.card p{margin:0;color:var(--text);font-size:.95rem}

/* Game cards: an icon and a colour edge, so a column of six on a phone is
   scannable instead of six identical white boxes. Each card gets its own hue
   via --edge. */
.card-game{position:relative;padding-left:1.5rem}
.card-game::before{
  content:"";position:absolute;left:0;top:-2px;bottom:-2px;width:.6rem;
  background:var(--edge,var(--accent));
  border-right:2px solid var(--ink);
  border-radius:calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
}
.cards .card-game:nth-of-type(1){--edge:#1E88E5}
.cards .card-game:nth-of-type(2){--edge:#E5A32E}
.cards .card-game:nth-of-type(3){--edge:#43A047}
.cards .card-game:nth-of-type(4){--edge:#8E24AA}
.cards .card-game:nth-of-type(5){--edge:#D7263D}
.cards .card-game:nth-of-type(6){--edge:#5A6B7A}
.card-icon{margin-right:.45rem;font-size:1.1em}
.card-game h2{display:flex;align-items:center}

/* A card for something that does not exist yet: looks like the others but is
   not a link, so it is not a broken href for crawlers. */
.card-soon{opacity:.7;box-shadow:none;border-style:dashed}
.card-soon h2{color:var(--muted)}
.badge-soon{background:#E3E8EF;color:var(--muted)}

/* Editor's note — ruled notebook paper with a red margin line */
.note-paper{
  position:relative;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(transparent 0 1.6rem,rgba(22,34,46,.08) 1.6rem calc(1.6rem + 1px));
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:1.5rem 1.75rem 1.5rem 2.5rem;
  box-shadow:8px 8px 0 rgba(22,34,46,.12);
}
.note-paper::before{
  content:"";position:absolute;left:1.5rem;top:0;bottom:0;width:2px;background:rgba(215,38,61,.25);
}
.note-paper h3{margin:0 0 1rem;font-size:1.4rem;line-height:1.3;max-width:32ch}
.note-paper p{margin:0 0 1.6rem;max-width:62ch;line-height:1.6rem}
.pull-quote{
  font-size:1.5rem;font-weight:700;font-style:italic;
  border-left:4px solid var(--stamp);padding-left:.75rem;
}
.note-link{display:inline-block;font-weight:700}

@media (max-width:620px){
  .hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding:1.25rem}
  .hero-book{max-width:140px}
  .hero-tagline,.hero-text h1{max-width:none}
  .feature-row{flex-wrap:wrap;gap:.85rem}
  .feature-body{flex:1 0 60%}
  .feature-cta{width:100%;text-align:center}
  .note-paper{padding:1.25rem 1.1rem 1.25rem 1.9rem}
  .note-paper::before{left:1rem}
}


.badge{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.15rem .5rem;
  border-radius:999px;
  background:#FDD835;
  color:#0C1B2A;
  vertical-align:middle;
  margin-left:.4rem;
}

@media (max-width:620px){
  .feature{padding:1.2rem}
  .feature h2{font-size:1.25rem}
}

.links{display:grid;gap:.5rem}

/* Generated site map (tools/build.py). Real markup so crawlers can follow it,
   and a genuine convenience for readers who reach the bottom of a page. */
.site-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;
  max-width:70ch;margin:2.5rem auto 0;padding:1.25rem 1rem 0;
  border-top:2px solid var(--rule);
  font-size:.85rem;
}
.site-links a{color:var(--muted)}
.site-links a:hover{color:var(--accent)}

.site-footer{padding:2rem;opacity:.9;text-align:center}
.site-footer p{color:var(--muted)}

/* Dropdowns */
.dropdown{ position:relative; display:inline-flex; align-items:center; gap:.25rem }
.drop-btn{ background:none; border:0; color:var(--text); cursor:pointer; padding:.25rem .25rem; border-radius:8px }
.drop-btn:focus{ outline:2px solid var(--ring); outline-offset:2px }
.dropdown-menu{
  display:none; position:absolute; top:100%; left:0; min-width:220px;
  background:var(--surface); border:1px solid rgba(0,0,0,.15);
  border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:.5rem 0; z-index:1000
}
.dropdown-menu li{ list-style:none }
.dropdown-menu a{ display:block; padding:.5rem 1rem; color:var(--text) }
.dropdown-menu a:hover{ background:rgba(22,104,196,.10) }
/* Hover buffer to prevent accidental close */
@media (hover:hover) and (pointer:fine){
  .dropdown::after{ content:""; position:absolute; left:0; top:100%; width:100%; height:8px; }
  .dropdown:hover > .dropdown-menu,
  .dropdown:focus-within > .dropdown-menu,
  .dropdown.open > .dropdown-menu { display:block }
}

/* Mobile drawer + visibility */
.mobile-menu-toggle{ display:none; margin-left:auto; font-weight:700; background:var(--accent); color:#fff; border:1px solid transparent; border-radius:10px; padding:.4rem .6rem; box-shadow:0 2px 8px rgba(0,0,0,.15) }
.mobile-menu-toggle:hover{ filter:brightness(.95) }
.drawer[hidden]{ display:none }
.drawer{ position:fixed; inset:0; z-index:1500 }
.drawer-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4) }
.drawer-panel{
  position:absolute; right:0; top:0; height:100%; width:min(88vw,360px);
  background:var(--surface); border-left:1px solid rgba(0,0,0,.12);
  box-shadow: -10px 0 30px rgba(0,0,0,.2); display:flex; flex-direction:column
}
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid rgba(0,0,0,.08) }
.drawer-close{ background:transparent; border:0; font-size:1rem; cursor:pointer; color:var(--text) }
.drawer-nav{ padding:1rem 1.1rem 2rem; display:block }

/* Group label — the drawer used to be one undifferentiated stack of boxes */
.drawer-label{
  display:flex;align-items:center;gap:.6rem;
  margin:1.6rem 0 .5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.drawer-label:first-child{margin-top:0}
.drawer-label::after{content:"";flex:1;height:2px;background:var(--rule)}

/* Plain links read as a list, not as buttons */
.drawer-link{
  display:block;padding:.6rem .25rem;color:var(--text);font-weight:500;
  border-bottom:1px solid var(--rule);
}
.drawer-link:hover{background:rgba(22,104,196,.08);text-decoration:none}

/* Collapsible groups get the ink treatment so they read as containers */
.drawer-nav details{
  border:2px solid var(--ink);border-radius:12px;background:var(--paper);
  margin:.5rem 0;padding:.1rem .6rem;
}
.drawer-nav summary{
  display:flex;align-items:center;gap:.5rem;
  cursor:pointer;padding:.6rem .25rem;font-weight:700;list-style:none;color:var(--ink);
}
.drawer-nav summary::-webkit-details-marker{ display:none }
.drawer-nav summary::before{content:"\25B8";transition:transform .12s ease;color:var(--muted)}
.drawer-nav details[open] summary::before{transform:rotate(90deg)}
.drawer-nav details[open] summary{border-bottom:1px solid var(--rule)}
.drawer-nav ul{ list-style:none;margin:0;padding:.35rem 0 .5rem;display:grid;gap:.15rem }
.drawer-nav ul a{
  display:block;padding:.45rem .5rem;color:var(--text);font-size:.95rem;
  border-left:2px solid var(--rule);margin-left:.35rem;
}
/* Emoji marker on menu rows — six near-identical game titles are hard to scan
   as plain text, especially in the mobile drawer. */
.menu-icon{
  display:inline-block;
  width:1.6em;
  margin-right:.15rem;
  font-size:1.05em;
  line-height:1;
  text-align:center;
}
.drawer-nav ul a:hover{ background:rgba(22,104,196,.08);border-left-color:var(--accent);text-decoration:none }

.drawer-nav .amazon-btn{ display:block;text-align:center }
.drawer-polls{ margin-top:.5rem }
.drawer-polls-text{ margin:0 0 .25rem }

/* Mobile layout: show sidebar under content */
@media (max-width: 960px){
  .layout{flex-direction:column}
  /* The stacked layout keeps align-items:flex-start, so without this the
     sidebar shrinks to the width of its widest word. */
  .sidebar{position:relative;flex:auto;align-self:stretch;margin-top:1rem;order:2}


  .site-nav{ display:none } /* hide desktop nav */
  .mobile-menu-toggle{ display:inline-flex }
}


/* Collapsible sidebar (mobile) */
.sidebar details.sidebar-section{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:var(--surface);
  margin:.5rem 0;
  padding:.25rem .5rem;
}
.sidebar details.sidebar-section > summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  padding:.5rem .25rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* The marker is hidden, so the section needs its own hint that it folds. */
.sidebar details.sidebar-section > summary::after{
  content:"";
  margin-left:auto;
  width:.5rem;
  height:.5rem;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);
  transition:transform .15s;
}
.sidebar details.sidebar-section[open] > summary::after{transform:rotate(45deg)}
.sidebar details.sidebar-section > summary::-webkit-details-marker{ display:none }


/* Announcements widget: old-twitter-ish feed box */
.announcements-widget{
  border:1px solid rgba(0,0,0,.12);
  background:var(--surface);
  border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  overflow:hidden;
  margin:.5rem 0;
}

.announcements-widget .ann-head{
  font-weight:700;
  padding:.5rem .75rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.00));
  border-bottom:1px solid rgba(0,0,0,.08);
}

.announcements-widget .ann-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:220px;   /* scroll like the old feed boxes */
  overflow:auto;
}

.announcements-widget .ann-item{
  padding:.6rem .75rem .5rem .75rem;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.announcements-widget .ann-item:last-child{ border-bottom:none }

.announcements-widget .ann-message{
  padding-top: 1em;
  margin-left:1em;
  font-size:.94rem;
  line-height:1.35;
}

.announcements-widget .ann-time{
  margin-top:.25rem;
  font-size:.78rem;
  color:var(--muted);
}

.announcements-widget .ann-empty{
  padding:.75rem;
  color:var(--muted);
}

.announcements-widget.ann-error .ann-head{
  color:#B91C1C;
}

/* Nice thin scrollbar on WebKit */
.announcements-widget .ann-list::-webkit-scrollbar{ width:8px }
.announcements-widget .ann-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:8px;
}

.amazon-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #232f3e; /* Amazon navy */
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.amazon-btn:hover {
  background: #131921;
  transform: translateY(-2px);
}

.amazon-btn:active {
  transform: translateY(0);
}