// Phones: the board must fit the visible viewport exactly — a page
// scrollbar makes card dragging clunky (touchmove fights the scroll).
// Desktop keeps its taller-than-viewport layout (hand below the fold).
@media (max-width: 768px) {
  body:has(.multi-wrapper) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #content.gaming:has(.multi-wrapper) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  // !important throughout: the base .multi-wrapper rule below sets
  // height/flex-wrap with equal specificity but later in the file, so it
  // would win the cascade and collapse the board to its content height
  // (the "board only fills half the phone screen" bug).
  .multi-wrapper {
    min-height: unset !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  // Never wrap into a phantom second column: the JS splits the two board
  // halves and the hand so they fill the viewport exactly. Four-player
  // (is-four) keeps its wrapping 2x2 grid.
  .multi-wrapper:not(.is-four) {
    flex-wrap: nowrap !important;
  }
}

// Board background themes: each class only defines --board-theme-layers,
// consumed both by .multi-wrapper's background stack and by the preview
// swatches in the Background modal (see static/board/board-style.js).
.board-theme-slate {
  --board-theme-layers: radial-gradient(
      120% 90% at 50% 40%,
      rgba(255, 255, 255, 0.07),
      transparent 60%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(165deg, #363c44, #262b31 55%, #1e2227);
}

.board-theme-felt {
  --board-theme-layers: radial-gradient(
      120% 90% at 50% 40%,
      rgba(255, 255, 255, 0.1),
      transparent 65%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.06) 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.06) 0 2px,
      transparent 2px 4px
    ),
    linear-gradient(160deg, #1f5138, #14382a 60%, #0d281d);
}

.board-theme-wood {
  --board-theme-layers: radial-gradient(
      120% 90% at 50% 35%,
      rgba(255, 220, 160, 0.1),
      transparent 60%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.12) 0 2px,
      transparent 2px 90px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 7px
    ),
    linear-gradient(175deg, #4a3220, #3a2617 55%, #2b1c10);
}

.board-theme-nebula {
  --board-theme-layers: radial-gradient(
      60% 50% at 20% 25%,
      rgba(110, 80, 255, 0.25),
      transparent 70%
    ),
    radial-gradient(
      50% 45% at 80% 70%,
      rgba(40, 160, 255, 0.18),
      transparent 70%
    ),
    radial-gradient(
      45% 40% at 65% 15%,
      rgba(255, 80, 180, 0.12),
      transparent 70%
    ),
    linear-gradient(160deg, #1b1530, #12101f 60%, #0b0a14);
}

// The paintable stack of a board half, bottom to top: theme gradients
// (from the board-theme-* class set by BoardGame.applyBoardSurface),
// optional custom image, darkening scrim (readability over bright
// images). --board-image / --board-dim are set inline per half.
.board-surface() {
  --board-image: none;
  --board-dim: 0;
  // Frame the custom-image layer only (set per half in
  // BoardGame.applyBoardSurface); the scrim and theme layers stay
  // cover/center. See board-style.js for the focus/zoom model.
  --board-image-size: cover;
  --board-image-position: center center;
  background-image: linear-gradient(
      rgba(8, 10, 14, var(--board-dim)),
      rgba(8, 10, 14, var(--board-dim))
    ),
    var(--board-image), var(--board-theme-layers, none);
  background-size: cover, var(--board-image-size), cover;
  background-position: center, var(--board-image-position), center;
  background-repeat: no-repeat;
}

// The deck's stack of card backs, shared by the multiplayer board
// (.board-wrapper) and the solo board (.board-solo-wrapper, whose
// .deck-display is a direct child — it never sits inside a
// .board-wrapper, so the nested rule alone would leave it unstyled).
// Deck geometry mirrored by BOARD_OVERLAY_CSS.deckDisplay in
// board-style.js (keep in sync): right offset leaves the bottom-right
// player-position badge visible, bottom is measured from the wrapper
// (which includes the hand row).
.deck-display-stack() {
  .deck-display {
    position: absolute;
    right: 40px;
    bottom: 80px;
    width: 63px;
    height: 88px;
    z-index: 5;

    .deck-card {
      position: absolute;
      width: 63px;
      height: 88px;
      background-color: #444;
      background-image: url("../Magic_card_back.jpg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease;

      // Create stacking effect with each card slightly offset
      &:nth-child(1) { top: 0px; left: 0px; }
      &:nth-child(2) { top: -1px; left: 1px; }
      &:nth-child(3) { top: -2px; left: 2px; }

      // Only top card is clickable and has hover effects
      &.top-card {
        cursor: pointer;

        &:hover {
          border: 2px solid white;
          box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
          transform: scale(1.05);
          z-index: 10;

          &::after {
            content: "Draw";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            pointer-events: none;
          }
        }
      }
      &:nth-child(4) { top: -3px; left: 3px; }
      &:nth-child(5) { top: -4px; left: 4px; }
      &:nth-child(6) { top: -5px; left: 5px; }
      &:nth-child(7) { top: -6px; left: 6px; }
      &:nth-child(8) { top: -7px; left: 7px; }

      // Hide excess cards to prevent overflow (show max 8 for visual effect)
      &:nth-child(n+9) {
        display: none;
      }

      // Shake animation for shuffling
      &.shaking {
        animation: deckShuffle 0.8s ease-in-out;
      }
    }

    // Auto-draw: checkbox tucked just below the deck stack, revealed while
    // the deck (or the toggle itself — it's a child, so the parent :hover
    // holds) is hovered. board/auto-draw.js draws one card on turn start.
    .deck-auto-draw-toggle {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding-top: 4px;
      display: none;
      align-items: center;
      gap: 4px;
      color: #fff;
      font-size: 11px;
      font-weight: bold;
      white-space: nowrap;
      cursor: pointer;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);

      input {
        cursor: pointer;
        margin: 0;
      }
    }

    // Hand sort (board/hand-sort.js): two pill buttons right below the
    // auto-draw toggle, same hover reveal. The container's padding spans
    // the toggle's row so the hover surface stays contiguous on the way
    // down — pointer-events off on the container (back on for the
    // buttons) so that overlap never steals the toggle's clicks.
    .deck-hand-sort {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding-top: 26px;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      pointer-events: none;

      button {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        background: rgba(24, 27, 32, 0.9);
        color: #fff;
        font-size: 11px;
        font-weight: bold;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
          background: rgba(75, 132, 192, 0.95);
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }

    // Invisible hover surface spanning the whole under-deck controls
    // area: without it the reveal only triggers over the 63x88 deck box,
    // and the pointer-events:none strip inside .deck-hand-sort drops the
    // :hover on the way down, hiding the buttons before they can be
    // clicked. The catcher sits beneath the controls, so hit-testing
    // falls through their dead zones onto it and the parent :hover
    // holds. Hover-capable pointers only — on touch it would just steal
    // taps from the hand cards underneath.
    @media (hover: hover) {
      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 78px;
        // ::after paints above sibling content, which would steal the
        // buttons' clicks; the deck-display stacking context (z-index: 5
        // above) keeps -1 behind the controls yet above the hand.
        z-index: -1;
      }
    }

    &:hover .deck-auto-draw-toggle,
    &:hover .deck-hand-sort {
      display: flex;
    }
  }
}

.multi-wrapper {
  height: unset;
  min-height: 100vh;
  max-height: 100%;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  // The board is a click/drag/tap surface, not a document — stray text
  // selection (life totals, menus, player names) while dragging cards or
  // tapping counters just looks broken. Suppress it everywhere on the board.
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  // ...except real text entry (name prompt, custom tokens, etc.), where
  // selecting/editing the value must still work.
  input,
  textarea {
    user-select: text;
    -webkit-user-select: text;
  }

  // Neutral zone: everything outside the board halves (hand rows, gaps)
  // keeps the default slate look for every player. Each half paints its
  // own player's style on top (see .board-surface and board-style.js);
  // halves without a chosen style inherit these slate layers.
  .board-theme-slate();
  background-color: #23272d;
  background-image: var(--board-theme-layers, none);
  background-size: cover;
  background-position: center;

  &.is-four {
    flex-direction: row;
  }

  .hand {
    min-height: unset;
    bottom: unset;
    width: 100%;
    // Slightly translucent so the board theme shows through while the
    // hand row stays clearly separated from the battlefield
    background-color: rgba(24, 27, 32, 0.82);
    z-index: 2;

    .card {
      position: relative;
      // Never let flexbox squeeze hand cards (a squeezed card tiles its
      // background image); updateHandOverlap fans them instead.
      flex-shrink: 0;
    }
  }

  .board-wrapper {
    height: inherit;
    position: relative;
    min-height: 200px; // Ensure minimum height for visibility
    background-color: unset;
    width: 100%;
    
    // Ensure highlighting is visible by giving slight background when active
    &.turn-active-player-blue,
    &.turn-active-player-orange,
    &.turn-active-player-green,
    &.turn-active-player-yellow,
    &.turn-active-player-red,
    &.turn-active-player-purple,
    &.turn-active-player-teal,
    &.turn-active-player-pink {
      background-color: rgba(0, 0, 0, 0.05); // Very subtle background to ensure visibility
    }

    .player-board {
      // Replace the solo board's gradient (board.less) with this
      // player's own paintable surface
      background: unset;
      .board-surface();
      position: relative;
      border: unset;
      z-index: 0;
    }

    .deck {
      position: absolute;
    }

    .deck-drop-zone {
      position: absolute;
      right: 40px; // follows .deck-display's column
      bottom: 180px;
      width: 120px;
      height: 50px;
      z-index: 999;
      background-color: rgba(46, 125, 50, 0.8);
      border: 3px dashed #4caf50;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      pointer-events: auto;

      &:hover,
      &.drag-over {
        background-color: rgba(76, 175, 80, 0.95);
        border-color: #81c784;
        transform: scale(1.08);
        box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
      }
      
      &.active {
        animation: pulse 1.5s infinite;
      }

      .drop-zone-text {
        color: white;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        line-height: 13px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }

    .deck-bottom-drop-zone {
      position: absolute;
      right: 40px; // follows .deck-display's column
      bottom: 15px;
      width: 120px;
      height: 50px;
      z-index: 999;
      background-color: rgba(156, 39, 176, 0.8);
      border: 3px dashed #ab47bc;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      pointer-events: auto;

      &:hover,
      &.drag-over {
        background-color: rgba(171, 71, 188, 0.95);
        border-color: #ce93d8;
        transform: scale(1.08);
        box-shadow: 0 6px 16px rgba(171, 71, 188, 0.4);
      }
      
      &.active {
        animation: pulse 1.5s infinite;
      }

      .drop-zone-text {
        color: white;
        font-size: 11px;
        font-weight: bold;
        text-align: center;
        line-height: 13px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }
    }

    
    // Animation for active drop zone
    @keyframes pulse {
      0% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
      100% { opacity: 0.8; transform: scale(1); }
    }

    // Deck card stack: shared with the solo board (see the
    // .deck-display-stack() mixin at the top of this file).
    .deck-display-stack();

    // Keyframe animation for deck shuffle
    @keyframes deckShuffle {
      0%, 100% { transform: translate(0, 0); }
      10% { transform: translate(-2px, -1px); }
      20% { transform: translate(3px, 2px); }
      30% { transform: translate(-3px, 1px); }
      40% { transform: translate(2px, -2px); }
      50% { transform: translate(-1px, 3px); }
      60% { transform: translate(3px, -1px); }
      70% { transform: translate(-2px, 2px); }
      80% { transform: translate(1px, -3px); }
      90% { transform: translate(2px, 1px); }
    }

    .game-controls {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      
      .controls-toggle-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        
        .controls-toggle {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #6366f1, #4f46e5);
          border: none;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
          backdrop-filter: blur(10px);
          
          .toggle-icon {
            font-size: 18px;
            color: white;
            transition: transform 0.3s ease;
          }
          
          &:hover {
            background: linear-gradient(135deg, #4f46e5, #3730a3);
            box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
            transform: translateY(-2px);
          }
          
          &.collapsed .toggle-icon {
            transform: rotate(180deg);
          }
        }
        
        .show-more-button {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          opacity: 0;
          transform: translateY(-10px);
          transition: all 0.3s ease;
          pointer-events: none;
          
          .btn-icon {
            font-size: 14px;
          }
        }
      }
      
      &:not(.menu-collapsed) .controls-toggle-area .show-more-button {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      
      .controls-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        opacity: 1;
        width: 180px;
        max-height: 500px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
        
        &.collapsed {
          opacity: 0;
          width: 0;
          transform: translateX(-20px);
          pointer-events: none;
        }
        
        // Responsive width adjustments
        @media (max-width: 768px) {
          width: 150px;
        }
        
        @media (max-width: 480px) {
          width: 120px;
        }
      }
      
      .control-group {
        background-color: rgba(44, 49, 60, 0.95);
        border-radius: 12px;
        
        padding: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        
        .group-label {
          color: rgba(255, 255, 255, 0.7);
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 8px;
          text-align: center;
        }
        
        .control-btn {
          width: 100%;
          height: 36px;
          border: none;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-size: 13px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          margin-bottom: 6px;
          position: relative;
          overflow: hidden;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .btn-icon {
            font-size: 14px;
            line-height: 1;
          }
          
          .btn-text {
            font-weight: 600;
          }
          
          // Primary buttons (Start/Mulligan)
          &.primary {
            background: linear-gradient(135deg, #4ade80, #22c55e);
            color: white;
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
            
            &:hover {
              background: linear-gradient(135deg, #22c55e, #16a34a);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
          
          // Action buttons (deck operations)
          &.action {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
            
            &:hover {
              background: linear-gradient(135deg, #2563eb, #1d4ed8);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
          
          // Secondary buttons (chat, system)
          &.secondary {
            background: linear-gradient(135deg, #6b7280, #4b5563);
            color: white;
            box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3);
            
            &:hover {
              background: linear-gradient(135deg, #4b5563, #374151);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
          
          // Debug buttons
          &.debug {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
            
            &:hover {
              background: linear-gradient(135deg, #d97706, #b45309);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
            }
            
            &:active {
              transform: translateY(0);
            }
          }
          
          // Ripple effect
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transition: width 0.3s ease, height 0.3s ease;
            transform: translate(-50%, -50%);
            z-index: 0;
          }
          
          &:active::before {
            width: 100%;
            height: 100%;
          }
          
          // Ensure text stays above ripple
          .btn-icon,
          .btn-text {
            position: relative;
            z-index: 1;
          }
        }
        
        // Hide debug group by default
        &.debug-tools {
          display: none;
        }
      }
      
      // Responsive design - keep controls in same position
      @media (max-width: 768px) {
        // Keep same positioning, just adjust sizing
        min-width: 160px;
        
        .control-group {
          padding: 10px;
          
          .control-btn {
            height: 32px;
            font-size: 12px;
            
            .btn-icon {
              font-size: 12px;
            }
          }
        }
      }
      
      @media (max-width: 480px) {
        // Keep same positioning, just adjust sizing
        min-width: 140px;
        gap: 12px;
        
        .control-group {
          padding: 8px;
          
          .group-label {
            font-size: 10px;
            margin-bottom: 6px;
          }
          
          .control-btn {
            height: 30px;
            font-size: 11px;
            gap: 6px;
            margin-bottom: 4px;
            
            .btn-icon {
              font-size: 11px;
            }
          }
        }
      }
    }

    &.is-four {
      width: 50%;
    }

    .player-position {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0.5em;
      background-color: cadetblue;
    }
  }

  .opponent-board-wrapper,
  .opponent-board-wrapper-1,
  .opponent-board-wrapper-2,
  .opponent-board-wrapper-3,
  .opponent-board-wrapper-4 {
    position: relative;
    width: 100%;
    border: unset;

    .opponent-deck-display {
      position: absolute;
      // Tucked inside the hand strip (same bottom as .opponent-hand), above
      // the battlefield's top edge: an opponent commander's mirrored command
      // zone lands where the deck used to float mid-battlefield and the two
      // overlapped. `right` clears the ~36px player-position badge in the
      // corner and mirrors the own deck display's offset.
      right: 40px;
      bottom: 10px;
      width: 40px;
      height: 56px;
      z-index: 5;

      .opponent-deck-card {
        position: absolute;
        width: 40px;
        height: 56px;
        background-color: #444;
        background-image: url("../Magic_card_back.jpg");
        background-size: contain;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        
        // Create stacking effect with smaller offset for opponents
        &:nth-child(1) { top: 0px; left: 0px; }
        &:nth-child(2) { top: -1px; left: 1px; }
        &:nth-child(3) { top: -2px; left: 2px; }
        &:nth-child(4) { top: -3px; left: 3px; }
        &:nth-child(5) { top: -4px; left: 4px; }
        &:nth-child(6) { top: -5px; left: 5px; }
        &:nth-child(7) { top: -6px; left: 6px; }
        &:nth-child(8) { top: -7px; left: 7px; }
        
        // Hide excess cards
        &:nth-child(n+9) {
          display: none;
        }
      }
    }

    .opponent-hand {
      display: flex;
      position: absolute;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: unset;
      padding: 0 10px;
      bottom: 10px;
      .card {
        position: relative;
      }
      background-color: rgba(58, 62, 70, 0.82);
    }

    .opponent-board {
      width: 100%;
      height: 100%;
      min-height: unset;
      position: relative;
      // Painted with that opponent's own style (board-style.js). The
      // .opposite wrapper is rotated 180°, so a custom image shows
      // upside down from here — like their playmat across a real table.
      .board-surface();
    }

    &.is-four {
      width: 50%;
    }

    &.opposite {
      transform: rotate(180deg);
    }

    // See if we keep it here
    .player-position {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0.5em;
      background-color: cadetblue;
    }
  }

  // .opponent-board-wrapper-1 .opponent-board {
  //   background-color: rgb(234, 165, 165);
  // }
  // .opponent-board-wrapper-2 .opponent-board {
  //   background-color: rgb(126, 124, 249);
  // }
  // .opponent-board-wrapper-3 .opponent-board {
  //   background-color: rgb(152, 255, 170);
  // }
  // .opponent-board-wrapper-4 {
  //   background-color: rgb(240, 253, 160);
  // }

  .battlefield-wrapper {
    position: absolute;
    z-index: 1;
    // background-color: red;
    // opacity: 0.5;

    // Zone furniture: frames around each player's half plus graveyard and
    // exile boxes, drawn/sized by BoardGame.updateZoneFurniture. Purely
    // decorative (pointer-events: none) — cards dropped on the boxes keep
    // their tapped/flipped/hidden state.
    .zone-furniture {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      .zone-half-frame {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.18);
      }

      .zone-box {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1.5px dashed rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.16);
        color: rgba(255, 255, 255, 0.32);

        i {
          font-size: 1.3em;
        }

        .zone-box-label {
          font-size: 9px;
          font-weight: bold;
          letter-spacing: 1.5px;
          text-transform: uppercase;
        }

        // Opponent boxes face the opponent, like on a real table
        &.zone-opposite {
          transform: rotate(180deg);
        }

        // The command zone (above the deck, commander decks only) gets a
        // faint golden tint so the crown reads as a seat of honor
        &.zone-command {
          border-color: rgba(255, 215, 130, 0.28);
          color: rgba(255, 215, 130, 0.45);
        }
      }
    }

    // Interactive overlay (sibling of the decorative .zone-furniture): search
    // hotspots over graveyard/exile piles holding 2+ cards, built by
    // refreshZoneOverlay. The layer is click-through; only the hotspots take
    // pointer events, and they sit above resting cards but below a card being
    // dragged (z-index 50000), so retrieving a card still floats it on top.
    // Because a hotspot overlays its pile, the pile is browsed through the
    // search window rather than dragged directly.
    .zone-overlay {
      position: absolute;
      inset: 0;
      z-index: 40000;
      pointer-events: none;

      .zone-search-hotspot {
        position: absolute;
        pointer-events: auto;
        cursor: zoom-in;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.15s ease, background-color 0.15s ease;

        &:hover {
          opacity: 1;
          background: rgba(10, 12, 16, 0.4);
        }

        .zone-search-hotspot-icon {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 6px 10px;
          border-radius: 999px;
          background: rgba(15, 18, 23, 0.92);
          border: 1px solid rgba(255, 255, 255, 0.4);
          color: #fff;
          font-size: 14px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
        }

        .zone-search-hotspot-count {
          font-weight: bold;
        }
      }
    }
  }

  // "Get it off the battlefield" drop bar: docked over the top edge of
  // the hand row (positionBattlefieldDropBar in card-interaction.js sets
  // `top` on every show/move, falling back to the bottom edge of the
  // screen while the hand is below the fold — `bottom: 0` here is just
  // the pre-JS default) and kept discreet — it only appears once the
  // drag heads downward (armBattlefieldDropTarget) and then stays put
  // until the card is released.
  .unified-drop-zone {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, 72vw);
    height: 64px;
    // Pure indicator: it paints above the dragged card (root stacking
    // context vs the battlefield's), so it must not swallow the mouseup
    // the card's release handler needs. Drops are detected by
    // coordinates (isPointOverBattlefieldDropTarget), not by hit-testing.
    pointer-events: none;
    background-color: rgba(15, 18, 23, 0.9);
    border: 2px dashed rgba(255, 255, 255, 0.35);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    // Above every other overlay (menus 1000, notifications 2000, modals
    // 60000-70000): a drop on this bar must always read as a drop on the
    // bar, whatever furniture sits underneath. pointer-events stays none,
    // so painting on top costs no interactions.
    z-index: 80000;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      box-shadow 0.2s ease;

    &.active {
      animation: dropZoneRise 0.18s ease-out;
    }

    // The action's accent colors the icon even before hover-over…
    &.card-drop .drop-zone-icon {
      color: #ffc107;
    }

    &.remove-drop .drop-zone-icon {
      color: #e05260;
    }

    // …and hovering the bar with the drag commits to it: solid border,
    // tinted background, a glow in the action's color.
    &.card-drop.drag-over {
      background-color: rgba(96, 74, 12, 0.95);
      border-color: #ffc107;
      border-style: solid;
      box-shadow: 0 -8px 28px rgba(255, 193, 7, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    &.remove-drop.drag-over {
      background-color: rgba(96, 22, 28, 0.95);
      border-color: #dc3545;
      border-style: solid;
      box-shadow: 0 -8px 28px rgba(220, 53, 69, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .drop-zone-icon {
      font-size: 20px;
      line-height: 1;
      // Font Awesome renders an SVG (fill: currentColor), so shadow it
      // with a filter — text-shadow wouldn't apply.
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
    }

    .drop-zone-text {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.4px;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }

    &.drag-over .drop-zone-text,
    &.drag-over .drop-zone-icon {
      color: #ffffff;
    }
  }

  @keyframes dropZoneRise {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .card-preview {
    position: fixed;
    // Position will be set dynamically by JavaScript
    z-index: 2100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;

    &.visible {
      opacity: 1;
    }

    .card-preview-image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 15px;
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15);
      border: none;
      position: relative;
      
      // Add a subtle glow effect
      &::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
          rgba(255, 255, 255, 0.1), 
          rgba(255, 255, 255, 0.05), 
          rgba(255, 255, 255, 0.1)
        );
        border-radius: 17px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
    }

    &.visible .card-preview-image::before {
      opacity: 1;
    }
  }

  .deck-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    
    .deck-search-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    .deck-search-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 800px;
      max-height: 80%;
      background-color: #2c313c;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      
      .deck-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #666;
        
        h3 {
          color: white;
          margin: 0;
          font-size: 18px;
        }
        
        .deck-search-close {
          background: none;
          border: none;
          color: white;
          font-size: 24px;
          cursor: pointer;
          padding: 0;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          transition: background-color 0.2s ease;
          
          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }
      
      .deck-search-cards {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
        
        .search-card {
          width: 120px;
          height: 168px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          
          &:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }

  // Zone (graveyard/exile) browse modal — same layout as the deck search.
  // Kept at the deck-search modal's z-index (2000) so the shared card
  // preview (2100) floats above it on hover, like it does over deck search.
  .zone-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;

    .zone-search-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      cursor: pointer;
    }

    .zone-search-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 800px;
      max-height: 80%;
      background-color: #2c313c;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;

      .zone-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #666;

        h3 {
          color: white;
          margin: 0;
          font-size: 18px;
        }

        .zone-search-close {
          background: none;
          border: none;
          color: white;
          font-size: 24px;
          cursor: pointer;
          padding: 0;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          transition: background-color 0.2s ease;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }

      .zone-search-cards {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;

        .search-card {
          width: 120px;
          height: 168px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

          &:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
          }

          // Own-pile cards can be pulled out; hint it with a grab cursor.
          &.zone-retrievable {
            cursor: grab;
          }
        }
      }
    }
  }

  // Token search modal (reuses deck search styles)
  .token-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;

    .token-search-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      cursor: pointer;
    }

    .token-search-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 800px;
      height: 80%;
      background: #333;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

      .token-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #666;

        h3 {
          margin: 0;
          color: white;
          font-size: 24px;
        }

        .token-search-close {
          background: none;
          border: none;
          color: white;
          font-size: 24px;
          cursor: pointer;
          padding: 0;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          transition: background-color 0.2s ease;

          &:hover {
            background-color: rgba(255, 255, 255, 0.1);
          }
        }
      }

      .token-search-cards {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;

        .search-card {
          width: 120px;
          height: 168px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

          &:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
          }
        }

        // The always-first "invent a token" tile (not a .search-card, so
        // the text filter leaves it in place).
        .custom-token-card {
          width: 120px;
          height: 168px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border: 2px dashed #6c7a89;
          border-radius: 8px;
          background: linear-gradient(135deg, #2c3e50, #34495e);
          color: #dfe6ec;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

          i { font-size: 30px; }
          span { font-size: 14px; font-weight: 600; }

          &:hover {
            transform: scale(1.05);
            border-color: #9bb2c4;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
          }
        }
      }
    }
  }

  // Token search header: room for the "Custom" builder shortcut next to close
  .token-search-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .custom-token-open {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #444;
    border: 1px solid #666;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    transition: background-color 0.2s ease;

    &:hover {
      background: #555;
    }
  }

  // Custom token builder modal (sits above the token search modal)
  .custom-token-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;

    .custom-token-overlay-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      cursor: pointer;
    }

    .custom-token-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 480px;
      background: #333;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
    }

    .custom-token-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #666;

      h3 {
        margin: 0;
        color: white;
        font-size: 20px;
      }

      .custom-token-close {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .custom-token-body {
      display: flex;
      gap: 18px;
      padding: 20px;
    }

    .custom-token-preview {
      flex: 0 0 130px;
      width: 130px;
      height: 182px;
      background-color: #222;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .custom-token-fields {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;

      label {
        color: #ccc;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      input {
        background: #222;
        border: 1px solid #666;
        border-radius: 6px;
        color: white;
        padding: 7px 9px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
      }

      .custom-token-emblem-toggle {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        color: #ccc;
        font-size: 13px;
        cursor: pointer;

        input {
          width: auto;
          margin: 0;
          padding: 0;
          background: none;
          border: none;
          cursor: pointer;
          accent-color: #2d7d46;
          flex: 0 0 auto;
          transform: scale(1.2);
        }
      }

      .custom-token-pt-row {
        display: flex;
        gap: 10px;

        label {
          flex: 1;
        }
      }

      .custom-token-art-row {
        display: flex;
        align-items: center;
        gap: 8px;

        .custom-token-art-source {
          flex: 1;
          color: #9aa5ad;
          font-size: 11px;
          min-height: 14px;
        }

        .custom-token-reroll {
          background: #444;
          border: 1px solid #666;
          border-radius: 6px;
          color: white;
          cursor: pointer;
          padding: 6px 12px;
          transition: background-color 0.2s ease;

          &:hover {
            background: #555;
          }
        }
      }

      .custom-token-name-hint {
        color: #7c8894;
        font-size: 10px;
        font-weight: 400;
      }

      .custom-token-create {
        margin-top: 4px;
        background: #2d7d46;
        border: none;
        border-radius: 6px;
        color: white;
        font-size: 15px;
        font-weight: 600;
        padding: 11px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
          background: #369a55;
        }
      }
    }

    // Emblem mode: no power/toughness, and the real emblem card art is
    // self-describing so the name banner / P-T badge overlay is hidden.
    &.emblem-mode {
      .custom-token-pt-row {
        display: none;
      }

      .custom-token-overlay {
        display: none;
      }
    }
  }

  // Name banner / power-toughness badge overlaid on a custom token, shared
  // by the builder preview and the actual token on the battlefield.
  .custom-token-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .custom-token-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 3px 4px;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    word-break: break-word;
  }

  .custom-token-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 22px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  }

  .card {
    position: absolute;
    background-color: #444;
    background-image: url("../Magic_card_back.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 2px;
    transition: transform 0.5s ease, opacity 0.5s ease;
    cursor: pointer;
    box-shadow: 0 0 0 0 #778899;
    user-select: none;
    -webkit-user-select: none;
    // Card gestures belong to the drag/tap handlers, never to the
    // browser's scroll/zoom (which made touch drags stutter)
    touch-action: none;
    z-index: 99;

    &.played {
      z-index: 99;
    }

    &.tapped {
      transform: rotate(90deg);

      &.is-opposite {
        transform: rotate(270deg);
      }
    }

    &.is-opposite {
      transform: rotate(180deg);
    }
  }

  ////////////////////////////////////////////
  ////////////////////////////////////////////
  ////////////////////////////////////////////
  ////////////////////////////////////////////

  .chat-wrapper {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: rgba(44, 49, 60, 0.95);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
    
    &[style*="display: block"] {
      display: flex !important;
    }

    .chat-header {
      padding: 16px 20px;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      color: white;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .chat-close {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        
        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .chat-status {
      padding: 12px 20px;
      background: rgba(34, 197, 94, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: #22c55e;
      font-size: 14px;
      font-weight: 500;
      
      .status {
        padding: 0;
      }
      
      .connect {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        margin-left: 8px;
        transition: all 0.2s ease;
        
        &:hover {
          background: linear-gradient(135deg, #16a34a, #15803d);
          transform: translateY(-1px);
        }
      }
    }

    .log {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
      background: transparent;
      border: none;
      margin: 0;
      
      .msg {
        margin: 0 0 8px 0;
        padding: 8px 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        color: #e2e8f0;
        font-size: 14px;
        line-height: 1.4;
        border-left: 3px solid rgba(99, 102, 241, 0.3);
        
        &.msg--status {
          background: rgba(255, 193, 7, 0.1);
          border-left-color: #ffc107;
          color: #ffc107;
        }
      }
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        
        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }

    .chatform {
      padding: 16px 20px;
      background: rgba(255, 255, 255, 0.05);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      gap: 8px;
      align-items: center;
      
      .text {
        flex: 1;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 14px;
        outline: none;
        transition: all 0.2s ease;
        width: auto;
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
        
        &:focus {
          background: rgba(255, 255, 255, 0.15);
          border-color: #6366f1;
          box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
      }
      
      .send {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          background: linear-gradient(135deg, #4f46e5, #3730a3);
          transform: translateY(-1px);
        }
        
        &:active {
          transform: translateY(0);
        }
      }
    }
    
    // Responsive design
    @media (max-width: 768px) {
      width: 300px;
      height: 400px;
      top: 10px;
      right: 10px;
    }
    
    @media (max-width: 480px) {
      width: calc(100vw - 20px);
      height: 350px;
      top: 10px;
      right: 10px;
      left: 10px;
    }
  }
}

// ===== GAME MENU SUB-MENUS =====
.game-menu {
  // Submenu toggle buttons
  .submenu-toggle {
    position: relative;
    
    .submenu-chevron {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.8em;
      transition: transform 0.3s ease;
    }
    
    &.expanded .submenu-chevron {
      transform: translateY(-50%) rotate(90deg);
    }
    
    // Make room for the chevron
    .menu-item {
      padding-right: 20px;
    }
  }
  
  // Submenu items container
  .submenu-items {
    background: rgba(15, 15, 15, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    
    &.expanded {
      max-height: 300px;
      padding: 4px 0;
      opacity: 1;
    }
    
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: none;
    }
    
    // Show submenu items when parent has expanded class
    &.expanded li {
      display: block;
      
      // Force submenu items to be visible when expanded, but respect game state visibility
      .submenu-item:not([style*="display: none"]) {
        display: block !important;
      }
      
      // For items that should be shown in expanded state regardless of inline style
      .search-button.submenu-item,
      .dice-button.submenu-item,
      .token-button.submenu-item,
      .marker-button.submenu-item,
      .restart-game-button.submenu-item {
        display: block !important;
      }
    }
    
    .submenu-item {
      padding: 8px 20px 8px 35px; // Extra left padding for indentation
      font-size: 0.95em;
      background: transparent;
      border-left: 2px solid transparent;
      
      &:hover {
        color: #000;
        background: #fff;
        border-left-color: rgba(255, 255, 255, 0.3);
        
        i, .menu-item {
          color: #000;
        }
      }
      
      i {
        width: 14px;
        margin-right: 8px;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.7);
      }
      
      .menu-item {
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  }
  
  // Mobile responsiveness for submenus
  @media (max-width: 768px) {
    .submenu-toggle .submenu-chevron {
      right: 4px;
      font-size: 0.7em;
    }
    
    .submenu-items {
      .submenu-item {
        padding: 6px 15px 6px 25px;
        font-size: 0.85em;
        
        i {
          width: 12px;
          margin-right: 6px;
          font-size: 0.8em;
        }
        
        .menu-item {
          font-size: 0.8em;
        }
      }
    }
  }
}

// Ready State Animations
.player-ready {
  .player-board {
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.7);
  }
}

.ready-animation {
  animation: readyPulse 2s ease-in-out;
}

@keyframes readyPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 40px rgba(0, 255, 0, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  }
}

@keyframes sparkleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.8);
  }
}

.opponent-ready {
  .opponent-board {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
  }
}

.opponent-ready-animation {
  animation: opponentReadyPulse 2s ease-in-out;
}

@keyframes opponentReadyPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }
}

@keyframes opponentSparkleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-15px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.7);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

