/* Cygnus Works site. One stylesheet for every page, no build step, no fonts
   to fetch. The five palette variables are the same ones the games use, so
   the site and the apps look like the same thing.

   Nothing here loads anything over the network. If you add a rule that does
   (a webfont, a background image from a CDN), the Content-Security-Policy in
   netlify.toml will block it, which is the intended answer. */

:root{
  /* the shell's palette */
  --bg:#101418;
  --panel:#1a2129;
  --ink:#e8edf2;
  --dim:#8a97a5;
  --hot:#ffc23c;

  /* derived from those five, nothing new invented */
  --text:#c8d2db;
  --line:#26303a;
  --line-soft:#1d252d;
  --panel-2:#151c23;
  --hot-dim:#e0a52f;

  --wrap:62rem;
  --measure:70ch;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:17px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;
}

/* ---- layout ---- */

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.25rem}
.prose{max-width:var(--measure)}
main{padding:2.5rem 0 4rem}
/* the page head already gives the first section its air */
main > .wrap > :first-child{margin-top:0}

/* ---- skip link ---- */

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--hot); color:#241a04; padding:.6rem 1rem;
  border-radius:0 0 10px 0; font-weight:700; z-index:20;
}
.skip:focus{left:0}

/* ---- site header ---- */

.top{border-bottom:1px solid var(--line-soft); background:var(--panel-2)}
.top .wrap{
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-top:.9rem; padding-bottom:.9rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.01em;
}
.brand:hover{color:var(--hot)}
.brand svg{width:25px; height:25px; color:var(--hot); flex:none}
nav.top-nav{display:flex; flex-wrap:wrap; gap:.35rem .25rem}
nav.top-nav a{
  color:var(--dim); text-decoration:none; font-size:.92rem;
  padding:.35rem .6rem; border-radius:8px;
}
nav.top-nav a:hover{color:var(--ink); background:var(--panel)}
nav.top-nav a[aria-current="page"]{color:var(--hot); background:var(--panel)}

/* ---- page head ---- */

.page-head{padding:2.75rem 0 1.5rem; border-bottom:1px solid var(--line-soft)}
.kicker{
  margin:0 0 .5rem; font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hot);
}
h1{
  margin:0 0 .5rem; color:var(--ink);
  font-size:clamp(1.85rem,5vw,2.5rem); line-height:1.15; letter-spacing:-.01em;
}
.lede{margin:0; color:var(--dim); font-size:1.02rem; max-width:var(--measure)}
.lede a{color:var(--hot)}
.title-row{display:flex; align-items:center; gap:.85rem; margin:0 0 .5rem}
.title-row h1{margin:0}
.title-row svg{width:38px; height:38px; color:var(--hot); flex:none}
.stamp{margin:.9rem 0 0; color:var(--dim); font-size:.86rem}

/* ---- prose ---- */

h2{
  margin:2.9rem 0 .85rem; color:var(--ink);
  font-size:1.22rem; line-height:1.35; letter-spacing:-.005em;
  padding-bottom:.45rem; border-bottom:1px solid var(--line);
  scroll-margin-top:1.25rem;
}
h2 .num{color:var(--hot); font-variant-numeric:tabular-nums; margin-right:.45em}
h3{
  margin:1.9rem 0 .5rem; color:var(--ink);
  font-size:1rem; line-height:1.4; scroll-margin-top:1.25rem;
}
p{margin:0 0 1.05rem; max-width:var(--measure)}
ul,ol{margin:0 0 1.05rem; padding-left:1.3rem; max-width:var(--measure)}
li{margin-bottom:.5rem}
li::marker{color:var(--dim)}
strong{color:var(--ink); font-weight:600}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

a{color:var(--hot); text-decoration:underline; text-underline-offset:.16em}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--hot); outline-offset:3px; border-radius:3px;
}

code{
  font-family:var(--mono); font-size:.86em;
  background:var(--panel); color:var(--ink);
  padding:.12em .38em; border-radius:5px;
  overflow-wrap:anywhere;
}

/* ---- summary / note panels ---- */

.panel{
  background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--hot);
  border-radius:12px; padding:1.1rem 1.25rem;
  margin:0 0 2rem; max-width:var(--measure);
}
.panel > :last-child{margin-bottom:0}
.panel h2{margin-top:0}
.note{border-left-color:var(--dim)}

/* ---- table of contents ---- */

