/* THE BOOK OF THE SHOW.
   Same placard motif as the game — cream stock, ink edge, gold rule, printed in
   the dark — but here the ART leads and the words caption it. */

body.lore #app{max-width:1180px; padding-bottom:80px;}

.lore-title{margin-bottom:18px;}
.lore-title h1{font-size:clamp(32px,6vw,54px);}
.lore-title .btn{display:inline-block; margin-top:18px; text-decoration:none;}

/* ---------- the menu ---------- */
.lore-nav{
  position:sticky; top:0; z-index:20;
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  padding:10px; margin-bottom:16px;
  background:rgba(7,8,10,.92);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line2);
}
.lore-nav button{
  font:700 10px/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase;
  background:var(--paper3); color:var(--ink);
  border:1px solid var(--ink); border-radius:1px;
  padding:7px 11px; cursor:pointer;
  transition:filter .12s, box-shadow .12s, transform .08s;
}
.lore-nav button:hover{filter:brightness(1.08); box-shadow:0 0 18px -3px rgba(255,207,98,.8);}
.lore-nav button:active{transform:translateY(1px);}

/* ---------- a collapsible section ---------- */
.lore-sec{
  background:var(--plate);
  border:var(--plate-edge); border-radius:var(--radius);
  box-shadow:var(--plate-rule), var(--plate-lift);
  margin-bottom:14px; overflow:hidden;
}
.lore-sec summary{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:16px 20px; cursor:pointer; list-style:none;
  border-bottom:1px solid transparent;
}
.lore-sec summary::-webkit-details-marker{display:none;}
.lore-sec[open] summary{border-bottom-color:rgba(20,17,14,.25);}
.sec-title{
  font-family:"Playbill",Rockwell,Impact,sans-serif;
  font-size:24px; letter-spacing:.04em; color:var(--ink);
}
.sec-sub{
  font:700 10px/1 ui-monospace,monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2); flex:1;
}
/* the open/shut mark, so the whole row reads as a control */
.sec-mark{
  width:22px; height:22px; flex:0 0 22px; position:relative;
  border:1px solid var(--ink); border-radius:1px; background:var(--paper3);
}
.sec-mark::before, .sec-mark::after{
  content:""; position:absolute; background:var(--red);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.sec-mark::before{width:10px; height:2px;}
.sec-mark::after{width:2px; height:10px; transition:transform .18s;}
.lore-sec[open] .sec-mark::after{transform:translate(-50%,-50%) scaleY(0);}
.sec-body{padding:18px 20px 22px;}

/* ---------- prose ---------- */
.lore-prose{max-width:70ch; color:var(--ink);}
.lore-prose p{margin-bottom:12px;}
.lore-prose b{color:var(--red);}
.lore-prose h4{
  font:700 11px/1 ui-monospace,monospace; letter-spacing:.24em; text-transform:uppercase;
  color:var(--red); margin:20px 0 8px;
}

/* ---------- a card in the book ---------- */
.lore-card{
  display:flex; gap:16px; align-items:stretch;
  background:linear-gradient(var(--paper), var(--paper3));
  border:1px solid var(--ink); border-left:5px solid var(--ink3);
  border-radius:var(--radius); padding:12px; margin-bottom:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.45);
}
.lore-card.wide{flex-direction:row;}
.lore-card.clown{border-left-color:var(--red);}
.lore-card.danger{border-left-color:var(--red); margin-top:16px;}
.lore-body{flex:1; min-width:0;}
.lore-body h3{
  font-family:"Playbill",Rockwell,Impact,sans-serif; font-size:22px;
  letter-spacing:.03em; color:var(--ink); margin-bottom:3px;
}
.lore-sub{
  font-size:12.5px; font-style:italic; color:var(--ink2); margin-bottom:9px;
}
.lore-blurb{color:var(--ink); font-size:14px; margin-bottom:10px; max-width:62ch;}
.lore-note{
  font-size:12.5px; color:var(--ink2); margin-top:10px;
  border-top:1px solid rgba(20,17,14,.2); padding-top:10px;
}
.lore-note b{color:var(--red);}