// Player names inside action notifications (getPlayerNameHtml in
// board/ui.js): the name is tinted with the player's light color inline;
// the dark chip underneath keeps that tint readable over every
// notification background color.
.action-notification .player-name-tag {
  background: rgba(0, 0, 0, 0.45);
  padding: 0 5px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.4;
}

// One-shot "share this game link" notification shown to the host right
// after creating a game (board/ui.js showShareLinkNotification). Closable
// and persistent, unlike the transient .action-notification toasts.
.share-link-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2100;
  // Escaped: Less 4's built-in min() would collapse this to 480px.
  max-width: ~"min(480px, calc(100vw - 40px))";
  padding: 16px 18px 16px 18px;
  background: rgba(30, 41, 59, 0.97);
  color: #fff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  animation: slideInRight 0.4s ease-out;

  .share-link-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.7);
    font-size: 15px;
    cursor: pointer;
    border-radius: 5px;

    &:hover {
      color: #fff;
      background: rgba(148, 163, 184, 0.25);
    }
  }

  .share-link-message {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-right: 22px;
    margin-bottom: 10px;
  }

  // Icon + URL on a single line: the icon keeps its size, the URL text
  // ellipsizes instead of wrapping (the click copies the full URL anyway).
  .share-link-url {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #7dd3fc;
    text-decoration: none;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 6px;
    cursor: pointer;

    &:hover {
      background: rgba(15, 23, 42, 0.95);
      border-color: rgba(125, 211, 252, 0.6);
    }

    i,
    svg {
      flex: 0 0 auto;
      margin-right: 7px;
      opacity: 0.85;
    }

    .share-link-url-text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .share-link-copied {
    display: none;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;

    i {
      margin-right: 4px;
    }
  }
}

