/* ============================================================
   AGC Games — shared design system
   Light theme. Every value a page might want to reskin lives
   here as a custom property; pages override --accent and
   nothing else.
   ============================================================ */
:root{
  /* surfaces, lightest to darkest */
  --bg:#f4f6fa;
  --bg-tint:#eaeef6;       /* the wash behind the hero */
  --surface:#ffffff;
  --surface-2:#f7f9fc;     /* inset panels, board background */

  /* lines */
  --edge:rgba(15,23,42,.085);
  --edge-strong:rgba(15,23,42,.16);

  /* ink */
  --txt:#0b1220;
  --txt-2:#3f4c63;
  --dim:#6b7a92;
  --faint:#95a2b8;

  --brand:#2563eb;
  --accent:#2563eb;        /* per-page override */
  --ok:#16a34a;
  --warn:#ea8a0b;
  --danger:#dc2626;

  --radius:16px;
  --radius-lg:22px;
  /* Two shadows, always used together: a tight one that seats the element on
     the page and a wide soft one that gives it height. A single shadow doing
     both jobs reads as either muddy or floating. */
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.07);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06), 0 24px 56px rgba(15,23,42,.12);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* The safe-area insets are read in several places (sticky header, bottom
     bar, install prompt). Naming them once keeps env() out of the layout. */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}

/* The `hidden` attribute only sets display:none at user-agent weight, so any
   class that sets a display wins and the element stays on screen with its
   attribute quietly saying otherwise. That caught three things here — an empty
   stats pill, a pack map that would not leave the layout, an install sheet —
   before it was fixed in one place instead of three. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:-.022em;font-weight:680}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
img,svg{max-width:100%}
button{font:inherit;color:inherit}

.container{width:min(1180px,calc(100vw - 40px));margin-inline:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:640}
.dim{color:var(--dim)}
.hide{display:none!important}

/* Reachable by keyboard, invisible to the mouse — :focus-visible only paints
   when the browser judges focus worth showing, which is what we want on a
   page where every card is also a tap target. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Anyone who has asked their OS to calm animations down gets a still page.
   The game's own drawing is not animation and is deliberately left alone. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  padding-top:var(--safe-t);
  background:rgba(244,246,250,.82);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--edge);
}
.site-header .hbar{display:flex;align-items:center;gap:18px;height:58px}
.logo{display:flex;align-items:center;gap:10px;font-weight:760;letter-spacing:-.025em;font-size:17px}
.logo .glyph{
  width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;
}
.logo .glyph svg{width:17px;height:17px;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{padding:7px 12px;border-radius:9px;font-size:13.5px;color:var(--dim);font-weight:560;transition:.16s}
.nav a:hover{color:var(--txt);background:rgba(15,23,42,.05)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--edge-strong);
  background:var(--surface);color:var(--txt);font-size:14.5px;font-weight:620;
  cursor:pointer;transition:transform .12s,box-shadow .18s,background .18s,border-color .18s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:hover{box-shadow:var(--shadow);border-color:var(--edge-strong)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn-ghost:hover{background:rgba(15,23,42,.05);color:var(--txt);box-shadow:none}
.btn-icon{padding:0;width:40px;height:40px;border-radius:11px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:72px;padding:26px 0 calc(30px + var(--safe-b));
  border-top:1px solid var(--edge);color:var(--faint);
  font-size:13px;line-height:1.45;
}
/* Centred, and wrapping to as many lines as it needs. An earlier version
   pushed the last item to the far end with margin-left:auto, which keeps
   pushing after the row wraps — leaving a lone line flung against the right
   edge, which reads as broken rather than as aligned. Centring needs no such
   trick and looks deliberate at every width. */
