.brandLogo{
  width: 104px;
  height: 104px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  /* Make the logo more prominent without increasing the topbar's layout height.
     CSS transforms don't affect layout, so the topbar stays the same size. */
  transform: scale(1.16);
  /* Anchor the scale on the right edge so the logo grows leftward and
     doesn't visually overlap the header text (scale doesn't affect layout). */
  transform-origin: right center;
}

@media (max-width: 520px){
  .brandLogo{ transform: scale(1.12); }
  .brand{ margin-left: 12px; }
}




    :root{
  /* Appearance tokens (default: Cozy (Midnight Shack)) */
  --bg:#070a12;
  --panel:#1b1912;
  --card:#242015;
  --text:#ead9b5;
  --btnText: var(--text);
  --muted:#d8c7a4;
  --line: rgba(214,194,139,.22);

  --accent:#f59e0b;
  --accent2:#fbbf24;
  --acc: var(--accent);
  --acc2: var(--accent2);
  --street:#93c5fd;

  --good:#4ade80;
  --bad:#fb7185;
  --warn:#fbbf24;

  --btn:#232016;
  --btn2:#1a1710;

  --shadow: 0 12px 34px rgba(0,0,0,.45);
  --radius:18px;
  --btnRadius:14px;

  --glow1: rgba(245,158,11,.12);
  --glow2: rgba(148,163,184,.06);

--topbar: rgba(20,18,14,.84);
--bgDecor:
  radial-gradient(1200px 700px at 18% 10%, rgba(245,158,11,.14), transparent 58%),
  radial-gradient(900px 600px at 82% 30%, rgba(148,163,184,.07), transparent 62%),
  radial-gradient(520px 240px at 86% 10%, rgba(234,217,181,.06), transparent 62%);

  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-title: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-dot: "Courier New", "Lucida Console", Monaco, Consolas, monospace;
  --marqueeInk: color-mix(in oklab, var(--accent) 86%, white 14%);
  --marqueeGlow: color-mix(in oklab, var(--accent) 68%, white 32%);

  --base-font-size: 14px;
  --title-weight: 800;
  --title-letter: .2px;
  --motion: 1; /* 1=normal, 0=reduced */
}

/* Kids (Under 13): Color Pop */
html[data-theme="kids"]{
  --bg:#0b1026;
  --panel:#121a3a;
  --card:#141f46;
  --text:#fff3a3;
  --btnText: #0b3d91;
  --muted:#ffe08a;
  --line: rgba(255, 238, 140, .22);

  --accent:#ffe066;
  --accent2:#60a5fa;
  --marqueeInk: color-mix(in oklab, var(--accent2) 70%, #fff3a3 30%);
  --marqueeGlow: color-mix(in oklab, var(--accent2) 82%, white 18%);

  --good:#35f2a1;
  --bad:#ff4d6d;
  --warn:#ffd166;

  --btn:#ffe066;
  --btn2:#ffef99;

  --glow1: rgba(255, 238, 140, .22);
  --glow2: rgba(96,165,250,.12);

--topbar: rgba(16,24,64,.78);
--bgDecor:
  radial-gradient(1100px 720px at 18% 12%, rgba(255, 238, 140, .46), transparent 60%),
  radial-gradient(980px 660px at 84% 18%, rgba(96,165,250,.24), transparent 62%),
  radial-gradient(800px 520px at 56% 92%, rgba(53,242,161,.16), transparent 62%),
  radial-gradient(620px 420px at 10% 86%, rgba(255, 238, 140, .34), transparent 62%);

  --radius:22px;
  --btnRadius:18px;

  --font-body: "Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue","Trebuchet MS",system-ui,sans-serif;
  --font-title: "Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue","Trebuchet MS",system-ui,sans-serif;
  --title-weight: 900;
  --title-letter: .15px;
}

/* Teens/Young Adults (13–29): Neon Circuit */
html[data-theme="tech"]{
  --bg:#05060a;
  --panel:#082429;
  --card:#0a3038;
  --text:#e7f0ff;
  --muted:#9fb1d1;
  --line: rgba(34,211,238,.22);

  --accent:#22d3ee;
  --accent2:#a855f7;
  --marqueeInk: color-mix(in oklab, var(--accent) 72%, white 28%);
  --marqueeGlow: color-mix(in oklab, var(--accent) 84%, white 16%);

  --good:#a3ff12;
  --bad:#ff3d81;
  --warn:#ffd166;

  --btn:#07272e;
  --btn2:#061f25;

  --glow1: rgba(34,211,238,.15);
  --glow2: rgba(168,85,247,.12);

--topbar: rgba(5,18,19,.84);
--bgDecor:
  radial-gradient(980px 620px at 14% 18%, rgba(34,211,238,.14), transparent 60%),
  radial-gradient(880px 560px at 84% 20%, rgba(168,85,247,.12), transparent 62%),
  repeating-linear-gradient(135deg, rgba(34,211,238,.055) 0 1px, transparent 1px 12px),
  repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px);

  --radius:16px;
  --btnRadius:12px;

  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-title: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --title-weight: 900;
  --title-letter: .9px;
}

/* Calm Mode: gentler contrast + fewer alarms */
html[data-calm="1"]{
  --bad: rgba(251,113,133,.88);
  --line: rgba(148,163,184,.18);
}

/* Large Text */
html[data-text="lg"]{ --base-font-size: 18px; }

* { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--base-font-size); }

    body{ background: var(--bgDecor), var(--bg); }

    code { background: rgba(255,255,255,.06); padding: 0.1rem 0.3rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); }

    .topbar {
      display:grid;
      grid-template-columns: minmax(220px, auto) minmax(280px, 1fr) auto;
      align-items:center;
      padding: 12px 16px; border-bottom: 1px solid var(--line);
      position: sticky; top: 0; z-index: 5000; background: var(--topbar); backdrop-filter: blur(8px);
      gap: 12px;
      overflow: visible;
}

    .brand { display: flex; gap: 12px; align-items: center; margin-left: 10px; min-width:0; }
    .brandText{ min-width: 0; }
    .logo { font-size: 28px; }
    .title { font-family: var(--font-title); font-weight: var(--title-weight); letter-spacing: var(--title-letter); font-weight: 800; letter-spacing: .2px; }
    .brandText .title, .brandText .subtitle{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(420px, 30vw);
    }
    .subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }
    /* If the subtitle is intentionally blank, don't reserve vertical space. */
    #programSubtitle:empty{ display:none; margin-top:0; }

    
    .headerStatus{
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:0;
      padding:2px 0;
      overflow:visible;
    }
    @media (min-width: 1181px){
      .headerStatus{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        width:min(640px, calc(100% - 420px));
        pointer-events:none;
      }
      .headerBannerFrame,
      .headerGamePill{
        pointer-events:auto;
      }
    }
    .headerBannerFrame{
      width:100%;
      max-width:min(640px, 100%);
      min-width:0;
      height:112px;
      border:none;
      border-radius:0;
      padding:0;
      background:transparent;
      box-shadow:none;
      overflow:hidden;
      position:relative;
      cursor:pointer;
      transition:transform .18s ease;
      display:flex;
      align-items:center;
      justify-content:center;
      appearance:none;
    }
    .headerBannerFrame::before{
      display:none;
    }
    .headerBannerFrame:hover,
    .headerBannerFrame:focus-visible{
      transform:translateY(-1px);
      outline:none;
    }
    .headerBannerImg{
      width:auto;
      height:100%;
      max-width:none;
      max-height:none;
      display:block;
      object-fit:contain;
      object-position:center;
      border-radius:0;
      position:relative;
      z-index:0;
      background:transparent;
      flex:0 0 auto;
    }
    .headerGamePill{
      width:auto;
      max-width:min(520px, 58vw);
      min-width:280px;
      padding:10px 18px;
      border-radius:14px;
      border:1px solid color-mix(in oklab, var(--accent) 32%, rgba(255,255,255,.12));
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
        linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(0,0,0,.34),
        0 9px 18px rgba(0,0,0,.20);
      position:relative;
      text-align:center;
      font-family: var(--font-mono);
      font-size:15px;
      line-height:1.1;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: var(--marqueeInk);
      text-shadow:
        0 0 5px color-mix(in oklab, var(--marqueeGlow) 52%, transparent),
        0 0 12px color-mix(in oklab, var(--marqueeGlow) 26%, transparent);
    }
    .headerGamePill::before{
      content:"";
      position:absolute;
      inset:3px;
      border-radius:11px;
      border:1px solid color-mix(in oklab, var(--accent) 20%, rgba(255,255,255,.08));
      pointer-events:none;
      opacity:.68;
    }
    body[data-app-view="home"] .headerBannerFrame{ display:flex; }
    body[data-app-view="home"] .headerGamePill{ display:none !important; }
    body[data-app-view="game"] .headerBannerFrame{ display:none !important; }
    body[data-app-view="game"] .headerGamePill{ display:block; margin-inline:auto; }
    .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-right: 10px; }
    .controls button{ min-width: 96px; }

    .controls button[hidden]{ display:none !important; }
    .dlgHeadRow{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
    .dlgHeadRow > div:first-child{ min-width:0; flex:1 1 auto; }

    .aeaCardTools{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
      margin:0 0 12px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .aeaCardTools .secondary{ min-width: 88px; }
    .aeaActionZone{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:16px !important;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .aeaActionZone > :first-child{ margin-right:auto; }
    .aeaActionZone button,
    .aeaActionZone .btn,
    .aeaActionZone .secondary,
    .aeaActionZone .primary{
      min-width: 148px;
    }
    .aeaActionZone.aeaActionZoneSingle{ justify-content:flex-end; }
    .aeaActionZone.aeaActionZoneSingle > :first-child{ margin-right:0; }

    #homeBtn[hidden]{ display:none !important; }

    body[data-app-view="home"] #optionsBtn{ display:none !important; }

    @media (max-width: 900px){
      .headerBannerFrame{ max-width:100%; }
      .headerGamePill{ max-width:min(420px, 76vw); min-width:0; font-size:14px; }
    }
    @media (prefers-reduced-motion: reduce){
    }

    @media (max-width: 1180px){
      .topbar{
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "brand controls"
          "status status";
      }
      .brand{ grid-area: brand; }
      .controls{ grid-area: controls; }
      .headerStatus{ grid-area: status; justify-content:center; padding-left: 0; position:static; transform:none; width:auto; pointer-events:auto; }
      .brandText .title, .brandText .subtitle{ max-width: min(520px, 52vw); }
    }
    @media (max-width: 760px){
      .topbar{ grid-template-columns: 1fr; grid-template-areas: "brand" "status" "controls"; }
      .brand{ margin-left: 8px; }
      .controls{ justify-content:flex-start; }
      .controls button{ min-width: 0; }
      .headerStatus{ padding-left: 8px; justify-content:flex-start; }
      .brandText .title, .brandText .subtitle{ max-width: 72vw; }
    }

    .small { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
    select, input[type="file"] {
      background: var(--btn2); color: var(--text); border: 1px solid var(--line);
      padding: 8px 10px; border-radius: 10px;
    }
    button {
      background: var(--btn); color: var(--btnText, var(--text)); border: 1px solid var(--line);
      padding: 9px 12px; border-radius: 10px; cursor: pointer;
    }
    button.secondary { background: transparent; }
    button:hover { filter: brightness(1.1); }
    button:disabled { opacity: 0.5; cursor: not-allowed; }

    .layout { display: grid; grid-template-columns: 380px 1fr; gap: 14px; padding: 14px; }
    @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

    .panel {
      background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
      padding: 14px;
    }

    .stage { min-height: 70vh; }
    .app {
      background: var(--card); border: 1px solid var(--line); border-radius: 16px;
      padding: 14px; min-height: 70vh;
    }

/* Launch splash merged into index */
.launchSplashOverlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px, 4vw, 48px);
  background: radial-gradient(1100px 600px at 50% 0%, rgba(255,196,85,.08), transparent 60%),
              radial-gradient(1000px 600px at 50% 100%, rgba(255,196,85,.06), transparent 60%),
              rgba(5,6,10,.96);
}
html[data-skip-launch-splash="1"] .launchSplashOverlay{
  display:none;
}
.launchSplashShell{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.launchSplashStage{
  position:relative;
  width:min(1600px, calc(100vw - 96px), calc((100vh - 96px) * (16 / 9)));
  aspect-ratio:16 / 9;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,220,150,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  background:#111;
  isolation:isolate;
}
.launchSplashArt{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.launchOpenArcade{
  position:absolute;
  left:38.75%;
  top:85.78%;
  width:22.5%;
  height:9.11%;
  border-radius:24px;
  outline:none;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,231,150,.96), rgba(247,191,64,.96));
  color:#111827;
  border:2px solid rgba(255,250,220,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 26px rgba(0,0,0,.36),
    0 0 18px rgba(255,212,96,.28);
  font-family: "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  font-weight:900;
  font-size:clamp(16px, 1.7vw, 28px);
  letter-spacing:.04em;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.launchOpenArcade:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.launchOpenArcade:active{
  transform:translateY(1px);
}
.launchOpenArcade:focus-visible{
  box-shadow:0 0 0 4px rgba(255,240,190,.95), 0 0 0 8px rgba(20,27,45,.95), 0 10px 26px rgba(0,0,0,.36);
}
.launchSplashCorner{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  z-index:4;
  pointer-events:none;
}
.launchSplashChipbar{
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,8,10,.54);
  backdrop-filter: blur(8px);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.launchSplashCheck{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:#f1e6cf;
  user-select:none;
  cursor:pointer;
}
.launchSplashCheck input{
  width:18px;
  height:18px;
  accent-color:#e3b85d;
  cursor:pointer;
}
.launchSplashTiny{
  font-size:12px;
  color:rgba(241,230,207,.82);
  pointer-events:auto;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(8,8,10,.48);
  backdrop-filter: blur(8px);
}
@media (max-width: 980px){
  .launchSplashOverlay{ padding:18px; }
  .launchSplashStage{ width:min(calc(100vw - 36px), calc((100vh - 36px) * (16 / 9))); }
  .launchSplashCorner{ left:10px; right:10px; bottom:10px; flex-direction:column; align-items:stretch; }
  .launchSplashChipbar, .launchSplashTiny{ width:100%; }
  .launchSplashTiny{ text-align:center; }
}
@media (max-width: 760px){
  .launchSplashOverlay{ padding:10px; }
  .launchSplashStage{ width:min(calc(100vw - 20px), calc((100vh - 20px) * (16 / 9))); border-radius:18px; }
  .launchOpenArcade{ border-radius:16px; font-size:clamp(14px, 3.2vw, 18px); }
  .launchSplashCorner{ left:8px; right:8px; bottom:8px; }
}

/* Shack Triage Workshop Stage */
.app.triageStage{
  /* Workshop photo + gentle dark overlay for readability */
  background:
    linear-gradient(180deg, rgba(7,10,18,.22), rgba(7,10,18,.14)),
    url("../img/shack_triage/workbench_bg.jpg") center/cover no-repeat;
  padding: 18px;
}
.app.triageStage .card.triage{
  background: rgba(7,10,18,.30);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);

/* Shack Triage: action button states */
.app.triageStage button.triageFail{
  background: var(--btn);
  border-color: var(--bad);
  box-shadow: inset 0 0 0 2px var(--bad);
}
.app.triageStage button.triagePass{
  border-color: var(--good);
}
}

/* Choice Scramble: Kitchen Chaos Stage */
.app.scrambleStage{
  background:
    /* Darker overlay than triage: the kitchen scene has brighter highlights */
    linear-gradient(180deg, rgba(7,10,18,.44), rgba(7,10,18,.30)),
    url("../img/choice_scramble/kitchen_bg.jpg") center/cover no-repeat;
  padding: 18px;
}
.app.scrambleStage .card.scramble{
  /* Stronger glass to keep question text readable over the busy background */
  background: rgba(7,10,18,.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}
.app.scrambleStage .choice{
  background: rgba(255,255,255,.08);
}
.app.scrambleStage .choice:hover{
  background: rgba(255,255,255,.11);
}
.scrambleHeatPill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  font-size:12px; color: var(--muted);
}
.scrambleBanter{ font-size:12px; color: var(--muted); opacity:.95; }



/* 3-Lives Survival: Question Stage */
.app.survivalStage{
  background:
    /* Similar readability overlay to Shack Triage, tuned for brighter highlights */
    linear-gradient(180deg, rgba(7,10,18,.44), rgba(7,10,18,.30)),
    url("../img/survival/survival_question_bg.jpg") center/cover no-repeat;
  padding: 18px;
}
.app.survivalStage .card.survival{
  background: rgba(7,10,18,.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}
.app.survivalStage .choice{
  background: rgba(255,255,255,.08);
}
.app.survivalStage .choice:hover{
  background: rgba(255,255,255,.11);
}


/* Coax Circuit: Bench Stage (background art removed per user request) */
.app.coaxStage{
  position: relative;
  background:
    radial-gradient(900px 560px at 18% 18%, rgba(245,158,11,.10), transparent 58%),
    radial-gradient(820px 520px at 82% 22%, rgba(148,163,184,.08), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.78), rgba(7,10,18,.52));
  padding: 18px;
}
/* (Intentionally no ::before background image) */
.app.coaxStage .card.coax{
  background: rgba(7,10,18,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}

/* Summary cards need stronger readability than the playfield */
.app.coaxStage .card.coaxSummary{
  background: rgba(7,10,18,.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0,0,0,.40);
}

/* Coax Circuit: tighten the Run Stats label/value spacing on the Final Results screen */
.card.coaxSummary .summaryCol:first-child .summaryLine{
  display: grid;
  grid-template-columns: 220px 96px;
  gap: 10px;
  justify-content: start;
}
.card.coaxSummary .summaryCol:first-child .summaryLine span:last-child{
  text-align: right;
}
@media (max-width: 520px){
  .card.coaxSummary .summaryCol:first-child .summaryLine{
    grid-template-columns: 1fr auto;
  }
}

/* Coax Circuit splash (intro) */
.coaxSplashGrid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
}
.coaxSplashArtWrap{
  /* No picture frame around the splash art */
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.coaxSplashArt{
  max-width: 100%;
  height: auto;
  display:block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.35));
}
.coaxSplashPanel{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.coaxSplashBullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}
.coaxSplashActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
@media (max-width: 920px){
  .coaxSplashGrid{ grid-template-columns: 1fr; }
}
.coaxHud{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.coaxPill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  font-size:12px; color: var(--muted);
}
.coaxGrid{
  --coax-size: 46px;
  display:grid;
  grid-template-columns: repeat(var(--coax-w), var(--coax-size));
  gap: 8px;
  justify-content:center;
  align-content:center;
  margin: 12px auto;
  user-select:none;
}
@media (max-width: 520px){
  .coaxGrid{ --coax-size: 40px; gap: 6px; }
}
.coaxTile{
  width: var(--coax-size);
  height: var(--coax-size);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4px;
  cursor: pointer;
}
.coaxTile:hover{ background: rgba(255,255,255,.06); }
.coaxTile:disabled{
  cursor: default;
  opacity: .85;
}
.coaxTile.isFixed{
  background: rgba(0,0,0,.18);
}
.coaxTile.isBlank{
  background: rgba(0,0,0,.10);
}
.coaxTile.isSel{
  outline: 2px solid rgba(245,158,11,.55);
  outline-offset: 1px;
}
.coaxTile.isHot{
  box-shadow: 0 0 0 2px rgba(94,234,212,.22) inset;
}
.coaxTile.isHot.isHotFlash{
  box-shadow: 0 0 0 2px rgba(94,234,212,.55) inset, 0 0 18px rgba(94,234,212,.18);
  animation: coaxHotPulse 700ms ease-out 1;
}
@keyframes coaxHotPulse{
  0%{ box-shadow: 0 0 0 2px rgba(94,234,212,.18) inset; }
  45%{ box-shadow: 0 0 0 2px rgba(94,234,212,.90) inset, 0 0 22px rgba(94,234,212,.25); }
  100%{ box-shadow: 0 0 0 2px rgba(94,234,212,.22) inset; }
}
.coaxPulseNote{
  margin-left: 10px;
  color: rgba(94,234,212,.92);
  font-weight: 700;
}
.coaxTile .mini{
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .2px;
}
.coaxTile .mini b{ font-size: 12px; color: var(--text); }

.coaxBlankDot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,.28);
}
.coaxTile{
  --coax-jacket: rgba(148,163,184,.78);
  --coax-core: rgba(253,230,138,.92);
  --coax-tip: rgba(2,6,23,.35);
  --coax-tip-core: rgba(253,230,138,.95);
}
.coaxTile.isHot{
  --coax-core: rgba(94,234,212,.95);
  --coax-tip-core: rgba(94,234,212,.98);
}
.coaxTile.isFixed{
  --coax-jacket: rgba(148,163,184,.48);
  --coax-core: rgba(253,230,138,.62);
}
.coaxSvg{
  width: 100%;
  height: 100%;
  display: block;
}
.coaxJacket{
  stroke: var(--coax-jacket);
  stroke-width: 14;
  stroke-linecap: round;
}
.coaxCore{
  stroke: var(--coax-core);
  stroke-width: 5;
  stroke-linecap: round;
}
.coaxTip{
  fill: var(--coax-tip);
  stroke: var(--coax-jacket);
  stroke-width: 2.5;
}
.coaxTipCore{
  fill: var(--coax-tip-core);
  opacity: .96;
}
.coaxHub{
  fill: rgba(0,0,0,.22);
  stroke: rgba(148,163,184,.20);
  stroke-width: 2;
}
.coaxHintRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
}
.coaxHintRow .hint{ margin:0; }