/* THE ART LEADS. A painting that has not landed is a plate of stock, not a hole. */
.lore-art{
  flex:0 0 210px; width:210px; min-height:150px;
  border:2px solid var(--ink); border-radius:1px;
  background:
    repeating-linear-gradient(135deg, rgba(122,96,58,.10) 0 8px, transparent 8px 16px),
    linear-gradient(var(--paper2), var(--paper3));
  background-size:cover; background-position:center top;
  box-shadow:inset 0 0 0 1px var(--gold);
}
.lore-art.tall{min-height:230px;}
.lore-art.small{flex:0 0 68px; width:68px; min-height:90px;}
.lore-art.has-art{background-blend-mode:normal;}

/* ---------- facts ---------- */
.facts{display:grid; gap:5px;}
.facts > div{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.facts dt{
  font:700 9.5px/1.4 ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); min-width:112px;
}
.facts dd{font-size:13px; color:var(--ink); flex:1; min-width:0;}

/* ---------- a town's bill ---------- */
.lore-bill{list-style:none; margin:0 0 8px;}
.lore-bill li{
  display:flex; gap:10px; align-items:baseline;
  padding:5px 8px; margin-bottom:4px;
  border-left:3px solid var(--ink3); background:rgba(20,17,14,.05);
}
.lore-bill .n{
  font:700 9px/1 ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink2); min-width:56px;
}
.lore-body h4{
  font:700 10px/1 ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:12px 0 7px;
}
.recruit{
  display:flex; gap:12px; align-items:flex-start; margin-top:12px;
  padding:10px; border:1px solid var(--ink); border-left:4px solid var(--gold);
  background:rgba(255,207,98,.08);
}
.recruit b{display:block; font-size:15px;
  font-family:"Playbill",Rockwell,Impact,sans-serif; letter-spacing:.03em;}
.recruit small{display:block; color:var(--ink2); font-size:12.5px; margin-top:4px;}

/* ---------- shops ---------- */
.lore-shops{list-style:none; display:grid; gap:5px;}
.lore-shops li{
  padding:6px 9px; border-left:3px solid var(--gold);
  background:rgba(20,17,14,.05);
}
.lore-shops b{font-size:13px;}
.lore-shops small{display:block; color:var(--ink2); font-size:11.5px;}

/* ---------- the acts: art first, words underneath ---------- */
.acts{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:12px;
}
.act{
  border:2px solid var(--ink); border-radius:var(--radius);
  background:linear-gradient(var(--paper), var(--paper3));
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--tint) 70%, var(--ink)),
             0 4px 0 rgba(0,0,0,.45);
  overflow:hidden;
  transition:transform .12s, box-shadow .12s;
}
.act:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 2px var(--gold), 0 6px 0 rgba(0,0,0,.45),
             0 0 30px -6px rgba(255,207,98,.8);}
.act .lore-art{
  flex:none; width:100%; aspect-ratio:3/4; min-height:0;
  border:0; border-bottom:2px solid var(--ink); box-shadow:none;
}
.act figcaption{padding:9px 10px 11px;}
.act figcaption b{
  display:block; font-family:"Playbill",Rockwell,Impact,sans-serif;
  font-size:15px; letter-spacing:.03em; color:var(--ink);
}
.act figcaption small{display:block; color:var(--ink2); font-size:12px; margin-top:3px;}
.act-tag{
  display:block; margin-top:7px;
  font:700 8.5px/1 ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
}

.lore-foot{
  text-align:center; margin-top:26px; color:var(--dim);
  font-size:12px; font-style:italic;
}
.lore-foot code{font-family:ui-monospace,monospace; color:var(--gold); font-style:normal;}

/* ---------- the phone ---------- */
@media(max-width:700px){
  .lore-card, .lore-card.wide{flex-direction:column;}
  .lore-art{flex:none; width:100%; min-height:200px;}
  .lore-art.small{width:68px; flex:0 0 68px;}
  .sec-title{font-size:19px;}
  .sec-body{padding:14px 12px 18px;}
  .lore-sec summary{padding:13px 14px;}
  .acts{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
  .facts dt{min-width:0; flex:1 1 100%;}
}