/* =====================================================================
   Shared design tokens and structural styles used by every page: the
   medieval parchment/wood theme, pixel frame helper, banner, panels and
   buttons. Page-specific styles live in their own stylesheets.
   ===================================================================== */
:root{
  --ink:#1b1410;
  --parch:#e6d4a8;
  --parch-dk:#cdb684;
  --wood:#3a2416;
  --wood-dk:#241408;
  --gold:#e8b923;
  --gold-dk:#9c7710;
  --blood:#8c2f22;
  --moss:#4b7f3a;
  --moss-dk:#345828;
  --stone:#6b6157;
  --pixel:'Press Start 2P', 'Courier New', monospace;
  --body:'Courier New', Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--wood-dk);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, rgba(255,255,255,.02) 2px 14px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 3px, transparent 3px 9px);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  padding:18px 14px 60px;
  image-rendering:pixelated;
  min-height:100dvh;
}
.pixel-icon{display:grid;image-rendering:pixelated}
.pixel-icon > div{width:100%;height:100%}

/* ---- chunky pixel frame helper ---- */
.px{
  border:4px solid var(--ink);
  box-shadow:
    0 0 0 4px var(--wood),
    4px 4px 0 4px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.25);
}

.wrap{max-width:1180px;margin:0 auto}

/* Mobile-first narrow column used by every page except the two-column
   House scriptorium/codex layout. */
.phone-wrap{max-width:480px;margin:0 auto}

header.banner{
  position:relative;
  background:var(--blood);
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 8px, transparent 8px 16px);
  padding:10px 16px;
  text-align:center;
  margin-bottom:10px;
}
header.banner h1{
  font-family:var(--pixel);
  font-size:clamp(13px,2.6vw,24px);
  color:var(--gold);
  margin:0 0 6px;
  letter-spacing:1px;
  text-shadow:3px 3px 0 #000;
}
header.banner .sub{
  margin:0;color:var(--parch);font-size:13px;letter-spacing:1px;
}
.backlink{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--pixel);font-size:12px;color:var(--parch);
  background:var(--stone);border:3px solid var(--ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
  padding:9px 14px;cursor:pointer;
  text-decoration:none;margin-bottom:14px;letter-spacing:1px;
  transition:transform .05s;
}
.backlink:hover{filter:brightness(1.18);text-decoration:none}
.backlink:active{transform:translate(3px,3px);box-shadow:none}

.panel{
  background:var(--parch);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(140,100,40,.13), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(140,100,40,.13), transparent 40%);
  padding:16px;
}
.panel h2{
  font-family:var(--pixel);font-size:11px;margin:0 0 14px;
  color:var(--wood);letter-spacing:1px;
  border-bottom:3px solid var(--wood);padding-bottom:8px;
}
.panel p{font-size:14px;margin:0 0 12px}

/* ---- buttons ---- */
button.med, a.med{
  font-family:var(--pixel);font-size:9px;line-height:1.6;
  background:var(--moss);color:#fff;border:4px solid var(--ink);
  padding:10px 12px;cursor:pointer;width:100%;
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
  transition:transform .05s;
  display:block;box-sizing:border-box;text-align:center;text-decoration:none;
}
button.med:hover, a.med:hover{filter:brightness(1.12)}
button.med:active, a.med:active{transform:translate(4px,4px);box-shadow:none}
button.med.ghost, a.med.ghost{background:var(--stone);font-size:8px;padding:8px}
button.med:disabled{filter:saturate(.3) brightness(.8);cursor:default}

/* ---- generic progress bar (hub, scavenger hunt, house goal) ---- */
.bar{height:20px;background:var(--wood);border:3px solid var(--ink);padding:2px}
.bar > div{height:100%;background:var(--gold);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 4px,transparent 4px 8px);width:0%;transition:width .2s}

.hint-note{font-size:12px;color:#6b5433;font-style:italic}