/* The console: everything that frames the battle rather than fights it.
 *
 * The whole interface is meant to read as a field terminal someone is watching
 * the engagement through - notched hull panels, hairline edges, tick ladders,
 * and numbers set in a monospace so they look measured rather than typed.
 */

:root {
  /* hull */
  --void: #02060e;
  --hull: rgba(6, 15, 28, 0.9);
  --hull-2: rgba(9, 21, 38, 0.94);
  --hull-3: rgba(13, 29, 50, 0.96);
  --edge: rgba(88, 150, 210, 0.34);
  --edge-hot: rgba(126, 196, 255, 0.72);

  /* light */
  --ice: #dcebfd;
  --ice-2: #9fbcdc;
  --ice-dim: #6d89ab;

  /* factions

     The Rebellion is red - the starbird red off the flight helmets. The Empire
     is black, and black on a board already graded down to night cannot glow:
     nothing burns against nothing. So the two are drawn the opposite way round.
     A rebel shape is lit in its colour. An imperial shape is filled with the
     black and read by the hard steel line around it, which is what an imperial
     hull looks like under a floodlight.

     Only where a mark is too thin to hold a fill - a hairline, a 2px spine, a
     glyph at 17px - is the Empire drawn in the steel directly, because black at
     that width is not a colour, it is an absence.

     --*-hot is the lit version each side's text and edges are set in: a paler
     red for the rebels, the grey of an officer's tunic for the Empire. */
  --rebel: #ff3b30;
  --rebel-hot: #ffa79e;
  --rebel-deep: #8e1207;
  --empire: #05080e;
  --empire-hot: #ccdcef;
  --empire-deep: #000104;

  /* signals */
  --holo: #5ad8ff;
  --lock: #6fffb4;

  --font: "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;

  /* The notch every hull panel is cut with. Kept in pixels rather than
     percentages so a panel and the 1px fill inside it cut at the same angle. */
  --notch: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  --notch-sm: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  font-family: var(--font);
  color: var(--ice);
  -webkit-font-smoothing: antialiased;
}

.sprite-sheet { position: absolute; width: 0; height: 0; overflow: hidden; }

#stage {
  position: relative;
  width: 1040px;
  height: 984px;
  transform-origin: center center;
  z-index: 3;
}

/* --------------------------------------------------------------- titlebar */

#titlebar {
  position: absolute;
  left: 16px;
  top: 6px;
  width: 1008px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  clip-path: var(--notch);
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.5), var(--edge) 22%, var(--edge) 78%, rgba(206, 226, 250, 0.5));
  box-shadow: 0 10px 34px rgba(2, 6, 14, 0.75);
}
#titlebar::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch);
  background:
    /* The bar runs from the rebel crest to the imperial one, so it warms up at
       the left end and goes out at the right. */
    linear-gradient(90deg, rgba(255, 59, 48, 0.14), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(18, 40, 68, 0.94), rgba(5, 13, 26, 0.94));
}
#titlebar > * { position: relative; z-index: 1; }

.title-text { flex: 1; text-align: center; }
.title-text h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  font-stretch: 87.5%;
  color: #f2f8ff;
  text-shadow: 0 0 18px rgba(90, 216, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.title-text p {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ice-dim);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.title-text p b {
  width: 4px;
  height: 4px;
  rotate: 45deg;
  background: var(--holo);
  opacity: 0.7;
}

/* crests */

.crest {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
}
.crest svg { width: 100%; height: 100%; display: block; }
.crest-rebel { color: var(--rebel); fill: var(--rebel); filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.7)); }

/* The cog is stamped in the black and traced by a tight steel line, so it reads
   as a shape cut out of the light rather than one drawn in it. The inner shadow
   does the tracing; the outer one is the floodlight it is standing under. */
.crest-empire {
  color: var(--empire);
  fill: var(--empire);
  filter:
    drop-shadow(0 0 1.5px rgba(220, 238, 255, 0.95))
    drop-shadow(0 0 9px rgba(150, 194, 240, 0.5));
}

.crest-mini {
  width: 17px;
  height: 17px;
  flex: none;
  display: block;
}
.crest-mini svg { width: 100%; height: 100%; display: block; }
.crest-mini.crest-rebel { color: var(--rebel); fill: var(--rebel); filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.75)); }
/* At 17px the cog's spokes are barely a pixel across, and a black line that
   thin disappears whatever you trace it with. The small crest is the steel. */
.crest-mini.crest-empire {
  color: var(--empire-hot);
  fill: var(--empire-hot);
  filter: drop-shadow(0 0 6px rgba(150, 194, 240, 0.6));
}

/* --------------------------------------------------------------- scene box */