/* Coax Circuit: End screen layout tweaks (keep stats comfortably away from misses column) */
.card.coaxSummary .summaryGrid{
  /* Cap the right column so the art frame and misses don't stretch across the whole screen */
  grid-template-columns: minmax(280px, 420px) minmax(320px, 660px);
  justify-content: center;
  gap: 22px;
}
.card.coaxSummary .summaryCol{
  padding-right: 8px;
}

.card.coaxSummary .coaxEndArtWrap{
  /* No framed container: let the art float cleanly on the end screens */
  width: 100%;
  max-width: 560px;
  margin: 0 auto 12px auto;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card.coaxSummary .coaxEndArt{
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
@media (max-width: 860px){
  .card.coaxSummary .summaryGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .card.coaxSummary .summaryCol{ padding-right: 0; }
}



/* Coax Circuit: Tile polish (connectors, mounted fixed tiles, rotate animation, and skin toggle) */
.coaxPillBtn{
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.coaxPillBtn:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.coaxPillBtn:active{ transform: translateY(1px); }

.coaxTileInner{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.coaxTile.coaxAnim .coaxTileInner{
  animation: coaxTurnIn 140ms cubic-bezier(.2,.9,.2,1);
  transform-origin: 50% 50%;
}

@keyframes coaxTurnIn{
  from{ transform: rotate(var(--anim-from, -90deg)) scale(.98); filter: brightness(1.06); }
  to{ transform: rotate(0deg) scale(1); filter: brightness(1); }
}

/* Connector sleeves for joined ends */
.coaxCoupler{
  fill: rgba(2,6,23,.34);
  stroke: rgba(148,163,184,.34);
  stroke-width: 2;
}
.coaxCoupler.isHotJoin{
  stroke: rgba(94,234,212,.42);
  fill: rgba(2,6,23,.28);
}
.coaxTip.isJoin{
  stroke-width: 3.0;
}
.coaxTip.isHotJoin{
  stroke: rgba(94,234,212,.55);
}
.coaxTipCore.isHotJoin{
  fill: rgba(94,234,212,.98);
}

/* Fixed tiles look mounted (bolts + bracket feel) */
.coaxTile.isFixed{
  background:
    radial-gradient(circle at 18% 18%, rgba(148,163,184,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 18%, rgba(148,163,184,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 82%, rgba(148,163,184,.30) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 82%, rgba(148,163,184,.30) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -1px 0 rgba(0,0,0,.25) inset;
}

/* Skin: schematic (PCB trace view)
   IMPORTANT: apply to BOTH the main game card and the mini-board shown inside the
   question/rotate screen. The mini-board lives in a different card, so we also
   stamp the skin class on the .coaxGrid itself. */
.card.coax.coaxSkin-schematic .coaxTile,
.coaxGrid.coaxSkin-schematic .coaxTile{
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.22) 0 18px, transparent 19px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px),
    /* Keep fully opaque so it reads as "circuit-board green" even inside darker
       rotate prompts where semi-transparent greens wash out. */
    linear-gradient(180deg, rgb(18,112,63), rgb(7,70,39));
  border-color: rgba(34,197,94,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -1px 0 rgba(0,0,0,.22) inset;
}
.card.coax.coaxSkin-schematic .coaxTile.isHot,
.coaxGrid.coaxSkin-schematic .coaxTile.isHot{
  box-shadow:
    0 0 0 1px rgba(94,234,212,.22) inset,
    0 10px 26px rgba(94,234,212,.10);
}
.card.coax.coaxSkin-schematic .coaxBlankDot,
.coaxGrid.coaxSkin-schematic .coaxBlankDot{
  background: rgba(34,197,94,.22);
  box-shadow: 0 0 0 2px rgba(251,191,36,.12) inset;
}
.coaxSvg-schematic .schemTrace{
  stroke: rgba(251,191,36,.92); /* copper */
  stroke-width: 10;
  stroke-linecap: square;
}
.card.coax.coaxSkin-schematic .coaxTile.isHot .coaxSvg-schematic .schemTrace,
.coaxSvg-schematic .schemTrace.isHotJoin{
  stroke: rgba(94,234,212,.95); /* energized */
}
.coaxSvg-schematic .schemPad{
  fill: rgba(251,191,36,.18);
  stroke: rgba(251,191,36,.70);
  stroke-width: 2.4;
}
.coaxSvg-schematic .schemPad.isJoin{
  fill: rgba(251,191,36,.24);
  stroke-width: 3.0;
}
.coaxSvg-schematic .schemPad.isHotJoin{
  stroke: rgba(94,234,212,.75);
}
.coaxSvg-schematic .schemHole{
  fill: rgba(2,6,23,.55);
}
.coaxSvg-schematic .schemHub{
  fill: rgba(251,191,36,.12);
  stroke: rgba(251,191,36,.42);
}


/* Wheel of Radio: Stage (no external art required) */
.app.wheelStage{
  /* A subtle "dial" vibe using gradients only */
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(94,234,212,.14), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(147,197,253,.12), transparent 55%),
    conic-gradient(from 180deg at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,0), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(7,10,18,.92), rgba(7,10,18,.76));
  padding: 18px;
}
.app.wheelStage .card.wheel{
  background: rgba(7,10,18,.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
}

.wheelHud{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.wheelBox{ border:1px solid var(--line); border-radius:14px; padding:12px; background: rgba(255,255,255,.04); }

/* Wheel of Radio: phrase board (word-block tiles) */
.wheelBoard{ display:flex; flex-direction:column; gap:10px; align-items:center; user-select:none; }
.wheelRow{ display:flex; flex-wrap:nowrap; justify-content:center; gap:16px; width:100%; }
.wheelWord{ display:flex; gap:6px; }
.wbTile{
  width: clamp(22px, 3.2vw, 34px);
  height: clamp(28px, 4.0vw, 42px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1;
}
.wbTile.revealed{ background: rgba(255,255,255,.08); }
.wbTile.punct{ background: rgba(255,255,255,.02); opacity: .95; }
.wbTile.blank{ color: transparent; }

/* Legacy (older wheel builds) */
.wheelPhrase{font-size:22px; letter-spacing: 3px; line-height: 1.5; white-space: pre-wrap; user-select:none; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.wheelControls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.wheelKeys{ display:grid; grid-template-columns: repeat(13, minmax(0,1fr)); gap:6px; margin-top:12px; }
@media (max-width: 720px){ .wheelKeys{ grid-template-columns: repeat(7, minmax(0,1fr)); } }
.wheelMsg{ margin-top:10px; font-size: 13px; color: var(--muted); }
.wheelMsg.ok{ color: #a7f3d0; }
.wheelMsg.warn{ color: #fde68a; }
.wheelMsg.danger{ color: #fca5a5; }

/* CQ Logbook (minimal footprint, no giant boards) */
.cqHero{ display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-bottom:10px; }
.cqOffer,.cqLog{
  flex:1 1 320px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.cqTitle{ font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.cqCall{ font-size:22px; font-weight:800; }
.cqMeta{ font-size:13px; color: var(--muted); margin-top:2px; }
.cqBonus{ margin-top:8px; font-weight:700; }
.cqTiny{ margin-top:8px; font-size:12px; color: var(--muted); }
.cqTag{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  margin-left:6px;
  opacity:.95;
}
.cqLogList{ display:flex; flex-direction:column; gap:6px; max-height:118px; overflow:auto; padding-right:4px; }
.cqLogItem{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.cqLogPts{ opacity:.92; font-weight:700; }

/* Wheel of Radio: End screen layout (data left, art right) */
.wheelEndGrid{ grid-template-columns: 1.35fr .65fr; }
.wheelEndMedia{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  align-self: start;
  padding: 10px;
}
.wheelEndMedia img{ display:block; width:100%; height:auto; }

/* 3-Lives Survival: End screen layout (data left, art right) */
.survivalEndGrid{ grid-template-columns: 1.35fr .65fr; }
.survivalEndMedia{
  /* No picture frame: keep the art clean and borderless */
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  align-self: start;
  padding: 0;
}
.survivalEndMedia img{
  display:block;
  width:100%;
  height:auto;
  background: transparent;
}

/* Choice Scramble: End screen layout (data left, art right) */
.scrambleEndGrid{ grid-template-columns: 1.35fr .65fr; }
.scrambleEndMedia{
  /* No picture frame: keep the art clean and borderless */
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  /* Keep the art from forcing a tall equal-height column */
  align-self: start;
  padding: 0;
}
.scrambleEndMedia img{
  display:block;
  /* Reduce art size by ~25% and center it */
  width:75%;
  height:auto;
  min-height: 270px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  margin: 0 auto;
}
@media (max-width: 860px){
  .scrambleEndMedia img{ min-height: 180px; max-height: 420px; }
}

/* 3-Lives Survival: intro splash media */
.survivalIntroMedia{
  /* No picture frame: keep the art clean and borderless */
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  align-self: start;
  padding: 0;
}
.survivalIntroMedia img{
  display:block;
  width:100%;
  height:auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}



    .box {
      border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 12px;
      background: rgba(255,255,255,.05);
    }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .pill {
      font-size: 12px; color: var(--muted); border: 1px solid var(--line);
      padding: 6px 8px; border-radius: 999px;
    }

    .xpBar,.spBar{ height:14px; border-radius:999px; overflow:hidden; border:1px solid var(--line);
      background: rgba(0,0,0,.22); margin-top:10px; }
    .xpFill,.spFill{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
    .xpLine,.spLine{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

    .footer {
      padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted);
    }

    .hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.4; }
    /* Exam Cram: Stats & Streaks - Game Stats panel (ISS-022) */
    .aeaMiniTable{
      width:100%;
      border-collapse: collapse;
      margin: 2px 0 0;
      font-size: 12px;
    }
    .aeaMiniTable th{
      text-align:left;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 6px 0;
      border-bottom: 1px solid var(--line);
    }
    .aeaMiniTable td{
      padding: 6px 0;
      border-bottom: 1px dashed rgba(255,255,255,.10);
    }
    .aeaMiniTable tr:last-child td{ border-bottom: none; }
    .aeaMiniTable .num{ text-align:right; white-space: nowrap; }
    .aeaMiniTable .name{ padding-right: 10px; }
    .aeaMiniTable tr:hover td{ background: rgba(255,255,255,.03); }
.aeaMiniTable .num{ min-width: 3ch; }
.aeaMiniTable th.num,
.aeaMiniTable td.num{
  padding-left: 12px;
}
.aeaWloTable{
  table-layout: fixed;
}
.aeaWloTable col.nameCol{
  width: auto;
}
.aeaWloTable col.playsCol{
  width: 5.5ch;
}
.aeaWloTable col.wlCol{
  width: 4ch;
}
.aeaWloTable col.accCol{
  width: 6ch;
}



    .summaryCard{ }

.aeaStatsDialog{
  max-width: 1100px;
  width: min(1100px, calc(100vw - 24px));
}
.aeaStatsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.aeaStatsBadges,
.aeaTopScoreTags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.aeaStatTag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.aeaStatCard{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
}
.aeaStatCard.isAccent{
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.aeaStatCard.isSuccess{
  background: color-mix(in oklab, var(--good) 14%, transparent);
}
.aeaStatCardLabel{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 900;
}
.aeaStatCardValue{
  font-size: 22px;
  font-weight: 900;
  margin-top: 4px;
}
.aeaStatCardSub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.aeaStatsLayout{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr);
  gap: 12px;
  align-items:stretch;
}
@media (max-width: 900px){
  .aeaStatsLayout{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
  .aeaStatsBoxFooter{
    flex-direction: column;
    align-items: stretch;
  }
}
.aeaStatsBox{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.aeaStatsBoxTitle{
  font-weight: 900;
  margin: 0;
}
.aeaStatsBoxSub{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 8px;
}
.aeaStatsBoxHint{
  margin-top: 8px;
}
.aeaStatsBoxFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.aeaStatsBoxFooter .btn{
  flex: 0 0 auto;
}
.aeaStatsBox--scores .aeaStatsBoxFooter .hint{
  margin: 0;
}
.aeaTopScoresPanel{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.aeaStatsBox--scores .aeaTopScoresPanel{
  max-height: 100%;
}
.aeaTableWrap{
  overflow:auto;
  border-radius: 12px;
}
.aeaTopScores{
  list-style: none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 6px;
}
.aeaTopScores li{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 7px 9px;
  background: rgba(255,255,255,.02);
}
.aeaTopScores .aeaStatTag{
  padding: 3px 7px;
  font-size: 10px;
}
.aeaTopScoreHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.aeaTopScoreHead strong{ font-weight: 900; font-size: 16px; }
.aeaTopScoreRank{
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.aeaTopScoresMeta{
  display:block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 4px;
}
.aeaStatsEmpty{
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}
.aeaSummaryHero{
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.aeaSummaryHeroTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.aeaSummaryEyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.aeaSummaryVariant{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
}
.aeaSummaryTagline{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 62ch;
}

.aeaSummaryChips{
  margin-top: 6px;
}
.aeaSummaryFlavor{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  opacity: .92;
  max-width: 62ch;
}
.aeaSummaryMetricGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.aeaSummaryMetric{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
}
.aeaSummaryMetric span{
  display:block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.aeaSummaryMetric strong{
  display:block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.2;
}
.aeaCurrentPoolChip{
  display:inline-flex;
  align-items:center;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.aeaMiniTable .isCurrentPool td,
.aeaMiniTable tr.isCurrentPool:hover td{
  background: rgba(255,255,255,.06);
}
    .summaryGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items:start; }
    .summaryColTitle{ font-size: 12px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }

    .summaryLine{
      display:flex; justify-content:space-between; align-items:baseline;
      gap: 12px; padding: 3px 0;
      font-size: 14px; color: var(--text);
    }
    .summaryLine span:last-child{ text-align:right; white-space:nowrap; }

    .summaryExtra{ margin-top: 12px; }
    .aeaSummaryStack{ display:grid; gap: 12px; margin-top: 12px; }
    .aeaSummaryStack > *{ margin-top: 0 !important; }
    @media (max-width: 860px){ .summaryGrid{ grid-template-columns: 1fr; } }
    @media (max-width: 640px){ .aeaSummaryMetricGrid{ grid-template-columns: 1fr 1fr; } }

    .card {
      border: 1px solid var(--line); border-radius: 14px; padding: 14px;
      background: rgba(255,255,255,.02);
    }

    /* Shack Triage: workshop UI (scaled down + clearer layout) */
    .card.triage{
      font-size: 17px;
    }
    .card.triage .qmeta{ font-size: 12.5px; }
    .card.triage .qtext{ font-size: 23px; }
    .card.triage .hint{ font-size: 15px; line-height: 1.5; }
    .card.triage button{ padding: 10px 12px; font-size: 14px; border-radius: 14px; }
    .card.triage .box{ padding: 12px; }
    .card.triage details summary.hint{ font-size: 14px; }

    /* Shack Triage: end screen readability */
    .card.triageSummary .qtext{ font-size: 24px; }
    .card.triageSummary .hint{ font-size: 14px; line-height: 1.55; }
    .card.triageSummary ul.hint{ font-size: 14px; line-height: 1.55; }
    .card.triageSummary ul.hint li{ margin: 6px 0; }

    .triageHeader{
      display:flex; gap: 10px; flex-wrap:wrap; align-items: center; justify-content: space-between;
      padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
      background: rgba(255,255,255,0.03);
    }
    .triageTitle{ font-size: 19px; font-weight: 900; letter-spacing: .01em; }
    .triageSubtitle{ color: var(--muted); font-size: 12.5px; margin-top: 2px; }

    .triagePills{ display:flex; gap: 8px; flex-wrap:wrap; align-items:center; }
    .triagePills .pill{ font-size: 12.5px; padding: 6px 10px; }

    .triageToolList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:10px;
      max-height: min(46vh, 440px);
      overflow:auto;
      padding-right:4px;
    }
    .triageToolList button{
      width:100%;
      text-align:left;
    }

    .triageLayout{
      align-items:start;
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      grid-template-areas:
        "case tools"
        "bench tools";
      gap: 14px;
      margin-top: 12px;
    }
    .triageCasePanel{ grid-area: case; }
    .triageToolPanel{ grid-area: tools; }
    .triageBenchPanel{ grid-area: bench; }
    .triageToolPanel{ background: rgba(255,255,255,.055); }
    .triageBenchPanel{ background: rgba(0,0,0,.14); }
    @media (max-width: 860px){
      .triageLayout{
        align-items:start;
        grid-template-columns: 1fr;
        grid-template-areas:
          "case"
          "tools"
          "bench";
      }
    }

    .triagePanel{
      border: 1px solid var(--line); border-radius: 14px; padding: 12px;
      background: rgba(255,255,255,.045);
    }
    .triagePanelTitle{
      font-size: 12px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
      color: var(--muted); margin: 0 0 8px;
    }
    .triagePanel hr{ border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 10px 0; }

    .triageMeterRow{ display:grid; grid-template-columns: 160px 1fr 56px; gap: 10px; align-items:center; margin-top: 8px; }
    @media (max-width: 520px){ .triageMeterRow{ grid-template-columns: 1fr; } .triageMeterVal{ text-align:left !important; } }

    .triageMeterLbl{ color: var(--muted); font-size: 12.5px; }
    .triageMeterVal{ color: var(--muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

    .triageMeter{
      height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line);
      background: rgba(0,0,0,.22);
    }
    .triageMeterFill{
      height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
    }

    .triageLog{ max-height: min(42vh, 340px); overflow: auto; padding-right: 4px; }
    .triageLog div{ margin: 4px 0; }

    .qmeta { color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 6px 8px; border-radius: 14px; background: rgba(0,0,0,0.08); border: 1px solid var(--line); }

    #qTimerPill{
      display:inline-flex; align-items:center; gap:4px;
      padding: 4px 8px; border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,.18);
      font-weight: 800;
    }
    #qTimerPill.timer-urgent{
      border-color: rgba(255,93,108,.55);
      color: var(--bad);
      box-shadow: 0 0 0 2px rgba(255,93,108,.12);
      animation: timerPulse .7s infinite ease-in-out, timerWiggle 1.2s infinite ease-in-out;
    }
    #qTimerPill.timer-urgent #qTimerVal{ font-size: 1.15em; }
    html[data-motion="0"] #qTimerPill.timer-urgent{ animation:none; }

    @keyframes timerPulse{
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    @keyframes timerWiggle{
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-1px); }
      75% { transform: translateX(1px); }
    }

    .qtext { font-size: 18px; line-height: 1.35; margin: 0 0 10px; }
    .choices { display: grid; gap: 10px; }
    .choice {
      text-align: left; width: 100%;
      border: 1px solid var(--line); background: rgba(255,255,255,.05);
      padding: 12px; border-radius: 14px;
    }
    .choice strong { display: inline-block; width: 22px; }
    .choice.good { outline: 2px solid rgba(43,227,138,.55); }
    .choice.bad { outline: 2px solid rgba(255,93,108,.55); }

    /* QA: After answering, we still disable buttons, but we keep them readable.
       Otherwise the global button:disabled opacity washes out the green/red feedback borders. */
    .card.qAnswered .choice:disabled:not(.disabled){
      opacity: .88;
      cursor: default;
      filter: none;
    }
    .card.qAnswered .choice.good,
    .card.qAnswered .choice.bad{ opacity: 1; }
    .card.qAnswered .choice.good{ outline: 2px solid rgba(43,227,138,.85); box-shadow: 0 0 0 3px rgba(43,227,138,.12); }
    .card.qAnswered .choice.bad { outline: 2px solid rgba(255,93,108,.85); box-shadow: 0 0 0 3px rgba(255,93,108,.10); }

    .bar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
    .bar > :first-child{ margin-right:auto; }
    .stat { color: var(--muted); font-size: 12px; }

    .grid {
      display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-top: 12px;
    }
    .tile {
      border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05);
      padding: 10px; min-height: 54px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; text-align: center;
      color: var(--text); font-size: 12px;
      user-select: none;
    }
    .tile.done.good { border-color: rgba(43,227,138,.55); }
    .tile.done.bad { border-color: rgba(255,93,108,.55); }

    .danger { color: var(--bad); }
    .ok { color: var(--good); }
    .warn { color: var(--warn); }

    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .spacer { height: 10px; }

    .imgwrap {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      margin: 0 auto 12px;
      background: rgba(255,255,255,.02);
      width: min(520px, 100%);
    }
    .imgwrap img { width: 100%; display: block; cursor: zoom-in; }
  
    dialog {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 0;
      background: var(--panel);
      color: var(--text);
      width: min(720px, calc(100vw - 28px));
    }
    dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }

    .dlgHead { padding: 14px 14px 0; }
    .dlgBody { padding: 14px; }
    .dlgTitle { font-weight: 900; font-size: 18px; margin: 0 0 6px; }
    .dlgRow { display:flex; gap:10px; flex-wrap: wrap; align-items: center; }
    .dlgRow > * { flex: 1 1 auto; }
    .dlgActions { display:flex; gap:10px; justify-content: flex-end; padding: 0 14px 14px; }
    .dlgNote { color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.4; }
            
/* Home menu: 2-column grid (collapses to 1 column on narrow screens) */
.homeGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.aeaHomeChoice{ position: relative; }
.aeaHomeChoiceHead{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-bottom:4px; }
.aeaHomeChoiceHead.compact{
  align-items:center;
  flex-wrap:nowrap;
  gap:12px;
  margin-bottom:6px;
}
.aeaHomeChoiceCompact{
  padding:12px 14px;
}
.aeaHomeChoiceTitle{
  font-weight:800;
  font-size:16px;
  line-height:1.25;
}
.aeaHomeChoiceDesc{
  margin:0;
  color: var(--muted);
  line-height:1.35;
  max-height: calc(1.35em * 2);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.aeaGameBadgeRow,
.aeaInstructionBadgeRow,
.aeaSummaryChips{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.aeaGameBadge,
.aeaSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.aeaGameBadge.ready{ border-color: rgba(43,227,138,.28); }
.aeaGameBadge.lock{ border-color: rgba(255,194,92,.30); }
.aeaGameStrap,
.aeaInstructionTagline{
  margin-top:8px;
  color: var(--muted);
  font-size:12px;
  line-height:1.4;
}
.aeaInstructionHead{ margin-bottom:2px; }
@media (max-width: 720px){
  .homeGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .aeaHomeChoiceHead.compact{
    flex-wrap:wrap;
    align-items:flex-start;
  }
}

/* Kids theme: keep all non-button UI text in the warm yellow family */
html[data-theme="kids"] .muted,
html[data-theme="kids"] .small,
html[data-theme="kids"] .hint,
html[data-theme="kids"] label.small{
  color: var(--muted) !important;
}



/* Kids theme: selects/inputs need blue text for readability (yellow-on-yellow is unreadable) */
html[data-theme="kids"] select,
html[data-theme="kids"] input[type="file"]{
  background: var(--btn2) !important;
  color: var(--btnText) !important;
  border-color: rgba(11,61,145,.34) !important;
}
html[data-theme="kids"] select option{
  color: var(--btnText);
}

/* Kids theme: all buttons yellow with blue text (so the UI feels consistent and playful)
   NOTE: game tiles like Coax Circuit's .coaxTile are buttons for accessibility, but they
   must keep their own skin visuals (Coax/Schematic). So we explicitly exclude them. */
html[data-theme="kids"] button:not(.coaxTile),
html[data-theme="kids"] .seg button{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08)), var(--btn) !important;
  color: var(--btnText) !important;
  border-color: rgba(11,61,145,.34) !important;
}
html[data-theme="kids"] button .hint,
html[data-theme="kids"] button .small,
html[data-theme="kids"] button .muted{
  color: var(--btnText) !important;
  opacity: .95;
}
html[data-theme="kids"] button.secondary:not(.coaxTile){
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10)), var(--btn) !important;
  color: var(--btnText) !important;
}
html[data-theme="kids"] button:not(.coaxTile):hover{
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(255, 238, 140, .22);
}
html[data-theme="kids"] .seg{
  background: transparent;
}
html[data-theme="kids"] .seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)), rgba(255, 226, 120, .95) !important;
  color: var(--btnText) !important;
}

/* Kids theme: Coax Circuit tool buttons are "selected" by *absence* of .secondary.
   Kids theme makes all buttons yellow, which erased this distinction. Add a clear active state. */
html[data-theme="kids"] #coaxRotLeftBtn.secondary,
html[data-theme="kids"] #coaxRotRightBtn.secondary,
html[data-theme="kids"] #coaxRotFlipBtn.secondary{
  opacity: .80;
  filter: saturate(.85) brightness(.98);
  box-shadow: none !important;
}
html[data-theme="kids"] #coaxRotLeftBtn:not(.secondary),
html[data-theme="kids"] #coaxRotRightBtn:not(.secondary),
html[data-theme="kids"] #coaxRotFlipBtn:not(.secondary){
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.10)), var(--btn2) !important;
  border-color: rgba(11,61,145,.60) !important;
  box-shadow: 0 0 0 3px rgba(11,61,145,.55), 0 0 0 6px rgba(255, 238, 140, .18) !important;
}

.choosePoolBig{
  padding: 9px 12px;
  font-weight: 900;
  letter-spacing: .15px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10)), rgba(245,158,11,.16);
  color: var(--text);
  border: 1px solid rgba(245,158,11,.38);
  box-shadow: 0 0 0 2px rgba(245,158,11,.10), 0 10px 20px rgba(0,0,0,.30);
}
html[data-theme="kids"] .choosePoolBig{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.08)), var(--btn);
  color: var(--btnText);
  border-color: rgba(11,61,145,.38);
  box-shadow: 0 0 0 2px rgba(255, 238, 140, .18), 0 10px 20px rgba(0,0,0,.30);
}

html[data-theme="tech"] .choosePoolBig{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)), rgba(34,211,238,.14);
  border-color: rgba(34,211,238,.38);
  box-shadow: 0 0 0 2px rgba(34,211,238,.10), 0 10px 20px rgba(0,0,0,.30);
}

    html[data-theme="tech"] .title{ text-transform: uppercase; }
