/* Beast Frontier - the site's stylesheet (every page but the game), drawn with the game's pixel kit
   (uikit.js + kit.css). Nothing here is shared with style.css, which is the game's HUD. */
:root{
  --ink:#0c0f16; --panel:#131826; --raise:#1b2131;
  --line:#2c3446; --lit:#35617a; --trim:#6e5530;
  --blue:#7bc4ff; --gold:#ffe9a0; --green:#6ee27a; --red:#d2585c; --ember:#e08a4a;
  --text:#e7ebf3; --dim:#8fa0b8; --dimmer:#6f7b90;
  --head:'Press Start 2P','Courier New',monospace;
  --body:'VT323','Courier New',monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:19px;line-height:1.45;
  -webkit-font-smoothing:none;}
img,canvas{max-width:100%;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:#a8dcff;text-decoration:underline;}
:focus-visible{outline:var(--kpx) solid var(--gold);outline-offset:2px;}
.wrap{width:min(1080px,92vw);margin:0 auto;}

/* ---- kit pieces: frames for the big things, plates for cards, wells for insets, chips for buttons ---- */
.door,.entry{background:transparent;image-rendering:pixelated;
  border:var(--k-frame-w) solid var(--k-outline);border-image:var(--k-frame) 5 fill / var(--k-frame-w) stretch;}
.card,.world,.beast,.q,.stat,.empty{background:transparent;image-rendering:pixelated;
  border:var(--k-plate-w) solid var(--k-outline);border-image:var(--k-plate) 3 fill / var(--k-plate-w) stretch;}
.graph,.tablewrap,.target{background:transparent;image-rendering:pixelated;
  border:var(--k-chip-w) solid var(--k-outline);border-image:var(--k-well) 2 fill / var(--k-chip-w) stretch;}
.btn,.tools button,.chip,.k{background:transparent;image-rendering:pixelated;box-shadow:none;
  border:var(--k-chip-w) solid var(--k-outline);border-image:var(--k-chip) 2 fill / var(--k-chip-w) stretch;}
.tools button:hover{border-image-source:var(--k-chip-lit);}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;background:var(--ink);
  box-shadow:0 var(--kpx) 0 var(--k-outline),0 calc(var(--kpx) * 2) 0 var(--trim),0 calc(var(--kpx) * 3) 0 var(--k-outline);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;}