.toc{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.25rem .9rem;
  margin:0 0 2.25rem;
}
.toc h2{
  margin:0 0 .7rem; padding:0; border:0;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.toc ol{
  margin:0; padding:0; list-style:none;
  columns:2; column-gap:2rem; max-width:none;
}
.toc li{margin:0 0 .35rem; break-inside:avoid; font-size:.94rem}
.toc a{color:var(--text); text-decoration:none}
.toc a:hover{color:var(--hot); text-decoration:underline}
.toc .n{color:var(--dim); font-variant-numeric:tabular-nums; margin-right:.4em}
@media (max-width:34rem){ .toc ol{columns:1} }

/* ---- tables ---- */

/* tables get more room than prose does; a three-column table at 70ch is a
   column of single words */
.table-scroll{overflow-x:auto; margin:0 0 1.3rem; max-width:none}
/* three-column tables squeeze into a column of single words on a phone, so
   they get a floor and scroll sideways instead */
.table-scroll.wide table{min-width:30rem}
table{border-collapse:collapse; width:100%; font-size:.94rem}
th,td{
  text-align:left; padding:.6rem .75rem;
  border:1px solid var(--line); vertical-align:top;
}
th{background:var(--panel); color:var(--ink); font-weight:600}
td{color:var(--text)}
td code{background:var(--panel-2)}

/* ---- the shelf ---- */

.shelf{
  display:grid; gap:1rem; margin:0 0 1.5rem; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  max-width:none;
}
.game{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:1.15rem 1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.game-head{display:flex; align-items:center; gap:.7rem}
/* Each shelf entry carries its own game's accent in --ico, through a g- class
   further down. --hot is the fallback for an entry added without one. */
.game-head svg{width:34px; height:34px; color:var(--ico, var(--hot)); flex:none}
/* lets one shape in an icon knock out the one behind it */
.fill-panel{fill:var(--panel)}
.game h3{margin:0; font-size:1.05rem}
.game p{margin:0; font-size:.94rem; color:var(--text); max-width:none}
.game .meta{
  margin-top:auto; padding-top:.6rem; font-size:.82rem; color:var(--dim);
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
}
.game .meta code{font-size:.9em; background:var(--panel-2)}
.tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line);
  border-radius:99px; padding:.15rem .55rem;
}
.tag.soon{color:var(--hot); border-color:var(--hot-dim)}
.tag.live{color:#7fd6a0; border-color:#3f8a60}
.tag.test{color:#9fc4ff; border-color:#4a6ea8}

/* A game's accent, as a class. The policy in netlify.toml allows no inline
   style, so a style attribute on the entry would be dropped without a word
   and every icon would come out amber. */
.g-elephant{--ico:#ffc23c}
.g-keelhold{--ico:#c4f24d}
.g-fathom{--ico:#5fb8e8}
.g-frylings{--ico:#ff9a6b}

/* ---- buttons ---- */

.btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:.94rem;
  background:var(--hot); color:#241a04; border:1px solid var(--hot);
  border-radius:10px; padding:.5rem 1rem;
}
.btn:hover{filter:brightness(1.08); color:#241a04}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--hot-dim); color:var(--hot); filter:none}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem; margin:.35rem 0 1.05rem}

/* ---- a game's own page ---- */

.shots{
  display:flex; gap:.8rem; overflow-x:auto; margin:0 0 1.6rem; padding:0 0 .6rem;
  list-style:none; max-width:none;
}
.shots li{margin:0; flex:none}
.shots img{
  display:block; height:26rem; width:auto; max-height:70vh;
  border-radius:12px; border:1px solid var(--line);
}
.facts{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 1.05rem;
  list-style:none; max-width:var(--measure);
}
.facts li{
  margin:0; font-size:.9rem; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:99px; padding:.3rem .8rem;
}
.facts b{color:var(--ink)}

/* ---- the posture list on the front page ---- */

.posture{
  display:grid; gap:.9rem 1.75rem; padding:0; margin:0 0 1.05rem; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  max-width:none;
}
.posture li{margin:0; padding-left:1.4rem; position:relative; font-size:.96rem}
.posture li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:.5rem; border-radius:2px; background:var(--hot);
}
.posture b{color:var(--ink); font-weight:600}

/* ---- link rows ---- */

.links{
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0;
  padding:0; list-style:none; max-width:none;
}
.links li{margin:0}
.links a{
  display:inline-block; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:.5rem .9rem; font-size:.94rem; color:var(--ink);
}
.links a:hover{border-color:var(--hot-dim); color:var(--hot)}

/* ---- Q and A on the support page ---- */

.qa{margin:0 0 2rem}
.qa h3{
  margin:1.8rem 0 .45rem; color:var(--ink); font-size:1.02rem;
}
.qa h3:first-child{margin-top:0}

/* ---- footer ---- */

footer.site{
  border-top:1px solid var(--line-soft); background:var(--panel-2);
  padding:1.75rem 0 3rem; font-size:.88rem; color:var(--dim);
}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between}
footer.site p{margin:0; max-width:none}
footer.site nav{display:flex; flex-wrap:wrap; gap:1rem}
footer.site a{color:var(--dim)}
footer.site a:hover{color:var(--hot)}

/* ---- 404 ---- */

.centered{
  min-height:60vh; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
}

/* ---- print: the policy gets read on paper sometimes ---- */

@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .top,footer.site,.skip,.toc{display:none}
  a{color:#000}
  h1,h2,h3,strong{color:#000}
  h2{border-bottom:1px solid #999}
  .panel{border:1px solid #999; border-left-width:1px}
  code{background:#eee; color:#000}
  th{background:#eee; color:#000}
  th,td{border:1px solid #999}
  .prose,p,ul,ol,table,.panel{max-width:none}
}