/* ============================================================
   Friendly Feud
   Geometry is lifted from "FF base slides.pptm" at 100px = 1 inch,
   so the stage is exactly the deck's 13.33in x 7.5in slide.
   ============================================================ */

:root {
  --stage-w: 1333px;
  --stage-h: 750px;

  --blue-deep: #062090;   /* round-score pot, answer point box */
  --blue: #0c46a4;        /* answer tile */
  --blue-lite: #1f63d6;
  --gold: #ffc000;
  --gold-dim: #a87a00;
  --red: #c00000;         /* deck's reset-button red */

  --font-display: "Arial Black", "Arial Bold", Impact, "Helvetica Neue", sans-serif;
  --font-answer: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;

  --bevel: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* The stage scales as a whole; --s is set by main.js on resize. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center center;
  overflow: hidden;
}

.screen { position: absolute; inset: 0; display: none; }
.screen.is-active { display: block; }

#game, #final {
  background: #04102e url("../assets/img/bg-set.jpg") center/cover no-repeat;
}
/* The source art is only 540x360, so it softens when blown up to a TV.
   A vignette hides the worst of it and pushes focus to the board. */
#game::after, #final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
/* Lift the real content above the vignette. Children are already absolutely
   positioned, so this must set z-index only — setting `position` here would
   knock every one of them out of its deck coordinates. */
#game > *, #final > * { z-index: 1; }

/* ======================= SPLASH ======================= */

/* The deck's slide 1 used the pale cyan studio (assets/img/bg-splash.jpg).
   Swap the url below if you want that instead — the blue/gold set matches the
   rest of the game, which reads better on a TV. */
#splash { background: #0a1030 url("../assets/img/bg-set.jpg") center/cover no-repeat; }
#splash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.72) 100%);
}
#splash > * { z-index: 1; }

.splash__title {
  position: absolute;
  left: 63px; top: 60px; width: 1208px;
  text-align: center;
  font-size: 148px;
  line-height: .92;
  letter-spacing: .02em;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(255,192,0,.55),
    0 6px 0 #7a4b00,
    0 12px 26px rgba(0,0,0,.8);
}

/* The deck's own start graphic (assets/img/btn-start.png) is a small green
   wooden sign — too low-contrast and too small for a 10ft read, so this is a
   themed button instead. */
.splash__start {
  position: absolute;
  left: 50%; top: 500px;
  transform: translateX(-50%);
  width: 340px; height: 116px;
  font: 700 58px/1 var(--font-display);
  letter-spacing: .08em;
  color: #10204d;
  background: linear-gradient(180deg, #ffe487, var(--gold) 55%, #d69b00);
  border: 5px solid #fff;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0,0,0,.7), var(--bevel);
  transition: transform .15s ease, filter .15s ease;
}
.splash__start:hover  { transform: translateX(-50%) scale(1.05); filter: brightness(1.08); }
.splash__start:active { transform: translateX(-50%) scale(.98); }

.splash__hint {
  position: absolute;
  left: 0; right: 0; top: 646px;
  text-align: center;
  font: 700 20px/1 var(--font-display);
  letter-spacing: .04em;
  color: #ffd75e;
  text-shadow: 0 2px 10px #000;
}
.splash__hint[hidden] { display: none; }

.splash__edit {
  position: absolute;
  left: 50%; top: 700px;
  transform: translateX(-50%);
  padding: 10px 26px;
  font: 700 20px/1 var(--font-display);
  letter-spacing: .1em;
  color: #cfe0ff;
  background: rgba(6,32,144,.72);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 6px;
  cursor: pointer;
}
.splash__edit:hover { background: var(--blue); color: #fff; }

/* ======================= ROUND SCORE POT ======================= */

.pot {
  position: absolute;
  left: 507px; top: 3px;
  width: 336px; height: 101px;
  display: grid; place-items: center;
  font-size: 75px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border: 4px solid var(--gold);
  border-radius: 10px;
  box-shadow: var(--bevel), 0 8px 24px rgba(0,0,0,.6);
  text-shadow: 0 4px 8px rgba(0,0,0,.6);
}
.pot.is-bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.10); } }