// Token Styling
.token-element {
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  
  &.tapped {
    transform: rotate(90deg);
  }
}

// Opponent Token Styling
.token-element.opponent-token {
  transform: rotate(180deg);
  
  &.tapped {
    transform: rotate(180deg) rotate(90deg);
  }
}

// Opponent Card Preview Styling
.card-preview.opponent-preview {
  // Restore fixed positioning for opponent previews
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid rgba(255, 193, 7, 0.8);
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
  cursor: pointer; // Indicate it's clickable
  
  &::before {
    content: attr(data-preview-player);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 193, 7, 0.9);
    color: #333;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 1001;
  }
  
  // Player-specific colors
  &.opponent-preview-player-blue {
    border-color: rgba(49, 130, 206, 0.8);
    box-shadow: 0 0 20px rgba(49, 130, 206, 0.6);
    &::before { background: rgba(49, 130, 206, 0.9); color: white; }
  }
  
  &.opponent-preview-player-orange {
    border-color: rgba(221, 107, 32, 0.8);
    box-shadow: 0 0 20px rgba(221, 107, 32, 0.6);
    &::before { background: rgba(221, 107, 32, 0.9); color: white; }
  }
  
  &.opponent-preview-player-green {
    border-color: rgba(56, 161, 105, 0.8);
    box-shadow: 0 0 20px rgba(56, 161, 105, 0.6);
    &::before { background: rgba(56, 161, 105, 0.9); color: white; }
  }
  
  &.opponent-preview-player-yellow {
    border-color: rgba(214, 158, 46, 0.8);
    box-shadow: 0 0 20px rgba(214, 158, 46, 0.6);
    &::before { background: rgba(214, 158, 46, 0.9); color: #333; }
  }
  
  &.opponent-preview-player-red {
    border-color: rgba(229, 62, 62, 0.8);
    box-shadow: 0 0 20px rgba(229, 62, 62, 0.6);
    &::before { background: rgba(229, 62, 62, 0.9); color: white; }
  }
  
  &.opponent-preview-player-purple {
    border-color: rgba(128, 90, 213, 0.8);
    box-shadow: 0 0 20px rgba(128, 90, 213, 0.6);
    &::before { background: rgba(128, 90, 213, 0.9); color: white; }
  }
  
  &.opponent-preview-player-teal {
    border-color: rgba(49, 151, 149, 0.8);
    box-shadow: 0 0 20px rgba(49, 151, 149, 0.6);
    &::before { background: rgba(49, 151, 149, 0.9); color: white; }
  }
  
  &.opponent-preview-player-pink {
    border-color: rgba(233, 30, 99, 0.8);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.6);
    &::before { background: rgba(233, 30, 99, 0.9); color: white; }
  }
}

// Old opponent hover highlighting - removed to avoid conflicts with player-specific colors

