/* excalibur.css — Excalibur mode (js/excalibur.js, 2026-09-05): the setup
   screen, the in-run phrase card and the flash between phrases. Loads after
   style.css and ladder.css (index.html); the flash borrows the ladder
   flash's dress (.lf-*) and the card the study panel's (.sp-head, .lp-line). */

/* ------------------------------------------------------------- the screen */
.panel.pp-panel.ex-panel { text-align: center; }
/* the floating Back button sits over the panel's top-left: the title clears it */
.ex-panel .title.small { margin-top: 40px; }
.ex-lead {
  margin: 4px auto 14px; max-width: 560px; font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.ex-hero {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  margin: 6px auto 14px; padding: 14px 26px; border-radius: 16px; width: fit-content;
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .16);
}
.ex-big { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ex-big span { font-size: 54px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.ex-big small { margin-top: 4px; font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: rgba(255, 255, 255, .5); }
.ex-counts { display: flex; gap: 18px; text-align: left; }
.ex-counts div { display: flex; flex-direction: column; line-height: 1.15; }
.ex-counts b { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.ex-counts small { font-size: 10.5px; letter-spacing: 1.5px; font-weight: 800; color: rgba(255, 255, 255, .5); }
.ex-counts .ex-mast b { color: #8ff0a4; }
.ex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.ex-h { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: rgba(255, 255, 255, .45); min-width: 54px; text-align: right; }
.ex-seg { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); }
.ex-seg button {
  font: inherit; font-size: 13px; font-weight: 700; color: #ddd; padding: 8px 14px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 0; border-right: 1px solid rgba(255, 255, 255, .14);
}
.ex-seg button:last-child { border-right: 0; }
.ex-seg button.on { background: rgba(52, 211, 255, .22); color: #fff; }
.ex-seg button:disabled { opacity: .4; cursor: default; }
.ex-hint { flex-basis: 100%; font-size: 12px; color: rgba(255, 255, 255, .6); max-width: 560px; margin: 0 auto; line-height: 1.45; }
.ex-pieces {
  margin: 8px auto; max-width: 560px; max-height: 240px; overflow-y: auto; text-align: left;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 10px;
  background: rgba(0, 0, 0, .25);
}
.ex-pieces .ex-tools { display: flex; gap: 12px; font-size: 11.5px; margin-bottom: 6px; }
.ex-pieces .ex-tools button { background: none; border: 0; color: var(--cyan); cursor: pointer; font: inherit; font-size: 11.5px; text-decoration: underline; padding: 0; }
.ex-pieces input[type="search"] { width: 100%; box-sizing: border-box; margin-bottom: 6px; font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; }
.ex-piece { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; cursor: pointer; }
.ex-piece:hover { background: rgba(255, 255, 255, .05); }
.ex-piece b { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-piece span { font-size: 11px; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-piece span em { font-style: normal; color: #8ff0a4; }
.ex-piece.ex-none { opacity: .45; }
/* the row's Customize… button and its "N of M chosen" (excalibur.js openPhrases) */
.ex-piece .ex-cust { flex: none; background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--cyan); border-radius: 7px; font: inherit; font-size: 10.5px; padding: 2px 7px; cursor: pointer; white-space: nowrap; }
.ex-piece .ex-cust:hover { border-color: var(--cyan); background: rgba(80, 200, 255, .1); }
.ex-piece.ex-custom .ex-cust { border-color: rgba(80, 200, 255, .5); }
.ex-piece span .ex-chosen { font-style: normal; color: var(--cyan); }
/* one piece's phrase list (#ex-phrases): the pieces box's dress, a taller scroll */
.ex-phrases { max-height: 340px; }
.ex-phrase { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; cursor: pointer; }
.ex-phrase:hover { background: rgba(255, 255, 255, .05); }
.ex-phrase b { font-weight: 700; white-space: nowrap; min-width: 92px; }
.ex-phrase .ex-lv { display: inline-block; min-width: 26px; text-align: center; border-radius: 6px; padding: 1px 6px; color: #000; font-weight: 900; font-size: 11px; }
.ex-phrase .ex-phrase-meta { flex: 1; font-size: 11px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-phrase.ex-off b { opacity: .5; }
.ex-phrase .ex-play { flex: none; background: none; border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 7px; font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; min-width: 34px; }
.ex-phrase .ex-play:hover { border-color: var(--cyan); }
.ex-phrase .ex-play.on { border-color: var(--gold); color: var(--gold); }
@media (max-width: 600px) { .ex-phrase .ex-phrase-meta { display: none; } }
/* the saved choices above the piece list */
.ex-sets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 560px; margin: 8px auto 0; }
.ex-sets .ex-h { min-width: 54px; }
.ex-set {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; cursor: pointer; padding: 4px 6px 4px 10px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); color: #cfd8e3;
  max-width: 100%;
}
.ex-set b { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ex-set small { font-size: 10px; color: rgba(255, 255, 255, .5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ex-set i { font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .45); padding: 1px 5px; border-radius: 999px; }
.ex-set i:hover, .ex-set.del i { color: #fff; background: rgba(255, 90, 90, .45); }
.ex-set:hover { border-color: rgba(52, 211, 255, .5); }
.ex-set.on { border-color: rgba(52, 211, 255, .6); background: rgba(52, 211, 255, .14); color: #fff; }
.ex-set.on small { color: var(--cyan); }
.ex-set-save, .ex-set-form button {
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--cyan); cursor: pointer; padding: 5px 10px;
  border-radius: 999px; border: 1px solid rgba(52, 211, 255, .45); background: rgba(52, 211, 255, .08);
}
.ex-set-save:disabled { opacity: .4; cursor: default; }
.ex-set-form { display: inline-flex; align-items: center; gap: 6px; }
.ex-set-form input { font: inherit; font-size: 12.5px; padding: 5px 9px; width: 240px; border-radius: 8px; border: 1px solid rgba(52, 211, 255, .6); background: rgba(255, 255, 255, .06); color: #fff; }
.ex-pieces .ex-ph { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: rgba(255, 255, 255, .45); margin: 2px 0 6px; }
.ex-pieces .ex-empty { padding: 10px 4px; font-size: 12.5px; line-height: 1.5; color: #ffd28a; }
.ex-pool { margin: 8px 0 2px; font-size: 12.5px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.ex-pool.warn { color: #ffb454; }
.ex-summary {
  margin: 0 auto 12px; max-width: 560px; padding: 12px 16px; border-radius: 14px; text-align: left;
  background: rgba(143, 240, 164, .08); border: 1px solid rgba(143, 240, 164, .35); font-size: 13px; line-height: 1.55;
}
.ex-summary b { color: #8ff0a4; }
.ex-summary .ex-sum-h { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: #8ff0a4; margin-bottom: 4px; }
/* the last phrases this browser can replay (excalibur.js renderReplays):
   one row a phrase, ▶ opens the ordinary replay of that phrase's stitch */
.ex-replays { margin: 8px 0 14px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(0, 0, 0, .22); font-size: 13px; }
.ex-replays .ex-sum-h { font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: #8ff0a4; margin-bottom: 4px; }
.ex-replays .ex-hint { margin: 0 0 6px; }
.ex-rp-table { width: 100%; border-collapse: collapse; }
.ex-rp-table td { padding: 4px 6px; border-top: 1px solid rgba(255, 255, 255, .08); vertical-align: middle; }
.ex-rp-table tr:first-child td { border-top: 0; }
.ex-rp-when { color: #9aa6b5; white-space: nowrap; font-size: 12px; }
.ex-rp-piece small { display: block; color: #9aa6b5; font-size: 11.5px; }
.ex-rp-verdict { white-space: nowrap; font-weight: 700; font-size: 12px; }
.ex-rp-verdict.ok { color: #8ff0a4; }
.ex-rp-verdict.no { color: #ffb454; }
.ex-rp-acc { text-align: right; font-variant-numeric: tabular-nums; }
.ex-rp-table .rp-btn { min-width: 34px; }

/* ------------------------------------- the CLASSIC style: the in-run card */
/* (Settings → Gameplay → Excalibur feedback; the quest / stage styles are
   excalibur-feedback.css, which also lowers #excal-flash under their box) */
#excal-panel {
  position: fixed; right: 14px; top: 128px; z-index: 40; width: 224px;
  display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
  background: rgba(8, 10, 22, 0.85); border: 1px solid rgba(215, 224, 234, 0.3);
  border-radius: 14px; padding: 12px; font-size: 12.5px; color: #d7e0ea;
  text-align: left;
}
body.sheet-on #excal-panel { top: calc(var(--sheet-h, 164px) + 76px); }
#excal-panel .sp-head { font-weight: 900; letter-spacing: 2px; font-size: 12px; color: var(--gold); }
#excal-panel .lp-stage { color: var(--cyan); }
#excal-panel .ex-lv { border-radius: 7px; }
#excal-panel .ex-lvchip .ex-lvn { font-size: 19px; }
@media (max-width: 760px) { #excal-panel { display: none; } }

/* ------------------------------------------------------------- the flash */
/* the score of the phrase just played, over whatever comes next; a dark
   scrim while the next phrase loads (.scrim), the card alone once it runs */
#excal-flash {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; transition: background .25s;
}
#excal-flash.scrim { background: rgba(6, 8, 18, 0.9); }
.ex-fl-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 34px; border-radius: 22px; background: rgba(8, 10, 22, .9);
  border: 1px solid rgba(215, 224, 234, .3); box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  opacity: 0; transform: scale(1.15) translateY(8px); transition: opacity .3s, transform .3s;
}
#excal-flash.show .ex-fl-card { opacity: 1; transform: none; }
#excal-flash.fade .ex-fl-card { opacity: 0; transform: scale(.96) translateY(-6px); transition: opacity .5s, transform .5s; }
#excal-flash .lf-passed { font-size: clamp(22px, 3.6vw, 38px); }
#excal-flash .lf-passed.ex-miss { color: #ffb454; }
#excal-flash .lf-passed.ex-mast { color: var(--gold); }
/* two figures under the verdict: the score this phrase paid (with its
   arithmetic under it) and the player's own level after it, which counts
   from the level before to the level after, the change beside it (green
   up, amber down) */
.ex-fl-stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ex-fl-stat {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline;
  padding: 8px 20px 6px; border-radius: 14px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
}
.ex-fl-stat small { grid-column: 1 / -1; font-size: 11px; letter-spacing: 2px; font-weight: 900; color: rgba(255, 255, 255, .6); }
.ex-fl-stat b { font-size: clamp(30px, 4.6vw, 46px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.ex-fl-stat em { font-style: normal; font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-fl-scorebox b { color: #fff; }
.ex-fl-ps b { color: var(--cyan); }
.ex-fl-level b { color: var(--gold); }
.ex-fl-stat.up em { color: #8ff0a4; }
.ex-fl-stat.down em { color: #ffb454; }
.ex-fl-stat.hidden { display: none; }
.ex-fl-score.hidden { display: none; }
.ex-fl-score { font-size: 15px; color: #cfd8e3; font-variant-numeric: tabular-nums; max-width: 640px; line-height: 1.5; }
.ex-fl-score b { color: #fff; }
.ex-fl-score .ex-note { display: block; font-size: 12px; opacity: .6; margin-top: 4px; }
/* Phrase progress belongs to the selected presentation. Keep the ordinary
   play HUD to two short readouts instead of a second score/measure panel. */
body.excal-feedback-on #hud { display: block; height: 0; bottom: auto; padding: 0; }
body.excal-feedback-on #hud-left, body.excal-feedback-on #measure-box { display: none; }
body.excal-feedback-on #hud-center { position: absolute; top: var(--ex-hud-top,12px); left: 28px; right: auto; width: auto; transform: none; display: block; }
body.excal-feedback-on #hud-right { position: absolute; top: var(--ex-hud-top,12px); right: calc(28px + var(--ex-hud-menu-gap,0px)); left: auto; width: auto; display: block; text-align: right; }
body.excal-feedback-on #combo-wrap, body.excal-feedback-on #acc-box { display: flex; align-items: baseline; gap: 9px; }
body.excal-feedback-on #combo { min-height: 0; font-size: 30px; line-height: 1; }
body.excal-feedback-on #acc { font-size: 24px; line-height: 1; }
body.excal-feedback-on .hud-label { font-size: 9px; letter-spacing: 1.6px; }
@media (max-width: 560px) {
  body.excal-feedback-on #hud-center { left: 14px; }
  body.excal-feedback-on #hud-right { right: calc(14px + var(--ex-hud-menu-gap,0px)); }
}

/* the dealing range: two sliders with their readouts */
.ex-range { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; flex-basis: 100%; margin-top: 2px; }
/* the range row is not read by a ladder (ORDER = lowest to highest): dimmed, its hint saying so */
.ex-row.ex-off .ex-seg, .ex-row.ex-off .ex-range { opacity: .4; pointer-events: none; }
.ex-rg { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.ex-rg input[type="range"] { width: 150px; accent-color: var(--cyan); }
.ex-rg b { min-width: 42px; text-align: left; font-size: 12.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ the options */
.ex-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ex-row > .ex-toggle { margin-left: 4px; }
.ex-toggle {
  font: inherit; font-size: 12.5px; font-weight: 700; color: #cfd8e3; padding: 7px 13px; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05);
}
.ex-toggle b { color: rgba(255, 255, 255, .5); font-weight: 900; margin-left: 4px; letter-spacing: 1px; }
.ex-toggle.on { border-color: rgba(52, 211, 255, .6); background: rgba(52, 211, 255, .14); color: #fff; }
.ex-toggle.on b { color: var(--cyan); }
/* the run card's line about the phrase before */
#excal-panel .ex-last { color: #cfd8e3; opacity: .9; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 6px; }

/* --------------------------- the CLASSIC style on the continuous scroll (2026-09-07) */
/* the loading line under the scrim while a hundred phrases are dealt and their pieces fetched */
#excal-flash .ex-loading { color: #d7e0ea; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-align: center; padding: 10px 22px; border-radius: 12px; background: rgba(8, 10, 22, .8); border: 1px solid rgba(215, 224, 234, .25); }
#excal-flash .ex-loading.hidden { display: none; }
#excal-flash .ex-loading small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .55); letter-spacing: 0; }
/* the callouts: stacked under the sheet's left end, over the top of the
   falling notes, never over the engraving; each fades on its own */
#excal-callout {
  position: fixed; left: 14px; top: calc(var(--sheet-h, 164px) + 8px); z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: min(520px, 60vw);
}
body:not(.sheet-on) #excal-callout { top: 72px; }
#excal-callout.hidden { display: none; }
.ex-co {
  padding: 7px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; color: #d7e0ea;
  background: rgba(8, 10, 22, .86); border: 1px solid rgba(215, 224, 234, .28); box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; font-variant-numeric: tabular-nums;
}
.ex-co.show { opacity: 1; transform: none; }
.ex-co.hidden { display: none; }
.ex-co b { color: #fff; font-weight: 800; }
.ex-co .ex-co-h { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: 2px; color: rgba(255, 255, 255, .5); margin-bottom: 1px; }
.ex-co-next .ex-co-h { color: var(--cyan); }
.ex-co-result.ok .ex-co-h { color: #8ff0a4; }
.ex-co-result.no .ex-co-h { color: #ffb454; }
.ex-co-result.mast .ex-co-h { color: var(--gold); }
/* the level chip on a card that names the phrase: "Lv" small, the NUMBER the
   card's headline (Lionel, 2026-09-09). One shape for the callout and the run
   card; the phrase picker's rows keep the flat chip above. */
.ex-lvchip {
  display: inline-flex; align-items: baseline; gap: 3px; vertical-align: -4px;
  border-radius: 7px; padding: 1px 7px 2px; color: #000; font-weight: 900; line-height: 1;
}
.ex-lvchip small { font-size: 10px; font-weight: 900; letter-spacing: .5px; opacity: .7; }
.ex-lvchip .ex-lvn { font-size: 21px; font-weight: 900; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ex-co .ex-co-lv { font-size: 11px; }
.ex-co .up { color: #8ff0a4; } .ex-co .down { color: #ffb454; } .ex-co .dim { color: rgba(255, 255, 255, .55); }
@media (max-width: 760px) { #excal-callout { max-width: 78vw; } .ex-co { font-size: 12px; } .ex-lvchip .ex-lvn { font-size: 18px; } }