/* The Story So Far (screens/bridge.js): a sheet with the dungeon's colour, a timeline of parts, a "now" line and Continue.
   Builds on game.css sheets, buttons and the --ink / --cream tokens. Works at 360x640: no horizontal scroll, the parts scroll
   and Continue stays pinned below them. */
.sheet.bridgesheet { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bridge { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; min-width: 0; color: var(--ink); }
.bbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bbody::-webkit-scrollbar { display: none; }
.bgo { flex: none; padding: 10px 16px calc(14px + var(--safe-bottom)); background: linear-gradient(rgba(255,247,230,0), var(--cream) 30%); }

/* the title card, in the dungeon's colour (a tint, so dark and light colours both keep the ink readable) */
.bhead { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 18px; background: color-mix(in srgb, var(--c) 32%, #fff); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
.bmedal { flex: none; width: 62px; height: 62px; display: block; }
.bmedal svg { display: block; width: 100%; height: 100%; }
.bkicker { font: 900 11px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); }
.btitle { font-size: 26px; line-height: 1.05; margin: 3px 0 4px; overflow-wrap: anywhere; }
.bwhere { font: 800 12px/1.25 var(--body); color: var(--ink2); }

/* the parts, in time order, on a road-coloured line */
.bparts { list-style: none; margin: 0; padding: 0; position: relative; }
.bpart { position: relative; padding: 0 0 18px 28px; }
.bpart::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: -6px; width: 4px; border-radius: 2px; background: var(--c); }
.bpart::after { content: ""; position: absolute; left: 1px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px var(--c); }
.bbadge { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 3px 12px 3px 5px; margin: 0 0 7px; border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; font: 900 13px/1.1 var(--body); color: var(--ink); text-align: left; }
.bpart.scripture .bbadge { background: #e4efff; }
.bpart.history .bbadge { background: #ffefc7; }
.bbadge svg { flex: none; width: 24px; height: 24px; }
.bbadge i { font-style: normal; font-weight: 800; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bbadge i::after { content: " \203A"; }
.bpart.open .bbadge i::after { content: " \2039"; }
.bbadge:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.btext { margin: 0; font: 800 17px/1.5 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.bsrc { margin: 8px 0 0; padding: 7px 10px; border-left: 5px solid var(--c); border-radius: 4px 10px 10px 4px; background: #fff; font: 800 13.5px/1.4 var(--body); color: var(--ink2); overflow-wrap: anywhere; }

/* where the road leads */
.bnow { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 8px; padding: 11px 12px; background: #fff3c4; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.bflag { flex: none; width: 28px; }
.bflag svg { display: block; width: 100%; }
.bnow small { display: block; font: 900 11px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.bnow b { display: block; font: 800 17px/1.4 var(--body); overflow-wrap: anywhere; }

/* a gentle arrival: each part fades up in turn */
.bpart, .bnow { animation: bridgein .42s both cubic-bezier(.2,.9,.3,1.1); animation-delay: calc(var(--i, 0) * 110ms + 140ms); }
@keyframes bridgein { from { opacity: 0; transform: translateY(10px); } }
.sheet.bridgesheet.calm, .sheet.bridgesheet.calm .bpart, .sheet.bridgesheet.calm .bnow { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sheet.bridgesheet, .sheet.bridgesheet .bpart, .sheet.bridgesheet .bnow { animation: none; }
  .bbadge:active { transform: none; }
}

/* the button on the Journey's dungeon plaque */
.mapbtn.bridgebtn { min-width: 60px; max-width: 76px; }
.mapbtn.bridgebtn svg { width: 24px; height: 24px; }
.mapbtn.bridgebtn span { max-width: 62px; text-align: center; line-height: 1.02; }
@media (max-width: 340px) { .btitle { font-size: 23px; } .btext, .bnow b { font-size: 16px; } }