.award {
  position: absolute;
  top: 22px;
  width: 190px; height: 62px;
  font: 700 17px/1.1 var(--font-display);
  letter-spacing: .02em;
  color: #10204d;
  background: linear-gradient(180deg, #ffd75e, var(--gold) 60%, var(--gold-dim));
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
}
.award--left  { left: 258px;  clip-path: polygon(0 50%, 26px 0, 100% 0, 100% 100%, 26px 100%); padding-left: 22px; }
.award--right { left: 885px;  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-right: 22px; }
.award:hover  { filter: brightness(1.12); }
.award:active { transform: translateY(2px); }
.award:disabled { opacity: .35; cursor: default; filter: none; transform: none; }

.icon-reset {
  position: absolute;
  left: 652px; top: 111px;
  width: 51px; height: 51px;
  background: none; border: 0; cursor: pointer;
  transition: transform .12s ease;
}
.icon-reset img { width: 100%; height: 100%; display: block; }
.icon-reset:hover { transform: scale(1.12) rotate(-8deg); }

/* ======================= STRIKES ======================= */

.strikes {
  position: absolute;
  left: 1100px; top: 12px;
  display: flex; gap: 8px;
}
.strikes img { width: 68px; height: 68px; animation: strike-in .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes strike-in { from { transform: scale(2.4); opacity: 0; } }

.big-strike {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
}
.big-strike img { width: 420px; height: 420px; filter: drop-shadow(0 0 40px rgba(255,0,0,.9)); }
.big-strike.is-on { animation: big-strike 1.1s ease forwards; }
@keyframes big-strike {
  0%   { opacity: 0; transform: scale(2.2); }
  18%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ======================= TEAM PANELS ======================= */

.team { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.team > * { pointer-events: auto; }

.team__name {
  position: absolute;
  width: 180px; height: 44px;
  display: grid; place-items: center;
  font-size: 26px; letter-spacing: .06em;
  color: #10204d;
  background: linear-gradient(180deg, #ffd75e, var(--gold));
  border-radius: 8px 8px 0 0;
  border: 3px solid #fff; border-bottom: 0;
}
.team__score {
  position: absolute;
  width: 180px; height: 88px;
  display: grid; place-items: center;
  font-size: 61px;
  color: #fff;
  background: #000;
  border: 3px solid #fff; border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.6);
}
.team__score.is-bump { animation: bump .45s ease; }

.team__reset {
  position: absolute;
  width: 92px; height: 24px;
  font: 700 12px/1 var(--font-display);
  letter-spacing: .08em;
  color: #fff;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 12px;
  cursor: pointer;
}
.team__reset:hover { filter: brightness(1.2); }

.team__nudge {
  position: absolute;
  width: 26px; height: 34px;
  font-size: 12px; line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px;
  cursor: pointer;
}
.team__nudge:hover { background: var(--blue-lite); }

/* Team 1 (left) — deck coords */
.team--left  .team__name  { left: 43px;  top: 314px; }
.team--left  .team__score { left: 43px;  top: 358px; }
.team--left  .team__reset { left: 78px;  top: 456px; }
.team--left  .team__nudge--up   { left: 230px; top: 371px; }
.team--left  .team__nudge--down { left: 230px; top: 411px; }

/* Team 2 (right) — mirrored */
.team--right .team__name  { left: 1110px; top: 314px; }
.team--right .team__score { left: 1110px; top: 358px; }
.team--right .team__reset { left: 1152px; top: 456px; }
.team--right .team__nudge--up   { left: 1077px; top: 371px; }
.team--right .team__nudge--down { left: 1077px; top: 411px; }

/* ======================= ANSWER BOARD ======================= */

.board {
  position: absolute;
  left: 274px; top: 201px;
  width: 787px; height: 340px;
  background: url("../assets/img/marquee.gif") 0 0 / 100% 100% no-repeat;
}
/* The marquee GIF has a white interior; black it out so only the lights show. */
.board::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: #01030f;
  border-radius: 4px;
}
.board__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.answer {
  position: absolute;
  width: 376px; height: 74px;
  padding: 0; border: 0; background: none;
  perspective: 900px;
  cursor: pointer;
}
.answer:nth-child(1), .answer:nth-child(2), .answer:nth-child(3), .answer:nth-child(4) { left: 15px; }
.answer:nth-child(5), .answer:nth-child(6), .answer:nth-child(7), .answer:nth-child(8) { left: 398px; }
.answer:nth-child(1), .answer:nth-child(5) { top: 15px; }
.answer:nth-child(2), .answer:nth-child(6) { top: 95px; }
.answer:nth-child(3), .answer:nth-child(7) { top: 175px; }
.answer:nth-child(4), .answer:nth-child(8) { top: 255px; }

.answer__inner {
  display: block;            /* a bare <span> is inline; width/height would be ignored */
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,.1,.2,1);
}
.answer.is-revealed .answer__inner { transform: rotateX(180deg); }

.answer__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 3px solid #6f8fd0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--blue-lite) 0%, var(--blue) 42%, var(--blue-deep) 100%);
  box-shadow: var(--bevel);
  overflow: hidden;
}

/* Front: the big number */
.answer__num {
  display: grid; place-items: center;
  font-size: 44px;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,.65);
}
.answer:hover:not(.is-revealed):not(.answer--empty) .answer__num { background: linear-gradient(180deg, #3a86ff, var(--blue) 55%, var(--blue-deep)); }

/* Back: answer text + point box */
.answer__back {
  transform: rotateX(180deg);
  display: flex; align-items: stretch;
}
.answer__text {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center;
  padding: 0 12px 0 18px;
  overflow: hidden;
}
.answer__label {
  width: 100%;
  font: 700 34px/1.02 var(--font-answer);
  letter-spacing: .01em;
  text-align: left;              /* <button> defaults to center; wrapped lines looked ragged */
  text-transform: uppercase;
  overflow-wrap: anywhere;       /* a single very long word must break, not overflow */
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.7);
}
.answer__pts {
  flex: 0 0 96px;
  display: grid; place-items: center;
  font-size: 39px;
  color: #fff;
  background: var(--blue-deep);
  border-left: 3px solid var(--gold);
  text-shadow: 0 2px 5px rgba(0,0,0,.7);
}

/* Unused slot for this round */
.answer--empty { cursor: default; }
.answer--empty .answer__face {
  background: #071233;
  border-color: #21386e;
  box-shadow: none;
}
.answer--empty .answer__num { color: transparent; }

/* ======================= PRESENTER CONTROLS ======================= */

.controls {
  position: absolute;
  left: 0; right: 0; top: 600px;
  display: flex; justify-content: center; align-items: center; gap: 28px;
}
.ctl {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.ctl img { width: 46px; height: 46px; display: block; }
.ctl:hover  { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.ctl:active { transform: translateY(1px) scale(.95); }
.ctl--strike { border-color: rgba(255,90,90,.7); }
.ctl--strike img { width: 52px; height: 52px; }

/* Secondary weight: same size and baseline as NEXT ROUND, but outlined rather
   than filled, so it never competes with the button the presenter wants. */
.prev-round {
  position: absolute;
  left: 24px; top: 636px;
  width: 208px; height: 46px;
  white-space: nowrap;
  font: 700 15px/1 var(--font-display);
  letter-spacing: .04em;
  color: #cfe0ff;
  background: rgba(0,0,0,.42);
  border: 2px solid rgba(255,255,255,.42);
  border-radius: 24px;
  cursor: pointer;
}
.prev-round:hover:not(:disabled) { color: #fff; background: var(--blue-deep); border-color: var(--gold); }
.prev-round:disabled { opacity: .3; cursor: default; }

.next-round {
  position: absolute;
  left: 1150px; top: 636px;
  width: 174px; height: 46px;
  font: 700 20px/1 var(--font-display);
  letter-spacing: .06em;
  color: #10204d;
  background: linear-gradient(180deg, #ffd75e, var(--gold));
  border: 3px solid #fff;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
}
.next-round:hover { filter: brightness(1.12); }

.final-btn {
  position: absolute;
  left: 50%; top: 690px;
  transform: translateX(-50%);
  padding: 12px 30px;
  font: 700 20px/1 var(--font-display);
  letter-spacing: .1em;
  color: #fff;
  background: var(--blue-deep);
  border: 3px solid var(--gold);
  border-radius: 8px;
  cursor: pointer;
}
.final-btn:hover { background: var(--blue); }

.ghost-btn {
  position: absolute;
  padding: 8px 16px;
  font: 700 14px/1 var(--font-display);
  letter-spacing: .08em;
  color: #b9cdf5;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 5px;
  cursor: pointer;
}
.ghost-btn:hover { color: #fff; background: var(--blue-deep); }
.ghost-btn--question { left: 24px; top: 690px; }
.ghost-btn--back { left: 24px; top: 690px; }

.round-label {
  position: absolute;
  left: 24px; top: 24px;
  font-size: 22px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.75);
  text-shadow: 0 2px 6px #000;
}

/* ======================= QUESTION OVERLAY ======================= */

.question {
  position: absolute;
  left: -14px;
  top: -400px;                     /* staged above the stage, exactly like the deck */
  width: 1357px; height: 360px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
  padding: 30px 70px;
  text-align: center;
  background: linear-gradient(180deg, #000 0%, #0a1330 100%);
  border-bottom: 6px solid var(--gold);
  box-shadow: 0 22px 60px rgba(0,0,0,.85);
  transition: top .65s cubic-bezier(.3,1.3,.5,1);
  z-index: 30;
  cursor: pointer;
}
.question.is-down { top: 195px; }

.question__text {
  font: 700 62px/1.15 var(--font-display);
  color: #fff;
  text-shadow: 0 5px 16px rgba(0,0,0,.9);
}
.question__hint {
  font: 400 18px/1 var(--font-display);
  letter-spacing: .2em;
  color: rgba(255,255,255,.5);
}

/* ======================= FINAL SCORE ======================= */

.final__title {
  position: absolute;
  left: 283px; top: 10px; width: 768px;
  text-align: center;
  font-size: 72px;
  letter-spacing: .06em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255,192,0,.5), 0 6px 0 #7a4b00, 0 12px 28px #000;
}
.final__team { position: absolute; top: 233px; width: 371px; }
.final__team--left  { left: 267px; }
.final__team--right { left: 704px; }

.final__name {
  height: 84px;
  display: grid; place-items: center;
  font-size: 44px;
  color: #10204d;
  background: linear-gradient(180deg, #ffd75e, var(--gold));
  border: 4px solid #fff; border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.final__score {
  height: 130px;
  display: grid; place-items: center;
  font-size: 88px;
  color: #fff;
  background: #000;
  border: 4px solid #fff; border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
.final__team .team__reset { position: relative; display: block; margin: 18px auto 0; left: auto; top: auto; }

.final__winner {
  position: absolute;
  left: 0; right: 0; top: 560px;
  text-align: center;
  font-size: 34px;
  letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 3px 12px #000;
  min-height: 42px;
}

.final__again {
  position: absolute;
  left: 50%; top: 640px;
  transform: translateX(-50%);
  padding: 16px 44px;
  font: 700 26px/1 var(--font-display);
  letter-spacing: .1em;
  color: #10204d;
  background: linear-gradient(180deg, #ffd75e, var(--gold));
  border: 4px solid #fff;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.6);
}
.final__again:hover { filter: brightness(1.12); }

/* ======================= EDITOR ======================= */

.editor {
  background: #0a1030;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #e6edff;
}
.editor__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 22px;
  background: var(--blue-deep);
  border-bottom: 3px solid var(--gold);
}
.editor__title { font: 700 26px/1 var(--font-display); letter-spacing: .1em; color: var(--gold); }
.editor__actions { display: flex; gap: 10px; }

.ed-btn {
  padding: 9px 16px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .08em;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 5px;
  cursor: pointer;
}
.ed-btn:hover { background: rgba(255,255,255,.28); }
.ed-btn:disabled { opacity: .4; cursor: default; }
.ed-btn--warn { background: #7a1414; border-color: #d06060; }
.ed-btn--go { background: var(--gold); color: #10204d; border-color: #fff; }
.ed-btn--lib { background: #0d6b3f; border-color: #4fd18b; }
.ed-btn--fetch { background: var(--blue); border-color: #6fa0ff; }

.ed-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ed-pane-head .ed-label { margin-bottom: 0; }
.ed-pane-actions { display: flex; gap: 8px; }

/* ---- saved games ---- */

.ed-modal {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(2,6,20,.82);
  z-index: 50;
}
.ed-modal[hidden] { display: none; }
.ed-modal__card {
  width: 720px; max-height: 600px;
  display: flex; flex-direction: column;
  padding: 20px 22px;
  background: #101a3d;
  border: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
.ed-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ed-modal__head h2 { font: 700 22px/1 var(--font-display); letter-spacing: .08em; color: var(--gold); }

.ed-lib { list-style: none; margin-top: 10px; overflow-y: auto; }
.ed-lib__empty { padding: 26px 0; text-align: center; color: #8fa3ca; font-size: 14px; }
.ed-lib li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  margin-bottom: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--gold);
  border-radius: 5px;
}
.ed-lib__meta { flex: 1; min-width: 0; }
.ed-lib__name { font-size: 16px; font-weight: 700; color: #fff; }
.ed-lib__sub { font-size: 12px; color: #8fa3ca; margin-top: 2px; }
.ed-lib__sub.is-warn { color: #ffb0b0; }

.editor__body { display: flex; height: calc(750px - 64px); }

.editor__rounds {
  width: 210px; flex: none;
  padding: 12px 10px;
  overflow-y: auto;
  background: rgba(0,0,0,.28);
  border-right: 1px solid rgba(255,255,255,.12);
}
.ed-round {
  display: block; width: 100%;
  margin-bottom: 6px; padding: 9px 11px;
  text-align: left;
  font: 400 13px/1.25 "Helvetica Neue", Arial, sans-serif;
  color: #cbd8f5;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  border-left: 3px solid #2b62c9;
  border-radius: 4px;
  cursor: pointer;
}
.ed-round b { display: block; font-size: 12px; letter-spacing: .1em; color: #8fb2f0; }
.ed-round.is-active { background: var(--blue); color: #fff; border-left-color: var(--gold); }
.ed-round.is-empty { border-left-color: #7a1414; }
.ed-round span { opacity: .65; font-style: italic; }

.editor__pane { flex: 1; padding: 18px 24px; overflow-y: auto; }

.ed-label { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8fb2f0; }
.ed-question {
  width: 100%;
  padding: 12px 14px;
  font: 700 22px/1.3 "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #111c44;
  border: 2px solid #2b62c9;
  border-radius: 6px;
  resize: vertical;
}
.ed-question:focus { outline: 0; border-color: var(--gold); }

.ed-help { margin: 12px 0 14px; font-size: 13px; line-height: 1.5; color: #93a6cd; }

.ed-grid { display: flex; gap: 20px; }
.ed-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.ed-row { display: flex; align-items: center; gap: 8px; }
.ed-row__n {
  flex: none; width: 30px; height: 40px;
  display: grid; place-items: center;
  font: 700 16px/1 var(--font-display);
  color: #fff;
  background: var(--blue);
  border-radius: 4px;
}
.ed-row input {
  height: 40px;
  padding: 0 10px;
  font: 400 16px/1 "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #111c44;
  border: 1px solid #2b62c9;
  border-radius: 4px;
}
.ed-row input:focus { outline: 0; border-color: var(--gold); }
.ed-row__text { flex: 1; min-width: 0; text-transform: uppercase; }
.ed-row__pts { flex: none; width: 68px; text-align: center; }
.ed-row.is-blank .ed-row__n { background: #24304f; color: #55679a; }

.ed-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 22px; }
.ed-summary { font-size: 14px; color: #93a6cd; }
.ed-summary b { color: var(--gold); }
.ed-summary.is-warn { color: #ff9a9a; }
.ed-saved { font-size: 13px; color: #6ee7a8; opacity: 0; transition: opacity .3s; }
.ed-saved.is-on { opacity: 1; }