// Disconnect Warning Overlay
.disconnect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
  
  .disconnect-modal {
    background: rgba(44, 49, 60, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    animation: slideIn 0.3s ease-out;
    
    .disconnect-icon {
      font-size: 48px;
      margin-bottom: 16px;
      animation: pulse 2s infinite;
    }
    
    .disconnect-title {
      color: #ef4444;
      font-size: 24px;
      font-weight: 600;
      margin: 0 0 16px 0;
    }
    
    .disconnect-message {
      color: #e2e8f0;
      font-size: 16px;
      line-height: 1.5;
      margin: 0 0 24px 0;
    }
    
    .disconnect-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      
      .retry-connection-btn {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
        
        &:hover {
          background: linear-gradient(135deg, #dc2626, #b91c1c);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
        }
        
        &:active {
          transform: translateY(0);
        }
        
        .btn-icon {
          font-size: 18px;
          animation: spin 1s linear infinite;
        }
        
        &:not(:hover) .btn-icon {
          animation: none;
        }
      }
      
      .waiting-indicator {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fbbf24;
        font-size: 16px;
        font-weight: 500;
        
        .spinner {
          width: 20px;
          height: 20px;
          border: 2px solid rgba(251, 191, 36, 0.3);
          border-top: 2px solid #fbbf24;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
      }
    }
  }
  
  @media (max-width: 480px) {
    .disconnect-modal {
      padding: 24px;
      margin: 20px;
      
      .disconnect-title {
        font-size: 20px;
      }
      
      .disconnect-message {
        font-size: 14px;
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

// Game frozen state styling
.game-frozen {
  .card {
    opacity: 0.5;
    cursor: not-allowed !important;
  }
  
  .control-btn:not(.retry-connection-btn):not(.chat-close) {
    opacity: 0.5;
    cursor: not-allowed !important;
  }
  
  .player-board,
  .battlefield-wrapper {
    position: relative;
    
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      pointer-events: none;
      z-index: 100;
    }
  }
}

.play-start-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  // Let the modal scroll when it's taller than the viewport (short
  // phones, EDHREC commander preview shown). margin:auto on the child
  // keeps it centred when it fits and lets it scroll from the top when
  // it doesn't — plain align-items:center would clip the top and block
  // scrolling.
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;

  .play-container {
    margin: auto;
    width: 100%;
    min-width: 0;
    max-width: 440px;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    border-radius: 8px;
    background-color: #21252f;
    box-shadow: 0 4px 9.1px #474747;

    .deck-selection {
      margin-bottom: 1.5em;

      .message {
        margin-bottom: 0.5em;
        font-size: 16px;
      }

      .deck-selector {
        width: 100%;
        padding: 8px 12px;
        font-size: 14px;
        border: 1px solid #666;
        border-radius: 4px;
        background-color: #2c313c;
        color: white;
        
        &:focus {
          outline: none;
          border-color: #9e9e9e;
          background-color: #363c47;
        }

        option {
          background-color: #2c313c;
          color: white;
        }
      }

      .deck-or {
        display: flex;
        align-items: center;
        text-align: center;
        color: #8b90a0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0.9em 0;

        &::before,
        &::after {
          content: "";
          flex: 1;
          border-bottom: 1px solid #3a4150;
        }

        span {
          padding: 0 10px;
        }
      }

      .edhrec-surprise-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 11px 16px;
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        border: none;
        border-radius: 6px;
        background: linear-gradient(135deg, #6b7280, #4b5563);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;

        .fa-dice {
          font-size: 16px;
        }

        &:hover {
          background: linear-gradient(135deg, #4b5563, #374151);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        }

        &:active {
          transform: translateY(1px);
        }

        &:disabled {
          opacity: 0.65;
          cursor: default;
          box-shadow: none;
        }
      }

      .edhrec-chosen {
        margin-top: 0.7em;
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #d5d9e2;
        text-align: center;

        .edhrec-chosen-label {
          font-weight: 600;
        }

        .fa-crown {
          color: #f5c451;
          margin-right: 4px;
        }

        .edhrec-commander-img {
          display: block;
          width: 90%;
          max-width: 300px;
          margin: 12px auto 2px;
          border-radius: 4.75% / 3.5%;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
        }

        &.error {
          background: rgba(229, 79, 79, 0.14);
          border-color: rgba(229, 79, 79, 0.4);
          color: #ffc7c7;
        }
      }
    }

    .message {
      margin-bottom: 1em;
      font-size: 16px;

      &.room {
        margin-bottom: 0.5em;
      }
    }

    .buttons {
      display: flex;
      justify-content: space-between;

      .button {
        padding: 10px 20px;
        font-size: 14px;
        cursor: pointer;
        border: none;
        border-radius: 4px;

        &.clicked {
          background-color: #9e9e9e;
        }
      }

      &.initial {
        margin-bottom: 1em;
      }

      &.start-box {
        justify-content: end;
      }

      .start {
        margin-top: 1em;
      }
    }

    .create-info {
      .room-id {
        color: #575757;
        background-color: #ffffff;
        border: 2.2px solid #666666;
        margin: auto;
        text-align: center;
        width: fit-content;
        padding: 0.3em 1em;
      }
    }

    // Tighten the modal on phones: smaller padding and buttons so nothing
    // feels oversized and the whole thing fits without needing to scroll.
    @media (max-width: 480px) {
      padding: 16px;

      .message {
        font-size: 14px;
      }

      .deck-selection .edhrec-surprise-btn {
        padding: 9px 12px;
        font-size: 12.5px;
        gap: 8px;

        .fa-dice {
          font-size: 14px;
        }
      }

      .buttons .button {
        padding: 8px 14px;
        font-size: 13px;
      }
    }
  }
}

// Solo board game controls styling
.board-solo-wrapper {
  .game-controls {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    
    .controls-toggle-area {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
      
      .controls-toggle {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        backdrop-filter: blur(10px);
        
        .toggle-icon {
          font-size: 18px;
          color: white;
          transition: transform 0.3s ease;
        }
        
        &:hover {
          background: linear-gradient(135deg, #4f46e5, #3730a3);
          box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
          transform: translateY(-2px);
        }
        
        &.collapsed .toggle-icon {
          transform: rotate(180deg);
        }
      }
    }
    
    .controls-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
      opacity: 1;
      width: 180px;
      max-height: 500px;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(0);
      
      &.collapsed {
        opacity: 0;
        width: 0;
        transform: translateX(-20px);
        pointer-events: none;
      }
    }
    
    .control-group {
      background-color: rgba(44, 49, 60, 0.95);
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      
      .group-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
        text-align: center;
      }
      
      .control-btn {
        width: 100%;
        height: 36px;
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 6px;
        position: relative;
        overflow: hidden;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        // Primary buttons (Start/Mulligan)
        &.primary {
          background: linear-gradient(135deg, #4ade80, #22c55e);
          color: white;
          box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
          }
        }
        
        // Action buttons (deck operations)
        &.action {
          background: linear-gradient(135deg, #3b82f6, #2563eb);
          color: white;
          box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
          }
        }
        
        // Secondary buttons (chat, system)
        &.secondary {
          background: linear-gradient(135deg, #6b7280, #4b5563);
          color: white;
          box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #4b5563, #374151);
            box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
          }
        }
        
        // Debug buttons
        &.debug {
          background: linear-gradient(135deg, #dc2626, #b91c1c);
          color: white;
          box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #b91c1c, #991b1b);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
          }
        }
        
        .btn-icon {
          font-size: 14px;
          line-height: 1;
        }
        
        .btn-text {
          font-weight: 600;
        }
        
        // Action buttons (deck operations)
        &.action {
          background: linear-gradient(135deg, #3b82f6, #2563eb);
          color: white;
          box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
          }
          
          &:active {
            transform: translateY(0);
          }
        }
        
        // Secondary buttons (chat, system)
        &.secondary {
          background: linear-gradient(135deg, #6b7280, #4b5563);
          color: white;
          box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3);
          
          &:hover {
            background: linear-gradient(135deg, #4b5563, #374151);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
          }
          
          &:active {
            transform: translateY(0);
          }
        }
        
        // Ripple effect
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.3);
          transition: width 0.3s ease, height 0.3s ease;
          transform: translate(-50%, -50%);
          z-index: 0;
        }
        
        &:active::before {
          width: 100%;
          height: 100%;
        }
        
        // Ensure text stays above ripple
        .btn-icon,
        .btn-text {
          position: relative;
          z-index: 1;
        }
      }
    }
    
    // Responsive design for solo mode
    @media (max-width: 768px) {
      position: fixed;
      right: 10px;
      top: 10px;
      min-width: 160px;
      
      .control-group {
        padding: 10px;
        
        .control-btn {
          height: 32px;
          font-size: 12px;
          
          .btn-icon {
            font-size: 12px;
          }
        }
      }
    }
    
    @media (max-width: 480px) {
      min-width: 140px;
      gap: 12px;
      
      .control-group {
        padding: 8px;
        
        .group-label {
          font-size: 10px;
          margin-bottom: 6px;
        }
        
        .control-btn {
          height: 30px;
          font-size: 11px;
          gap: 6px;
          margin-bottom: 4px;
          
          .btn-icon {
            font-size: 11px;
          }
        }
      }
    }
  }
  
  // The solo board's .deck-display is a direct child of this wrapper
  // (templates/board.html) — the .multi-wrapper .board-wrapper rule can
  // never match it, so the shared stack must be instantiated here too.
  .deck-display-stack();

  .deck-drop-zone, .deck-bottom-drop-zone {
    position: absolute;
    right: 20px;
    width: 140px;
    height: 60px;
    background-color: rgba(106, 90, 205, 0.8);
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    display: none;
    z-index: 15;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    
    &.active {
      display: flex;
    }
    
    &.drag-over {
      background-color: rgba(50, 205, 50, 0.9);
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 6px 16px rgba(50, 205, 50, 0.4);
      animation: pulse 1.5s infinite;
    }

    .drop-zone-text {
      color: white;
      font-size: 11px;
      font-weight: bold;
      text-align: center;
      pointer-events: none;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }
  }
  
  .deck-drop-zone {
    bottom: 180px;
  }
  
  .deck-bottom-drop-zone {
    bottom: 15px;
  }

  // ===== LIFE COUNTER SYSTEM =====
  .life-counters-container {
    position: absolute;
    z-index: 100;
    display: flex;
    gap: 15px;
    padding: 10px;
    
    // 1-2 player positioning: each counter is absolutely pinned to the
    // top-right of its own board zone. The container overlays the whole
    // battlefield; its vertical centre is the divider between the two halves.
    &.life-position-two-player {
      display: block;
      inset: 0;
      // The container now overlays the whole battlefield only to act as a
      // positioning context; it must not steal card drags underneath it.
      pointer-events: none;

      .life-counter {
        position: absolute;
        right: 16px;
        pointer-events: auto;
      }

      // Opponent's counter: top-right of the upper half
      .life-counter-opponent {
        top: 8px;
      }

      // Current player's counter: top-right of the lower half
      .life-counter-self {
        top: calc(50% + 8px);
      }

      // Solo (no opponent): the whole battlefield is the player's zone
      &.solo .life-counter-self {
        top: 8px;
      }
    }
    
    // Multi-player positioning (center of screen)
    &.life-position-multi-player {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      
      // 3 players: 2x2 grid with empty position - ULTRA COMPACT
      &.three-player {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        width: 170px;
        height: 100px;
      }
      
      // 4 players: 2x2 grid - ULTRA COMPACT
      &.four-player {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        width: 170px;
        height: 100px;
      }
      
      .life-counter {
        min-width: 70px;
        width: 70px;
        height: 40px;
        margin: 0;
        padding: 2px 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
      }
      
      // Same ultra compact size for both 3 and 4 players
      &.three-player .life-counter,
      &.four-player .life-counter {
        min-width: 70px;
        width: 70px;
        height: 40px;
        padding: 2px 4px;
      }
    }
  }

  .life-counter {
    // Subtle glass panel so the counter stays readable over any board
    // background image
    background: rgba(10, 13, 17, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 120px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      z-index: 200; /* Allow overlap on hover but stay below dice/markers */
      position: relative;
    }
  }

  .life-counter-header {
    margin-bottom: 6px;

    .player-name {
      font-size: 11px;
      font-weight: bold;
      // Fallback only: createLifeCounterElement tints each name inline
      // with that player's color
      color: rgba(200, 200, 200, 0.9);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }

  .life-counter-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .life-btn {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.9), rgba(40, 40, 40, 0.9));
    border: 1px solid rgba(120, 120, 120, 0.6);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    font-size: 14px;
    font-weight: bold;
    
    &:hover {
      background: linear-gradient(135deg, rgba(80, 80, 80, 0.9), rgba(60, 60, 60, 0.9));
      border-color: rgba(150, 150, 150, 0.8);
      transform: scale(1.1);
    }
    
    &:active {
      transform: scale(0.95);
    }
    
    &.life-decrease {
      border-color: rgba(244, 67, 54, 0.6);
      
      &:hover {
        background: linear-gradient(135deg, rgba(244, 67, 54, 0.3), rgba(200, 50, 40, 0.3));
        border-color: rgba(244, 67, 54, 0.8);
        box-shadow: 0 0 8px rgba(244, 67, 54, 0.4);
      }
    }
    
    &.life-increase {
      border-color: rgba(76, 175, 80, 0.6);
      
      &:hover {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(60, 140, 65, 0.3));
        border-color: rgba(76, 175, 80, 0.8);
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
      }
    }
  }

  .life-total {
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    min-width: 25px;
    padding: 0px 2px;
    background: transparent;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
  }
  
  .life-counter:hover .life-total {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .life-counter-header {
    margin-bottom: 1px;

    .player-name {
      font-size: 7px;
      font-weight: bold;
      // Fallback only: createLifeCounterElement tints each name inline
      // with that player's color
      color: rgba(160, 160, 160, 0.8);
      text-transform: uppercase;
      letter-spacing: 0.2px;
      transition: all 0.3s ease;
    }
  }
}

// Dice System
.dice-button {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  border: 1px solid #68d391;
  border-radius: 8px;
  padding: 8px 12px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;

  &:hover {
    background: linear-gradient(135deg, #68d391, #48bb78);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(104, 211, 145, 0.4);
  }

  &:active {
    transform: scale(0.95);
  }
}

.dice {
  position: absolute;
  cursor: grab;
  perspective: 1000px;
  z-index: 10000;
  user-select: none;
  touch-action: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  
  &.rolling {
    pointer-events: none;
    
    .dice-cube {
      animation: diceRoll 1s ease-out;
    }
  }
  
  &.dragging {
    cursor: grabbing;
    z-index: 1001;
  }
  
  &.entering {
    animation: diceEnter 0.8s ease-out;
  }
}

@keyframes diceEnter {
  0% {
    transform: translateX(-200px) scale(0.5) rotate(180deg);
    opacity: 0;
  }
  60% {
    transform: translateX(20px) scale(1.1) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes diceRoll {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  20% {
    transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg) scale(1.1);
  }
  40% {
    transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg) scale(0.9);
  }
  60% {
    transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg) scale(1.1);
  }
  80% {
    transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg) scale(0.95);
  }
  100% {
    transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg) scale(1);
  }
}

.dice-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
}

.dice-face {
  position: absolute;
  border: none !important;
  outline: none !important;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  background: linear-gradient(135deg, #f7f7f7, #e2e2e2);
  margin: 0;
  padding: 0;
  
  // Note: translateZ will be set dynamically by JavaScript
  &.front  { transform: rotateY(0deg); }
  &.back   { transform: rotateY(180deg); }
  &.right  { transform: rotateY(90deg); }
  &.left   { transform: rotateY(-90deg); }
  &.top    { transform: rotateX(90deg); }
  &.bottom { transform: rotateX(-90deg); }
}

// Dice dots for each face
.dice-face {
  .dot {
    background: #333;
    border-radius: 50%;
    position: absolute;
  }
  
  // Face 1 - center dot
  &[data-value="1"] {
    .dot:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  }
  
  // Face 2 - diagonal dots
  &[data-value="2"] {
    .dot:nth-child(1) { top: 20%; left: 20%; }
    .dot:nth-child(2) { bottom: 20%; right: 20%; }
  }
  
  // Face 3 - diagonal dots
  &[data-value="3"] {
    .dot:nth-child(1) { top: 20%; left: 20%; }
    .dot:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .dot:nth-child(3) { bottom: 20%; right: 20%; }
  }
  
  // Face 4 - four corners
  &[data-value="4"] {
    .dot:nth-child(1) { top: 20%; left: 20%; }
    .dot:nth-child(2) { top: 20%; right: 20%; }
    .dot:nth-child(3) { bottom: 20%; left: 20%; }
    .dot:nth-child(4) { bottom: 20%; right: 20%; }
  }
  
  // Face 5 - four corners + center
  &[data-value="5"] {
    .dot:nth-child(1) { top: 20%; left: 20%; }
    .dot:nth-child(2) { top: 20%; right: 20%; }
    .dot:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .dot:nth-child(4) { bottom: 20%; left: 20%; }
    .dot:nth-child(5) { bottom: 20%; right: 20%; }
  }
  
  // Face 6 - six dots in two columns
  &[data-value="6"] {
    .dot:nth-child(1) { top: 20%; left: 30%; }
    .dot:nth-child(2) { top: 20%; right: 30%; }
    .dot:nth-child(3) { top: 50%; left: 30%; transform: translateY(-50%); }
    .dot:nth-child(4) { top: 50%; right: 30%; transform: translateY(-50%); }
    .dot:nth-child(5) { bottom: 20%; left: 30%; }
    .dot:nth-child(6) { bottom: 20%; right: 30%; }
  }
}

// Player-specific colors for dice
.dice {
  &.player-blue .dice-face { 
    background: linear-gradient(135deg, #3182ce, #2c5aa0); 
    
    .dot { background: white; }
  }
  &.player-orange .dice-face { 
    background: linear-gradient(135deg, #dd6b20, #c05621); 
    
    .dot { background: white; }
  }
  &.player-green .dice-face { 
    background: linear-gradient(135deg, #38a169, #2f855a); 
    
    .dot { background: white; }
  }
  &.player-yellow .dice-face { 
    background: linear-gradient(135deg, #d69e2e, #b7791f); 
    
    .dot { background: white; }
  }
  &.player-red .dice-face { 
    background: linear-gradient(135deg, #e53e3e, #c53030); 
    
    .dot { background: white; }
  }
  &.player-purple .dice-face { 
    background: linear-gradient(135deg, #805ad5, #6b46c1); 
    
    .dot { background: white; }
  }
  &.player-teal .dice-face { 
    background: linear-gradient(135deg, #319795, #2c7a7b); 
    
    .dot { background: white; }
  }
  &.player-pink .dice-face { 
    background: linear-gradient(135deg, #d53f8c, #b83280); 
    
    .dot { background: white; }
  }
}

// Dice number styling for d12 and d20
.dice-number {
  font-size: 24px; // Fixed size instead of relative
  font-weight: bold;
  display: block;
  text-align: center;
  color: white;
}

// Different dice type styling
.dice.d20 {
  .dice-number {
    font-size: 24px; // Keep numbers big and consistent
    color: white; // Match the dot color
  }
}

// Dice minus button for hover
.dice-minus-button {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #ff4444;
  border: 1px solid #cc2222;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.2s ease;
  
  &:hover {
    background: #ff6666;
    transform: scale(1.1);
  }
  
  &:active {
    transform: scale(0.9);
  }
}

// Show minus button on hover for all dice by default
.dice:hover .dice-minus-button {
  display: flex;
}

// Hide minus button on opponent dice only
.opponent-board .dice .dice-minus-button {
  display: none !important;
}

// Dice animation states
.dice {
  &.incrementing {
    .dice-cube {
      animation: diceIncrement 0.3s ease-out;
    }
  }
  
  &.resetting {
    .dice-cube {
      animation: diceReset 0.5s ease-in-out;
    }
  }
}

// Dice animations
@keyframes diceIncrement {
  0% { transform: scale(1) rotateY(0deg); }
  50% { transform: scale(1.1) rotateY(180deg); }
  100% { transform: scale(1) rotateY(360deg); }
}

@keyframes diceReset {
  0% { transform: scale(1) rotateX(0deg) rotateY(0deg); }
  25% { transform: scale(0.8) rotateX(90deg) rotateY(90deg); }
  50% { transform: scale(1.2) rotateX(180deg) rotateY(180deg); }
  75% { transform: scale(0.9) rotateX(270deg) rotateY(270deg); }
  100% { transform: scale(1) rotateX(360deg) rotateY(360deg); }
}

// ============================
// RANDOM DICE ROLL (transient)
// ============================

// Picker overlay: choose which die to roll.
.dice-roll-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.15s ease-out;

  &.visible {
    opacity: 1;
  }
}

.dice-roll-picker {
  background: linear-gradient(145deg, #2d3748, #1a202c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  color: #fff;
  max-width: 90vw;

  .dice-roll-picker-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
  }

  .dice-roll-picker-options {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .dice-roll-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 66px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;

    i {
      font-size: 26px;
    }

    span {
      font-size: 13px;
      font-weight: 600;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.14);
      transform: translateY(-2px);
    }
  }

  .dice-roll-custom-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;

    .dice-roll-custom-input {
      flex: 1;
      min-width: 0;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 15px;
    }

    .dice-roll-custom-go {
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      background: #dd6b20;
      color: #fff;
      font-weight: 700;
      cursor: pointer;

      &:hover {
        background: #c05621;
      }
    }
  }
}

// The rolling die itself, centered on the battlefield.
.dice-roll-animated {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  z-index: 55000;
  pointer-events: none;
  border-radius: 16px;
  border: 3px solid #dd6b20;
  background: linear-gradient(145deg, #ffffff, #e2e8f0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(221, 107, 32, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: diceRollPop 0.3s ease-out;

  .dice-roll-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
  }

  .dice-roll-value {
    font-size: 42px;
    font-weight: 800;
    color: #1a202c;
  }

  .dice-roll-sides {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  &.rolling {
    animation: diceRollShake 0.28s ease-in-out infinite;
  }

  &.settled {
    animation: diceRollSettle 0.4s ease-out;
  }

  &.leaving {
    opacity: 0;
    transform: scale(0.6) translateY(-16px);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
  }
}

@keyframes diceRollPop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes diceRollShake {
  0% { transform: rotate(-8deg) scale(1.02); }
  25% { transform: rotate(6deg) scale(0.98); }
  50% { transform: rotate(-5deg) scale(1.04); }
  75% { transform: rotate(7deg) scale(0.99); }
  100% { transform: rotate(-8deg) scale(1.02); }
}

@keyframes diceRollSettle {
  0% { transform: scale(1.25); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

// ============================
// MARKER SYSTEM STYLING
// ============================

// Marker selection modal
.marker-selection-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-selection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.marker-selection-content {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  padding: 0;
  min-width: 500px;
  max-width: 80vw;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  z-index: 10001;
}

.marker-selection-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  h3 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
  }
}

.marker-selection-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
}

// Custom marker builder modal (sits above the marker picker)
.custom-marker-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10002;

  .custom-marker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }

  .custom-marker-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: #333;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
  }

  .custom-marker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #666;

    h3 {
      margin: 0;
      color: white;
      font-size: 18px;

      i {
        margin-right: 8px;
        color: #9bb2c4;
      }
    }

    .custom-marker-close {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }

  .custom-marker-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
  }

  .custom-marker-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;

    .custom-marker-preview-chip {
      width: 40px;
      height: 40px;
      font-size: 19px;
    }

    .custom-marker-name-input {
      flex: 1;
      min-width: 0;
      background: #222;
      border: 1px solid #666;
      border-radius: 6px;
      color: white;
      padding: 8px 10px;
      font-size: 14px;

      &:focus {
        outline: none;
        border-color: #4CAF50;
      }
    }
  }

  .custom-marker-section-label {
    color: #9aa5ad;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .custom-marker-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px;
    max-height: 165px;
    overflow-y: auto;

    .custom-marker-icon-option {
      aspect-ratio: 1;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: #dfe6ec;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.12);
      }

      &.selected {
        border-color: #4CAF50;
        background: rgba(76, 175, 80, 0.2);
        color: #fff;
      }
    }
  }

  .custom-marker-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .custom-marker-color-option {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.25);
      cursor: pointer;
      padding: 0;
      transition: transform 0.15s ease, border-color 0.15s ease;

      &:hover {
        transform: scale(1.15);
      }

      &.selected {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
        transform: scale(1.1);
      }
    }
  }

  .custom-marker-create {
    background: #2d7d46;
    border: none;
    border-radius: 8px;
    color: white;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;

    i {
      margin-right: 6px;
    }

    &:hover {
      background: #256b3b;
    }
  }
}