dialog.dlg{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%), var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 0;
  max-width: 760px;
  width: min(760px, calc(100vw - 28px));
}
dialog.dlg::backdrop{
  background: rgba(0,0,0,.65);
}
.dlgBody{ padding: 14px 16px 16px; }
.dlgFoot{ padding: 12px 16px 16px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--line); }


/* Options dialog footer: the bottom action block was getting squeezed by the generic dlgFoot flex row.
   This makes the Data / Pools / Reset area clean and readable, with wide button grids. */
.dlgFoot.optFoot{
  display:block;
  justify-content: initial;
  gap: 0;
}
.optFoot .optRow{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 440px);
  align-items:start;
  gap: 14px;
  padding: 12px 0;
}
@media (max-width: 760px){
  .optFoot .optRow{ grid-template-columns: 1fr; }
}
.optFoot .btnGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  justify-items:stretch;
}
.optFoot .btnGrid button{ width:100%; }
.optFootActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

.themeGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 680px){
  .themeGrid{ grid-template-columns: 1fr; }
}
.themeCard{
  text-align:left;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)), var(--card);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
html[data-motion="0"] .themeCard{ transition: none; }
.themeCard:hover{ transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(148,163,184,.14); }
.themeSwatch{
  height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(90px 60px at 20% 30%, var(--glow1), transparent 60%), var(--bg);
  margin-bottom: 10px;
}
.themeCard[data-theme-pick="kids"] .themeSwatch{
  background: radial-gradient(90px 60px at 20% 30%, rgba(255,107,214,.22), transparent 60%),
              radial-gradient(90px 60px at 70% 60%, rgba(96,165,250,.18), transparent 60%),
              #0b1026;
}
.themeCard[data-theme-pick="tech"] .themeSwatch{
  background: radial-gradient(90px 60px at 20% 30%, rgba(34,211,238,.22), transparent 60%),
              radial-gradient(90px 60px at 70% 60%, rgba(168,85,247,.18), transparent 60%),
              #05060a;
}
.themeCard[data-theme-pick="shack"] .themeSwatch{
  background: radial-gradient(90px 60px at 20% 30%, rgba(245,158,11,.22), transparent 60%),
              radial-gradient(90px 60px at 70% 60%, rgba(59,130,246,.12), transparent 60%),
              #070a12;
}
.themeName{ font-weight: 900; margin: 0 0 4px; }
.themeSubtitle{ margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.themeTags{ display:flex; gap:8px; flex-wrap:wrap; margin: 0 0 6px; }
.themeDesc{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.3; }

.optRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom: 1px solid rgba(148,163,184,.14); }
.optRow:last-child{ border-bottom: none; }
.optLabel{ font-weight: 800; }
.optHint{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.seg{
  display:inline-flex; border:1px solid var(--line); border-radius: 999px; overflow:hidden;
  background: rgba(255,255,255,.05);
}
.seg button{
  border:none; border-right:1px solid rgba(148,163,184,.18);
  background: transparent; padding: 8px 10px; border-radius: 0;
  color: var(--text);
}
.seg button:last-child{ border-right:none; }
.seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08)), var(--accent);
  color: #0b0f1a;
  font-weight: 900;
}

