/* ══════════════════════════════════════════════════════════════════════
   GILI — site.css · shared by all five pages
   fonts · colour tokens · base · top bar · push buttons · boards · waves · footer

   home.css = landing page only        doc.css = privacy / terms / parents / support
   The look is the game's own UI: navy boards, yellow Bungee titles, chunky push
   buttons, bright water. Every colour is declared ONCE, in :root below.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, latin subsets, SIL OFL 1.1 — licences in fonts/) ── */
@font-face{
  font-family:"Bungee";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/bungee-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Rubik";
  font-style:normal;
  font-weight:300 900;                 /* one variable file covers every weight */
  font-display:swap;
  src:url("fonts/rubik-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* water, by depth */
  --sky:#6FE3F5;  --lagoon:#12BFE0;  --lagoon-deep:#0A8FC2;  --ocean:#0B4F8A;
  --navy:#0B2545; --abyss:#06152B;
  /* the in-game title yellow + its darker edge */
  --sun:#FFD43B;  --sun-deep:#F5A300;
  /* the in-game push-button blue + its edge. The game's #2E9BFF only reaches 2.9:1 under a
     white label, so the face is darkened until white text passes 4.5:1 (4.71 here). */
  --btn:#1A72DA;  --btn-edge:#0E4A9A;
  /* sunset */
  --coral:#FF6F4E; --sunset-a:#FF9E4F; --sunset-b:#FF5E7E; --dusk:#3B2A7A;
  /* land and paper */
  --palm:#2FD46B; --sand:#FFF3D1; --paper:#FFF9E8; --white:#FFFFFF;
  /* Discord blurple (their brand colour) + a darker edge for the push button */
  --discord:#5865F2; --discord-edge:#3B45B4;

  /* the same colours as channel triplets, for the few places that need alpha */
  --abyss-rgb:6 21 43;
  --white-rgb:255 255 255;
  --sky-rgb:111 227 245;
  --lagoon-rgb:18 191 224;
  --sun-rgb:255 212 59;

  /* type */
  --display:"Bungee","Arial Black",Impact,system-ui,sans-serif;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:clamp(1.0625rem,1rem + .25vw,1.125rem);     /* 17px → 18px */

  /* layout */
  --gutter:clamp(16px,5vw,48px);
  --wrap:72rem;
  --wave-h:clamp(24px,4.6vw,64px);
  --bar-h:64px;

  /* keyboard focus ring: navy on light surfaces, sun on dark ones (set per surface) */
  --focus:var(--navy);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--bar-h) + 16px);          /* anchors land below the sticky bar */
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  color:var(--navy);
  background:var(--abyss);             /* = where the footer ends: nothing lighter shows below it */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;                     /* safety net only — nothing is laid out wider than the page */
}

