/* The live-coded duels: The Spell Duel and Ward and Breach (on top of
   flag.css and tower.css). */

.live-spells { display: grid; gap: 4px; margin-top: 6px; }
.live-spell { display: inline-block; min-width: 3.6em; padding: 0 6px; border-radius: 5px; font: 700 12px/1.6 var(--font-mono, ui-monospace, monospace); text-align: center; color: #1a1410; background: #c9c2b4; }
.live-spell--fire { background: #f0874a; }
.live-spell--frost { background: #8fd0f0; }
.live-spell--storm { background: #c3a0f5; }
.live-spell--ward { background: #e6cf72; }
.live-spell--heal { background: #79d095; }
.live-spell--drain { background: #d58ab3; }
.live-spell--focus { background: #b9bfcc; }
.live-spell--rest { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }

.live-subhead { margin: 14px 0 6px; font: 700 13px var(--font-sans, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* The scoreline over both games' stages. */
.live-stage { display: grid; gap: 12px; }
.live-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font: 600 15px var(--font-serif); }
.live-scoreline strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.live-scoreline__side { display: flex; align-items: center; gap: 8px; }
.live-scoreline__side--1 { justify-content: flex-end; }
.live-scoreline__mid { text-align: center; font: 600 13px var(--font-sans, inherit); color: var(--text-muted); }
@media (max-width: 560px) {
  .live-scoreline { grid-template-columns: 1fr 1fr; }
  .live-scoreline__mid { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- The Spell Duel ---- */
.duel-floor { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.duel-vs { font-size: 22px; color: var(--accent); }
.duel-side { display: grid; gap: 8px; min-width: 0; }
@media (max-width: 640px) {
  .duel-floor { grid-template-columns: minmax(0, 1fr); }
  .duel-vs { text-align: center; }
}
.duel-mage { position: relative; display: grid; gap: 5px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; overflow: hidden; transition: opacity .3s, filter .3s; }
.duel-mage--0 { border-left: 4px solid #e8b84a; }
.duel-mage--1 { border-left: 4px solid #8fb6ee; }
.duel-mage.is-me { box-shadow: 0 0 0 2px var(--accent) inset; }
.duel-mage.is-fallen { opacity: .45; filter: grayscale(1); }
.duel-mage.is-chilled { background: linear-gradient(120deg, rgba(143, 208, 240, .16), transparent 60%), var(--surface); }
.duel-mage header { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.duel-mage__name { font: 700 15px var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-mage__bot { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.duel-mage__state { margin-left: auto; font-size: 12px; color: var(--text-muted); font-style: italic; }
.duel-bar { position: relative; height: 14px; border-radius: 999px; background: var(--surface-muted, rgba(127, 127, 127, .15)); overflow: hidden; }
.duel-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width .45s ease; }
.duel-bar--health > span { background: linear-gradient(90deg, #c84a4a, #e07a5a); }
.duel-bar--mana { height: 10px; }
.duel-bar--mana > span { background: linear-gradient(90deg, #5a7ae0, #8fb6ee); }
.duel-bar em { position: relative; display: block; padding: 0 8px; font: 600 10px/14px var(--font-sans, inherit); font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.duel-bar--mana em { line-height: 10px; font-size: 9px; }
.duel-mage__act { margin: 0; min-height: 1.5em; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.duel-harm { color: #e0707a; font-weight: 700; }
.duel-stop { color: #b49a3a; font-weight: 600; }
.duel-fizzle { color: var(--text-muted); font-style: italic; }
.duel-float { position: absolute; top: 40%; z-index: 2; pointer-events: none; font: 800 18px var(--font-sans, inherit); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); color: #ff6b6b; animation: duel-float 1.3s ease-out forwards; }
.duel-float.is-frost { color: #8fd0f0; }
.duel-float.is-storm { color: #c3a0f5; }
.duel-float.is-drain { color: #d58ab3; }
.duel-float.is-ward { color: #e6cf72; font-size: 14px; }
.duel-float.is-back { color: #e6cf72; }
.duel-float.is-heal { color: #79d095; font-size: 14px; }
.duel-float.is-fall { color: #fff; background: #c84a4a; border-radius: 6px; padding: 0 6px; font-size: 13px; }
@keyframes duel-float { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-38px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .duel-float { animation: none; opacity: .9; }
  .duel-bar > span { transition: none; }
}
.duel-banner { margin: 0; padding: 8px 12px; border-radius: 8px; text-align: center; font: 700 16px var(--font-serif); background: var(--accent-soft, rgba(232, 184, 74, .15)); border: 1px solid var(--accent); }
.duel-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.duel-log__round { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 5px 8px; border-radius: 6px; background: var(--surface-muted, rgba(127, 127, 127, .07)); font-size: 13px; }
.duel-log__round .tower-event__at { min-width: 2.2em; }
.duel-log__act { display: inline-flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
.duel-log__fell { color: #e0707a; font-weight: 700; }

/* ---- Ward and Breach ---- */
.wards-law, .wards-next { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent-soft, rgba(232, 184, 74, .1)); }
.wards-law:empty, .wards-next[hidden], .wards-mine[hidden], .duel-banner[hidden] { display: none; }
.wards-next { border-style: dashed; background: transparent; }
.wards-law__text { margin: 0; font: 600 19px/1.4 var(--font-serif); }
.wards-next .wards-law__text { font-size: 16px; }
.wards-law__examples { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wards-law__examples > span { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.wards-law__examples > span:first-child { margin-left: 0; }
.wards-sigil { display: inline-block; padding: 1px 7px; border-radius: 5px; font: 700 13px/1.5 var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; border: 1px solid; }
.wards-sigil.is-genuine { color: #2f8a4e; border-color: #79d095; background: rgba(121, 208, 149, .14); }
.wards-sigil.is-forged { color: #b8424e; border-color: #e0707a; background: rgba(224, 112, 122, .12); }
.wards-sigil.is-probe { border-style: dashed; }
.wards-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .wards-cols { grid-template-columns: minmax(0, 1fr); } }
.wards-col h3 { margin: 0 0 6px; font: 700 15px var(--font-serif); display: flex; align-items: center; gap: 6px; }
.wards-points { margin-left: auto; font: 700 14px var(--font-sans, inherit); color: var(--accent); }
.wards-col ul, .wards-probes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wards-col li, .wards-probes li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.wards-col li small { color: var(--text-muted); }
li.is-against-me { background: rgba(224, 112, 122, .12); box-shadow: inset 3px 0 0 #e0707a; }
.wards-through { color: #e0707a; font-weight: 600; }
.wards-held { color: var(--text-muted); }
.wards-probes { margin-top: 8px; font-size: 13px; }
.wards-probes summary { cursor: pointer; color: var(--text-muted); }
.wards-key { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.wards-mine { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.wards-mine__list { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.wards-tally__table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wards-tally__table th, .wards-tally__table td { padding: 3px 12px; text-align: right; border-bottom: 1px solid var(--border); }
.wards-tally__table th:first-child { text-align: left; }

/* ---- the bench ---- */
.live-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.live-actions kbd { font: 600 10px var(--font-sans, inherit); padding: 1px 4px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .45); margin-left: 3px; opacity: .8; }
#liveCast.is-cast { box-shadow: 0 0 0 4px rgba(232, 184, 74, .45); }
.live-spar { display: inline-flex; gap: 6px; align-items: center; }
.live-spar select { max-width: 11rem; }
.live-words { display: grid; gap: 6px; margin-top: 8px; }
.live-spar__stage, .live-spar__tick { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 10px; }
.live-replay [data-replay-stage] { display: grid; gap: 12px; margin-top: 12px; }
/* On narrow screens the spell comes before the rosters: it is what a
   player reaches for mid-match. */
@media (max-width: 900px) { .live-match .flag-main { order: -1; } }

/* ---- the survival games: two lanes, side by side ---- */
.live-best { list-style: none; counter-reset: best; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 420px; }
.live-best li { counter-increment: best; display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 6px; }
.live-best li::before { content: counter(best); min-width: 1.6em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.live-best li.is-me { background: var(--accent-soft, rgba(232, 184, 74, .12)); }
.live-best__name { font: 600 15px var(--font-serif); }
.live-best__score { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.live-catalogue { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.live-catalogue li { display: block; }
.live-catalogue__at { display: inline-block; min-width: 3.2em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.live-catalogue__eg { color: var(--text-muted); font-size: 13px; }

.survival-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .survival-lanes { grid-template-columns: minmax(0, 1fr); } }
.survival-lane { display: grid; gap: 8px; align-content: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.survival-lane--0 { border-top: 3px solid #e8b84a; }
.survival-lane--1 { border-top: 3px solid #8fb6ee; }
.survival-lane.is-me { box-shadow: 0 0 0 2px var(--accent) inset; }
.survival-lane.is-out { opacity: .6; }
.survival-lane__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.survival-lane__head strong { font: 700 16px var(--font-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survival-lane__score { margin-left: auto; font: 700 26px var(--font-serif); font-variant-numeric: tabular-nums; }
.survival-lane__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--text-muted); }
.survival-out { color: #e0707a; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* The Transmutation Line */
.line-manual { padding: 8px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft, rgba(232, 184, 74, .08)); }
.line-manual summary { cursor: pointer; font: 700 13px var(--font-sans, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.line-manual ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; }
.line-manual li.is-coming { padding: 4px 8px; border-radius: 6px; background: rgba(110, 200, 190, .14); box-shadow: inset 3px 0 0 #6fc4c0; }
.line-coming { color: #3ea7a2; }
.line-eg { color: var(--text-muted); }
.line-vessels { display: inline-flex; gap: 3px; }
.line-vessel { width: 11px; height: 15px; border-radius: 3px 3px 6px 6px; background: linear-gradient(#9fe0d8, #3ea7a2); border: 1px solid #3ea7a2; }
.line-vessel.is-broken { background: transparent; border-style: dashed; border-color: #e0707a; }
.line-belt { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 420px; overflow-y: auto; }
.line-order { position: relative; display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.line-order.is-ok { border-color: rgba(121, 208, 149, .6); }
.line-order.is-broke { border-color: #e0707a; background: rgba(224, 112, 122, .08); }
.line-order.is-unreached { opacity: .5; }
.line-order.is-hexed { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(216, 168, 255, .08) 8px 16px); }
.line-order.is-new { animation: line-slide .35s ease-out; }
@keyframes line-slide { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .line-order.is-new { animation: none; } }
.line-order__reagent { font: 700 14px var(--font-mono, ui-monospace, monospace); }
.line-order__steps { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.line-step { padding: 0 6px; border-radius: 5px; background: rgba(110, 200, 190, .16); font: 600 12px var(--font-mono, ui-monospace, monospace); }
.line-arrow { color: var(--text-muted); font-size: 11px; }
.line-order__verdict code { font-weight: 700; }
.line-order.is-ok .line-order__verdict b { color: #3f9d5d; }
.line-tag { font-style: normal; font-size: 11px; font-weight: 700; color: #3ea7a2; }
.line-tag.is-bad { color: #e0707a; }
.line-order__hex { position: absolute; top: 4px; right: 6px; font-size: 10px; font-weight: 700; color: #c98bd8; text-transform: uppercase; }

/* Storm of Stars */
.storm-kinds { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.storm-kind { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.storm-kind.is-coming { border-color: #6fc4c0; background: rgba(110, 200, 190, .14); }
.storm-kind em { font-size: 11px; color: #3ea7a2; font-style: normal; font-weight: 700; }
.storm-kinds__more { flex-basis: 100%; }
.storm-kinds__more summary { cursor: pointer; color: var(--text-muted); }
.storm-kinds__more ul { margin: 6px 0 0; padding-left: 18px; }
.storm-chip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.storm-chip--s { background: #f4f1e6; box-shadow: 0 0 0 1px #9a9a8a; }
.storm-chip--w { background: #ffd75e; }
.storm-chip--d { background: #7fd7f5; }
.storm-chip--c { background: #ff9a4a; }
.storm-chip--p { background: #e48af0; }
.storm-chip--k { background: #ff5d6c; }
.storm-sky { display: flex; justify-content: center; }
.storm-sky canvas { display: block; border-radius: 8px; max-width: 100%; }
.storm-lives { color: #ff5d6c; letter-spacing: 2px; font-size: 15px; }
.storm-lives .is-lost { color: var(--text-muted); opacity: .4; }
/* The two skies stay side by side on phones too, a little smaller. */
@media (max-width: 640px) {
  .survival-lanes--storm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .survival-lanes--storm .survival-lane { padding: 6px; }
  .survival-lanes--storm .survival-lane__score { font-size: 20px; }
}


/* ---- The Familiar Swarm ---- */
.swarm-field { position: relative; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #14110d; }
.swarm-field canvas { display: block; width: 100%; }
.swarm-key { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-muted); }
.swarm-key__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: -6px; vertical-align: middle; }
.swarm-key__dot--0 { background: #e8b84a; }
.swarm-key__dot--1 { background: #8fb6ee; }
.swarm-key__dot--mine { background: transparent; box-shadow: 0 0 0 2px #fff inset; }
.swarm-key__stone { display: inline-block; width: 8px; height: 8px; background: #d9e3f0; transform: rotate(45deg); margin-right: -4px; }
.swarm-key__stone.is-bright { background: #c9a8ff; width: 10px; height: 10px; }