:root {
      --text: #eaf4ff;
      --muted: #90a8c3;
      --accent: #86c8ff;
      --line: rgba(108, 155, 219, 0.26);
      --card-w: min(28vw, 180px);
      --card-h: calc(var(--card-w) * 1.38);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      margin: 0;
      min-height: 100%;
      background:
        radial-gradient(circle at 20% 18%, rgba(29, 77, 128, 0.32), transparent 28%),
        radial-gradient(circle at 80% 12%, rgba(39, 102, 77, 0.20), transparent 24%),
        linear-gradient(180deg, #09111b 0%, #06090f 100%);
      color: var(--text);
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at center, black 40%, transparent 95%);
      pointer-events: none;
      opacity: 0.4;
    }

    .hud {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 22px;
      padding: 24px 16px 42px;
    }

    .title-box {
      position: absolute;
      top: 20px;
      left: 16px;
      right: 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      z-index: 5;
      pointer-events: none;
    }

    .label-panel {
      padding: 10px 14px;
      background: linear-gradient(180deg, rgba(16, 28, 44, 0.82), rgba(8, 13, 21, 0.72));
      border: 1px solid var(--line);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 10px 30px rgba(0,0,0,0.25);
      backdrop-filter: blur(8px);
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    }

    .label-panel strong {
      display: block;
      font-size: 14px;
      letter-spacing: 0.24em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .label-panel span {
      display: block;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .toolbar {
      position: absolute;
      top: 82px;
      right: 16px;
      z-index: 6;
    }

    .codex-button,
    .arrow-button,
    .map-button,
    .codex-close {
      cursor: pointer;
      transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
    }

    .codex-button:hover,
    .arrow-button:hover,
    .map-button:hover,
    .codex-close:hover,
    .codex-button:focus-visible,
    .arrow-button:focus-visible,
    .map-button:focus-visible,
    .codex-close:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .codex-button {
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(141, 190, 255, 0.28);
      background: linear-gradient(180deg, rgba(16, 28, 44, 0.92), rgba(8, 13, 21, 0.82));
      color: var(--text);
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .map-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      min-height: calc(var(--card-h) + 24px);
      z-index: 2;
    }

    .arrow-button {
      width: 44px;
      height: 64px;
      border-radius: 12px;
      border: 1px solid rgba(141, 190, 255, 0.28);
      background: linear-gradient(180deg, rgba(19, 31, 48, 0.92), rgba(7, 10, 16, 0.82));
      color: #d7ecff;
      font-size: 26px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    }

    .map-button {
      width: var(--card-w);
      height: var(--card-h);
      padding: 0;
      position: relative;
      background: none;
      border: none;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,0.38));
    }

    .shell,
    .card-face {
      position: absolute;
      inset: 0;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .tactical-frame {
      border: 1px solid rgba(141, 190, 255, 0.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 0 28px rgba(47, 110, 180, 0.12), 0 14px 35px rgba(0,0,0,0.35);
    }

    .shell {
      background: radial-gradient(circle at 50% 32%, rgba(78, 146, 220, 0.16), transparent 25%), linear-gradient(145deg, #090909, #111111 45%, #050505 100%);
    }

    .shell::before,
    .card-back::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 14px;
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 10px);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .core {
      position: absolute;
      inset: 22px;
      border-radius: 14px;
      border: 1px solid rgba(151, 214, 255, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(180deg, rgba(18, 31, 46, 0.72), rgba(7, 11, 17, 0.35));
      padding: 10px;
    }

    .button-title {
      color: #dff1ff;
      font-size: clamp(18px, 3vw, 26px);
      font-weight: 800;
      letter-spacing: 0.18em;
      text-align: center;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-shadow: 0 0 16px rgba(122, 198, 255, 0.18);
      user-select: none;
    }

    .map-cost {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      color: #eaf4ff;
      background: rgba(10, 16, 26, 0.72);
      border: 1px solid rgba(141, 190, 255, 0.18);
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .spawn-area {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(10px, 2.6vw, 26px);
      min-height: calc(var(--card-h) + 24px);
      perspective: 1400px;
    }

    .cards.hidden {
      display: none;
    }

    .game-card {
      width: var(--card-w);
      height: var(--card-h);
      position: relative;
      transform-style: preserve-3d;
      cursor: pointer;
      animation: popIn 0.56s cubic-bezier(0.2, 0.85, 0.25, 1);
      will-change: transform, opacity;
    }

    .game-card:nth-child(1) { animation-delay: 0.02s; }
    .game-card:nth-child(2) { animation-delay: 0.09s; }
    .game-card:nth-child(3) { animation-delay: 0.16s; }

    .card-inner {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transition: transform 0.72s cubic-bezier(0.2, 0.75, 0.2, 1);
    }

    .game-card.flipped .card-inner {
      transform: rotateY(180deg);
    }

    .card-face {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .card-back {
      background: linear-gradient(145deg, #000000, #131313 45%, #070707 100%);
    }

    .card-front {
      transform: rotateY(180deg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 14px 12px 14px;
      color: #0c1116;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    }

    .card-front::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 14px;
      border: 1px solid rgba(12, 17, 24, 0.12);
      pointer-events: none;
    }

    .card-topline {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      z-index: 1;
      opacity: 0;
      transform: translateY(-6px) translateZ(6px);
      transition: opacity 0.28s ease, transform 0.28s ease;
      transition-delay: 0.08s;
    }

    .icon-wrap {
      position: relative;
      z-index: 1;
      width: 72%;
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      filter: drop-shadow(0 10px 10px rgba(0,0,0,0.18));
      transition: transform 0.34s ease, opacity 0.34s ease;
      transform: translateZ(6px);
    }

    .item-name {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 10px 8px 0;
      font-size: clamp(13px, 1.8vw, 16px);
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #0d1622;
      text-shadow: 0 1px 0 rgba(255,255,255,0.15);
      opacity: 0;
      transform: translateY(8px) translateZ(6px);
      transition: opacity 0.32s ease, transform 0.32s ease;
      transition-delay: 0.18s;
      white-space: nowrap;
    }

    .game-card.flipped .item-name,
    .game-card.flipped .card-topline {
      opacity: 1;
      transform: translateY(0) translateZ(6px);
    }

    .game-card.flipped .icon-wrap {
      transform: scale(1.03) translateZ(6px);
    }

    .rarity-tag {
      position: absolute;
      right: 12px;
      bottom: 12px;
      font-size: 10px;
      letter-spacing: 0.16em;
      opacity: 0.58;
      transform: translateZ(6px);
    }

    .game-card.removing {
      animation: fadeOut 0.42s ease forwards;
      pointer-events: none;
    }

    .burn-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      overflow: hidden;
      border-radius: var(--radius);
      z-index: 4;
      mix-blend-mode: screen;
    }

    .game-card.removing .burn-layer {
      opacity: 1;
    }

    .flame {
      position: absolute;
      bottom: -12px;
      width: 30%;
      aspect-ratio: 0.62 / 1;
      background: radial-gradient(circle at 50% 68%, rgba(255,245,182,0.95) 0 20%, rgba(255,163,58,0.95) 35%, rgba(255,78,23,0.85) 68%, rgba(255,0,0,0) 100%);
      border-radius: 50% 50% 55% 55%;
      filter: blur(1px);
      transform-origin: bottom center;
      animation: flameRise 0.5s ease-out forwards;
    }

    .flame.f1 { left: 8%; }
    .flame.f2 { left: 34%; width: 34%; animation-delay: 0.04s; }
    .flame.f3 { left: 62%; width: 26%; animation-delay: 0.08s; }

    .bg-white { background: linear-gradient(180deg, #fcfcfc 0%, #e7eaee 100%); }
    .bg-green { background: linear-gradient(180deg, #78b98f 0%, #497a59 100%); }
    .bg-blue  { background: linear-gradient(180deg, #78a6d7 0%, #406182 100%); }
    .bg-purple{ background: linear-gradient(180deg, #9d84cb 0%, #61467f 100%); }
    .bg-gold  { background: linear-gradient(180deg, #f4d97d 0%, #bf9434 100%); }
    .bg-red   { background: linear-gradient(180deg, #d86d6d 0%, #962d2d 100%); }

    .icon-svg {
      width: 100%;
      height: 100%;
    }

    .icon-svg .s-dark { fill: rgba(13,19,28,0.92); }
    .icon-svg .s-mid { fill: rgba(24,36,48,0.78); }
    .icon-svg .s-light { fill: rgba(255,255,255,0.82); }
    .icon-svg .stroke { stroke: rgba(13,19,28,0.92); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; fill: none; }

    .hint {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-align: center;
      padding: 10px 14px;
      background: rgba(7,11,18,0.42);
      border: 1px solid rgba(112,156,212,0.18);
      border-radius: 999px;
      backdrop-filter: blur(4px);
      max-width: calc(100vw - 24px);
    }

    .toast {
      position: fixed;
      left: 50%;
      top: 88px;
      transform: translateX(-50%);
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(116,12,12,0.88);
      color: #ffd7d7;
      border: 1px solid rgba(255,98,98,0.28);
      box-shadow: 0 10px 24px rgba(0,0,0,0.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
      z-index: 20;
    }

    .toast.show {
      opacity: 1;
    }

    .codex-overlay {
      position: fixed;
      inset: 0;
      background: rgba(5,8,14,0.72);
      backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 30;
      padding: 18px;
    }

    .codex-overlay.open {
      display: flex;
    }

    .codex-panel {
      width: min(920px, 100%);
      max-height: min(84vh, 860px);
      overflow: auto;
      background: linear-gradient(180deg, rgba(13,21,34,0.96), rgba(7,10,17,0.96));
      border: 1px solid rgba(141,190,255,0.24);
      border-radius: 22px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
      padding: 20px;
    }

    .codex-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .codex-title {
      font-size: 20px;
      letter-spacing: 0.14em;
      color: #dff1ff;
      font-weight: 800;
    }

    .codex-close {
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid rgba(141,190,255,0.22);
      background: rgba(15,25,39,0.9);
      color: #dff1ff;
    }

    .codex-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
    }

    .codex-item {
      background: linear-gradient(180deg, rgba(26,19,22,0.95), rgba(14,9,11,0.95));
      border: 1px solid rgba(255,92,92,0.18);
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 210px;
    }

    .codex-item.locked {
      background: linear-gradient(180deg, rgba(18,22,28,0.95), rgba(10,13,19,0.95));
      border-color: rgba(141,190,255,0.12);
    }

    .codex-icon {
      height: 90px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #d86d6d 0%, #962d2d 100%);
    }

    .codex-item.locked .codex-icon {
      background: linear-gradient(180deg, #3b4653 0%, #1e252d 100%);
      color: #92a2b5;
      font-size: 26px;
      letter-spacing: 0.08em;
      font-weight: 700;
    }

    .codex-name {
      font-size: 15px;
      font-weight: 700;
      color: #f5f8ff;
      letter-spacing: 0.04em;
    }

    .codex-price {
      color: #f1b6b6;
      font-size: 13px;
      letter-spacing: 0.04em;
    }

    .codex-item.locked .codex-name,
    .codex-item.locked .codex-price {
      color: #96a5b7;
    }

    @keyframes popIn {
      0% { opacity: 0; transform: translateY(28px) scale(0.78); }
      55% { opacity: 1; transform: translateY(-6px) scale(1.03); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes fadeOut {
      0% { opacity: 1; transform: scale(1); filter: brightness(1); }
      35% { opacity: 1; transform: translateY(-2px) scale(1.02); filter: brightness(1.18); }
      100% { opacity: 0; transform: translateY(16px) scale(0.86); filter: brightness(0.7); }
    }

    @keyframes flameRise {
      0% { opacity: 0; transform: translateY(12px) scale(0.7); }
      20% { opacity: 0.95; }
      100% { opacity: 0; transform: translateY(-26px) scale(1.25); }
    }

    @media (max-width: 780px) {
      :root { --card-w: min(28vw, 144px); }
      .hud { padding-top: 88px; gap: 20px; }
      .title-box { top: 10px; }
      .label-panel strong { font-size: 12px; }
      .label-panel span { font-size: 11px; }
      .toolbar { top: 76px; }
    }

    @media (max-width: 480px) {
      :root { --card-w: 29vw; }
      .title-box { flex-direction: column; align-items: stretch; }
      .arrow-button { width: 38px; height: 58px; }
      .item-name { font-size: 12px; padding-top: 6px; }
      .icon-wrap { width: 76%; }
      .codex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


/* ===== 地图按钮主题升级（基于当前地图名切换） ===== */

.map-button .shell {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.map-button .core {
  justify-content: flex-end;
  padding: 84px 10px 28px;
  overflow: hidden;
}

.map-button .core::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 46%;
  border-radius: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% auto;
  opacity: 0.95;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.22));
  pointer-events: none;
}

.button-title {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 44px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0.12em;
  font-size: clamp(14px, 1.9vw, 18px);
  line-height: 1.25;
}

.map-cost {
  bottom: 12px;
}

/* 零号大坝：浅灰 + 大坝 */
#drawButton[aria-label*="零号大坝"] .shell {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(180deg, #d5d8de 0%, #a7adb6 48%, #7f8791 100%);
}

#drawButton[aria-label*="零号大坝"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><rect x='10' y='12' width='80' height='30' rx='6' fill='rgba(52,66,84,0.9)'/><rect x='16' y='18' width='10' height='18' rx='2' fill='rgba(232,240,248,0.85)'/><rect x='31' y='18' width='10' height='18' rx='2' fill='rgba(232,240,248,0.85)'/><rect x='46' y='18' width='10' height='18' rx='2' fill='rgba(232,240,248,0.85)'/><rect x='61' y='18' width='10' height='18' rx='2' fill='rgba(232,240,248,0.85)'/><rect x='76' y='18' width='8' height='18' rx='2' fill='rgba(232,240,248,0.85)'/><path d='M14 42 C26 48, 40 50, 50 50 C62 50, 75 47, 86 42' stroke='rgba(201,230,255,0.95)' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");
}

/* 长弓溪谷：黄土 + 峡谷 */
#drawButton[aria-label*="长弓溪谷"] .shell {
  background:
    radial-gradient(circle at 24% 22%, rgba(255,232,185,0.18), transparent 26%),
    linear-gradient(180deg, #d9b374 0%, #b17b47 52%, #7f5132 100%);
}

#drawButton[aria-label*="长弓溪谷"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M12 46 L28 18 L42 36 L55 16 L72 42 L88 22' stroke='rgba(72,45,28,0.92)' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M24 46 C34 36, 44 33, 54 34 C63 35, 73 39, 84 46' stroke='rgba(255,236,202,0.9)' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");
}

/* 巴克十：浅灰蓝 + 科技塔 */
#drawButton[aria-label*="巴克十"] .shell {
  background:
    radial-gradient(circle at 30% 18%, rgba(226,243,255,0.14), transparent 24%),
    linear-gradient(180deg, #bcc9d9 0%, #7f96ad 54%, #53677e 100%);
}

#drawButton[aria-label*="巴克十"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M50 10 L64 20 L58 46 L42 46 L36 20 Z' fill='rgba(31,50,70,0.94)'/><path d='M46 18 H54 M44 24 H56 M43 30 H57 M42 36 H58' stroke='rgba(222,244,255,0.9)' stroke-width='2.6' stroke-linecap='round'/><path d='M28 46 H72' stroke='rgba(222,244,255,0.9)' stroke-width='4' stroke-linecap='round'/><circle cx='50' cy='14' r='4' fill='rgba(222,244,255,0.9)'/></svg>");
}

/* 黑夜大坝：深蓝 + 大坝 + 上半部分星点 */
#drawButton[aria-label*="黑夜大坝"] .shell {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 18%, rgba(255,255,255,0.20) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 10%, rgba(255,255,255,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 16%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 26%, rgba(255,255,255,0.16) 0 1px, transparent 2px),
    linear-gradient(180deg, #18335d 0%, #0e1f3c 48%, #091222 100%);
  background-repeat: no-repeat;
}

#drawButton[aria-label*="黑夜大坝"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><rect x='10' y='13' width='80' height='28' rx='6' fill='rgba(214,231,255,0.18)' stroke='rgba(225,240,255,0.72)' stroke-width='2'/><rect x='18' y='18' width='9' height='16' rx='2' fill='rgba(225,240,255,0.8)'/><rect x='33' y='18' width='9' height='16' rx='2' fill='rgba(225,240,255,0.8)'/><rect x='48' y='18' width='9' height='16' rx='2' fill='rgba(225,240,255,0.8)'/><rect x='63' y='18' width='9' height='16' rx='2' fill='rgba(225,240,255,0.8)'/><rect x='77' y='18' width='6' height='16' rx='2' fill='rgba(225,240,255,0.8)'/><path d='M14 44 C24 49, 36 51, 50 51 C63 51, 76 48, 86 44' stroke='rgba(160,214,255,0.95)' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");
}

/* 航天基地：橙色 + 火箭 */
#drawButton[aria-label*="航天基地"] .shell {
  background:
    radial-gradient(circle at 26% 18%, rgba(255,244,214,0.18), transparent 24%),
    linear-gradient(180deg, #f39a42 0%, #d96524 52%, #983b14 100%);
}

#drawButton[aria-label*="航天基地"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><path d='M50 10 C58 18, 60 28, 60 42 H40 C40 28, 42 18, 50 10 Z' fill='rgba(255,242,223,0.92)'/><circle cx='50' cy='26' r='5' fill='rgba(233,121,50,0.95)'/><path d='M40 34 L30 42 L40 44 Z M60 34 L70 42 L60 44 Z' fill='rgba(77,30,15,0.88)'/><path d='M44 42 L40 54 L50 48 L60 54 L56 42 Z' fill='rgba(255,174,77,0.95)'/></svg>");
}

/* 潮汐监狱：红色 + 监狱 */
#drawButton[aria-label*="潮汐监狱"] .shell {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,228,228,0.12), transparent 24%),
    linear-gradient(180deg, #b74747 0%, #7e2323 54%, #4a1111 100%);
}

#drawButton[aria-label*="潮汐监狱"] .core::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'><rect x='18' y='16' width='64' height='30' rx='5' fill='rgba(255,234,234,0.2)' stroke='rgba(255,235,235,0.82)' stroke-width='2'/><path d='M30 18 V44 M40 18 V44 M50 18 V44 M60 18 V44 M70 18 V44' stroke='rgba(255,235,235,0.9)' stroke-width='3' stroke-linecap='round'/><path d='M18 46 H82' stroke='rgba(255,235,235,0.92)' stroke-width='4' stroke-linecap='round'/></svg>");
}

@media (max-width: 780px) {
  .map-button .core {
    padding-top: 74px;
  }

  .button-title {
    bottom: 42px;
    font-size: 14px;
  }

  .map-button .core::before {
    background-size: 78% auto;
  }
}

@media (max-width: 480px) {
  .map-button .core {
    padding-top: 64px;
    padding-bottom: 26px;
  }

  .button-title {
    bottom: 40px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .map-button .core::before {
    top: 8px;
    left: 8px;
    right: 8px;
    height: 44%;
    background-size: 82% auto;
  }
}


/* ===== 零号大坝特殊事件：破壁卡牌 ===== */
.rupture-card {
  margin-left: clamp(18px, 4vw, 42px);
}

.rupture-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,184,120,0.14), transparent 28%),
    linear-gradient(145deg, #000000, #131313 45%, #070707 100%);
}

.rupture-back::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,158,68,0.18), transparent 18%),
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg 18deg,
      rgba(255,196,132,0.11) 18deg 24deg,
      transparent 24deg 60deg,
      rgba(255,196,132,0.10) 60deg 66deg,
      transparent 66deg 120deg,
      rgba(255,196,132,0.09) 120deg 126deg,
      transparent 126deg 180deg,
      rgba(255,196,132,0.11) 180deg 186deg,
      transparent 186deg 240deg,
      rgba(255,196,132,0.10) 240deg 246deg,
      transparent 246deg 300deg,
      rgba(255,196,132,0.09) 300deg 306deg,
      transparent 306deg 360deg);
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 480px) {
  .rupture-card {
    margin-left: 12px;
  }
}