img{display:block;max-width:100%;height:auto}
svg{flex:none}
::selection{background:var(--sun);color:var(--navy)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Bungee is a single-weight, capitals-only face: never let the browser fake a bold */
.topbar__nav a,.btn,.skip,.board h3,.foot__nav--sections a{
  font-family:var(--display);
  font-weight:400;
  font-synthesis:none;
  text-transform:uppercase;
}

/* visually hidden, still read by assistive tech */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.skip{
  position:absolute;left:12px;top:12px;z-index:100;
  transform:translateY(-250%);
  padding:.8rem 1rem;border-radius:12px;
  background:var(--sun);color:var(--navy);
  box-shadow:0 0 0 3px var(--navy);
  font-size:.85rem;line-height:1;text-decoration:none;
}
.skip:focus{transform:none}

.container{
  max-width:calc(var(--wrap) + 2 * var(--gutter));
  margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}

/* inline SVG sprite holder (symbols only, draws nothing) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--navy);
  border-bottom:4px solid var(--abyss);
  --focus:var(--sun);
}
.topbar__in{display:flex;align-items:center;gap:.75rem;height:calc(var(--bar-h) - 4px)}
.topbar__logo{flex:none;display:flex;align-items:center;height:46px;margin-left:-2px;border-radius:8px}
.topbar__logo img{height:46px;width:auto}                /* the file has a transparent margin: the letters are 36px tall */

.topbar__nav{display:none}
.topbar__nav a{
  padding:1rem .65rem;border-radius:10px;              /* 13px label + 2 × 16px = 45px touch target */
  font-size:.82rem;line-height:1;letter-spacing:.03em;white-space:nowrap;
  color:var(--sand);text-decoration:none;
}
.topbar__nav a:hover{color:var(--sun)}

.topbar__actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.topbar .btn--icon{display:none}                        /* phones: logo + PLAY FREE only */

@media (min-width:40.0625rem){
  .topbar .btn--icon{display:inline-flex}
}
@media (min-width:59rem){                                 /* from here the four links fit AND sit on the page's centre */
  .topbar__in{display:grid;grid-template-columns:1fr auto 1fr}
  .topbar__logo{justify-self:start}
  .topbar__nav{display:flex;gap:.15rem}
  .topbar__actions{justify-self:end;margin-left:0}
}

/* ── Push buttons ───────────────────────────────────────────────────────
   Like the in-game ones: a solid face on a darker edge. Three hard shadows draw
   the edge and a navy outline around face + edge, so the base stays planted
   while the face lifts on hover and sinks on press.
   --d0 = resting depth of the edge.                                        */
.btn{
  --face:var(--sun); --edge:var(--sun-deep); --label:var(--navy); --line:var(--navy);
  --d0:6px; --d:var(--d0);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;
  margin:3px 3px calc(var(--d0) + 3px);                 /* room for the outline and the edge */
  padding:.5rem 1.3rem;
  border:0;border-radius:14px;
  background:var(--face);color:var(--label);
  box-shadow:
    0 var(--d) 0 0 var(--edge),
    0 0 0 3px var(--line),
    0 var(--d) 0 3px var(--line);
  font-size:1.02rem;line-height:1.1;letter-spacing:.02em;text-align:center;text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .12s ease;
}
@media (hover:hover){
  .btn:hover{--d:calc(var(--d0) + 2px);transform:translateY(-2px)}
}
.btn:active{--d:calc(var(--d0) - 4px);transform:translateY(4px)}
.btn:focus-visible{
  outline:3px solid transparent;                        /* shown as a real outline in forced-colours mode */
  box-shadow:
    0 var(--d) 0 0 var(--edge),
    0 0 0 3px var(--line),
    0 var(--d) 0 3px var(--line),
    0 0 0 6px var(--white),
    0 var(--d) 0 6px var(--white),
    0 0 0 9px var(--navy),
    0 var(--d) 0 9px var(--navy);
}
.btn svg{width:1.45em;height:1.1em;fill:currentColor}   /* Discord mark, 127:96 — explicit box: a sprite <svg> has no intrinsic ratio */

.btn--blue{--face:var(--btn);--edge:var(--btn-edge);--label:var(--white)}
.btn--discord{--face:var(--discord);--edge:var(--discord-edge);--label:var(--white)}
.btn--lg{min-height:60px;padding:.55rem 1.5rem;font-size:1.12rem;border-radius:16px}
.btn--sm{--d0:5px;min-height:44px;padding:.35rem 1rem;font-size:.92rem;border-radius:12px}
.btn--icon{width:44px;padding:0}
.btn--icon svg{width:24px;height:18px}

/* two-line button: Bungee label + a small plain sub-label */
.btn--stack{flex-direction:column;gap:.12em}
.btn__sub{
  font-family:var(--body);font-weight:600;font-size:.8rem;line-height:1.1;
  letter-spacing:0;text-transform:none;
}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
}

/* ── Game board ─────────────────────────────────────────────────────── */
.board{
  background:var(--navy);color:var(--sand);
  border:4px solid var(--abyss);border-radius:18px;
  box-shadow:0 8px 0 var(--abyss);
  padding:1.25rem 1.25rem 1.4rem;
  --focus:var(--sun);
}
.board h3{margin:0 0 .45rem;font-size:1.15rem;line-height:1.12;letter-spacing:.01em;color:var(--sun)}
.board p{margin:0}
.board p + p{margin-top:.7rem}

/* ── Wave divider ───────────────────────────────────────────────────────
   Sits on top of the block it belongs to and is filled with that block's top
   colour (--top). Stretched to the page width; the height never depends on
   the viewport height.                                                      */
.wave{
  position:absolute;left:0;bottom:calc(100% - 1px);
  display:block;width:100%;height:var(--wave-h);
  color:var(--top);
  pointer-events:none;
}
.wave path{fill:currentColor}
.wave .wave__foam{fill:var(--white);opacity:.5}
.wave--flip{transform:scaleX(-1)}

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot{
  --top:var(--navy);
  --focus:var(--sun);
  position:relative;
  background:linear-gradient(180deg,var(--navy) 0%,var(--abyss) 100%);
  color:var(--sand);
  font-size:.95rem;
}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem 2.5rem;
  padding-top:clamp(2rem,5vw,3rem);padding-bottom:clamp(2rem,5vw,3rem);
}
.foot__logo{height:55px;width:auto;margin:-5px 0 .55rem -3px}   /* transparent margin in the file: the letters are 44px tall */
.foot__brand p{margin:0;max-width:22rem}
.foot__mail{margin-top:.6rem}

.foot__nav{display:flex;flex-direction:column;align-items:flex-start}
.foot__nav a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--sand);text-decoration:none;
}
.foot__nav a:hover,.foot__mail a:hover{color:var(--sun)}
.foot__nav a[aria-current="page"]{color:var(--sun)}
.foot__nav--sections a{font-size:.82rem;letter-spacing:.03em}
.foot__nav--docs a,.foot__mail a{font-weight:500}
.foot__mail a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--sand);text-decoration:underline;text-decoration-color:var(--lagoon);
  text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere;
}

.foot__legal{
  grid-column:1 / -1;
  padding-top:1.25rem;border-top:3px solid var(--ocean);
  font-size:.85rem;line-height:1.5;
}
.foot__legal p{margin:0;opacity:.8}
.foot__legal p + p{margin-top:.4rem}

@media (min-width:38rem){
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (min-width:56rem){
  .foot__in{grid-template-columns:1.5fr 1fr 1fr}
  .foot__brand{grid-column:auto}
}