/*
 * Player site styling.
 *
 * Shares the codex's palette so the two read as siblings, but the layout is
 * deliberately different: one reading column with numbered steps instead of a
 * reference sidebar, because this page is read once, top to bottom, by someone
 * who has not played yet.
 */

:root{
  --ink:#1c1a17;
  --ink-soft:#33302b;
  --parchment:#f4efe4;
  --parchment-dim:#e8e0d0;
  --line:#d8cfba;
  --neutral:#6b6558;

  --valeria:#a9822f;
  --valeria-deep:#5c4718;
  --valeria-bg:#f6efdd;
  --marches:#bf6a2e;
  --marches-deep:#7a3f16;
  --marches-bg:#f7ead9;
  --moonwood:#5c7a5b;
  --moonwood-deep:#2c3a2b;
  --moonwood-bg:#e9efe4;
  --remnant:#517069;
  --remnant-deep:#2a3d38;
  --remnant-bg:#e6efec;

  --accent:var(--neutral);
  --accent-deep:var(--ink);
  --accent-bg:var(--parchment-dim);

  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:4px;
  --col:min(720px, 100% - 40px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]{display:none !important;}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}

/* ---------- Masthead ---------- */
.masthead{
  background:var(--ink);
  color:#f4efe4;
  padding:26px 0;
}
.masthead-inner{width:var(--col);margin:0 auto;}
.masthead-brand{
  font-family:var(--serif);
  font-size:30px;font-weight:700;letter-spacing:.01em;line-height:1.1;
}
.masthead-sub{color:#948c78;font-size:13px;margin-top:5px;}

/* ---------- Step navigation ---------- */
.stepnav{
  position:sticky;top:0;z-index:20;
  background:rgba(244,239,228,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.stepnav ol{
  width:var(--col);margin:0 auto;padding:0;
  list-style:none;
  display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none;
}
.stepnav ol::-webkit-scrollbar{display:none;}
.stepnav a{
  display:block;
  padding:12px 10px;
  font-size:12.5px;font-weight:600;
  color:var(--neutral);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
}
.stepnav a:hover{color:var(--ink);}
.stepnav a.active{color:var(--ink);border-bottom-color:var(--ink);}
.stepnav .num{
  display:inline-block;
  width:17px;height:17px;line-height:17px;
  text-align:center;border-radius:50%;
  background:var(--parchment-dim);color:var(--ink-soft);
  font-size:10.5px;margin-right:6px;
}
.stepnav a.active .num{background:var(--ink);color:var(--parchment);}

/* ---------- Sections ---------- */
main{padding-bottom:60px;}
.loading{width:var(--col);margin:60px auto;color:var(--neutral);}
.step{
  width:var(--col);margin:0 auto;
  padding:52px 0 8px;
  scroll-margin-top:56px;
}
.step + .step{border-top:1px solid var(--line);}
.step-kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--neutral);margin-bottom:10px;
}
.step h2{
  font-family:var(--serif);
  font-size:30px;font-weight:700;line-height:1.18;
  margin:0 0 14px;
}
.step h3{
  font-family:var(--serif);
  font-size:18px;font-weight:600;
  margin:30px 0 8px;
}
.lede{font-size:16.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 8px;}
.step p{margin:0 0 14px;}

/* ---------- Premise beats ---------- */
.beat{
  border-left:3px solid var(--line);
  padding:2px 0 2px 18px;
  margin:22px 0;
}
.beat h3{margin:0 0 5px;font-size:17px;}
.beat p{margin:0;color:var(--ink-soft);}
.beat.emphasis{
  border-left-color:var(--ink);
  background:var(--parchment-dim);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 18px;
}
.beat.emphasis h3{font-size:17.5px;}

/* ---------- Rule lists ---------- */
.rules{margin:18px 0;padding:0;list-style:none;}
.rules li{
  position:relative;
  padding:0 0 0 24px;
  margin-bottom:11px;
  color:var(--ink-soft);
}
.rules li::before{
  content:"";
  position:absolute;left:4px;top:9px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-deep);
}
.closing{
  margin-top:20px;padding:14px 16px;
  background:var(--parchment-dim);
  border-radius:var(--radius);
  font-size:14.5px;color:var(--ink-soft);
}

/* ---------- Region picker ---------- */
.regions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:16px;
  margin:22px 0 10px;
}
.region{
  --accent:var(--neutral);
  --accent-deep:var(--ink);
  --accent-bg:var(--parchment-dim);
  text-align:left;
  font:inherit;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.region:hover{box-shadow:0 8px 22px rgba(28,26,23,.11);transform:translateY(-1px);}
.region[aria-pressed="true"]{
  border-color:var(--accent-deep);
  border-left-color:var(--accent-deep);
  background:var(--accent-bg);
  box-shadow:0 8px 22px rgba(28,26,23,.13);
}
.region-map{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-bottom:1px solid var(--line);
}
.region-body{padding:14px 16px 16px;}
.region-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.region-emblem{width:34px;height:34px;object-fit:contain;flex:none;}
.region-name{
  font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.2;
}
.region-start{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:8px;
}
.region-impression{font-size:14px;color:var(--ink-soft);margin:0;}
.region-check{
  margin-top:12px;font-size:12px;font-weight:700;color:var(--accent-deep);
  opacity:0;
}
.region[aria-pressed="true"] .region-check{opacity:1;}

/* ---------- Selected region detail ---------- */
.detail{
  margin-top:26px;
  border:1px solid var(--line);
  border-top:4px solid var(--accent-deep);
  border-radius:var(--radius);
  background:#fff;
  padding:22px 22px 8px;
}
.detail h3:first-child{margin-top:0;}
.pick-prompt{
  margin-top:26px;padding:26px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--neutral);
}