#scene {
  position: absolute;
  left: 16px;
  top: 66px;
  width: 700px;
  height: 902px;
  overflow: hidden;
}

/* The camera is what the hit cutscene pushes in with; everything on the table
   lives inside it so a zoom scales board, miniatures and effects together. */
#camera {
  position: absolute;
  inset: 0;
  transform-origin: 350px 439px;
  transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* -------------------------------------------------------------------- HUD */

#hud {
  position: absolute;
  left: 732px;
  top: 66px;
  width: 292px;
  height: 902px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel {
  position: relative;
  clip-path: var(--notch);
  background: linear-gradient(160deg, var(--edge-hot), var(--edge) 46%, rgba(50, 94, 144, 0.3));
  padding: 11px 13px;
  box-shadow: 0 10px 28px rgba(2, 6, 14, 0.6);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch);
  background:
    repeating-linear-gradient(to bottom, rgba(140, 200, 255, 0.028) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--hull-2), var(--hull));
}
.panel > * { position: relative; z-index: 1; }

/* faction panels */

.panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--edge);
}
.side-name {
  flex: 1;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  font-stretch: 87.5%;
}
.score {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#panel-rebel { background: linear-gradient(160deg, rgba(255, 59, 48, 0.8), var(--edge) 46%, rgba(50, 94, 144, 0.3)); }
#panel-rebel .side-name, #panel-rebel .score { color: var(--rebel-hot); }

/* The imperial panel is the one black box in the console: a steel hairline with
   the lights out behind it. The edge is the element, the fill is the ::before,
   so the black has to be set on the pseudo-element rather than up here. */
#panel-empire { background: linear-gradient(160deg, rgba(214, 234, 255, 0.85), var(--edge) 46%, rgba(50, 94, 144, 0.3)); }
#panel-empire::before {
  background:
    repeating-linear-gradient(to bottom, rgba(190, 220, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #080c14, var(--empire-deep));
}
#panel-empire .side-name, #panel-empire .score { color: var(--empire-hot); }

/* Whose move it is: the panel wakes up and gets a lit spine down its edge. */
.panel-side { transition: box-shadow 0.25s, opacity 0.25s; opacity: 0.72; }
.panel-side.active-side { opacity: 1; }
.panel-side::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 0;
  width: 2px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s;
}
#panel-rebel.active-side::after { opacity: 1; background: var(--rebel); box-shadow: 0 0 14px 2px rgba(255, 59, 48, 0.85); }
/* A 2px black spine down a black panel is nothing to see, so the Empire's is
   the steel line lighting up rather than the black. */
#panel-empire.active-side::after { opacity: 1; background: var(--empire-hot); box-shadow: 0 0 14px 2px rgba(180, 216, 255, 0.7); }

.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 0;
  color: var(--ice-dim);
}
.stat b {
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- turn panel */

.panel-turn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 11px 15px 15px;
}
.panel-turn::before { background: linear-gradient(180deg, var(--hull-3), var(--hull)); }

/* The strip along the top of the console: a live light and what it is doing. */
.console-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.console-head em { margin-left: auto; font-style: normal; color: var(--holo); }
.console-head .led {
  width: 7px;
  height: 7px;
  flex: none;
  rotate: 45deg;
  background: var(--lock);
  box-shadow: 0 0 8px var(--lock);
  animation: led-blink 2.4s ease-in-out infinite;
}
@keyframes led-blink { 0%, 100% { opacity: 1; } 60% { opacity: 0.25; } }

#turn-banner {
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  padding: 9px 0;
  clip-path: var(--notch-sm);
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.06), rgba(255, 59, 48, 0.32), rgba(255, 59, 48, 0.06));
  box-shadow: inset 0 -1px 0 rgba(255, 59, 48, 0.6), inset 0 1px 0 rgba(255, 59, 48, 0.6);
  color: var(--rebel-hot);
  text-shadow: 0 0 14px rgba(255, 59, 48, 0.7);
  transition: color 0.2s;
}
/* The rebel banner is a band of light. The imperial one is the same band with
   the light taken out of it: black across the middle, ruled top and bottom in
   steel. Whose turn it is reads off the brightness before it reads off the
   words. */
#turn-banner.empire {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.24));
  box-shadow: inset 0 -1px 0 rgba(200, 228, 255, 0.7), inset 0 1px 0 rgba(200, 228, 255, 0.7);
  color: var(--empire-hot);
  text-shadow: 0 0 14px rgba(160, 204, 250, 0.5);
}

/* ---------------------------------------------------------- advance gauge */

/* Who is winning the race, as a needle either side of centre. It is the pip
   difference, which is the one number that says who is ahead and by how much,
   and it belongs on a console rather than in a table of figures. */
