:root {
      --bg-dark: #063d2c;
      --bg-light: #0c704d;

      --panel: rgba(0, 0, 0, 0.22);
      --panel-border: rgba(255, 255, 255, 0.12);

      --text: #ffffff;
      --muted: rgba(255, 255, 255, 0.7);

      --card-width: 86px;
      --card-height: 118px;
      --card-radius: 9px;

      --red: #c62828;
      --black: #171717;

      --accent: #ffd54f;
      --drop-valid: #7cff8b;
      --drop-invalid: #ff6464;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;

      font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    }

    body {
      min-height: 100vh;

      color: var(--text);

      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(255, 255, 255, 0.1),
          transparent 40%
        ),
        linear-gradient(
          135deg,
          var(--bg-dark),
          var(--bg-light)
        );

      user-select: none;

      -webkit-user-select: none;
    }

    button {
      font: inherit;
    }

    /* =========================================================
       Spielfläche
    ========================================================= */

    .game {
      width: 100%;
      min-height: 100vh;

      padding: 18px;
    }

    /* =========================================================
       Kopfzeile
    ========================================================= */

    .topbar {
      max-width: 1450px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;

      margin: 0 auto 16px;
    }

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

    .logo {
      width: 48px;
      height: 48px;

      display: grid;
      place-items: center;

      border-radius: 14px;

      color: #123;

      background:
        linear-gradient(
          145deg,
          #fff8d6,
          #eacb65
        );

      font-size: 27px;

      box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.25),
        inset 0 1px rgba(255, 255, 255, 0.8);
    }

    .brand h1 {
      margin: 0;

      font-size: clamp(20px, 3vw, 30px);
      line-height: 1.05;
    }

    .brand p {
      margin: 4px 0 0;

      color: var(--muted);

      font-size: 13px;
    }

    /* =========================================================
       Buttons
    ========================================================= */

    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;

      gap: 8px;
    }

    .btn {
      padding: 10px 14px;

      border:
        1px solid
        rgba(255, 255, 255, 0.18);

      border-radius: 11px;

      color: #fff;

      background:
        rgba(255, 255, 255, 0.12);

      font-weight: 700;

      cursor: pointer;

      backdrop-filter: blur(8px);

      transition:
        background 0.15s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
    }

    .btn:hover:not(:disabled) {
      background:
        rgba(255, 255, 255, 0.2);

      transform: translateY(-1px);
    }

    .btn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }

    .btn.primary {
      color: #203000;

      border-color: #ffd54f;

      background:
        linear-gradient(
          145deg,
          #ffe679,
          #ffc928
        );
    }

    /* =========================================================
       Info-Leiste
    ========================================================= */

    .info-bar {
      max-width: 1450px;

      display: grid;

      grid-template-columns:
        auto
        auto
        auto
        1fr;

      gap: 10px;

      margin: 0 auto 16px;
    }

    .info-box {
      min-width: 105px;

      padding: 10px 13px;

      border:
        1px solid
        var(--panel-border);

      border-radius: 12px;

      background: var(--panel);

      backdrop-filter: blur(8px);
    }

    .info-label {
      margin-bottom: 2px;

      color: var(--muted);

      font-size: 11px;
      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.07em;
    }

    .info-value {
      font-size: 19px;
      font-weight: 800;
    }

    /* =========================================================
       Fertige Stapel
    ========================================================= */

    .status-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      gap: 12px;

      min-width: 0;
    }

    .foundation-area {
      display: flex;
      align-items: center;

      gap: 5px;

      flex-shrink: 0;
    }

    .foundation {
      width: 28px;
      height: 38px;

      display: grid;
      place-items: center;

      border:
        1px dashed
        rgba(255, 255, 255, 0.26);

      border-radius: 5px;

      color:
        rgba(255, 255, 255, 0.24);

      font-size: 17px;
    }

    .foundation.completed {
      border-style: solid;

      color: #171717;

      background: #fff;

      box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.2);
    }

    /* =========================================================
       Kleiner Nachziehstapel
    ========================================================= */

    .mini-stock {
      position: relative;

      width: 28px;
      height: 38px;

      flex: 0 0 28px;

      padding: 0;

      border:
        1px solid
        rgba(255, 255, 255, 0.75);

      border-radius: 5px;

      color: #fff;

      background:
        repeating-linear-gradient(
          45deg,
          transparent 0 4px,
          rgba(255, 255, 255, 0.14) 4px 6px
        ),
        linear-gradient(
          145deg,
          #16469e,
          #091e59
        );

      box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);

      cursor: pointer;

      transition:
        transform 0.15s ease,
        opacity 0.15s ease;
    }

    .mini-stock:hover:not(:disabled) {
      transform: translateY(-2px);
    }

    .mini-stock:disabled {
      opacity: 0.25;
      cursor: default;
    }

    .mini-stock-card {
      display: grid;
      place-items: center;

      width: 100%;
      height: 100%;

      font-size: 15px;
    }

    .mini-stock-count {
      position: absolute;

      right: -7px;
      bottom: -7px;

      min-width: 17px;
      height: 17px;

      display: grid;
      place-items: center;

      padding: 0 3px;

      border-radius: 9px;

      color: #222;
      background: #ffd54f;

      font-size: 10px;
      font-weight: 900;

      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.4);
    }

    /* =========================================================
       Tableau
    ========================================================= */

    .board-scroll {
      width: 100%;
      max-width: 1450px;

      margin: 0 auto;

      overflow-x: auto;
      overflow-y: hidden;

      padding-bottom: 8px;
    }

    .tableau {
      display: grid;

      grid-template-columns:
        repeat(10, minmax(78px, 1fr));

      gap: 10px;

      min-width: 880px;

      padding: 13px;

      border:
        1px solid
        rgba(255, 255, 255, 0.1);

      border-radius: 16px;

      background:
        rgba(0, 0, 0, 0.1);
    }

    .column {
      position: relative;

      min-width: 0;
      min-height: 500px;

      border-radius: 10px;

      cursor: pointer;

      background:
        linear-gradient(
          rgba(255, 255, 255, 0.015),
          rgba(0, 0, 0, 0.015)
        );

      transition:
        background 0.12s ease,
        box-shadow 0.12s ease;
    }

    .column:hover {
      background:
        rgba(255, 255, 255, 0.025);
    }

    /*
     * Ziel während Drag & Drop.
     */

    .column.drop-target.valid {
      background:
        rgba(90, 255, 115, 0.12);

      box-shadow:
        inset 0 0 0 3px
        var(--drop-valid);
    }

    .column.drop-target.invalid {
      background:
        rgba(255, 70, 70, 0.1);

      box-shadow:
        inset 0 0 0 2px
        var(--drop-invalid);
    }

    .column.empty::before {
      content: "";

      position: absolute;

      top: 0;
      left: 50%;

      width:
        min(90%, var(--card-width));

      height:
        var(--card-height);

      transform:
        translateX(-50%);

      border:
        2px dashed
        rgba(255, 255, 255, 0.15);

      border-radius:
        var(--card-radius);
    }

    /* =========================================================
       Karten
    ========================================================= */

    .card {
      position: absolute;

      left: 50%;

      width:
        min(94%, var(--card-width));

      height:
        var(--card-height);

      overflow: hidden;

      transform:
        translateX(-50%);

      border-radius:
        var(--card-radius);

      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.34),
        0 1px 1px rgba(0, 0, 0, 0.3);

      transition:
        box-shadow 0.12s ease,
        transform 0.12s ease;
    }

    .card.face-up {
      border: 1px solid #d0d0d0;

      background:
        linear-gradient(
          145deg,
          #ffffff,
          #f6f6f6
        );

      cursor: grab;

      /*
       * Wichtig für Touch-Drag-and-Drop:
       * Der Browser soll auf der Karte
       * nicht stattdessen scrollen.
       */

      touch-action: none;

      -webkit-user-select: none;
      user-select: none;
    }

    .card.face-up:active {
      cursor: grabbing;
    }

    .card.face-up:hover {
      transform:
        translateX(-50%)
        translateY(-2px);

      box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .card.face-down {
      border: 3px solid #f7f7f7;

      background:
        repeating-linear-gradient(
          45deg,
          transparent 0 6px,
          rgba(255, 255, 255, 0.16) 6px 9px
        ),
        repeating-linear-gradient(
          -45deg,
          transparent 0 6px,
          rgba(255, 255, 255, 0.1) 6px 9px
        ),
        linear-gradient(
          145deg,
          #123c8f,
          #0b2361
        );

      box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 0 0 2px rgba(255, 255, 255, 0.12);
    }

    .card.selected {
      outline:
        4px solid
        var(--accent);

      outline-offset: 1px;

      box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.25),
        0 10px 22px rgba(0, 0, 0, 0.45);
    }

    .card.red {
      color: var(--red);
    }

    .card.black {
      color: var(--black);
    }

    .card-corner {
      position: absolute;

      top: 6px;
      left: 7px;

      display: flex;
      flex-direction: column;

      font-size: 18px;
      font-weight: 900;

      line-height: 0.84;
    }

    .card-corner .suit {
      margin-top: 5px;

      font-size: 18px;
    }

    .card-center {
      position: absolute;

      inset: 0;

      display: grid;
      place-items: center;

      padding-top: 24px;

      font-size: 40px;
    }

    /* =========================================================
       Drag & Drop – schwebende Karten
    ========================================================= */

    .drag-ghost {
      position: fixed;

      left: 0;
      top: 0;

      z-index: 10000;

      pointer-events: none;

      will-change: transform;

      filter:
        drop-shadow(
          0 12px 16px
          rgba(0, 0, 0, 0.45)
        );
    }

    .drag-ghost-card {
      position: absolute;

      left: 0;

      overflow: hidden;

      border: 1px solid #d0d0d0;

      border-radius:
        var(--card-radius);

      background:
        linear-gradient(
          145deg,
          #ffffff,
          #f6f6f6
        );

      box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.3);
    }

    /*
     * Die Originalkarten werden während
     * des Ziehens etwas durchsichtig.
     */

    .card.drag-source {
      opacity: 0.25;
    }

    body.dragging {
      cursor: grabbing;
    }

    /* =========================================================
       Spielregeln
    ========================================================= */

    .bottom-area {
      max-width: 1450px;

      margin: 14px auto 0;

      padding: 12px 14px;

      border:
        1px solid
        var(--panel-border);

      border-radius: 14px;

      background:
        var(--panel);
    }

    .instructions {
      color: var(--muted);

      font-size: 13px;

      line-height: 1.5;
    }

    .instructions strong {
      color: #fff;
    }

    /* =========================================================
       Sieg-Fenster
    ========================================================= */

    .modal {
      position: fixed;

      inset: 0;

      z-index: 5000;

      display: none;
      align-items: center;
      justify-content: center;

      padding: 20px;

      background:
        rgba(0, 0, 0, 0.65);

      backdrop-filter: blur(8px);
    }

    .modal.visible {
      display: flex;
    }

    .modal-content {
      width: min(440px, 100%);

      padding: 34px;

      border:
        1px solid
        rgba(255, 255, 255, 0.24);

      border-radius: 22px;

      text-align: center;

      background:
        radial-gradient(
          circle at top,
          rgba(255, 215, 64, 0.23),
          transparent 47%
        ),
        #083b2d;

      box-shadow:
        0 24px 80px
        rgba(0, 0, 0, 0.5);
    }

    .trophy {
      margin-bottom: 12px;
      font-size: 64px;
    }

    .modal h2 {
      margin: 0 0 9px;
      font-size: 32px;
    }

    .modal p {
      margin: 0 0 24px;

      color:
        rgba(255, 255, 255, 0.75);

      line-height: 1.5;
    }

    /* =========================================================
       Vollbild
    ========================================================= */

    :fullscreen {
      background: #063d2c;
    }

    :fullscreen .game {
      min-height: 100vh;
      padding: 18px;
    }

    :fullscreen .tableau {
      min-height:
        calc(100vh - 240px);
    }

    /* =========================================================
       Tablet
    ========================================================= */

    @media (max-width: 850px) {
      .game {
        padding: 10px;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .actions {
        justify-content: flex-start;
      }

      .info-bar {
        grid-template-columns:
          repeat(3, 1fr);
      }

      .status-box {
        grid-column: 1 / -1;

        justify-content: flex-end;
      }
    }

    /* =========================================================
       Smartphone
       Alle 10 Spalten gleichzeitig sichtbar
    ========================================================= */

    @media (max-width: 500px) {
      .game {
        padding: 6px;
      }

      .brand p {
        display: none;
      }

      .topbar {
        gap: 8px;
        margin-bottom: 8px;
      }

      .actions {
        gap: 4px;
      }

      .btn {
        padding: 7px 9px;

        font-size: 11px;
      }

      .info-bar {
        gap: 4px;

        margin-bottom: 8px;
      }

      .info-box {
        min-width: 0;

        padding: 6px;
      }

      .info-label {
        font-size: 8px;
      }

      .info-value {
        font-size: 13px;
      }

      .status-box {
        gap: 5px;
      }

      .foundation-area {
        gap: 2px;
      }

      .foundation {
        width: 18px;
        height: 25px;

        font-size: 11px;
      }

      .mini-stock {
        width: 18px;
        height: 25px;

        flex-basis: 18px;
      }

      .mini-stock-card {
        font-size: 10px;
      }

      .mini-stock-count {
        right: -5px;
        bottom: -5px;

        min-width: 13px;
        height: 13px;

        font-size: 8px;
      }

      .board-scroll {
        overflow-x: hidden;

        padding-bottom: 0;
      }

      .tableau {
        width: 100%;
        min-width: 0;

        grid-template-columns:
          repeat(
            10,
            minmax(0, 1fr)
          );

        gap: 2px;

        padding: 4px;

        border-radius: 8px;
      }

      .column {
        min-width: 0;
        min-height: 400px;
      }

      .card {
        width: 96%;
        height: 54px;

        border-radius: 4px;
      }

      .column.empty::before {
        width: 94%;
        height: 54px;

        border-width: 1px;
        border-radius: 4px;
      }

      .card.face-down {
        border-width: 1px;
      }

      .card-corner {
        top: 3px;
        left: 3px;

        font-size: 9px;

        line-height: 0.8;
      }

      .card-corner .suit {
        margin-top: 2px;

        font-size: 9px;
      }

      .card-center {
        padding-top: 14px;

        font-size: 19px;
      }

      .card.selected {
        outline-width: 2px;
      }

      .drag-ghost-card {
        border-radius: 4px;
      }

      .bottom-area {
        margin-top: 7px;

        padding: 7px;
      }

      .instructions {
        font-size: 10px;
      }
    }

/* Vollständige Folgen fliegen zu den fertigen Stapeln. */
.card.sequence-flight {
  position: fixed;
  margin: 0;
  transform: none;
  transform-origin: top left;
  transition: none;
  pointer-events: none;
}