/* UI and readability pass, loaded last. Reading text is upright and larger; the period display
   fonts (see "title fonts" below) are for headings, buttons and labels only. Panels keep their buttons in view; the station bar sits on the right. */

/* ---------------------------------------------------------------- readable text */
.dialogue .line { font: 500 18px/1.5 var(--sans); letter-spacing: 0; color: #1f150a; }
.dialogue.radio .line { font: 600 16px/1.45 'Courier New', monospace; }
.mission p { font: 600 16px/1.35 var(--sans); font-style: normal; color: #1f150a; }
.card small, #panel .mind-says, #discovery .note, .result p.body, .lesson p + p, #reflect textarea, #recap-log,
#cap-photo-hint, .yard-trade, .checklist li small, #panel ul.log li.find, .lede {
  font-family: var(--sans); font-style: normal;
}
.card small { font-size: 14px; line-height: 1.45; color: #3a3025; }
#panel .mind-says { font-size: 17px; line-height: 1.5; font-weight: 500; }
#discovery .note { font-size: 17px; line-height: 1.5; font-weight: 500; }
.result p.body { font-size: 17px; line-height: 1.5; }
.lesson p + p { font-size: 15px; line-height: 1.45; font-weight: 600; }
.lede { font-size: 18px; line-height: 1.5; font-weight: 500; }
#recap-log { font-size: 15px; line-height: 1.5; }
#panel p { font-size: 15px; line-height: 1.55; color: #2e261c; }
#panel .note { font-size: 14px; line-height: 1.5; color: #2e261c; }
#panel h2 { font-size: 28px; }
.toast { font-weight: 600; }

/* ---------------------------------------------------------------- panels: buttons always in view */
#panel { top: 84px; width: min(620px, calc(100% - 140px)); max-height: calc(100% - 190px); padding-bottom: 0; }
#panel-body { padding-bottom: 18px; }
/* Action rows stick to the bottom of the panel while the cards scroll behind them. */
#panel .actions {
  position: sticky; bottom: 0; z-index: 2; margin: 8px -22px 0; padding: 14px 22px 16px;
  background: linear-gradient(180deg, rgba(233,214,172,0), #e9d6ac 22%);
}
#panel .actions button { font: 400 19px/1.1 var(--pirate); letter-spacing: .03em; padding: 13px 16px; }
/* A cue when there is more below and no sticky actions to show it. */
#panel-more { position: sticky; bottom: 0; display: none; justify-content: center; margin: 0 -22px; padding: 22px 0 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(233,214,172,0), #e9d6ac 60%); }
#panel-more span { font: 700 12px/1 var(--sans); letter-spacing: .06em; color: #5c4630; background: rgba(255,248,230,.9); border: 1px solid rgba(92,70,48,.35); border-radius: 999px; padding: 6px 12px; }
#panel.more #panel-more { display: flex; }

/* Cards: a clear title, readable detail, and a button that looks like one. */
.card { padding: 13px 14px; gap: 6px 12px; background: rgba(255,251,240,.92); border-color: rgba(92,70,48,.22); }
.card b { font-size: 16px; color: #1f150a; }
.card .kind { font-size: 15px; }
.card button { font: 400 17px/1 var(--pirate); letter-spacing: .03em; padding: 10px 14px; min-width: 104px; color: #fff1cf;
  background: linear-gradient(180deg, #b8321f, #7c1d11); border: 1.5px solid var(--brass); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.card button:hover:not(:disabled) { background: linear-gradient(180deg, #cc3b26, #8c2214); }
.card button:disabled { color: #6b5d4a; background: #e3d8bf; border-color: rgba(92,70,48,.25); box-shadow: none; }
.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, #2a8a82, #1b6f68); border-color: #9ff3e8; color: #fff; }

/* ---------------------------------------------------------------- HUD: clearer keys */
#controls-hint { font-size: 13px; line-height: 2; padding: 8px 12px; }
#controls-hint kbd { font-size: 11px; padding: 3px 6px; }
#prompt { font-size: 22px; padding: 9px 20px 9px 9px; }
#prompt kbd { font-size: 15px; padding: 7px 11px; }
/* Log and yard live on the station bar now. */
.top-actions #btn-journal, .top-actions #btn-yard { display: none; }

/* ---------------------------------------------------------------- the station bar */
#stations { position: absolute; right: 18px; top: 50%; transform: translateY(-62%); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
#stations .st { position: relative; width: 50px; height: 50px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: #f6e2b0; background: var(--wood); border: 2px solid var(--brass-dark);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,160,.18), 0 6px 14px rgba(0,0,0,.35); pointer-events: auto; transition: transform .12s, border-color .15s, opacity .15s; }
#stations .st svg { width: 25px; height: 25px; }
#stations .st:hover, #stations .st:focus-visible { border-color: var(--brass); transform: translateX(-2px); }
#stations .st.off { opacity: .42; }
#stations .st.on { background: linear-gradient(180deg, #d9b25a, #9c7228); color: #231505; border-color: #f0d38a; }
#stations .st.next { border-color: #9ff3e8; animation: stNext 1.6s ease-in-out infinite; }
@keyframes stNext { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 0 0 rgba(159,243,232,.0); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 0 7px rgba(159,243,232,.28); } }
/* Names slide out to the left on hover or keyboard focus. */
#stations .st-label { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 400 18px/1 var(--pirate); letter-spacing: .03em; color: #f6e7c3; background: var(--wood); border: 1.5px solid var(--brass-dark);
  border-radius: 6px; padding: 8px 12px; opacity: 0; transition: opacity .12s; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
#stations .st-label kbd { font-size: 11px; margin-left: 4px; }
#stations .st:hover .st-label, #stations .st:focus-visible .st-label { opacity: 1; }
#stations .st.off:hover .st-label::after { content: ' · ' attr(data-why); font: 12px var(--sans); color: rgba(246,231,195,.7); }
body.cine #stations { opacity: 0; pointer-events: none; }
@media (max-height: 760px) { #stations .st { width: 42px; height: 42px; } #stations .st svg { width: 21px; height: 21px; } #stations { gap: 6px; } }
@media (max-width: 760px) { #stations { right: 8px; transform: translateY(-75%); } #stations .st { width: 40px; height: 40px; } #stations .st-label { display: none; } #panel { width: auto; } }

/* ---------------------------------------------------------------- the controls card */
.ctl-list { display: grid; gap: 6px; margin: 0 0 14px; }
.ctl { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; font: 500 15px/1.35 var(--sans); color: #2e261c; }
.ctl-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.ctl-keys kbd { font-size: 12px; padding: 4px 7px; }

@media (prefers-reduced-motion: reduce) { #stations .st.next { animation: none; box-shadow: 0 0 0 3px rgba(159,243,232,.45); } }

/* No italics anywhere: the serif was an italic-only face, so reading text uses the upright sans. */
:root { --serif: var(--sans); }
body * { font-style: normal !important; }
.card b { font-family: var(--sans); font-weight: 700; }

/* ---------------------------------------------------------------- combat feel */
.hit-label { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; will-change: transform, opacity;
  font: 400 30px/1 var(--pirate); letter-spacing: .03em; text-shadow: 0 2px 0 #2a1a08, 0 0 14px rgba(0,0,0,.6), 0 0 2px #000; }
#hurt { position: fixed; inset: 0; pointer-events: none; z-index: 12; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(160,20,10,0) 55%, rgba(170,20,10,.55) 100%); }
#hurt.on { animation: hurt .6s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #hurt.on { animation-duration: .2s; } }

/* ---------------------------------------------------------------- personal ships */
#invite-note { margin: 14px 0 4px; max-width: 34em; font-size: 17px; line-height: 1.5; color: #fff4dc; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
#invite-note small { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
#invite-own { margin: 10px 0 0; font-size: 14px; }
#invite-own a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#cap-invite { margin: 0 0 12px; font-size: 15px; line-height: 1.45; padding: 10px 12px; border-radius: 8px; background: rgba(255, 214, 140, .12); border: 1px solid rgba(255, 214, 140, .35); }

/* ---------------------------------------------------------------- playtest fixes */
/* 1: more room around the key and inside the action pill. */
#prompt { padding: 12px 26px 12px 14px; gap: 16px; }
#prompt kbd { padding: 8px 13px; }
/* 2: the circle on a sighting scroll sits above the scroll's wooden rod, not under it. */
#discovery .disc-icon { position: relative; z-index: 2; }

/* 9: a bottle lesson shows its everyday example on its own line. */
#discovery .note { white-space: pre-line; }

/* 15: keys inside buttons sit centred on the label. */
#panel-close, #btn-fast { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
#panel-close kbd, #btn-fast kbd { display: inline-grid; place-items: center; line-height: 1; margin: 0; }
/* 16: the panel scrolls, so its frame must not be a layer inside the scrolling content (its edge
   used to slide up through the text). An outline stays on the panel's edge while text scrolls. */
#panel::before, #panel::after { display: none; }
#panel { outline: 1.5px solid rgba(60, 38, 16, .32); outline-offset: -9px; }

/* ---------------------------------------------------------------- 17: title fonts */
/* A Pirates-of-the-Caribbean feel with free fonts (SIL OFL, files and licences in fonts/):
   Cinzel Decorative's engraved capitals for titles and headings, IM Fell English SC (real 1670s
   print type) for everything smaller: buttons, labels, kickers. Reading text stays Archivo. */
@font-face { font-family: 'Cinzel Decorative'; src: url(fonts/cinzel-decorative-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel Decorative'; src: url(fonts/cinzel-decorative-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url(fonts/im-fell-english-sc.woff2) format('woff2'); font-display: swap; }
:root { --pirate: 'IM Fell English SC', Georgia, serif; --display: 'Cinzel Decorative', Georgia, serif; }
#loading h1, .title-card h1, #loading h1 em, .title-card h1 em, #discovery h3, #panel h2, .result h2, dialog h2,
.cap-side h2, .recap-card h2, .checklist h3, .refit-veil p, #cap-name-show {
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
}
/* Cinzel's capitals run wider than the old narrow face, so the biggest titles step down a little. */
#loading h1, .title-card h1 { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; }
#discovery h3 { font-size: 30px; line-height: 1.1; }
#panel h2, .result h2 { font-size: 28px; line-height: 1.12; }

/* The finds tally (bottles, charts, tokens) sits under the harness in the left column, so it can
   never cover the action pill in the middle of a narrower screen. */
#leftcol #finds { position: static; right: auto; bottom: auto; align-self: flex-start; max-width: 100%; white-space: normal; line-height: 1.3; }
/* Cinzel Decorative's capital R sweeps a long flourish under the next letter, which reads as a
   stray tail at heading size ("CHART ROOM"). Headings use plain Cinzel; the flourishes stay on the
   big title only. */
@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
#discovery h3, #panel h2, .result h2, dialog h2, .cap-side h2, .recap-card h2, .checklist h3, .refit-veil p, #cap-name-show {
  font-family: 'Cinzel', Georgia, serif;
}