// Marker search bar
.marker-search-bar {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.marker-search-input {
  width: 100%;
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  padding-right: 40px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    background: rgba(50, 50, 50, 0.9);
  }
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

.marker-search-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  
  &:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
}

// Marker grid
.marker-selection-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

// One picker tile: preview chip + name (+ delete for saved customs)
.marker-item {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.8), rgba(35, 35, 35, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;

  &:hover {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.9), rgba(45, 45, 45, 0.9));
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .marker-item-label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .marker-item-delete {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;

    &:hover {
      color: #ff6b6b;
      background: rgba(220, 53, 69, 0.15);
    }
  }

  // The "build a custom marker" tile, dashed like the token builder card
  &.marker-item-custom {
    border: 1px dashed #6c7a89;
    background: linear-gradient(135deg, #2c3e50, #34495e);

    &:hover {
      border-color: #9bb2c4;
    }
  }
}

// Category headers spanning the grid (Counters / Keywords / Statuses / Your Markers)
.marker-grid-section {
  grid-column: ~"1 / -1";
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}

// The chip disc, shared by battlefield markers, picker previews and the
// builder preview. Color arrives via the --marker-color custom property.
.marker-disc() {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    var(--marker-color, #546e7a);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  user-select: none;
  box-sizing: border-box;

  i {
    font-size: inherit;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
}

// Static preview chips (picker grid, builder)
.marker-chip {
  .marker-disc();
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: 14px;

  &.marker-chip-custom {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-style: dashed;
    border-color: #9bb2c4;
  }
}

// Actual marker chips on the battlefield: a compact colored disc with an
// icon; the name lives in a hover/drag tooltip (data-marker-label). The
// ownership ring takes the player's color. Size and font-size are set by
// applyMarkerSizing from the card height.
.marker {
  .marker-disc();
  cursor: move;
  touch-action: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  z-index: 10000;

  // Riding a dragged card: follow it instantly (the transform transition
  // would trail behind) and don't balloon into the hover state while
  // passing under the pointer
  &.riding {
    transition: none;
  }

  // Name tooltip
  &::after {
    content: attr(data-marker-label);
    position: absolute;
    bottom: ~"calc(100% + 8px)";
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: rgba(15, 15, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  &:hover:not(.riding)::after,
  &.dragging::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  &:hover:not(.dragging):not(.riding) {
    transform: scale(1.18);
  }

  &.entering {
    animation: markerEnter 0.35s ease-out;
  }

  &.dragging {
    transition: none; // Disable transitions during drag for better performance
    cursor: grabbing;
  }

  &.over-hand {
    opacity: 0.6;
    border-color: rgba(220, 53, 69, 0.9);
  }

  // Ownership ring in the player's color (hex values from getPlayerColorHex)
  &.player-blue   { box-shadow: 0 0 0 2px fade(#3182ce, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-orange { box-shadow: 0 0 0 2px fade(#dd6b20, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-green  { box-shadow: 0 0 0 2px fade(#38a169, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-yellow { box-shadow: 0 0 0 2px fade(#d69e2e, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-red    { box-shadow: 0 0 0 2px fade(#e53e3e, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-purple { box-shadow: 0 0 0 2px fade(#805ad5, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-teal   { box-shadow: 0 0 0 2px fade(#319795, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
  &.player-pink   { box-shadow: 0 0 0 2px fade(#d53f8c, 85%), 0 2px 8px rgba(0, 0, 0, 0.5); }
}

// Marker drop zone (when dragging over hand)
.hand.marker-drop-zone {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(185, 28, 28, 0.9)) !important;
  border: 2px dashed rgba(220, 53, 69, 0.8) !important;
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.5) !important;
}

// Marker animations
// Token entering animation
@keyframes tokenEnter {
  0% { 
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  60% { 
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card.token.entering {
  animation: tokenEnter 0.5s ease-out;
}

// Marker entering animation
@keyframes markerEnter {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// Responsive marker picker sizing (chips themselves scale with the card
// height via applyMarkerSizing)
@media (max-width: 768px) {
  .marker-selection-content {
    min-width: 90vw;
    margin: 20px;
  }

  .marker-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
}

// Opponent token styling (tokens from opponents should be rotated)
.card.opponent-token {
  transform: rotate(180deg);
  
  &.tapped {
    transform: rotate(180deg) rotate(90deg);
  }
}

// Legacy token drop zone styles removed - now handled by unified-drop-zone

// Search bar styling (shared between token and deck search)
.token-search-bar,
.deck-search-bar,
.zone-search-bar {
  position: relative;
  margin: 15px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.token-search-input,
.deck-search-input,
.zone-search-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(40, 40, 40, 0.9);
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
  
  &::placeholder {
    color: rgba(160, 160, 160, 0.7);
  }
  
  &:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    background: rgba(30, 30, 30, 0.95);
  }
}

.token-search-clear,
.deck-search-clear,
.zone-search-clear {
  background: rgba(220, 53, 69, 0.8);
  border: none;
  border-radius: 50%;
  color: #fff;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
  
  &:hover {
    background: rgba(220, 53, 69, 1);
    transform: scale(1.1);
  }
}

// ===== NEW GAME MENU - SIDEBAR STYLE =====
.game-menu {
  // Default (1–2 player games): pinned to the viewport's bottom-left so it
  // stays reachable even when the board scrolls past the fold. In 3+ player
  // games the local .board-wrapper gets .menu-on-field (see board-game.js),
  // which re-anchors the menu to the player's own quadrant so it follows
  // them into whatever seat they're in (bottom-left, or around screen center
  // for the bottom-right player) and floats above the hand row.
  position: fixed;
  bottom: 20px;
  left: 46px; // Position after the main website sidebar
  min-width: 130px;
  max-width: 130px;
  width: 130px;
  transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
  color: #fff;
  background-color: #111;

  // Expanded width when submenu is open
  &.submenu-expanded {
    width: 187px;
    min-width: 187px;
    max-width: 187px;
  }
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  
  // Use flexbox to control order of header and menu components
  display: flex;
  flex-direction: column;

  .game-menu-header {
    order: 2; // Place header after menu items
    padding: 10px;
    background: #07080a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #565858; // Changed from border-bottom since header is now at bottom
    cursor: pointer;

    .menu-title {
      font-size: 1.1em;
      font-weight: bold;
      color: #fff;
      margin: 0;
    }

    .menu-collapse-toggle {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.9em;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 3px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      &:focus {
        outline: none;
      }

      i {
        transition: transform 0.3s ease;
      }
    }
  }

  ul.game-menu-components {
    order: 1; // Place menu items before header
    margin: 0;
    padding: 0;
    list-style: none;
    // Cap to the menu's anchor (the local .board-wrapper, which is the
    // player's quadrant — shorter than the viewport) so an expanded submenu
    // can never push the last item off the top of the player's area; the
    // ~90px leaves room for the header below and the hand row the menu
    // floats above. Scroll if it still overflows, keeping every item
    // reachable instead of the old fixed 500px clip that cut off "Restart".
    max-height: calc(100% - 90px);
    overflow-y: auto;
    transition: all 0.4s ease;

    .menu-section {
      border-bottom: 1px solid #565858;

      &.menu-section-bottom {
        border-bottom: none;
      }

      .menu-button {
        width: 100%;
        padding: 10px;
        font-size: 1.1em;
        font-weight: normal;
        display: block;
        color: #fff;
        background: transparent;
        border: none;
        text-align: left;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          color: #000;
          background: #fff;
        }

        &:active {
          padding-top: 13px;
          padding-bottom: 7px;
        }

        &:focus {
          outline: none;
        }

        i {
          margin-right: 10px;
          width: 16px;
          text-align: center;
        }

        .menu-item {
          font-size: 0.95em;
        }
      }
      
      // Special styling for Start and Ready buttons only
      .ready-button,
      .mulligan-button.start-state {
        background: #28a745 !important; // Nice green background
        border: 1px solid #1e7e34 !important; // Slightly darker green border
        border-radius: 5px;
        color: #fff !important;
        font-weight: 500;
        
        &:hover {
          background: #218838 !important; // Darker green on hover
          color: #fff !important; // Keep white text on hover
          border-color: #1c7430 !important;
        }
        
        &:active {
          background: #1e7e34 !important; // Even darker when pressed
          border-color: #155724 !important;
        }
      }
    }
  }

  // Collapsed state
  &.collapsed {
    .game-menu-header {
      border-top: none; // Updated since header is now at bottom

      .menu-title {
        display: block; // Keep the "Menu" label next to the arrow when collapsed
      }

      .menu-collapse-toggle i {
        transform: rotate(180deg);
      }
    }

    ul.game-menu-components {
      max-height: 0;
      padding: 0;
    }
  }

  // Phones: collapsed = a small tab in the bottom-left corner (just right of
  // the mini sidebar); expanded = a readable labeled panel that temporarily
  // overlays the board. bottom is lifted above the hand in JS. (The 3+ player
  // .menu-on-field override still applies, re-anchoring to the quadrant.)
  @media (max-width: 768px) {
    left: 62px; // Adjust for mobile sidebar width
    bottom: 8px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;

    // Keep the same width with a submenu open (the desktop rule is more
    // specific and would narrow it to 187px)
    &.submenu-expanded {
      width: 200px;
      min-width: 200px;
      max-width: 200px;
    }

    // Force small tab when collapsed, even if submenu-expanded lingers
    &.collapsed {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
      text-align: center;
    }

    .menu-title {
      font-size: 0.9em;
      display: block !important;
    }

    // Hide menu title when collapsed, even on mobile
    &.collapsed .menu-title {
      display: none !important;
    }

    // Icon + label rows with phone-sized touch targets
    ul.game-menu-components .menu-section .menu-button {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      font-size: 1em;
      text-align: left;

      i {
        margin: 0;
        width: 18px;
        font-size: 15px;
        text-align: center;
        flex-shrink: 0;
      }

      .menu-item {
        font-size: 0.95em;
        padding-right: 16px; // room for the chevron
      }
    }

    .submenu-items .submenu-item {
      padding: 8px 12px 8px 32px;
      min-height: 40px;

      i {
        width: 16px;
        font-size: 13px;
      }

      .menu-item {
        font-size: 0.9em;
      }
    }
  }
}

// 3+ player games: re-anchor the menu (and its quick-action rail) to the
// local .board-wrapper so it follows the player into their own quadrant
// instead of always sitting at the viewport's bottom-left. board-game.js
// toggles .menu-on-field on the local .board-wrapper when allPlayerTimeMap
// grows past 2. bottom is set in JS to float just above the hand row.
.board-wrapper.menu-on-field .game-menu {
  position: absolute;
  left: 12px;

  @media (max-width: 768px) {
    left: 8px; // wrapper is already past the mini sidebar
  }
}

// The quick-action rail stacks DIRECTLY ABOVE the collapsed menu header
// (bottom set in board-game.js) instead of floating at the quadrant's
// vertical middle, where the menu could cover its buttons.
.board-wrapper.menu-on-field .game-menu.collapsed ~ .field-quick-actions {
  position: absolute;
  left: 12px;
  top: auto;
  transform: none;

  @media (max-width: 768px) {
    left: 8px;
  }
}

/* ---------------------------------------------------
    LEFT-EDGE QUICK-ACTION RAIL
----------------------------------------------------- */

// Dice / Token / Counter as always-reachable icons at the left edge,
// mirroring the game menu's Add submenu. Only shown once the menu is
// collapsed (while it's expanded the submenu is one click away), and the
// icons stay tucked and faint until the rail is hovered.
.field-quick-actions {
  display: none;
}

.game-menu.collapsed ~ .field-quick-actions {
  // Default (1–2 player): fixed to the viewport's left edge. The 3+ player
  // override (.board-wrapper.menu-on-field) re-anchors it to the player's
  // quadrant — see above.
  position: fixed;
  left: 46px; // just right of the site sidebar, like .game-menu
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 10px 4px; // right pad widens the hover target

  .field-quick-action {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    // Tucked in and faint until the rail is hovered
    opacity: 0.3;
    transform: translateX(-14px);
    transition: opacity 0.2s ease, transform 0.2s ease,
      background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background: #fff;
      color: #111;
      border-color: #fff;
    }

    &:focus {
      outline: none;
    }
  }

  &:hover .field-quick-action {
    opacity: 1;
    transform: translateX(0);
  }

  // Phones have no hover and start with the menu collapsed — leave the
  // board uncluttered and rely on the menu tab instead.
  @media (max-width: 768px) {
    display: none;
  }
}

/* ---------------------------------------------------
    OPPONENT ACTION EFFECTS
----------------------------------------------------- */

// Cool border effect for opponent card actions
.card.opponent-action-highlight {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #dda0dd, #ff6b6b);
    background-size: 400% 400%;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
    animation: opponent-action-glow 2s ease-in-out;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    z-index: 2;
    pointer-events: none;
    animation: opponent-action-pulse 2s ease-in-out;
  }
  
  // Ensure card content stays on top
  .card-image,
  img {
    position: relative;
    z-index: 3;
  }
}

@keyframes opponent-action-glow {
  0% {
    background-position: 0% 50%;
    opacity: 1;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.8;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0;
  }
}

@keyframes opponent-action-pulse {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6);
    opacity: 0.9;
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 0;
  }
}

/* ---------------------------------------------------
    CARD FLIP FUNCTIONALITY
----------------------------------------------------- */

// Flip icon that appears on hover for all cards
.card-flip-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  
  // Bigger on larger screens
  @media (min-width: 1024px) {
    font-size: 16px;
  }
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.card:hover .card-flip-icon,
.search-card:hover .card-flip-icon {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.card-flip-icon:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

// "Unstick" button: shown on hover on a host that carries a stack of
// attachments; pressing it detaches every attachment (left where they sit)
// and drags the bare host away in the same gesture. Mirrors the flip icon,
// pinned to the opposite (top-right) corner.
.card-unstick-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;

  @media (min-width: 1024px) {
    font-size: 16px;
  }
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: none;
}

.card.has-attachments:hover .card-unstick-icon {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.card-unstick-icon:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

// Active state for the left-edge palette rail button (mirrors the menu's
// alternate-art button being toggled on).
.field-quick-action.field-quick-art.mode-active {
  background: #ffc107;
  color: #111;
  border-color: #ffc107;
  opacity: 1;
  transform: translateX(0);
}

// Flip card mode styles
.flip-card-mode-button.mode-active {
  background: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
  
  .menu-item {
    color: #ffc107 !important;
  }
  
  i {
    color: #ffc107 !important;
  }
}

.card.flip-mode-highlight {
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.8) !important;
  border: 2px solid rgba(255, 193, 7, 0.6) !important;
  
  &:hover {
    box-shadow: 0 0 16px rgba(255, 193, 7, 1) !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
  }
  
  // Ensure battlefield cards get the same highlight intensity
  &.played {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.9) !important;
    border: 2px solid rgba(255, 193, 7, 0.7) !important;
    
    &:hover {
      box-shadow: 0 0 20px rgba(255, 193, 7, 1) !important;
      border-color: rgba(255, 193, 7, 1) !important;
    }
  }
}

// Copy card mode styles - match flip mode styling
.copy-card-mode-button.mode-active {
  background: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
  
  .menu-item {
    color: #ffc107 !important;
  }
  
  i {
    color: #ffc107 !important;
  }
}

// Rules card mode styles - match flip mode styling
.rules-card-mode-button.mode-active {
  background: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
  
  .menu-item {
    color: #ffc107 !important;
  }
  
  i {
    color: #ffc107 !important;
  }
}

.alternate-art-mode-button.mode-active {
  background: rgba(255, 193, 7, 0.3) !important;
  color: #ffc107 !important;
  
  .menu-item {
    color: #ffc107 !important;
  }
  
  i {
    color: #ffc107 !important;
  }
}

.card.copy-mode-highlight {
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.8) !important;
  border: 2px solid rgba(255, 193, 7, 0.6) !important;
  
  &:hover {
    box-shadow: 0 0 16px rgba(255, 193, 7, 1) !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
  }
  
  // Ensure battlefield cards get the same highlight intensity
  &.played {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.9) !important;
    border: 2px solid rgba(255, 193, 7, 0.7) !important;
    
    &:hover {
      box-shadow: 0 0 20px rgba(255, 193, 7, 1) !important;
      border-color: rgba(255, 193, 7, 1) !important;
    }
  }
}

.card.rules-mode-highlight {
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.8) !important;
  border: 2px solid rgba(255, 193, 7, 0.6) !important;
  
  &:hover {
    box-shadow: 0 0 16px rgba(255, 193, 7, 1) !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
  }
  
  // Ensure battlefield cards get the same highlight intensity
  &.played {
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.9) !important;
    border: 2px solid rgba(255, 193, 7, 0.7) !important;
    
    &:hover {
      box-shadow: 0 0 20px rgba(255, 193, 7, 1) !important;
      border-color: rgba(255, 193, 7, 1) !important;
    }
  }
}