/* Options dialog refresh */
dialog.dlg.optDialog{
  flex-direction:column;
  max-width: 1180px;
  width: min(1180px, calc(100vw - 20px));
  max-height: min(92vh, 980px);
  overflow: hidden;
}
.optDialog .dlgHead,
.optDialog .dlgFoot{ flex: 0 0 auto; }
.optDialog .dlgBody{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 12px;
}
.optDialog .dlgFoot{
  padding: 10px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));
  position: relative;
  z-index: 2;
}
.optDialog .dlgTitle{ margin-bottom: 2px; font-size: 17px; }
.optDialog .hint,
.optDialog .optHint{ font-size: 11px; line-height: 1.25; }
.optDialog .optLabel{ font-size: 14px; }
.optDialog button{
  padding: 7px 11px;
  font-size: 14px;
  border-radius: 10px;
}
.optDialog .seg button{
  padding: 6px 10px;
  min-width: 0;
}

/* A1d23: Options dialog polish */
.optDialog .dlgHead{
  padding: 14px 16px 2px;
  border-bottom: 1px solid rgba(148,163,184,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(circle at 12% 0%, rgba(255,215,102,.08), transparent 34%);
}
.optDialog .dlgFoot{
  padding: 12px 16px 16px;
}
.optBody{
  gap: 12px;
}
.optSection{
  border-color: rgba(148,163,184,.20);
  border-radius: 18px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(0,0,0,.075)),
    radial-gradient(circle at 10% 0%, rgba(56,189,248,.05), transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 22px rgba(0,0,0,.12);
}
.optSectionHead{
  margin-bottom: 8px;
}
.optSectionTitle{
  font-size: 15px;
  letter-spacing: .02em;
}
.optSectionHint{
  font-size: 11.5px;
  line-height: 1.35;
}
.optSectionGeneral,
.optSectionUtilities{
  grid-column: 1 / -1;
}
.optOverviewGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.optOverviewCard{
  min-height: 118px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.06)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.optOverviewEyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent2) 75%, white 25%);
}
.optOverviewValue{
  font-size: 20px;
  line-height: 1.05;
  font-weight: 900;
  color: #fff3c2;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.optOverviewMeta{
  margin-top: auto;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.optAccordion{
  border-radius: 16px;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.optAccordion:hover{
  border-color: rgba(148,163,184,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.optAccordion summary{
  padding: 12px 13px;
}
.optAccordionText strong{
  font-size: 15px;
}
.optAccordionText small{
  font-size: 11.5px;
  line-height: 1.3;
}
.optActionGroup{
  gap: 8px;
}
.optActionGrid{
  gap: 8px;
}
.optDanger{
  box-shadow: inset 0 0 0 1px rgba(255,93,108,.08), 0 10px 24px rgba(0,0,0,.10);
}
@media (max-width: 980px){
  .optOverviewGrid{ grid-template-columns: 1fr; }
}
.optHead{
  padding: 12px 14px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.optHeadCopy{ min-width:0; }
.optHeadActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.optHeadActions button{ white-space:nowrap; }
.optHeadActions #closeOptionsHeadBtn{
  border-color: rgba(148,163,184,.28);
}
dialog.dlg.optDialog:not([open]){
  display:none;
}
dialog.dlg.optDialog[open]{
  display:flex;
}
.optBody{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
.optSection{
  border:1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.06));
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.optSectionHead{
  margin-bottom: 2px;
}
.optSectionTitle{
  font-size: 14px;
  font-weight: 900;
}
.optSectionHint{
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.25;
}
.optSection .optRow,
.optAccordionBody .optRow{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items:center;
  justify-content:stretch;
  gap: 12px;
}
.optSection .optRow:last-child,
.optAccordionBody .optRow:last-child{ border-bottom:none; }
.optSliderRow{
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.optSliderRow input[type="range"]{ width: 150px !important; }
.optSubBlock{
  margin-top: 2px;
  padding-top: 3px;
  border-top: 1px dashed rgba(148,163,184,.18);
}
.optSubBlock.isCollapsed{ display:none; }
.optSummaryRow{ align-items:flex-start !important; }
.optSummaryText{
  max-width: 360px;
  text-align:right;
  line-height:1.3;
  font-size: 11px;
}
.optSummaryStack{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}
.optSectionUtilities{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.optSectionUtilities .optSectionHead{
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.optAccordion{
  margin-top: 0;
  border:1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.07));
  overflow:hidden;
}
.optAccordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
}
.optAccordion summary::-webkit-details-marker{ display:none; }
.optAccordion summary::after{
  content:"+";
  font-size: 20px;
  line-height:1;
  font-weight: 400;
  color: var(--muted);
}
.optAccordion[open] summary::after{ content:"−"; }
.optAccordionText{ display:flex; flex-direction:column; gap:1px; }
.optAccordionText strong{ font-size:14px; }
.optAccordionText small{ color: var(--muted); font-size:11px; line-height:1.2; }
.optAccordionBody{
  padding: 0 12px 12px;
  border-top:1px solid rgba(148,163,184,.14);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.optActionGroup{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding-top: 10px;
}
.optActionHead{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.optActionGroupWarning{
  padding-top: 4px;
}
.optBackupStatus{
  border:1px solid rgba(245,158,11,.25);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text);
  background: linear-gradient(180deg, rgba(245,158,11,.08), rgba(0,0,0,.04));
}
.optBackupStatus strong{ font-weight: 900; }
.optActionGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:6px;
}
.optActionGrid button{ width:100%; }
.optDanger{
  border-color: rgba(255,93,108,.30);
  background: linear-gradient(180deg, rgba(255,93,108,.05), rgba(0,0,0,.08));
}
.optDanger summary::after,
.optDanger .optAccordionText strong{ color: var(--bad); }
@media (max-width: 980px){
  .optBody,
  .optSectionUtilities{ grid-template-columns: 1fr; }
  .optSectionUtilities{ grid-column: auto; }
}
@media (max-width: 760px){
  .optHead{ flex-direction:column; }
  .optHeadActions{ width:100%; justify-content:flex-start; }
  .optSection .optRow,
  .optAccordionBody .optRow{ grid-template-columns: 1fr; }
  .optSummaryText,
  .optSummaryStack{ max-width:none; text-align:left; align-items:flex-start; }
  .optSliderRow{ justify-content:flex-start; }
}

    /* Fox Hunt */
    .choice.disabled { opacity: .45; filter: grayscale(0.2); cursor: not-allowed; }
    .dungeonHud { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
    .dungeonHud .hudLeft, .dungeonHud .hudRight { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .dungeonMonsterRow{ width:100%; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; }
    .dungeonRescanCenter{ justify-self:center; }
    .dungeonMonsterText{ min-width: 0; }

/* HUD event icons (compact indicators next to the current street label) */
.hudEventIcons{ display:inline-flex; gap:6px; align-items:center; vertical-align:middle; }
.hudEventIcon{ line-height:1; font-size:1.05em; }

    /* Difficulty picker with XP multipliers */
    .foxDiffSeg button{ padding: 8px 12px; }
    .foxDiffSeg button .diffName{ font-weight: 900; }
    .foxDiffSeg button .diffMult{ display:block; font-size:11px; font-weight: 900; opacity:.92; margin-top:1px; }


    .dungeonProgressWrap{ margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .dungeonProgressBar{ flex:1; min-width:180px; height:10px; border:1px solid var(--line); border-radius:999px; background: rgba(0,0,0,.10); overflow:hidden; }
    .dungeonProgressFill{ height:100%; background: var(--accent); opacity:.9; }
    .dungeonStatusStrip{ margin-top:8px; display:flex; gap:0; align-items:center; flex-wrap:nowrap; overflow-x:hidden; padding:6px 10px; border:1px solid var(--line); border-radius:12px; background: rgba(255,255,255,.05); justify-content:space-between; font-size:14px; gap:6px; }



    .dungeonStatusStrip span{ white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-align:center; flex:1 1 0; min-width:0; padding:0 8px; font-size:1em; }




    .dungeonBottomRow{ margin-top:10px; display:flex; gap:10px; align-items:stretch; }
    .dungeonLogCol{ flex:1; display:flex; flex-direction:column; min-width:260px; }
    .dungeonSideBox{ width: 320px; min-width: 260px; max-width: 360px; padding:10px; border:1px solid var(--line); border-radius:12px; background: rgba(0,0,0,.06); display:flex; flex-direction:column; gap:10px; }
    .dungeonSideBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start; }
    .dungeonSideBtns .btn{ flex:1; min-width: 120px; }
    .dungeonSideBox .dungeonProgressWrap{ margin-top:0; }
    .dungeonSideBox .dungeonStatusStrip{ margin-top:8px; }



    .dungeonSideBox .dungeonChoicesWrap{ margin-top:0; }
    .dungeonSideBox .dungeonChoices{ justify-content:center; }
    .dungeonSideBox .dungeonHint{ opacity:.85; }

    .dungeonBottomRow .dungeonLog{ margin-top:0; flex:1; max-height: 260px; }

/* Fox Hunt log alerts */
.logStreet{ color: var(--street); font-weight:900; }
.logScore{ color: var(--good); font-weight:800; }
.logScoreBad{ color: var(--bad); font-weight:800; }
.logNoiseStorm{ color: var(--bad); font-weight:800; }
.logWarn{ color: var(--warn); font-weight:800; }
.logEgg{ color: var(--good); font-weight:800; }
@keyframes eggFlash {
  0%, 100% { color: var(--good); }
  50% { color: var(--text); }
}
.logEgg.flashGreen{ animation: eggFlash 0.9s steps(2,end) 8; }
@keyframes noiseFlash {
  0%, 100% { color: var(--bad); }
  50% { color: var(--text); }
}
.logNoiseStorm.flashRed{
  animation: noiseFlash 0.9s steps(2,end) 6;
}
    .dungeonLog{ overflow-wrap:anywhere; word-break:break-word; }
    .hpWrap { display:flex; align-items:center; gap:8px; }
        .hpBar { display:flex; gap:6px; align-items:center; }
    /* S-Meter bars */
    .sMeter{ display:flex; gap:4px; align-items:center; }
    .sUnit{ width:10px; height:14px; border-radius:3px; border:1px solid var(--line); background: rgba(0,0,0,.10); }
    .sUnit.filled{ background: var(--good); }
    .sUnit.filled9{ background: var(--warn); }
    .sUnit.filled10{ background: var(--bad); }

    .heartIcon { width:18px; height:18px; }
    .heartFill { fill: var(--accent); }
    .heartOutline { fill: none; stroke: var(--line); stroke-width: 1.7; }
.dungeonLog { margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background: rgba(0,0,0,.08); max-height: 180px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.35; }
    .dungeonChoices { margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
    .tiny { opacity:.85; font-size: 12px; }
    #dungeonInvDialog .dlgBody { padding: 12px; }
    .invList { display:flex; flex-direction:column; gap:10px; }
    .invItem { display:flex; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; background: rgba(255,255,255,.05); }
    .invItem .meta { display:flex; flex-direction:column; gap:4px; }
    .invItem .meta .name { font-weight:700; }


    .dungeonChoicesWrap { margin-top: 10px; min-height: 74px; }
    .dungeonChoices { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; min-height: 44px; }
    .dungeonHint { min-height: 16px; }

    .battleToast { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 14px; background: rgba(0,0,0,.35); z-index: 9999; }
    .battleToast.show { display: flex; }
    .battleToastCard { width: min(520px, 94vw); border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 14px 16px; }
    .battleToastTitle { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
    .battleToastSub { opacity: .9; margin-bottom: 10px; }
    .battleToastLines { display:flex; flex-direction: column; gap: 4px; font-size: 14px; opacity: .95; }

/* Fox Hunt: make street names pop */
.streetTitle{font-weight:800;font-size:1.35rem;letter-spacing:.2px;margin-top:10px;margin-bottom:2px}


/* Fox Hunt: smaller exit selection buttons */
#dungeonChoices .btn{
  min-width: 30px; /* 60 * 0.50 */
  padding: 3px 4px;
  font-size: 0.70em;
}

/* Fox Hunt compass directions (stable layout) */
.dungeonCompass{
  display:grid;
  grid-template-columns: 44px 44px 44px;
  grid-template-rows: 34px 34px 34px;
  gap:6px;
  justify-content:center;
  align-items:center;
  margin-top:10px;
}
.dungeonCompass .compassCenter{
  width:44px;
  height:34px;
}
#dungeonChoices .btn.btnDir{
  width:44px;
  height:34px;
  min-width:44px;
  padding:0;
  font-size:0.8em;
  border-radius:10px;
}
#dungeonChoices .btn.btnDir.btnDirOff{
  opacity:.28;
  filter: grayscale(.7) brightness(.9);
}



/* Fox Hunt: ASCII streets map */
.dungeonMapWrap{ margin-top: 10px; }
.dungeonAsciiMap{
  margin: 6px 0 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.05;
  overflow: auto;
  max-height: 220px;
  white-space: pre;
  color: rgba(216,199,164,.35);
}

.dungeonAsciiMap .mapO{ color: var(--good); font-weight: 700; }
.dungeonAsciiMap .mapUnc{ color: #f59e0b; font-weight: 800; }
.dungeonAsciiMap .mapOpp{ color: #b276ff; font-weight: 800; }
.dungeonAsciiMap .mapQ{ color: var(--warn); font-weight: 700; }
.dungeonAsciiMap .mapYou{ color: #4aa3ff; font-weight: 800; }
.dungeonAsciiMap .mapS{ color: #ffffff; font-weight: 700; }
.dungeonAsciiMap .mapB{ color: var(--bad); font-weight: 800; }
.dungeonAsciiMap .mapX{ color: #6b7280; font-weight: 700; }
.dungeonAsciiMap .mapXStash{ color: #8c5cf2; font-weight: 700; opacity:.55; }
.dungeonAsciiMap .mapConn{ color: rgba(216,199,164,.92); font-weight: 800; }
.mapLegend .mapO{ color: var(--good); font-weight: 700; }
.mapLegend .mapUnc{ color: #f59e0b; font-weight: 800; }
.mapLegend .mapOpp{ color: #b276ff; font-weight: 800; }
.mapLegend .mapQ{ color: var(--warn); font-weight: 700; }
.mapLegend .mapYou{ color: #4aa3ff; font-weight: 800; }
.mapLegend .mapS{ color: #ffffff; font-weight: 700; }
.mapLegend .mapB{ color: var(--bad); font-weight: 800; }
.mapLegend .mapX{ color: #6b7280; font-weight: 700; }
.mapLegend .mapXStash{ color: #8c5cf2; font-weight: 700; opacity:.55; }
.mapLegend .mapConn{ color: rgba(216,199,164,.92); font-weight: 800; }


/* Fox Hunt footer actions */
.dungeonFooterBar{ margin-top:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.dungeonFooterBar .btn{ min-width: 140px; }


/* --- Fox Hunt UI tweaks: inline combat + smaller rescan --- */
.btnTiny{
  padding: 3px 8px;
  font-size: 0.78em;
  line-height: 1.1;
}

.sMeterRow{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.combatInline{
  flex: 1 1 auto;
  min-width: 260px;
}

.combatInline .dungeonMonsterRow{
  /* Keep the Rescan button visible even with long foe names (no wrap surprises). */
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
}

.dungeonRescanInline{
  flex: 0 0 auto;
  justify-self: end;
}

.combatInline .dungeonMonsterText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.btn:disabled{ opacity:.35; filter: grayscale(.55) brightness(.92); cursor:not-allowed; }

/* Fox Hunt foe portrait */
.dungeonMonsterRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.foePortrait{
  width:56px;
  height:56px;
  flex:0 0 56px;
  object-fit:contain;
}


/* Question hero slot (optional) */
.qhero{ display:flex; justify-content:center; margin: 2px 0 0; }

.foxFoeHero{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:0; }

.foxFoeHeroImg{
  display:block;
  width: clamp(120px, 22vw, 200px);
  height: auto;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

.foxFoeCaption{ font-weight:900; text-align:center; letter-spacing:.2px; margin:0 0 12px 0; }

/* --- Fox Hunt foe card spacing override (v5p11b) --- */
.qhero{ margin: 2px 0 0px; }
.foxFoeHero{ gap: 6px; }
.foxFoeCaption{ margin: 0; }
.foxFoeSpacer{ height:22px; }
.qtext{ font-size: 18px; line-height: 1.35; margin: 0 0 10px; padding-top: 6px; }


/* --- Question-ID hint link (optional) --- */
/* --- Elmer Notes link (offline personal notes) --- */
.elmerNoteLink{
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.0);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.elmerNoteLink:hover{ text-decoration: underline; }
.qFlagLink{
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.0);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.qFlagLink:hover{ text-decoration: underline; }
.qFlagLink.isFlagged{
  color: var(--acc2);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--acc2);
  box-shadow: 0 0 0 3px var(--glow1);
  font-weight: 800;
}
.elmerNoteLink.hasNote{
  color: var(--acc);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--acc2);
  box-shadow: 0 0 0 3px var(--glow1);
  font-weight: 800;
}
.elmerNoteLink.hasNote::after{ content: " ●"; font-size: 10px; color: var(--acc2); }
.elmerNoteText{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.qidHintLink{ color: var(--acc); text-decoration: none; cursor: pointer; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.0); }
.qidHintLink:hover{ text-decoration: underline; }
/* Keep hover tooltips working even when disabled (state-driven UI). */
.qidHintLink.disabled{ color: var(--muted); text-decoration: none; cursor: not-allowed; background: rgba(0,0,0,0.04); border: 1px dashed var(--line); }
.qidHintsPill{ padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.08); font-size: 12px; border: 1px solid rgba(0,0,0,0.0); }

/* Question meta pills (buttons) */
.qmeta button.qidHintLink,
.qmeta button.qidHintsPill{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.2;
}

.qmeta button.qidHintLink{
  border: 1px solid rgba(0,0,0,0.0);
}

.qidHintsPillLink{
  color: var(--acc);
  cursor: pointer;
  text-decoration: none;
}

.qidHintsPillLink:hover{
  text-decoration: underline;
}

.qidHintsPillLink.disabled{
  color: var(--muted);
  cursor: not-allowed;
  text-decoration: none;
  background: rgba(0,0,0,0.04);
  border: 1px dashed var(--line);
}

.qidIdPill.copied{
  outline: 2px solid rgba(0,0,0,0.12);
}


/* Timed modes: show a quiet "help off" pill in place of hint/note controls */
.qhelpOffPill{ padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,0.05); font-size: 12px; color: var(--muted); border: 1px dashed var(--line); user-select: none; }


/* Help dialog */
.helpFrame{
  width: 100%;
  height: 72vh;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}


.qmetaHelp{ margin-top: 6px; color: var(--muted); font-size: 12px; opacity: 0.9; }
.qmetaHelp strong{ color: var(--text); }


/* Level-up toast (cosmetic XP/Level feedback) */
.levelToast{
  position: fixed;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.levelToast.show{ display:flex; }
.levelToastCard{
  pointer-events: auto;
  width: min(520px, 94vw);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(20,24,30,.98);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  padding: 12px 14px;
}
.levelToastTitle{ font-size: 18px; font-weight: 900; margin: 0 0 4px; }
.levelToastSub{ opacity: .9; margin: 0 0 8px; }
.levelToastLines{ display:flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: .95; }

/* Focus Mode picker */
.focusPickList{ display:flex; flex-direction: column; gap: 8px; }
.focusPickRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.focusPickRow label{ display:flex; align-items:center; gap: 10px; cursor:pointer; }
.focusPickMeta{ font-size: 12px; opacity: .8; text-align: right; white-space: nowrap; }

/* Weak topics list */
#weakTopicsList .weakLine{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0;
}
#weakTopicsList .weakCode{ font-weight: 900; }
#weakTopicsList .weakMeta{ opacity: .85; white-space: nowrap; }




/* ==========================
   Signal Sweep: Receiver Desk Skin
   ========================== */

.bingoShow{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 460px at 70% -120px, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(800px 320px at 105% 12%, rgba(245,158,11,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(8,14,27,.98)),
    var(--card);
  border: 1px solid rgba(34,211,238,.22);
}
.bingoShow::before{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-40px;
  width:min(44vw, 420px);
  height:min(44vw, 420px);
  background:url("../img/signal_sweep/elmer_at_desk.webp") no-repeat center/contain;
  opacity:.12;
  pointer-events:none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.28));
}
.bingoShowSetup::before{ display:none; }
.bingoShowGame::before{ opacity:.16; }

.bingoBanner{
  text-align: center;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.signalSweepBanner{
  border-bottom-color: rgba(34,211,238,.18);
}

.signalSweepHero{
  display:grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  align-items:center;
  gap:16px;
  margin: 10px auto 8px;
  padding: 14px 16px;
  border: 1px solid rgba(34,211,238,.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(7,16,31,.96), rgba(12,22,42,.88));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 14px 36px rgba(0,0,0,.24);
}

.signalSweepHeroArt{
  width:100%;
  max-height:260px;
  object-fit:contain;
  object-position:center right;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.32));
}

.signalSweepHeroText{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.signalSweepKicker{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#7dd3fc;
}

.signalSweepHead{
  font-size: clamp(18px, 2.2vw, 28px);
  line-height:1.1;
  font-weight:900;
  color:#f8fafc;
  text-wrap:balance;
}

.signalSweepSub{
  color: var(--muted);
  max-width: 56ch;
}

.signalSweepHeroSetup{
  margin-bottom: 14px;
}

.signalSweepSetupPanel{
  max-width: 1120px;
  margin: 0 auto;
  border-color: rgba(34,211,238,.18);
  background: linear-gradient(180deg, rgba(9,18,35,.88), rgba(7,15,30,.76));
}

.signalSweepSetupSummary{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 18px;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
  color: var(--muted);
}

.signalSweepSetupSummary strong{
  color: var(--text);
}

.signalSweepSetupControls{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:flex-end;
  justify-content:center;
}

.signalSweepSetupCtl{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width: 190px;
}

.signalSweepSetupCtl select{
  min-width: 190px;
}

.signalSweepSetupHint{
  margin-top: 12px;
  text-align: center;
}

.bingoTitle{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(245,158,11,.22), 0 0 18px rgba(245,158,11,.14);
  animation: bingoGlow 2.2s ease-in-out infinite;
}

.bingoTag{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.bingoMeta{
  margin-top: 8px;
}

.bingoMetaControls{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.bingoMetaCtl{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.bingoMetaCtl select{
  appearance: none;
  border: 1px solid rgba(214,194,139,.22);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}

.bingoMetaCtl select option{
  background: var(--bg);
  color: var(--text);
}


.bingoMetaCtl select:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.25);
}

.bingoMetaCtl select:focus{
  outline: none;
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12), inset 0 0 0 1px rgba(0,0,0,.28);
}

.bingoGrid{
  gap: 8px;
  /* Keep the board feeling like a real bingo card instead of stretching huge on wide screens */
  width: min(420px, 100%);
  margin: 8px auto 0;
}

.bingoGridLocked{ pointer-events: none; }

.bingoGrid .tile.bingoTile{
  position: relative;
  /* Square tiles like a bingo card */
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 6px 5px;
  background:
    radial-gradient(900px 140px at 50% -40px, rgba(255,255,255,.09), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(214,194,139,.22);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.bingoGrid .tile.bingoTile:hover{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(245,158,11,.45);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 10px 26px rgba(0,0,0,.45);
}

.bingoGrid .tile.bingoTile:active{
  transform: translateY(0px) scale(.99);
}

.bingoTileInner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
}

.bingoCode{
  position: absolute;
  top: 7px;
  left: 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  opacity: .80;
}

.bingoName{
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.05;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}

.bingoStamp{
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.45));
}

.bingoGrid .tile.done.good{
  border-color: rgba(74,222,128,.60);
  background:
    radial-gradient(900px 140px at 50% -40px, rgba(74,222,128,.18), transparent 60%),
    rgba(74,222,128,.06);
}

.bingoGrid .tile.done.bad{
  border-color: rgba(251,113,133,.60);
  background:
    radial-gradient(900px 140px at 50% -40px, rgba(251,113,133,.18), transparent 60%),
    rgba(251,113,133,.06);
}

.bingoGrid .tile.retry{
  border-color: rgba(245,158,11,.60);
  background:
    radial-gradient(900px 140px at 50% -40px, rgba(245,158,11,.18), transparent 60%),
    rgba(245,158,11,.04);
}

.bingoGrid .tile.retry .bingoStamp{
  animation: bingoRetryPulse 1.4s ease-in-out infinite;
}

.bingoGrid .tile.bingoTarget{
  box-shadow:
    inset 0 0 0 2px rgba(96,165,250,.10),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.35);
}

.bingoGrid .tile.bingoTargetCross{ box-shadow:
    inset 0 0 0 2px rgba(74,222,128,.10),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.35);
}

.bingoGrid .tile.bingoTargetX{ box-shadow:
    inset 0 0 0 2px rgba(96,165,250,.10),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 6px 18px rgba(0,0,0,.35);
}

@keyframes bingoRetryPulse{
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes bingoGlow{
  0%, 100% { text-shadow: 0 0 10px rgba(245,158,11,.22), 0 0 18px rgba(245,158,11,.14); }
  50%      { text-shadow: 0 0 16px rgba(245,158,11,.44), 0 0 34px rgba(245,158,11,.22); }
}

@media (max-width: 520px){
  .bingoGrid{ width: 100%; }
  .bingoGrid .tile.bingoTile{ padding: 6px 4px; }
  .bingoTitle{ font-size: 14px; }
}


/* --- Category Bingo: WIN Stinger ----------------------------------------- */
.bingoWinFx{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .12s ease, transform .12s ease;
}

.bingoWinFx.show{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  cursor: pointer;
  background: rgba(0,0,0,.38);
}

.bingoWinPlate{
  position: relative;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(245,158,11,.55);
  background:
    radial-gradient(600px 140px at 50% -40px, rgba(255,255,255,.14), transparent 60%),
    rgba(0,0,0,.55);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 40px rgba(245,158,11,.18);
  text-align: center;
  animation: bingoPlateIn .70s ease both;
}

.bingoWinText{
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.0;
  text-shadow:
    0 0 16px rgba(245,158,11,.35),
    0 0 34px rgba(245,158,11,.18);
}

.bingoWinSub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.bingoWinSkip{
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

.bingoConfetti{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bingoConfettiBit{
  position: absolute;
  top: -10px;
  border-radius: 2px;
  background: rgba(245,158,11,.95);
  filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
  animation-name: bingoConfettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.bingoConfettiBit:nth-child(3n){ background: rgba(74,222,128,.95); }
.bingoConfettiBit:nth-child(3n+1){ background: rgba(96,165,250,.95); }
.bingoConfettiBit:nth-child(3n+2){ background: rgba(251,113,133,.95); }

@keyframes bingoPlateIn{
  0%   { transform: translateY(12px) scale(.92); opacity: 0; }
  60%  { transform: translateY(0px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0px) scale(1.00); opacity: 1; }
}

@keyframes bingoConfettiFall{
  0%   { transform: translateY(-14px) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(120%) rotate(360deg); opacity: 0; }
}



/* ==========================
   Backscatter Board: Game Show Skin
   ========================== */

.bsShow{
  position: relative;
  overflow: hidden;
.bsShow > :not(.bsBackdrop){
  position: relative;
  z-index: 1;
}

.bsBackdrop{
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  background-image:
    linear-gradient(180deg, rgba(6,10,20,.28), rgba(6,10,20,.44)),
    url("../img/backscatter/elmer_backscatter_aurora.png");
  background-size: cover;
  background-position: center center;
  opacity: .12;
  transform: scale(1.03);
}

.bsShowSetup .bsBackdrop{ opacity: .10; }
.bsShowBoard .bsBackdrop{ opacity: .11; background-position: center top; }
.bsShowFinal .bsBackdrop,
.bsShowQuestion .bsBackdrop{ opacity: .09; background-position: center top; }

.bsSetupArt{
  width: min(720px, calc(100% - 28px));
  margin: 4px auto 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(214,194,139,.18);
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 8px 22px rgba(0,0,0,.20);
}

.bsSetupArt img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  object-position: center center;
}

  background:
    radial-gradient(1000px 420px at 50% -140px, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 360px at 110% 10%, rgba(245,158,11,.11), transparent 60%),
    radial-gradient(900px 360px at -10% 10%, rgba(74,222,128,.08), transparent 60%),
    var(--card);
  border: 1px solid rgba(59,130,246,.26);
}

.bsBanner{
  text-align: center;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.bsTitle{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(59,130,246,.22), 0 0 18px rgba(59,130,246,.14);
}

.bsSub{
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.bsHint{
  margin-top: 6px;
  font-size: 10px;
  color: rgba(233,238,247,.76);
}

.bsScoreboard{
  margin-top: 6px;
  display:flex;
  justify-content:center;
  gap: 6px;
  flex-wrap: wrap;
}

.bsScorePill{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(214,194,139,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  font-size: 10px;
}

.bsScorePill.urgent{
  border-color: rgba(251,113,133,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 3px rgba(251,113,133,.08);
}


.bsScorePill.beep{
  border-color: rgba(250,204,21,.65);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 3px rgba(250,204,21,.10);
  position: relative;
}

.bsScorePill.beep::after{
  content: "BEEP";
  position: absolute;
  right: 10px;
  top: -10px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  color: rgba(250,204,21,.92);
  opacity: 0;
  transform: translateY(2px) scale(.98);
  pointer-events: none;
}

.bsScorePill.beep.pulse{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 3px rgba(250,204,21,.14), 0 0 18px rgba(250,204,21,.16);
}

.bsScorePill.beep.pulse::after{
  opacity: 1;
  transform: translateY(0) scale(1);
}

#bsTimerMini.beep{
  color: rgba(250,204,21,.96);
  text-shadow: 0 0 12px rgba(250,204,21,.22);
}

#bsTimerMini.beep.pulse{
  text-shadow: 0 0 16px rgba(250,204,21,.38);
}
.bsScoreKey{
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
  font-weight: 900;
  margin-right: 6px;
}

.bsScoreVal{
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12px;
}

.bsBoard{
  /* Keep the board compact like a game board (no scrolling on common screens) */
  max-width: 560px;
  margin: 0 auto;
  padding: 6px;
}

.bsHeader{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.bsCat{
  padding: 6px 6px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(214,194,139,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  min-height: 32px;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.bsCatCode{
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px;
  opacity: .92;
}

.bsCatName{
  margin-top: 3px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .03em;
}

.bsCatNameMuted{
  opacity: .65;
}

.bsBody{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.bsRow{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.bsCell{
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(214,194,139,.18);
  background:
    radial-gradient(120px 60px at 50% 20%, rgba(59,130,246,.18), transparent 70%),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24);
  padding: 8px 6px;
  cursor: pointer;
  min-height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 950;
  letter-spacing: .08em;
  color: var(--text);
  transition: transform .08s ease, border-color .08s ease, filter .08s ease;
}

.bsCell:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.5);
  filter: brightness(1.05);
}

.bsCell.played{
  cursor: default;
  filter: grayscale(.25) brightness(.92);
  opacity: .88;
}

/* Played tiles should read instantly: green = correct, red = wrong */
.bsCell.played.ok{
  filter: none;
  opacity: 1;
  border-color: rgba(74,222,128,.55);
  background:
    radial-gradient(120px 60px at 50% 20%, rgba(74,222,128,.22), transparent 70%),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 0 0 3px rgba(74,222,128,.08);
}

.bsCell.played.bad{
  filter: none;
  opacity: 1;
  border-color: rgba(251,113,133,.55);
  background:
    radial-gradient(120px 60px at 50% 20%, rgba(251,113,133,.20), transparent 70%),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 0 0 3px rgba(251,113,133,.08);
}

.bsCell.played.ok .bsVal{ text-shadow: 0 0 10px rgba(74,222,128,.20); }
.bsCell.played.bad .bsVal{ text-shadow: 0 0 10px rgba(251,113,133,.20); }
.bsCell.played.ok.ddwon{
  border-color: rgba(250,204,21,.72);
  background:
    radial-gradient(120px 60px at 50% 20%, rgba(250,204,21,.24), transparent 70%),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 0 0 3px rgba(250,204,21,.12);
}
.bsCell.played.ok.ddwon .bsVal{ text-shadow: 0 0 10px rgba(250,204,21,.28); }
.bsDDPip{
  position:absolute;
  left: 7px;
  top: 7px;
  min-width: 20px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 10px;
  letter-spacing: .04em;
  color: #fef3c7;
  background: rgba(120,53,15,.58);
  border: 1px solid rgba(250,204,21,.55);
  box-shadow: 0 0 0 3px rgba(250,204,21,.10);
}

.bsCell.played:hover{
  transform: none;
}

.bsCell.played:not(.ok):not(.bad):hover{
  border-color: rgba(214,194,139,.18);
}

.bsVal{
  font-size: 12px;
  text-shadow: 0 0 10px rgba(59,130,246,.18);
}

.bsScorePill.urgent{
  border-color: rgba(251,113,133,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 3px rgba(251,113,133,.10);
}

.bsStamp{
  position:absolute;
  right: 7px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 11px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(214,194,139,.18);
}

.bsStamp.ok{
  border-color: rgba(74,222,128,.45);
  box-shadow: 0 0 0 3px rgba(74,222,128,.10);
}

.bsStamp.bad{
  border-color: rgba(251,113,133,.45);
  box-shadow: 0 0 0 3px rgba(251,113,133,.10);
}

.bsFooter{
  display:flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px 10px;
}

.bsClueBox{
  border: 1px solid rgba(59,130,246,.38);
  border-radius: 12px;
  padding: 8px 10px;
  background:
    radial-gradient(320px 120px at 50% 0%, rgba(59,130,246,.20), transparent 70%),
    rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}

.bsClueTop{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,238,247,.72);
  margin-bottom: 6px;
}

/* Daily Double attention flash (plays a few times when the banner appears) */
.bsFlashDD{
  animation: bsDDFlash 0.55s ease-in-out 8;
}

@keyframes bsDDFlash{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .15; }
}

.bsClueText{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
}

.bsClueMeta{
  margin-top: 8px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: rgba(233,238,247,.72);
}

.bsClueMetaKey{
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  opacity: .78;
}

.bsClueMeta strong{
  font-weight: 950;
  color: var(--text);
  letter-spacing: .02em;
}




/* Backscatter Board - Time Up overlay */
.bsTimeUpOverlay{
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(700px 260px at 50% 20%, rgba(250,204,21,.16), transparent 60%),
    rgba(0,0,0,.68);
  backdrop-filter: blur(2px);
}

.bsTimeUpBanner{
  text-align: center;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(250,204,21,.60);
  box-shadow:
    0 0 0 4px rgba(250,204,21,.10),
    0 0 26px rgba(250,204,21,.10);
}

.bsTimeUpTitle{
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 20px;
  color: rgba(250,204,21,.92);
  text-shadow: 0 0 18px rgba(250,204,21,.20);
}

.bsTimeUpSub{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(233,238,247,.78);
}


/* --- Stormline Sprint stage (scene + overlays) --- */
.stormlineStage{
  position:relative;
  width:100%;
  max-width:980px;
  height: clamp(210px, 30vw, 320px);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: none;
  background: transparent;
  margin: 0 auto;
}
.stormlineStage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  pointer-events:none;
  user-select:none;
}

.stormlineStage{
  /* default positions (can be overridden inline or via JS) */
  --mast-x: 56%;
  --mast-ground: 8%;
  --mast-height: 78%;
}

/* Antenna is a separate sprite so we can move it away from the house */
.stormlineStage img.stormlineAntenna{
  inset: auto;
  left: var(--mast-x);
  bottom: var(--mast-ground);
  height: var(--mast-height);
  width: auto;
  object-fit: contain;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scaleY(var(--mast-scale, 1));
  transition: transform 650ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Pig sprite (moves between house and mast) */
.stormlineStage img.stormlinePig{
  inset: auto;
  left: var(--pig-x);
  bottom: var(--pig-ground, 3.5%);
  height: var(--pig-h, 46%);
  width: auto;
  object-fit: contain;
  transform: translateX(-50%);
  transition: left var(--pig-move, 650ms) cubic-bezier(.2,.9,.2,1), height var(--pig-move, 650ms) cubic-bezier(.2,.9,.2,1), bottom var(--pig-move, 650ms) cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.22));
}

.stormlineStage img.stormlinePig.stormlinePigStruckArt{
  bottom: max(0%, calc(var(--pig-ground, 3.5%) - 1%));
  height: calc(var(--pig-h, 46%) + 6%);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
}

/* Travel beat: smooth walk + gentle bob so the single walk pose feels less "slidey" */
@keyframes stormlineWalkBob{
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
  50% { transform: translateX(-50%) translateY(2px) rotate(1deg); }
}
.stormlineStage.stormlineTravel img.stormlinePig{
  transition: left var(--pig-move) linear, height var(--pig-move) linear;
  animation: stormlineWalkBob 520ms ease-in-out infinite;
}



.stormlineStage.workingLoop img.stormlinePig{
  animation: stormlineWorkLoop 1200ms ease-in-out infinite;
}
@keyframes stormlineWorkLoop{
  0%{ transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%{ transform: translateX(-50%) translateY(-1.5%) rotate(-1deg); }
  100%{ transform: translateX(-50%) translateY(0) rotate(0deg); }
}

/* House pig should be still (no work-loop animation) */
.stormlineStage.workingLoop.atHouse img.stormlinePig{
  animation: none !important;
}

/* Remove leftover task/marker UI (rings/toolbox/icon/progress) */
.stormlineTaskFx,
.stormlineTaskIcon,
.stormlineToolbox,
.stormlineWorkFx,
.stormlineCoax{
  display:none !important;
}

.stormlineBadge.subtle{
  opacity: .92;
}


/* Stormline split layout: stage beside question/choices */
.stormlineSplit{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
.stormlineSplitLeft .stormlineStage{
  max-width: none;
}
@media (max-width: 860px){
  .stormlineSplit{
    grid-template-columns: 1fr;
  }
  .stormlineSplitLeft{
    order: 0;
  }
  .stormlineSplitRight{
    order: 1;
  }
}
.stormlineBg{ transform: translateZ(0); object-position: left center; }
/* Storm overlay: oversized so it never "hard clips" on the right edge when shifting */

/* Stormline storm overlay: two-layer swirl, with stage-relative shift to avoid showing image edges */
.stormlineStormGroup{
  position:absolute;
  inset:0;
  pointer-events:none;
  user-select:none;
  /* Keep the house clear when the storm is far away: fade in from the right */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--storm-fade0, 48%),
    rgba(0,0,0,1) var(--storm-fade1, 70%),
    rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--storm-fade0, 48%),
    rgba(0,0,0,1) var(--storm-fade1, 70%),
    rgba(0,0,0,1) 100%);
}


.stormlineStormLayer1{
  animation: stormlineSwirl1 var(--storm-s1, 8s) ease-in-out infinite;
  opacity: 1;
  filter: blur(0px);
}

.stormlineStormLayer2{
  animation: stormlineSwirl2 var(--storm-s2, 6.5s) ease-in-out infinite;
  opacity: .55;
  filter: blur(1.6px);
}

@keyframes stormlineSwirl1{
  0%{ transform: translate(0px,0px) rotate(0deg) scale(1); }
  35%{ transform: translate(-18px,6px) rotate(-0.8deg) scale(1.01); }
  70%{ transform: translate(-8px,-6px) rotate(0.6deg) scale(1.015); }
  100%{ transform: translate(0px,0px) rotate(0deg) scale(1); }
}
@keyframes stormlineSwirl2{
  0%{ transform: translate(0px,0px) rotate(0deg) scale(1.02); }
  30%{ transform: translate(-26px,-8px) rotate(1.2deg) scale(1.03); }
  65%{ transform: translate(-10px,10px) rotate(-0.9deg) scale(1.035); }
  100%{ transform: translate(0px,0px) rotate(0deg) scale(1.02); }
}

.stormlineStormGroup img.stormlineStorm{
  position:absolute;
  top: 0;
  bottom: 0;
  left: auto;
  /* Negative % pushes the storm offscreen right; it moves left as the storm approaches */
  right: var(--storm-right, -110%);
  width: 220%;
  height: 100%;
  object-fit: cover;
  /* Keep clouds in the sky (avoid "fog" over the grass/house/pig). */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(0,0,0,0.35) 72%, rgba(0,0,0,0) 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(0,0,0,0.35) 72%, rgba(0,0,0,0) 86%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.stormlineFlash{ mix-blend-mode: screen; filter: saturate(1.1); }


/* Strong lightning strike: quick camera shake */
.stormlineStage.stormlineStrike{
  animation: stormlineStrikeShake 80ms linear 0s 18;
}
@keyframes stormlineStrikeShake{
  0%{ transform: translate(0,0); }
  15%{ transform: translate(-2px,1px); }
  30%{ transform: translate(2px,-1px); }
  45%{ transform: translate(-3px,2px); }
  60%{ transform: translate(3px,1px); }
  75%{ transform: translate(-2px,-2px); }
  90%{ transform: translate(2px,2px); }
  100%{ transform: translate(0,0); }
}


/* Stormline Splash */
.stormlineSplash{ padding: 18px; }
.stormlineSplashGrid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 900px){
  .stormlineSplashGrid{ grid-template-columns: 1fr; }
}
.stormlineSplashArt{
  position:relative;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stormlineSplashPig{
  width: 92%;
  height:auto;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.22));
}
.stormlineSplashMiniStorm{
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
}
.stormlineSplashMiniStorm img{
  position:absolute;
  left:-35%;
  width:170%;
  height:100%;
  object-fit:cover;
}
.stormlineSplashCopy .qtext{ font-size: 24px; margin-bottom: 10px; }
.stormlineSplashList{ margin: 10px 0 0 18px; }
.stormlineSplashPicks{ margin-top: 14px; }
.stormlineEndWrap{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display:flex; flex-direction:column; gap:12px; align-items:center; }
.stormlineEndArt img{ max-width: 420px; width: min(82vw, 420px); height:auto; display:block; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.stormlineSafety{ margin-top: 2px; padding: 10px 12px; border-radius: 12px; font-size: clamp(18px, 2.6vw, 30px); font-weight: 900; text-align:center; text-transform: uppercase; letter-spacing: .5px; }
.stormlineEndHint{ text-align:center; max-width: 58ch; }


/* Stormline end screen: two-column layout (stats left, safety + art right) */
.stormlineEndLayout{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display:grid; grid-template-columns: minmax(260px, 380px) 1fr; gap:18px; align-items:start; }
.stormlineEndLeft{ display:flex; flex-direction:column; gap:12px; }
.stormlineEndBox{ border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 16px; padding: 12px 12px; }
.stormlineEndBoxTitle{ font-weight: 900; margin-bottom: 6px; opacity:.85; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; }

.stormlineScoreSp{ display:flex; flex-direction:column; gap:8px; }
.stormlineSubTitle{ font-weight: 900; text-transform: uppercase; letter-spacing: .6px; font-size: 11px; opacity:.85; }
.stormlineScoreDivider{ height:1px; background: var(--line); opacity: .9; margin: 2px 0; }
.stormlineMiniList{ margin-top: 0; }
.stormlineEndRight{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:flex-start; }
.stormlineSafetyRight{ margin:0; max-width: 28ch; }
.stormlineEndArtRight img{ max-width: 260px; width: min(44vw, 260px); height:auto; display:block; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.stormlineEndHintRight{ text-align:center; max-width: 42ch; }
@media (max-width: 780px){
  .stormlineEndLayout{ grid-template-columns: 1fr; }
  .stormlineSafetyRight{ max-width: 40ch; }
  .stormlineEndHintRight{ max-width: 60ch; }
}


.stormlineHud{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.stormlineHudRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.stormlineBadge{
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  font-size: 12px;
  text-transform: none;
}
.stormlineWarning{
  align-self:flex-start;
  padding:6px 10px;
  border-radius: 10px;
  background: rgba(255, 200, 0, .20);
  border: 1px solid rgba(255, 200, 0, .35);
  color:#fff;
  font-weight:900;
  font-size: 12px;
}


.stormlineSafetyTop{ margin-top: 0; margin-bottom: 10px; }


/* ==========================
   Weakness Hunter: Spectrum Scope
   ========================== */

.whHud{
  margin-top: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.whTop{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 10px;
}

.whStat{
  font-size: 13px;
  opacity: .95;
  white-space: nowrap;
}

.whPipLine{
  letter-spacing: 1px;
  font-weight: 900;
}

.whScope{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whRow{
  display: grid;
  grid-template-columns: 56px 1fr 88px 92px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.whRow.isActive{
  border-color: rgba(255,255,255,.22);
}

.whRow.isStabilized{
  opacity: .70;
}

.whCode{
  font-weight: 900;
  letter-spacing: .5px;
}

.whMeta{
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: .9;
  white-space: nowrap;
}

.whPips{
  text-align: right;
  font-weight: 900;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.whBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}

.whFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}


/* --- Choice Scramble Intro Splash --- */
.scrambleSplashGrid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:stretch;
  margin-top: 12px;
}
@media (max-width: 900px){
  .scrambleSplashGrid{ grid-template-columns: 1fr; }
}
.scrambleSplashArt{
  position:relative;
  /* No picture frame: borderless, transparent art holder */
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scrambleSplashPig{
  width: 92%;
  height:auto;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.22));
}
.subtleTitle{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.scrambleBullets{
  margin: 0;
  padding-left: 18px;
}
.scrambleBullets li{
  margin: 6px 0;
}
.scrambleCheck{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.scrambleCheck input{
  transform: translateY(1px);
}


/* ===== Band Scan (replaces CQ Logbook) ===== */
.bandscan .scanHud{
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
.bandscan .scanOffers{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.bandscan .scanOfferBtn{
  text-align:left;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  cursor:pointer;
}
.bandscan .scanOfferBtn:hover{
  filter: brightness(1.08);
}
.bandscan .scanOfferTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.bandscan .scanBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  font-size: 13px;
}
.bandscan .scanTag{
  opacity: .9;
  font-weight: 600;
}
.bandscan .scanPayout{
  font-weight: 800;
}
.bandscan .scanMeta{
  color: var(--muted);
  font-size: 13px;
}
.bandscan .scanPreview{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
}
.bandscan .scanTiny{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.bandscan .scanChosen{
  margin-bottom: 10px;
}
.bandscan .scanChosenLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.bandscan .scanChosenPts{
  color: var(--muted);
}
.bandscan .btnRow{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.scanCheck{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.scanCheck input{
  transform: translateY(1px);
}


/* Ham Hunter (Fox Hunt) - stable Rescan row (ISS-020) */
.dungeonMonsterHudRow{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
}
.dungeonMonsterHudText{
  min-width:0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dungeonMonsterHudRow .dungeonRescanInline{
  justify-self:end;
}



/* Ham Hunter How to Play splash */
.hh-howto{
  font-size: clamp(16px, 1.25vw, 18px);
}
.hh-howto .qtext{
  font-size: clamp(26px, 2.2vw, 32px);
}
.hh-howto .hint,
.hh-howto li{
  font-size: inherit;
  line-height: 1.45;
}
.hh-howto .box strong{
  font-size: 1.06em;
}
.hh-howto .bar button{
  font-size: 1em;
  padding: 12px 16px;
}
.hh-howto input[type="checkbox"]{
  transform: scale(1.12);
}

/* Shared high score block */
.aeaHighScoreList { margin:10px 0 0 0; padding-left:20px; }
.aeaHighScoreList li { margin:6px 0; }
.aeaHighScoreList li.isCurrent { font-weight:800; }
.aeaHighScoreRank { display:inline-block; min-width:1.6em; }
.aeaHighScoreScore { display:inline-block; min-width:4.2em; }
.aeaHighScoreDate { opacity:.8; margin-left:8px; }
.aeaHighScoreOutcome { opacity:.9; margin-left:4px; }


@media (max-width: 760px){
  .signalSweepHero{ grid-template-columns: 1fr; text-align:center; }
  .signalSweepHeroText{ align-items:center; }
  .signalSweepHeroArt{ max-height:220px; }
}

/* --- Signal Sweep question / answer theme pass --------------------------- */
.card.signalSweepQuestion{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34,211,238,.22);
  background:
    radial-gradient(1100px 460px at 72% -120px, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(920px 360px at 108% 8%, rgba(245,158,11,.09), transparent 58%),
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(8,14,27,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 14px 34px rgba(0,0,0,.28);
}
.card.signalSweepQuestion::before{
  content:"";
  position:absolute;
  right:-56px;
  bottom:-26px;
  width:min(40vw, 360px);
  height:min(40vw, 360px);
  background:url("../img/signal_sweep/elmer_at_desk.webp") no-repeat center/contain;
  opacity:.12;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.34));
  pointer-events:none;
}
.card.signalSweepQuestion::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:124px;
  height:2px;
  background: linear-gradient(90deg, rgba(34,211,238,.0), rgba(34,211,238,.78), rgba(245,158,11,.72), rgba(34,211,238,.0));
  box-shadow: 0 0 18px rgba(34,211,238,.30), 0 0 28px rgba(245,158,11,.18);
  opacity:.62;
  pointer-events:none;
}
.card.signalSweepQuestion > *{ position: relative; z-index: 1; }
.card.signalSweepQuestion .qmeta{
  background: linear-gradient(180deg, rgba(5,14,27,.78), rgba(10,20,38,.68));
  border-color: rgba(34,211,238,.20);
  color:#bcd4e8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.card.signalSweepQuestion .qmeta span,
.card.signalSweepQuestion .qmeta a,
.card.signalSweepQuestion .qmeta button{ color:#cfe6fb; }
.card.signalSweepQuestion .qmeta .qhelpOffPill,
.card.signalSweepQuestion .qmeta .qidHintLink,
.card.signalSweepQuestion .qmeta .qidHintsPill,
.card.signalSweepQuestion .qmeta .elmerNoteLink,
.card.signalSweepQuestion .qmeta .qFlagLink,
.card.signalSweepQuestion .signalSweepMetaChip{
  border:1px solid rgba(34,211,238,.16);
  background: rgba(5,12,24,.42);
  color:#d6eafd;
}
.card.signalSweepQuestion .signalSweepMetaChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 10px;
  border-radius:999px;
  font-size:12px;
}
.card.signalSweepQuestion .qmetaHelp{
  color:#9cb8d2;
  padding-left: 2px;
}
.card.signalSweepQuestion .qhero{
  display:block;
  margin: 10px 0 4px;
}
.signalSweepQuestionHero{
  display:grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap:16px;
  align-items:center;
  padding: 14px 16px;
  border:1px solid rgba(34,211,238,.18);
  border-radius:18px;
  background: linear-gradient(135deg, rgba(7,16,31,.94), rgba(10,22,42,.82));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24), 0 10px 28px rgba(0,0,0,.22);
}
.signalSweepQuestionArt{
  width:100%;
  max-height:180px;
  object-fit:contain;
  object-position:left center;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.30));
}
.signalSweepQuestionCopy{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.signalSweepQuestionKicker{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#7dd3fc;
}
.signalSweepQuestionHead{
  font-size: clamp(18px, 2vw, 28px);
  line-height:1.08;
  font-weight:900;
  color:#f8fafc;
  text-wrap:balance;
}
.signalSweepQuestionSub{
  color:#bfd6ea;
  max-width:50ch;
}
.card.signalSweepQuestion .qtext{
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7,15,29,.92), rgba(9,18,34,.78));
  border:1px solid rgba(34,211,238,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  color:#f7fbff;
  font-size: 20px;
  line-height: 1.42;
}
.card.signalSweepQuestion .choices{
  gap:12px;
  margin-top: 10px;
}
.card.signalSweepQuestion .choice{
  position:relative;
  border:1px solid rgba(34,211,238,.18);
  background:
    linear-gradient(180deg, rgba(7,16,31,.92), rgba(9,18,35,.78));
  color:#eef7ff;
  border-radius:16px;
  padding: 14px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 6px 18px rgba(0,0,0,.22);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.card.signalSweepQuestion .choice::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(245,158,11,.06), rgba(34,211,238,0));
  opacity:.42;
  pointer-events:none;
}
.card.signalSweepQuestion .choice:hover:not(:disabled){
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.28);
}
.card.signalSweepQuestion .choice strong{
  color:#7dd3fc;
  width:28px;
}
.card.signalSweepQuestion .choice.good,
.card.signalSweepQuestion.qAnswered .choice.good{
  outline: 2px solid rgba(74,222,128,.82);
  border-color: rgba(74,222,128,.55);
  background: linear-gradient(180deg, rgba(10,32,24,.94), rgba(10,26,22,.84));
  box-shadow: 0 0 0 3px rgba(74,222,128,.10), 0 10px 24px rgba(0,0,0,.28);
}
.card.signalSweepQuestion .choice.bad,
.card.signalSweepQuestion.qAnswered .choice.bad{
  outline: 2px solid rgba(251,113,133,.82);
  border-color: rgba(251,113,133,.55);
  background: linear-gradient(180deg, rgba(46,14,24,.94), rgba(34,10,19,.84));
  box-shadow: 0 0 0 3px rgba(251,113,133,.10), 0 10px 24px rgba(0,0,0,.28);
}
.card.signalSweepQuestion.qAnswered .choice:disabled:not(.disabled){
  opacity:.94;
}
.card.signalSweepQuestion #feedback .box{
  margin-top: 12px;
  border-radius:16px;
  border:1px solid rgba(34,211,238,.18);
  background: linear-gradient(180deg, rgba(7,16,31,.96), rgba(10,20,38,.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.card.signalSweepQuestion #feedback .hint{
  color:#c9ddf1;
}
.card.signalSweepQuestion #feedback strong{
  color:#f8fafc;
}
.card.signalSweepQuestion .figWrap{
  border-color: rgba(34,211,238,.12);
  background: rgba(7,16,31,.52);
}
@media (max-width: 860px){
  .signalSweepQuestionHero{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .signalSweepQuestionArt{
    max-height:160px;
    object-position:center;
  }
  .card.signalSweepQuestion::before{
    width:min(52vw, 300px);
    height:min(52vw, 300px);
    opacity:.10;
  }
  .card.signalSweepQuestion::after{
    top:160px;
  }
}
@media (max-width: 540px){
  .card.signalSweepQuestion::after{ top: 186px; left:14px; right:14px; }
  .card.signalSweepQuestion .qtext{ font-size:18px; padding: 12px 13px; }
  .card.signalSweepQuestion .choice{ padding: 12px; }
}


.optUtilityRow{
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.optUtilityRow .btnGrid{
  min-width: min(360px, 100%);
}


.aeaElmerBox{
  margin:10px 0 0;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, var(--accent) 8%), color-mix(in srgb, var(--card) 97%, black 3%));
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.14);
}
.aeaElmerBox--line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
}
.aeaElmerIcon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:14px;
  line-height:1;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-2);
}
.aeaElmerLineText{
  min-width:0;
  color:var(--ink);
  line-height:1.4;
}
.aeaElmerLineLabel{
  display:block;
  font-weight:900;
  font-size:.82rem;
  letter-spacing:.02em;
  margin-bottom:2px;
}
.aeaElmerLineBody{
  display:block;
  opacity:.96;
}
.aeaElmerBox--card{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:12px;
  padding:12px;
  align-items:center;
}
.aeaElmerArt{
  width:84px;
  height:84px;
  object-fit:contain;
  object-position:center bottom;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}
.aeaElmerTitle{
  font-weight:900;
  margin:0 0 4px;
  font-size:1rem;
}
.aeaElmerBody{
  margin:0;
  line-height:1.45;
}
.aeaElmerMeta{
  margin-top:6px;
  font-size:.84rem;
  opacity:.8;
}
.aeaElmerBox--warning{
  border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, var(--accent-2) 15%), color-mix(in srgb, var(--card) 95%, black 5%));
}
.aeaElmerBox--coach .aeaElmerIcon{
  background: color-mix(in srgb, var(--ok) 18%, transparent);
}
.aeaElmerBox--warning .aeaElmerIcon{
  background: rgba(245,158,11,.18);
  color:#fbbf24;
}
.aeaElmerSlot:empty{ display:none; }
@media (max-width: 720px){
  .aeaElmerBox--card{
    grid-template-columns:64px 1fr;
    gap:10px;
  }
  .aeaElmerArt{
    width:64px;
    height:64px;
  }
}


/* Game Menu tag size polish: roughly 25% smaller after banner header pass. */
.gameTag,
.gameCardTag,
.modeTag,
.gameMetaTag,
.aeaGameTag,
.menuGameTag,
.gameChoice .tag,
.gameChoiceTag,
.gameCard .tag{
  font-size: 75% !important;
  padding-block: 3px !important;
  padding-inline: 6px !important;
  line-height: 1.05 !important;
}


/* Footer ticker retired: header banners now carry rotation/promo/reminder duty. */
.footerTicker,
.footerTips,
.footerTip,
.footerMarquee,
.tickerFooter,
#footerTicker,
#footerTips,
#footerTip,
#footerMarquee,
#footerTipText,
#footerTickerText,
.appFooterTicker,
.aeaFooterTicker{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}


/* Game Menu tag final trim: another ~25% smaller from the current reduced size. */
.gameTag,
.gameCardTag,
.modeTag,
.gameMetaTag,
.aeaGameTag,
.menuGameTag,
.gameChoice .tag,
.gameChoiceTag,
.gameCard .tag{
  font-size: 56% !important;
  padding-block: 2px !important;
  padding-inline: 5px !important;
  line-height: 1.0 !important;
}


/* Game Menu tag final-final trim: make right-side menu tags about half their current visual size. */
#homeChoices .gameTag,
#homeChoices .gameCardTag,
#homeChoices .modeTag,
#homeChoices .gameMetaTag,
#homeChoices .aeaGameTag,
#homeChoices .menuGameTag,
#homeChoices .gameChoice .tag,
#homeChoices .gameChoiceTag,
#homeChoices .gameCard .tag,
#homeChoices [class*="Tag"],
#homeChoices [class*="tag"]{
  font-size: 8px !important;
  padding: 1px 4px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  letter-spacing: 0.03em !important;
  border-width: 1px !important;
  transform: none !important;
}

/* In case the tag is the last span/badge in the game card header instead of a named class. */
#homeChoices .gameChoice > div:first-child > span:last-child,
#homeChoices .gameChoice > div:first-child > strong + span,
#homeChoices .gameCard > div:first-child > span:last-child,
#homeChoices .gameCard > div:first-child > strong + span{
  font-size: 8px !important;
  padding: 1px 4px !important;
  line-height: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  letter-spacing: 0.03em !important;
}


/* Kids theme readability fix for Game Menu tags.
   The previous subtle tag styling blends into the bright card backgrounds too much. */
html[data-theme="kids"] #homeChoices .gameTag,
html[data-theme="kids"] #homeChoices .gameCardTag,
html[data-theme="kids"] #homeChoices .modeTag,
html[data-theme="kids"] #homeChoices .gameMetaTag,
html[data-theme="kids"] #homeChoices .aeaGameTag,
html[data-theme="kids"] #homeChoices .menuGameTag,
html[data-theme="kids"] #homeChoices .gameChoice .tag,
html[data-theme="kids"] #homeChoices .gameChoiceTag,
html[data-theme="kids"] #homeChoices .gameCard .tag,
html[data-theme="kids"] #homeChoices [class*="Tag"],
html[data-theme="kids"] #homeChoices [class*="tag"],
html[data-theme="kids"] #homeChoices .gameChoice > div:first-child > span:last-child,
html[data-theme="kids"] #homeChoices .gameChoice > div:first-child > strong + span,
html[data-theme="kids"] #homeChoices .gameCard > div:first-child > span:last-child,
html[data-theme="kids"] #homeChoices .gameCard > div:first-child > strong + span{
  color: #2347a5 !important;
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(96, 165, 250, 0.70) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
}


/* Kids theme: actual home-menu badge class fix.
   The real badge in the home menu is .aeaGameBadge. Make it clearly readable. */
html[data-theme="kids"] #homeChoices .aeaGameBadge{
  color: #fff7b3 !important;
  background: #2046a8 !important;
  border: 1px solid #9fd0ff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* Keep the banner holder visually transparent. */
.headerBannerFrame,
.headerBannerFrame::before,
.headerBannerImg{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.headerBannerFrame::before{
  display:none !important;
}


/* Header banner true transparency fix:
   shrink-wrap the button to the banner image so no side slots remain visible. */
body[data-app-view="home"] .headerBannerFrame{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

body[data-app-view="home"] .headerBannerFrame::before,
body[data-app-view="home"] .headerBannerFrame::after{
  display: none !important;
  content: none !important;
}

body[data-app-view="home"] .headerBannerImg{
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Ensure generic button skinning doesn't bleed onto the banner button. */
button.headerBannerFrame,
button.headerBannerFrame:hover,
button.headerBannerFrame:focus,
button.headerBannerFrame:focus-visible,
button.headerBannerFrame:active{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* -----------------------------------------------------------------
   Header banner definitive behavior:
   - no visible frame
   - no left/right cropping
   - scale by height
   - width follows image naturally
   - no inherited button skinning
------------------------------------------------------------------ */
body[data-app-view="home"] .headerStatus{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

body[data-app-view="home"] .headerBannerFrame,
button.headerBannerFrame,
button.headerBannerFrame:hover,
button.headerBannerFrame:focus,
button.headerBannerFrame:focus-visible,
button.headerBannerFrame:active{
  -webkit-appearance: none !important;
  appearance: none !important;
  display:inline-flex !important;
  flex: 0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:112px !important;
  padding:0 !important;
  margin:0 auto !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  overflow:visible !important;
  cursor:pointer !important;
  line-height:0 !important;
}

body[data-app-view="home"] .headerBannerFrame::before,
body[data-app-view="home"] .headerBannerFrame::after{
  display:none !important;
  content:none !important;
}

body[data-app-view="home"] .headerBannerImg{
  display:block !important;
  width:auto !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  overflow:visible !important;
  flex:0 0 auto !important;
}

/* Kids theme: keep the now-readable home menu tags */
html[data-theme="kids"] #homeChoices .aeaGameBadge{
  color: #fff7b3 !important;
  background: #2046a8 !important;
  border: 1px solid #9fd0ff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}


/* -------------------------------------------------------------
   Home banner final layout:
   - no visible frame
   - full banner image preserved (no end cropping)
   - sized by height
   - width follows image naturally
   - header status area must not cap width at 640px
-------------------------------------------------------------- */
@media (min-width: 1181px){
  body[data-app-view="home"] .headerStatus{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    padding: 2px 0 !important;
  }
}

body[data-app-view="home"] .headerBannerFrame,
button.headerBannerFrame,
button.headerBannerFrame:hover,
button.headerBannerFrame:focus,
button.headerBannerFrame:focus-visible,
button.headerBannerFrame:active{
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 112px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  line-height: 0 !important;
}

body[data-app-view="home"] .headerBannerFrame::before,
body[data-app-view="home"] .headerBannerFrame::after{
  display: none !important;
  content: none !important;
}

body[data-app-view="home"] .headerBannerImg{
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

/* Keep the Kids-theme home-menu badge readable. */
html[data-theme="kids"] #homeChoices .aeaGameBadge{
  color: #fff7b3 !important;
  background: #2046a8 !important;
  border: 1px solid #9fd0ff !important;
  box-shadow: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}


/* Header navigation cleanup: Help and Options live in Stats & Guide now. */
.topbar #helpBtn,
.topbar #optionsBtn{
  display:none !important;
}

/* Rotating promo banners are Game Menu only. Never show them inside a game/mode screen. */
body[data-app-view="game"] .headerBannerFrame,
body[data-app-view="game"] #headerBannerFrame,
body[data-app-view="game"] .headerBannerImg,
body[data-app-view="game"] #headerBannerImg{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* In-game title plaque: personality without colliding with nav. */
body[data-app-view="game"] .headerStatus{
  width:auto !important;
  max-width:min(720px, 52vw) !important;
  overflow:visible !important;
  pointer-events:none !important;
}

body[data-app-view="game"] .headerGamePill{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  width:auto !important;
  min-width:260px !important;
  max-width:min(720px, 52vw) !important;
  padding: 10px 22px !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.15 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  font-family: var(--font-title, inherit) !important;
  font-weight:900 !important;
  color: color-mix(in oklab, var(--accent) 78%, white 22%) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.09), transparent 60%),
    rgba(0,0,0,.24) !important;
  border:1px solid color-mix(in oklab, var(--accent) 42%, rgba(255,255,255,.18)) !important;
  border-radius:16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px color-mix(in oklab, var(--accent) 18%, transparent) !important;
}

#homeBtn{
  min-width:120px !important;
}


/* Splash cleanup: hide the old "Do Not Show This Again" control without touching splash timing/progression. */
#splashDoNotShowAgain,
#splashDontShowAgain,
#dontShowSplash,
#doNotShowSplash,
#skipSplash,
.splashDoNotShowAgain,
.splashDontShowAgain,
.dontShowSplash,
.doNotShowSplash,
.skipSplash,
label[for="splashDoNotShowAgain"],
label[for="splashDontShowAgain"],
label[for="dontShowSplash"],
label[for="doNotShowSplash"],
label[for="skipSplash"]{
  display:none !important;
}


/* ============================================================
   In-game Mini Header Banners
   Replaces plain game title text with tame marquee-style art.
============================================================ */
body[data-app-view="game"] .headerGamePill{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:min(760px, 56vw) !important;
  min-width:0 !important;
  padding:0 !important;
  margin-inline:auto !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  font-size:0 !important;
  line-height:1 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
body[data-app-view="game"] .headerGamePill::before,
body[data-app-view="game"] .headerGamePill::after{
  display:none !important;
  content:none !important;
}
body[data-app-view="game"] .headerMiniBanner{
  display:block;
  width:auto;
  max-width:min(760px, 56vw);
  height:96px;
  object-fit:contain;
  object-position:center center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.38));
}

@media (max-width: 1180px){
  body[data-app-view="game"] .headerGamePill{
    max-width:min(92vw, 760px) !important;
  }
  body[data-app-view="game"] .headerMiniBanner{
    max-width:min(92vw, 760px);
    height:82px;
  }
}
@media (max-width: 760px){
  body[data-app-view="game"] .headerMiniBanner{
    height:68px;
  }
}

/* Reserved difficulty picker used by helper-gated arcade modes */
.survivalDifficultyBox,
.scrambleDifficultyBox,
.coaxDifficultyBox,
.triageDifficultyBox{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.survivalDifficultyRow,
.scrambleDifficultyRow,
.coaxDifficultyRow,
.triageDifficultyRow{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.survivalDifficultyCtl,
.scrambleDifficultyCtl,
.coaxDifficultyCtl,
.triageDifficultyCtl{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:210px;
}
.survivalDifficultySummary,
.scrambleDifficultySummary,
.coaxDifficultySummary,
.triageDifficultySummary{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}
.survivalDifficultyHint,
.scrambleDifficultyHint,
.coaxDifficultyHint,
.triageDifficultyHint{
  margin-top:10px;
}
@media (max-width: 760px){
  .survivalDifficultyCtl,
  .scrambleDifficultyCtl,
  .coaxDifficultyCtl,
  .triageDifficultyCtl{ min-width:100%; }
  .survivalDifficultySummary,
  .scrambleDifficultySummary,
  .coaxDifficultySummary,
  .triageDifficultySummary{ width:100%; }
}



/* A1d24: Focus Mode deserves a visible Help path from Options. */
.optSectionHeadWithAction{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.optHelpLink{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.16));
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(255,255,255,.030);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.14);
}
.optHelpLink:hover,
.optHelpLink:focus-visible{
  color:#071018;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent2) 88%, white 12%), color-mix(in srgb, var(--accent) 72%, var(--accent2) 28%));
  border-color: color-mix(in srgb, var(--accent2) 72%, white 15%);
  outline:none;
}
@media (max-width: 760px){
  .optSectionHeadWithAction{
    flex-direction:column;
    gap:8px;
  }
  .optHelpLink{
    align-self:flex-start;
  }
}


/* A1d25: Focus Help opens the normal in-arcade Help dialog, but keeps the chip styling. */
button.optHelpLink{
  font-family:inherit;
  cursor:pointer;
}
button.optHelpLink:hover,
button.optHelpLink:focus-visible{
  transform: translateY(-1px);
}


/* A1f Data Vault */
.dataVaultDialog{ max-width:720px; width:min(720px, calc(100% - 24px)); }
.dataVaultStatusCard{ border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px; background:rgba(255,255,255,.05); margin-bottom:12px; }
.dataVaultStatusCard.good{ border-color:rgba(43,227,138,.35); background:rgba(43,227,138,.08); }
.dataVaultStatusCard.warn{ border-color:rgba(251,191,36,.42); background:rgba(251,191,36,.08); }
.dataVaultStatusCard.danger{ border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.09); }
.dataVaultStatusTop{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.dataVaultStatusTop span{ color:var(--muted); font-size:12px; }
.dataVaultBox{ margin:12px 0 0; }
.dataVaultAdvanced{ margin-top:12px; border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 12px; background:rgba(255,255,255,.035); }
.dataVaultAdvanced summary{ cursor:pointer; }
.dataVaultNudge{ border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.075); }
.dataVaultPreview{ border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px; background:rgba(255,255,255,.05); }