@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --ink:#12233B;        /* sheet */
  --ink-deep:#0C1A2D;   /* title block */
  --line:#8FB4D9;       /* drafting lines */
  --wall:#DCE8F5;       /* walls, headline */
  --paper:#EAF1F8;      /* body text */
  --muted:#9DB6D1;
  --flag:#F2C14E;       /* survey-flag yellow */
  --gap:clamp(14px,2.2vw,28px);
}
*{box-sizing:border-box;margin:0}
html{height:100%}
body{
  min-height:100%;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:1.0625rem;line-height:1.55;
  color:var(--paper);background-color:var(--ink);
  background-image:
    linear-gradient(rgba(143,180,217,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,180,217,.07) 1px,transparent 1px);
  background-size:28px 28px;
  padding:var(--gap);
  display:flex;
}
a{color:var(--flag)}
a:focus-visible{outline:2px solid var(--flag);outline-offset:3px}

/* the drafting sheet */
.sheet{flex:1;border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100vh - 2*var(--gap));min-height:calc(100dvh - 2*var(--gap))}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem clamp(1rem,3vw,2.25rem);border-bottom:1px solid rgba(143,180,217,.45)}
.name{font-weight:600;font-size:1.15rem;letter-spacing:.01em;color:var(--wall);display:flex;align-items:center;gap:.75rem}
.name img{display:block;height:84px;width:auto}
.nav-btn{font-weight:600;font-size:1rem;text-decoration:none;color:var(--ink);background:var(--flag);padding:.6rem 1.35rem;border-radius:999px;white-space:nowrap}
.nav-btn:hover{background:#F6D17A}
.nav-btn:focus-visible{outline:2px solid var(--wall);outline-offset:3px}
.rev{color:var(--muted);font-size:.9rem}

.sheet-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.5rem,5vw,4rem) clamp(1rem,3vw,2.25rem)}
h1{font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;font-weight:800;font-size:clamp(3.6rem,9.5vw,8.5rem);line-height:.88;letter-spacing:-.005em;color:var(--wall);text-wrap:balance}
.lede{margin-top:1.5rem;max-width:34ch;font-size:1.125rem;color:var(--paper)}
.plan{width:100%;height:auto;display:block;max-height:62vh}

/* title block */
.title-block{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink-deep);border-top:1px solid var(--line)}
.title-block div{padding:.8rem clamp(1rem,3vw,2.25rem);border-left:1px solid rgba(143,180,217,.45)}
.title-block div:first-child{border-left:0}
.title-block dt{font-size:.8rem;color:var(--muted)}
.title-block dd{font-weight:600;color:var(--wall)}
.title-block .status dd{color:var(--flag)}

/* plan drawing */
.plan .wall{fill:none;stroke:var(--wall);stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}
.plan .thin{fill:none;stroke:var(--line);stroke-width:1.25}
.plan .hidden-room{fill:rgba(242,193,78,.06);stroke:var(--flag);stroke-width:2;stroke-dasharray:9 7}
.plan text{font-family:"IBM Plex Sans",system-ui,sans-serif;fill:var(--paper);font-size:17px}
.plan .dim{fill:var(--muted);font-size:14px}
.plan .flag{fill:var(--flag)}

@media (prefers-reduced-motion:no-preference){
  .plan .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--i,0)*.22s + .2s)}
  .plan .appear{opacity:0;animation:appear .6s ease forwards;animation-delay:calc(var(--i,0)*.22s + .2s)}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes appear{to{opacity:1}}
}

/* simple pages (404, game slot) */
.sheet-body.solo{grid-template-columns:1fr;align-content:center}
.sheet-body.solo h1{font-size:clamp(3rem,8vw,6.5rem)}

@media (max-width:760px){
  .sheet-body{grid-template-columns:1fr;align-content:start}
  .plan{max-height:none}
  .title-block{grid-template-columns:1fr}
  .title-block div{border-left:0;border-top:1px solid rgba(143,180,217,.3);display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .title-block div:first-child{border-top:0}
  .name img{height:60px}
  .name{font-size:1rem}
}