// Alternate art mode highlighting - purple/palette color theme
.card.alternate-art-mode-highlight {
  box-shadow: 0 0 12px rgba(156, 39, 176, 0.8) !important;
  border: 2px solid rgba(156, 39, 176, 0.6) !important;
  
  &:hover {
    box-shadow: 0 0 16px rgba(156, 39, 176, 1) !important;
    border-color: rgba(156, 39, 176, 0.9) !important;
  }
  
  // Ensure battlefield cards get the same highlight intensity
  &.played {
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.9) !important;
    border: 2px solid rgba(156, 39, 176, 0.7) !important;
    
    &:hover {
      box-shadow: 0 0 20px rgba(156, 39, 176, 1) !important;
      border-color: rgba(156, 39, 176, 1) !important;
    }
  }
}

// Copy card styling - subtle border for copied cards
.card.copy {
  border: 2px solid rgba(255, 87, 34, 0.4) !important;
  box-shadow: 0 0 4px rgba(255, 87, 34, 0.3) !important;
  
  &:hover {
    border-color: rgba(255, 87, 34, 0.6) !important;
    box-shadow: 0 0 6px rgba(255, 87, 34, 0.5) !important;
  }
  
  // Add a very subtle inner glow to distinguish copies
  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
      transparent, 
      rgba(255, 87, 34, 0.1), 
      transparent, 
      rgba(255, 87, 34, 0.15), 
      transparent
    );
    background-size: 200% 200%;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    animation: copyGlow 4s ease-in-out infinite;
  }
}

// Subtle glow animation for copied cards
@keyframes copyGlow {
  0%, 100% {
    background-position: 0% 0%;
    opacity: 0.3;
  }
  50% {
    background-position: 100% 100%;
    opacity: 0.6;
  }
}

// Ensure cards have relative positioning for the flip icon
.card,
.search-card {
  position: relative;
}

/* ---------------------------------------------------
    TURN MANAGEMENT SYSTEM
----------------------------------------------------- */

// The small turn panels (untap all / auto-tap mana) stack in this dock at
// the viewport's top-left — below the top band where the turn indicator
// (top-center) and notifications live — instead of crowding the game-menu
// corner. A flex column, so whichever panels are visible never overlap;
// the dock itself ignores the mouse, the panels inside don't.
.turn-panel-dock {
  position: fixed;
  top: 70px;
  left: 56px; // just right of the site sidebar
  z-index: 999; // under the game menu (1000) if a submenu happens to overlap
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;

  .untap-panel,
  .mana-tap-panel {
    position: relative; // containing block for the corner close button
    pointer-events: auto;
  }

  @media (max-width: 768px) {
    left: 62px; // past the mobile sidebar, like .game-menu
    top: 60px;
  }
}

// Turn indicator UI
// Start-of-turn untap helper (lives in the .turn-panel-dock above).
.untap-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.96), rgba(60, 60, 60, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;

  .untap-all-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.95), rgba(56, 142, 60, 0.95));
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;

    &:hover {
      background: linear-gradient(135deg, rgba(86, 190, 90, 0.98), rgba(66, 160, 70, 0.98));
    }
    &:active {
      transform: translateY(1px);
    }
  }

  .untap-auto-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;

    input {
      cursor: pointer;
      margin: 0;
    }
  }
}

// Auto-tap mana panel — stacks with the untap panel in the top-left
// .turn-panel-dock (they can be on screen together at the start of a turn).
.mana-tap-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.96), rgba(60, 60, 60, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  color: #fff;

  .mana-tap-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px; // room for the corner close button
  }

  .mana-tap-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(103, 128, 200, 0.95), rgba(72, 96, 168, 0.95));
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;

    &:hover {
      background: linear-gradient(135deg, rgba(120, 145, 220, 0.98), rgba(84, 110, 186, 0.98));
    }
    &:active {
      transform: translateY(1px);
    }

    // Undo state — warmer colour so it reads as a distinct action.
    &.undo-mode {
      background: linear-gradient(135deg, rgba(200, 130, 70, 0.95), rgba(170, 100, 50, 0.95));

      &:hover {
        background: linear-gradient(135deg, rgba(220, 150, 85, 0.98), rgba(190, 118, 62, 0.98));
      }
    }
  }

  // Dismisses a lingering panel (needed when leftover mana keeps it around).
  .mana-tap-close {
    position: absolute;
    top: 2px;
    right: 4px;
    padding: 3px 5px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;

    &:hover {
      color: #fff;
    }
  }

  // Disable / Manual / Auto mode slider, below the button.
  .mana-tap-mode {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .mana-tap-mode-slider {
      width: 100%;
      margin: 0;
      accent-color: rgb(103, 128, 200);
      cursor: pointer;
    }

    .mana-tap-mode-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.55);
      user-select: none;

      .mana-tap-mode-label {
        cursor: pointer;

        &:hover {
          color: rgba(255, 255, 255, 0.85);
        }
        &.active {
          color: #fff;
        }
      }
    }
  }

  // Disable mode: the panel still appears but faded and inert; hovering
  // restores it so the slider (the way back out) is easy to read and reach.
  &.mana-tap-disabled {
    opacity: 0.45;
    transition: opacity 0.15s ease;

    &:hover {
      opacity: 1;
    }

    .mana-tap-button {
      cursor: default;
      filter: grayscale(0.6);

      &:hover {
        background: linear-gradient(135deg, rgba(103, 128, 200, 0.95), rgba(72, 96, 168, 0.95));
      }
      &:active {
        transform: none;
      }
    }
  }

  .mana-tap-warning {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 190, 120, 0.95);

    .mana-tap-missing {
      display: inline-flex;
      align-items: center;
      gap: 3px;

      .mi {
        font-size: 16px;
      }
      .mana-tap-generic-number {
        font-weight: bold;
        color: #fff;
      }
    }
  }

  // Floating mana left over by an overpaying source (Sol Ring for a {1}
  // cost); this line keeps the panel up past the undo window.
  .mana-tap-leftover {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(140, 200, 255, 0.95);

    .mana-tap-remaining {
      display: inline-flex;
      align-items: center;
      gap: 3px;

      .mi {
        font-size: 16px;
      }
      .mana-tap-generic-number {
        font-weight: bold;
        color: #fff;
      }
    }
  }
}

// The "Turn off" affordance on the auto-untap notification.
.untap-auto-notification .untap-auto-off {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.turn-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(60, 60, 60, 0.95));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  padding: 8px 16px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  z-index: 9998;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  pointer-events: none; /* Prevent click events by default */
  cursor: default;
  
  i {
    margin-right: 6px;
  }
  
  &.your-turn {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(56, 142, 60, 0.9));
    border-color: rgba(76, 175, 80, 0.8);
    animation: pulse-glow-green 2s infinite;
    pointer-events: auto; /* Allow clicks when it's your turn */
    cursor: pointer; /* Show clickable cursor */
    
    &:hover {
      background: linear-gradient(135deg, rgba(56, 142, 60, 0.95), rgba(46, 125, 50, 0.95));
      // Removed transform: scale to prevent movement
    }
    
    &:active {
      background: linear-gradient(135deg, rgba(46, 125, 50, 0.95), rgba(38, 104, 42, 0.95));
    }
  }
  
  &.waiting-for-players {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.9), rgba(230, 137, 0, 0.9));
    border-color: rgba(255, 152, 0, 0.8);
    animation: pulse-glow-orange 2s infinite;
    
    i {
      margin-right: 6px;
    }
  }
  
  &.waiting-for-ready {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(25, 118, 210, 0.9));
    border-color: rgba(33, 150, 243, 0.8);
    animation: pulse-glow-blue 2s infinite;
    pointer-events: auto;
    cursor: pointer;
    
    &:hover {
      background: linear-gradient(135deg, rgba(42, 159, 255, 0.95), rgba(33, 131, 220, 0.95));
    }
    
    i {
      margin-right: 6px;
    }
  }
  
  // Player-colored opponent turn indicators
  &.opponent-turn-player-blue {
    background: linear-gradient(135deg, rgba(49, 130, 206, 0.9), rgba(42, 111, 176, 0.9));
    border-color: rgba(49, 130, 206, 0.8);
  }
  
  &.opponent-turn-player-orange {
    background: linear-gradient(135deg, rgba(221, 107, 32, 0.9), rgba(188, 91, 27, 0.9));
    border-color: rgba(221, 107, 32, 0.8);
  }
  
  &.opponent-turn-player-green {
    background: linear-gradient(135deg, rgba(56, 161, 105, 0.9), rgba(48, 137, 89, 0.9));
    border-color: rgba(56, 161, 105, 0.8);
  }
  
  &.opponent-turn-player-yellow {
    background: linear-gradient(135deg, rgba(214, 158, 46, 0.9), rgba(182, 134, 39, 0.9));
    border-color: rgba(214, 158, 46, 0.8);
  }
  
  &.opponent-turn-player-red {
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.9), rgba(195, 53, 53, 0.9));
    border-color: rgba(229, 62, 62, 0.8);
  }
  
  &.opponent-turn-player-purple {
    background: linear-gradient(135deg, rgba(128, 90, 213, 0.9), rgba(109, 77, 181, 0.9));
    border-color: rgba(128, 90, 213, 0.8);
  }
  
  &.opponent-turn-player-teal {
    background: linear-gradient(135deg, rgba(49, 151, 149, 0.9), rgba(42, 129, 127, 0.9));
    border-color: rgba(49, 151, 149, 0.8);
  }
  
  &.opponent-turn-player-pink {
    background: linear-gradient(135deg, rgba(213, 63, 140, 0.9), rgba(181, 54, 119, 0.9));
    border-color: rgba(213, 63, 140, 0.8);
  }
}

@keyframes pulse-glow-green {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(76, 175, 80, 0);
  }
}

@keyframes pulse-glow-orange {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 152, 0, 0.7);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 152, 0, 0);
  }
}

@keyframes pulse-glow-blue {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(33, 150, 243, 0.7);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(33, 150, 243, 0);
  }
}


// Battlefield highlighting for active turn - using overlay approach with proper alignment
.board-wrapper, .opponent-board {
  position: relative;
  
  // Create highlighting overlay that perfectly matches the battlefield bounds
  &.turn-active::before,
  &.turn-inactive::before {
    content: '';
    position: absolute;
    top: 0; // Align exactly with element bounds
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    border-radius: 8px;
    transition: all 0.4s ease;
  }
}

