:root {
        --xenzia-bg: #d4c4a8;
        --xenzia-cell: #ebe3d0;
        --xenzia-slot: #c8b898;
        --xenzia-brick-dark: #3d2818;
        --xenzia-brick-light: #8a6848;
        --xenzia-brick-shadow: #2a1a10;
        --xenzia-text: #101010;
        --xenzia-muted: #4a3828;
        --xenzia-food: #2a5fe0;
        --xenzia-food-dark: #143a9e;
        --xenzia-food-light: #6ea0ff;
        --xenzia-outer: #1a1410;
        --classic-inset: inset 2px 2px 0 var(--xenzia-brick-light),
          inset -2px -2px 0 var(--xenzia-brick-shadow);
        --classic-inset-sm: inset 1px 1px 0 var(--xenzia-brick-light);
        --classic-frame: 3px solid var(--xenzia-brick-dark);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        margin: 0;
        color: var(--xenzia-text);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;
        background: var(--xenzia-outer);
        overflow: hidden;
      }

      .wrap {
        height: 100%;
        display: grid;
        place-items: center;
        padding: 22px;
      }

      .card {
        width: min(var(--card-max-width, 980px), var(--card-max-vw, 96vw));
        display: grid;
        grid-template-columns: var(--game-col-fr, 1.2fr) var(--side-col-fr, 0.8fr);
        gap: 14px;
        padding: 14px;
        border: var(--classic-frame);
        background: var(--xenzia-bg);
        border-radius: 0;
        box-shadow: var(--classic-inset), 10px 10px 0 rgba(0, 0, 0, 0.28);
      }

      @media (max-width: 860px) {
        .card {
          grid-template-columns: 1fr;
        }
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        padding: 6px 8px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
        box-shadow: var(--classic-inset-sm);
      }

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

      .brandActions button,
      .brandActions a {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 9px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .brandActions button.settingsGear,
      .brandActions a.settingsGear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        padding: 0;
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1;
        text-align: center;
      }

      .brandActions button.settingsGear.active,
      .brandActions a.settingsGear.active {
        background: var(--xenzia-brick-dark);
        color: var(--xenzia-cell);
      }

      .accountChip {
        font-size: 9px;
        color: var(--xenzia-muted);
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .modalOverlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: grid;
        place-items: center;
        padding: 16px;
        background: rgba(0, 0, 0, 0.55);
      }

      .modalOverlay.hidden {
        display: none;
      }

      .modalCard {
        position: relative;
        width: min(420px, 100%);
        max-height: min(88vh, 640px);
        overflow: auto;
        padding: 14px;
        border: var(--classic-frame);
        background: var(--xenzia-bg);
        box-shadow: var(--classic-inset), 8px 8px 0 rgba(0, 0, 0, 0.28);
        color: var(--xenzia-text);
      }

      .modalClose {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        width: 28px;
        height: 28px;
        min-width: 0;
        padding: 0;
        display: grid;
        place-items: center;
        font-size: 16px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-slot);
        color: var(--xenzia-text);
        box-shadow: var(--classic-inset-sm);
        cursor: pointer;
      }

      .modalClose:hover {
        background: var(--xenzia-cell);
      }

      .modalCard h2 {
        margin: 0 28px 10px 0;
        font-size: 14px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .modalCard.leaderboardModal {
        width: min(560px, 100%);
      }

      .celebrateCard {
        width: min(440px, 100%);
        text-align: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        animation: celebrateIn 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both;
      }

      .celebrateCard.finale {
        border-color: var(--xenzia-food);
      }

      .celebrateFireworks {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
      }

      .fwBurst {
        position: absolute;
        width: 2px;
        height: 2px;
        transform: translate(-50%, -50%);
      }

      .fwSpark {
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 7px;
        border-radius: 0;
        opacity: 1;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55);
        animation: fwPop 0.95s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
      }

      .fwSpark.fwSparkSm {
        width: 4px;
        height: 4px;
        animation-duration: 0.75s;
      }

      @keyframes fwPop {
        0% {
          transform: rotate(var(--a)) translateY(0) scale(1);
          opacity: 1;
        }
        70% {
          opacity: 1;
        }
        100% {
          transform: rotate(var(--a)) translateY(var(--dist, -78px)) scale(0.55);
          opacity: 0;
        }
      }

      .campaignRulesCard {
        width: min(440px, 100%);
      }

      .campaignRulesCard .rulesList {
        margin: 0 0 14px;
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--xenzia-text);
      }

      .campaignRulesCard .rulesList li {
        margin-bottom: 8px;
      }

      .campaignRulesCard .rulesList li:last-child {
        margin-bottom: 0;
      }

      .campaignRulesHint {
        margin: 0 0 14px;
        font-size: 12px;
        opacity: 0.85;
        line-height: 1.4;
      }

      @keyframes celebrateIn {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .celebrateBurst {
        width: 64px;
        height: 64px;
        margin: 4px auto 12px;
        border: 3px solid var(--xenzia-brick-dark);
        background: linear-gradient(180deg, #2a5a98 0%, #1a3870 100%);
        box-shadow: var(--classic-inset-sm);
        display: grid;
        place-items: center;
        animation: celebratePulse 1.1s ease-in-out infinite;
      }

      .celebrateCard.finale .celebrateBurst {
        background: linear-gradient(180deg, #7a5800 0%, #4a3400 100%);
        border-color: #e0b020;
        box-shadow: inset 1px 1px 0 #fff0a0, 2px 2px 0 rgba(0, 0, 0, 0.25);
      }

      .celebrateCrown {
        display: block;
        filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
      }

      .celebrateCard.finale .celebrateCrown {
        animation: celebrateCrownBob 1.2s ease-in-out infinite;
      }

      @keyframes celebrateCrownBob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-2px);
        }
      }

      @keyframes celebratePulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.06);
        }
      }

      .celebrateEyebrow {
        margin: 0 0 6px;
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
        animation: celebrateFade 0.55s ease 0.1s both;
      }

      .celebrateCard h2 {
        margin: 0 0 10px;
        font-size: 18px;
        letter-spacing: 0.06em;
        animation: celebrateFade 0.55s ease 0.18s both;
      }

      .celebrateBody {
        margin: 0 0 4px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--xenzia-text);
        animation: celebrateFade 0.55s ease 0.26s both;
      }

      @keyframes celebrateFade {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .celebrateCard .modalActions {
        justify-content: center;
        margin-top: 14px;
      }

      .modalRow {
        display: grid;
        gap: 4px;
        margin-bottom: 10px;
      }

      .modalRow label {
        font-size: 10px;
        color: var(--xenzia-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .modalRow input,
      .modalRow select {
        width: 100%;
        min-height: 34px;
        padding: 6px 8px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
        color: var(--xenzia-text);
        font: inherit;
        font-size: 12px;
      }

      .modalActions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }

      .modalActions button {
        flex: 1;
        min-width: 100px;
      }

      .modalError {
        min-height: 16px;
        margin: 0 0 8px;
        font-size: 11px;
        color: #6a2020;
      }

      .modalHint {
        margin: 8px 0 0;
        font-size: 10px;
        color: var(--xenzia-muted);
      }

      .lbTabs {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
      }

      .lbTabs button.active {
        background: var(--xenzia-brick-dark);
        color: var(--xenzia-cell);
      }

      .lbList {
        display: grid;
        gap: 4px;
        margin-top: 10px;
        font-size: 11px;
      }

      .lbRow {
        display: grid;
        grid-template-columns: 28px 1fr auto auto;
        gap: 8px;
        align-items: center;
        padding: 6px 8px;
        border: 1px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
      }

      .lbRow .lbRank {
        font-weight: 800;
      }

      .lbRow .lbName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lbRow.lbYou {
        border-color: var(--xenzia-food-dark);
        background: var(--xenzia-slot);
        box-shadow: inset 1px 1px 0 var(--xenzia-food-light);
      }

      .lbYouBlock {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 2px solid var(--xenzia-brick-dark);
      }

      .lbYouLabel {
        margin: 0 0 6px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
      }

      .lbYouHint {
        margin: 6px 0 0;
        font-size: 10px;
        color: var(--xenzia-muted);
        line-height: 1.35;
      }

      .lbEmpty {
        padding: 12px 8px;
        color: var(--xenzia-muted);
        font-size: 11px;
      }

      .profileSectionTitle {
        margin: 12px 0 6px;
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
      }

      .profileSectionTitle:first-of-type {
        margin-top: 0;
      }

      .achGrid {
        display: grid;
        gap: 6px;
      }

      .achItem {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 8px;
        align-items: start;
        padding: 8px;
        border: 1px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
        font-size: 11px;
      }

      .achItem.locked {
        opacity: 0.45;
      }

      .achItem .achIcon {
        font-weight: 800;
        text-align: center;
      }

      .achItem .achName {
        font-weight: 800;
      }

      .achItem .achDesc {
        margin-top: 2px;
        color: var(--xenzia-muted);
        font-size: 10px;
      }

      .achToastStack {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        padding: 18px;
        pointer-events: none;
        overflow: visible;
      }

      .achToast {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 12px;
        align-items: center;
        width: min(340px, calc(100vw - 36px));
        padding: 14px 16px;
        border: 1px solid #66c0f4;
        background: #1b2838;
        color: #c7d5e0;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
        transform: translateX(110%);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.35s ease;
      }

      .achToast.show {
        transform: translateX(0);
        opacity: 1;
      }

      .achToast.hide {
        transform: translateX(110%);
        opacity: 0;
      }

      .achToastIcon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border: 2px solid #66c0f4;
        background: #2a475e;
        color: #66c0f4;
        font-weight: 800;
        font-size: 15px;
      }

      .achToastEyebrow {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #66c0f4;
      }

      .achToastName {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 800;
        color: #ffffff;
      }

      .achToastDesc {
        margin-top: 3px;
        font-size: 11px;
        color: #8f98a0;
      }

      .cacheHint {
        margin: 6px 0 0;
        font-size: 9px;
        color: var(--xenzia-muted);
      }

      .brand h1 {
        font-size: 16px;
        letter-spacing: 0.14em;
        margin: 0;
        font-weight: 800;
        text-transform: uppercase;
      }

      .boardShell {
        padding: 10px;
        border: var(--classic-frame);
        background: var(--xenzia-slot);
        border-radius: 0;
        box-shadow: var(--classic-inset);
      }

      canvas {
        width: 100%;
        aspect-ratio: 28 / 20;
        height: auto;
        display: block;
        border-radius: 0;
        background: var(--xenzia-bg);
        border: 2px solid var(--xenzia-brick-dark);
      }

      canvas.editorMode {
        cursor: crosshair;
      }

      #editorPanel .settingRow {
        margin-top: 6px;
      }

      #editorPanel input[type="text"],
      #editorPanel select {
        max-width: 100%;
      }

      .side {
        display: grid;
        gap: 10px;
        align-content: start;
      }

      .panel {
        padding: 10px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
        border-radius: 0;
        box-shadow: var(--classic-inset-sm);
      }

      .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .stat {
        padding: 8px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-slot);
        border-radius: 0;
        box-shadow: var(--classic-inset-sm);
      }

      .stat .k {
        font-size: 9px;
        color: var(--xenzia-muted);
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .stat .v {
        margin-top: 4px;
        font-size: 17px;
        font-weight: 800;
        color: var(--xenzia-text);
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      button {
        appearance: none;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-slot);
        color: var(--xenzia-text);
        border-radius: 0;
        padding: 9px 12px;
        font-family: inherit;
        font-weight: 800;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: var(--classic-inset-sm);
        transition: background 0.1s ease, box-shadow 0.1s ease;
      }

      button:hover {
        background: var(--xenzia-cell);
      }

      button:active {
        box-shadow: inset -1px -1px 0 var(--xenzia-brick-light);
        transform: translateY(1px);
      }

      button.primary {
        background: var(--xenzia-brick-dark);
        color: var(--xenzia-cell);
      }

      button.primary:hover {
        background: #4d3420;
      }

      button.danger {
        background: #8a3030;
        color: var(--xenzia-cell);
        border-color: #3d1818;
      }

      button.danger:hover {
        background: #a03838;
      }

      .toast {
        margin-top: 8px;
        padding: 8px 10px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-bg);
        font-size: 11px;
        color: var(--xenzia-muted);
        min-height: 36px;
        display: grid;
        align-content: center;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .settingsTitle {
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 8px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
      }

      .settingRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-slot);
        border-radius: 0;
        box-shadow: var(--classic-inset-sm);
      }

      .settingRow + .settingRow {
        margin-top: 8px;
      }

      .settingRow label,
      .settingRow > span {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--xenzia-text);
        cursor: pointer;
      }

      .settingRow input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--xenzia-food);
        cursor: pointer;
      }

      .speedModeBtns {
        display: flex;
        gap: 4px;
      }

      .speedModeBtns button {
        padding: 5px 8px;
        font-size: 9px;
        min-width: 58px;
      }

      .speedModeBtns button.active {
        background: var(--xenzia-food);
        color: var(--xenzia-cell);
        border-color: #143a9e;
        box-shadow: inset 1px 1px 0 #4a7ae8;
      }

      .speedModeBtns button.locked,
      .speedModeBtns button:disabled {
        opacity: 0.42;
        cursor: not-allowed;
        filter: grayscale(0.35);
      }

      .hidden {
        display: none;
      }

      .campaignTray {
        margin-top: 8px;
        padding: 8px 10px 10px;
        background: var(--xenzia-bg);
        border: var(--classic-frame);
        box-shadow: var(--classic-inset);
      }

      .campaignTray.hidden {
        display: none;
      }

      .sundayUnlimitedBanner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 10px;
        padding: 10px 12px;
        border: 2px solid var(--xenzia-food-dark);
        background: var(--xenzia-slot);
        box-shadow: var(--classic-inset-sm);
        color: var(--xenzia-text);
      }

      .sundayUnlimitedBanner.hidden {
        display: none;
      }

      .sundayUnlimitedBanner.isActive {
        background: var(--xenzia-food);
        border-color: var(--xenzia-food-dark);
        color: var(--xenzia-cell);
      }

      .sundayUnlimitedBanner.isReady {
        border-color: var(--xenzia-food-dark);
        background: var(--xenzia-cell);
        box-shadow: inset 1px 1px 0 var(--xenzia-food-light), var(--classic-inset-sm);
      }

      .sundayUnlimitedBanner.isLocked {
        border-style: dashed;
        opacity: 0.95;
      }

      .sundayUnlimitedCopy {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }

      .sundayUnlimitedCopy strong {
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .sundayUnlimitedCopy span {
        font-size: 11px;
        line-height: 1.35;
        opacity: 0.92;
      }

      .sundayUnlimitedClock {
        flex: 0 0 auto;
        text-align: right;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }

      .sundayUnlimitedClockLabel {
        display: block;
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.8;
        margin-bottom: 2px;
      }

      #sundayUnlimitedTimer {
        font-size: 16px;
        letter-spacing: 0.04em;
      }

      .campaignHearts.unlimited .campaignHeart.unlimitedGlow .heartBody {
        fill: var(--xenzia-food);
      }

      @media (max-width: 640px) {
        .sundayUnlimitedBanner {
          flex-direction: column;
          align-items: stretch;
        }

        .sundayUnlimitedClock {
          text-align: left;
        }
      }

      .campaignStageGoal {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
      }

      .campaignStageGoalTitle {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: var(--xenzia-text);
        text-transform: uppercase;
        white-space: nowrap;
        flex: 0 0 auto;
      }

      .campaignStageGoalCount {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        color: var(--xenzia-text);
        text-transform: uppercase;
        white-space: nowrap;
        flex: 0 0 auto;
        min-width: 2.5em;
        text-align: right;
      }

      .campaignLives {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 10px;
        padding: 6px 8px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-cell);
        box-shadow: var(--classic-inset-sm);
        min-height: 28px;
      }

      .campaignLivesMeta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
      }

      .campaignLivesMetaMain {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .campaignLivesLabel {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
        white-space: nowrap;
      }

      .campaignHearts {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
      }

      .campaignHeart {
        width: 18px;
        height: 16px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        transition: transform 0.15s ease;
      }

      .campaignHeart svg {
        width: 18px;
        height: 16px;
        display: block;
        overflow: visible;
      }

      .campaignHeart .heartBody {
        fill: var(--xenzia-food);
        stroke: var(--xenzia-food-dark);
        stroke-width: 1.25;
        paint-order: stroke fill;
      }

      .campaignHeart .heartShine {
        fill: var(--xenzia-food-light);
        opacity: 0.9;
      }

      .campaignHeart.empty .heartBody {
        fill: var(--xenzia-slot);
        stroke: var(--xenzia-brick-dark);
        opacity: 0.7;
      }

      .campaignHeart.empty .heartShine {
        display: none;
      }

      .campaignHeart.active {
        transform: translateY(-1px);
      }

      .campaignHeart.active .heartBody {
        fill: var(--xenzia-food);
        stroke: var(--xenzia-food-dark);
      }

      .campaignHeart.spent {
        animation: campaignHeartLose 0.4s ease-out both;
      }

      @keyframes campaignHeartLose {
        0% {
          transform: scale(1) rotate(0deg);
          opacity: 1;
        }
        40% {
          transform: scale(1.18) rotate(-8deg);
          opacity: 1;
        }
        100% {
          transform: scale(0.92) rotate(0deg);
          opacity: 0.55;
        }
      }

      .campaignLivesCooldown {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
        white-space: nowrap;
      }

      .campaignLivesCooldown.hidden {
        display: none;
      }

      .heartPickupTimer {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0 0 6px;
        border: 0;
        border-bottom: 1px solid var(--xenzia-brick-dark);
        background: transparent;
        box-shadow: none;
      }

      .heartPickupTimer.hidden {
        display: none;
      }

      .heartPickupTimerLabel {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--xenzia-muted);
        white-space: nowrap;
      }

      .heartPickupTimerTrack {
        flex: 1 1 auto;
        height: 10px;
        border: 2px solid var(--xenzia-brick-dark);
        background: var(--xenzia-slot);
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.18);
        overflow: hidden;
      }

      .heartPickupTimerFill {
        height: 100%;
        width: 100%;
        background: var(--xenzia-food);
        box-shadow: inset 1px 1px 0 var(--xenzia-food-light);
        transform-origin: left center;
      }

      .campaignProgressBar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
        min-height: 22px;
        flex: 1 1 auto;
        min-width: 0;
      }

      .campaignDot {
        width: 20px;
        height: 20px;
        position: relative;
        flex: 0 0 20px;
        background: var(--xenzia-slot);
        border: 2px solid var(--xenzia-brick-dark);
        box-shadow: var(--classic-inset-sm);
        box-sizing: border-box;
      }

      .campaignDot.filled::before,
      .campaignDot.filled::after {
        content: "";
        position: absolute;
        background: var(--xenzia-food);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }

      .campaignDot.filled::before {
        width: 10px;
        height: 10px;
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
      }

      .campaignDot.filled::after {
        width: 0;
        height: 0;
      }

      .campaignDot.next {
        background: var(--xenzia-cell);
        box-shadow: inset 0 0 0 1px var(--xenzia-brick-dark);
      }

      .campaignDot.portal {
        background: #1a2878;
        box-shadow: inset 0 0 0 1px #3a58d8;
        animation: portalBeat 0.6s ease-in-out infinite;
      }

      .campaignDot.portal::before {
        width: 8px;
        height: 8px;
        background: #88b0ff;
        border-radius: 0;
        box-shadow: none;
        animation: portalSpin 0.48s steps(4) infinite;
      }

      .card.campaign2Shell .campaignDot.portal {
        background: #4a0808;
        box-shadow: inset 0 0 0 1px #d82828;
      }

      .card.campaign2Shell .campaignDot.portal::before {
        background: #ff8888;
      }

      .campaignDot.key {
        background: #7a5800;
        box-shadow: inset 0 0 0 1px #e0b020;
        animation: portalBeat 0.7s ease-in-out infinite;
      }

      .campaignDot.key::before {
        width: 4px;
        height: 7px;
        background: #fff0a0;
        border-radius: 0;
        box-shadow: 2px 0 0 #e0b020, 0 3px 0 #e0b020;
      }

      .campaignDot.crown {
        background: #7a5800;
        box-shadow: inset 0 0 0 1px #e0b020;
        animation: portalBeat 0.7s ease-in-out infinite;
      }

      .campaignDot.crown::before {
        width: 9px;
        height: 6px;
        top: 3px;
        background: #fff0a0;
        border-radius: 0;
        clip-path: polygon(
          8% 100%,
          8% 55%,
          0% 55%,
          18% 10%,
          28% 55%,
          50% 0%,
          72% 55%,
          82% 10%,
          100% 55%,
          92% 55%,
          92% 100%
        );
        box-shadow: none;
      }

      .card.campaign2Shell .campaignDot.key {
        background: #6a5000;
        box-shadow: inset 0 0 0 1px #f0c830;
      }

      .card.campaign2Shell .campaignDot.key::before {
        background: #fff8c8;
        box-shadow: 2px 0 0 #f0c830, 0 3px 0 #f0c830;
      }

      @keyframes portalBeat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
      }

      @keyframes portalSpin {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
      }

      .touchControls {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 20;
        padding: 10px;
        border: var(--classic-frame);
        background: var(--xenzia-bg);
        border-radius: 0;
        box-shadow: var(--classic-inset), 8px 8px 0 rgba(0, 0, 0, 0.28);
      }

      .touchControls.hidden {
        display: none;
      }

      .dpad {
        display: grid;
        grid-template-columns: repeat(3, 48px);
        grid-template-rows: repeat(3, 48px);
        gap: 5px;
      }

      .dpadBtn {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 0;
        font-size: 18px;
        line-height: 1;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        background: var(--xenzia-slot);
        color: var(--xenzia-text);
      }

      .dpadBtn:active,
      .dpadBtn.lit {
        background: var(--xenzia-food);
        color: var(--xenzia-cell);
        border-color: var(--xenzia-food-dark);
        box-shadow: inset 1px 1px 0 var(--xenzia-food-light);
      }

      .dpadBtn.lit {
        animation: dpadGlow 0.35s ease-out;
      }

      @keyframes dpadGlow {
        0% {
          background: var(--xenzia-cell);
        }
        40% {
          background: var(--xenzia-food);
        }
        100% {
          background: var(--xenzia-slot);
        }
      }

      .dpadBtn[data-dir="up"] { grid-column: 2; grid-row: 1; }
      .dpadBtn[data-dir="left"] { grid-column: 1; grid-row: 2; }
      .dpadBtn[data-dir="right"] { grid-column: 3; grid-row: 2; }
      .dpadBtn[data-dir="down"] { grid-column: 2; grid-row: 3; }

      .card.campaign2Shell,
      .touchControls.campaign2Shell,
      .modalCard.campaign2Shell,
      .pageTheme.campaign2Shell {
        --xenzia-bg: #1a0808;
        --xenzia-cell: #2a1010;
        --xenzia-slot: #3a1414;
        --xenzia-brick-dark: #601818;
        --xenzia-brick-light: #a03030;
        --xenzia-brick-shadow: #280808;
        --xenzia-text: #f5e8e8;
        --xenzia-muted: #c8a0a0;
        --xenzia-food: #e82828;
        --xenzia-food-dark: #9c1010;
        --xenzia-food-light: #ff7070;
      }

      .card.campaign2Shell,
      .modalCard.campaign2Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .touchControls.campaign2Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign2Shell .campaignTray {
        background: #120404;
      }

      .card.campaign2Shell .campaignTrayLabel {
        color: var(--xenzia-text);
      }

      .card.campaign2Shell .campaignDot {
        background: #3a1414;
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign2Shell .campaignDot.next {
        background: #2a1010;
      }

      .card.campaign3Shell,
      .touchControls.campaign3Shell,
      .modalCard.campaign3Shell,
      .pageTheme.campaign3Shell {
        --xenzia-bg: #1a3020;
        --xenzia-cell: #2a4828;
        --xenzia-slot: #345838;
        --xenzia-brick-dark: #2a5830;
        --xenzia-brick-light: #4a8850;
        --xenzia-brick-shadow: #142818;
        --xenzia-text: #e8f8e0;
        --xenzia-muted: #a8c8a0;
        --xenzia-food: #48b858;
        --xenzia-food-dark: #287838;
        --xenzia-food-light: #88e898;
      }

      .card.campaign3Shell,
      .modalCard.campaign3Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .touchControls.campaign3Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign3Shell .campaignTray {
        background: #142818;
      }

      .card.campaign3Shell .campaignTrayLabel {
        color: var(--xenzia-text);
      }

      .card.campaign3Shell .campaignDot {
        background: #345838;
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign3Shell .campaignDot.next {
        background: #2a4828;
      }

      .card.campaign3Shell .campaignDot.portal {
        background: #1a4828;
        box-shadow: inset 0 0 0 1px #38b868;
      }

      .card.campaign3Shell .campaignDot.portal::before {
        background: #88f0a8;
      }

      .card.campaign3Shell .campaignDot.key {
        background: #6a5000;
        box-shadow: inset 0 0 0 1px #f0c830;
      }

      .card.campaign3Shell .campaignDot.key::before {
        background: #fff8c8;
        box-shadow: 2px 0 0 #f0c830, 0 3px 0 #f0c830;
      }

      #campaignSetRow {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      #campaignSetRow .speedModeBtns {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 3px;
      }

      #campaignSetRow .speedModeBtns button {
        flex: 1 1 0;
        min-width: 0;
        font-size: 10px;
        padding: 5px 2px;
        position: relative;
      }

      #campaignSetRow .speedModeBtns button.locked {
        opacity: 0.72;
        cursor: not-allowed;
      }

      #campaignSetRow .speedModeBtns button.locked::before {
        content: "";
        position: absolute;
        right: 3px;
        top: 1px;
        width: 4px;
        height: 3px;
        border: 1.5px solid var(--xenzia-muted);
        border-bottom: none;
        border-radius: 3px 3px 0 0;
        pointer-events: none;
        z-index: 1;
      }

      #campaignSetRow .speedModeBtns button.locked::after {
        content: "";
        position: absolute;
        right: 2px;
        top: 4px;
        width: 6px;
        height: 5px;
        border: 1.5px solid var(--xenzia-muted);
        border-radius: 1px;
        background: var(--xenzia-cell);
        pointer-events: none;
        z-index: 1;
      }

      .card.campaign4Shell,
      .touchControls.campaign4Shell,
      .modalCard.campaign4Shell,
      .pageTheme.campaign4Shell {
        --xenzia-bg: #0a1028;
        --xenzia-cell: #141c38;
        --xenzia-slot: #1a2448;
        --xenzia-brick-dark: #283868;
        --xenzia-brick-light: #4868a8;
        --xenzia-brick-shadow: #080818;
        --xenzia-text: #e8f0ff;
        --xenzia-muted: #98b0d8;
        --xenzia-food: #48c8f8;
        --xenzia-food-dark: #2088c8;
        --xenzia-food-light: #88e8ff;
      }

      .card.campaign4Shell,
      .modalCard.campaign4Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .touchControls.campaign4Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign4Shell .campaignTray {
        background: #080818;
      }

      .card.campaign4Shell .campaignTrayLabel {
        color: var(--xenzia-text);
      }

      .card.campaign4Shell .campaignDot {
        background: #1a2448;
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign4Shell .campaignDot.next {
        background: #141c38;
      }

      .card.campaign4Shell .campaignDot.portal {
        background: #182848;
        box-shadow: inset 0 0 0 1px #4898f8;
      }

      .card.campaign4Shell .campaignDot.portal::before {
        background: #88c8ff;
      }

      .card.campaign4Shell .campaignDot.key {
        background: #6a5000;
        box-shadow: inset 0 0 0 1px #f0c830;
      }

      .card.campaign4Shell .campaignDot.key::before {
        background: #fff8c8;
        box-shadow: 2px 0 0 #f0c830, 0 3px 0 #f0c830;
      }

      .card.campaign5Shell,
      .touchControls.campaign5Shell,
      .modalCard.campaign5Shell,
      .pageTheme.campaign5Shell {
        --xenzia-bg: #7a9828;
        --xenzia-cell: #8aaa30;
        --xenzia-slot: #94b838;
        --xenzia-brick-dark: #0a1808;
        --xenzia-brick-light: #284018;
        --xenzia-brick-shadow: #081008;
        --xenzia-text: #0a1808;
        --xenzia-muted: #3a5820;
        --xenzia-food: #2a6820;
        --xenzia-food-dark: #184818;
        --xenzia-food-light: #78d050;
      }

      .card.campaign5Shell,
      .modalCard.campaign5Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .touchControls.campaign5Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign5Shell .campaignTray {
        background: #688820;
      }

      .card.campaign5Shell .campaignTrayLabel {
        color: var(--xenzia-text);
      }

      .card.campaign5Shell .campaignDot {
        background: #94b838;
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign5Shell .campaignDot.next {
        background: #8aaa30;
      }

      .card.campaign5Shell .campaignDot.portal {
        background: #204010;
        box-shadow: inset 0 0 0 1px #509838;
      }

      .card.campaign5Shell .campaignDot.portal::before {
        background: #90d858;
      }

      .card.campaign5Shell .campaignDot.key {
        background: #6a5000;
        box-shadow: inset 0 0 0 1px #f0c830;
      }

      .card.campaign5Shell .campaignDot.key::before {
        background: #fff8c8;
        box-shadow: 2px 0 0 #f0c830, 0 3px 0 #f0c830;
      }

      .card.campaign6Shell,
      .touchControls.campaign6Shell,
      .modalCard.campaign6Shell,
      .pageTheme.campaign6Shell {
        --xenzia-bg: #90c4dc;
        --xenzia-cell: #c8e8f8;
        --xenzia-slot: #b0d8ec;
        --xenzia-brick-dark: #2a6898;
        --xenzia-brick-light: #e8f8ff;
        --xenzia-brick-shadow: #184868;
        --xenzia-text: #183850;
        --xenzia-muted: #386888;
        --xenzia-food: #9a5800;
        --xenzia-food-dark: #3a2008;
        --xenzia-food-light: #ffe878;
      }

      .card.campaign6Shell,
      .modalCard.campaign6Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .touchControls.campaign6Shell {
        background: var(--xenzia-bg);
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign6Shell .campaignTray {
        background: #a0c8dc;
      }

      .card.campaign6Shell .campaignTrayLabel {
        color: var(--xenzia-text);
      }

      .card.campaign6Shell .campaignDot {
        background: #c8e0f0;
        border-color: var(--xenzia-brick-dark);
      }

      .card.campaign6Shell .campaignDot.next {
        background: #d8ecf8;
      }

      .card.campaign6Shell .campaignDot.portal {
        background: #386898;
        box-shadow: inset 0 0 0 1px #88c0e0;
      }

      .card.campaign6Shell .campaignDot.portal::before {
        background: #e0f4ff;
      }

      .card.campaign6Shell .campaignDot.key {
        background: #886010;
        box-shadow: inset 0 0 0 1px #f0c840;
      }

      .card.campaign6Shell .campaignDot.key::before {
        background: #fff0a8;
        box-shadow: 2px 0 0 #f0c840, 0 3px 0 #f0c840;
      }