.gauge { width: 100%; }

.gauge-track {
  position: relative;
  height: 12px;
  background:
    repeating-linear-gradient(to right, rgba(140, 190, 240, 0.22) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, rgba(4, 10, 20, 0.9), rgba(10, 22, 40, 0.9));
  box-shadow: inset 0 0 0 1px var(--edge);
}
.gauge-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.35), var(--rebel));
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.7);
  transition: left 0.4s ease, width 0.4s ease;
}
/* Black on a dark track is not a needle, it is a hole. The steel line round it
   is what gives the imperial lead a length you can read. */
.gauge-fill.empire {
  background: linear-gradient(90deg, var(--empire), rgba(5, 8, 14, 0.5));
  box-shadow: 0 0 0 1px rgba(200, 228, 255, 0.85), 0 0 12px rgba(150, 194, 240, 0.35);
}
.gauge-centre {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  margin-left: -0.5px;
  background: var(--edge-hot);
}
.gauge-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.gauge-foot b { color: var(--ice); letter-spacing: 0.14em; }

/* -------------------------------------------------------------------- dice */

#dice-tray {
  display: flex;
  gap: 12px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
}

/* Read-outs rather than ivory: a lit plate with the value burned into it. */
.die {
  width: 48px;
  height: 48px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 8px;
  flex: none;
  clip-path: var(--notch-sm);
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.die::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch-sm);
  z-index: 0;
}
.die > * { position: relative; z-index: 1; }

