/* The pages around the game (server/resources/views/site): how to play, maps, credits, privacy, terms.
   The game's own colours and type (src/styles/main.css :root), on a readable page. */
:root{
  --bunker:#101613; --bunker-2:#18211d; --bone:#e6dcc3; --dim:#8f9488; --sodium:#f0a43a; --hazard:#e8c547;
  --line:rgba(230,220,195,.16);
  --font-display:'Saira Stencil One','Impact','Arial Black',sans-serif;
  --font-ui:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:#0b100e}
body{margin:0;color:var(--bone);font:500 19px/1.55 var(--font-ui);background:radial-gradient(ellipse at 50% -10%,#1b2621 0,#0b100e 60%) fixed}
a{color:var(--sodium)}
a:hover{color:var(--hazard)}
img{max-width:100%;height:auto;display:block}

.tape{height:10px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 14px,#16120a 14px 28px);opacity:.92}
.site-nav{display:flex;align-items:center;gap:22px;max-width:1080px;margin:0 auto;padding:14px 20px;flex-wrap:wrap}
.site-nav a{color:var(--bone);text-decoration:none;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:17px}
.site-nav a.on,.site-nav a:hover{color:var(--hazard)}
.site-nav .site-logo{font:400 26px/1 var(--font-display);letter-spacing:.02em;text-transform:none;margin-right:auto}
.site-nav .play,.btn{display:inline-block;padding:9px 20px;background:var(--hazard);color:#16120a;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.site-nav .play:hover,.btn:hover{background:var(--sodium);color:#16120a}
.btn{font-size:20px;padding:12px 28px}

.site-main{max-width:1080px;margin:0 auto;padding:24px 20px 56px}
.prose{max-width:760px}
.prose h1{font:400 clamp(40px,7vw,64px)/1.05 var(--font-display);margin:.2em 0 .3em}
.prose h2{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:24px;margin:1.8em 0 .5em;color:var(--hazard)}
.prose .lead{font-size:23px;color:var(--bone)}
.prose .meta,.prose .crumb{color:var(--dim);margin:0}
.prose .crumb a{color:var(--dim)}
.prose li{margin:.3em 0}
.prose .hero{margin:20px 0;border:1px solid var(--line)}
.legal{font-size:18px}
.legal h2{font-size:21px}

kbd{display:inline-block;min-width:1.7em;padding:0 .4em;margin:0 .1em;border:1px solid var(--line);border-bottom-width:3px;border-radius:4px;background:var(--bunker-2);font:600 15px/1.6 var(--font-ui);text-align:center;color:var(--bone)}
dl.keys,dl.pairs{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0}
dl.keys dt,dl.pairs dt{font-weight:700;white-space:nowrap}
dl.keys dd,dl.pairs dd{margin:0;color:var(--bone)}
dl.faq dt{font-weight:700;margin-top:1em}
dl.faq dd{margin:.2em 0 0}

.not-found .code{font:400 clamp(90px,18vw,160px)/.9 var(--font-display);color:var(--hazard);opacity:.85;margin:.1em 0 0}
.not-found h1{margin-top:0}

.map-grid{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.map-grid a{display:block;height:100%;color:var(--bone);text-decoration:none;background:var(--bunker);border:1px solid var(--line);transition:border-color .15s}
.map-grid a:hover{border-color:var(--hazard)}
.map-grid h2{font:400 26px/1.1 var(--font-display);margin:14px 16px 6px;color:var(--bone)}
.map-grid p{margin:0 16px 16px;color:var(--dim);font-size:17px}
.map-grid.small{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:0}
.map-grid.small h2{font-size:19px;margin:10px 12px 12px}

.site-foot{border-top:1px solid var(--line);padding:22px 20px 34px;text-align:center;color:var(--dim);font-size:16px}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:8px}
.site-foot a{color:var(--dim)}
.site-foot a:hover{color:var(--bone)}

@media (max-width:560px){
  body{font-size:18px}
  .site-nav{gap:14px}
  .site-nav .site-logo{width:100%}
  dl.keys,dl.pairs{grid-template-columns:1fr}
  dl.keys dd,dl.pairs dd{margin-bottom:6px}
}