// Dynamic player color classes for turn highlighting
.board-wrapper, .opponent-board {
  // Player color variations for active turn
  &.turn-active-player-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(49, 130, 206, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(49, 130, 206, 0.7);
    box-shadow: 0 0 30px rgba(49, 130, 206, 0.5), inset 0 0 30px rgba(49, 130, 206, 0.2);
  }
  
  &.turn-active-player-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(221, 107, 32, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(221, 107, 32, 0.7);
    box-shadow: 0 0 30px rgba(221, 107, 32, 0.5), inset 0 0 30px rgba(221, 107, 32, 0.2);
  }
  
  &.turn-active-player-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(56, 161, 105, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(56, 161, 105, 0.7);
    box-shadow: 0 0 30px rgba(56, 161, 105, 0.5), inset 0 0 30px rgba(56, 161, 105, 0.2);
  }
  
  &.turn-active-player-yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(214, 158, 46, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(214, 158, 46, 0.7);
    box-shadow: 0 0 30px rgba(214, 158, 46, 0.5), inset 0 0 30px rgba(214, 158, 46, 0.2);
  }
  
  &.turn-active-player-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(229, 62, 62, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(229, 62, 62, 0.7);
    box-shadow: 0 0 30px rgba(229, 62, 62, 0.5), inset 0 0 30px rgba(229, 62, 62, 0.2);
  }
  
  &.turn-active-player-purple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(128, 90, 213, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(128, 90, 213, 0.7);
    box-shadow: 0 0 30px rgba(128, 90, 213, 0.5), inset 0 0 30px rgba(128, 90, 213, 0.2);
  }
  
  &.turn-active-player-teal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(49, 151, 149, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(49, 151, 149, 0.7);
    box-shadow: 0 0 30px rgba(49, 151, 149, 0.5), inset 0 0 30px rgba(49, 151, 149, 0.2);
  }
  
  &.turn-active-player-pink::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    transition: all 0.4s ease;
    background: radial-gradient(ellipse at center, rgba(213, 63, 140, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(213, 63, 140, 0.7);
    box-shadow: 0 0 30px rgba(213, 63, 140, 0.5), inset 0 0 30px rgba(213, 63, 140, 0.2);
  }
  
  // Inactive state (same for all players)
  &.turn-inactive::before {
    background: radial-gradient(ellipse at center, rgba(100, 100, 100, 0.05) 0%, transparent 70%);
    border: 2px solid rgba(100, 100, 100, 0.15);
    box-shadow: inset 0 0 10px rgba(100, 100, 100, 0.05);
  }
}

// Opponent Hover Highlight Animation - Player-specific colors (exclude markers)
.opponent-hover-highlight:not(.marker) {
  border-radius: 4px !important;
  position: relative;
  z-index: 1000 !important;
  animation: opponentHoverPulse 1.5s ease-in-out infinite;
  
  // Player-specific colors
  &.player-blue {
    border: 2px solid rgba(49, 130, 206, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(49, 130, 206, 0.4), 0 0 15px rgba(49, 130, 206, 0.6) !important;
  }
  
  &.player-orange {
    border: 2px solid rgba(221, 107, 32, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(221, 107, 32, 0.4), 0 0 15px rgba(221, 107, 32, 0.6) !important;
  }
  
  &.player-green {
    border: 2px solid rgba(56, 161, 105, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(56, 161, 105, 0.4), 0 0 15px rgba(56, 161, 105, 0.6) !important;
  }
  
  &.player-yellow {
    border: 2px solid rgba(214, 158, 46, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(214, 158, 46, 0.4), 0 0 15px rgba(214, 158, 46, 0.6) !important;
  }
  
  &.player-red {
    border: 2px solid rgba(229, 62, 62, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(229, 62, 62, 0.4), 0 0 15px rgba(229, 62, 62, 0.6) !important;
  }
  
  &.player-purple {
    border: 2px solid rgba(128, 90, 213, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(128, 90, 213, 0.4), 0 0 15px rgba(128, 90, 213, 0.6) !important;
  }
  
  &.player-teal {
    border: 2px solid rgba(49, 151, 149, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(49, 151, 149, 0.4), 0 0 15px rgba(49, 151, 149, 0.6) !important;
  }
  
  &.player-pink {
    border: 2px solid rgba(213, 63, 140, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(213, 63, 140, 0.4), 0 0 15px rgba(213, 63, 140, 0.6) !important;
  }
}

@keyframes opponentHoverPulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

// ============================
// RESTART DECK SELECTION MODAL
// ============================
.restart-deck-selection-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  
  .restart-deck-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .restart-deck-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 450px;
    background: linear-gradient(135deg, #2a2a2a, #1e1e1e);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  
  .restart-deck-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(40, 40, 40, 0.6);
    
    h3 {
      color: #ffffff;
      margin: 0;
      font-size: 1.3em;
      font-weight: 600;
    }
    
    .restart-deck-close {
      background: none;
      border: none;
      color: #ffffff;
      font-size: 1.8em;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.2s ease;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }
  
  .restart-deck-modal-body {
    padding: 24px;
    
    .restart-deck-message {
      color: #ffffff;
      font-size: 1.1em;
      margin-bottom: 16px;
      font-weight: 500;
    }
    
    .restart-deck-selection {
      margin-bottom: 20px;
      
      .restart-deck-selector {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1.4;
        min-height: 44px;
        border: 2px solid rgba(100, 100, 100, 0.3);
        border-radius: 8px;
        background: rgba(40, 40, 40, 0.9);
        color: #fff;
        transition: all 0.3s ease;
        
        &:focus {
          outline: none;
          border-color: #4CAF50;
          box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
          background: rgba(30, 30, 30, 0.95);
        }
        
        option {
          background: #2a2a2a;
          color: #fff;
        }
      }
    }
    
    .restart-deck-or {
      display: flex;
      align-items: center;
      text-align: center;
      color: rgba(200, 200, 200, 0.6);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 16px 0;

      &::before,
      &::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid rgba(120, 120, 120, 0.3);
        margin: 0 10px;
      }
    }

    .restart-deck-edhrec-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #6b7280, #4b5563);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;

      .fa-dice {
        font-size: 16px;
      }

      &:hover {
        background: linear-gradient(135deg, #4b5563, #374151);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
      }

      &:active {
        transform: translateY(1px);
      }
    }

    .restart-deck-warning {
      color: rgba(200, 200, 200, 0.9);
      font-size: 13px;
      line-height: 1.4;
      
      p {
        margin: 0 0 8px 0;
        
        &:last-child {
          margin-top: 12px;
          font-style: italic;
          color: rgba(255, 193, 7, 0.8);
        }
      }
      
      ul {
        margin: 8px 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 4px;
        }
      }
    }
  }
  
  .restart-deck-modal-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(20, 20, 20, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    .control-btn {
      flex: 1;
      height: 42px;
      border: none;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      
      .btn-icon {
        font-size: 16px;
      }
      
      &.primary {
        background: linear-gradient(135deg, #4CAF50, #45a049);
        color: #fff;
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #45a049, #3d8b40);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }
        
        &:disabled {
          background: rgba(76, 175, 80, 0.3);
          color: rgba(255, 255, 255, 0.5);
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }
      }
      
      &.secondary {
        background: rgba(60, 60, 60, 0.8);
        color: #fff;
        border: 1px solid rgba(100, 100, 100, 0.3);
        
        &:hover {
          background: rgba(80, 80, 80, 0.9);
          border-color: rgba(120, 120, 120, 0.5);
          transform: translateY(-1px);
        }
      }
    }
  }
}

// ===== RULES MODAL STYLES =====
.rules-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  
  .rules-modal-container {
    background-color: #2c3e50;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    max-width: 900px;
    width: 90%;
    max-height: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    .rules-modal-header {
      background-color: #34495e;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #4a5568;
      
      h3 {
        color: white;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      .rules-modal-close {
        background: none;
        border: none;
        color: #cbd5e0;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s ease;
        
        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
          color: white;
        }
      }
    }
    
    .rules-modal-content {
      display: flex;
      flex: 1;
      overflow: hidden;
      
      .rules-card-display {
        flex: 0 0 300px;
        padding: 20px;
        background-color: #2c3e50;
        border-right: 1px solid #4a5568;
        
        .rules-card-image-container {
          position: relative;
          display: flex;
          justify-content: center;
          
          .rules-card-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
          }
          
          .rules-card-flip {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s ease;
            
            &:hover {
              background-color: rgba(0, 0, 0, 0.9);
              transform: scale(1.1);
            }
            
            i {
              font-size: 14px;
            }
          }
        }
      }
      
      .rules-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        
        .rules-loader {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          color: #cbd5e0;
          
          .loader {
            border: 3px solid #4a5568;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
          }
          
          p {
            margin: 0;
            font-size: 14px;
          }
        }
        
        .rules-list {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
          
          .rule-item {
            background-color: #3a4a5c;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 12px;
            border-left: 4px solid #3498db;
            
            .rule-comment {
              color: #e2e8f0;
              line-height: 1.5;
              margin-bottom: 8px;
              
              .mana-symbol {
                display: inline-block;
                background-color: #4a5568;
                color: #cbd5e0;
                padding: 2px 6px;
                border-radius: 12px;
                font-size: 11px;
                font-weight: bold;
                margin: 0 2px;
              }
            }
            
            .rule-date {
              color: #a0aec0;
              font-size: 12px;
              font-style: italic;
            }
          }
          
          .no-rules-message, .rules-error {
            text-align: center;
            padding: 40px 20px;
            color: #a0aec0;
            
            p {
              margin: 0;
              font-size: 16px;
            }
          }
          
          .rules-error {
            color: #fc8181;
          }
        }
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// Mobile responsiveness for rules modal
@media (max-width: 768px) {
  .rules-modal-overlay {
    .rules-modal-container {
      width: 95%;
      max-height: 95%;
      
      .rules-modal-content {
        flex-direction: column;
        
        .rules-card-display {
          flex: 0 0 auto;
          border-right: none;
          border-bottom: 1px solid #4a5568;
          padding: 15px;
          
          .rules-card-image-container {
            .rules-card-image {
              max-width: 200px;
            }
          }
        }
        
        .rules-content {
          .rules-list {
            padding: 15px;
          }
        }
      }
    }
  }
}


// ===== PHONE OVERRIDES =====
// Keep this block at the end of the file: several base rules above share
// its specificity, and for equal specificity the later rule wins — the
// original mobile 100dvh rule was silently lost exactly that way.
@media (max-width: 768px) {
  // The board halves are sized inline by computeAllLength; the wrapper
  // itself must hug them instead of inheriting the 100dvh page height
  // (which pushed the player half off screen).
  .multi-wrapper .board-wrapper {
    height: auto;
    min-height: unset;
  }

  // Slim deck drop pills stacked around the deck display — the
  // full-size zones covered a large part of the small board
  .multi-wrapper .board-wrapper .deck-drop-zone,
  .multi-wrapper .board-wrapper .deck-bottom-drop-zone {
    width: 86px;
    height: 40px;
    right: 6px;
    border-width: 2px;

    .drop-zone-text {
      font-size: 9px;
      line-height: 11px;
    }
  }

  .multi-wrapper .board-wrapper .deck-drop-zone {
    bottom: 176px; // just above the deck display (80px + 88px)
  }

  .multi-wrapper .board-wrapper .deck-bottom-drop-zone {
    bottom: 32px; // just below the deck display
  }

  // While dragging a battlefield card/token/dice/marker, the hand itself
  // is the return/remove drop target — the unified bar is desktop-only
  // because it covered the front battlefield rows on a phone.
  .multi-wrapper .hand.hand-return-target {
    outline: 2px dashed #ffc107;
    outline-offset: -2px;

    &::after {
      content: attr(data-drop-label);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 193, 7, 0.35);
      color: #fff;
      font-size: 13px;
      font-weight: bold;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      pointer-events: none;
      z-index: 20000;
    }

    &.remove-drop {
      outline-color: #dc3545;

      &::after {
        background: rgba(220, 53, 69, 0.35);
      }
    }

    &.drag-over {
      outline-width: 3px;

      &::after {
        background: rgba(255, 193, 7, 0.55);
      }
    }

    &.remove-drop.drag-over::after {
      background: rgba(220, 53, 69, 0.55);
    }
  }

  // Life counters: compact, and the +/- buttons always visible (there
  // is no hover on a touch screen)
  .multi-wrapper .life-counters-container.life-position-two-player .life-counter {
    right: 4px;
  }

  .multi-wrapper .life-counter {
    min-width: 60px;
    padding: 4px 6px;
  }

  .multi-wrapper .life-counter .life-counter-controls .life-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  // Bigger touch target for the dice minus button
  .dice-minus-button {
    display: flex;
    width: 24px;
    height: 24px;
    font-size: 14px;
    top: -12px;
    right: -12px;
  }
}

// ============================
// BOARD BACKGROUND MODAL
// ============================
// Opened from the More > Background menu entry
// (BoardGame.openBoardStyleModal in static/board/board-style.js)

.board-style-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;

  // A light scrim only: the whole point of this modal is previewing the
  // background live on your half, so the board must stay visible behind it.
  .board-style-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
  }

  .board-style-content {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    width: min(440px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    z-index: 10001;
  }

  .board-style-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;

    h3 {
      margin: 0;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .board-style-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }
  }

  .board-style-body {
    padding: 4px 20px 20px;
  }

  .board-style-section-title {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 16px 0 8px;
  }

  .board-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .board-theme-swatch {
    height: 56px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #23272d;
    background-image: var(--board-theme-layers, none);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    span {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.85);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      margin-bottom: 4px;
    }

    &:hover {
      border-color: rgba(255, 255, 255, 0.35);
    }

    &.selected {
      border-color: #4caf50;
      box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    }
  }

  // Card art from the current deck, likely commander first
  // (BoardGame.populateBoardStyleDeckGrid)
  .board-deck-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 176px;
    overflow-y: auto;
    padding-right: 2px;

    .board-deck-art {
      aspect-ratio: 4 / 3;
      border-radius: 6px;
      background-color: #23272d;
      background-size: cover;
      background-position: center;
      border: 2px solid rgba(255, 255, 255, 0.12);
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;

      &:hover {
        border-color: rgba(255, 255, 255, 0.35);
      }

      &.selected {
        border-color: #4caf50;
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
      }
    }

    // The Random choice draws from the whole card pool, so it has no
    // preview art of its own: a labeled dice tile instead.
    .board-deck-random {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background-image: linear-gradient(135deg, #3a2f5d, #5b3a7d);
      color: rgba(255, 255, 255, 0.9);

      i {
        font-size: 18px;
      }

      span {
        font-size: 10px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
    }

    .board-deck-empty {
      grid-column: 1 / -1;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      padding: 6px 0;
    }
  }

  .board-image-row {
    display: flex;
    gap: 8px;

    .board-image-input {
      flex: 1;
      background: rgba(40, 40, 40, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 10px 12px;
      color: #ffffff;
      font-size: 13px;

      &:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
      }

      &::placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
    }

    .board-image-clear {
      background: rgba(40, 40, 40, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.6);
      width: 38px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.4);
      }
    }
  }

  // Framing: a 3x3 focus picker beside a zoom slider. Only meaningful with
  // a chosen image, so the whole block fades and stops taking clicks when
  // the background is a plain theme (board-framing-disabled).
  .board-framing-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .board-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;

    .board-focus-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.15s ease;

      span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
        transition: background 0.15s ease, transform 0.15s ease;
      }

      &:hover span {
        background: rgba(255, 255, 255, 0.7);
      }

      &.selected {
        background: rgba(76, 175, 80, 0.25);

        span {
          background: #4caf50;
          transform: scale(1.3);
        }
      }
    }
  }

  .board-zoom-col {
    flex: 1;

    .board-zoom-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 6px;
    }

    .board-zoom-slider {
      width: 100%;
      accent-color: #4caf50;
    }
  }

  .board-framing-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .board-dim-slider {
    width: 100%;
    accent-color: #4caf50;
  }

  .board-style-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
  }
}

