/* High seas theme. A layer over ship.css: the world speaks on parchment and sailcloth, and the
   ship's own furniture is tarred oak with brass. Display lettering is set in ui.css; reading text stays in
   the serif so every line is still easy to read. */
:root {
  --pirate: 'IM Fell English SC', Georgia, serif;
  --parch: #eedcb3; --parch-dark: #d9bf8a; --ink: #2a1d10; --ink-soft: #5c4630; --rule: rgba(60, 38, 16, .22);
  --brass: #c9a24a; --brass-dark: #8a6424; --blood: #9e2a1c;
  --glass: rgba(34, 22, 13, .86); --line: rgba(201, 162, 74, .45);
  --sail: #f1e8d2; --sail-shade: #d8ccb0;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .16 0 0 0 0 .06 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --wood: repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,220,160,.04) 9px 11px, transparent 11px 23px), linear-gradient(180deg, #3b2716, #24170d);
  --canvas: repeating-linear-gradient(0deg, rgba(90,70,40,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90,70,40,.06) 0 1px, transparent 1px 3px), linear-gradient(170deg, #fbf4e2, var(--sail) 55%, var(--sail-shade));
}
body { background: #0c0906; }

/* Tarred oak and brass for everything that belongs to the ship. */
button { font: 400 16px/1 var(--pirate); letter-spacing: .03em; color: #f6e7c3; background: var(--wood); border: 1.5px solid var(--brass-dark); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,160,.18), 0 4px 10px rgba(0,0,0,.35); text-shadow: 0 1px 0 #000; backdrop-filter: none; }
button:hover { border-color: var(--brass); color: #fff4d6; }
button.primary { background: linear-gradient(180deg, #b8321f, #7c1d11); border-color: var(--brass); color: #fff1cf; }
button.primary:hover { background: linear-gradient(180deg, #cc3b26, #8c2214); }
kbd { font: 800 11px/1 var(--sans); background: radial-gradient(circle at 35% 30%, #f5dc92, var(--brass) 55%, var(--brass-dark)); color: #2a1a08; border-radius: 5px; box-shadow: 0 2px 0 #4a3210, inset 0 1px 0 rgba(255,255,255,.5); text-shadow: none; }
.eyebrow { font: 400 16px/1.3 var(--pirate); letter-spacing: .1em; color: var(--brass); }

/* Parchment: messages, panels, results and the log. */
.paper {
  color: var(--ink); border-radius: 4px; border: 0;
  background: var(--grain), radial-gradient(ellipse at 20% 15%, rgba(255,250,230,.8), transparent 45%), radial-gradient(ellipse at 85% 90%, rgba(150,95,35,.28), transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(160,110,50,.12), transparent 35%), linear-gradient(160deg, #f3e4c1, var(--parch) 50%, var(--parch-dark));
  box-shadow: inset 0 0 38px rgba(110, 62, 18, .55), inset 0 0 4px rgba(80, 40, 10, .6), 0 18px 44px rgba(0, 0, 0, .5);
}
.paper::before { left: 8px; right: 8px; top: 8px; bottom: 8px; height: auto; border-radius: 2px; background: none; border: 1.5px solid rgba(60,38,16,.32); pointer-events: none; }
.paper::after { opacity: .45; }
.kicker, #panel-kicker, .dialogue .who, .card .kind { font-family: var(--pirate); font-weight: 400; letter-spacing: .06em; text-transform: none; }
.kicker { font-size: 16px; } #panel-kicker { font-size: 17px; } .card .kind { font-size: 14px; color: #7a5a34; }

/* Screens */
#loading { background: radial-gradient(ellipse at 50% 60%, #2a3b44, #0c0906 70%); }
#loading h1, .title-card h1 { font: 400 clamp(52px, 8.5vw, 108px)/.92 var(--pirate); letter-spacing: .01em; color: #f6e2b0; text-shadow: 0 3px 0 #5a3a14, 0 8px 30px rgba(0,0,0,.6); }
#loading h1 em, .title-card h1 em { font-family: var(--pirate); font-style: normal; color: var(--brass); }
.title-card.small h1 { font-size: 66px; }
.title-card.wide h1 { font-size: clamp(40px, 5.5vw, 68px); }
#title { background: linear-gradient(90deg, rgba(12,8,4,.9) 0%, rgba(12,8,4,.58) 45%, rgba(12,8,4,0) 75%); }
.lede { color: #efdcb4; }
.title-actions button { font-size: 21px; padding: 13px 26px; }
.keys { border-top: 1px solid var(--line); }
.keys dt { font: 400 18px/1 var(--pirate); letter-spacing: .04em; color: var(--brass); }
.fine { color: rgba(239,220,180,.6); }
.bar i { background: linear-gradient(90deg, var(--brass-dark), var(--brass)); }

/* HUD chrome in oak and brass. */
.brand, #status, #gauge, #meter, #finds, #prompt, .top-actions button { background: var(--wood); border: 1.5px solid var(--brass-dark); box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.15), 0 8px 22px rgba(0,0,0,.4); backdrop-filter: none; }
.brand { font-family: var(--pirate); font-weight: 400; color: var(--brass); }
#prompt { font: 400 20px/1 var(--pirate); letter-spacing: .02em; color: #f6e7c3; border-color: var(--brass); }
#prompt kbd { font-size: 13px; }
.g-mode, .sbar span, #meter span { font-family: var(--pirate); font-weight: 400; font-size: 15px; letter-spacing: .05em; color: var(--brass); }
.sbar span { font-size: 14px; opacity: 1; }
.sbar i, #meter i { background: rgba(0,0,0,.45); box-shadow: inset 0 1px 3px rgba(0,0,0,.7); border: 1px solid rgba(201,162,74,.3); }
#level-chip { font: 400 16px/1.3 var(--pirate); color: #9ff3e8; }
#level-chip small { font: 12px/1.35 var(--sans); }
#finds { font: 400 15px/1 var(--pirate); letter-spacing: .03em; }
#finds b { color: var(--brass); }
#minimap { border: 6px solid var(--brass-dark); box-shadow: 0 0 0 2px #2b1b0b, 0 0 0 4px var(--brass), 0 10px 30px rgba(0,0,0,.5); }
#controls-hint { background: rgba(20,13,7,.72); border: 1px solid rgba(201,162,74,.25); }

/* The objective is a sail on its yard: stitched canvas that fills with the wind. */
.mission { position: relative; color: var(--ink); background: var(--canvas); border: 0; border-radius: 3px 3px 40% 40% / 3px 3px 14px 14px; padding: 12px 28px 15px; box-shadow: inset 0 -10px 18px rgba(120,95,55,.22), 0 10px 26px rgba(0,0,0,.4); transform-origin: 50% 0; animation: billow 5s ease-in-out infinite; }
.mission::before { content: ''; position: absolute; inset: 7px 9px 8px; border: 1.5px dashed rgba(110,80,40,.35); border-radius: inherit; pointer-events: none; }
.mission::after { content: ''; position: absolute; left: -8px; right: -8px; top: -5px; height: 7px; border-radius: 4px; background: linear-gradient(180deg, #7a5530, #3a2614); box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.mission span { font: 400 17px/1 var(--pirate); letter-spacing: .05em; color: var(--blood); }
.mission p { font: italic 17px/1.35 var(--serif); font-weight: 500; color: var(--ink); }
.mission.flash { animation: billow 5s ease-in-out infinite, gust 1.4s ease; }
@keyframes billow { 50% { scale: 1 1.035; } }
@keyframes gust { 25% { scale: 1.03 1.1; } 60% { scale: 1 .97; } }

/* Toasts are pennants run up the mast. */
.toast { --accent: #1b6f68; color: var(--ink); background: var(--canvas); border-radius: 2px; padding: 8px 36px 8px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); box-shadow: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); font: italic 15.5px/1.3 var(--serif); font-weight: 600; transform-origin: 0 50%; animation: hoist .5s cubic-bezier(.2,.9,.3,1.2), flutter 2.4s ease-in-out .5s infinite; }
.toast .ico { border-radius: 3px; background: var(--accent); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); font-style: normal; }
.toast.evidence { --accent: #b07a14; } .toast.warn { --accent: var(--blood); } .toast.find { --accent: #5a3f9e; } .toast.tool { --accent: #1b6f68; }
@keyframes hoist { from { translate: 0 -30px; scale: .2 1; opacity: 0; } }
@keyframes flutter { 50% { scale: 1.012 .97; } }

/* Dialogue: parchment with a wax-seal portrait. */
.dialogue .avatar { background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 60%, #000)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, #000), 0 4px 0 rgba(0,0,0,.25), inset 0 -4px 8px rgba(0,0,0,.35); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; }
.dialogue .avatar span { font: 400 32px/1 var(--pirate); color: #fbe9d0; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
.dialogue .who { font-size: 17px; color: color-mix(in srgb, var(--accent) 75%, #000); }
.dialogue .line { color: var(--ink); }
.dialogue .more { color: var(--ink-soft); }
.dialogue.radio .line { font-family: 'Courier New', monospace; }

/* Discovery: an unrolled scroll with a rod top and bottom. */
#discovery { padding: 32px 30px 28px; border-radius: 2px; transform-origin: 50% 0; animation: unroll .75s cubic-bezier(.2,.9,.3,1.05); }
#discovery .disc-icon { font: 400 28px/1 var(--pirate); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, #000), 0 8px 18px rgba(0,0,0,.35); margin-top: -54px; }
#discovery h3 { font: 400 36px/1.05 var(--pirate); letter-spacing: .01em; color: #3a220c; }
#discovery .note { color: #3a2a18; }
#discovery .kicker { color: color-mix(in srgb, var(--accent) 80%, #000); }
#discovery .rod { position: absolute; left: -14px; right: -14px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #e9cf98, #b48a4c 45%, #6d4c24); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
#discovery .rod.top { top: -8px; } #discovery .rod.bottom { bottom: -8px; }
@keyframes unroll { from { clip-path: inset(0 -20px 100% -20px); } to { clip-path: inset(-60px -20px -20px -20px); } }

/* Panels, cards and results on parchment. */
#panel h2, .result h2 { font: 400 34px/1.05 var(--pirate); letter-spacing: .01em; color: #3a220c; }
#panel p { color: #3f2e1c; }
#panel-close { font-size: 15px; color: var(--ink); background: rgba(255,245,220,.5); border-color: rgba(60,38,16,.35); box-shadow: none; text-shadow: none; }
.card { background: rgba(255,248,228,.55); border-color: rgba(90,60,30,.3); border-radius: 3px; }
.card b { font-family: var(--serif); font-size: 16px; }
.card button { color: #f6e7c3; background: var(--wood); border-color: var(--brass-dark); }
.card.on { border-color: #1b6f68; box-shadow: inset 4px 0 0 #1b6f68, 0 4px 14px rgba(27,111,104,.18); }
.card.on button { background: linear-gradient(180deg, #23857c, #145650); border-color: var(--brass); color: #fff; }
#panel .actions button { color: #f6e7c3; background: var(--wood); border-color: var(--brass-dark); font-size: 18px; }
#panel .actions button.primary { background: linear-gradient(180deg, #b8321f, #7c1d11); border-color: var(--brass); }
#panel .note { background: rgba(255,245,215,.6); border: 1px solid rgba(90,60,30,.2); }
#panel ul.log li { background: rgba(255,248,228,.6); }
.result .stamp { font-family: var(--pirate); font-weight: 400; font-size: 21px; letter-spacing: .05em; border-radius: 50% 44% 52% 46%; border-width: 3px; padding: 10px 14px; }
.lesson .kicker { font-size: 18px; }
dialog { background: var(--grain), linear-gradient(160deg, #f3e4c1, var(--parch-dark)); color: var(--ink); border-radius: 4px; box-shadow: inset 0 0 30px rgba(110,62,18,.5); }
dialog h2 { font: 400 30px/1.1 var(--pirate); }
#reflect label { font: 400 21px/1.3 var(--pirate); color: #f6e2b0; letter-spacing: .02em; }
#reflect textarea { background: rgba(30,20,10,.55); border-color: var(--line); color: #f6e7c3; }

/* Markers */
.marker b { font: 400 16px/1.2 var(--pirate); letter-spacing: .03em; background: rgba(34,22,13,.85); border-color: rgba(201,162,74,.55); color: #f6e7c3; }
.marker.label b { font: 600 12px/1.2 var(--sans); }

/* Cannons: reload gauges under the helm readout. */
#cannons { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 400 15px/1 var(--pirate); color: var(--brass); letter-spacing: .04em; }
#cannons .side { display: flex; align-items: center; gap: 5px; }
#cannons .side i { width: 40px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; position: relative; border: 1px solid rgba(201,162,74,.35); }
#cannons .side i b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7c1d11, #e0772e); }
#cannons .side.ready i b { background: linear-gradient(90deg, var(--brass-dark), #f5dc92); }
#cannons .ammo { display: block; width: 100%; font: 600 11px/1.25 var(--sans); color: #efdcb4; letter-spacing: 0; }

/* Collecting: the found item flies to the tally, which swells as it lands. */
.collect-fly { position: fixed; z-index: 12; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.95), rgba(255,190,80,.5) 45%, transparent 70%); font: 400 26px/1 var(--pirate); color: #3a220c; }
#finds.bump { animation: tally .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes tally { 40% { scale: 1.35; box-shadow: 0 0 0 6px rgba(255,207,107,.35), 0 0 24px rgba(255,207,107,.8); } }

@media (max-width: 760px) {
  .mission { padding: 9px 14px 12px; }
  .mission p { font-size: 14px; }
  #loading h1, .title-card h1 { font-size: 52px; }
}

/* The Mind's harness: a column on the left, sockets above the hull and trust bars. */
#leftcol { position: absolute; left: 16px; top: 76px; width: 236px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
#leftcol #status { position: static; width: auto; }
#harness { background: var(--wood); border: 1.5px solid var(--brass-dark); border-radius: 12px; padding: 9px 11px 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.15), 0 8px 22px rgba(0,0,0,.4); cursor: pointer; }
#harness span { display: flex; justify-content: space-between; font: 400 14px/1 var(--pirate); letter-spacing: .05em; color: var(--brass); }
#harness span b { font-weight: 400; color: #f6e2b0; }
#harness .sockets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 8px; }
.socket { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 400 15px/1 var(--pirate); font-style: normal; color: #2a1a08; background: radial-gradient(circle at 35% 30%, #3a2a1a, #120b05); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 0 0 1.5px #5a4220; }
.socket.got { background: radial-gradient(circle at 35% 30%, #fff1c2, #e8b84e 45%, #8a6424); box-shadow: 0 0 0 1.5px #f5dc92, 0 0 10px rgba(255,207,107,.55); }
.socket.next { color: #9ff3e8; background: radial-gradient(circle at 35% 30%, #1d4a48, #0b1f1e); box-shadow: 0 0 0 1.5px #63fff0; animation: nextsock 1.6s ease-in-out infinite; }
.socket.fresh { animation: seat .8s cubic-bezier(.3,1.7,.5,1); }
@keyframes nextsock { 50% { box-shadow: 0 0 0 1.5px #63fff0, 0 0 12px rgba(99,255,240,.6); } }
@keyframes seat { from { scale: 2.2; filter: brightness(2); } }
#panel .harness-list .card.got { border-color: #b8893b; box-shadow: inset 4px 0 0 #c9a24a; }
#panel .harness-list .card.next { border-color: #1b6f68; box-shadow: inset 4px 0 0 #1b6f68; }
#panel .harness-list .card.locked { opacity: .6; }
#panel .harness-list .card i { font-style: normal; font: 400 22px/1 var(--pirate); color: #8a6424; grid-row: 1 / span 3; grid-column: 2; }
#panel .harness-list .lesson-line { grid-column: 1; font: 600 13px/1.35 var(--sans); color: #6b3e12; }
@media (max-width: 760px) { #leftcol { top: 120px; left: 10px; width: 180px; } #harness .sockets { gap: 3px; } .socket { font-size: 12px; } }

/* The Unbound: a black-and-red bar under the objective sail. */
#bossbar { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); text-align: center; padding: 8px 14px 9px; border-radius: 10px; background: linear-gradient(180deg, #2a0a10, #12060a); border: 1.5px solid #8a1c2c; box-shadow: 0 0 0 1px #000, 0 0 22px rgba(255,45,85,.35); }
#bossbar b { display: block; font: 400 20px/1 var(--pirate); letter-spacing: .12em; color: #ff8aa0; text-shadow: 0 0 10px rgba(255,45,85,.6); }
#bossbar .phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 7px 0 5px; }
#bossbar .phases i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,138,160,.35); }
#bossbar .phases i.done { background: rgba(255,255,255,.18); box-shadow: none; }
#bossbar .phases i.now { background: linear-gradient(90deg, #ff2d55, #ff8aa0); animation: bosspulse 1s ease-in-out infinite; }
#bossbar.shielded .phases i.now { background: linear-gradient(90deg, #3aa9b0, #8ffcff); }
#bossbar small { font: 600 12px/1.3 var(--sans); color: #f3c9d0; }
@keyframes bosspulse { 50% { opacity: .55; } }
/* The refit: a night passes. */
.refit-veil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #05070a; animation: veil 1.2s ease both; }
.refit-veil p { font: 400 clamp(22px, 3.2vw, 34px)/1.3 var(--pirate); color: #f6e2b0; max-width: 30ch; text-align: center; letter-spacing: .02em; }
@keyframes veil { from { opacity: 0; } }

/* Onboarding: choose or build a captain. Oak and brass, like the rest of the ship. */
.keys-box { margin-top: 22px; }
.keys-box summary { font: 400 18px/1 var(--pirate); letter-spacing: .04em; color: var(--brass); cursor: pointer; list-style: none; }
.keys-box summary::before { content: '▸ '; } .keys-box[open] summary::before { content: '▾ '; }
.keys-box .keys { margin-top: 12px; }
.cap-card { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; width: min(940px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 22px; background: var(--wood); border: 1.5px solid var(--brass-dark); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.15), 0 24px 60px rgba(0,0,0,.55); }
.cap-stage { display: grid; justify-items: center; align-content: start; gap: 4px; background: radial-gradient(ellipse at 50% 40%, #33505c, #0f1a20 75%); border: 1px solid var(--line); border-radius: 8px; padding: 10px 10px 14px; }
#cap-preview { width: 100%; height: 360px; touch-action: none; cursor: grab; }
#cap-name-show { font: 400 28px/1.1 var(--pirate); color: #f6e2b0; margin: 4px 0 0; text-align: center; }
.cap-stage small { color: rgba(239,220,180,.55); font-size: 12px; }
.cap-side h2 { font: 400 clamp(34px, 4.5vw, 48px)/1 var(--pirate); color: #f6e2b0; margin: 0 0 16px; text-shadow: 0 3px 0 #3a250e; }
.cap-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cap-choice { text-align: left; padding: 14px 16px; font-size: 22px; line-height: 1.1; }
.cap-choice small { display: block; font: 13px/1.35 var(--sans); color: rgba(246,231,195,.72); margin-top: 6px; letter-spacing: 0; text-shadow: none; }
.cap-choice.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 0 18px rgba(201,162,74,.35); }
#cap-make-panel { border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 14px; }
.cap-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; margin: 7px 0; }
.cap-label { font: 400 17px/1 var(--pirate); color: var(--brass); letter-spacing: .03em; }
.cap-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-opts .swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.cap-opts .swatch.on { outline: 2px solid var(--brass); outline-offset: 2px; }
.cap-opts .chip { font: 700 12px/1 var(--sans); letter-spacing: .02em; padding: 8px 11px; text-shadow: none; }
.cap-opts .chip.on { background: linear-gradient(180deg, #d9b25a, #9c7228); color: #231505; border-color: #f0d38a; }
#cap-name-input { width: 100%; font: 15px/1.2 var(--sans); color: #f6e7c3; background: rgba(0,0,0,.35); border: 1.5px solid var(--brass-dark); border-radius: 6px; padding: 9px 11px; }
#cap-name-input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.cap-photo { margin-top: 12px; display: grid; gap: 6px; justify-items: start; }
.cap-photo small { color: rgba(239,220,180,.62); font-size: 12px; }
#cap-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cap-file-btn { font: 400 17px/1 var(--pirate); color: #f6e7c3; background: rgba(0,0,0,.3); border: 1.5px dashed var(--brass-dark); border-radius: 6px; padding: 10px 14px; cursor: pointer; }
#cap-file:focus-visible + small, .cap-file-btn:hover { color: #fff4d6; }
#cap-photo-box { display: grid; gap: 6px; }
#cap-photo { max-width: 100%; border-radius: 6px; cursor: crosshair; border: 1px solid var(--line); }
#cap-photo-hint { margin: 0; font: italic 15px/1.3 var(--serif); color: #efdcb4; }
.recap-card { position: relative; width: min(540px, 100%); padding: 30px 34px 26px; }
.recap-card h2 { font: 400 clamp(32px, 5vw, 44px)/1.02 var(--pirate); color: var(--ink); margin: 6px 0 10px; }
#recap-harness { margin: 0 0 10px; font: 600 14px/1.4 var(--sans); color: var(--ink-soft); }
#recap-log { margin: 0 0 14px; padding-left: 18px; font: italic 16px/1.45 var(--serif); color: var(--ink); display: grid; gap: 4px; }
.recap-next { margin: 0 0 18px; font: 15px/1.45 var(--sans); color: var(--ink); }
@media (max-width: 720px) {
  .cap-card { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  #cap-preview { height: 230px; }
  .cap-row { grid-template-columns: 1fr; gap: 4px; }
  .recap-card { padding: 24px 22px 20px; }
}

/* Shot racks under the cannon gauge: one loaded at a time. */
#cannons .ammo { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
#cannons .rack { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--sans); letter-spacing: .02em; padding: 4px 7px 4px 4px; pointer-events: auto; text-shadow: none; }
#cannons .rack kbd { font-size: 9px; padding: 2px 4px; }
#cannons .rack.loaded { background: linear-gradient(180deg, #d9b25a, #9c7228); color: #231505; border-color: #f0d38a; box-shadow: 0 0 10px rgba(240,211,138,.45); }
#cannons .rack.locked { opacity: .32; }

/* GPU tokens on the tally, and Fergus's yard. */
#finds .tok { color: #9ff3e8; }
#finds .tok b { color: #d6fffa; }
.yard-trade { margin: -4px 0 8px; font: italic 14px/1.4 var(--serif); color: var(--ink-soft); }
.yard-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.4); }

/* The take-home checklist. */
.checklist { position: relative; padding: 22px 26px 20px; margin: 0 0 16px; grid-column: 1 / -1; }
.checklist h3 { font: 400 28px/1.1 var(--pirate); color: var(--ink); margin: 4px 0 12px; }
.checklist ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; font: 15px/1.4 var(--sans); color: var(--ink); }
.checklist li small { display: block; font: italic 13px/1.35 var(--serif); color: var(--ink-soft); margin-top: 2px; }
.checklist .tick { font: 700 16px/1.3 var(--sans); color: var(--ink-soft); }
.checklist li.done .tick { color: #1f7a4a; }
.checklist .actions { display: flex; gap: 8px; }
.checklist-copy { width: 100%; margin-top: 10px; font: 12px/1.4 var(--sans); }
.lesson-more { grid-column: 1 / -1; margin-top: 4px; }
.lesson-more summary { font: 400 20px/1.2 var(--pirate); color: var(--brass); cursor: pointer; margin-bottom: 10px; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
#panel .checklist { box-shadow: none; background: none; padding: 0; }
#panel .checklist::before, #panel .checklist::after { display: none; }
#cap-ai { display: grid; gap: 4px; justify-items: start; margin-top: 4px; }
#cap-ai small { color: rgba(239,220,180,.62); font-size: 12px; max-width: 46ch; }