.factlist{margin:0 0 16px;}
.factlist dt{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--neutral);margin-top:14px;
}
.factlist dd{margin:3px 0 0;color:var(--ink-soft);}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none;}
.chips li{
  font-size:12px;
  background:var(--accent-bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 10px;
  color:var(--ink-soft);
}

/* ---------- Ancestry cards ---------- */
.ancestry{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:14px;
  background:var(--parchment);
}
.ancestry h4{
  font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 4px;
}
.ancestry .summary{color:var(--ink-soft);margin:0 0 10px;}
.ancestry .sub{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--neutral);margin:12px 0 4px;
}
.ancestry ul{margin:0;padding-left:20px;color:var(--ink-soft);}
.ancestry ul li{margin-bottom:3px;}
.note{
  font-size:13px;color:var(--neutral);font-style:italic;
  margin:10px 0 0;padding-left:12px;border-left:2px solid var(--line);
}

/* ---------- Places ---------- */
.places{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;margin-top:6px;
}
.place{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--parchment);
}
.place img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;cursor:zoom-in;}
.place-body{padding:10px 12px 12px;}
.place-name{font-family:var(--serif);font-size:15px;font-weight:600;}
.place-kind{font-size:11px;color:var(--neutral);margin-top:1px;}
.place-sum{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}

/* ---------- Companions ---------- */
.companions{display:flex;flex-direction:column;gap:16px;margin-top:6px;}
.companion{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--parchment);padding:14px;
}
.companion img{
  width:88px;height:112px;object-fit:cover;object-position:top center;
  border-radius:var(--radius);flex:none;cursor:zoom-in;
}
.companion-name{font-family:var(--serif);font-size:17px;font-weight:600;}
.companion-role{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--neutral);margin:1px 0 6px;
}
.companion p{margin:0;font-size:14px;color:var(--ink-soft);}

/* ---------- How to play ---------- */
.model{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  background:var(--ink);color:#f4efe4;
  padding:12px 16px;border-radius:var(--radius);
  font-size:14px;margin:14px 0 18px;
}
.io{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:13.5px;}
.io th{
  text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--neutral);border-bottom:1px solid var(--line);padding:0 10px 6px 0;font-weight:700;
}
.io td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.io code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px;background:var(--parchment-dim);padding:1px 5px;border-radius:3px;
}
.io .mark{width:1%;white-space:nowrap;font-weight:700;}
.io .yes .mark{color:#3f6b42;}
.io .no .mark{color:#8d3a2c;}
.io .why{display:block;font-size:12px;color:var(--neutral);margin-top:3px;}
.table-scroll{overflow-x:auto;}

.modes{display:grid;gap:10px;margin-top:8px;}
.mode{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;background:var(--parchment);
}
.mode b{font-family:var(--serif);font-size:15px;}
.mode span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px;}

/* ---------- Checklist ---------- */
.checklist{margin:16px 0 0;padding:0;list-style:none;}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.checklist .box{
  width:15px;height:15px;flex:none;margin-top:3px;
  border:1.5px solid var(--neutral);border-radius:3px;
}
.checklist .label{font-weight:600;}
.checklist .hint{display:block;font-size:13.5px;color:var(--neutral);font-weight:400;margin-top:1px;}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  padding:26px 0 40px;
}
.footer p{width:var(--col);margin:0 auto;font-size:13px;color:var(--neutral);}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,18,15,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px;gap:12px;
}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--radius);}
.lightbox-caption{color:#d8cfba;font-size:13px;}
.lightbox-close{
  position:absolute;top:16px;right:20px;
  background:none;border:none;color:#d8cfba;font-size:24px;cursor:pointer;
  line-height:1;padding:6px;
}

@media (max-width: 640px){
  .step h2{font-size:25px;}
  .companion{flex-direction:column;}
  .companion img{width:100%;height:auto;aspect-ratio:4/5;}
  .places{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
}

/* Companion with no portrait art yet. */
.companion-noart{
  width:88px;height:112px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:var(--ink);color:var(--parchment);
  font-family:var(--serif);font-size:26px;font-weight:600;
}
@media (max-width: 640px){
  .companion-noart{width:100%;height:auto;aspect-ratio:4/5;}
}

/* ---------- Maps inside the selected-region detail ---------- */
.detail-maps{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
}
.detail-maps figure{margin:0;flex:1 1 260px;max-width:340px;}
.detail-maps img{
  width:100%;display:block;cursor:zoom-in;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(28,26,23,.1);
}
.detail-maps figcaption{
  font-size:11.5px;color:var(--neutral);margin-top:6px;
}