// Player name picker: same shell as the board-background modal, offered on
// first join and reopenable from the More menu (BoardGame.buildPlayerNameModal)
.player-name-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;

  .player-name-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }

  .player-name-content {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    width: min(400px, 92vw);
    position: relative;
    z-index: 10001;
  }

  .player-name-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;

    h3 {
      margin: 0;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .player-name-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }
  }

  .player-name-body {
    padding: 16px 20px 20px;
  }

  .player-name-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
  }

  .player-name-input {
    width: 100%;
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #ffffff;
    font-size: 15px;

    &:focus {
      outline: none;
      border-color: #4caf50;
      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }
  }

  .player-name-error {
    font-size: 12px;
    color: #ff6b6b;
    margin-top: 8px;
  }

  .player-name-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;

    button {
      padding: 8px 18px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(40, 40, 40, 0.8);
      color: rgba(255, 255, 255, 0.85);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: rgba(255, 255, 255, 0.4);
        color: #ffffff;
      }
    }

    .player-name-save {
      background: #4caf50;
      border-color: #4caf50;
      color: #ffffff;

      &:hover {
        background: #43a047;
      }
    }
  }
}

// Commander death count: a hover pill above a commander sitting in its
// command zone — "N [skull]" with -/+ on the player's own commander, a
// read-only count on an opponent's (BoardGame.maybeShowCommanderDeathBadge).
.commander-death-badge {
  position: absolute;
  // Flush against the card's top edge: any gap would be a hover dead zone
  // (mouseleave fires crossing it, removing the badge before its buttons
  // can be reached — the badge is a child, so ON it the hover holds).
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 12px;
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f3f4f6;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

  .commander-death-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    i {
      color: #f87171;
    }
  }

  button {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: inherit;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;

    &:hover {
      background: rgba(255, 255, 255, 0.28);
    }
  }
}

// An opposite opponent's card is rotated 180deg; anchor the badge to the
// card's visual top and spin it back upright.
.card.is-opposite .commander-death-badge {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) rotate(180deg);
}

// Commander picker: same shell as the board-background modal, opened when a
// 100+ card deck's commander is ambiguous (BoardGame.buildCommanderModal).
// z-index stays below the card preview (2100) so hovering a tile previews it.
.commander-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;

  .commander-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }

  // Sized so the whole dialog fits a normal window without scrolling: the
  // two grids cap at one and two tile rows and scroll internally instead.
  .commander-content {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    width: min(480px, 92vw);
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    z-index: 2001;
  }

  .commander-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;

    h3 {
      margin: 0;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .commander-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }
  }

  .commander-body {
    padding: 4px 20px 20px;
  }

  .commander-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 12px;
  }

  .commander-section-title {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 16px 0 8px;
  }

  .commander-search {
    width: 100%;
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 8px;

    &:focus {
      outline: none;
      border-color: #4caf50;
      box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }
  }

  .commander-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    // One tile row (~120px at the modal's width); more candidates scroll
    max-height: 126px;
    overflow-y: auto;
    padding-right: 2px;

    // The full-deck grid gets two rows before scrolling
    &.commander-all-grid {
      max-height: 200px;
    }

    .commander-card-tile {
      aspect-ratio: 63 / 88;
      border-radius: 6px;
      background-color: #23272d;
      background-size: cover;
      background-position: center;
      border: 2px solid rgba(255, 255, 255, 0.12);
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;

      &:hover {
        border-color: rgba(255, 255, 255, 0.35);
      }

      &.selected {
        border-color: #4caf50;
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
      }
    }

    .commander-grid-empty {
      grid-column: 1 / -1;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      padding: 6px 0;
    }
  }

  .commander-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;

    button {
      padding: 8px 18px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(40, 40, 40, 0.8);
      color: rgba(255, 255, 255, 0.85);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: rgba(255, 255, 255, 0.4);
        color: #ffffff;
      }
    }

    .commander-confirm {
      background: #4caf50;
      border-color: #4caf50;
      color: #ffffff;

      &:hover {
        background: #43a047;
      }

      &:disabled {
        opacity: 0.5;
        cursor: default;
      }
    }
  }
}

// =========================================
// Player death & victory (board/death.js)
// =========================================

// Confirm-death prompt: life reached 0, but cards can keep you alive —
// only the player themself can declare the death
.death-confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;

  .death-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
  }

  .death-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    background: linear-gradient(135deg, #2a2a2a, #1e1e1e);
    border-radius: 12px;
    border: 2px solid rgba(229, 62, 62, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: deathModalShake 0.5s ease;
  }

  .death-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(60, 20, 20, 0.6);

    h3 {
      color: #ffffff;
      margin: 0;
      font-size: 1.3em;
      font-weight: 600;

      i {
        color: #e57373;
        margin-right: 8px;
      }
    }
  }

  .death-modal-body {
    padding: 24px;
    color: #ffffff;

    p {
      margin: 0 0 12px 0;
      font-size: 1.1em;
      font-weight: 500;
    }

    .death-modal-hint {
      color: rgba(200, 200, 200, 0.9);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.4;
      margin: 0;
    }
  }

  .death-modal-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(20, 20, 20, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    .control-btn {
      flex: 1;
      height: 42px;
      border: none;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;

      &.danger {
        background: linear-gradient(135deg, #c62828, #8e1f1f);
        color: #fff;

        &:hover {
          background: linear-gradient(135deg, #b71c1c, #7c1a1a);
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(198, 40, 40, 0.35);
        }
      }

      &.secondary {
        background: rgba(60, 60, 60, 0.8);
        color: #fff;
        border: 1px solid rgba(100, 100, 100, 0.3);

        &:hover {
          background: rgba(80, 80, 80, 0.9);
          border-color: rgba(120, 120, 120, 0.5);
          transform: translateY(-1px);
        }
      }
    }
  }
}

@keyframes deathModalShake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% - 6px), -50%); }
  40% { transform: translate(calc(-50% + 6px), -50%); }
  60% { transform: translate(calc(-50% - 3px), -50%); }
  80% { transform: translate(calc(-50% + 3px), -50%); }
}

// Ghosts and skulls drifting up from a dead player's half
.death-ghost {
  position: absolute;
  pointer-events: none;
  z-index: 9500;
  color: rgba(230, 235, 245, 0.85);
  text-shadow: 0 0 8px rgba(160, 180, 220, 0.7);
  opacity: 0;
  animation-name: deathGhostFloat;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes deathGhostFloat {
  0% { transform: translateY(0) rotate(-8deg); opacity: 0; }
  15% { opacity: 0.9; }
  50% { transform: translateY(-70px) rotate(6deg); }
  100% { transform: translateY(-150px) rotate(-4deg); opacity: 0; }
}

// Skull banner over a dead player's half. backdrop-filter greys what is
// painted beneath it without breaking the half's pinned overlays (a
// filter on the board itself would create a new containing block).
.player-dead-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 16, 0.45);
  backdrop-filter: grayscale(0.85);
  pointer-events: none;
  z-index: 600;

  i {
    font-size: 46px;
    color: rgba(235, 235, 245, 0.9);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  }

  .player-dead-label {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(235, 235, 245, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  }
}

// The .opposite opponent wrapper is rotated 180°: turn its skull banner
// back upright
.opposite .player-dead-overlay {
  transform: rotate(180deg);
}

// The deck pile bumps as the dead player's cards get sucked back in
.deck-absorb {
  animation: deckAbsorbBump 0.6s ease;
}

@keyframes deckAbsorbBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

// Dead players in the life counters: greyed out, no more life clicking
.life-counter.life-counter-dead {
  opacity: 0.55;
  filter: grayscale(0.9);

  .life-btn {
    pointer-events: none;
    opacity: 0.4;
  }

  .player-name i {
    margin-right: 4px;
  }
}

.turn-indicator.player-dead {
  background: linear-gradient(135deg, rgba(40, 40, 46, 0.95), rgba(24, 24, 30, 0.95));
  border-color: rgba(120, 120, 130, 0.6);

  i {
    color: #e57373;
  }
}

// Victory: fireworks for the last player standing
.victory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 70000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.victory-content {
  text-align: center;
  animation: victoryPop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);

  .victory-trophy {
    font-size: 84px;
    color: #ffd700;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.8);
    animation: victoryTrophyGlow 1.6s ease-in-out infinite alternate;
  }

  .victory-title {
    margin-top: 12px;
    font-size: 54px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
  }

  .victory-subtitle {
    margin-top: 6px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
  }

  .victory-close {
    margin-top: 28px;
    padding: 10px 28px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffd700, #e0a800);
    color: #3a2c00;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
    }

    i {
      margin-right: 6px;
    }
  }
}

@keyframes victoryPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes victoryTrophyGlow {
  from { text-shadow: 0 0 16px rgba(255, 215, 0, 0.6); }
  to { text-shadow: 0 0 36px rgba(255, 215, 0, 1); }
}

.firework-burst {
  position: absolute;
  pointer-events: none;
}

.firework-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: fireworkFly 1.2s ease-out forwards;
}

@keyframes fireworkFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--fw-x), var(--fw-y)) scale(0.4); opacity: 0; }
}

/* ===== Board focus (solo view of one board — see static/board/zoom.js) ===== */

.life-counter-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Per-player focus trigger, sitting below the life total. A full pill button
   (not a bare icon) so it reads as "focus this board". Hidden until the life
   counter is hovered (like the deck's auto-draw toggle) so the counter stays
   compact at rest; collapses via max-height/opacity so the reveal animates
   instead of making the counter jump on hover. */
.life-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 auto;
  padding: 4px 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.22), rgba(76, 175, 80, 0.12));
  border: 1px solid rgba(76, 175, 80, 0.55);
  border-radius: 14px;
  color: #cdeecf;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 1;
  transition: all 0.2s ease;

  i {
    font-size: 12px;
  }
}

/* Reveal the focus button only while its life counter is hovered. */
.life-counter:hover .life-zoom-btn {
  max-height: 40px;
  margin-top: 6px;
  opacity: 1;

  &:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.4), rgba(76, 175, 80, 0.25));
    border-color: #81c784;
    color: #fff;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
  }
}

/* Everything that isn't the focused player steps aside while focused: the
   other players' board furniture, the life counters, the split-layout zone
   frames — leaving a single full-height board like the solo waiting room. */
.focus-hidden {
  display: none !important;
}

/* While focused the board fills the real viewport: the wrapper normally clips
   to a shorter height, which would crop the fixed focus layout. */
.multi-wrapper.board-focused {
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
}

/* While focused, the focus controls own the top-right corner and the turn
   indicator stacks directly beneath them (both were centred, so they used to
   overlap). Right-aligned so their varying widths grow leftwards, clear of
   each other. */
.multi-wrapper.board-focused .turn-indicator {
  top: 64px;
  right: 16px;
  left: auto;
  transform: none;
}

/* The turn-active colored border/::before is a split-layout quadrant
   affordance (highlightPlayerBattlefield/highlightOpponentBattlefield in
   turns.js draw it on .board-wrapper / .opponent-board). While focused the
   board is a single full-screen solo surface, so that border would stretch
   across the whole screen (and in 3+ games a non-focused current-turn
   player's border can flash mid-screen). Suppress it entirely while focused;
   the moved turn-indicator pill above still says whose turn it is. */
.multi-wrapper.board-focused .board-wrapper::before,
.multi-wrapper.board-focused .opponent-board::before {
  display: none !important;
}

/* Focusing an opponent hides my board furniture — but keep the turn indicator
   visible (it lives inside .board-wrapper), so hide the wrapper's other
   children rather than the wrapper itself. */
.multi-wrapper.board-focused-opp .board-wrapper > *:not(.turn-indicator) {
  display: none !important;
}

/* Self focus pins the hand to the bottom of the screen; lift the deck column
   above it (--focus-hand-h is the live hand height, set in board/zoom.js) so it
   doesn't hide behind the hand. The game menu keeps its place but rises above
   the hand row so it stays usable. */
.multi-wrapper.board-focused-self .board-wrapper .deck-display {
  bottom: calc(var(--focus-hand-h, 80px) + 16px);
}
.multi-wrapper.board-focused-self .board-wrapper .deck-drop-zone {
  bottom: calc(var(--focus-hand-h, 80px) + 96px);
}
.multi-wrapper.board-focused-self .board-wrapper .deck-bottom-drop-zone {
  bottom: calc(var(--focus-hand-h, 80px) + 28px);
}
.multi-wrapper.board-focused-self .game-menu {
  z-index: 60001;
}

/* The focused player's background, painted with their own board style and
   sitting behind the (z-index 1) battlefield cards. */
.focus-surface {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 0;
  pointer-events: none;
  .board-surface();
}

/* Face-down copy of a focused opponent's hand, pinned to the bottom. */
.focus-opp-hand {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 60000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  background-color: rgba(24, 27, 32, 0.82);

  .focus-hand-back {
    position: relative;
    flex-shrink: 0;
    background-color: #444;
    background-image: url("../Magic_card_back.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
}

/* Floating focus controls, sibling of the battlefield-wrapper. */
.board-focus-controls {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 69000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(20, 20, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);

  .board-focus-label {
    color: #eee;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button {
    background: linear-gradient(135deg, rgba(70, 70, 70, 0.95), rgba(45, 45, 45, 0.95));
    border: 1px solid rgba(150, 150, 150, 0.5);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: linear-gradient(135deg, rgba(95, 95, 95, 0.95), rgba(65, 65, 65, 0.95));
      border-color: rgba(200, 200, 200, 0.8);
      transform: scale(1.08);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .board-focus-exit {
    border-color: rgba(244, 67, 54, 0.6);

    &:hover {
      border-color: rgba(244, 67, 54, 0.9);
      box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
    }
  }
}

////////////////////////////////////////////
// Restore picker: the last few board saves (board/restore-points.js).
// Same window furniture as the marker/token modals.
////////////////////////////////////////////

.restore-point-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.restore-point-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.restore-point-content {
  position: relative;
  z-index: 10001;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 420px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.restore-point-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;

  h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;

    i {
      margin-right: 8px;
      color: rgba(255, 255, 255, 0.6);
    }
  }
}

.restore-point-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;

  &:hover {
    color: #fff;
  }
}

.restore-point-hint {
  padding: 12px 22px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.restore-point-list {
  padding: 12px 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.restore-point-entry {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
  }

  .restore-point-turn {
    font-weight: 600;
    font-size: 14px;
  }

  .restore-point-stats {
    color: rgba(255, 255, 255, 0.75);

    i {
      color: rgba(255, 255, 255, 0.45);
      margin-right: 4px;
    }
  }

  .restore-point-time {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .restore-point-content {
    min-width: 0;
    width: 92vw;
  }

  .restore-point-entry {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}