.site-footer .fbar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:3px 14px;text-align:center;
}
.site-footer .fbar .build{
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.site-footer a{color:var(--dim)}
.site-footer a:hover{color:var(--txt)}



/* ---------- add to home screen ---------- */
/* A sheet that comes up from the bottom, on the phone edge where a thumb
   already is, and sits above everything including a game's results card. */
.a2hs{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:0 12px calc(12px + var(--safe-b));
  display:flex;justify-content:center;
  transform:translateY(120%);
  transition:transform .42s cubic-bezier(.2,.9,.3,1);
  pointer-events:none;
}
.a2hs.show{transform:none;pointer-events:auto}

.a2hs-card{
  position:relative;width:min(420px,100%);
  background:var(--surface);border:1px solid var(--edge);border-radius:20px;
  box-shadow:0 2px 6px rgba(15,23,42,.07),0 24px 60px rgba(15,23,42,.20);
  padding:18px 18px 16px;
}
.a2hs-x{
  position:absolute;top:10px;right:10px;width:30px;height:30px;
  display:grid;place-items:center;border:0;border-radius:9px;padding:0;
  background:transparent;color:var(--faint);cursor:pointer;
}
.a2hs-x:hover{background:rgba(15,23,42,.05);color:var(--txt)}
.a2hs-x svg{width:16px;height:16px}

.a2hs-head{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.a2hs-icon{
  flex:none;width:48px;height:48px;border-radius:11px;
  border:1px solid var(--edge);background:#fff;
}
.a2hs-head b{display:block;font-size:15.5px;font-weight:720;letter-spacing:-.015em}
.a2hs-head span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}

.a2hs-lead{font-size:13px;color:var(--txt-2);line-height:1.6;margin:0 0 14px}
.a2hs-lead b{font-weight:700;color:var(--txt)}

/* iOS has no install API, so the share glyph has to be drawn rather than
   named — "tap Share" means nothing next to an icon nobody calls Share. */
.a2hs-share{
  display:inline-block;width:15px;height:17px;vertical-align:-3px;margin:0 1px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='none' stroke='%231E88E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v14'/%3E%3Cpath d='M7 7l5-5 5 5'/%3E%3Cpath d='M5 11H3v13h18V11h-2'/%3E%3C/svg%3E");
}

.a2hs-row{display:flex;gap:9px}
.a2hs-row .btn{flex:1}

@media (prefers-reduced-motion:reduce){
  .a2hs{transition:none}
}

/* ---------- the wash above the board ----------
   Three blurred circles, each drifting on a different clock so they never
   fall into step, at opacities low enough that you notice the space has
   colour rather than noticing the animation. Transform only, so it composites
   on the GPU and never touches layout — this runs behind a game and must cost
   nothing while a finger is moving.

   An earlier attempt here drew the game's own pipes threading themselves
   across the space. It was rejected, rightly: on a screen people stare at
   while thinking, anything shaped like the puzzle competes with the puzzle.
   A wash of colour cannot be mistaken for a board. */
.aura{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  /* fades out before the numbers, so nothing ever drifts behind text */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%);
          mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%);
}
.aura .blob{transform-box:fill-box;transform-origin:center}
.aura .b1 circle{fill:url(#auraA)}
.aura .b2 circle{fill:url(#auraB)}
.aura .b3 circle{fill:url(#auraC)}

/* Long, prime-ish, unequal durations: three loops that only realign after
   several minutes, which is what stops it reading as a loop at all. */
@keyframes auraDriftA{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(26px,16px) scale(1.09)}
}
@keyframes auraDriftB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(-30px,20px) scale(.93)}
}
@keyframes auraDriftC{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(18px,-24px) scale(1.06)}
}
.aura .b1{animation:auraDriftA 23s ease-in-out infinite}
.aura .b2{animation:auraDriftB 31s ease-in-out infinite}
.aura .b3{animation:auraDriftC 37s ease-in-out infinite}

/* The glance sits above it. Without this the numbers would share a stacking
   context with the wash and the order would be down to document position. */
.glance{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .aura .blob{animation:none}
}

/* The compact stand-in for the pack map. Same reading, one line tall, so a
   screen with no room for a hundred and twenty squares still says how far
   through the pack you are instead of saying nothing. */
.glance-bar{
  display:block;height:5px;border-radius:999px;margin-bottom:11px;
  background:rgba(15,23,42,.07);overflow:hidden;
}
.glance-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  transition:width .7s cubic-bezier(.2,.8,.3,1);
}

/* ---------- how to play ----------
   Reuses the level picker's .sheet, so it inherits the slide-up, the bar and
   the scrolling body, and only the rows inside it are new. */
.howto section{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--edge);
}
.howto section:last-of-type{border-bottom:0}
.howto .dia{flex:none;width:112px;height:auto;display:block}
.howto h3{font-size:15px;margin-bottom:5px;letter-spacing:-.015em}
.howto p{font-size:13px;color:var(--dim);line-height:1.6;margin:0}
.howto p + p{margin-top:7px}
.howto .k{color:var(--txt-2);font-weight:640}

/* The lead line, above the rows. */
.howto .lede{
  font-size:14px;color:var(--txt-2);line-height:1.65;
  padding:4px 0 10px;margin:0;
}

/* Tick and cross beside the two halves of a right/wrong diagram. */
.howto .verdict{display:flex;gap:10px;margin-top:9px;font-size:12px;font-weight:620}
.howto .verdict span{display:inline-flex;align-items:center;gap:5px}
.howto .yes{color:#16a34a}
.howto .no{color:#dc2626}

@media (max-width:420px){
  .howto section{gap:13px}
  .howto .dia{width:92px}
}

/* A row that needs its diagrams wider than the text column allows: the text
   goes on top and the pictures get the full width underneath. */
.howto section.wide{flex-direction:column;gap:13px}
.howto .pair{display:flex;gap:20px;justify-content:center;width:100%}
.howto .pair figure{margin:0;text-align:center}
.howto .pair figcaption{margin-top:8px;font-size:12px;font-weight:640}