:root {
      color-scheme: dark;
      --ink: #050c09;
      --ink-soft: #08130e;
      --panel: #0b1912;
      --panel-2: #10241a;
      --line: rgba(74, 124, 111, .55);
      --line-soft: rgba(74, 124, 111, .24);
      --cream: #f5ecd0;
      --muted: #91a096;
      --gold: #c8a84b;
      --gold-light: #ead27d;
      --cyan: #79d9c0;
      --green: #4a7c6f;
      --rose: #d88991;
      --danger: #cf726a;
      --shadow: 0 28px 80px rgba(0, 0, 0, .58);
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #0d1812;
    }

    body {
      display: grid;
      place-items: center;
      min-height: 100dvh;
      color: var(--cream);
      font-family: Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at 50% 18%, rgba(74, 124, 111, .12), transparent 37%),
        #0d1812;
    }

    button, a { font: inherit; }
    button { touch-action: manipulation; }

    #game-shell {
      position: relative;
      display: grid;
      grid-template-rows: 48px minmax(0, 1fr);
      width: min(620px, 100vw);
      height: min(900px, 100dvh);
      overflow: hidden;
      border: 2px solid var(--green);
      border-radius: 9px;
      background:
        linear-gradient(rgba(3, 12, 8, .88), rgba(3, 12, 8, .95)),
        radial-gradient(circle at 18% 18%, rgba(121, 217, 192, .13), transparent 32%),
        #06100c;
      box-shadow: var(--shadow), inset 0 0 90px rgba(0, 0, 0, .28);
      isolation: isolate;
    }

    #game-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .18;
      background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.025) 4px);
      mix-blend-mode: screen;
    }

    #eidos-background {
      --eidos-bg-opacity: .20;
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    #eidos-background img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      filter: saturate(.78) brightness(.52) contrast(1.06);
      transform: scale(1.035);
      transition: opacity 1.15s ease, transform 4.5s ease;
    }

    #eidos-background img.active {
      opacity: var(--eidos-bg-opacity);
      transform: scale(1);
    }

    #eidos-background::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(3,12,8,.45), rgba(3,12,8,.68) 55%, rgba(3,12,8,.9)),
        radial-gradient(circle at 50% 34%, transparent, rgba(3,12,8,.48) 75%);
    }

    #top-bar {
      position: relative;
      z-index: 30;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 7px;
      min-width: 0;
      padding: 6px 10px 4px;
    }

    #hud {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px 13px;
      min-width: 0;
      font: 12px/1.25 Arial, sans-serif;
      color: #d8ddd8;
    }

    #hud strong { color: #fff; }
    #stage-hud { color: var(--cyan); }
    #sync-hud { color: var(--gold-light); }

    #sound-button,
    #close-btn {
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid var(--green);
      border-radius: 5px;
      color: #9ca49e;
      background: rgba(6, 16, 12, .72);
      cursor: pointer;
      font-family: Georgia, serif;
      letter-spacing: 1px;
    }

    #sound-button { width: 38px; color: var(--cyan); }
    #sound-button.off { color: #676f69; }
    #sound-button:hover, #close-btn:hover { color: var(--cream); border-color: var(--gold); }

    #game-area {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 0;
      gap: 7px;
      padding: 0 14px 10px;
    }

    #title-block {
      flex: 0 0 auto;
      width: min(100%, 570px);
      text-align: center;
    }

    .brand-kicker {
      margin: 0;
      color: var(--gold);
      font: 600 9px/1.1 Arial, sans-serif;
      letter-spacing: 7px;
    }

    #game-title {
      margin: 1px 0 0;
      color: var(--cream);
      font: 500 clamp(28px, 6vw, 39px)/.98 Georgia, "Times New Roman", serif;
      letter-spacing: 3px;
    }

    #game-subtitle {
      margin: 4px 0 0;
      color: var(--cyan);
      font: 600 9px/1.2 Arial, sans-serif;
      letter-spacing: 2px;
    }

    #board-wrap {
      position: relative;
      flex: 0 1 auto;
      width: min(100%, 570px);
      aspect-ratio: 580 / 500;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(200,168,75,.56);
      border-radius: 12px;
      background: rgba(4, 14, 9, .78);
      box-shadow: inset 0 0 55px rgba(0,0,0,.4), 0 12px 36px rgba(0,0,0,.28);
      touch-action: none;
      user-select: none;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    #board-message {
      position: absolute;
      left: 50%;
      bottom: 8px;
      z-index: 4;
      width: calc(100% - 28px);
      min-height: 24px;
      transform: translateX(-50%);
      color: #bac6be;
      font-size: 11px;
      line-height: 1.3;
      text-align: center;
      text-shadow: 0 2px 8px #000;
      pointer-events: none;
    }

    #board-message.warning { color: var(--gold-light); }
    #board-message.danger { color: #f0a49c; }

    #phase-flash {
      position: absolute;
      inset: 0;
      z-index: 8;
      display: grid;
      place-items: center;
      padding: 25px;
      opacity: 0;
      visibility: hidden;
      background: rgba(3, 12, 8, .84);
      transition: opacity .24s ease, visibility 0s linear .24s;
      pointer-events: none;
    }

    #phase-flash.show {
      opacity: 1;
      visibility: visible;
      transition: opacity .24s ease;
    }

    .phase-inner { text-align: center; }
    .phase-kicker { margin: 0 0 10px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: 4px; }
    #phase-name { margin: 0; color: var(--cream); font: 500 clamp(28px, 8vw, 48px)/1 Georgia, serif; }
    #phase-copy { margin: 10px 0 0; color: #bdc8c0; font-size: 12px; }

    #info-card {
      flex: 0 0 auto;
      width: min(100%, 570px);
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: rgba(7, 20, 14, .78);
    }

    #info-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }

    #stage-name {
      margin: 0;
      color: var(--gold-light);
      font: 500 23px/1 Georgia, serif;
    }

    #fragment-count {
      color: var(--muted);
      font-size: 10px;
      white-space: nowrap;
    }

    #stage-description {
      min-height: 29px;
      margin: 6px 0 7px;
      color: #c6cec8;
      font-size: 11px;
      line-height: 1.35;
    }

    #mind-sync-status {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin: 0 0 7px;
    }

    .mind-status {
      min-width: 0;
      padding: 4px 7px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: 5px;
      color: #72847a;
      background: rgba(3, 14, 9, .42);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .7px;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    #original-status.ready {
      color: var(--cyan);
      border-color: rgba(121,217,192,.55);
      background: rgba(121,217,192,.08);
      box-shadow: 0 0 10px rgba(121,217,192,.1);
    }

    #copy-status.ready {
      color: var(--gold-light);
      border-color: rgba(234,210,125,.52);
      background: rgba(234,210,125,.07);
      box-shadow: 0 0 10px rgba(234,210,125,.08);
    }

    #sync-track {
      height: 5px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(74,124,111,.2);
    }

    #sync-fill {
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), #89dda9 55%, var(--gold-light));
      box-shadow: 0 0 10px rgba(121,217,192,.35);
      transition: width .25s ease, background .25s ease;
    }

    #controls {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      align-items: center;
      gap: 6px;
      width: min(100%, 570px);
      min-height: 34px;
    }

    #control-hint {
      color: #87968d;
      font-size: 10px;
    }

    .small-button {
      min-height: 30px;
      padding: 5px 12px;
      border: 1px solid var(--green);
      border-radius: 5px;
      color: var(--cream);
      background: rgba(8, 24, 16, .7);
      cursor: pointer;
      font: 12px Georgia, serif;
    }

    .small-button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-light); }
    .small-button:disabled { opacity: .32; cursor: default; }

    #finish-button {
      color: var(--gold-light);
      border-color: rgba(200,168,75,.68);
    }

    #finish-button:hover:not(:disabled) {
      color: #102018;
      background: var(--gold);
    }

    .screen {
      position: absolute;
      inset: 48px 0 0;
      z-index: 40;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 14px;
      overflow: auto;
      background:
        linear-gradient(rgba(3, 12, 8, .91), rgba(3, 12, 8, .95)),
        radial-gradient(circle at 50% 35%, rgba(121,217,192,.12), transparent 42%);
    }

    .screen.open { display: flex; }

    .card {
      width: min(100%, 500px);
      max-height: 100%;
      overflow: auto;
      padding: clamp(18px, 4vw, 30px);
      border: 1px solid rgba(200,168,75,.68);
      border-radius: 16px;
      background: rgba(7, 24, 16, .92);
      box-shadow: 0 22px 65px rgba(0,0,0,.48);
      text-align: center;
    }

    .card-kicker {
      margin: 0 0 7px;
      color: var(--gold);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 7px;
    }

    .card h2 {
      margin: 0;
      color: var(--cream);
      font: 500 clamp(34px, 9vw, 52px)/.96 Georgia, serif;
      letter-spacing: 2px;
    }

    .card-subtitle {
      margin: 7px 0 15px;
      color: var(--cyan);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2px;
    }

    .intro {
      max-width: 410px;
      margin: 0 auto 15px;
      color: #d7d8cc;
      font-size: 13px;
      line-height: 1.48;
    }

    .intro strong { color: var(--gold-light); }

    #copy-example {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      margin: 0 auto 14px;
    }

    .example-mind {
      min-height: 74px;
      display: grid;
      place-items: center;
      padding: 8px;
      border: 1px solid var(--green);
      border-radius: 9px;
      background: rgba(12, 39, 27, .6);
      color: var(--cyan);
    }

    .example-mind.copy { color: var(--gold-light); border-color: rgba(200,168,75,.65); }
    .example-symbol { display: block; font: 30px/1 Georgia, serif; }
    .example-label { display: block; margin-top: 5px; color: var(--cream); font-size: 9px; font-weight: 700; letter-spacing: 1px; }
    .example-link { color: var(--gold); font-size: 24px; }

    .control-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-bottom: 14px;
      color: #b5beb7;
      font-size: 10px;
    }

    .control-item {
      padding: 8px 6px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(255,255,255,.02);
    }

    .control-item strong { display: block; margin-bottom: 3px; color: var(--cream); font-size: 10px; }

    .primary-button {
      min-width: 190px;
      min-height: 39px;
      padding: 9px 25px;
      border: 0;
      border-radius: 999px;
      background: var(--gold);
      color: #102018;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 3px;
      box-shadow: 0 9px 24px rgba(200,168,75,.16);
    }

    .primary-button:hover { filter: brightness(1.1); }

    .silent-note { margin: 9px 0 0; color: #78867e; font-size: 9px; }

    .game-links,
    .result-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 12px;
      margin-top: 10px;
    }

    .game-links a {
      color: #a9bdb2;
      font-size: 9px;
      text-underline-offset: 3px;
    }

    .result-card h2 { font-size: clamp(32px, 8vw, 49px); }
    .result-lead { margin: 14px 0 5px; color: #c5ccc7; font-size: 12px; }
    .result-value { margin: 0 0 12px; color: var(--gold-light); font: 500 28px/1 Georgia, serif; }
    .result-copy { max-width: 390px; margin: 12px auto 17px; color: #d0d4cf; font-size: 13px; line-height: 1.5; }

    .transfer-result-card {
      width: min(100%, 520px);
      transition: border-color .5s ease, box-shadow .5s ease;
    }

    .transfer-result-card.success {
      border-color: rgba(121,217,192,.78);
      box-shadow: 0 22px 70px rgba(0,0,0,.5), 0 0 38px rgba(121,217,192,.12);
    }

    .transfer-result-card.copy-only {
      border-color: rgba(200,168,75,.72);
      box-shadow: 0 22px 70px rgba(0,0,0,.5), 0 0 38px rgba(200,168,75,.11);
    }

    .transfer-visual {
      position: relative;
      width: 100%;
      height: clamp(205px, 31dvh, 275px);
      margin: 15px auto 5px;
      overflow: hidden;
      border: 1px solid rgba(121,217,192,.35);
      border-radius: 12px;
      background:
        radial-gradient(circle at 18% 50%, rgba(121,217,192,.12), transparent 25%),
        radial-gradient(circle at 82% 50%, rgba(234,210,125,.1), transparent 25%),
        #030b07;
      box-shadow: inset 0 0 55px rgba(0,0,0,.52);
    }

    #transfer-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .transfer-sequence-label {
      position: absolute;
      left: 50%;
      bottom: 23px;
      width: calc(100% - 30px);
      margin: 0;
      transform: translateX(-50%);
      color: #d9e2dc;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2.2px;
      text-align: center;
      text-shadow: 0 2px 8px #000;
      transition: color .35s ease, opacity .35s ease;
    }

    .transfer-threshold {
      position: absolute;
      right: 10px;
      top: 9px;
      color: rgba(245,236,208,.48);
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 1.3px;
    }

    .victory-result-content {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(9px);
      transition: max-height .7s ease, opacity .55s ease, transform .55s ease;
    }

    .victory-result-content.revealed {
      max-height: 420px;
      opacity: 1;
      transform: translateY(0);
    }

    .transfer-result-card.success #victory-title { color: #dffbef; }
    .transfer-result-card.copy-only #victory-title { color: var(--gold-light); }
    .transfer-result-card.copy-only .result-value { color: var(--cyan); }

    .result-link {
      flex: 1 1 180px;
      padding: 9px 10px;
      border: 1px solid var(--green);
      border-radius: 7px;
      color: var(--cream);
      background: rgba(15, 44, 31, .55);
      text-decoration: none;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .result-link:hover { border-color: var(--gold); color: var(--gold-light); }

    .finish-visual {
      position: relative;
      width: 100%;
      height: clamp(135px, 24dvh, 205px);
      display: grid;
      place-items: center;
      margin: 13px auto 12px;
      overflow: hidden;
      border: 1px solid rgba(200,168,75,.55);
      border-radius: 11px;
      background:
        radial-gradient(circle at 50% 45%, rgba(121,217,192,.13), transparent 55%),
        #06100c;
    }

    #finish-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      filter: saturate(.82) brightness(.72) contrast(1.05);
      transition: opacity .45s ease;
    }

    #finish-image.loaded { opacity: .84; }

    .finish-visual::after {
      content: "E I D O S";
      position: relative;
      z-index: 1;
      color: rgba(245,236,208,.27);
      font: 500 27px/1 Georgia, serif;
      letter-spacing: 10px;
      pointer-events: none;
    }

    .finish-visual.has-image::after { opacity: .28; }

    .identity-visual {
      position: relative;
      width: min(100%, 330px);
      height: 105px;
      margin: 13px auto 8px;
      overflow: hidden;
      border: 1px solid var(--line-soft);
      border-radius: 10px;
      background:
        radial-gradient(circle at 35% 50%, rgba(121,217,192,.13), transparent 24%),
        radial-gradient(circle at 65% 50%, rgba(200,168,75,.13), transparent 24%),
        rgba(3, 13, 9, .65);
    }

    .identity-line {
      position: absolute;
      left: 34%;
      top: 50%;
      width: 32%;
      height: 1px;
      background: linear-gradient(90deg, var(--cyan), var(--gold));
      transform-origin: left;
      animation: sever 4s ease-in-out infinite;
    }

    .identity-node {
      position: absolute;
      top: 50%;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 2px solid currentColor;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      font: 22px Georgia, serif;
    }

    .identity-node.original { left: 34%; color: var(--cyan); }
    .identity-node.copy { left: 66%; color: var(--gold-light); animation: choose 4s ease-in-out infinite; }

    @keyframes choose {
      0%, 25% { transform: translate(-50%, -50%); }
      65%, 100% { transform: translate(48px, -21px) scale(.9); }
    }

    @keyframes sever {
      0%, 25% { opacity: 1; transform: scaleX(1); }
      65%, 100% { opacity: .18; transform: scaleX(.35); }
    }

    @media (max-width: 520px) {
      #game-shell { border-radius: 0; }
      #top-bar { padding-inline: 7px; }
      #hud { gap: 2px 8px; font-size: 10px; }
      #close-btn { padding: 4px 7px; font-size: 10px; }
      #sound-button { width: 34px; padding-inline: 7px; }
      #game-area { gap: 5px; padding: 0 8px 7px; }
      #board-wrap {
        width: auto;
        height: min(calc(100dvh - 260px), 131.04vw);
        max-width: 100%;
        aspect-ratio: 580 / 760;
      }
      #game-title { font-size: 29px; }
      #game-subtitle { margin-top: 2px; font-size: 8px; }
      #info-card { padding: 7px 9px; }
      #stage-name { font-size: 20px; }
      #stage-description { min-height: 26px; margin-block: 4px 5px; font-size: 10px; }
      #mind-sync-status { gap: 4px; margin-bottom: 5px; }
      .mind-status { padding: 3px 5px; font-size: 7px; }
      #controls { min-height: 30px; }
      #control-hint { font-size: 9px; }
      .small-button { min-height: 28px; padding: 4px 9px; font-size: 10px; }
      .screen { padding: 9px; }
      .card { padding: 17px 16px; }
      .card-subtitle { margin-bottom: 10px; }
      .intro { margin-bottom: 10px; font-size: 11.5px; line-height: 1.38; }
      .example-mind { min-height: 58px; }
      .example-symbol { font-size: 24px; }
      .control-grid { margin-bottom: 10px; }
      .silent-note, .game-links { margin-top: 7px; }
      .transfer-visual { height: 190px; margin-top: 10px; }
      .transfer-sequence-label { bottom: 18px; font-size: 8px; letter-spacing: 1.5px; }
      .transfer-threshold { font-size: 6px; }
    }

    @media (max-height: 720px) {
      #game-shell { grid-template-rows: 42px minmax(0,1fr); }
      #top-bar { padding-block: 4px 2px; }
      .screen { inset-block-start: 42px; }
      #game-area { gap: 3px; padding-bottom: 4px; }
      #title-block { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
      .brand-kicker { letter-spacing: 4px; }
      #game-title { font-size: 24px; }
      #game-subtitle { display: none; }
      #info-card { padding-block: 5px; }
      #stage-description { min-height: 0; margin: 3px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      #mind-sync-status { margin-bottom: 4px; }
      .card { padding-block: 14px; }
      .card h2 { font-size: 34px; }
      .identity-visual { height: 78px; }
    }




    /* Cookie and Analytics consent */
    #consent-banner {
      position: fixed;
      left: 50%;
      bottom: max(12px, env(safe-area-inset-bottom));
      z-index: 10000;
      width: min(620px, calc(100vw - 24px));
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 14px;
      color: #ded7c1;
      background: rgba(7, 16, 12, .97);
      border: 1px solid rgba(200, 168, 75, .62);
      border-radius: 9px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
      font: 12px/1.35 Arial, sans-serif;
      touch-action: manipulation;
      transform: translateX(-50%);
    }

    #consent-banner[hidden] { display: none; }

    #consent-banner p {
      flex: 1 1 320px;
      margin: 0;
    }

    #consent-banner a {
      color: var(--cyan);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .consent-actions {
      display: flex;
      flex: 0 0 auto;
      gap: 7px;
    }

    .consent-btn {
      min-width: 76px;
      padding: 7px 10px;
      color: var(--ink);
      background: var(--gold-light);
      border: 1px solid var(--gold);
      border-radius: 5px;
      cursor: pointer;
      font: 700 11px/1 Arial, sans-serif;
      touch-action: manipulation;
    }

    .consent-btn.decline {
      color: #cbd3ce;
      background: transparent;
      border-color: rgba(121, 217, 192, .4);
    }

    .consent-btn:hover,
    .consent-btn:focus-visible {
      filter: brightness(1.1);
      outline: 2px solid rgba(121, 217, 192, .55);
      outline-offset: 2px;
    }

    @media (max-width: 560px) {
      #consent-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 11px;
        text-align: center;
      }

      .consent-actions {
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

/* Inicio y campaña coherentes con la colección EIDOS */
#top-bar{grid-template-columns:minmax(0,1fr) auto auto auto}
#levels-button{min-height:30px;padding:4px 9px;border:1px solid var(--green);border-radius:5px;color:#9ca49e;background:rgba(6,16,12,.72);cursor:pointer;font-family:Georgia,serif;font-size:10px;letter-spacing:.8px}
#levels-button:hover{color:var(--cream);border-color:var(--gold)}
.start-actions{width:min(360px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 auto}
.start-actions .primary-button,.start-actions .secondary-button{width:100%;min-width:0;min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;cursor:pointer;text-decoration:none;font:800 9px/1 Arial,sans-serif;letter-spacing:1.15px;text-align:center}
.start-actions .primary-button{border:0;background:var(--gold);color:#102018;box-shadow:0 9px 24px rgba(200,168,75,.16)}
.start-actions .secondary-button{border:1px solid var(--green);background:transparent;color:var(--cream)}
.start-actions .secondary-button:hover{border-color:var(--gold);color:var(--gold-light)}
.full-start-action{grid-column:1/-1}
.collection-note{margin:8px auto 0;max-width:350px;color:#74847c;font-size:8.5px;line-height:1.35}
.levels-card{width:min(100%,500px)}
#campaign-summary{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;color:#aab7af;font-size:9px}
#campaign-summary strong{color:var(--gold-light)}
#level-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px auto 12px}
.phase-level{min-height:54px;padding:8px 9px;border:1px solid rgba(74,124,111,.55);border-radius:8px;background:rgba(255,255,255,.018);color:#a8b2ac;cursor:pointer;text-align:left}
.phase-level strong{display:block;margin-bottom:3px;color:var(--cream);font-size:10px;letter-spacing:.5px}
.phase-level span{font-size:8.5px;line-height:1.25}
.phase-level.completed{border-color:rgba(121,217,192,.45);background:rgba(121,217,192,.05)}
.phase-level.current{border-color:rgba(200,168,75,.72);box-shadow:0 0 0 1px rgba(200,168,75,.10) inset}
.phase-level.locked{opacity:.34;cursor:default}
.levels-footer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.secondary-button{min-width:145px;padding:10px 15px;border-radius:999px;cursor:pointer;color:var(--cream);background:transparent;border:1px solid var(--green);font:800 9px/1 Arial,sans-serif;letter-spacing:1px}
.danger-button{color:#e7a9ae;border-color:rgba(207,114,106,.56);background:rgba(93,31,38,.12)}
.danger-button:hover{color:#ffd7da;border-color:#cf726a;background:rgba(126,44,52,.22)}
.delete-campaign-card{width:min(100%,430px)}
.danger-subtitle{color:#d88a91!important}
.delete-warning{max-width:350px;margin:0 auto 16px;padding:11px 13px;text-align:left;border:1px solid rgba(207,114,106,.45);border-radius:8px;background:rgba(93,31,38,.12)}
.delete-warning strong{display:block;margin-bottom:5px;color:#efb1b6;font-size:10px;letter-spacing:.4px}
.delete-warning span{display:block;color:#b3a1a4;font-size:9.5px;line-height:1.4}
.delete-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.danger-confirm{min-width:225px}
@media(max-width:520px){#top-bar{grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px;padding-inline:6px}#levels-button,#sound-button,#close-btn{padding-inline:7px;font-size:9px}.start-actions{width:min(330px,100%);gap:7px}#level-map{grid-template-columns:1fr}.phase-level{min-height:46px}}