.mark{font-family:var(--head);font-size:11px;color:var(--gold);letter-spacing:1px;text-shadow:var(--kpx) var(--kpx) 0 var(--k-outline);}
.topnav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.topnav a{font-size:18px;color:var(--dim);}
.topnav a:hover{color:var(--text);text-decoration:none;}
.btn{display:inline-block;font-family:var(--body);font-size:19px;padding:5px 18px;cursor:pointer;
  color:#2a1c00;border-image-source:var(--k-hot);}
.btn:hover{color:#2a1c00;text-decoration:none;border-image-source:var(--k-hot-lit);}
.btn:active{border-image-source:var(--k-hot-down);transform:translateY(var(--kpx));}
.btn.big{font-family:var(--head);font-size:13px;padding:14px 32px;}
.topnav a.btn,.topnav a.btn:hover{color:#2a1c00;}

/* ---- hero ---- */
.hero{padding:64px 0 0;text-align:center;}
.logo{display:inline-block;line-height:.98;margin-bottom:18px;}
.logo div{font-family:var(--head);letter-spacing:2px;}
.logo .a{font-size:clamp(30px,7.4vw,62px);color:var(--gold);text-shadow:0 4px 0 #6b3f18,0 6px 0 #0b0a10;}
.logo .b{font-size:clamp(19px,4.6vw,39px);color:var(--ember);text-shadow:0 3px 0 #5a2a12,0 5px 0 #0b0a10;
  margin-top:8px;}
.tag{font-size:23px;color:var(--text);margin:0 auto 8px;max-width:46ch;}
.sub{font-size:19px;color:var(--dim);margin:0 auto 26px;max-width:56ch;}
.cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.freeline{font-size:17px;color:var(--dimmer);margin-top:12px;}

/* the animated strip: real sprites, drawn by the game's own engine */
.strip{margin-top:34px;background:var(--panel);overflow:hidden;
  box-shadow:0 calc(var(--kpx) * -1) 0 var(--k-outline),0 calc(var(--kpx) * -2) 0 var(--trim),0 var(--kpx) 0 var(--k-outline),0 calc(var(--kpx) * 2) 0 var(--trim);}
.strip canvas{display:block;width:100%;height:170px;image-rendering:pixelated;}
.stripnote{font-size:16px;color:var(--dimmer);text-align:center;padding:9px 12px;}
.stripnote b{color:var(--dim);font-weight:normal;}

/* ---- stat bar ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin:52px 0;}
.stat{padding:12px 8px;text-align:center;}
.stat b{display:block;font-family:var(--head);font-size:17px;color:var(--blue);margin-bottom:7px;text-shadow:var(--kpx) var(--kpx) 0 var(--k-outline);}
.stat span{font-size:16px;color:var(--dim);}

/* ---- sections ---- */
section.band{padding:26px 0 52px;}
h2{font-family:var(--head);font-size:15px;color:var(--gold);margin:0 0 6px;letter-spacing:1px;text-shadow:var(--kpx) var(--kpx) 0 var(--k-outline);}
.lede{font-size:19px;color:var(--dim);margin:0 0 26px;max-width:68ch;}
.note{font-size:17px;color:var(--dimmer);max-width:70ch;}

/* world graph */
.graph{padding:8px;}
.graph canvas{display:block;width:100%;height:auto;image-rendering:pixelated;}

/* system cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;}
.card{padding:12px 14px;}
.card h3{font-family:var(--head);font-size:10px;color:var(--blue);margin:0 0 9px;letter-spacing:.5px;}
.card p{margin:0;font-size:18px;color:var(--dim);}
.card p + p{margin-top:9px;}
.card em{color:var(--text);font-style:normal;}

/* dev log */
.entry{padding:10px 14px;margin-bottom:16px;}
.entry .when{font-family:var(--head);font-size:8px;color:var(--dimmer);letter-spacing:.5px;margin-bottom:8px;}
.entry h3{font-family:var(--head);font-size:11px;color:var(--gold);margin:0 0 11px;letter-spacing:.5px;line-height:1.5;text-shadow:var(--kpx) var(--kpx) 0 var(--k-outline);}
.entry h4{font-family:var(--head);font-size:9px;color:var(--text);margin:20px 0 10px;letter-spacing:.5px;line-height:1.5;}
.entry p{margin:0 0 10px;font-size:18px;color:var(--dim);}
.entry p:last-child{margin-bottom:0;}
.entry em{color:var(--text);font-style:normal;}
.entry ul{margin:0 0 10px;padding-left:20px;color:var(--dim);font-size:18px;}
.entry li{margin-bottom:6px;}
.entry li b{color:var(--text);font-weight:400;}

/* bestiary */
.beasts{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;}
.beast{padding:10px 6px;text-align:center;}
.beast canvas{display:block;margin:0 auto 8px;image-rendering:pixelated;}
.beast .bn{font-size:17px;color:var(--text);line-height:1.2;}
.beast .bt{font-size:15px;color:var(--dimmer);margin-top:4px;}

/* ---- footer ---- */
footer{background:var(--panel);padding:38px 0 26px;margin-top:30px;
  box-shadow:0 calc(var(--kpx) * -1) 0 var(--k-outline),0 calc(var(--kpx) * -2) 0 var(--trim),0 calc(var(--kpx) * -3) 0 var(--k-outline);}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-bottom:30px;}
.col h4{font-family:var(--head);font-size:9px;color:var(--gold);margin:0 0 12px;letter-spacing:.5px;}
.col ul{list-style:none;margin:0;padding:0;}
.col li{margin-bottom:7px;font-size:18px;}
.col p{margin:0;font-size:17px;color:var(--dimmer);max-width:34ch;}
.copy{border-top:var(--kpx) solid var(--line);padding-top:18px;font-size:16px;color:var(--dimmer);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ---- pages other than the home page ---- */
.pagehead{padding:44px 0 8px;}
.pagehead h1{font-family:var(--head);font-size:clamp(16px,3.2vw,26px);color:var(--gold);margin:0 0 14px;letter-spacing:1px;line-height:1.5;text-shadow:0 3px 0 #6b3f18,0 5px 0 #0b0a10;}
.topnav a.here{color:var(--gold);}
a.mark{color:var(--gold);}
a.mark:hover{text-decoration:none;color:#fff;}

/* ---- who is here ---- */
.live{display:flex;gap:6px 16px;justify-content:center;align-items:center;flex-wrap:wrap;
  font-size:17px;color:var(--dim);margin-top:16px;min-height:22px;}
.live b{color:var(--text);font-weight:normal;}
.live .now{display:inline-flex;align-items:center;gap:8px;}
.live .dot{width:8px;height:8px;background:var(--dimmer);flex:0 0 auto;box-shadow:0 0 0 var(--kpx) var(--k-outline);}
.live .dot.on{background:var(--green);animation:live 1.6s steps(2,jump-none) infinite;}
.live .sep{color:var(--line);}
.live .call{color:var(--gold);}
@keyframes live{0%{background:var(--green);}100%{background:#2f7a3c;}}
@media (prefers-reduced-motion: reduce){.live .dot.on{animation:none;}}

/* ---- home page doors ---- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.door{display:flex;flex-direction:column;gap:8px;padding:10px 12px;color:var(--dim);}
.door:hover{text-decoration:none;color:var(--dim);transform:translateY(calc(var(--kpx) * -1));}
.door h3{font-family:var(--head);font-size:11px;color:var(--gold);margin:0;letter-spacing:.5px;text-shadow:var(--kpx) var(--kpx) 0 var(--k-outline);}
.door p{margin:0;font-size:18px;flex:1;}
.door span{font-size:17px;color:var(--blue);}

/* ---- worlds page ---- */
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.world{position:relative;padding:10px 12px 10px 20px;}
.world::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:calc(var(--kpx) * 2);background:var(--lit);}
.world h3{font-family:var(--head);font-size:11px;color:var(--gold);margin:0 0 4px;letter-spacing:.5px;}
.world .role{font-family:var(--head);font-size:8px;color:var(--dimmer);letter-spacing:.5px;margin-bottom:10px;}
.world p{margin:0 0 10px;font-size:18px;color:var(--dim);}
.world .lab{font-family:var(--head);font-size:8px;letter-spacing:.5px;color:var(--dimmer);margin:0 0 6px;}
.world.deep::before{background:var(--red);}
.world.hub::before{background:var(--green);}

/* ---- bestiary by grade ---- */
.tiergroup{margin-top:26px;}
.tiergroup h3{font-family:var(--head);font-size:10px;margin:0 0 10px;letter-spacing:.5px;}
.beast .bw{font-size:15px;color:var(--dimmer);margin-top:3px;}

/* ---- quest guide ---- */
/* how it works */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.k{display:inline-block;min-width:22px;text-align:center;font-family:var(--head);font-size:9px;padding:3px 5px;color:var(--gold);}

/* index table */
.tablewrap{overflow-x:auto;}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:18px;}
th{text-align:left;font-family:var(--head);font-size:8px;letter-spacing:.5px;color:var(--dimmer);padding:12px 12px 8px;border-bottom:var(--kpx) solid var(--line);font-weight:normal;}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim);}
td.n a{color:var(--text);}
td.lv{font-family:var(--head);font-size:9px;color:var(--blue);white-space:nowrap;padding-top:12px;}
tr.region td{background:var(--raise);font-family:var(--head);font-size:9px;color:var(--gold);letter-spacing:.5px;padding:12px;}

/* chains */
.chains{display:flex;flex-direction:column;gap:6px;font-size:18px;color:var(--dim);}
.chains a{color:var(--text);}
.chains .arrow{color:var(--dimmer);padding:0 8px;}

/* quest cards */
.qgroup{margin-top:28px;}
.qgroup h2{border-top:var(--kpx) solid var(--line);padding-top:22px;}
.q{margin-bottom:10px;scroll-margin-top:70px;}
.q[open]{border-image-source:var(--k-plate-on);}
.q summary{list-style:none;cursor:pointer;padding:10px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.q summary::-webkit-details-marker{display:none;}
.q summary:hover{background:rgba(255,233,160,.04);}
.q summary .tog{margin-left:auto;font-family:var(--head);font-size:9px;color:var(--dimmer);white-space:nowrap;}
.q[open] summary .tog{color:var(--gold);}
.q .body{padding:4px 16px 14px;border-top:var(--kpx) solid var(--line);}
.q .head canvas{image-rendering:pixelated;flex:0 0 auto;background:var(--raise);box-shadow:0 0 0 var(--kpx) var(--k-outline);}
.q .title{flex:1 1 260px;}
.q h3{font-family:var(--head);font-size:12px;color:var(--gold);margin:0 0 6px;letter-spacing:.5px;line-height:1.6;}
.q .where{font-size:17px;color:var(--dimmer);margin-top:6px;}
.tools{display:flex;gap:10px;margin:0 0 14px;}
.tools button{font-family:var(--body);font-size:17px;padding:3px 12px;color:var(--dim);cursor:pointer;}
.tools button:hover{color:var(--text);}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-family:var(--head);font-size:8px;letter-spacing:.5px;padding:4px 7px;color:var(--dim);}
.chip.lv{color:var(--blue);}
.chip.req{color:var(--ember);}
.chip.unlock{color:var(--green);}
.chip.warn{color:var(--red);}
.chip.mem{color:var(--gold);}
.q .brief{margin:14px 0 0;font-size:18px;color:var(--dim);max-width:78ch;}
.q .brief em{color:var(--text);font-style:normal;}
.lab{font-family:var(--head);font-size:8px;letter-spacing:.5px;color:var(--dimmer);margin:16px 0 6px;}
.q .start,.q .hand{font-size:18px;color:var(--text);margin:0;}
.q .start span,.q .hand span{color:var(--dimmer);}
ol.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px;}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:0 10px;}
ol.steps li::before{content:counter(s);font-family:var(--head);font-size:11px;color:var(--blue);padding-top:2px;}
ol.steps .what{font-size:19px;color:var(--text);}
ol.steps .how{font-size:17px;color:var(--dim);margin-top:2px;}
ol.steps .how b{color:var(--text);font-weight:normal;}
ol.steps .how .warn{color:var(--ember);}
.targets{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.target{display:flex;align-items:center;gap:8px;padding:2px 10px 2px 2px;font-size:16px;color:var(--dim);}
.target canvas{image-rendering:pixelated;}
.target b{color:var(--text);font-weight:normal;}
.reward{font-size:18px;color:var(--text);margin:0;}
.reward span{color:var(--dimmer);}
details.after{margin-top:14px;border-top:var(--kpx) solid var(--line);padding-top:10px;}
details.after summary{cursor:pointer;font-size:17px;color:var(--dimmer);}
details.after summary:hover{color:var(--dim);}
details.after p{margin:8px 0 0;font-size:18px;color:var(--dim);max-width:78ch;font-style:italic;}
.empty{font-size:18px;color:var(--dimmer);padding:16px;}