/* Board palette — single source of truth for index.html + vote.html +
       flooding-results-popup.html. Applied across the whole game board,
       including the consent screen (amendment: consent is now in scope),
       EXCEPT the pre/post-survey and comprehension-check screens, which
       are intentionally frozen to literal hex (see .vote-legacy / the
       ID-scoped #surveyScreen etc. rules below) — they never reference
       these tokens, so they're immune to this palette (and any future
       one) changing under them. There is no light-card surface left on
       the board — every panel is dark. */
    :root {
      /* surfaces */
      --canvas: linear-gradient(180deg,#0D2A3E 0%,#081D2C 100%);
      --canvas-solid: #0A2233;
      --panel: linear-gradient(180deg,#163D55 0%,#12334A 100%);
      --panel-solid: #14374D;
      --panel-border: #23516E;
      --track: #0F2C3F;
      --chip: #1C5C78;
      --chip-border: #2E86A8;
      --strip: #0B2536;
      /* text */
      --white: #FFFFFF;
      --on-dark: #E8F1F6;
      --on-dark-mut: #7FA3B8;
      --on-dark-soft: #C7DAE5;
      --on-dark-dim: #9DBACB;
      --on-teal: #03242B;
      --teal-tint: #8FD4DA;
      /* semantic — one meaning each */
      --teal: #1FA3A8;
      --teal-grad: linear-gradient(180deg,#25B3B8 0%,#1A8F94 100%);
      --teal-shadow: #146F73;
      --garnet: #C2455E;
      --emerald: #2E9E76;
      --sapphire: #4A7BC8;
      --amethyst: #8A6BC1;
      --amethyst-grad: linear-gradient(180deg,#9C7ED4 0%,#7A5CAF 100%);
      --teal-bar-grad: linear-gradient(180deg,#2BBCC1 0%,#1A8F94 100%);
      color-scheme: dark;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      margin: 0; padding: 0;
      background: var(--canvas);
      display: flex; justify-content: center; align-items: center;
      min-height: 100vh; overflow-x: hidden;
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    }
    /* ══ SHARED PANEL CHROME ══════════════════════════════════════
       .panel is the ONE panel style (Step 2): background/border/radius
       must never differ across board panels. .game-container itself is
       NOT in this group — the game area sits transparent on --canvas,
       and the choice cards (.protection-card, further down) share this
       exact same background/border/radius but add their own per-choice
       border color on top, per the Step 3 element map. */
    .panel, .player-setup, .modal-content {
      background: var(--panel); border: 1px solid var(--panel-border);
      border-radius: 12px; box-shadow: none;
    }
    .player-setup, .game-container {
      width: 90%; max-width: 400px;
      padding: 20px; margin: 10px;
      position: relative; z-index: 2;
    }
    .game-container { display: none; max-width: 900px; background: transparent; border: none; box-shadow: none; }
    .player-setup h2 { margin-bottom: 20px; text-align: center; color: var(--white); }
    .player-setup input {
      display: block; margin: 10px 0; padding: 10px; width: 100%;
      background: var(--track); border: 1px solid var(--chip-border); border-radius: 10px; color: var(--on-dark);
      -webkit-appearance: none; appearance: none;
    }
    .player-setup input::placeholder { color: var(--on-dark-soft); }
    .player-setup input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
    /* Primary button (Step 3): teal gradient fill, on-teal text, chunky
       solid drop-shadow with a press effect on :active — the intended
       game feel, keep it. */
    .button {
      background: var(--teal-grad); color: var(--on-teal); border: none;
      padding: 12px; border-radius: 999px; cursor: pointer;
      font-size: 1.1em; width: 100%; margin-top: 15px;
      box-shadow: 0 3px 0 var(--teal-shadow); transition: transform 0.1s;
      -webkit-appearance: none; appearance: none;
    }
    .button:hover { filter: none; }
    .button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--teal-shadow); }
    /* Secondary button (Step 3): transparent, chip-border outline, on-dark text. */
    .button.secondary { background: transparent; color: var(--on-dark); border: 1px solid var(--chip-border); box-shadow: none; }
    .button.secondary:active { transform: none; box-shadow: none; }
    .button.secondary:hover { background: var(--panel-border); filter: none; }
    .player-list {
      display: none; background: var(--strip); border: 1px solid var(--panel-border);
      border-radius: 10px; padding: 7px 16px; margin-bottom: 10px; box-shadow: none;
    }
	.player-input-row { display:flex; gap:8px; margin:10px 0; flex-wrap:nowrap; align-items:center; }
    .player-input-row > input[id^="player"] { flex:1 1 34%; min-width:0; width:auto !important; margin:0 !important; }
    .player-input-row .edu-select { flex:1 1 calc(50% - 3px); }
    .edu-select { flex:1 1 33%; min-width:0; padding:10px 8px; border:1px solid var(--chip-border); border-radius:10px; font-family:'Nunito',sans-serif; font-size:0.78em; background:var(--track); color:var(--on-dark); cursor:pointer; -webkit-appearance:none; appearance:none; }
    .edu-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal); box-shadow:none; }
    .edu-other { flex:1 1 100%; width:100% !important; margin:0 !important; }
	
    .player-list-inner {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 8px; max-width: 900px; margin: 0 auto;
    }
    /* Empty slot is the resting state — transparent with a dashed hairline,
       so the active player (the one filled pill) is what draws the eye,
       not a wall of equally-bright chips. */
    .player-item {
      background: transparent; border: 1px dashed var(--panel-border);
      border-radius: 20px; padding: 5px 10px; text-align: center;
      color: #5B7E93; font-family: 'Nunito',sans-serif;
      font-size: 0.82em; font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;
    }
    .player-item.active {
      background: var(--chip); border: 1px solid var(--chip-border); color: var(--on-dark);
      box-shadow: none; transform: scale(1.05);
    }
    .player-item.done {
      background: transparent; border: 1px solid var(--emerald); color: var(--emerald);
    }
    body.game-active { padding-top: 52px; }
    .status-bar {
      display: flex; justify-content: space-between; flex-wrap: wrap;
      margin-bottom: 20px; padding: 10px; background: var(--panel); border: 1px solid var(--panel-border);
      border-radius: 12px; font-weight: bold; font-size: 1.2em; color: var(--on-dark);
    }
    .round-indicator {
      background: var(--chip); border: 1px solid var(--chip-border); color: var(--on-dark); padding: 5px 10px;
      border-radius: 15px; font-weight: bold; margin-right: 5px;
    }
    #votingStatus {
      display: none; margin: 20px 0; background: var(--panel); border: 1px solid var(--panel-border);
      padding: 10px; border-radius: 12px; font-size: 0.95em; color: var(--on-dark);
    }
    .protection-options {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
      gap: 20px; margin: 20px 0;
    }
    /* Choice cards (Step 2/3): same .panel background/border/radius as
       every other board panel, sitting directly on --canvas — the only
       difference is each choice's own 1px colored border (and matching
       cost-text color, set inline in the markup); .pc-hold (No
       Investment) uses --panel-border since it isn't a data-tracked
       category. */
    .protection-card {
      background: var(--panel); border: 1px solid var(--panel-border);
      border-radius: 12px; color: var(--on-dark);
      padding: 20px; text-align: center; cursor: pointer; transition: background 0.3s;
    }
    .protection-card:hover { background: var(--panel); filter: brightness(1.15); }
    .protection-card.disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--panel-border); }
    .protection-card.pc-sandbags { border-color: var(--teal); }
    .protection-card.pc-trees { border-color: var(--emerald); }
    .protection-card.pc-wall { border-color: var(--sapphire); }
    .protection-card.pc-hold { border-color: var(--panel-border); }
    .dice-display {
      display: none; text-align: center; margin: 20px 0; padding: 20px;
      background: var(--panel); border: 1px solid var(--panel-border);
      border-radius: 12px; justify-content: center; gap: 40px; flex-wrap: wrap;
    }
    .dice-box {
      display: flex; flex-direction: column; align-items: center;
      min-width: 120px; margin-bottom: 10px;
    }
    .dice {
      padding: 20px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
      box-shadow: none; width: 100%; height: 100px;
      display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 10px;
    }
    .weather-icon { font-size: 2em; margin: 5px; }
    .weather-text { font-weight: bold; color: var(--on-dark); }
    .phase-heading { display: flex; align-items: center; margin-bottom: 15px; }
    .phase-heading h2 { margin: 0; flex-grow: 1; color: var(--on-dark); }
    .modal {
      display: none; position: fixed; z-index: 1002;
      left: 0; top: 0; width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.5); overflow-y: auto;
    }
    .modal-content {
      margin: 5% auto; padding: 20px;
      width: 90%; max-width: 600px;
      position: relative; text-align: left; max-height: 88vh; overflow-y: auto;
    }
    #gameOverModal .modal-content { max-height: 90vh; }
    .modal-content h2 { margin-top: 0; color: var(--on-dark); }
    .close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: var(--on-dark-mut); }
    .close:hover { color: var(--on-dark); }
    .instruction-content { max-height: 70vh; overflow-y: auto; padding-right: 10px; }
    .instruction-content h3 { margin-top: 20px; color: var(--on-dark); }
    .instruction-content ul { padding-left: 20px; }
    .instruction-content li { margin-bottom: 8px; }
    .instruction-step { background: var(--track); border: 1px solid var(--panel-border); padding: 8px 12px; border-radius: 8px; margin-bottom: 15px; color: var(--on-dark); }
    .formula { background: var(--track); border: 1px solid var(--panel-border); padding: 10px; border-radius: 8px; font-family: monospace; margin: 10px 0; color: var(--on-dark); }
    .intro-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.88em; }
    .intro-table th, .intro-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
    .intro-table th { color: var(--on-dark); font-weight: 700; }
    .intro-table tr:last-child td { border-bottom: none; }
    .sea-level-graphic { text-align: center; margin: 15px 0; position: relative; }
    .sea-level-info { background-color: var(--track); border: 1px solid var(--panel-border); padding: 15px; border-radius: 8px; margin: 15px 0; color: var(--on-dark); }
    .teacher-prompt {
      background: var(--panel); border: 1px solid var(--panel-border); border-left: 3px solid #E4573E; padding: 10px 14px;
      border-radius: 12px; margin-bottom: 15px; font-size: 0.92em; color: var(--on-dark);
    }
    .card-icon { font-size: 2em; margin-bottom: 6px; }
    .card-fact { font-size: 0.78em; color: var(--on-dark-mut); font-style: italic; margin-top: 8px; line-height: 1.4; }
    .info-box {
      background: var(--track); border: 1px solid var(--panel-border); border-radius: 6px; padding: 10px 14px;
      margin: 12px 0; font-size: 0.9em; line-height: 1.5; color: var(--on-dark);
    }
    .discuss-q { color: var(--on-dark); font-weight: 700; font-size: 0.9em; margin-top: 10px; }
    .discuss-list { padding-left: 18px; font-size: 0.88em; color: var(--on-dark-mut); line-height: 1.7; }
    .discuss-list li { margin-bottom: 6px; }
    .concepts-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0 20px;
    }
    .concept-item { background: var(--track); border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px 12px; font-size: 0.83em; line-height: 1.5; color: var(--on-dark); }
    @media (max-width: 768px) {
      .player-list-inner { grid-template-columns: repeat(2,1fr); }
      .status-bar { flex-direction: column; align-items: flex-start; }
      .dice-display { flex-direction: column; }
      #compoundViz {
        position: fixed; top:auto; bottom:0; right:0; left:0;
        width:100%; max-height: 55vh; border-radius: 16px 16px 0 0;
        animation: slideInUp 0.4s ease;
      }
      @keyframes slideInUp { from{transform:translateY(100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
      body.compound-open .game-container { margin-right: 0; }
    }
    @media (max-width: 480px) {
      .player-setup, .game-container { padding: 15px; }
      .button { font-size: 1em; padding: 10px; }
      .dice-box { min-width: 100%; }
      .dice { height: 80px; padding: 15px; }
    }
    #cityCanvas { display: none; }
    /* Bleeds past #gameContainer's own left/right padding so the
       illustration fills the panel edge-to-edge instead of floating with
       a canvas-colored gutter around it — the negative left/right margin
       undoes exactly the 20px padding .game-container applies (see the
       matching -14px/-12px/-10px overrides at each of its padding
       breakpoints further down). NOT bled on top: #cityBanner sits
       directly above this in the DOM, and an earlier version used a
       negative top margin too, which pulled the illustration up over
       the city title/badge. Top margin stays positive so it clears
       whatever precedes it in normal flow. */
    #crossSection {
      width: calc(100% + 40px); margin: 10px -20px 0 -20px;
      position: relative; border-radius: 14px 14px 0 0; overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,100,0.15); background: #c8e8f8;
    }
    #crossSection svg { display: block; width: 100%; height: auto; }
    @keyframes rainFall { from{transform:translateY(-30px);opacity:0.7;} to{transform:translateY(60px);opacity:0;} }
    .cs-rain-drop { position:absolute; width:2px; border-radius:2px; animation:rainFall linear infinite; pointer-events:none; }
    @keyframes lightningFlash { 0%,100%{opacity:0} 10%,30%{opacity:1} 20%,40%{opacity:0} }
    #csLightning { animation:lightningFlash 2.4s ease-in-out infinite; display:none; }
    @keyframes waveShift { from{stroke-dashoffset:0} to{stroke-dashoffset:-60} }
    .cs-wave-anim { stroke-dasharray:30,10; animation:waveShift 1.8s linear infinite; }
    @keyframes csRiverFlow { to{stroke-dashoffset:-72} }
    .cs-river-flow { animation:csRiverFlow 1.7s linear infinite; }
    @media (prefers-reduced-motion:reduce) { .cs-river-flow { animation:none; } }
    .cs-zones { display:grid; grid-template-columns:1.1fr 2.4fr 1.3fr; width:calc(100% + 40px); border-radius:0 0 14px 14px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,100,0.15); margin:0 -20px 10px -20px; }
    .cs-zones > div { padding:6px 6px; text-align:center; color:#fff; font-family:'Nunito',sans-serif; font-weight:800; font-size:0.68em; letter-spacing:1.5px; }
    .cs-z1 { background:#0d63a6; } .cs-z2 { background:#0b3f7a; } .cs-z3 { background:#0b2e57; }
    @keyframes floodRise { from{transform:scaleY(0)} to{transform:scaleY(1)} }
    .cs-driver-pill {
      position: absolute; display: flex; align-items: center; gap: 6px;
      border-radius: 22px; padding: 5px 12px 5px 8px;
      font-size: 0.7em; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
      box-shadow: 0 3px 12px rgba(0,0,0,0.22); border: 2px solid rgba(255,255,255,0.6);
      opacity: 0; transform: translateY(10px) scale(0.88);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1);
      pointer-events: none; backdrop-filter: blur(6px); z-index: 10;
    }
    .cs-driver-pill.show { opacity:1; transform:translateY(0) scale(1); }
    #pill-surge    { background:linear-gradient(135deg,rgba(21,101,192,0.92),rgba(13,71,161,0.88));color:#fff;left:3%;top:9%; }
    #pill-tide     { background:linear-gradient(135deg,rgba(0,96,170,0.92),rgba(0,77,140,0.88));color:#fff;left:3%;top:28%; }
    #pill-rain     { background:linear-gradient(135deg,rgba(27,94,32,0.92),rgba(46,125,50,0.88));color:#fff;right:3%;top:9%; }
    #pill-lightrain{ background:linear-gradient(135deg,rgba(38,109,38,0.9),rgba(56,142,60,0.88));color:#fff;right:3%;top:9%; }
    #pill-river    { background:linear-gradient(135deg,rgba(1,87,155,0.92),rgba(2,119,189,0.88));color:#fff;right:3%;top:9%; }
    #pill-thunder  { background:linear-gradient(135deg,rgba(74,20,140,0.92),rgba(106,27,154,0.88));color:#fff;right:3%;top:9%; }
    #pill-compound { background:linear-gradient(135deg,rgba(230,81,0,0.94),rgba(191,54,12,0.9));color:#fff;left:50%;top:7%;transform:translateX(-50%) translateY(10px) scale(0.88); }
    #pill-compound.show { opacity:1;transform:translateX(-50%) translateY(0) scale(1) !important; }
    #pill-slr      { background:linear-gradient(135deg,rgba(183,28,28,0.94),rgba(198,40,40,0.9));color:#fff;left:3%;bottom:20%; }
    .cs-driver-pill .pill-icon { font-size:1.15em; flex-shrink:0; }
    .cs-driver-pill .pill-label { line-height:1.2; }
    .cs-driver-pill .pill-label strong { display:block; font-size:1.05em; }
    .cs-driver-pill .pill-label span   { font-size:0.88em; opacity:0.88; font-weight:600; }
    @keyframes damagePulse { 0%,100%{opacity:0.18} 50%{opacity:0.38} }
    #csDamageOverlay { animation:damagePulse 1.6s ease-in-out infinite; display:none; }
    .budget-bar-wrap {
      margin: 6px 0 14px; background: var(--track); border-radius: 20px; height: 22px;
      overflow: hidden; position: relative;
    }
    /* Budget-line data — the one place --budget is used as a fill. */
    .budget-bar-fill { height:100%; border-radius:20px; transition:width 0.8s ease,background 0.8s ease; background:var(--amethyst); }
    .budget-bar-label {
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      font-size:0.75em; font-weight:bold; color:var(--on-dark);
      text-shadow:none; white-space:nowrap;
    }
    #historyChart { width:100%; height:90px; display:none; margin-top:8px; }
    @keyframes diceShake {
      0%{transform:rotate(0deg) scale(1);} 20%{transform:rotate(-15deg) scale(1.2);}
      40%{transform:rotate(12deg) scale(0.9);} 60%{transform:rotate(-8deg) scale(1.15);}
      80%{transform:rotate(5deg) scale(0.95);} 100%{transform:rotate(0deg) scale(1);}
    }
    .dice.rolling { animation:diceShake 0.5s ease; }
    @keyframes damageFlash { 0%{background:var(--panel);} 25%{background:var(--garnet);} 75%{background:var(--garnet);} 100%{background:var(--panel);} }
    .damage-flash { animation:damageFlash 0.8s ease; }
    #protectionBadge {
      display:inline-block; background:var(--emerald); color:var(--on-dark); border-radius:20px;
      padding:3px 14px; font-size:0.82em; font-weight:bold; margin-left:8px;
      vertical-align:middle; transition:background 0.4s;
    }
    .severity-bar-wrap { margin:10px 0 6px; }
    .severity-bar-wrap label { font-size:0.82em; color:var(--on-dark-mut); display:block; margin-bottom:4px; }
    .severity-track { background:var(--track); border-radius:20px; height:18px; overflow:hidden; position:relative; }
    .severity-fill { height:100%; border-radius:20px; transition:width 0.9s ease; }
    .severity-label { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:0.72em; font-weight:bold; color:white; text-shadow:0 1px 2px rgba(0,0,0,0.4); }
    .round-dots { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
    .round-dot { width:14px; height:14px; border-radius:50%; background:var(--track); border:2px solid var(--panel-border); transition:all 0.3s; }
    .round-dot.done   { background:var(--emerald); border-color:var(--emerald); }
    .round-dot.active { background:var(--chip); border-color:var(--chip-border); box-shadow:none; }
    .round-dot.future { background:var(--track); border-color:var(--panel-border); }
    #gameOverChart { width:100%; max-width:420px; display:block; margin:12px auto; }
    #compoundViz {
      display:none; position:fixed; top:58px; right:0;
      width:42vw; min-width:400px; max-height:calc(100vh - 58px);
      overflow-y:auto; border-radius:16px 0 0 16px;
      box-shadow:-6px 0 32px rgba(0,0,0,0.18); z-index:300;
      animation:slideInRight 0.45s cubic-bezier(.22,.68,0,1.2);
    }
    @keyframes slideInRight { from{opacity:0;transform:translateX(100%);} to{opacity:1;transform:translateX(0);} }
    body.compound-open .game-container { margin-right:calc(42vw + 10px); transition:margin-right 0.4s ease; }
    @keyframes fadeSlideIn { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
    .cv-header { background:var(--panel); border-bottom:1px solid var(--panel-border); color:var(--on-dark); padding:10px 16px; display:flex; align-items:center; gap:10px; }
    .cv-header h3 { margin:0; font-size:1em; }
    .cv-badge { background:var(--garnet); color:var(--on-dark); border-radius:20px; padding:2px 12px; font-size:0.78em; font-weight:bold; margin-left:auto; white-space:nowrap; }
    .cv-badge.single { background:var(--emerald); }
    .cv-drivers { display:flex; align-items:stretch; background:var(--track); }
    .cv-driver { flex:1; padding:22px 18px; text-align:center; }
    .cv-driver-icon { font-size:3em; display:block; }
    .cv-driver-name { font-weight:700; font-size:1em; color:var(--on-dark); margin:8px 0 4px; }
    .cv-driver-sev  { font-size:0.85em; color:var(--on-dark-mut); }
    .cv-driver-dmg  { font-size:0.95em; font-weight:700; color:var(--garnet); margin-top:6px; }
    .cv-connector { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 10px; font-size:2em; color:var(--on-dark); font-weight:900; flex-shrink:0; background:var(--track); }
    .cv-connector span { font-size:0.55em; color:var(--garnet); font-weight:700; }
    .cv-canvas-row { background:var(--panel); padding:16px 18px 10px; border-top:1px solid var(--panel-border); }
    .cv-canvas-row label { font-size:0.82em; color:var(--on-dark-mut); display:block; margin-bottom:8px; }
    #interactionCanvas { width:100%; height:160px; display:block; border-radius:6px; }
    .cv-explain { background:var(--track); padding:16px 20px; font-size:0.88em; color:var(--on-dark); line-height:1.6; border-top:1px solid var(--panel-border); }
    .cv-explain strong { color:var(--garnet); }
    .cv-totals { display:flex; background:var(--panel); border-top:1px solid var(--panel-border); color:var(--on-dark); font-size:0.88em; font-weight:700; }
    .cv-total-cell { flex:1; padding:14px 10px; text-align:center; border-right:1px solid var(--panel-border); }
    .cv-total-cell:last-child { border-right:none; }
    .cv-total-cell .cv-val { font-size:1.35em; display:block; margin-top:4px; }
    .cv-total-cell .cv-val.red   { color:var(--garnet); }
    .cv-total-cell .cv-val.green { color:var(--emerald); }
    .cv-total-cell .cv-val.yellow{ color:var(--amethyst); }
    /* Fredoka One / Nunito are loaded via <link> tags in each HTML page's
       <head> (not @import here) — @import inside a stylesheet is only
       discovered after the browser fetches and parses this file, an extra
       slow round-trip that's especially unreliable on mobile networks and
       was why phones/tablets sometimes fell back to the OS default font
       while desktop (faster, more reliable connections) didn't. */
    body { font-family:'Nunito',sans-serif; }
    h1,h2,h3 { font-family:'Fredoka One',cursive; letter-spacing:0.5px; }
    /* top offsets pushed further up (was -18px/-12px) — those were
       calibrated for the old solid card top edge; now that
       .game-container is transparent with content starting close to its
       own top edge, the old offsets let these decorative clouds drift
       down over the city title/badge. */
    .game-container::before { content:'☁️'; position:absolute; top:-46px; left:10px; font-size:2.2rem; opacity:0.35; animation:floatCloud 7s ease-in-out infinite; pointer-events:none; }
    .game-container::after  { content:'☁️'; position:absolute; top:-40px; right:20px; font-size:1.6rem; opacity:0.28; animation:floatCloud 9s ease-in-out infinite reverse; pointer-events:none; }
    @keyframes floatCloud { 0%,100%{transform:translateX(0);} 50%{transform:translateX(18px);} }
    .player-setup { overflow:hidden; position:relative; }
    .player-setup h2 { color:var(--white); font-family:'Fredoka One',cursive; font-size:1.9em; text-shadow:none; }
    .player-setup input { border:1px solid var(--chip-border); border-radius:10px !important; padding:10px 16px !important; font-family:'Nunito',sans-serif !important; font-size:0.95em; background:var(--track); transition:border-color 0.2s,box-shadow 0.2s; }
    .player-setup input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal); box-shadow:none; }
    .player-setup input::placeholder { color:var(--on-dark-soft); }
    .setup-mascot { text-align:center; margin-bottom:10px; position:relative; }
    .mascot-body { font-size:3.5em; animation:mascotBob 1.8s ease-in-out infinite; display:inline-block; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
    @keyframes mascotBob { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(4deg);} }
    .mascot-speech { background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:7px 14px; font-size:0.82em; color:var(--on-dark); font-weight:700; display:inline-block; margin-top:4px; position:relative; max-width:240px; }
    .mascot-speech::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-bottom-color:var(--panel-border); }
    /* Hidden (Step 4 of the contrast-fix amendment): this decorative
       rain overlay was the "faint vertical streaks" behind the join
       card. js/app.js's makeRain() still runs and appends .raindrop
       elements underneath — display:none here is a styling-only fix,
       nothing JS-side changed. */
    .rain-container { display:none; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; border-radius:15px; z-index:0; }
    .raindrop { position:absolute; top:-20px; width:2px; border-radius:2px; background:linear-gradient(180deg,transparent,var(--on-dark-mut)); animation:rainFall linear infinite; opacity:0.4; }
    @keyframes rainFall { to{transform:translateY(500px);opacity:0;} }
    .button { border-radius:999px !important; font-family:'Fredoka One',cursive !important; font-size:1.15em !important; letter-spacing:0.5px; box-shadow:0 3px 0 var(--teal-shadow) !important; transition:transform 0.1s !important; }
    .button:hover { filter:none !important; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    .button:active { transform:translateY(3px) !important; box-shadow:0 1px 0 var(--teal-shadow) !important; }
    .button.secondary { box-shadow:none !important; }
    .button.secondary:hover { box-shadow:none !important; }
    .button.secondary:active { transform:none !important; box-shadow:none !important; }
    .status-bar { background:var(--panel) !important; border:1px solid var(--panel-border) !important; border-radius:12px !important; font-family:'Fredoka One',cursive !important; font-size:1em !important; gap:6px; color:var(--on-dark); }
    .protection-card { transition:transform 0.2s,box-shadow 0.2s !important; position:relative; overflow:hidden; }
    .protection-card:hover { transform:translateY(-6px) rotate(-1deg) !important; box-shadow:none !important; filter:brightness(1.15); }
    .protection-card:active { transform:scale(0.96) !important; }
    .card-icon { font-size:2.8em !important; animation:iconWiggle 3s ease-in-out infinite; display:inline-block !important; }
    @keyframes iconWiggle { 0%,100%{transform:rotate(0deg);} 20%{transform:rotate(-8deg);} 40%{transform:rotate(8deg);} 60%{transform:rotate(-4deg);} 80%{transform:rotate(4deg);} }
    .protection-card h3 { font-family:'Fredoka One',cursive; font-size:1.25em; color:var(--on-dark); }
    .dice { border-radius:16px !important; border:1px solid var(--panel-border) !important; background:var(--panel) !important; box-shadow:none !important; cursor:pointer; transition:transform 0.15s,opacity 0.15s; }
    .dice:hover { transform:scale(1.05) rotate(2deg); }
    .dice.dice-disabled { cursor:default; opacity:0.6; pointer-events:none; }
    .dice.dice-disabled:hover { transform:none; }
    .weather-icon { font-size:2.4em !important; }
    .weather-text { font-family:'Fredoka One',cursive; font-size:0.95em !important; color:var(--on-dark) !important; }
    .round-indicator { background:var(--chip) !important; border:1px solid var(--chip-border) !important; border-radius:20px !important; font-family:'Fredoka One',cursive !important; box-shadow:none; animation:none; }
    .teacher-prompt { background:var(--panel) !important; border:1px solid var(--panel-border) !important; border-left:3px solid #E4573E !important; border-radius:12px !important; font-size:0.88em !important; }
    .modal-content { border-radius:16px !important; border-top:1px solid var(--panel-border) !important; box-shadow:none !important; }
    .modal-content h2 { font-family:'Fredoka One',cursive !important; color:var(--on-dark); }
    .budget-bar-wrap { border-radius:25px !important; border:1px solid var(--panel-border) !important; overflow:hidden; }
    #historyChart { border-radius:12px; border:1px solid var(--panel-border); }
    #votingStatus { border-radius:10px !important; border:1px dashed var(--panel-border) !important; background:var(--track) !important; }
    .emoji-burst { position:fixed; pointer-events:none; z-index:9999; font-size:1.8em; animation:emojiFly 1.1s ease forwards; }
    @keyframes emojiFly { 0%{opacity:1;transform:translate(0,0) scale(1);} 100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(0.4);} }
    #reactionBar { display:none; text-align:center; padding:6px 0 0; font-size:1.4em; animation:fadeSlideIn 0.5s ease; }
    .reaction-emoji { display:inline-block; animation:reactionBounce 0.6s ease forwards; }
    @keyframes reactionBounce { 0%{transform:scale(0) rotate(-20deg);} 60%{transform:scale(1.3) rotate(5deg);} 100%{transform:scale(1) rotate(0);} }
    #cityCanvas { border:1px solid var(--panel-border) !important; border-radius:14px !important; box-shadow:none; }
    #gameOverModal .modal-content { border-top:1px solid var(--panel-border) !important; }
    #reportModal {
      display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%;
      background:var(--track); overflow-y:auto;
    }
    .report-topbar {
      position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--panel-border);
      padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
      gap:12px; box-shadow:none;
    }
    .report-topbar-left h1 { margin:0; font-size:1.05em; font-family:'Fredoka One',cursive; color:var(--on-dark); line-height:1.2; }
    .report-topbar-left .report-meta-line { font-size:0.72em; color:var(--on-dark-mut); margin-top:2px; }
    .report-topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .btn-close-top { background:var(--track); color:var(--on-dark); border:1px solid var(--panel-border); border-radius:50%; width:32px; height:32px; font-size:1em; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.18s; flex-shrink:0; }
    .btn-close-top:hover { background:var(--panel-border); }
	#mobileWidgetSlot #roleBadge { margin-bottom: 10px; }
    #mobileWidgetSlot #facilitatorCard { margin-bottom: 14px; }
    #reportModal .report-wrapper { max-width:860px; margin:0 auto; padding:24px 16px 60px; font-family:'Georgia',serif; }
    .report-section-divider { height:1px; background:var(--panel-border); margin:28px 0; border-radius:0; }
    .report-header-bar { display:none; }
    .report-nav { display:none; }
    .player-report-page { display:block !important; background:var(--panel); border:1px solid var(--panel-border); padding:24px; border-radius:16px; box-shadow:none; margin-bottom:16px; }
    .player-report-page h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.5em; margin:0 0 4px; border-bottom:1px solid var(--panel-border); padding-bottom:8px; }
    .player-report-page .player-role-tag { display:inline-block; background:var(--track); color:var(--on-dark); border:1px solid var(--panel-border); border-radius:12px; padding:2px 12px; font-size:0.8em; font-weight:bold; margin-bottom:16px; }
    .summary-page { display:block !important; background:var(--panel); border:1px solid var(--panel-border); padding:24px; border-radius:16px; box-shadow:none; margin-bottom:16px; }
    .summary-page h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.5em; margin:0 0 16px; }
    .report-footer-actions { display:none; }
    #emailStatus { display:none !important; }
    .vote-bar-row { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:0.82em; }
    .vote-bar-label { width:120px; color:var(--on-dark); }
    .vote-bar-track { flex:1; background:var(--track); border:1px solid var(--panel-border); border-radius:6px; height:16px; overflow:hidden; }
    .vote-bar-count { width:24px; text-align:right; color:var(--on-dark-mut); font-weight:bold; }
    .team-section { margin:22px 0; padding:16px; background:var(--track); border-radius:10px; border:1px solid var(--panel-border); }
    .team-section h3 { color:var(--on-dark); margin:0 0 12px; font-size:1em; }
    #resultsScreen {
      display:none; position:fixed; inset:0; z-index:1500;
      background:var(--track);
      overflow-y:auto; padding:20px 16px 40px;
    }
    .rs-inner { max-width:640px; margin:0 auto; }
    .rs-city-header { text-align:center; margin-bottom:24px; }
    .rs-city-header .rs-city-icon { font-size:3.5em; display:block; animation:floatIn 0.7s ease both; }
    .rs-city-header h1 { font-family:'Fredoka One',cursive; color:var(--on-dark); font-size:clamp(1.5em,5vw,2.2em); margin:8px 0 4px; animation:floatIn 0.7s 0.1s ease both; }
    .rs-city-header .rs-subtitle { color:var(--on-dark-mut); font-size:0.88em; animation:floatIn 0.7s 0.2s ease both; }
    @keyframes floatIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
    .rs-report-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:20px; margin-bottom:20px; animation:floatIn 0.7s 0.25s ease both; }
    .rs-report-card h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.15em; margin:0 0 14px; text-align:center; letter-spacing:0.5px; }
    .rs-grades-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
    .rs-grade-cell { background:var(--track); border-radius:12px; padding:10px 4px; text-align:center; border:1px solid var(--panel-border); transition:transform 0.2s; }
    .rs-grade-cell:hover { transform:scale(1.06); }
    .rs-grade-letter { font-size:clamp(1.6em,5vw,2.2em); font-weight:900; font-family:'Fredoka One',cursive; line-height:1; margin-bottom:4px; }
    .rs-grade-label { font-size:0.6em; color:var(--on-dark-mut); line-height:1.2; }
    /* Report-card grades reuse the five data tokens as a best→worst scale,
       consistent with how they already encode "protective" vs "threat"
       elsewhere — not a sixth ad hoc color. */
    .rg-A{color:var(--emerald);} .rg-B{color:var(--sapphire);} .rg-C{color:var(--amethyst);} .rg-D{color:var(--garnet);} .rg-F{color:var(--garnet);}
    .rs-badges { background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:16px 20px; margin-bottom:20px; animation:floatIn 0.7s 0.35s ease both; }
    .rs-badges h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.1em; margin:0 0 12px; text-align:center; }
    .rs-badge-chip { display:inline-flex; align-items:center; gap:5px; background:var(--amethyst); color:var(--on-dark); border-radius:20px; padding:6px 14px; font-size:0.82em; font-weight:800; font-family:'Nunito',sans-serif; margin:4px; box-shadow:none; animation:badgePop 0.5s ease both; }
    .rs-no-badge { text-align:center; color:var(--on-dark-mut); font-size:0.85em; padding:6px 0; }
    .rs-impact { background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:14px 20px; margin-bottom:20px; animation:floatIn 0.7s 0.4s ease both; text-align:center; }
    .rs-impact h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.1em; margin:0 0 12px; }
    .rs-impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .rs-impact-cell { background:var(--track); border:1px solid var(--panel-border); border-radius:12px; padding:10px 6px; }
    .rs-impact-val { font-size:clamp(1.2em,4vw,1.7em); font-weight:900; font-family:'Fredoka One',cursive; color:var(--garnet); }
    .rs-impact-lbl { font-size:0.68em; color:var(--on-dark-mut); margin-top:3px; }
    .rs-roles { background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:16px 20px; margin-bottom:24px; animation:floatIn 0.7s 0.45s ease both; }
    .rs-roles h2 { color:var(--on-dark); font-family:'Fredoka One',cursive; font-size:1.1em; margin:0 0 10px; text-align:center; }
    .rs-role-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; margin:6px 0; background:var(--track); }
    .rs-role-row .rr-icon { font-size:1.4em; }
    .rs-role-info { flex:1; font-size:0.82em; }
    .rs-role-info strong { color:var(--on-dark); }
    .rs-role-info span { color:var(--on-dark-mut); }
    .rs-role-result { font-size:0.82em; font-weight:700; }
    .rr-win{color:var(--emerald);} .rr-loss{color:var(--garnet);}
    .rs-cta { width:100%; padding:16px; font-family:'Fredoka One',cursive; font-size:1.2em; background:var(--teal-grad); color:var(--on-teal); border:none; border-radius:999px; cursor:pointer; box-shadow:0 3px 0 var(--teal-shadow); transition:transform 0.1s; animation:floatIn 0.7s 0.5s ease both; letter-spacing:0.5px; }
    .rs-cta:hover { filter:none; }
    .rs-cta:active { transform:translateY(2px); box-shadow:0 1px 0 var(--teal-shadow); }
    .player-setup  { width:min(94vw,700px); }
    .game-container { width:min(96vw,900px); }
    .modal-content { width:min(92vw,600px); }
    @media (max-width:900px) {
      .game-container{padding:14px;} .protection-options{gap:12px;}
      #crossSection{width:calc(100% + 28px);margin:10px -14px 0 -14px;}
      .cs-zones{width:calc(100% + 28px);margin:0 -14px 10px -14px;}
    }
    @media (max-width:700px) {
      body{align-items:flex-start;padding:8px 0 30px;}
      .game-container{padding:12px;max-width:100%;border-radius:10px;}
      .player-setup{padding:16px;}
      .status-bar{flex-wrap:wrap;gap:6px;font-size:0.85em;}
      .status-bar > div{flex:1 1 calc(50% - 6px);}
      .protection-options{grid-template-columns:1fr;gap:10px;}
      .protection-card{padding:14px;}
      .dice-display{flex-direction:column;gap:16px;}
      .dice-box{min-width:unset;width:100%;}
      .dice{height:90px;}
      .player-list-inner{grid-template-columns:repeat(2,1fr) !important;}
      .modal-content{margin:2% auto;padding:16px;}
      #compoundViz{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;max-height:58vh;border-radius:18px 18px 0 0;}
      body.compound-open .game-container{margin-right:0;}
      #crossSection{width:calc(100% + 24px);margin:10px -12px 0 -12px;border-radius:10px 10px 0 0;}
      .cs-zones{width:calc(100% + 24px);margin:0 -12px 10px -12px;}
    }
    @media (max-width:480px) {
      body{font-size:15px;}
      .game-container{padding:10px;border-radius:8px;}
      .player-setup{padding:14px;}
      #crossSection{width:calc(100% + 20px);margin:10px -10px 0 -10px;border-radius:8px 8px 0 0;}
      .cs-zones{width:calc(100% + 20px);margin:0 -10px 10px -10px;}
      .button{font-size:0.95em;padding:10px 14px;}
      .rs-grades-grid{grid-template-columns:repeat(3,1fr);}
      .rs-impact-grid{grid-template-columns:repeat(3,1fr);}
      .rs-grade-letter{font-size:1.5em;}
      .metrics-grid{grid-template-columns:1fr 1fr;}
      .concepts-grid{grid-template-columns:1fr;}
    }
    @media (max-width:360px) { .rs-grades-grid{grid-template-columns:repeat(3,1fr);gap:5px;} }
    /* .survey-option's --opt-color custom property is set inline per
       button from js/app.js's optColors array — a 4-way categorical
       data encoding (which answer letter), now sourced from the same
       4 data tokens used in charts elsewhere, not ad hoc hex. */
    /* Frozen to literal LUXE hex — .survey-option/.survey-dot are used
       exclusively inside index.html's excluded #surveyScreen (the
       per-player reflection question flow), which the Ocean reskin must
       not touch. */
    .survey-option { display:block; width:100%; background:#FFFFFF; border:1px solid #D1C7BD; border-radius:14px; padding:13px 16px; color:#322D29; font-family:'Nunito',sans-serif; font-size:0.92em; font-weight:700; text-align:left; cursor:pointer; transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1); line-height:1.4; }
    .survey-option:hover { background:#EFE9E1; border-color:#72383D; transform:translateX(4px); }
    .survey-option.selected { background:#72383D; color:#FFFFFF; border-color:#72383D; box-shadow:none; transform:scale(1.02); }
    .survey-option .opt-letter { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:#EFE9E1; color:#322D29; border-radius:50%; font-size:0.78em; font-weight:900; margin-right:10px; flex-shrink:0; vertical-align:middle; }
    .survey-option.selected .opt-letter { background:rgba(255,255,255,0.3); color:#FFFFFF; }
    .survey-dot { width:10px; height:10px; border-radius:50%; background:#D1C7BD; transition:all 0.3s; }
    .survey-dot.answered { background:#72383D; transform:scale(1.15); }
    .survey-dot.current  { background:#322D29; transform:scale(1.3); box-shadow:none; }
    .survey-dot.skipped  { background:#8A7F72; }
    .stat-question-block { background:var(--panel); border-radius:14px; padding:16px; margin-bottom:14px; border:1px solid var(--panel-border); }
    .stat-question-block h4 { font-size:0.88em; color:var(--on-dark); margin:0 0 12px; font-family:'Nunito',sans-serif; font-weight:800; line-height:1.4; }
    .stat-bar-row { margin:6px 0; }
    .stat-bar-label { font-size:0.78em; color:var(--on-dark); margin-bottom:3px; display:flex; justify-content:space-between; align-items:flex-end; }
    .stat-bar-label .who-picked { font-size:0.82em; color:var(--on-dark-mut); font-style:italic; }
    .stat-bar-track { height:22px; background:var(--track); border:1px solid var(--panel-border); border-radius:20px; overflow:hidden; position:relative; }
    .stat-bar-fill { height:100%; border-radius:20px; transition:width 0.8s ease; display:flex; align-items:center; padding-left:8px; font-size:0.72em; font-weight:800; color:var(--on-dark); }

    /* ── Google Sheets submission status strip ── */
    #sheetsStatusStrip {
      display:none; padding:8px 16px; font-size:0.82em;
      font-family:'Nunito',sans-serif; text-align:center;
      border-radius:10px; margin:10px 0; border:1px solid var(--panel-border);
    }
    #sheetsStatusStrip.sending { background:var(--track); color:var(--on-dark); }
    #sheetsStatusStrip.success { background:var(--panel); color:var(--emerald); border-color:var(--emerald); }
    #sheetsStatusStrip.error   { background:var(--panel); color:var(--garnet); border-color:var(--garnet); }

    @media print {
      body > *:not(#surveyResultsScreen) { display:none !important; }
      #surveyResultsScreen { display:block !important; position:static !important; overflow:visible !important; background:var(--panel) !important; }
      #srsActionBar, .no-print { display:none !important; }
      .print-only { display:block !important; }
      #srsContent { padding:0 !important; max-width:100% !important; }
      .stat-bar-fill { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
      .rs-grade-letter { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
      .srs-player-block { break-inside:avoid; }
      .stat-question-block { break-inside:avoid; }
    }

    /* ── Metrics grid (report) ── */
    .metrics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:18px; }
    .metric-card { background:var(--track); border-radius:10px; padding:12px; text-align:center; border:1px solid var(--panel-border); }
    .metric-card.good { background:var(--panel); border-color:var(--emerald); }
    .metric-card.danger { background:var(--panel); border-color:var(--garnet); }
    .metric-card.highlight { background:var(--panel); border-color:var(--amethyst); }
    .metric-val { font-family:'Fredoka One',cursive; font-size:1.6em; color:var(--on-dark); line-height:1.1; }
    .metric-card.good .metric-val { color:var(--emerald); }
    .metric-card.danger .metric-val { color:var(--garnet); }
    .metric-card.highlight .metric-val { color:var(--amethyst); }
    .metric-lbl { font-size:0.72em; color:var(--on-dark-mut); margin-top:4px; line-height:1.4; }
    /* ── Decision log table ── */
    .decision-log-table { width:100%; border-collapse:collapse; font-size:0.82em; margin-top:8px; }
    .decision-log-table th { background:var(--track); color:var(--on-dark); padding:6px 8px; text-align:left; font-family:'Nunito',sans-serif; font-weight:800; border-bottom:1px solid var(--panel-border); }
    .decision-log-table td { padding:6px 8px; border-bottom:1px solid var(--panel-border); color:var(--on-dark); vertical-align:middle; }
    .decision-log-table tr:last-child td { border-bottom:none; }
    .badge-compound { background:var(--garnet); color:#FFFFFF; border-radius:10px; padding:2px 8px; font-size:0.85em; font-weight:700; white-space:nowrap; }
    /* ── Behavioral bars ── */
    .behavior-bar-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:0.82em; }
    .behavior-bar-label { width:200px; color:var(--on-dark); font-size:0.85em; flex-shrink:0; }
    .behavior-bar-track { flex:1; background:var(--track); border:1px solid var(--panel-border); border-radius:6px; height:18px; overflow:hidden; position:relative; }
    .behavior-bar-fill { height:100%; border-radius:6px; transition:width 0.8s ease; }
    .behavior-bar-val { width:36px; text-align:right; color:var(--on-dark-mut); font-weight:700; font-size:0.9em; }
    /* ── Role cards ── */
    .role-card { display:flex; align-items:flex-start; gap:14px; padding:14px; margin:10px 0; border-radius:12px; border:1px solid var(--panel-border); background:var(--track); }
    .role-icon { font-size:2.2em; line-height:1; flex-shrink:0; }
    .role-name { font-family:'Fredoka One',cursive; color:var(--on-dark); font-size:1.1em; margin-bottom:4px; }
    .role-goal { font-size:0.83em; color:var(--on-dark-mut); margin:2px 0; }
    .role-player { font-size:0.83em; font-weight:700; color:var(--on-dark); margin-top:6px; }
    /* ── Rationale section ── */
    .rationale-section { margin:16px 0; padding:14px 16px; background:var(--track); border-radius:10px; border:1px solid var(--panel-border); }
    .rationale-section h3 { color:var(--on-dark); font-size:0.95em; margin:0 0 8px; font-family:'Nunito',sans-serif; font-weight:800; }
    .rationale-section p { font-size:0.85em; color:var(--on-dark-mut); line-height:1.7; margin:0; }

    @keyframes slrPulse { 0%,100%{transform:scale(1) rotate(-5deg);} 50%{transform:scale(1.2) rotate(5deg);} }

    /* ══ RIGHT PANEL — no left panel, game panel fills remaining space ═ */
    #rightPanel {
      display: none;
      position: fixed; top: 52px; right: 0;
      width: 480px; height: calc(100vh - 52px);
      overflow-y: auto; overflow-x: hidden;
      z-index: 250; padding: 8px 8px 16px 8px;
      flex-direction: column; gap: 10px;
      background: transparent;
    }
    body.game-active #rightPanel { display: flex; }
    body.game-active .game-container {
      margin-left: 16px !important;
      margin-right: calc(480px + 16px) !important;
      width: min(calc(100vw - 480px - 32px), 1600px) !important;
      max-width: min(calc(100vw - 480px - 32px), 1600px) !important;
    }
    @media (min-width: 1301px) and (max-width: 1700px) {
      #rightPanel { width: 400px; }
      body.game-active .game-container {
        margin-right: calc(400px + 16px) !important;
        width: min(calc(100vw - 400px - 32px), 1600px) !important;
        max-width: min(calc(100vw - 400px - 32px), 1600px) !important;
      }
    }
    @media (max-width: 1300px) {
      #rightPanel { display: none !important; }
      body.game-active .game-container {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 94vw !important;
        max-width: 900px !important;
      }
    }
    .game-container { width: 94vw; max-width: 1600px; }

    /* Facilitator card */
    #facilitatorCard {
      display: none;
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: 16px; padding: 16px 18px;
      font-size: 0.88em; animation: fadeSlideIn 0.4s ease; position: relative;
      box-shadow: none;
    }
    #facilitatorCard .fac-header {
      display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
    }
    #facilitatorCard .fac-icon { font-size: 1.3em; }
    #facilitatorCard .fac-label { font-family: 'Fredoka One', cursive; color: var(--on-dark); font-size: 0.88em; }
    #facilitatorCard .fac-text { color: var(--on-dark); line-height: 1.55; font-family: 'Nunito', sans-serif; font-size: 0.88em; }
    .fac-loading { display: flex; gap: 5px; align-items: center; color: var(--on-dark-mut); font-size: 0.85em; }
    .fac-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--panel-border); animation: facPulse 1s ease-in-out infinite; }
    .fac-dot:nth-child(2) { animation-delay: 0.2s; }
    .fac-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes facPulse { 0%,100%{opacity:0.3;transform:scale(0.8);} 50%{opacity:1;transform:scale(1.2);} }

    /* compoundViz in rightPanel */
    #compoundViz { display: none; }
    #rightPanel #compoundViz {
      position: static !important; width: 100% !important;
      min-width: unset !important; max-height: none !important;
      border-radius: 16px !important; overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15) !important;
      animation: none !important; flex-shrink: 0;
    }
    #rightPanel .cv-drivers { flex-direction: column; gap: 0; }
    #rightPanel .cv-driver { padding: 10px 14px; display: flex; align-items: center; gap: 10px; text-align: left; }
    #rightPanel .cv-driver-icon { font-size: 1.6em; display: inline; flex-shrink: 0; }
    #rightPanel .cv-driver-name { font-size: 0.88em; margin: 0; font-weight: 700; }
    #rightPanel .cv-driver-sev  { font-size: 0.72em; }
    #rightPanel .cv-driver-dmg  { font-size: 0.82em; margin-top: 0; }
    #rightPanel .cv-connector { flex-direction: row; justify-content: center; padding: 4px 10px; font-size: 1.2em; gap: 8px; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); background: var(--track); }
    #rightPanel #interactionCanvas { height: 110px; }
    #rightPanel .cv-canvas-row { padding: 8px 10px 6px; }
    #rightPanel .cv-canvas-row label { font-size: 0.72em; margin-bottom: 4px; }
    #rightPanel .cv-explain { padding: 10px 14px; font-size: 0.82em; line-height: 1.55; }
    #rightPanel .cv-totals { font-size: 0.78em; }
    #rightPanel .cv-total-cell { padding: 10px 6px; }
    #rightPanel .cv-total-cell .cv-val { font-size: 1.2em; }
    #rightPanel .cv-header { padding: 8px 10px; flex-wrap: nowrap; gap: 6px; }
    #rightPanel .cv-header h3 { font-size: 0.82em; white-space: nowrap; }
    #rightPanel .cv-badge { font-size: 0.68em; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }

    #rpPlaceholder { display: none; }

    /* ══ FLOATING CHAT BUTTON ════════════════════════════════════ */
    #chatToggleBtn {
      position: fixed; bottom: 24px; right: 24px; z-index: 1000;
      display: none; align-items: center; gap: 10px;
      background: var(--teal);
      border: none; border-radius: 30px; padding: 0 20px 0 14px; height: 52px;
      cursor: pointer; box-shadow: none;
      transition: transform 0.2s, filter 0.2s;
      font-family: 'Fredoka One', cursive; color: var(--on-dark); font-size: 1em; letter-spacing: 0.3px;
    }
    body.game-active #chatToggleBtn { display: flex; }
    #chatToggleBtn:hover { transform: translateY(-3px); filter: brightness(0.92); }
    #chatToggleBtn.open { background: var(--on-dark); }
    #chatToggleDot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--emerald);
      box-shadow: none; flex-shrink: 0; animation: dotPulse 2s ease-in-out infinite;
    }
    @keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.7);} }
    #chatToggleBtn.open #chatToggleDot { background: var(--teal); box-shadow: none; animation: none; }

    /* Chat window */
    #chatWindow {
      position: fixed; bottom: 88px; right: 24px;
      width: 360px; max-height: 520px; z-index: 999;
      display: none; flex-direction: column;
      border-radius: 20px; overflow: hidden;
      box-shadow: none; border: 1px solid var(--panel-border);
      background: var(--panel);
    }
    #chatWindow.visible { display: flex; animation: chatSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes chatSlideUp { from{opacity:0;transform:translateY(24px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);} }

    #chatHeader { background: var(--panel); padding: 14px 16px 12px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; border-bottom: 1px solid var(--panel-border); }
    #chatHeaderIcon { width: 36px; height: 36px; background: var(--track); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1em; flex-shrink: 0; }
    #chatHeaderText { flex: 1; }
    #chatHeaderTitle { font-family: 'Fredoka One',cursive; color: var(--on-dark); font-size: 1em; line-height: 1.1; }
    #chatHeaderSub { font-size: 0.65em; color: var(--on-dark-mut); font-family: 'Nunito',sans-serif; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
    #chatStatusDot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); display: inline-block; }
    #chatCloseBtn { background: var(--track); border: none; border-radius: 50%; width: 28px; height: 28px; color: var(--on-dark); font-size: 0.9em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; }
    #chatCloseBtn:hover { background: var(--panel-border); color: var(--on-dark); }

    #chatMessages { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; max-height: 280px; scroll-behavior: smooth; }
    #chatMessages::-webkit-scrollbar { width: 4px; }
    #chatMessages::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 4px; }

    .chat-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 0.8em; font-family: 'Nunito',sans-serif; line-height: 1.6; animation: msgPop 0.2s ease; }
    @keyframes msgPop { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
    .chat-msg.user { align-self: flex-end; background: var(--teal); color: var(--on-dark); border-bottom-right-radius: 4px; }
    .chat-msg.bot { align-self: flex-start; background: var(--track); color: var(--on-dark); border-bottom-left-radius: 4px; border: 1px solid var(--panel-border); }
    .chat-msg.bot.typing { display: flex; gap: 5px; align-items: center; padding: 12px 16px; }
    .chat-msg.bot.typing .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-mut); animation: tdotBounce 1.1s ease-in-out infinite; }
    .chat-msg.bot.typing .tdot:nth-child(2) { animation-delay: 0.18s; }
    .chat-msg.bot.typing .tdot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes tdotBounce { 0%,80%,100%{transform:translateY(0);opacity:0.45;} 40%{transform:translateY(-5px);opacity:1;} }

    #chatChips { padding: 8px 12px 6px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; border-top: 1px solid var(--panel-border); }
    .chat-chip { font-size: 0.69em; font-family: 'Nunito',sans-serif; font-weight: 800; background: var(--track); border: 1px solid var(--panel-border); color: var(--on-dark-mut); border-radius: 20px; padding: 5px 11px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .chat-chip:hover { background: var(--panel-border); border-color: var(--teal); color: var(--on-dark); transform: translateY(-1px); }

    #chatInputRow { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--panel-border); flex-shrink: 0; }
    #chatInput { flex: 1; background: var(--track); border: 1px solid var(--panel-border); border-radius: 22px; padding: 9px 14px; color: var(--on-dark); font-family: 'Nunito',sans-serif; font-size: 0.82em; outline: none; transition: border-color 0.2s, background 0.2s; -webkit-appearance:none; appearance:none; }
    #chatInput::placeholder { color: var(--on-dark-mut); }
    #chatInput:focus { border-color: var(--teal); background: var(--panel); }
    #chatSendBtn { width: 36px; height: 36px; flex-shrink: 0; background: var(--teal); border: none; border-radius: 50%; color: var(--on-dark); font-size: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, opacity 0.15s; box-shadow: none; }
    #chatSendBtn:hover { transform: scale(1.1); }
    #chatSendBtn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

    @media (max-width: 480px) {
      #chatWindow { right: 8px; left: 8px; width: auto; bottom: 76px; }
      #chatToggleBtn { right: 12px; bottom: 16px; }
    }

    /* ── Classroom Mode: live vote status rows ── */
    .classroom-vote-row { background: var(--panel); border-radius: 8px; padding: 8px 12px; font-family: 'Nunito',sans-serif; font-size: 0.9em; color: var(--on-dark); border: 1px solid var(--panel-border); }

    /* ══════════════════════════════════════════════════════════
       FLOODING RESULTS POPUP — animated SVG/CSS visuals (frp- prefix).
       Ported from flooding-results-popup.html (repo root) — the standalone
       sample-data design reference — into the live popup; rendered by
       js/floodingResultsViz.js. Animated properties default to their
       "zero" state here and are flipped to their real target one frame
       later by that file's render functions, so the transition below has
       something to animate from. Under prefers-reduced-motion (bottom of
       this block) that flip lands instantly instead.
       ══════════════════════════════════════════════════════════ */
    .frp-haz { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
    .frp-pill { background:var(--track); border-radius:10px; padding:6px 10px; font-size:0.82em; font-weight:700; color:var(--on-dark); }
    .frp-pill small { color:var(--on-dark-mut); font-weight:700; }

    .frp-wf { display:grid; gap:7px; margin:8px 0 4px; }
    .frp-wf .frp-row { display:grid; grid-template-columns:88px 1fr 56px; align-items:center; gap:8px; font-size:0.82em; font-weight:800; color:var(--on-dark); }
    .frp-wf .frp-track { height:20px; background:var(--track); border-radius:6px; overflow:hidden; }
    .frp-wf .frp-fill { height:100%; transform-origin:left; transform:scaleX(0); transition:transform 0.7s cubic-bezier(.22,1,.36,1); border-radius:6px; }
    .frp-wf .frp-fill.threat { background:var(--garnet); }
    .frp-wf .frp-fill.prot { background:var(--emerald); }
    .frp-wf .frp-fill.dmg { background:var(--garnet); }
    .frp-wf .frp-num { text-align:right; }
    .frp-wf-cap { font-size:0.75em; color:var(--on-dark-mut); margin:2px 0 14px; }

    .frp-picto { display:flex; flex-direction:column; gap:8px; margin:8px 0 14px; }
    .frp-picto .frp-grp { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .frp-picto .frp-icons { display:flex; flex-wrap:wrap; gap:2px; font-size:1em; line-height:1; min-height:1em; }
    .frp-picto .frp-icons span { opacity:0; animation:frpIconPop 0.3s ease forwards; display:inline-block; }
    @keyframes frpIconPop { from{opacity:0;transform:scale(.4);} to{opacity:1;transform:scale(1);} }
    .frp-picto .frp-cnt { font-family:'Fredoka One',cursive; font-size:0.95em; min-width:90px; color:var(--on-dark); }
    .frp-zero-damage { color:var(--emerald); font-weight:bold; text-align:center; padding:8px; }

    .frp-chart { width:100%; height:auto; display:block; }
    .frp-draw { stroke-dasharray:var(--frp-len); stroke-dashoffset:var(--frp-len); transition:stroke-dashoffset 1s ease; }
    .frp-draw.frp-in { stroke-dashoffset:0; }
    .frp-cap { font-size:0.8em; color:var(--on-dark-mut); line-height:1.45; margin:8px 2px 0; }
    .frp-cap b { color:var(--on-dark); }
    .frp-budget-line { font-size:0.9em; font-weight:800; margin:6px 0 14px; color:var(--on-dark); }
    .frp-budget-line .frp-down { color:var(--garnet); }

    @media (prefers-reduced-motion: reduce) {
      .frp-wf .frp-fill, .frp-draw, .frp-picto .frp-icons span {
        transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;
      }
      .frp-draw { stroke-dashoffset:0 !important; }
    }
    /* ══ END RIGHT PANEL + CHAT ══════════════════════════════════ */

    /* ══ JOIN SCREEN — LUXE PALETTE ═════════════════════════════════
       Everything below is scoped to #playerSetup only (an ID selector,
       so it wins over the shared .player-setup/.button/.edu-select
       rules above without editing them). .player-setup is also used by
       #consentScreen/#consentDeclinedScreen in this file and reused
       wholesale in vote.html for every student-device screen, and
       .button/.edu-select are shared with vote.html too — none of that
       is touched here, so this section can't restyle the student vote
       flow or (via the shared .player-setup/.game-container size rule)
       the in-game round screens. See the accompanying report for the
       one non-scopable case (page background) and how it was handled
       in index.html instead of here. */
    #playerSetup { background:var(--panel) !important; border:1px solid var(--panel-border) !important; box-shadow:none !important; }
    #playerSetup h2 { color:var(--white); text-shadow:none; }
    #playerSetup input { border:1px solid var(--chip-border) !important; border-radius:10px !important; background:var(--track); color:var(--on-dark); }
    #playerSetup input::placeholder { color:var(--on-dark-soft); }
    #playerSetup input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal) !important; box-shadow:none; }
    #playerSetup .edu-select { border:1px solid var(--chip-border) !important; border-radius:10px !important; background:var(--track); color:var(--on-dark); }
    #playerSetup .edu-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal) !important; box-shadow:none; }
    #playerSetup .mascot-speech { border-color:var(--panel-border); color:var(--on-dark); }
    #playerSetup .mascot-speech::before { border-bottom-color:var(--panel-border); }
    #playerSetup .raindrop { background:linear-gradient(180deg,transparent,var(--on-dark-mut)); }

    /* Structural fix 2 — button hierarchy: Launch Mission is the one
       primary action; Enable Classroom Mode is secondary. Burgundy
       (--accent) appears on these two buttons only. */
    #playerFormSubmitBtn { background:var(--teal-grad) !important; color:var(--on-teal) !important; border:none !important; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    #playerFormSubmitBtn:hover { filter:none; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    #playerFormSubmitBtn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--teal-shadow) !important; }
    #classroomModeToggleBtn { background:transparent !important; color:var(--teal-tint) !important; border:1px solid var(--chip-border) !important; box-shadow:none !important; }
    #classroomModeToggleBtn:hover { background:var(--panel-border) !important; box-shadow:none !important; }
    #classroomModeToggleBtn:active { box-shadow:none !important; }

    /* ══ CONSENT SCREEN ══════════════════════════════════════════════
       Consent is now IN scope for the board palette (amendment: bring
       consent into the dark system). It no longer has its own frozen
       class — #consentScreen/#consentDeclinedScreen just use the plain
       shared .player-setup/.button/.button.secondary rules, same as the
       join screen. Survey and comprehension screens remain frozen below;
       this amendment does not touch them. */
    /* Same freeze for the pre/post-survey screens' Continue button — they're
       otherwise fully self-contained literal-hex markup already (dark navy
       glass cards), but the Continue button rides the shared .button class
       which the Ocean reskin repoints to --brand; pin it back to the
       pre-reskin burgundy so these excluded screens don't change. */
    #surveyScreen .button, #preSurveyScreen .button, #postLikertScreen .button { background:#72383D !important; color:#FFFFFF !important; border-radius:10px !important; box-shadow:none !important; }
    #surveyScreen .button:hover, #preSurveyScreen .button:hover, #postLikertScreen .button:hover { filter:brightness(0.92) !important; box-shadow:none !important; }
    #surveyScreen .button:active, #preSurveyScreen .button:active, #postLikertScreen .button:active { transform:none !important; box-shadow:none !important; }

    /* ══ CLASSROOM LOBBY — LUXE PALETTE ═════════════════════════════
       Scoped to .classroom-lobby-luxe, a class added only to the
       classroomJoinModal's .modal-content — NOT to the shared
       .modal-content class, which every other modal (instructions,
       adapt, compound, results, maintenance, sea-level-rise, game-over,
       etc.) also uses. The joined-players rows reuse .classroom-vote-row,
       which app.js also renders for in-round voting-status lists
       elsewhere, so those are scoped here via the #classroomLobbyList
       ancestor instead of editing that shared class. #classroomStartGameBtn's
       :disabled state is the existing join-count hook set by
       renderClassroomLobby() in app.js (disabled = roster.length < 1) —
       used as-is, not touched. */
    .modal-content.classroom-lobby-luxe { background:var(--panel) !important; border:1px solid var(--panel-border) !important; box-shadow:none !important; }
    .modal-content.classroom-lobby-luxe h2 { color:var(--on-dark) !important; text-shadow:none; }
    #classroomLobbyList .classroom-vote-row { background:var(--panel); border-color:var(--panel-border); color:var(--on-dark); }
    #classroomStartGameBtn { background:transparent !important; color:var(--on-dark) !important; border:1px solid var(--chip-border) !important; box-shadow:none !important; }
    #classroomStartGameBtn:not(:disabled) { background:var(--teal-grad) !important; color:var(--on-teal) !important; border:none !important; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    #classroomStartGameBtn:hover:not(:disabled) { filter:none; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    #classroomStartGameBtn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 var(--teal-shadow) !important; }
    #classroomStartGameBtn:hover:disabled { box-shadow:none !important; }
    #classroomStartGameBtn:disabled { cursor:not-allowed; }

    /* ══ VOTE.HTML — EXCLUDED SCREENS (frozen, literal hex) ══════════
       .vote-legacy is now only on microcopyScreen — the comprehension-
       check screen the board palette must NOT touch. (Consent used to
       share this class too; the amendment moved consent into scope. The
       pre/post-survey Likert screens (preSurveyScreen/surveyScreen) were
       later also moved into scope, to match index.html's pass-the-device
       survey styling — see vote.html's own <style> block for their
       .likert-* rules.) Pinned to literal LUXE hex (not var()) so
       microcopyScreen stays exactly as it was regardless of what :root
       now says. */
    .vote-legacy { background:#FFFFFF !important; border:1px solid #D1C7BD !important; box-shadow:none !important; }
    .vote-legacy h2 { color:#322D29; text-shadow:none; }
    .vote-legacy input { border:1px solid #D1C7BD !important; border-radius:10px !important; background:#FFFFFF; color:#322D29; -webkit-appearance:none; appearance:none; }
    .vote-legacy input::placeholder { color:#6E6257; }
    .vote-legacy input:focus { border-color:#D1C7BD !important; box-shadow:none; }
    .vote-legacy .edu-select { border:1px solid #D1C7BD !important; border-radius:10px !important; background:#FFFFFF; color:#322D29; }
    .vote-legacy .edu-select:focus { border-color:#D1C7BD !important; box-shadow:none; }
    .vote-legacy .button { background:#72383D !important; color:#FFFFFF !important; border:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none; border-radius:10px !important; }
    .vote-legacy .button:hover { filter:brightness(0.92); box-shadow:none !important; }
    .vote-legacy .button:active { transform:none !important; box-shadow:none !important; }

    /* ══ VOTE.HTML — RESKINNED SCREENS (Ocean palette) ═══════════════
       .vote-luxe is now only on joinScreen/waitScreen (the class name is
       legacy from the LUXE pass; kept to avoid an unrelated markup churn,
       repointed to Ocean tokens here). voteScreen is handled separately
       below since its whole card goes transparent-on-canvas rather than
       staying a light card. */
    .vote-luxe { background:var(--panel) !important; border:1px solid var(--panel-border) !important; box-shadow:none !important; }
    .vote-luxe h2 { color:var(--on-dark); text-shadow:none; }
    .vote-luxe input { border:1px solid var(--chip-border) !important; border-radius:10px !important; background:var(--track); color:var(--on-dark); -webkit-appearance:none; appearance:none; }
    .vote-luxe input::placeholder { color:var(--on-dark-soft); }
    .vote-luxe input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal) !important; box-shadow:none; }
    .vote-luxe .edu-select { border:1px solid var(--chip-border) !important; border-radius:10px !important; background:var(--track); color:var(--on-dark); }
    .vote-luxe .edu-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color:var(--teal) !important; box-shadow:none; }
    .vote-luxe .button { background:var(--teal-grad) !important; color:var(--on-teal) !important; border:none !important; border-radius:999px !important; box-shadow:0 3px 0 var(--teal-shadow) !important; -webkit-appearance:none; appearance:none; }
    .vote-luxe .button:hover { filter:none; box-shadow:0 3px 0 var(--teal-shadow) !important; }
    .vote-luxe .button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--teal-shadow) !important; }

    /* Vote screen — goes transparent so its protection cards sit directly
       on the navy --canvas, per the Ocean spec's "choice cards sit
       directly on the navy" rule. Scoped to #voteScreen so index.html's
       live game-round .protection-card/.card-fact stay covered by the
       shared rule below, not duplicated here. */
    #voteScreen.vote-luxe { text-align:left; background:transparent !important; border:none !important; box-shadow:none !important; }
    #voteScreen .vote-round-label { color:var(--on-dark); }