.die.rebel {
  background: linear-gradient(160deg, var(--rebel-hot), rgba(255, 59, 48, 0.5));
  filter: drop-shadow(0 0 9px rgba(255, 59, 48, 0.45));
}
.die.rebel::before { background: linear-gradient(160deg, #2c0a07, #140403); }
/* An imperial die is a black plate with the read-out burned white into it. */
.die.empire {
  background: linear-gradient(160deg, rgba(214, 234, 255, 0.95), rgba(120, 158, 200, 0.5));
  filter: drop-shadow(0 0 9px rgba(150, 194, 240, 0.35));
}
.die.empire::before { background: linear-gradient(160deg, #0a0e16, var(--empire-deep)); }

.pip {
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  width: 8px;
  height: 8px;
}
.die.rebel .pip { background: var(--rebel-hot); box-shadow: 0 0 7px var(--rebel), 0 0 2px #fff; }
.die.empire .pip { background: #eef6ff; box-shadow: 0 0 7px rgba(186, 220, 255, 0.9), 0 0 2px #fff; }

.die.spent { opacity: 0.3; transform: scale(0.82); filter: none; }
.die.rolling { animation: die-tumble 0.5s ease-out; }

@keyframes die-tumble {
  0% { transform: translateY(-20px) rotate(-140deg) scale(0.7); }
  60% { transform: translateY(3px) rotate(12deg) scale(1.06); }
  100% { transform: none; }
}

/* --------------------------------------------------------- doubling cube */

#cube-holder { min-height: 46px; display: grid; place-items: center; }
#cube {
  width: 44px;
  height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  clip-path: var(--notch-sm);
  background: linear-gradient(160deg, var(--edge-hot), rgba(88, 150, 210, 0.4));
  cursor: default;
}
#cube::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch-sm);
  background: linear-gradient(160deg, #0e2038, #060f1e);
}
#cube i {
  position: relative;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: var(--ice);
  text-shadow: 0 0 10px rgba(90, 216, 255, 0.8);
}
#cube.owned-rebel { background: linear-gradient(160deg, var(--rebel-hot), rgba(255, 59, 48, 0.45)); }
#cube.owned-rebel i { color: var(--rebel-hot); text-shadow: 0 0 10px rgba(255, 59, 48, 0.9); }
#cube.owned-empire { background: linear-gradient(160deg, rgba(214, 234, 255, 0.9), rgba(120, 158, 200, 0.45)); }
#cube.owned-empire::before { background: linear-gradient(160deg, #0a0e16, var(--empire-deep)); }
#cube.owned-empire i { color: var(--empire-hot); text-shadow: 0 0 10px rgba(170, 212, 255, 0.8); }

/* ---------------------------------------------------------------- message */

#message {
  margin: 0;
  width: 100%;
  flex: 1;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  color: var(--ice-2);
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--edge);
  min-height: 58px;
}
#message b { color: var(--ice); font-weight: 600; }

/* ---------------------------------------------------------------- buttons */

.actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

/* A button is two layers: the outer box is the hairline edge, and a ::before
   inset by a pixel is the fill. The label is bare text inside the button, so
   the fill is pushed behind it with a negative z-index and the button isolates
   itself to keep that from dropping through to the panel below. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  padding: 10px 6px;
  color: var(--ice);
  border: 0;
  clip-path: var(--notch-sm);
  background: linear-gradient(160deg, var(--edge-hot), var(--edge));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--notch-sm);
  background: linear-gradient(180deg, rgba(30, 60, 96, 0.95), rgba(14, 30, 52, 0.95));
  transition: background 0.15s;
}
.btn:hover:not(:disabled)::before { background: linear-gradient(180deg, rgba(46, 88, 138, 0.98), rgba(22, 46, 78, 0.98)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.3; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--holo); outline-offset: 2px; }

/* The primary action is the player's own, and the player flies with the
   Rebellion - so it wears their red. The label is set in the dark rather than
   in white: on a mid-red fill a near-black reads at about 4.8:1 where white
   manages 3.6, and this is the button the whole turn goes through. */
.btn-primary {
  background: linear-gradient(160deg, #ffd7d1, var(--rebel));
  color: #2b0603;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 10px rgba(255, 59, 48, 0.35));
}
.btn-primary::before { background: linear-gradient(180deg, var(--rebel-hot), var(--rebel) 55%, #b81c10); }
.btn-primary:hover:not(:disabled)::before { background: linear-gradient(180deg, #ffc9c2, #ff5b50 55%, #cd2617); }

.btn-ghost { background: var(--edge); }
.btn-ghost::before { background: rgba(6, 15, 28, 0.72); }
.btn-ghost:hover:not(:disabled)::before { background: rgba(26, 54, 90, 0.9); }

#btn-done[hidden] { display: none; }

.panel-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px;
}

/* ---------------------------------------------------------------- dialogs */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(2, 5, 12, 0.8);
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out;
}
.overlay[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  position: relative;
  width: 540px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 32px;
  clip-path: var(--notch);
  background: linear-gradient(150deg, var(--edge-hot), var(--edge) 40%, rgba(50, 94, 144, 0.3));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
  animation: dialog-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.dialog::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch);
  background:
    repeating-linear-gradient(to bottom, rgba(140, 200, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #0d2039, #050d1c);
  z-index: 0;
}
.dialog > * { position: relative; z-index: 1; }

@keyframes dialog-in {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.dialog h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: #f2f8ff;
}
.dialog h2.rebel { color: var(--rebel); text-shadow: 0 0 18px rgba(255, 59, 48, 0.55); }
/* A heading has to be read before it has to be themed, and black type on the
   dialog's own black fill is not a heading. The Empire takes the steel here. */
.dialog h2.empire { color: var(--empire-hot); text-shadow: 0 0 18px rgba(150, 194, 240, 0.45); }
.dialog h2 + p { margin-top: 0; }
.dialog p { color: var(--ice-2); font-size: 13px; line-height: 1.65; margin: 0 0 18px; }
.dialog .dialog-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.dialog .dialog-actions .btn { flex: 1; min-width: 124px; padding: 12px 10px; }

/* A rule under the heading, so a dialog reads like a transmission. */
.dialog h2::after {
  content: "";
  display: block;
  height: 1px;
  margin: 10px 0 0;
  background: linear-gradient(90deg, var(--edge-hot), transparent);
}

.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin-bottom: 8px;
}
.dialog p.field-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(140, 168, 200, 0.85);
  margin: -8px 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--edge);
}

.choices { display: flex; gap: 7px; flex-wrap: wrap; }
.choice {
  position: relative;
  flex: 1;
  min-width: 70px;
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 10px 8px;
  cursor: pointer;
  color: var(--ice);
  border: 0;
  clip-path: var(--notch-sm);
  background: var(--edge);
  transition: filter 0.15s;
}
.choice::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--notch-sm);
  background: rgba(10, 24, 44, 0.9);
  transition: background 0.15s;
  z-index: -1;
}
.choice { isolation: isolate; }
.choice:hover::before { background: rgba(28, 58, 96, 0.95); }
.choice[aria-pressed="true"] {
  background: linear-gradient(160deg, #ffd7d1, var(--rebel));
  color: #2b0603;
  font-weight: 600;
}
.choice[aria-pressed="true"]::before { background: linear-gradient(180deg, var(--rebel-hot), var(--rebel) 60%, #b81c10); }

.rules-list { font-size: 12.5px; line-height: 1.75; color: var(--ice-2); padding-left: 20px; margin: 0 0 16px; }
.rules-list b { color: var(--ice); font-weight: 600; }
.rules-list li::marker { color: var(--rebel); font-family: var(--font-mono); font-size: 11px; }

.kbd {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(90, 216, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(90, 216, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--holo);
}