/* The expedition road: progress beads, the road scene with its signpost planks, and the tools below. */
.rd-prog { margin: -2px 0 8px; }
.rd-prog .lbl { display: flex; justify-content: space-between; gap: 8px; font-family: var(--pixel); font-size: .82rem; color: #d9b46a; margin-bottom: 5px; }
.rd-prog .lbl i { font: italic .9rem var(--text, Vollkorn), serif; color: #cfc7b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-beads { display: flex; align-items: center; gap: 4px; }
.rd-beads .fl { display: flex; gap: 3px; flex: 1; align-items: center; }
.rd-beads .fl + .fl { margin-left: 4px; padding-left: 6px; border-left: 2px solid #5a4a2e; }
.rd-beads b { flex: 1; height: 8px; background: #26282b; box-shadow: 0 0 0 1px #0c0d0e; border-radius: 1px; }
.rd-beads b.done { background: #a8783a; }
.rd-beads b.now { background: #ffd76a; box-shadow: 0 0 0 1px #0c0d0e, 0 0 8px #ffb84a; }
.rd-beads .crown { margin-left: 6px; line-height: 0; opacity: .6; }
.rd-beads .crown.now { opacity: 1; filter: drop-shadow(0 0 4px #ffb84a); }
.rd-ico { image-rendering: pixelated; flex: none; display: block; }

.road { position: relative; line-height: 0; overflow: hidden; background: #0b0c10; box-shadow: 0 4px 0 #0c0d0e, 0 10px 18px rgba(0, 0, 0, .5); }
@media (max-width: 664px) { .road { margin: 0 -12px; } }
.road-canvas { display: block; image-rendering: pixelated; }
.road.arrive::after { content: ""; position: absolute; inset: 0; background: #050506; pointer-events: none; animation: roadIn .6s ease-out forwards; }
@keyframes roadIn { to { opacity: 0; } }

.rd-hud { position: absolute; left: 8px; top: 8px; display: flex; gap: 5px; padding: 0; background: none; border: 0; line-height: 1; }
.rd-hud div { width: 62px; display: flex; flex-direction: column; gap: 2px; background: rgba(12, 13, 14, .62); padding: 3px 4px 4px; border-radius: 3px; text-align: left; }
.rd-hud div.ko { opacity: .55; }
.rd-hud b { font: 400 10px/1 var(--pixel), serif; color: #efe9de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-hud i { display: block; height: 3px; background: #e2553f; max-width: 100%; }
.rd-hud i.pm { background: #4f8ff0; }

/* the planks: wood boards nailed to the post, each one a way to go */
.planks { position: absolute; inset: 0; pointer-events: none; }
.plank { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 14px; line-height: 1.1; text-align: left; color: #2a1608; cursor: pointer;
  background: linear-gradient(#c48e50 0, #a8743c 12%, #9a6833 88%, #7a4f24 100%); border: 2px solid #3a2410; border-radius: 2px;
  box-shadow: inset 0 1px 0 #e0aa6a, inset 0 -2px 0 #6a4220, 0 3px 0 rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.plank::before, .plank::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #3a2410; box-shadow: inset 1px 1px 0 #7a5a3a; }
.plank::before { left: 5px; } .plank::after { right: 5px; }
.plank.right { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-right: 22px; }
.plank.left { clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); padding-left: 22px; flex-direction: row-reverse; text-align: right; }
.plank.right::after { right: 18px; } .plank.left::before { left: 18px; }
.planks.up .plank { opacity: 1; transform: none; pointer-events: auto; }
.planks.up .plank:nth-child(2) { transition-delay: .08s; } .planks.up .plank:nth-child(3) { transition-delay: .16s; }
.plank:active { filter: brightness(1.1); }
.plank.picked { filter: brightness(1.2); }
.plank span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plank.left span { align-items: flex-end; }
.plank b { font: 400 17px/1 var(--pixel), serif; color: #2a1608; text-shadow: 0 1px 0 rgba(255, 220, 160, .45); white-space: nowrap; }
.plank .far { display: flex; gap: 4px; opacity: .75; filter: sepia(1) brightness(.5) contrast(1.2); }
.plank.t-elite { background: linear-gradient(#b8624a 0, #9a4636 12%, #8a3c2e 88%, #6a2a20 100%); box-shadow: inset 0 1px 0 #e08a6a, inset 0 -2px 0 #5a2018, 0 3px 0 rgba(0, 0, 0, .45); }
.plank.t-elite b { color: #fff0e0; text-shadow: 0 1px 0 #3a0e06; }
.plank.t-boss { background: linear-gradient(#e8c06a 0, #c99a45 12%, #b8883a 88%, #8a6224 100%); }
.plank.echo { background: linear-gradient(#8a7ab8 0, #6a5a9a 12%, #5e4e8a 88%, #42346a 100%); } .plank.echo b { color: #fff; text-shadow: 0 1px 0 #20163a; }

.road-tools { display: flex; gap: 8px; margin-top: 10px; }
.rd-tool { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 15px var(--pixel), serif; color: #efe9de; padding: 9px 6px;
  background: linear-gradient(#4a4d52, #34373b); border: 2px solid #0c0d0e; border-radius: 4px; box-shadow: inset 0 2px 0 #62666c, inset 0 -3px 0 #23252a, 0 3px 0 #0c0d0e; }
.rd-tool:active { transform: translateY(2px); }

.curtain { position: fixed; inset: 0; z-index: 60; background: #050506; opacity: 0; transition: opacity .3s; pointer-events: none; }
.curtain.on { opacity: 1; pointer-events: auto; }

/* the bag */
.bag-item { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.bag-head { display: flex; gap: 10px; align-items: center; }
.bag-head b { display: block; font-family: var(--pixel); font-weight: 500; } .bag-head small { color: var(--muted); }
.bag-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin-top: 8px; }
.bag-hero { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; color: var(--text, #efe9de); background: linear-gradient(#4a4d52, #34373b); border: 2px solid #0c0d0e; border-radius: 4px; box-shadow: inset 0 2px 0 #62666c, 0 2px 0 #0c0d0e; }
.bag-hero small { font: 400 11px/1.3 Digits, monospace; text-align: center; }
.bag-hero:disabled { opacity: .4; }
.bag-hero.ko .sprite, .bag-hero.ko canvas { filter: grayscale(1); }
.bag-item > .btn { margin-top: 8px; }

/* the parchment map */
.pc { position: relative; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 2px #2a1a0a, 0 10px 24px rgba(0, 0, 0, .6); }
.pc canvas { width: 100%; display: block; image-rendering: pixelated; }
.pc-lbl { position: absolute; transform: translate(-50%, -50%); font: 400 13px/1.1 var(--pixel), serif; color: #4a2c12; text-align: center; white-space: nowrap; pointer-events: none; }
.pc-lbl small { display: block; font: italic 13px Vollkorn, serif; color: #6a4a2a; }
.pc-lbl.fog { opacity: .55; }
.pc-lbl.boss { color: #7a1a12; }
.pc-pin { position: absolute; transform: translate(-50%, -100%); font: 400 11px/1 var(--pixel), serif; color: #fff4dc; background: #8a2a1a; padding: 3px 6px 2px; border-radius: 2px; border: 2px solid #3a0e06; white-space: nowrap; pointer-events: none; }
.pc-here { position: absolute; left: 50%; width: 1px; height: 1px; }

/* the stops on the road: a campfire, a merchant's cart (stop_scene.js) */
.road.stop { margin-bottom: 10px; }
.stop-say { position: absolute; left: 0; top: 0; max-width: 72%; padding: 7px 10px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 6px;
  font: 400 .92rem/1.3 var(--body, Georgia, serif); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.stop-say::after { content: ""; position: absolute; left: var(--tail, 70%); bottom: -8px; border: 6px solid transparent; border-top-color: #1c1418; border-bottom: 0; transform: translateX(-6px); }
.stop-say.on { opacity: 1; transform: none; }
.stop-actions { transition: opacity .3s; }
.stop-actions.wait { opacity: 0; pointer-events: none; }
.merchant-sheet { display: grid; gap: 8px; }

/* the campfire: hero plates above the scene, choices as signs planted by the fire (run.js renderCampfire) */
.road.stop.camp .cp-ui { position: absolute; inset: 0; pointer-events: none; line-height: 1.3; font-size: 1rem; white-space: normal; transition: opacity .3s; }
.road.stop.camp.lifting .cp-ui { opacity: 0; }
.road.stop.camp.lifting .cp-ui * { pointer-events: none !important; }
.cp-plates { position: absolute; left: 6px; right: 6px; top: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cp-plate, button.cp-plate { pointer-events: auto; display: grid; width: 100%; min-width: 0; gap: 3px; margin: 0; padding: 4px 5px 5px; text-align: left; color: var(--ink); font: inherit;
  background: rgba(24, 18, 22, .82); border: 2px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 0 1px #5a4636, 0 2px 0 rgba(0, 0, 0, .4); }
.cp-plate.ko { opacity: .7; }
.cp-plate.cp-can { cursor: pointer; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 2px rgba(242, 155, 58, .35); animation: cpPick 1.2s ease-in-out infinite; }
.cp-plate.cp-can:active { transform: translateY(1px); }
@keyframes cpPick { 50% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 4px rgba(242, 155, 58, .2); } }
.cp-who { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cp-who i { position: relative; flex: none; display: block; margin: -2px 0 -2px -1px; }
.cp-who i > * { display: block; }
.cp-who i small { position: absolute; right: -5px; bottom: -3px; padding: 1px 2px 0; font: 400 .6rem/1 var(--pixel); font-style: normal; color: #2a1a0e; background: var(--gold); border-radius: 2px; }
.cp-who b { font: 400 .74rem/1.1 var(--pixel); color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.cbar { position: relative; height: 12px; background: #120e12; border-radius: 2px; overflow: hidden; }
.cbar b, .cbar u { position: absolute; top: 0; bottom: 0; left: 0; }
.cbar b { transition: width .4s; }
.cbar u { opacity: .45; animation: cpGain 1.1s ease-in-out infinite; }
.cbar.pv b, .cbar.pv u { background: var(--pv); }
.cbar.pm b, .cbar.pm u { background: var(--pm); }
.cbar.xp b, .cbar.xp u { background: var(--xp); }
@keyframes cpGain { 50% { opacity: .8; } }
.cbar > span { position: relative; display: block; padding-left: 4px; font: 700 .62rem/12px var(--text, sans-serif); color: #fff; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.cbar em { font-style: normal; color: #b9ffb0; }
.cp-note { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); width: min(78%, 330px); pointer-events: auto; text-align: center;
  padding: 7px 10px 8px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.cp-note p { margin: 0; font: 400 .9rem/1.3 var(--body, Georgia, serif); }
.cp-note .btn { margin-top: 6px; }
.cp-note .levelup, .cp-note > div { margin-top: 4px; }
.cp-signs { position: absolute; left: 6px; right: 6px; bottom: 8px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cp-sign { pointer-events: auto; padding: 5px 9px 6px; font: 400 .78rem/1.1 var(--pixel); color: var(--gold); white-space: nowrap;
  background: #4a3220; border: 2px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 0 1px #7a5634, inset 0 2px 0 #8a6440, 0 3px 0 rgba(0, 0, 0, .45); }
.cp-sign:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px #7a5634, 0 1px 0 rgba(0, 0, 0, .45); }
.cp-sign.on { color: #2a1a0e; background: var(--gold); box-shadow: inset 0 0 0 1px #ffd08a, 0 3px 0 rgba(0, 0, 0, .45); }
.cp-sign.back { color: #e8dcc4; background: #2e2a30; box-shadow: inset 0 0 0 1px #4a4652, 0 3px 0 rgba(0, 0, 0, .45); }
.cp-sign.go { font-size: .86rem; padding: 6px 14px 7px; }
.cp-note .levelup { margin: 5px 0 0; padding: 3px 6px; background: rgba(60, 140, 70, .14); border-color: rgba(60, 140, 70, .45); text-align: center; }
.cp-note .levelup b { color: #2f6e38; font-size: .8rem; }
.cp-note .levelup .gain, .cp-note .levelup .newskill { color: #2a1a0e; }
.cp-plate.on { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 3px rgba(242, 155, 58, .45); animation: none; }
.cp-plate { position: relative; }
.cp-sign.ok { animation: cpOk 1s ease-in-out infinite; }
@keyframes cpOk { 50% { box-shadow: inset 0 0 0 1px #ffd08a, 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 4px rgba(242, 155, 58, .35); } }
.road.stop > .cp-signs { z-index: 2; }
/* the threshold of a guardian (skull mark below) */
:root { --skull: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 9%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%222%22 y=%220%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%220%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%220%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%220%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%220%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%221%22 width=%221%22 height=%221%22/%3E%3Crect x=%220%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%228%22 y=%222%22 width=%221%22 height=%221%22/%3E%3Crect x=%220%22 y=%223%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%223%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%223%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%223%22 width=%221%22 height=%221%22/%3E%3Crect x=%228%22 y=%223%22 width=%221%22 height=%221%22/%3E%3Crect x=%220%22 y=%224%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%224%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%224%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%224%22 width=%221%22 height=%221%22/%3E%3Crect x=%228%22 y=%224%22 width=%221%22 height=%221%22/%3E%3Crect x=%220%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%228%22 y=%225%22 width=%221%22 height=%221%22/%3E%3Crect x=%221%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%227%22 y=%226%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%227%22 width=%221%22 height=%221%22/%3E%3Crect x=%223%22 y=%227%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%227%22 width=%221%22 height=%221%22/%3E%3Crect x=%225%22 y=%227%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%227%22 width=%221%22 height=%221%22/%3E%3Crect x=%222%22 y=%228%22 width=%221%22 height=%221%22/%3E%3Crect x=%224%22 y=%228%22 width=%221%22 height=%221%22/%3E%3Crect x=%226%22 y=%228%22 width=%221%22 height=%221%22/%3E%3C/svg%3E"); }
/* the threshold of a guardian (guardian_scene.js): the way in is a red sign; its card says how hard it is */
.cp-sign.danger { color: #ffd8cc; background: #5a1410; box-shadow: inset 0 0 0 1px #c0392b, inset 0 2px 0 #7a2018, 0 3px 0 rgba(0, 0, 0, .45); }
.cp-sign.danger b { color: #ff9a80; font-weight: 400; margin-right: 4px; }
.gd-card { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(92%, 340px); z-index: 3; pointer-events: auto; line-height: 1.3; font-size: 1rem; white-space: normal;
  padding: 10px 12px 12px; background: #f4ecd8; color: #2a1a0e; border: 2px solid #1c1418; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.gd-card h3 { margin: 0 0 2px; font: 400 1rem/1.15 var(--pixel); color: #5a1410; }
.gd-card .gd-where { margin: 0; font-size: .82rem; color: #6a5a48; font-style: italic; }
.gd-skulls { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; font: 400 .8rem/1 var(--pixel); color: #8a1a14; }
.gd-skulls i { width: 14px; height: 14px; background: #8a1a14; -webkit-mask: var(--skull) center / contain no-repeat; mask: var(--skull) center / contain no-repeat; }
.gd-card ul { margin: 4px 0 8px; padding-left: 18px; font-size: .86rem; }
.gd-card .row-buttons { margin-top: 4px; }
/* the chest on the road (run.js renderTreasure): what it held, on a note above it */
.road.stop > .chest-found { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chest-note { position: absolute; left: 0; top: 0; width: min(70%, 260px); text-align: center; padding: 7px 10px 8px; background: #f4ecd8; color: #2a1a0e;
  border: 2px solid #1c1418; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); animation: chest-in .35s ease-out; }
.chest-note::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -8px; border: 6px solid transparent; border-top-color: #1c1418; border-bottom: 0; transform: translateX(-6px); }
.chest-note h3 { margin: 0 0 3px; font: 400 .95rem/1.2 var(--pixel); color: #8a4b12; }
.chest-note p { margin: 1px 0; font: 600 .92rem/1.3 var(--body, Georgia, serif); }
.chest-note p.good { color: #2f6e38; }
.chest-note p.bad { color: #a22633; }
.chest-note.cursed { background: #e6dcef; }
.chest-note.cursed h3 { color: #68386c; }
/* the campfire's picking (run.js renderCampfire): a pastille under each hero who can, a round tick over the sign */
.cp-slot { position: relative; display: inline-flex; }
.cp-tick { position: absolute; left: 50%; bottom: calc(100% + 6px); width: 34px; height: 34px; margin-left: -17px; padding: 0; pointer-events: auto;
  border: 2px solid var(--edge); border-radius: 50%; background: #3a3436; box-shadow: inset 0 0 0 1px #5a4e4a, 0 3px 0 rgba(0, 0, 0, .45); opacity: .55; }
.cp-tick i, .cp-pastille i { position: absolute; left: 50%; top: 50%; width: 8px; height: 14px; margin: -9px 0 0 -5px; border: solid #8a7e72; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.cp-tick.ready { background: var(--gold); box-shadow: inset 0 0 0 1px #ffd08a, 0 3px 0 rgba(0, 0, 0, .45); opacity: 1; animation: cpTick 1s ease-in-out infinite; }
.cp-tick.ready i { border-color: #2a1a0e; }
.cp-tick:active { transform: translateY(2px); }
@keyframes cpTick { 50% { box-shadow: inset 0 0 0 1px #ffd08a, 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 5px rgba(242, 155, 58, .35); } }
.cp-pastille { position: absolute; left: 50%; bottom: -13px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 2px solid var(--gold);
  background: rgba(24, 18, 22, .9); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); animation: cpPick 1.2s ease-in-out infinite; }
.cp-pastille i { width: 5px; height: 9px; margin: -6px 0 0 -3px; border-width: 0 3px 3px 0; border-color: transparent; }
.cp-pastille.on { background: var(--gold); animation: none; }
.cp-pastille.on i { border-color: #2a1a0e; }
.cp-plate .cp-apt { display: block; margin-top: 1px; font: 400 .66rem/1.2 var(--pixel); color: #d9b8ff; text-align: center; }
/* the bag on the road (run.js openBag): the party pinned on top, the items as tiles */
.bag-top { position: sticky; top: -18px; z-index: 3; margin: -18px -16px 0; padding: 18px 16px 8px; background: linear-gradient(var(--panel), var(--panel) 85%, rgba(0, 0, 0, 0)); }
.bag-party { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.bag-who { position: relative; display: grid; gap: 3px; min-width: 0; padding: 4px 5px 5px; text-align: left; color: var(--ink); font: inherit;
  background: rgba(24, 18, 22, .82); border: 2px solid var(--edge); border-radius: 3px; box-shadow: inset 0 0 0 1px #5a4636, 0 2px 0 rgba(0, 0, 0, .4); }
.bag-who:disabled { opacity: 1; cursor: default; }
.bag-who.dim { opacity: .45; }
.bag-who.ko .cp-who i { filter: grayscale(1); }
.bag-who.can { cursor: pointer; box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 2px rgba(242, 155, 58, .35); animation: cpPick 1.2s ease-in-out infinite; }
.bag-ails { display: flex; flex-wrap: wrap; gap: 3px; }
.bag-ail { display: inline-flex; align-items: center; gap: 3px; font: 400 .62rem/1.2 var(--pixel); color: #c8e6a0; }
.bag-ail img, .bag-ail .st-glyph { width: 12px; height: 12px; }
.bag-hint { margin: 8px 0 0; font-size: .9rem; min-height: 2.6em; }
.bag-hint b { font-family: var(--pixel); font-weight: 400; color: var(--gold); }
.bag-hint small { display: block; color: var(--muted); font-size: .8rem; }
.bag-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.bag-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; color: var(--ink); font: inherit;
  background: linear-gradient(#4a4d52, #34373b); border: 2px solid #0c0d0e; border-radius: 4px; box-shadow: inset 0 2px 0 #62666c, 0 2px 0 #0c0d0e; }
.bag-tile small { font: 400 .62rem/1.15 var(--pixel); text-align: center; }
.bag-tile.on { background: linear-gradient(#7a5634, #4a3220); box-shadow: inset 0 0 0 2px var(--gold), 0 2px 0 #0c0d0e; }
.bag-n { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--gold); color: #2a1a0e;
  font: 400 .66rem/16px var(--pixel); font-style: normal; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.offer-icon { position: relative; flex: none; }
.offer-icon .bag-n { top: -5px; right: -7px; }