/* Ultimate Stars stylesheet 1.
   Original base stylesheet block.
   Keep file order stable unless you are intentionally changing the cascade. */
    :root {
      --bg: #090a14;
      --bg-soft: #111426;
      --panel: rgba(20, 24, 44, 0.88);
      --panel-strong: rgba(15, 18, 32, 0.98);
      --text: #f6f7ff;
      --muted: #9aa3c7;
      --line: rgba(255, 255, 255, 0.12);
      --good: #47e6a1;
      --warn: #ffd166;
      --danger: #ff5c7a;
      --accent: #8b5cf6;
      --accent-2: #22d3ee;
      --gold: #f7c948;
      --radius: 22px;
      --shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(139, 92, 246, 0.30), transparent 32%),
        radial-gradient(circle at 82% 0%, rgba(34, 211, 238, 0.20), transparent 30%),
        linear-gradient(135deg, #070812 0%, #111426 54%, #080a14 100%);
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }
    body.modal-open .app { visibility: hidden; pointer-events: none; }
    body.modal-open::before { display: none; }

    button, input, select { font: inherit; }
    button {
      border: 0;
      cursor: pointer;
      color: var(--text);
      transition: transform .14s ease, opacity .14s ease, background .14s ease;
    }
    button:hover:not(:disabled) { transform: translateY(-1px); }
    button:disabled { cursor: not-allowed; opacity: .45; }

    .app { width: min(1440px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 42px; }
    .screen { display: none; }
    .screen.active { display: block; }

    .panel, .hero-card, .menu-card, .slot, .modal-shell {
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(19, 23, 43, .92), rgba(12, 14, 26, .78));
      border-radius: 28px;
      box-shadow: var(--shadow);
    }
    .panel { padding: 18px; }

    .topbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 18px;
    }
    .brand { display: flex; flex-direction: column; gap: 4px; }
    .brand strong { font-size: clamp(28px, 4vw, 54px); line-height: .9; letter-spacing: -.07em; }
    .brand span { color: var(--muted); font-size: 13px; }
    .gradient-text { background: linear-gradient(90deg, #fff, #a78bfa, #67e8f9, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .nav-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

    .btn {
      border-radius: 16px;
      padding: 12px 16px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.11);
      font-weight: 800;
    }
    .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 18px rgba(99,102,241,.22); }
    .btn-danger { background: rgba(255, 92, 122, .14); border-color: rgba(255, 92, 122, .25); }
    .btn-small { padding: 8px 11px; border-radius: 12px; font-size: 13px; }

    .home-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      min-height: 70vh;
      align-content: center;
    }
    .hero-card { padding: 30px; overflow: hidden; position: relative; }
    .hero-card::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: conic-gradient(from 180deg, rgba(139,92,246,.48), rgba(34,211,238,.30), rgba(247,201,72,.24), rgba(139,92,246,.48));
      opacity: .7;
    }
    .hero-card h1 { margin: 12px 0; font-size: clamp(48px, 8vw, 100px); line-height: .88; letter-spacing: -.08em; }
    .hero-card p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.65; }
    .menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .menu-card { padding: 22px; min-height: 180px; display: grid; align-content: space-between; text-align: left; }
    .menu-card strong { display: block; font-size: 26px; letter-spacing: -.04em; }
    .menu-card span { display: block; margin-top: 8px; color: var(--muted); line-height: 1.45; }

    .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
    .page-head h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: .95; letter-spacing: -.06em; }
    .page-head p { color: var(--muted); margin: 7px 0 0; max-width: 740px; line-height: 1.5; }

    .deck-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
    .slot { min-height: 315px; padding: 12px; display: grid; place-items: center; border-style: dashed; position: relative; }
    .slot.filled { border-style: solid; }
    .slot-empty { color: var(--muted); text-align: center; font-weight: 800; }
    .slot .remove-slot { position: absolute; top: 10px; right: 10px; z-index: 8; }
    .deck-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
    .pill {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      border-radius: 999px;
      padding: 9px 12px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.11);
      color: #eef2ff;
      font-size: 13px;
      font-weight: 800;
    }
    .valid { color: var(--good); }
    .invalid { color: var(--danger); }
    .warning { color: var(--warn); }

    .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
    .input, .select {
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      padding: 12px 13px;
      outline: none;
    }
    .input { flex: 1 1 260px; min-width: 0; }
    .select { flex: 0 0 220px; }

    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)); gap: 16px; }
    .small-card-grid { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 12px; }
    .game-card {
      position: relative;
      min-height: 286px;
      border-radius: var(--radius);
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(255,255,255,.16);
      background: #151829;
      box-shadow: 0 8px 18px rgba(0,0,0,.30);
      transition: transform .16s ease, opacity .16s ease;
      contain: layout paint style;
      user-select: none;
    }
    .game-card.selectable { cursor: pointer; }
    .game-card.selectable:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.34); }
    .game-card.disabled, .game-card.locked { opacity: .34; filter: grayscale(.35); }
    .game-card.selected { outline: 2px solid var(--good); }
    .game-card.used { opacity: .35; pointer-events: none; }
    .game-card.dragging { opacity: .55; }
    .game-card.compact { min-height: 205px; border-radius: 17px; }
    .game-card.compact .rating-badge { width: 42px; height: 42px; font-size: 16px; border-radius: 13px; }
    .game-card.compact .type-ribbon { display: none; }
    .game-card.compact .attr-grid { display: none; }
    .game-card.compact .card-name { font-size: 13px; }
    .game-card.compact .card-content { padding: 60px 10px 10px; }

    .card-art { position: absolute; inset: 0; z-index: -3; background: linear-gradient(145deg, rgba(139,92,246,.34), rgba(34,211,238,.18)); }
    .card-art img, .card-art video { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; background: #111426; }
    .card-art video { pointer-events: none; }
    .placeholder-art {
      width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 18px;
      color: rgba(255,255,255,.72); font-weight: 1000; letter-spacing: .09em; text-transform: uppercase;
      background: linear-gradient(145deg, rgba(139,92,246,.42), rgba(247,201,72,.18));
    }
    .game-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgba(5,6,12,.04), rgba(5,6,12,.28) 46%, rgba(5,6,12,.92)); }
    .game-card::after { content: ""; position: absolute; inset: 8px; z-index: -1; border: 1px solid rgba(255,255,255,.17); border-radius: 17px; pointer-events: none; }
    .type-hero { --type-a: #8b5cf6; --type-b: #22d3ee; }
    .type-evolution { --type-a: #10b981; --type-b: #67e8f9; }
    .type-icon { --type-a: #f7c948; --type-b: #f97316; }
    .type-timewarp { --type-a: #e879f9; --type-b: #60a5fa; }
    .type-future { --type-a: #22c55e; --type-b: #a3e635; }
    .type-birthday { --type-a: #fb7185; --type-b: #facc15; }
    .type-moments { --type-a: #38bdf8; --type-b: #818cf8; }
    .type-star { --type-a: #f43f5e; --type-b: #a855f7; }
    .type-champion { --type-a: #fde68a; --type-b: #f59e0b; }
    .rating-badge { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: linear-gradient(145deg, var(--type-a), var(--type-b)); box-shadow: 0 6px 16px rgba(0,0,0,.24); font-weight: 1000; font-size: 20px; border: 1px solid rgba(255,255,255,.34); }
    .type-ribbon { position: absolute; top: 15px; right: 12px; max-width: 108px; padding: 7px 9px; border-radius: 999px; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.16); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
    .card-shine { position: absolute; inset: -40% -60% auto auto; width: 150px; height: 300px; transform: rotate(28deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity: .5; }
    .card-content { position: absolute; inset: auto 0 0; padding: 74px 12px 12px; }
    .card-name { margin: 0 0 9px; font-size: 17px; line-height: 1.04; letter-spacing: -.04em; text-shadow: 0 2px 14px rgba(0,0,0,.76); }
    .attr-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
    .attr { border-radius: 10px; padding: 6px 5px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.11); text-align: center; }
    .attr span { display: block; color: rgba(255,255,255,.7); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
    .attr strong { display: block; margin-top: 1px; font-size: 14px; }
    .lock-label { position: absolute; inset: auto 10px 10px 10px; z-index: 10; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.70); text-align: center; font-weight: 900; font-size: 12px; }

    .mode-grid {
      display: grid;
      grid-template-columns: minmax(0, 1120px);
      gap: 16px;
      justify-content: start;
    }
    .mode-card { min-height: 190px; padding: 22px; text-align: left; }
    .mode-card strong { display: block; font-size: 26px; letter-spacing: -.04em; }
    .mode-card span { display: block; color: var(--muted); margin: 8px 0 18px; line-height: 1.45; }

    .duel-mode-card {
      position: relative;
      min-height: 330px;
      padding: 0;
      overflow: hidden;
      border-radius: 30px;
      border: 2px solid rgba(34, 211, 238, .58);
      background:
        linear-gradient(90deg,
          rgba(5, 8, 20, .03) 0%,
          rgba(5, 8, 20, .08) 32%,
          rgba(5, 8, 20, .44) 58%,
          rgba(5, 8, 20, .66) 100%),
        url("https://pub-bfced383e45f41c5a685b6ae7b631fc4.r2.dev/images/duel_1.png") center center / cover no-repeat;
      box-shadow:
        0 18px 36px rgba(0, 0, 0, .34),
        0 0 22px rgba(34, 211, 238, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .12);
      isolation: isolate;
    }

    .duel-mode-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.13), transparent 22%),
        linear-gradient(90deg, transparent 0%, rgba(12, 16, 34, .16) 45%, rgba(6, 9, 20, .42) 72%, rgba(6, 9, 20, .58) 100%);
      z-index: 0;
      pointer-events: none;
    }

    .duel-mode-card::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.14);
      pointer-events: none;
      z-index: 1;
    }

    .duel-mode-content {
      position: relative;
      z-index: 2;
      width: min(470px, 48%);
      min-height: 330px;
      margin-left: auto;
      padding: 40px 48px 38px 28px;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 13px;
    }

    .duel-mode-kicker {
      display: inline-flex;
      color: rgba(226, 241, 255, .86);
      text-shadow: 0 2px 10px rgba(0,0,0,.55);
      font-size: 13px;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .duel-mode-title {
      margin: 0;
      font-size: clamp(46px, 5vw, 72px);
      line-height: .9;
      letter-spacing: -.075em;
      color: #f4fbff;
      text-shadow: 0 4px 18px rgba(0,0,0,.62);
    }

    .duel-mode-text {
      margin: 0;
      max-width: 430px;
      color: rgba(246,247,255,.96);
      text-shadow: 0 2px 12px rgba(0,0,0,.58);
      font-size: clamp(15px, 1.22vw, 19px);
      line-height: 1.52;
      font-weight: 700;
    }

    .duel-mode-cta {
      margin-top: 10px;
      min-width: 224px;
      padding: 16px 26px;
      border-radius: 19px;
      border: 1px solid rgba(255,255,255,.22);
      background: linear-gradient(180deg, #ff3fad 0%, #e10078 100%);
      color: #fff;
      font-size: 18px;
      font-weight: 1000;
      letter-spacing: .02em;
      box-shadow:
        0 12px 24px rgba(225, 0, 120, .32),
        inset 0 -4px 0 rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.35);
    }

    .duel-mode-cta:hover:not(:disabled) {
      background: linear-gradient(180deg, #ff65be 0%, #f00082 100%);
      transform: translateY(-2px);
    }

    .duel-mode-cta::after {
      content: "→";
      margin-left: 12px;
      font-size: 23px;
      line-height: 1;
      vertical-align: -1px;
    }

    .duel-start-preview { display: grid; gap: 18px; }

    .battle-screen { min-height: calc(100vh - 64px); display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
    .battle-top { display: grid; grid-template-columns: 260px 1fr 260px; gap: 14px; align-items: start; }
    .round-requirement { min-height: 150px; }
    .round-requirement h3 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.04em; }
    .round-requirement p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
    .score-mini { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .enemy-row, .player-row { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 12px; align-items: center; }
    .enemy-card-back { min-height: 160px; border-radius: 16px; background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(34,211,238,.12)); border: 1px solid rgba(255,255,255,.16); overflow: hidden; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.26); }
    .enemy-card-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .enemy-back-fallback { font-weight: 1000; color: rgba(255,255,255,.76); letter-spacing: .08em; text-align: center; padding: 12px; }
    .enemy-card-back.used { opacity: .32; }

    .battle-arena { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; justify-items: center; }
    .drop-zone { width: min(310px, 100%); min-height: 430px; border-radius: 26px; border: 2px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.035); display: grid; place-items: center; padding: 14px; transition: border-color .15s ease, background .15s ease; }
    .drop-zone.over { border-color: var(--accent-2); background: rgba(34,211,238,.08); }
    .drop-zone .game-card { width: 100%; max-width: 250px; min-height: 360px; }
    .drop-empty { text-align: center; color: var(--muted); font-weight: 900; line-height: 1.5; }
    .battle-bottom .game-card { max-width: 170px; min-height: 245px; margin: 0 auto; }

    .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; background: rgba(4,5,10,.84); padding: 18px; }
    .modal.active { display: flex; }
    .modal-shell { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 20px; background: linear-gradient(145deg, rgba(15,18,32,.98), rgba(8,10,20,.98)); }
    .modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .modal-head strong { display: block; font-size: clamp(24px, 3vw, 40px); letter-spacing: -.05em; line-height: 1.05; }
    .modal-head span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 6px; }
    .collection-shell { width: min(1240px, calc(100vw - 24px)); }
    .collection-list { max-height: 68vh; overflow: auto; padding-right: 6px; }

    .stat-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .stat-choice-btn { min-height: 76px; border-radius: 18px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); display: grid; place-items: center; font-weight: 1000; font-size: 18px; }
    .stat-choice-btn:hover:not(:disabled), .stat-choice-btn.selected { background: linear-gradient(135deg, rgba(139,92,246,.38), rgba(34,211,238,.26)); border-color: rgba(71,230,161,.70); }
    .stat-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

    .duel-shell { width: min(1180px, calc(100vw - 24px)); }
    .duel-stage { display: grid; grid-template-columns: minmax(260px, 320px) minmax(360px, 500px) minmax(260px, 320px); gap: 18px; align-items: center; justify-content: center; }
    .duel-card-frame { width: 100%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); border-radius: 20px; padding: 10px; display: grid; justify-items: center; gap: 9px; }
    .duel-card-frame.winner { border-color: rgba(71,230,161,.70); background: linear-gradient(145deg, rgba(71,230,161,.13), rgba(139,92,246,.08)); }
    .duel-card-frame.loser { opacity: .78; }
    .duel-card-label { width: 100%; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    .duel-simple-card { position: relative; width: min(288px,100%); aspect-ratio: 3/4; border-radius: 19px; overflow: hidden; background: linear-gradient(145deg, rgba(139,92,246,.22), rgba(34,211,238,.12)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 18px rgba(0,0,0,.30); }
    .duel-simple-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; background: #111426; }
    .duel-simple-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,6,12,.02), rgba(5,6,12,.10) 50%, rgba(5,6,12,.76)); pointer-events: none; }
    .duel-simple-rating { position: absolute; left: 10px; top: 10px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(145deg, var(--type-a), var(--type-b)); border: 1px solid rgba(255,255,255,.28); font-weight: 1000; font-size: 20px; }
    .duel-simple-name { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: -.035em; text-shadow: 0 2px 10px rgba(0,0,0,.82); }
    .duel-simple-placeholder { width: 100%; height: 100%; display: grid; place-items: center; padding: 14px; text-align: center; color: rgba(255,255,255,.74); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: linear-gradient(145deg, rgba(139,92,246,.34), rgba(247,201,72,.16)); }
    .duel-center { display: grid; gap: 12px; text-align: center; align-content: center; min-width: 0; }
    .duel-score { width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius: 20px; padding: 18px 20px; }
    .duel-score strong { display: block; font-size: clamp(42px, 5.2vw, 70px); line-height: 1; letter-spacing: -.07em; }
    .duel-score span { display: block; color: var(--muted); margin-top: 7px; font-size: 12px; line-height: 1.35; }
    .duel-attrs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .duel-attrs .pill { padding: 6px 8px; font-size: 11px; }
    .duel-video-area { width: 100%; border: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.34); border-radius: 18px; overflow: hidden; }
    .duel-video-placeholder { min-height: 86px; display: grid; place-items: center; padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }
    .duel-video-area video { width: 100%; aspect-ratio: 16/9; max-height: 280px; display: block; background: #000; object-fit: contain; }
    .duel-timer { min-width: 72px; text-align: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); font-weight: 1000; }
    .duel-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

    .result-box-final { text-align: center; display: grid; gap: 14px; }
    .result-box-final h2 { margin: 0; font-size: clamp(38px, 6vw, 76px); letter-spacing: -.07em; }
    .result-box-final p { margin: 0; color: var(--muted); line-height: 1.55; }
    .result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }



    /* Match-flow Update: Match score centered between play fields + selection timer */
    .battle-top {
      grid-template-columns: 260px 1fr;
    }

    .score-mini {
      display: none !important;
    }

    .battle-arena {
      grid-template-columns: minmax(260px, 1fr) minmax(190px, 260px) minmax(260px, 1fr);
    }

    .battle-match-score {
      width: 100%;
      min-height: 152px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
      display: grid;
      place-items: center;
      text-align: center;
      padding: 18px;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }

    .battle-match-score strong {
      display: block;
      font-size: clamp(46px, 5.5vw, 82px);
      line-height: .9;
      letter-spacing: -.08em;
    }

    .battle-match-score span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .action-timer,
    .stat-timer {
      margin-top: 12px !important;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 9px 12px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.07);
      color: #eef2ff !important;
      font-weight: 900;
    }

    .action-timer strong,
    .stat-timer strong {
      color: var(--warn);
      font-size: 18px;
    }



    /* Update: Round info is now centered above the match score. */
    .battle-top {
      grid-template-columns: 1fr !important;
    }

    .round-requirement {
      display: none !important;
    }

    .battle-match-score {
      min-height: 210px;
      align-content: center;
      gap: 10px;
    }

    .battle-match-round {
      display: grid;
      gap: 6px;
      justify-items: center;
      margin-bottom: 2px;
    }

    .battle-match-round-title {
      font-size: clamp(22px, 2.4vw, 36px);
      font-weight: 1000;
      line-height: 1;
      letter-spacing: -.045em;
    }

    .battle-match-round-sub {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .battle-match-special {
      color: var(--warn);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }

    .battle-match-score .action-timer {
      margin-top: 4px !important;
    }

    .round-overview {
      display: grid;
      gap: 8px;
      margin: 6px auto 0;
      width: min(560px, 100%);
    }

    .round-overview-row {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      text-align: left;
    }

    .round-overview-row strong {
      color: var(--text);
      font-size: 14px;
    }

    .round-overview-row span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
    }

    .round-overview-result {
      font-weight: 1000;
      font-size: 13px;
    }

    .round-overview-result.win { color: var(--good); }
    .round-overview-result.loss { color: var(--danger); }
    .round-overview-result.draw { color: var(--warn); }

    .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(30px); opacity: 0; pointer-events: none; z-index: 120; background: rgba(16,19,34,.96); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(0,0,0,.34); border-radius: 999px; padding: 12px 16px; color: #eef2ff; transition: .22s ease; text-align: center; max-width: calc(100% - 28px); }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .hidden { display: none !important; }


    /* Fix: Cards had no stable width/height because of absolute content.
       This previously left only a thin line visible in the deck, duel setup, and arena.
       All cards now consistently use the 3:4 card format. */
    .game-card {
      width: 100%;
      aspect-ratio: 3 / 4;
      min-height: 0;
      height: auto;
    }

    .game-card.compact {
      min-height: 0;
      aspect-ratio: 3 / 4;
    }

    .slot {
      min-height: 345px;
    }

    .slot .game-card {
      width: min(235px, 100%);
      max-width: 235px;
    }

    .small-card-grid .game-card {
      width: 100%;
      max-width: none;
    }

    .small-card-grid .setup-empty-slot {
      width: 100%;
      min-height: 0;
      aspect-ratio: 3 / 4;
    }

    .battle-bottom .game-card {
      width: 100%;
      max-width: 170px;
      min-height: 0;
    }

    .drop-zone .game-card {
      width: 100%;
      max-width: 250px;
      min-height: 0;
    }

    .card-grid .game-card {
      width: 100%;
    }

    .player-row {
      align-items: start;
    }

    .battle-bottom {
      min-height: 250px;
    }



    /* Kompakte Deck-Seite + reine PNG-Cardsdarstellung */
    .deck-grid {
      gap: 12px;
      margin: 12px 0 14px;
    }

    .deckScreen-compact {}

    .slot {
      min-height: 238px !important;
      padding: 6px !important;
      background: rgba(255,255,255,.025);
    }

    .slot .game-card {
      width: min(178px, 100%) !important;
      max-width: 178px !important;
    }

    .slot-empty {
      font-size: 13px;
      opacity: .82;
    }

    .deck-summary {
      margin-bottom: 8px;
    }

    .deck-actions {
      justify-content: flex-start;
      gap: 12px;
      margin-top: 12px;
    }

    .deck-actions .btn {
      min-width: 140px;
      border-radius: 18px;
      padding: 13px 17px;
    }

    .btn-random {
      background: linear-gradient(135deg, rgba(247,201,72,.95), rgba(249,115,22,.92));
      color: #17111f;
      border-color: rgba(255,255,255,.24);
      box-shadow: 0 10px 22px rgba(249,115,22,.22), inset 0 1px 0 rgba(255,255,255,.42);
    }

    .btn-random:hover:not(:disabled) {
      background: linear-gradient(135deg, #ffe082, #fb923c);
    }

    .game-card {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
      isolation: auto !important;
    }

    .game-card::before,
    .game-card::after,
    .card-shine,
    .rating-badge,
    .type-ribbon,
    .card-content {
      display: none !important;
    }

    .card-art {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: transparent !important;
    }

    .card-art img,
    .card-art video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      background: transparent !important;
      display: block;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,.28));
    }

    .game-card.selectable:hover .card-art img,
    .game-card.selectable:hover .card-art video {
      filter: drop-shadow(0 14px 22px rgba(34,211,238,.23)) drop-shadow(0 6px 12px rgba(0,0,0,.28));
    }

    .game-card.selectable:hover {
      transform: translateY(-5px) scale(1.025);
      box-shadow: none !important;
    }

    .game-card.selected {
      outline: none !important;
      opacity: 1 !important;
    }

    .game-card.selected .card-art img,
    .game-card.selected .card-art video {
      filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 24px rgba(71,230,161,.62)) drop-shadow(0 14px 20px rgba(0,0,0,.30));
    }

    .game-card.selected::after {
      content: "✓ Im Deck";
      display: inline-flex !important;
      position: absolute;
      right: 4px;
      top: 4px;
      z-index: 8;
      align-items: center;
      justify-content: center;
      min-width: 92px;
      padding: 8px 11px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(71,230,161,.98), rgba(34,211,238,.92));
      color: #07111b;
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .01em;
      box-shadow: 0 10px 22px rgba(34,211,238,.28), inset 0 1px 0 rgba(255,255,255,.42);
      pointer-events: none;
    }

    .game-card.disabled,
    .game-card.locked {
      opacity: .30;
      filter: grayscale(.55);
    }

    .lock-label {
      z-index: 9;
      bottom: 16px;
    }

    .card-grid {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }

    .small-card-grid {
      gap: 10px;
    }

    .small-card-grid .game-card {
      max-width: 150px;
      margin: 0 auto;
    }

    .battle-bottom .game-card {
      max-width: 145px !important;
    }

    .drop-zone .game-card {
      max-width: 235px !important;
    }


    /* Feinschliff: Deck overview larger, still without vertical scrolling on typical desktop heights */
    #deckScreen .topbar {
      margin-bottom: 10px;
    }

    #deckScreen .brand strong {
      font-size: clamp(34px, 4vw, 50px);
    }

    #deckScreen .brand span {
      font-size: 12px;
    }

    #deckScreen .panel {
      padding: 14px 18px 16px;
    }

    #deckScreen .deck-summary {
      margin-bottom: 6px;
    }

    #deckScreen .pill {
      padding: 8px 11px;
      font-size: 12px;
    }

    #deckScreen .deck-grid {
      gap: 8px 16px;
      margin: 8px 0 10px;
    }

    #deckScreen .slot {
      min-height: clamp(238px, 28vh, 276px) !important;
      padding: 4px !important;
      align-content: center;
    }

    #deckScreen .slot .game-card {
      width: min(222px, 96%) !important;
      max-width: 222px !important;
    }

    #deckScreen .slot .remove-slot {
      top: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
    }

    #deckScreen .deck-actions {
      margin-top: 8px;
    }

    #deckScreen .deck-actions .btn {
      min-width: 132px;
      padding: 11px 15px;
      border-radius: 16px;
    }

    @media (min-height: 900px) {
      #deckScreen .slot {
        min-height: 292px !important;
      }

      #deckScreen .slot .game-card {
        width: min(238px, 96%) !important;
        max-width: 238px !important;
      }
    }

    @media (max-height: 760px) {
      #deckScreen .app,
      .app {
        padding-top: 16px;
      }

      #deckScreen .slot {
        min-height: 230px !important;
      }

      #deckScreen .slot .game-card {
        width: min(205px, 94%) !important;
        max-width: 205px !important;
      }
    }

    .duel-simple-card {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .duel-simple-card::after,
    .duel-simple-rating,
    .duel-simple-name {
      display: none !important;
    }

    .duel-simple-card img {
      object-fit: contain !important;
      background: transparent !important;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.32));
    }



    .duel-setup-actions {
      gap: 14px !important;
      align-items: center;
      margin-top: 10px;
    }

    .duel-setup-actions .btn {
      min-width: 140px;
      border-radius: 18px;
      padding: 13px 18px;
    }

    .duel-setup-actions .btn:not(.btn-primary) {
      background: rgba(255,255,255,.075);
      border-color: rgba(255,255,255,.16);
    }
    @media (max-width: 1120px) {
      .menu-grid, .mode-grid { grid-template-columns: 1fr; }
      .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .battle-top { grid-template-columns: 1fr; }
      .enemy-row, .player-row, .small-card-grid { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
      .battle-arena { grid-template-columns: 1fr; }
      .battle-match-score { order: -1; min-height: 110px; }
      .duel-stage { grid-template-columns: minmax(170px,1fr) minmax(260px,1.25fr) minmax(170px,1fr); gap: 12px; }
      .duel-simple-card { width: min(220px,100%); }
    }
    @media (max-width: 700px) {
      .app { width: min(100% - 18px, 1440px); padding-top: 12px; }
      .topbar, .page-head { flex-direction: column; align-items: stretch; }
      .enemy-row, .player-row, .small-card-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
      .deck-grid { grid-template-columns: 1fr; }
      .duel-stage { grid-template-columns: 1fr; }
      .duel-center { order: -1; }
      .stat-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .drop-zone { min-height: 300px; }
      .duel-mode-card { min-height: 360px; background-position: center center; }
      .duel-mode-card::before {
        background: linear-gradient(180deg, rgba(5,8,20,.10) 0%, rgba(5,8,20,.46) 48%, rgba(5,8,20,.68) 100%);
      }
      .duel-mode-content {
        width: 100%;
        min-height: 360px;
        margin-left: 0;
        padding: 170px 22px 26px;
      }
      .duel-mode-title { font-size: clamp(42px, 14vw, 62px); }
      .duel-mode-text { font-size: 15px; max-width: 100%; }
      .duel-mode-cta { width: 100%; min-width: 0; }
    }
  
    /* Update: Mein-Deck-Cards stand frei + dezente Auswahlmarkierung */
    #deckScreen .panel {
      overflow: hidden;
    }

    #deckScreen .deck-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      justify-items: center;
      align-items: center;
      gap: clamp(8px, 1.35vw, 18px) clamp(14px, 2vw, 34px);
      margin: 10px auto 12px;
      max-width: 1040px;
    }

    #deckScreen .slot {
      width: clamp(178px, 21.5vh, 246px);
      min-height: 0 !important;
      aspect-ratio: 3 / 4;
      padding: 0 !important;
      display: grid;
      place-items: center;
      justify-self: center;
      position: relative;
      border-radius: 18px;
    }

    #deckScreen .slot.filled {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible;
    }

    #deckScreen .slot:not(.filled) {
      border: 1px dashed rgba(255,255,255,.16) !important;
      background: rgba(255,255,255,.025) !important;
      box-shadow: none !important;
    }

    #deckScreen .slot .game-card {
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      transform-origin: center;
    }

    #deckScreen .slot.filled .game-card .card-art img,
    #deckScreen .slot.filled .game-card .card-art video {
      filter: drop-shadow(0 14px 22px rgba(0,0,0,.38));
    }

    #deckScreen .slot.filled:hover .game-card {
      transform: translateY(-3px) scale(1.02);
    }

    #deckScreen .slot .remove-slot {
      top: 4px;
      right: 4px;
      transform: translate(38%, -38%);
      width: 32px;
      height: 32px;
      min-width: 0;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,92,122,.18);
      border: 1px solid rgba(255,92,122,.38);
      box-shadow: 0 8px 18px rgba(0,0,0,.20);
    }

    #deckScreen .slot .remove-slot:hover {
      background: rgba(255,92,122,.32);
      transform: translate(38%, -42%);
    }

    #deckScreen .deck-actions {
      justify-content: center;
      margin-top: 4px;
    }

    #myCardsGrid {
      padding: 10px 6px 14px;
    }

    #myCardsGrid .game-card.selected {
      z-index: 5;
      transform: scale(1.045);
      opacity: 1 !important;
    }

    #myCardsGrid .game-card.selected:hover {
      transform: translateY(-4px) scale(1.065);
    }

    #myCardsGrid .game-card.selected .card-art img,
    #myCardsGrid .game-card.selected .card-art video {
      filter:
        drop-shadow(0 0 14px rgba(71,230,161,.44))
        drop-shadow(0 13px 22px rgba(0,0,0,.32)) !important;
    }

    #myCardsGrid .game-card.selected::after {
      content: "✓";
      display: grid !important;
      place-items: center;
      position: absolute;
      inset: auto !important;
      top: 8px !important;
      right: 8px !important;
      z-index: 12;
      width: 34px;
      height: 34px;
      min-width: 0;
      padding: 0;
      border-radius: 999px;
      background: rgba(71,230,161,.94);
      border: 1px solid rgba(255,255,255,.44);
      color: #06141b;
      font-size: 18px;
      font-weight: 1000;
      box-shadow: 0 8px 18px rgba(0,0,0,.24);
      pointer-events: none;
    }

    #myCardsGrid .game-card.selected::before {
      content: "";
      display: block !important;
      position: absolute;
      inset: 6px;
      z-index: 0;
      border-radius: 22px;
      background: radial-gradient(circle at center, rgba(71,230,161,.16), transparent 68%);
      pointer-events: none;
    }

    /* Hover video preview: card crop instead of full 16:9 video */
    .card-art.preview-active {
      overflow: hidden;
      border-radius: 18px;
      background: transparent !important;
    }

    .card-art.preview-active video.hover-preview-video {
      width: 100% !important;
      height: 100% !important;
      aspect-ratio: auto !important;
      object-fit: cover !important;
      object-position: center center !important;
      background: transparent !important;
      display: block !important;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.30)) !important;
    }

    #myCardsGrid .game-card.selected .card-art.preview-active video.hover-preview-video {
      filter:
        drop-shadow(0 0 14px rgba(71,230,161,.44))
        drop-shadow(0 13px 22px rgba(0,0,0,.32)) !important;
    }

    @media (max-height: 760px) {
      #deckScreen .slot {
        width: clamp(160px, 20vh, 214px);
      }

      #deckScreen .deck-grid {
        gap: 6px 18px;
      }
    }

    @media (min-height: 930px) {
      #deckScreen .slot {
        width: clamp(205px, 23vh, 262px);
      }
    }

    @media (max-width: 700px) {
      #deckScreen .slot {
        width: min(230px, 82vw);
      }
    }



    /* =========================================================
       Ultimate Stars – Frontend Polish Pass
       Focus: unified design system, stronger deck stage,
       more polished duel setup, better collection view, and stronger battle staging.
       ========================================================= */
    :root {
      --bg: #070812;
      --bg-soft: #101326;
      --panel: rgba(14, 17, 32, 0.82);
      --panel-strong: rgba(10, 12, 24, 0.96);
      --text: #f8f7ff;
      --muted: #a8b0d2;
      --line: rgba(255, 255, 255, 0.13);
      --accent: #a855f7;
      --accent-2: #22d3ee;
      --hot: #ff3fad;
      --gold: #f7c948;
      --glass: rgba(255,255,255,.065);
      --glass-strong: rgba(255,255,255,.105);
      --radius: 24px;
      --shadow: 0 22px 60px rgba(0,0,0,.36);
      --shadow-soft: 0 14px 34px rgba(0,0,0,.26);
      --ring: 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.09);
    }

    body {
      background:
        radial-gradient(circle at 10% 7%, rgba(168, 85, 247, .36), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(34, 211, 238, .22), transparent 27%),
        radial-gradient(circle at 52% 96%, rgba(255, 63, 173, .16), transparent 35%),
        linear-gradient(135deg, #060713 0%, #111428 48%, #070813 100%) !important;
    }

    body::before {
      background-size: 46px 46px !important;
      opacity: .92;
      mask-image: radial-gradient(circle at center, black 0%, transparent 82%) !important;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.045) 45%, transparent 46% 100%),
        radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0,0,0,.30) 100%);
      opacity: .58;
    }

    .app {
      width: min(1480px, calc(100% - 32px)) !important;
      padding: 22px 0 38px !important;
    }

    .panel, .hero-card, .menu-card, .modal-shell {
      border: 1px solid rgba(255,255,255,.13) !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        linear-gradient(145deg, rgba(17, 20, 39, .94), rgba(8, 10, 22, .86)) !important;
      box-shadow: var(--shadow) !important;
      backdrop-filter: blur(18px);
    }

    .topbar {
      min-height: 76px;
      padding: 12px 2px;
      margin-bottom: 14px !important;
      align-items: center !important;
    }

    .brand strong {
      font-size: clamp(32px, 3.8vw, 58px) !important;
      letter-spacing: -.045em !important;
      text-wrap: balance;
    }

    .brand span {
      color: rgba(225,231,255,.72) !important;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .btn, .duel-mode-cta, .stat-choice-btn {
      position: relative;
      overflow: hidden;
      box-shadow: var(--ring), 0 10px 22px rgba(0,0,0,.18);
    }

    .btn::before, .duel-mode-cta::before, .stat-choice-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%);
      opacity: .65;
      pointer-events: none;
    }

    .btn {
      border-radius: 18px !important;
      padding: 12px 17px !important;
      background: rgba(255,255,255,.075) !important;
      border: 1px solid rgba(255,255,255,.135) !important;
      font-weight: 950 !important;
      letter-spacing: -.01em;
    }

    .btn:hover:not(:disabled) {
      transform: translateY(-2px) !important;
      background: rgba(255,255,255,.105) !important;
    }

    .btn-primary {
      background: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%) !important;
      color: #fff !important;
      border-color: rgba(255,255,255,.22) !important;
      box-shadow: 0 14px 28px rgba(88, 119, 255, .26), var(--ring) !important;
    }

    .btn-danger {
      background: rgba(255, 92, 122, .10) !important;
      border-color: rgba(255, 92, 122, .20) !important;
      color: #ffc2cf !important;
    }

    .btn-random {
      background: rgba(247,201,72,.12) !important;
      color: #ffe7a6 !important;
      border-color: rgba(247,201,72,.24) !important;
      box-shadow: 0 12px 24px rgba(247,201,72,.10), var(--ring) !important;
    }

    .btn-small {
      padding: 8px 10px !important;
    }

    .pill {
      background: rgba(255,255,255,.07) !important;
      border-color: rgba(255,255,255,.13) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    }

    /* Main Menu */
    .home-hero {
      min-height: calc(100vh - 70px) !important;
      gap: 20px !important;
    }

    .hero-card {
      min-height: 355px;
      padding: clamp(28px, 4vw, 54px) !important;
      display: grid;
      align-content: end;
      isolation: isolate;
    }

    .hero-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 78% 28%, rgba(255,63,173,.24), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.30));
      pointer-events: none;
    }

    .hero-card::after {
      width: 310px !important;
      height: 310px !important;
      right: -90px !important;
      top: -96px !important;
      filter: blur(.2px);
      opacity: .72 !important;
    }

    .hero-card h1 {
      font-size: clamp(58px, 8.4vw, 120px) !important;
      letter-spacing: -.055em !important;
      margin: 10px 0 16px !important;
      max-width: 980px;
    }

    .hero-card p {
      font-size: clamp(15px, 1.2vw, 19px);
      font-weight: 650;
      color: rgba(235,239,255,.76) !important;
    }

    .menu-grid {
      gap: 18px !important;
    }

    .menu-card {
      min-height: 190px !important;
      padding: 24px !important;
      isolation: isolate;
      transform-origin: center;
    }

    .menu-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.14), transparent 24%),
        linear-gradient(135deg, rgba(168,85,247,.18), rgba(34,211,238,.06));
      opacity: .72;
      transition: opacity .18s ease, transform .18s ease;
    }

    .menu-card::after {
      content: "→";
      position: absolute;
      right: 20px;
      top: 18px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.13);
      font-size: 24px;
      font-weight: 1000;
      color: rgba(255,255,255,.82);
    }

    .menu-card:hover:not(:disabled) {
      transform: translateY(-4px) !important;
      border-color: rgba(34,211,238,.42) !important;
    }

    .menu-card:hover::before {
      opacity: 1;
      transform: scale(1.02);
    }

    .menu-card strong {
      max-width: 70%;
      font-size: clamp(25px, 2.3vw, 34px) !important;
      letter-spacing: -.035em !important;
    }

    .menu-card span {
      color: rgba(229,235,255,.72) !important;
      font-weight: 650;
    }

    /* Deck Summary als Dashboard */
    .deck-summary {
      width: 100%;
      display: block !important;
    }

    .deck-summary-board {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(250px, 1.45fr) repeat(3, minmax(132px, .65fr));
      gap: 12px;
      align-items: stretch;
    }

    .deck-status-card, .deck-metric-card {
      position: relative;
      min-height: 94px;
      border-radius: 22px;
      padding: 16px 18px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.16);
      overflow: hidden;
    }

    .deck-status-card::after, .deck-metric-card::after {
      content: "";
      position: absolute;
      inset: -60% auto auto -30%;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.16), transparent 67%);
      pointer-events: none;
    }

    .deck-status-card span, .deck-metric-card span {
      display: block;
      color: rgba(226,234,255,.66);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .095em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    .deck-status-card strong, .deck-metric-card strong {
      display: block;
      font-size: clamp(24px, 2vw, 34px);
      line-height: .95;
      letter-spacing: -.045em;
      color: #fff;
    }

    .deck-status-card p, .deck-metric-card p {
      margin: 7px 0 0;
      color: rgba(232,237,255,.72);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .deck-status-card.valid { border-color: rgba(71,230,161,.35); background: linear-gradient(145deg, rgba(71,230,161,.13), rgba(255,255,255,.035)); }
    .deck-status-card.warning { border-color: rgba(255,209,102,.34); background: linear-gradient(145deg, rgba(255,209,102,.12), rgba(255,255,255,.035)); }
    .deck-status-card.invalid { border-color: rgba(255,92,122,.38); background: linear-gradient(145deg, rgba(255,92,122,.13), rgba(255,255,255,.035)); }
    .deck-metric-card.is-valid strong { color: #9ff7cf; }
    .deck-metric-card.is-warning strong { color: #ffe2a0; }
    .deck-metric-card.is-invalid strong { color: #ff9ab0; }

    /* Mein Deck: Lineup-stage */
    #deckScreen .panel {
      position: relative;
      padding: clamp(16px, 2vw, 26px) !important;
      overflow: hidden !important;
      isolation: isolate;
    }

    #deckScreen .panel::before {
      content: "";
      position: absolute;
      inset: 112px 28px 76px;
      z-index: -1;
      border-radius: 34px;
      background:
        radial-gradient(ellipse at 50% 45%, rgba(34,211,238,.18), transparent 54%),
        radial-gradient(ellipse at 50% 82%, rgba(255,63,173,.13), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 0 80px rgba(0,0,0,.28);
    }

    #deckScreen .deck-grid {
      position: relative;
      max-width: 1050px !important;
      margin: clamp(16px, 2vw, 24px) auto 16px !important;
      gap: clamp(12px, 2vh, 22px) clamp(24px, 4vw, 58px) !important;
      perspective: 1200px;
    }

    #deckScreen .slot {
      width: clamp(180px, 22vh, 255px) !important;
      border-radius: 24px !important;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    #deckScreen .slot::before {
      content: "Slot " attr(data-slot);
      position: absolute;
      left: 50%;
      bottom: -18px;
      transform: translateX(-50%);
      z-index: 4;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(4,6,14,.76);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(235,241,255,.62);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .07em;
      text-transform: uppercase;
      pointer-events: none;
      white-space: nowrap;
    }

    #deckScreen .slot.filled::before {
      color: rgba(255,255,255,.82);
      border-color: rgba(34,211,238,.22);
    }

    #deckScreen .slot:not(.filled) {
      width: clamp(172px, 21.2vh, 244px) !important;
      border: 1px dashed rgba(255,255,255,.18) !important;
      background:
        radial-gradient(circle at 50% 35%, rgba(168,85,247,.14), transparent 58%),
        rgba(255,255,255,.025) !important;
    }

    #deckScreen .slot:not(.filled)::after {
      content: "+";
      position: absolute;
      top: 27%;
      left: 50%;
      transform: translateX(-50%);
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.58);
      font-size: 26px;
      font-weight: 1000;
    }

    #deckScreen .slot-empty {
      padding-top: 58px;
      color: rgba(226,234,255,.56) !important;
      font-size: 12px !important;
      line-height: 1.35;
    }

    #deckScreen .slot.filled .game-card .card-art img,
    #deckScreen .slot.filled .game-card .card-art video {
      filter:
        drop-shadow(0 22px 28px rgba(0,0,0,.42))
        drop-shadow(0 0 16px rgba(34,211,238,.10)) !important;
    }

    #deckScreen .slot.filled:hover .game-card {
      transform: translateY(-5px) rotateX(2deg) scale(1.025) !important;
    }

    #deckScreen .deck-actions {
      justify-content: center !important;
      gap: 10px !important;
      margin-top: 26px !important;
    }

    #openMyCardsBtn {
      min-width: 178px !important;
    }

    #clearDeckBtn {
      margin-left: 8px;
      opacity: .82;
    }

    /* Card collection / modal: more gallery feel */
    .collection-shell {
      width: min(1320px, calc(100vw - 24px)) !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .collection-shell .modal-head {
      margin: 0 !important;
      padding: 22px 24px 16px !important;
      background:
        radial-gradient(circle at 10% 0%, rgba(168,85,247,.18), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent);
      border-bottom: 1px solid rgba(255,255,255,.11) !important;
    }

    .collection-shell .filters {
      position: sticky;
      top: 0;
      z-index: 8;
      padding: 16px 24px 14px;
      margin-bottom: 0 !important;
      background: rgba(8,10,20,.86);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .collection-list {
      max-height: min(70vh, 760px) !important;
      padding: 18px 22px 24px !important;
    }

    .card-grid {
      grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)) !important;
      gap: clamp(14px, 1.35vw, 22px) !important;
    }

    #myCardsGrid, #allCardsGrid {
      align-items: start;
    }

    #myCardsGrid .game-card, #allCardsGrid .game-card {
      transform-origin: center;
    }

    #myCardsGrid .game-card:hover, #allCardsGrid .game-card:hover {
      z-index: 10;
    }

    .input, .select {
      background: rgba(255,255,255,.07) !important;
      border-color: rgba(255,255,255,.14) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    }

    .input:focus, .select:focus {
      border-color: rgba(34,211,238,.58) !important;
      box-shadow: 0 0 0 4px rgba(34,211,238,.08), inset 0 1px 0 rgba(255,255,255,.055);
    }

    /* Duel setup: real start screen instead of management view */
    #duelSetup.duel-setup-panel {
      position: relative;
      padding: 0 !important;
      overflow: hidden;
      isolation: isolate;
      min-height: 570px;
    }

    #duelSetup.duel-setup-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 20% 25%, rgba(168,85,247,.24), transparent 34%),
        radial-gradient(circle at 80% 40%, rgba(34,211,238,.18), transparent 34%),
        linear-gradient(120deg, rgba(255,63,173,.12), transparent 42%);
      pointer-events: none;
    }

    .duel-setup-layout {
      display: grid;
      grid-template-columns: minmax(310px, .85fr) minmax(520px, 1.25fr);
      min-height: 570px;
    }

    .duel-setup-copy {
      padding: clamp(24px, 3vw, 44px);
      display: grid;
      align-content: center;
      gap: 18px;
      border-right: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(90deg, rgba(5,7,16,.38), transparent);
    }

    .duel-kicker, .battle-kicker {
      display: inline-flex;
      width: max-content;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.13);
      color: rgba(235,241,255,.76);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .duel-setup-copy h2 {
      margin: 0;
      font-size: clamp(48px, 5vw, 82px);
      line-height: .86;
      letter-spacing: -.06em;
      text-wrap: balance;
    }

    .duel-setup-copy p {
      margin: 0;
      color: rgba(231,236,255,.75);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.55;
    }

    .duel-rule-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .duel-rule-list li {
      display: flex;
      gap: 8px;
      align-items: center;
      color: rgba(238,242,255,.78);
      font-size: 13px;
      font-weight: 850;
    }

    .duel-rule-list li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 999px;
      background: rgba(71,230,161,.16);
      color: #8ff3c4;
      border: 1px solid rgba(71,230,161,.20);
      font-size: 12px;
      font-weight: 1000;
    }

    .duel-setup-actions {
      justify-content: flex-start !important;
      margin-top: 4px !important;
    }

    #startDuelBtn {
      min-width: 210px !important;
      min-height: 54px;
      font-size: 16px;
    }

    #startDuelBtn:not(:disabled) {
      background: linear-gradient(135deg, #ff3fad 0%, #a855f7 55%, #22d3ee 100%) !important;
      box-shadow: 0 18px 34px rgba(255,63,173,.22), var(--ring) !important;
    }

    .duel-setup-preview {
      padding: clamp(20px, 2.7vw, 40px);
      display: grid;
      align-content: center;
      gap: 18px;
    }

    .duel-versus-card {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      padding: 14px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    }

    .duel-versus-side {
      min-height: 88px;
      border-radius: 20px;
      padding: 14px;
      display: grid;
      align-content: center;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    }

    .duel-versus-side span {
      color: rgba(226,234,255,.60);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .duel-versus-side strong {
      margin-top: 4px;
      display: block;
      color: #fff;
      font-size: clamp(22px, 2.1vw, 34px);
      line-height: .95;
      letter-spacing: -.04em;
    }

    .duel-versus-badge {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,63,173,.95), rgba(34,211,238,.86));
      color: #fff;
      font-weight: 1000;
      letter-spacing: -.05em;
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: 0 14px 30px rgba(0,0,0,.26);
    }

    #duelSetup .deck-summary-board {
      grid-template-columns: 1fr;
    }

    #duelSetup .deck-metric-card {
      display: none;
    }

    #duelSetupDeck.small-card-grid {
      grid-template-columns: repeat(6, minmax(92px, 1fr)) !important;
      gap: 10px !important;
      padding: 16px;
      border-radius: 28px;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(34,211,238,.12), transparent 58%),
        rgba(0,0,0,.16);
      border: 1px solid rgba(255,255,255,.10);
    }

    .setup-card-slot {
      display: grid;
      place-items: center;
      min-width: 0;
    }

    #duelSetupDeck .game-card {
      max-width: 142px !important;
    }

    #duelSetupDeck .setup-empty-slot {
      width: min(142px, 100%);
      border-radius: 18px !important;
      border: 1px dashed rgba(255,255,255,.16) !important;
      background: rgba(255,255,255,.035) !important;
      display: grid;
      place-items: center;
      color: rgba(235,241,255,.52);
    }

    /* Battle: Arena stronger inszenieren */
    #battleScreen .app, #battleScreen {
      isolation: isolate;
    }

    .battle-screen {
      min-height: calc(100vh - 44px) !important;
      gap: 14px !important;
    }

    .battle-top {
      position: relative;
      padding: 14px 16px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .enemy-row {
      gap: 10px !important;
    }

    .enemy-card-back {
      min-height: 0 !important;
      aspect-ratio: 3 / 4;
      border-radius: 18px !important;
      background:
        radial-gradient(circle at 50% 20%, rgba(168,85,247,.26), transparent 48%),
        linear-gradient(145deg, rgba(34,211,238,.16), rgba(255,63,173,.08)) !important;
      box-shadow: 0 14px 24px rgba(0,0,0,.30) !important;
      transform-origin: center;
    }

    .enemy-card-back.used {
      opacity: .24 !important;
      transform: scale(.96);
      filter: grayscale(.65);
    }

    .battle-arena {
      position: relative;
      grid-template-columns: minmax(260px, 1fr) minmax(220px, 300px) minmax(260px, 1fr) !important;
      gap: clamp(16px, 2.4vw, 30px) !important;
      min-height: 430px;
      padding: clamp(16px, 2vw, 28px);
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(ellipse at 50% 50%, rgba(255,63,173,.13), transparent 32%),
        radial-gradient(ellipse at 22% 50%, rgba(34,211,238,.12), transparent 36%),
        radial-gradient(ellipse at 78% 50%, rgba(168,85,247,.13), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
      box-shadow: inset 0 0 80px rgba(0,0,0,.24), 0 20px 50px rgba(0,0,0,.20);
      overflow: hidden;
    }

    .battle-arena::before {
      content: "VS";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      color: rgba(255,255,255,.035);
      font-size: clamp(120px, 17vw, 250px);
      line-height: 1;
      font-weight: 1000;
      letter-spacing: -.12em;
      pointer-events: none;
    }

    .drop-zone {
      position: relative;
      z-index: 1;
      width: min(335px, 100%) !important;
      min-height: 440px !important;
      border-radius: 30px !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      background:
        radial-gradient(ellipse at 50% 24%, rgba(255,255,255,.08), transparent 54%),
        rgba(0,0,0,.17) !important;
      box-shadow: inset 0 0 52px rgba(0,0,0,.23), 0 18px 36px rgba(0,0,0,.22);
    }

    .drop-zone::before {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(5,7,16,.68);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(235,241,255,.70);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
    }

    #playerDropZone::before { content: "Your Pick"; }
    #cpuDropZone::before { content: "CPU Pick"; }

    .drop-zone.over {
      border-color: rgba(34,211,238,.65) !important;
      background: radial-gradient(ellipse at 50% 28%, rgba(34,211,238,.14), transparent 58%), rgba(0,0,0,.17) !important;
      box-shadow: 0 0 0 5px rgba(34,211,238,.07), inset 0 0 52px rgba(0,0,0,.23), 0 18px 36px rgba(0,0,0,.22);
    }

    .drop-empty {
      max-width: 210px;
      color: rgba(231,237,255,.58) !important;
      font-size: 13px;
      letter-spacing: .02em;
    }

    .battle-match-score {
      position: relative;
      z-index: 2;
      min-height: 250px !important;
      border-radius: 30px !important;
      border: 1px solid rgba(255,255,255,.16) !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.11), transparent 42%),
        linear-gradient(145deg, rgba(12,15,30,.90), rgba(7,9,19,.74)) !important;
      box-shadow: 0 20px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .battle-match-round-title {
      font-size: clamp(25px, 2.2vw, 40px) !important;
      color: #fff;
      text-shadow: 0 0 22px rgba(34,211,238,.14);
    }

    .battle-match-score strong {
      font-size: clamp(56px, 5.4vw, 92px) !important;
      letter-spacing: -.065em !important;
      background: linear-gradient(90deg, #fff, #67e8f9, #ffb7df);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .action-timer, .stat-timer {
      background: rgba(255,209,102,.10) !important;
      border-color: rgba(255,209,102,.22) !important;
    }

    .battle-bottom.panel {
      min-height: 0 !important;
      padding: 14px 16px !important;
      border-radius: 30px !important;
      background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.022)) !important;
    }

    .player-row {
      gap: 10px !important;
      align-items: center !important;
    }

    .battle-bottom .game-card {
      max-width: 138px !important;
    }

    .game-card.used .card-art img, .game-card.used .card-art video {
      filter: grayscale(.65) drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
    }

    /* Duel result modal */
    .duel-shell {
      width: min(1220px, calc(100vw - 24px)) !important;
    }

    .duel-card-frame {
      border-radius: 26px !important;
      padding: 14px !important;
      background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    }

    .duel-card-frame.winner {
      border-color: rgba(71,230,161,.62) !important;
      background:
        radial-gradient(circle at 50% 30%, rgba(71,230,161,.15), transparent 55%),
        linear-gradient(145deg, rgba(71,230,161,.10), rgba(255,255,255,.025)) !important;
      box-shadow: 0 0 34px rgba(71,230,161,.10), inset 0 1px 0 rgba(255,255,255,.07);
    }

    .duel-card-frame.loser {
      opacity: .56 !important;
      filter: saturate(.72);
    }

    .duel-score {
      border-radius: 26px !important;
      background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 48%), rgba(255,255,255,.055) !important;
    }

    .duel-video-area {
      border-radius: 22px !important;
      box-shadow: inset 0 0 42px rgba(0,0,0,.34);
    }

    .result-box-final h2 {
      letter-spacing: -.05em !important;
    }

    .round-overview-row {
      border-radius: 18px !important;
      background: rgba(255,255,255,.065) !important;
    }

    /* Mobile / kleine Screens */
    @media (max-width: 1120px) {
      .deck-summary-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .deck-status-card {
        grid-column: 1 / -1;
      }

      .duel-setup-layout {
        grid-template-columns: 1fr;
      }

      .duel-setup-copy {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
      }

      #duelSetupDeck.small-card-grid {
        grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
      }

      .battle-arena {
        grid-template-columns: 1fr !important;
      }

      .battle-match-score {
        order: -1;
        min-height: 160px !important;
      }

      .drop-zone {
        min-height: 350px !important;
      }
    }

    @media (max-width: 700px) {
      .app {
        width: min(100% - 18px, 1440px) !important;
      }

      .hero-card {
        min-height: 430px;
      }

      .menu-card {
        min-height: 150px !important;
      }

      .deck-summary-board {
        grid-template-columns: 1fr;
      }

      #deckScreen .deck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      #deckScreen .slot {
        width: min(180px, 42vw) !important;
      }

      #deckScreen .panel::before {
        inset: 190px 8px 90px;
      }

      #duelSetupDeck.small-card-grid {
        grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
      }

      .duel-versus-card {
        grid-template-columns: 1fr;
      }

      .duel-versus-badge {
        justify-self: center;
      }

      .collection-shell .filters {
        padding: 12px;
      }

      .collection-list {
        padding: 14px 10px 18px !important;
      }

      .card-grid {
        grid-template-columns: repeat(2, minmax(132px, 1fr)) !important;
        gap: 12px !important;
      }

      .battle-top {
        padding: 10px;
      }

      .enemy-row, .player-row, .small-card-grid {
        grid-template-columns: repeat(3, minmax(78px, 1fr)) !important;
      }

      .battle-bottom .game-card {
        max-width: 96px !important;
      }

      .drop-zone {
        min-height: 290px !important;
      }
    }



    /* =========================================================
       Frontend Fix Pass 02
       Korrekturen nach Screenshot-Feedback:
       - kompaktere Deck-Infokacheln
       - Duel image restored as tile background
       - empty duel setup slots without overlap
       - Battle-Counter more compact
       - opponent cards smaller, eigene Handkarten larger
       ========================================================= */

    /* 1) My Deck: dashboard is more compact and overlap-safe */
    #deckScreen .deck-summary {
      margin-bottom: 8px !important;
    }

    #deckScreen .deck-summary-board {
      grid-template-columns: minmax(230px, 1.15fr) repeat(3, minmax(120px, .62fr)) !important;
      gap: 10px !important;
      align-items: stretch !important;
    }

    #deckScreen .deck-status-card,
    #deckScreen .deck-metric-card {
      min-height: 70px !important;
      padding: 12px 14px !important;
      border-radius: 18px !important;
      overflow: hidden !important;
    }

    #deckScreen .deck-status-card span,
    #deckScreen .deck-metric-card span {
      font-size: 10px !important;
      margin-bottom: 5px !important;
      letter-spacing: .085em !important;
    }

    #deckScreen .deck-status-card strong,
    #deckScreen .deck-metric-card strong {
      font-size: clamp(20px, 1.55vw, 29px) !important;
      line-height: .95 !important;
      white-space: nowrap !important;
    }

    #deckScreen .deck-status-card p,
    #deckScreen .deck-metric-card p {
      margin-top: 5px !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
    }

    #deckScreen .panel::before {
      inset: 92px 28px 70px !important;
    }

    #deckScreen .deck-grid {
      margin-top: 4px !important;
    }

    @media (max-width: 980px) {
      #deckScreen .deck-summary-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      #deckScreen .deck-status-card {
        grid-column: 1 / -1 !important;
      }
    }

    @media (max-width: 620px) {
      #deckScreen .deck-summary-board {
        grid-template-columns: 1fr !important;
      }
    }

    /* 2) Play: make the Duel image visible again.
       The global .panel rule uses !important and had covered the image. */
    .duel-mode-card {
      background:
        linear-gradient(90deg,
          rgba(5, 8, 20, .08) 0%,
          rgba(5, 8, 20, .12) 34%,
          rgba(5, 8, 20, .52) 61%,
          rgba(5, 8, 20, .78) 100%),
        url("https://pub-bfced383e45f41c5a685b6ae7b631fc4.r2.dev/images/duel_1.png") center center / cover no-repeat !important;
      min-height: 370px !important;
    }

    .duel-mode-card::before {
      background:
        radial-gradient(circle at 14% 20%, rgba(255,255,255,.14), transparent 24%),
        radial-gradient(circle at 26% 48%, rgba(168,85,247,.13), transparent 32%),
        linear-gradient(90deg, transparent 0%, rgba(12, 16, 34, .18) 44%, rgba(6, 9, 20, .48) 72%, rgba(6, 9, 20, .70) 100%) !important;
    }

    /* 3) Prepare Duel: empty slots must not exceed their grid column. */
    #duelSetupDeck.small-card-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      gap: 8px !important;
      align-items: center !important;
      justify-items: center !important;
      overflow: hidden !important;
    }

    #duelSetupDeck .setup-card-slot,
    #duelSetupDeck .setup-empty-slot {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 126px !important;
    }

    #duelSetupDeck .setup-empty-slot {
      aspect-ratio: 3 / 4 !important;
      min-height: 0 !important;
      padding: 0 !important;
      border-radius: 16px !important;
      box-sizing: border-box !important;
    }

    #duelSetupDeck .slot-empty {
      padding: 0 !important;
      font-size: 11px !important;
    }

    #duelSetupDeck .game-card {
      width: 100% !important;
      max-width: 126px !important;
    }

    @media (max-width: 1180px) {
      #duelSetupDeck.small-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      #duelSetupDeck .setup-card-slot,
      #duelSetupDeck .setup-empty-slot,
      #duelSetupDeck .game-card {
        max-width: 132px !important;
      }
    }

    @media (max-width: 700px) {
      #duelSetupDeck.small-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    /* 4) Battle: Center-Score more compact; Timer number should not inherit large score styling. */
    .battle-arena {
      grid-template-columns: minmax(285px, 1fr) minmax(185px, 245px) minmax(285px, 1fr) !important;
      min-height: 390px !important;
      padding: clamp(14px, 1.7vw, 24px) !important;
    }

    .battle-match-score {
      min-height: 190px !important;
      border-radius: 26px !important;
      padding: 14px !important;
      gap: 6px !important;
      max-width: 245px !important;
      justify-self: center !important;
    }

    .battle-match-round-title {
      font-size: clamp(22px, 1.85vw, 32px) !important;
    }

    .battle-match-round-sub,
    .battle-match-special,
    .battle-match-score span {
      font-size: 11px !important;
    }

    .battle-match-score > div:last-child > strong {
      font-size: clamp(42px, 3.8vw, 66px) !important;
      line-height: .9 !important;
    }

    .battle-match-score .action-timer {
      margin-top: 8px !important;
      padding: 8px 11px !important;
      gap: 7px !important;
      font-size: 13px !important;
      border-radius: 22px !important;
    }

    .battle-match-score .action-timer strong {
      font-size: clamp(34px, 3vw, 50px) !important;
      line-height: .85 !important;
      letter-spacing: -.06em !important;
      color: #9bf3ff !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
    }

    /* 5) Battle: opponent cards top smaller, eigene Handkarten bottom larger. */
    .enemy-row {
      grid-template-columns: repeat(6, minmax(82px, 128px)) !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 9px !important;
    }

    .enemy-card-back {
      width: 100% !important;
      max-width: 128px !important;
      justify-self: center !important;
    }

    .battle-top {
      padding: 10px 14px !important;
    }

    .battle-bottom.panel {
      padding: 16px 18px !important;
    }

    .player-row {
      grid-template-columns: repeat(6, minmax(128px, 170px)) !important;
      justify-content: center !important;
      gap: 14px !important;
    }

    .battle-bottom .game-card {
      max-width: 168px !important;
      width: 100% !important;
    }

    @media (max-width: 1120px) {
      .battle-arena {
        grid-template-columns: 1fr !important;
      }

      .battle-match-score {
        max-width: 420px !important;
        min-height: 150px !important;
      }

      .enemy-row,
      .player-row {
        grid-template-columns: repeat(3, minmax(100px, 150px)) !important;
      }

      .battle-bottom .game-card {
        max-width: 150px !important;
      }
    }

    @media (max-width: 700px) {
      .enemy-row,
      .player-row {
        grid-template-columns: repeat(3, minmax(82px, 1fr)) !important;
      }

      .enemy-card-back {
        max-width: 108px !important;
      }

      .battle-bottom .game-card {
        max-width: 118px !important;
      }

      .battle-match-score .action-timer strong {
        font-size: 36px !important;
      }
    }

  

    /* =========================================================
       Frontend Fix Pass 03
       - Mein-Deck-Infokacheln wirklich compact and ohne optische Overlappung
       - Performance-Modus: weniger teure Blur-/Drop-Shadow-Effekte
       ========================================================= */

    /* My Deck: dashboard must not run over the stage */
    #deckScreen .deck-summary {
      position: relative !important;
      z-index: 8 !important;
      max-width: min(1180px, 100%) !important;
      margin: 0 auto 24px !important;
      padding: 0 !important;
    }

    #deckScreen .deck-summary-board {
      display: grid !important;
      grid-template-columns: minmax(0, 1.08fr) repeat(3, minmax(0, .56fr)) !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: 100% !important;
      align-items: stretch !important;
      overflow: visible !important;
    }

    #deckScreen .deck-status-card,
    #deckScreen .deck-metric-card {
      min-width: 0 !important;
      min-height: 58px !important;
      padding: 9px 12px !important;
      border-radius: 16px !important;
      background: linear-gradient(145deg, rgba(42,48,68,.96), rgba(28,32,50,.94)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.14) !important;
      overflow: hidden !important;
    }

    #deckScreen .deck-status-card.valid {
      background: linear-gradient(145deg, rgba(43,68,68,.97), rgba(28,38,52,.95)) !important;
    }

    #deckScreen .deck-status-card.warning {
      background: linear-gradient(145deg, rgba(66,54,43,.97), rgba(36,33,46,.95)) !important;
    }

    #deckScreen .deck-status-card.invalid {
      background: linear-gradient(145deg, rgba(70,42,54,.97), rgba(37,31,45,.95)) !important;
    }

    #deckScreen .deck-status-card::after,
    #deckScreen .deck-metric-card::after {
      display: none !important;
    }

    #deckScreen .deck-status-card span,
    #deckScreen .deck-metric-card span {
      font-size: 9px !important;
      line-height: 1 !important;
      margin-bottom: 4px !important;
      letter-spacing: .075em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #deckScreen .deck-status-card strong,
    #deckScreen .deck-metric-card strong {
      font-size: clamp(18px, 1.25vw, 25px) !important;
      line-height: .95 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #deckScreen .deck-status-card p,
    #deckScreen .deck-metric-card p {
      margin-top: 4px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #deckScreen .panel::before {
      inset: 124px 28px 70px !important;
    }

    #deckScreen .deck-grid {
      margin-top: 10px !important;
    }

    @media (max-width: 1180px) {
      #deckScreen .deck-summary-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      #deckScreen .deck-status-card {
        grid-column: 1 / -1 !important;
      }
      #deckScreen .panel::before {
        inset: 188px 20px 70px !important;
      }
    }

    @media (max-width: 620px) {
      #deckScreen .deck-summary-board {
        grid-template-columns: 1fr !important;
      }
      #deckScreen .panel::before {
        inset: 260px 8px 90px !important;
      }
    }

    /* Performance: Blur and repeated drop shadows were the biggest lag factor */
    .panel,
    .hero-card,
    .menu-card,
    .modal-shell,
    .collection-shell .filters {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    body::before {
      opacity: .45 !important;
      background-size: 70px 70px !important;
    }

    body::after {
      opacity: .26 !important;
    }

    .panel,
    .hero-card,
    .menu-card,
    .modal-shell,
    .battle-top,
    .battle-arena,
    .battle-bottom.panel,
    .battle-match-score,
    .drop-zone,
    .enemy-card-back,
    .deck-status-card,
    .deck-metric-card {
      box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
    }

    .game-card,
    .card-art img,
    .card-art video,
    .duel-simple-card img,
    .enemy-card-back,
    .drop-zone,
    .battle-match-score,
    .menu-card,
    .btn {
      transition-duration: .10s !important;
    }

    .card-art img,
    .card-art video,
    .duel-simple-card img,
    .enemy-card-back img {
      filter: none !important;
    }

    #deckScreen .slot.filled .game-card .card-art img,
    #deckScreen .slot.filled .game-card .card-art video,
    #myCardsGrid .game-card.selected .card-art img,
    #myCardsGrid .game-card.selected .card-art video,
    .game-card.selected .card-art img,
    .game-card.selected .card-art video,
    .game-card.used .card-art img,
    .game-card.used .card-art video {
      filter: none !important;
    }

    .game-card.selectable:hover .card-art img,
    .game-card.selectable:hover .card-art video {
      filter: none !important;
    }

    .game-card::before,
    .game-card::after,
    #myCardsGrid .game-card.selected::before {
      box-shadow: none !important;
    }

    #myCardsGrid .game-card.selected::after {
      box-shadow: 0 4px 10px rgba(0,0,0,.22) !important;
    }

    .battle-arena::before {
      display: none !important;
    }

    .duel-mode-card::before,
    .duel-mode-card::after,
    .hero-card::after,
    .menu-card::before {
      opacity: .45 !important;
    }

  

    /* =========================================================
       Frontend Fix Pass 04
       - My Deck action buttons cleanly below the stage, without overlap
       - Main menu cards reliably clickable again, without hover flicker
       - additional performance softening
       ========================================================= */

    /* Deck-Panel als klare 3-Zonen-Struktur: Status | card stage | Aktionen */
    #deckScreen .deck-board-panel {
      display: grid !important;
      grid-template-rows: auto auto auto !important;
      row-gap: 0 !important;
      padding-bottom: 22px !important;
    }

    #deckScreen .deck-summary {
      margin: 0 auto 22px !important;
      position: relative !important;
      z-index: 20 !important;
    }

    #deckScreen .panel::before {
      /* The stage now ends clearly above the buttons. */
      inset: 122px 28px 118px !important;
      pointer-events: none !important;
    }

    #deckScreen .deck-grid {
      position: relative !important;
      z-index: 6 !important;
      margin: 0 auto !important;
      padding-bottom: 26px !important;
    }

    #deckScreen .slot::before {
      bottom: -22px !important;
    }

    #deckScreen .deck-actions {
      position: relative !important;
      z-index: 30 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 14px !important;
      width: 100% !important;
      margin: 18px auto 0 !important;
      padding: 18px 0 0 !important;
      border-top: 1px solid rgba(255,255,255,.08) !important;
      transform: none !important;
      clear: both !important;
    }

    #deckScreen .deck-actions .btn {
      flex: 0 0 auto !important;
      min-width: 150px !important;
      white-space: nowrap !important;
      transform: none !important;
    }

    #deckScreen .deck-actions .btn:hover:not(:disabled) {
      transform: translateY(-1px) !important;
    }

    #clearDeckBtn {
      margin-left: 0 !important;
    }

    @media (max-height: 780px) {
      #deckScreen .deck-summary {
        margin-bottom: 18px !important;
      }

      #deckScreen .deck-grid {
        padding-bottom: 22px !important;
      }

      #deckScreen .deck-actions {
        margin-top: 14px !important;
        padding-top: 14px !important;
      }
    }

    @media (max-width: 720px) {
      #deckScreen .panel::before {
        inset: 260px 8px 150px !important;
      }

      #deckScreen .deck-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
      }

      #deckScreen .deck-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
      }
    }

    /* Main menu: hover transform caused flicker and made clicks unreliable. */
    #homeScreen,
    #homeScreen .home-hero,
    #homeScreen .menu-grid,
    #homeScreen .menu-card {
      position: relative !important;
      z-index: 5 !important;
    }

    #homeScreen .menu-card {
      cursor: pointer !important;
      pointer-events: auto !important;
      transform: none !important;
      will-change: auto !important;
      transition: border-color .12s ease, background .12s ease, opacity .12s ease !important;
    }

    #homeScreen .menu-card > * {
      pointer-events: none !important;
    }

    #homeScreen .menu-card::before,
    #homeScreen .menu-card::after,
    #homeScreen .hero-card::before,
    #homeScreen .hero-card::after {
      pointer-events: none !important;
    }

    #homeScreen .menu-card:hover:not(:disabled) {
      transform: none !important;
      border-color: rgba(34,211,238,.42) !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.032)),
        linear-gradient(145deg, rgba(17, 20, 39, .94), rgba(8, 10, 22, .86)) !important;
    }

    #homeScreen .menu-card:active {
      transform: scale(.995) !important;
    }

    /* Additional stability: no invisible overlays may block clicks. */
    body::before,
    body::after,
    .hero-card::before,
    .hero-card::after,
    .menu-card::before,
    .menu-card::after,
    .duel-mode-card::before,
    .duel-mode-card::after {
      pointer-events: none !important;
    }

    /* Performance: schwere Effekte weiter reduzieren, Optik stays erhalten. */
    * {
      scroll-behavior: auto !important;
    }

    .game-card.selectable:hover {
      transform: translateY(-2px) scale(1.012) !important;
    }

    #deckScreen .slot.filled:hover .game-card {
      transform: translateY(-2px) scale(1.012) !important;
    }



    /* Duel draw update: DRAW now appears as a bold overlay directly on the videos. */
    .duel-video-area.draw-mode {
      position: relative;
      padding: 12px;
      border-color: rgba(255, 209, 102, .38) !important;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,209,102,.18), transparent 42%),
        radial-gradient(circle at 20% 50%, rgba(168,85,247,.16), transparent 45%),
        rgba(0,0,0,.40) !important;
    }

    .draw-victory-videos {
      position: relative;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }

    .draw-victory-videos::before {
      content: "DRAW";
      position: absolute;
      top: 12px;
      left: 50%;
      z-index: 12;
      transform: translateX(-50%) rotate(-1.5deg);
      width: min(360px, calc(100% - 30px));
      min-height: 62px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      border: 3px solid rgba(255,255,255,.78);
      background:
        linear-gradient(135deg, rgba(255,209,102,.98) 0%, rgba(255,63,173,.96) 48%, rgba(34,211,238,.95) 100%);
      color: #070812;
      font-size: clamp(34px, 4vw, 58px);
      line-height: .86;
      font-weight: 1000;
      letter-spacing: .18em;
      text-indent: .18em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 rgba(255,255,255,.36);
      box-shadow:
        0 18px 38px rgba(0,0,0,.48),
        0 0 34px rgba(255,63,173,.32),
        inset 0 2px 0 rgba(255,255,255,.42),
        inset 0 -5px 0 rgba(0,0,0,.16);
      pointer-events: none;
    }

    .draw-victory-videos::after {
      content: "";
      position: absolute;
      top: 22px;
      left: 50%;
      z-index: 13;
      transform: translateX(-50%) rotate(-1.5deg);
      width: min(330px, calc(100% - 54px));
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
      pointer-events: none;
      opacity: .78;
    }

    .draw-victory-video-card {
      position: relative;
      z-index: 1;
      aspect-ratio: 1 / 1;
      min-height: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #000;
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.22);
    }

    .draw-victory-video-card span {
      position: absolute;
      left: 9px;
      bottom: 9px;
      z-index: 14;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(5,7,15,.78);
      border: 1px solid rgba(255,255,255,.18);
      color: rgba(245,247,255,.92);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .08em;
      text-transform: uppercase;
      pointer-events: none;
      box-shadow: 0 8px 16px rgba(0,0,0,.28);
    }

    .draw-victory-video-card video {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      max-height: none !important;
      display: block !important;
      object-fit: cover !important;
      background: #000 !important;
    }

    .duel-video-area:not(.draw-mode) #victoryVideo {
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: 280px;
      object-fit: contain;
    }

    /* Round announcement: short 2.5s display before each round. */
    .round-announcement {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: none;
      place-items: center;
      padding: 22px;
      background:
        radial-gradient(circle at 50% 45%, rgba(168,85,247,.24), transparent 30%),
        radial-gradient(circle at 50% 58%, rgba(34,211,238,.16), transparent 36%),
        rgba(5, 6, 14, .68);
      backdrop-filter: blur(6px);
    }

    .round-announcement.active {
      display: grid;
      animation: roundAnnouncementFade .22s ease both;
    }

    .round-announcement-card {
      position: relative;
      width: min(780px, 100%);
      min-height: 245px;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.13), transparent 23%),
        linear-gradient(135deg, rgba(168,85,247,.25), rgba(34,211,238,.12)),
        linear-gradient(145deg, rgba(20,24,44,.98), rgba(8,10,22,.96));
      box-shadow:
        0 28px 80px rgba(0,0,0,.52),
        inset 0 1px 0 rgba(255,255,255,.12);
      overflow: hidden;
      display: grid;
      align-content: center;
      justify-items: center;
      text-align: center;
      padding: clamp(24px, 4vw, 44px);
      isolation: isolate;
      transform: scale(.98);
      animation: roundAnnouncementPop .28s cubic-bezier(.2,.8,.2,1) both;
    }

    .round-announcement-card::before {
      content: "";
      position: absolute;
      inset: 14px;
      z-index: -1;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.12);
      pointer-events: none;
    }

    .round-announcement-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(225,231,255,.78);
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .round-announcement-title {
      margin: 0;
      max-width: 680px;
      color: #fff;
      font-size: clamp(34px, 5.2vw, 72px);
      line-height: .92;
      letter-spacing: -.06em;
      text-shadow: 0 8px 28px rgba(0,0,0,.42);
      text-wrap: balance;
    }

    .round-announcement-sub {
      margin: 16px 0 0;
      color: rgba(229,235,255,.74);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.45;
    }

    .round-announcement-bonus {
      margin-top: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 9px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,209,102,.34);
      background: rgba(255,209,102,.10);
      color: #ffe2a0;
      font-size: 13px;
      font-weight: 1000;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

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

    @keyframes roundAnnouncementPop {
      from { opacity: 0; transform: translateY(10px) scale(.94); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 700px) {
      .draw-victory-videos {
        grid-template-columns: 1fr;
      }

      .draw-victory-videos::before {
        top: 10px;
        width: min(280px, calc(100% - 20px));
        min-height: 50px;
        font-size: 34px;
      }

      .draw-victory-videos::after {
        width: min(250px, calc(100% - 44px));
      }

      .draw-victory-video-card {
        width: min(280px, 100%);
        justify-self: center;
      }

      .round-announcement-card {
        min-height: 220px;
        border-radius: 28px;
      }

      .round-announcement-title {
        font-size: clamp(30px, 11vw, 48px);
      }
    }

    /* New battle sizes: hand cards larger but responsive. */
    .player-row {
      grid-template-columns: repeat(6, minmax(142px, 190px)) !important;
      gap: 14px !important;
    }

    .battle-bottom .game-card {
      max-width: 190px !important;
      width: 100% !important;
    }

    @media (max-width: 1120px) {
      .player-row {
        grid-template-columns: repeat(3, minmax(122px, 168px)) !important;
      }

      .battle-bottom .game-card {
        max-width: 168px !important;
      }
    }

    @media (max-width: 700px) {
      .draw-victory-videos {
        grid-template-columns: 1fr;
      }

      .draw-victory-videos::before {
        min-height: 38px;
        font-size: 28px;
      }

      .draw-victory-video-card {
        width: min(280px, 100%);
        justify-self: center;
      }

      .player-row {
        grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
      }

      .battle-bottom .game-card {
        max-width: 132px !important;
      }
    }



    /* Update: Display available hand cards larger in Duel mode */
    .battle-bottom.panel {
      padding: 18px 22px !important;
      overflow: visible !important;
    }

    .player-row {
      grid-template-columns: repeat(6, minmax(165px, 220px)) !important;
      justify-content: center !important;
      align-items: start !important;
      gap: 16px !important;
    }

    .battle-bottom .game-card {
      max-width: 220px !important;
      width: 100% !important;
      transform-origin: center bottom;
    }

    .battle-bottom .game-card.selectable:hover {
      transform: translateY(-6px) scale(1.035) !important;
    }

    @media (max-width: 1120px) {
      .player-row {
        grid-template-columns: repeat(3, minmax(140px, 188px)) !important;
        gap: 14px !important;
      }

      .battle-bottom .game-card {
        max-width: 188px !important;
      }
    }

    @media (max-width: 700px) {
      .player-row {
        grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
        gap: 10px !important;
      }

      .battle-bottom.panel {
        padding: 14px 12px !important;
      }

      .battle-bottom .game-card {
        max-width: 148px !important;
      }
    }

  

    /* =========================================================
       Final Battle Layout Pass
       - Battle-Seite ohne Scrollen auf Desktop
       - center more compact, Handkarten bottom larger
       - Round announcement 4 seconds (JS constant)
       - DRAW as a red overlay marker directly on the videos
       ========================================================= */

    body.battle-active {
      overflow: hidden !important;
    }

    body.battle-active .app {
      height: 100vh !important;
      overflow: hidden !important;
      padding: 10px 0 !important;
    }

    body.battle-active #battleScreen,
    body.battle-active #battleScreen.screen.active {
      height: calc(100vh - 20px) !important;
      overflow: hidden !important;
    }

    body.battle-active .battle-screen {
      height: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: minmax(78px, 112px) minmax(250px, 1fr) minmax(238px, 302px) !important;
      gap: 8px !important;
      overflow: hidden !important;
    }

    body.battle-active .battle-top {
      min-height: 0 !important;
      height: 100% !important;
      padding: 7px 12px !important;
      border-radius: 22px !important;
      overflow: hidden !important;
    }

    body.battle-active .enemy-row {
      height: 100% !important;
      grid-template-columns: repeat(6, minmax(58px, 88px)) !important;
      gap: 8px !important;
      justify-content: center !important;
      align-content: center !important;
      align-items: center !important;
    }

    body.battle-active .enemy-card-back {
      width: 100% !important;
      max-width: 88px !important;
      max-height: 112px !important;
      border-radius: 14px !important;
      box-shadow: 0 8px 16px rgba(0,0,0,.24) !important;
    }

    body.battle-active .battle-arena {
      height: 100% !important;
      min-height: 0 !important;
      grid-template-columns: minmax(220px, 1fr) minmax(145px, 215px) minmax(220px, 1fr) !important;
      gap: clamp(10px, 1.6vw, 22px) !important;
      padding: clamp(8px, 1.2vw, 14px) !important;
      border-radius: 24px !important;
      overflow: hidden !important;
    }

    body.battle-active .drop-zone {
      width: min(250px, 100%) !important;
      height: clamp(235px, 31vh, 315px) !important;
      min-height: 0 !important;
      max-height: 315px !important;
      padding: 8px !important;
      border-radius: 22px !important;
      box-shadow: inset 0 0 34px rgba(0,0,0,.22), 0 10px 22px rgba(0,0,0,.18) !important;
    }

    body.battle-active .drop-zone::before {
      top: 8px !important;
      padding: 4px 8px !important;
      font-size: 9px !important;
    }

    body.battle-active .drop-zone .game-card {
      max-width: 178px !important;
      width: 100% !important;
    }

    body.battle-active .drop-empty {
      max-width: 150px !important;
      font-size: 12px !important;
      line-height: 1.35 !important;
    }

    body.battle-active .battle-match-score {
      height: clamp(150px, 23vh, 205px) !important;
      min-height: 0 !important;
      max-width: 215px !important;
      padding: 10px !important;
      border-radius: 22px !important;
      gap: 5px !important;
      align-self: center !important;
      box-shadow: 0 12px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    body.battle-active .battle-match-round {
      gap: 4px !important;
    }

    body.battle-active .battle-match-round-title {
      font-size: clamp(18px, 1.55vw, 26px) !important;
      line-height: .95 !important;
    }

    body.battle-active .battle-match-round-sub,
    body.battle-active .battle-match-special,
    body.battle-active .battle-match-score span {
      font-size: 10px !important;
      line-height: 1.2 !important;
    }

    body.battle-active .battle-match-score > div:last-child > strong {
      font-size: clamp(34px, 3.2vw, 54px) !important;
      line-height: .86 !important;
    }

    body.battle-active .battle-match-score .action-timer {
      margin-top: 5px !important;
      padding: 6px 9px !important;
      font-size: 12px !important;
    }

    body.battle-active .battle-match-score .action-timer strong {
      font-size: clamp(25px, 2.25vw, 38px) !important;
      line-height: .9 !important;
    }

    body.battle-active .battle-bottom.panel {
      height: 100% !important;
      min-height: 0 !important;
      max-height: 302px !important;
      padding: 10px 16px 12px !important;
      border-radius: 24px !important;
      overflow: visible !important;
      display: grid !important;
      align-items: center !important;
    }

    body.battle-active .player-row {
      width: 100% !important;
      height: 100% !important;
      grid-template-columns: repeat(6, minmax(148px, 214px)) !important;
      gap: clamp(8px, 1vw, 14px) !important;
      justify-content: center !important;
      align-content: center !important;
      align-items: center !important;
    }

    body.battle-active .battle-bottom .game-card {
      max-width: 214px !important;
      width: 100% !important;
      max-height: 285px !important;
      align-self: center !important;
    }

    body.battle-active .battle-bottom .game-card.selectable:hover {
      transform: translateY(-4px) scale(1.022) !important;
    }

    @media (max-height: 860px) {
      body.battle-active .battle-screen {
        grid-template-rows: minmax(64px, 92px) minmax(210px, 1fr) minmax(205px, 264px) !important;
        gap: 6px !important;
      }

      body.battle-active .enemy-row {
        grid-template-columns: repeat(6, minmax(50px, 72px)) !important;
      }

      body.battle-active .enemy-card-back {
        max-width: 72px !important;
        max-height: 94px !important;
      }

      body.battle-active .drop-zone {
        height: clamp(205px, 28vh, 270px) !important;
      }

      body.battle-active .drop-zone .game-card {
        max-width: 152px !important;
      }

      body.battle-active .battle-match-score {
        height: clamp(132px, 21vh, 174px) !important;
        max-width: 190px !important;
      }

      body.battle-active .player-row {
        grid-template-columns: repeat(6, minmax(126px, 180px)) !important;
      }

      body.battle-active .battle-bottom .game-card {
        max-width: 180px !important;
        max-height: 240px !important;
      }
    }

    @media (max-width: 1120px) {
      body.battle-active .battle-arena {
        grid-template-columns: minmax(190px, 1fr) minmax(135px, 190px) minmax(190px, 1fr) !important;
      }

      body.battle-active .player-row {
        grid-template-columns: repeat(6, minmax(108px, 1fr)) !important;
      }

      body.battle-active .battle-bottom .game-card {
        max-width: 155px !important;
      }
    }

    @media (max-width: 760px) {
      body.battle-active {
        overflow: auto !important;
      }

      body.battle-active .app,
      body.battle-active #battleScreen,
      body.battle-active #battleScreen.screen.active {
        height: auto !important;
        overflow: visible !important;
      }
    }

    /* DRAW: red, heavy overlay marker directly above both videos. */
    .duel-video-area.draw-mode {
      border-color: rgba(255, 55, 86, .52) !important;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,55,86,.20), transparent 42%),
        radial-gradient(circle at 18% 20%, rgba(168,85,247,.18), transparent 36%),
        radial-gradient(circle at 82% 82%, rgba(34,211,238,.10), transparent 38%),
        rgba(0,0,0,.44) !important;
      box-shadow: 0 18px 38px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(255,55,86,.12) !important;
    }

    .draw-victory-videos::before {
      content: "DRAW" !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      z-index: 30 !important;
      transform: translate(-50%, -50%) rotate(-3deg) !important;
      width: min(430px, 74%) !important;
      min-height: clamp(66px, 8vw, 92px) !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 22px !important;
      border: 4px solid rgba(255,255,255,.84) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.20), transparent 38%),
        linear-gradient(135deg, #ff174d 0%, #b3122f 48%, #5f0718 100%) !important;
      color: #fff !important;
      font-size: clamp(42px, 5.8vw, 82px) !important;
      line-height: .78 !important;
      font-weight: 1000 !important;
      letter-spacing: .16em !important;
      text-indent: .16em !important;
      text-transform: uppercase !important;
      text-shadow:
        0 3px 0 rgba(55,0,12,.72),
        0 0 18px rgba(255,255,255,.22),
        0 0 28px rgba(255,23,77,.45) !important;
      box-shadow:
        0 22px 44px rgba(0,0,0,.62),
        0 0 0 8px rgba(255,23,77,.16),
        0 0 42px rgba(255,23,77,.38),
        inset 0 2px 0 rgba(255,255,255,.40),
        inset 0 -8px 0 rgba(0,0,0,.24) !important;
      pointer-events: none !important;
    }

    .draw-victory-videos::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      z-index: 29 !important;
      transform: translate(-50%, -50%) rotate(-3deg) !important;
      width: min(480px, 82%) !important;
      height: clamp(86px, 10vw, 116px) !important;
      border-radius: 26px !important;
      background: radial-gradient(ellipse at center, rgba(255,23,77,.38), rgba(255,23,77,.12) 42%, transparent 72%) !important;
      filter: blur(8px) !important;
      opacity: .96 !important;
      pointer-events: none !important;
    }

    .draw-victory-video-card {
      border-color: rgba(255, 55, 86, .30) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.28), 0 0 18px rgba(255,55,86,.10) !important;
    }

    @media (max-width: 700px) {
      .draw-victory-videos::before {
        width: min(310px, 84%) !important;
        min-height: 58px !important;
        font-size: 40px !important;
      }

      .draw-victory-videos::after {
        width: min(350px, 88%) !important;
        height: 76px !important;
      }
    }


    /* =========================================================
       Battle Hand Polish Pass
       - Handkarten bottom larger
       - Card type display below each player card
       - Desktop weiterhin ohne Scrollen
       ========================================================= */

    body.battle-active .battle-screen {
      grid-template-rows: minmax(64px, 96px) minmax(220px, 1fr) minmax(282px, 352px) !important;
      gap: 7px !important;
    }

    body.battle-active .battle-top {
      padding: 5px 12px !important;
    }

    body.battle-active .enemy-row {
      grid-template-columns: repeat(6, minmax(50px, 76px)) !important;
      gap: 7px !important;
    }

    body.battle-active .enemy-card-back {
      max-width: 76px !important;
      max-height: 99px !important;
    }

    body.battle-active .battle-arena {
      grid-template-columns: minmax(210px, 1fr) minmax(132px, 190px) minmax(210px, 1fr) !important;
      padding: 8px 12px !important;
      gap: clamp(8px, 1.35vw, 18px) !important;
    }

    body.battle-active .drop-zone {
      width: min(232px, 100%) !important;
      height: clamp(208px, 27vh, 282px) !important;
      max-height: 282px !important;
      padding: 7px !important;
    }

    body.battle-active .drop-zone .game-card {
      max-width: 158px !important;
    }

    body.battle-active .battle-match-score {
      height: clamp(126px, 19vh, 166px) !important;
      max-width: 190px !important;
      padding: 8px !important;
    }

    body.battle-active .battle-match-round-title {
      font-size: clamp(17px, 1.35vw, 23px) !important;
    }

    body.battle-active .battle-match-score > div:last-child > strong {
      font-size: clamp(30px, 2.8vw, 46px) !important;
    }

    body.battle-active .battle-bottom.panel {
      max-height: 352px !important;
      padding: 10px 18px 12px !important;
      align-items: stretch !important;
      overflow: hidden !important;
    }

    body.battle-active .player-row {
      grid-template-columns: repeat(6, minmax(164px, 232px)) !important;
      gap: clamp(10px, 1.15vw, 16px) !important;
      align-items: end !important;
      align-content: center !important;
    }

    .battle-hand-card {
      width: 100%;
      min-width: 0;
      display: grid;
      justify-items: center;
      align-content: end;
      gap: 7px;
      isolation: isolate;
    }

    body.battle-active .battle-hand-card .game-card {
      width: min(100%, 232px) !important;
      max-width: 232px !important;
      max-height: 302px !important;
      align-self: end !important;
      transform-origin: center bottom !important;
    }

    body.battle-active .battle-hand-card .game-card.selectable:hover {
      transform: translateY(-5px) scale(1.025) !important;
    }

    .battle-card-type-chip {
      position: relative;
      max-width: 100%;
      min-height: 25px;
      display: inline-grid;
      place-items: center;
      padding: 6px 11px 5px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, rgba(168,85,247,.36), rgba(34,211,238,.28));
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--type-a) 45%, rgba(10,12,24,.95)), color-mix(in srgb, var(--type-b) 34%, rgba(10,12,24,.95)));
      color: rgba(250,252,255,.94);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 16px rgba(0,0,0,.20);
      font-size: clamp(9px, .62vw, 11px);
      font-weight: 1000;
      line-height: 1;
      letter-spacing: .075em;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 1px 8px rgba(0,0,0,.35);
    }

    .battle-card-type-chip::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 55%);
      pointer-events: none;
    }

    .battle-hand-card.used .battle-card-type-chip {
      opacity: .42;
      filter: grayscale(.35);
    }

    @media (max-height: 860px) {
      body.battle-active .battle-screen {
        grid-template-rows: minmax(58px, 82px) minmax(186px, 1fr) minmax(250px, 318px) !important;
        gap: 6px !important;
      }

      body.battle-active .drop-zone {
        height: clamp(186px, 25vh, 242px) !important;
      }

      body.battle-active .drop-zone .game-card {
        max-width: 138px !important;
      }

      body.battle-active .battle-match-score {
        height: clamp(112px, 17vh, 146px) !important;
        max-width: 170px !important;
      }

      body.battle-active .player-row {
        grid-template-columns: repeat(6, minmax(142px, 205px)) !important;
        gap: 10px !important;
      }

      body.battle-active .battle-hand-card .game-card {
        max-width: 205px !important;
        max-height: 267px !important;
      }

      .battle-card-type-chip {
        min-height: 22px;
        padding: 5px 9px 4px;
        font-size: 9px;
      }
    }

    @media (max-width: 1120px) {
      body.battle-active .player-row {
        grid-template-columns: repeat(3, minmax(132px, 1fr)) !important;
      }

      body.battle-active .battle-hand-card .game-card {
        max-width: 180px !important;
      }
    }

    @media (max-width: 760px) {
      body.battle-active .player-row {
        grid-template-columns: repeat(2, minmax(126px, 1fr)) !important;
      }

      body.battle-active .battle-hand-card .game-card {
        max-width: 164px !important;
      }
    }

  

    /* =========================================================
       Battle Fix Pass – Center-Box + gelegte Cards
       - Center display larger again so rating, special, and timer do not overflow
       - Already played cards larger in the pick fields
       - Hand cards at bottom and opponent cards at top remain unchanged
       ========================================================= */

    body.battle-active .battle-arena {
      grid-template-columns: minmax(210px, 1fr) minmax(238px, 302px) minmax(210px, 1fr) !important;
    }

    body.battle-active .battle-match-score {
      width: min(302px, 100%) !important;
      max-width: 302px !important;
      height: clamp(188px, 25vh, 238px) !important;
      min-height: 188px !important;
      padding: 16px 15px !important;
      gap: 9px !important;
      display: grid !important;
      align-content: center !important;
      justify-items: center !important;
      overflow: hidden !important;
    }

    body.battle-active .battle-match-round {
      width: 100% !important;
      max-width: 270px !important;
      gap: 5px !important;
      justify-items: center !important;
    }

    body.battle-active .battle-match-round-title {
      max-width: 100% !important;
      font-size: clamp(23px, 2vw, 34px) !important;
      line-height: .98 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
    }

    body.battle-active .battle-match-round-sub {
      font-size: 11px !important;
      line-height: 1.15 !important;
    }

    body.battle-active .battle-match-special {
      max-width: 238px !important;
      margin: 1px auto 0 !important;
      padding: 3px 8px !important;
      border-radius: 10px !important;
      background: rgba(255, 209, 102, .10) !important;
      border: 1px solid rgba(255, 209, 102, .16) !important;
      font-size: clamp(10px, .72vw, 12px) !important;
      line-height: 1.18 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.battle-active .battle-match-score .action-timer {
      max-width: 244px !important;
      margin-top: 6px !important;
      padding: 8px 12px !important;
      gap: 7px !important;
      font-size: 12px !important;
      white-space: nowrap !important;
    }

    body.battle-active .battle-match-score .action-timer strong {
      font-size: clamp(31px, 2.7vw, 45px) !important;
      line-height: .86 !important;
    }

    body.battle-active .battle-match-score > div:last-child > strong {
      font-size: clamp(40px, 3.55vw, 60px) !important;
      line-height: .88 !important;
    }

    body.battle-active .battle-match-score > div:last-child > span {
      font-size: 11px !important;
      margin-top: 4px !important;
    }

    body.battle-active .drop-zone .game-card:not(.compact) {
      width: auto !important;
      height: min(calc(100% - 34px), 292px) !important;
      max-width: 92% !important;
      min-height: 0 !important;
      align-self: center !important;
      justify-self: center !important;
    }

    body.battle-active .drop-zone .game-card:not(.compact) .card-art img,
    body.battle-active .drop-zone .game-card:not(.compact) .card-art video {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }

    @media (max-height: 860px) {
      body.battle-active .battle-arena {
        grid-template-columns: minmax(205px, 1fr) minmax(220px, 276px) minmax(205px, 1fr) !important;
      }

      body.battle-active .battle-match-score {
        width: min(276px, 100%) !important;
        max-width: 276px !important;
        height: clamp(166px, 23vh, 210px) !important;
        min-height: 166px !important;
        padding: 13px 12px !important;
      }

      body.battle-active .battle-match-round {
        max-width: 246px !important;
      }

      body.battle-active .battle-match-round-title {
        font-size: clamp(21px, 1.8vw, 30px) !important;
      }

      body.battle-active .battle-match-special {
        max-width: 220px !important;
        font-size: 10px !important;
        line-height: 1.14 !important;
      }

      body.battle-active .battle-match-score .action-timer strong {
        font-size: clamp(28px, 2.3vw, 39px) !important;
      }

      body.battle-active .battle-match-score > div:last-child > strong {
        font-size: clamp(36px, 3.15vw, 52px) !important;
      }

      body.battle-active .drop-zone .game-card:not(.compact) {
        height: min(calc(100% - 30px), 250px) !important;
        max-width: 90% !important;
      }
    }

    @media (max-width: 1120px) {
      body.battle-active .battle-arena {
        grid-template-columns: minmax(180px, 1fr) minmax(205px, 252px) minmax(180px, 1fr) !important;
      }

      body.battle-active .battle-match-score {
        width: min(252px, 100%) !important;
        max-width: 252px !important;
      }
    }

  

    /* Fix: Remove slot labels under My Deck */
    #deckScreen .slot::before,
    #deckScreen .slot.filled::before {
      content: none !important;
      display: none !important;
    }

  

    /* Fix: Leere Deck-Slots etwas smaller and weiter nach bottom,
       damit sie not in die obere Infoleiste hineinragen. */
    #deckScreen .deck-grid {
      margin-top: 16px !important;
    }

    #deckScreen .slot:not(.filled) {
      width: clamp(160px, 20.5vh, 232px) !important;
    }

    @media (max-width: 1180px) {
      #deckScreen .deck-grid {
        margin-top: 12px !important;
      }
    }

  

    /* Fix: Empty slots under My Deck open card selection */
    #deckScreen .slot-open-picker {
      cursor: pointer;
    }

    #deckScreen .slot-open-picker:hover,
    #deckScreen .slot-open-picker:focus-visible {
      border-color: rgba(34,211,238,.42) !important;
      background:
        radial-gradient(circle at 50% 35%, rgba(34,211,238,.18), transparent 58%),
        rgba(255,255,255,.038) !important;
      outline: none;
      transform: translateY(-2px);
    }

  

    /* =========================================================
       Pack Shop + card ownership extension
       ========================================================= */
    .btn-test {
      background: linear-gradient(135deg, rgba(71,230,161,.18), rgba(34,211,238,.12)) !important;
      border-color: rgba(71,230,161,.35) !important;
      color: #c7ffdf !important;
    }

    .menu-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: clamp(18px, 2vw, 28px) !important;
    }

    .menu-card {
      min-height: clamp(245px, 26vh, 340px) !important;
      padding: 28px !important;
      overflow: hidden !important;
      align-content: end !important;
      isolation: isolate;
    }

    .menu-card .menu-card-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: .72;
      transform: scale(1.03);
      transition: transform .22s ease, opacity .22s ease;
      pointer-events: none;
    }

    .menu-card::before {
      z-index: -1 !important;
      background:
        linear-gradient(180deg, rgba(6,7,16,.05) 0%, rgba(6,7,16,.34) 42%, rgba(6,7,16,.92) 100%),
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.12), transparent 28%) !important;
    }

    .menu-card:hover .menu-card-bg {
      transform: scale(1.08);
      opacity: .88;
    }

    .menu-card strong {
      position: relative;
      z-index: 2;
      font-size: clamp(28px, 2.8vw, 44px) !important;
      max-width: 86% !important;
      text-shadow: 0 4px 18px rgba(0,0,0,.55);
    }

    .menu-card span {
      position: relative;
      z-index: 2;
      font-size: 15px;
      max-width: 92%;
      text-shadow: 0 2px 12px rgba(0,0,0,.55);
    }

    .shop-shell {
      position: relative;
      overflow: hidden;
      min-height: 640px;
      padding: clamp(18px, 2.4vw, 34px) !important;
    }

    .shop-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 22% 20%, rgba(168,85,247,.18), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(34,211,238,.15), transparent 25%),
        radial-gradient(circle at 50% 100%, rgba(255,63,173,.11), transparent 42%);
      pointer-events: none;
    }

    .shop-header {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-end;
      margin-bottom: 24px;
    }

    .shop-header h2 {
      margin: 0;
      font-size: clamp(34px, 4.3vw, 70px);
      line-height: .9;
      letter-spacing: -.06em;
    }

    .shop-header p {
      margin: 10px 0 0;
      color: rgba(232,237,255,.74);
      max-width: 720px;
      line-height: 1.5;
      font-weight: 650;
    }

    .shop-stock-pill {
      white-space: nowrap;
      border-radius: 999px;
      padding: 11px 14px;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.13);
      color: #dce7ff;
      font-weight: 1000;
      letter-spacing: .03em;
      text-transform: uppercase;
      font-size: 12px;
    }

    .shop-pack-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(280px, 420px) minmax(280px, 1fr);
      gap: clamp(18px, 3vw, 42px);
      align-items: stretch;
    }

    .starter-pack-card {
      min-height: 520px;
      padding: 22px;
      display: grid;
      justify-items: center;
      align-content: space-between;
      text-align: center;
      border-radius: 32px;
      border: 1px solid rgba(255,255,255,.15);
      background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        radial-gradient(circle at 50% 15%, rgba(247,201,72,.18), transparent 36%);
      box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .starter-pack-button,
    .opening-pack-button {
      width: min(270px, 90%);
      aspect-ratio: 3 / 4;
      border-radius: 28px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 20px 44px rgba(0,0,0,.28);
      overflow: visible;
    }

    .starter-pack-button img,
    .opening-pack-button img {
      width: 116%;
      height: 116%;
      object-fit: contain;
      filter: drop-shadow(0 18px 24px rgba(0,0,0,.34));
      pointer-events: none;
    }

    .starter-pack-button:hover:not(:disabled),
    .opening-pack-button:hover:not(:disabled) {
      transform: translateY(-5px) scale(1.025) !important;
    }

    .starter-pack-button.pack-pop,
    .opening-pack-button.pack-pop {
      animation: packPop .36s cubic-bezier(.2, 1.35, .36, 1);
    }

    @keyframes packPop {
      0% { transform: scale(1); }
      45% { transform: scale(1.105); }
      100% { transform: scale(1); }
    }

    .starter-pack-card h3 {
      margin: 8px 0 0;
      font-size: clamp(28px, 3vw, 44px);
      letter-spacing: -.055em;
    }

    .starter-pack-card p {
      margin: 8px auto 0;
      max-width: 320px;
      color: rgba(232,237,255,.70);
      line-height: 1.45;
      font-weight: 700;
    }

    .pack-rule-list {
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 22px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.16);
    }

    .pack-rule-list strong {
      font-size: clamp(22px, 2.2vw, 34px);
      letter-spacing: -.04em;
    }

    .pack-rule-list span {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(232,237,255,.75);
      font-weight: 800;
      line-height: 1.35;
    }

    .pack-rule-list span::before {
      content: "✓";
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 999px;
      color: #06141b;
      background: linear-gradient(135deg, #47e6a1, #22d3ee);
      font-size: 13px;
      font-weight: 1000;
    }

    .pack-opening {
      position: relative;
      z-index: 1;
      min-height: 620px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
      align-items: center;
      justify-items: center;
      text-align: center;
    }

    .pack-opening h2 {
      margin: 0;
      font-size: clamp(34px, 4vw, 68px);
      letter-spacing: -.06em;
      line-height: .92;
    }

    .pack-opening p {
      margin: 8px 0 0;
      color: rgba(232,237,255,.74);
      font-weight: 750;
    }

    .pack-opening-stage {
      width: min(1120px, 100%);
      min-height: 430px;
      display: grid;
      align-items: end;
      justify-items: center;
      position: relative;
      padding-top: 80px;
    }

    .pulled-cards {
      position: absolute;
      inset: 0 0 170px 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: clamp(8px, 1.2vw, 16px);
      pointer-events: none;
    }

    .pulled-card-wrap {
      width: clamp(112px, 12vw, 168px);
      animation: cardFromPack .48s cubic-bezier(.2, 1.15, .32, 1) both;
      transform-origin: center bottom;
    }

    .pulled-card-wrap:nth-child(1) { transform: translateY(0) rotate(-10deg); }
    .pulled-card-wrap:nth-child(2) { transform: translateY(-12px) rotate(-6deg); }
    .pulled-card-wrap:nth-child(3) { transform: translateY(-20px) rotate(-2deg); }
    .pulled-card-wrap:nth-child(4) { transform: translateY(-20px) rotate(2deg); }
    .pulled-card-wrap:nth-child(5) { transform: translateY(-12px) rotate(6deg); }
    .pulled-card-wrap:nth-child(6) { transform: translateY(0) rotate(10deg); }

    @keyframes cardFromPack {
      0% { opacity: 0; transform: translateY(135px) scale(.52) rotate(0deg); filter: blur(3px); }
      65% { opacity: 1; transform: translateY(-18px) scale(1.06) rotate(var(--reveal-rotate, 0deg)); filter: blur(0); }
      100% { opacity: 1; }
    }

    .pack-progress {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.13);
      color: rgba(239,244,255,.85);
      font-weight: 1000;
    }

    .pack-progress strong { color: #9ff7cf; }

    .empty-owned-note {
      grid-column: 1 / -1;
      display: grid;
      place-items: center;
      min-height: 260px;
      padding: 26px;
      border-radius: 24px;
      border: 1px dashed rgba(255,255,255,.18);
      color: rgba(232,237,255,.72);
      text-align: center;
      font-weight: 800;
      line-height: 1.5;
    }

    @media (max-width: 1180px) {
      .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .shop-pack-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .menu-grid { grid-template-columns: 1fr !important; }
      .menu-card { min-height: 220px !important; }
      .shop-header { align-items: stretch; flex-direction: column; }
      .pulled-cards { flex-wrap: wrap; inset-bottom: 150px; }
      .pulled-card-wrap { width: min(120px, 28vw); }
    }

  
    /* Update: Starter Pack is one-time only and disappears afterward */
    .starter-pack-card.is-gone {
      display: none !important;
    }

    .shop-empty-note {
      grid-column: 1 / -1;
      min-height: 220px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 30px;
      border-radius: 28px;
      border: 1px dashed rgba(255,255,255,.18);
      background:
        radial-gradient(circle at 50% 0%, rgba(168,85,247,.18), transparent 58%),
        rgba(255,255,255,.035);
      color: rgba(235,241,255,.74);
      font-weight: 850;
      line-height: 1.45;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .shop-empty-note strong {
      display: block;
      margin-bottom: 7px;
      color: #fff;
      font-size: clamp(22px, 2.2vw, 34px);
      letter-spacing: -.04em;
    }

  
    /* Final-Reveal: Nach Round 5 will die ungespielte letzte CPU-card kurz aufgedeckt. */
    .enemy-card-back.final-leftover-reveal {
      position: relative;
      overflow: visible !important;
      perspective: 760px;
      opacity: 1 !important;
      border-color: rgba(255, 63, 173, .62) !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.18),
        0 0 26px rgba(255, 63, 173, .34),
        0 14px 30px rgba(0,0,0,.36) !important;
      z-index: 12;
    }

    .enemy-card-flip-inner {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: inherit;
      border-radius: inherit;
      transform-style: preserve-3d;
      animation: finalCpuLeftoverFlip 3000ms cubic-bezier(.2,.8,.2,1) forwards;
    }

    .enemy-card-flip-face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: inherit;
      overflow: hidden;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: rgba(5, 7, 18, .94);
    }

    .enemy-card-flip-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .enemy-card-flip-front {
      transform: rotateY(180deg);
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.14), transparent 26%),
        linear-gradient(145deg, rgba(168,85,247,.22), rgba(34,211,238,.12)) !important;
    }

    .enemy-card-flip-front .enemy-reveal-card-img {
      width: 94%;
      height: 94%;
      object-fit: contain;
      object-position: center;
      display: block;
      background: transparent;
      filter:
        drop-shadow(0 0 16px rgba(34,211,238,.28))
        drop-shadow(0 12px 18px rgba(0,0,0,.40));
    }

    .enemy-reveal-placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 10px;
      text-align: center;
      color: rgba(255,255,255,.78);
      font-weight: 1000;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .enemy-leftover-label {
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-50%);
      z-index: 15;
      padding: 5px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,63,173,.95), rgba(168,85,247,.95));
      color: #fff;
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: 0 8px 18px rgba(0,0,0,.30);
      font-size: 10px;
      line-height: 1;
      font-weight: 1000;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
      animation: finalCpuLeftoverLabelIn 3000ms ease forwards;
      pointer-events: none;
    }

    @keyframes finalCpuLeftoverFlip {
      0% {
        transform: translateY(0) scale(1) rotateY(0deg);
      }
      18% {
        transform: translateY(-8px) scale(1.07) rotateY(0deg);
      }
      58%, 100% {
        transform: translateY(-10px) scale(1.08) rotateY(180deg);
      }
    }

    @keyframes finalCpuLeftoverLabelIn {
      0%, 22% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(.92);
      }
      45%, 100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

  

    /* Update: Final-Leftover-Reveal larger + Center-Box mit mehr space for Special Rounds */
    body.final-leftover-reveal-active.battle-active .battle-top,
    body.final-leftover-reveal-active.battle-active .enemy-row {
      overflow: visible !important;
    }

    body.final-leftover-reveal-active.battle-active .battle-screen,
    body.final-leftover-reveal-active.battle-active #battleScreen,
    body.final-leftover-reveal-active.battle-active .app {
      overflow: visible !important;
    }

    body.final-leftover-reveal-active.battle-active .enemy-card-back.final-leftover-reveal {
      z-index: 80 !important;
      transform-origin: center top !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.22),
        0 0 36px rgba(255, 63, 173, .54),
        0 18px 40px rgba(0,0,0,.44) !important;
    }

    body.final-leftover-reveal-active.battle-active .enemy-card-flip-front .enemy-reveal-card-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      filter:
        drop-shadow(0 0 22px rgba(255,63,173,.34))
        drop-shadow(0 0 18px rgba(34,211,238,.24))
        drop-shadow(0 18px 26px rgba(0,0,0,.48)) !important;
    }

    body.final-leftover-reveal-active.battle-active .enemy-leftover-label {
      bottom: -16px !important;
      font-size: 11px !important;
      padding: 7px 13px !important;
      box-shadow: 0 12px 24px rgba(0,0,0,.38), 0 0 18px rgba(255,63,173,.42) !important;
    }

    @keyframes finalCpuLeftoverFlip {
      0% {
        transform: translateY(0) scale(1) rotateY(0deg);
      }
      16% {
        transform: translateY(-8px) scale(1.08) rotateY(0deg);
      }
      46% {
        transform: translateY(-10px) scale(1.12) rotateY(180deg);
      }
      70%, 100% {
        transform: translateY(42px) scale(1.82) rotateY(180deg);
      }
    }

    /* The center box in battle gets a little more width/height,
       so round type, special round, and timer have enough room. */
    body.battle-active .battle-arena {
      grid-template-columns: minmax(195px, 1fr) minmax(270px, 340px) minmax(195px, 1fr) !important;
    }

    body.battle-active .battle-match-score {
      width: min(340px, 100%) !important;
      max-width: 340px !important;
      height: clamp(208px, 27vh, 265px) !important;
      min-height: 208px !important;
      padding: 18px 18px !important;
      gap: 11px !important;
      overflow: hidden !important;
    }

    body.battle-active .battle-match-round {
      max-width: 306px !important;
      gap: 6px !important;
    }

    body.battle-active .battle-match-round-title {
      font-size: clamp(24px, 2.12vw, 36px) !important;
      line-height: 1 !important;
      max-width: 100% !important;
      white-space: normal !important;
    }

    body.battle-active .battle-match-special {
      max-width: 292px !important;
      padding: 5px 10px !important;
      font-size: clamp(10px, .78vw, 13px) !important;
      line-height: 1.22 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.battle-active .battle-match-score .action-timer {
      max-width: 292px !important;
      padding: 9px 13px !important;
      font-size: 13px !important;
    }

    body.battle-active .battle-match-score .action-timer strong {
      font-size: clamp(32px, 2.8vw, 46px) !important;
    }

    body.battle-active .battle-match-score > div:last-child > strong {
      font-size: clamp(42px, 3.7vw, 64px) !important;
    }

    @media (max-height: 860px) {
      body.battle-active .battle-arena {
        grid-template-columns: minmax(190px, 1fr) minmax(246px, 314px) minmax(190px, 1fr) !important;
      }

      body.battle-active .battle-match-score {
        width: min(314px, 100%) !important;
        max-width: 314px !important;
        height: clamp(186px, 25vh, 230px) !important;
        min-height: 186px !important;
        padding: 15px 14px !important;
      }

      body.battle-active .battle-match-round {
        max-width: 284px !important;
      }

      body.battle-active .battle-match-special {
        max-width: 270px !important;
      }
    }

    @media (max-width: 1120px) {
      body.battle-active .battle-arena {
        grid-template-columns: minmax(170px, 1fr) minmax(230px, 292px) minmax(170px, 1fr) !important;
      }

      body.battle-active .battle-match-score {
        width: min(292px, 100%) !important;
        max-width: 292px !important;
      }
    }

  

    /* =========================================================
       Economy / Arena / Pack Shop extension
       ========================================================= */
    .economy-hud {
      position: sticky;
      top: 10px;
      z-index: 60;
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 10px;
      margin: 0 0 14px;
      pointer-events: none;
    }

    .economy-tile {
      min-height: 64px;
      border-radius: 18px;
      padding: 11px 13px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)), rgba(8,10,22,.78);
      box-shadow: 0 12px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
      display: grid;
      align-content: center;
      gap: 4px;
      overflow: hidden;
    }

    .economy-tile span {
      color: rgba(226,234,255,.66);
      font-size: 10px;
      font-weight: 1000;
      text-transform: uppercase;
      letter-spacing: .095em;
    }

    .economy-tile strong {
      color: #fff;
      font-size: clamp(19px, 2vw, 28px);
      line-height: .95;
      letter-spacing: -.035em;
    }

    .economy-progress {
      width: 100%;
      height: 8px;
      margin-top: 2px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.10);
    }

    .economy-progress i {
      display: block;
      height: 100%;
      width: var(--progress, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold));
    }

    .shop-pack-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
      align-items: stretch;
    }

    .shop-product-card {
      position: relative;
      min-height: 520px;
      padding: 22px;
      display: grid;
      justify-items: center;
      align-content: space-between;
      text-align: center;
      border-radius: 32px;
      border: 1px solid rgba(255,255,255,.15);
      background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        radial-gradient(circle at 50% 12%, rgba(168,85,247,.20), transparent 38%);
      box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
      overflow: hidden;
    }

    .shop-product-card.is-locked { opacity: .62; filter: grayscale(.25); }
    .shop-product-card.is-gone { display: none !important; }

    .shop-product-card h3 {
      margin: 8px 0 0;
      font-size: clamp(28px, 3vw, 44px);
      letter-spacing: -.055em;
    }

    .shop-product-card p {
      margin: 8px auto 0;
      max-width: 330px;
      color: rgba(232,237,255,.72);
      line-height: 1.45;
      font-weight: 700;
    }

    .shop-pack-price {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 10px;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(247,201,72,.12);
      border: 1px solid rgba(247,201,72,.24);
      color: #ffe7a6;
      font-size: 13px;
      font-weight: 1000;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .shop-pack-status {
      min-height: 22px;
      margin-top: 8px;
      color: rgba(232,237,255,.72);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .045em;
    }

    .shop-pack-button {
      width: min(270px, 90%);
      aspect-ratio: 3 / 4;
      border-radius: 28px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 20px 44px rgba(0,0,0,.28);
      overflow: visible;
    }

    .shop-pack-button img {
      width: 116%;
      height: 116%;
      object-fit: contain;
      filter: drop-shadow(0 18px 24px rgba(0,0,0,.34));
      pointer-events: none;
    }

    .shop-pack-button:hover:not(:disabled) { transform: translateY(-5px) scale(1.025) !important; }

    .claim-rewards-panel {
      position: relative;
      z-index: 2;
      margin: 0 0 18px;
      display: grid;
      gap: 10px;
    }

    .claim-reward-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-radius: 20px;
      padding: 13px 14px;
      border: 1px solid rgba(71,230,161,.28);
      background: linear-gradient(135deg, rgba(71,230,161,.13), rgba(34,211,238,.07));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .claim-reward-card strong { display: block; font-size: 18px; letter-spacing: -.025em; }
    .claim-reward-card span { display: block; color: rgba(232,237,255,.72); font-weight: 750; font-size: 13px; margin-top: 2px; }

    .claim-reward-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: 12px 14px;
      background: rgba(255,255,255,.06);
    }

    .claim-reward-panel-head strong {
      font-size: 14px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .claim-reward-panel-head span {
      color: rgba(232,237,255,.68);
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }

    .dupe-reward-badge,
    .evo-progress-chip {
      position: relative;
      z-index: 15;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 7px auto 0;
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(8,10,22,.76);
      color: #dce7ff;
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .05em;
      text-transform: uppercase;
      box-shadow: 0 8px 18px rgba(0,0,0,.22);
    }

    .dupe-reward-badge { color: #ffe7a6; border-color: rgba(247,201,72,.28); }
    .evo-progress-chip { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); pointer-events: none; }

    .reward-summary {
      margin-top: 12px;
      display: grid;
      gap: 7px;
      padding: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      color: rgba(239,244,255,.86);
      font-weight: 850;
      text-align: left;
    }

    .reward-summary-row { display: flex; justify-content: space-between; gap: 12px; }
    .reward-summary-row strong { color: #fff; }

    .final-reward-summary-slot {
      width: min(560px, 100%);
      margin: 2px auto 0;
      display: grid;
    }

    .final-reward-summary-slot:empty {
      display: none;
    }

    .final-reward-summary {
      margin-top: 6px;
      display: grid;
      gap: 10px;
    }

    .reward-fly-card {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.14), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.04));
      box-shadow: 0 16px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09);
      text-align: left;
      opacity: 0;
      transform: translateY(115vh) scale(.94);
      animation: rewardFlyInBounce 820ms cubic-bezier(.22, .92, .2, 1.08) forwards;
      animation-delay: var(--reward-delay, 0ms);
      overflow: hidden;
    }

    .reward-fly-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.12) 48%, transparent 60% 100%);
      transform: translateX(-120%);
      animation: rewardCardShine 900ms ease forwards;
      animation-delay: calc(var(--reward-delay, 0ms) + 180ms);
      pointer-events: none;
    }

    .reward-fly-card-coins {
      border-color: rgba(247,201,72,.25);
      background:
        radial-gradient(circle at 12% 8%, rgba(247,201,72,.22), transparent 34%),
        linear-gradient(145deg, rgba(247,201,72,.12), rgba(255,255,255,.04));
    }

    .reward-fly-card-trophies {
      border-color: rgba(34,211,238,.24);
      background:
        radial-gradient(circle at 12% 8%, rgba(34,211,238,.18), transparent 34%),
        linear-gradient(145deg, rgba(168,85,247,.12), rgba(255,255,255,.04));
    }

    .reward-fly-card-league {
      border-color: rgba(71,230,161,.23);
      background:
        radial-gradient(circle at 12% 8%, rgba(71,230,161,.16), transparent 34%),
        linear-gradient(145deg, rgba(71,230,161,.10), rgba(255,255,255,.04));
    }

    .reward-fly-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(0,0,0,.26);
      border: 1px solid rgba(255,255,255,.12);
      font-size: 23px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }

    .reward-fly-content { min-width: 0; }
    .reward-fly-content span {
      display: block;
      color: rgba(229,235,255,.68);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .09em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .reward-fly-content strong {
      display: block;
      color: #fff;
      font-size: clamp(25px, 3.3vw, 38px);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .reward-fly-content small {
      display: block;
      margin-top: 5px;
      color: rgba(239,244,255,.74);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    @keyframes rewardFlyInBounce {
      0% {
        opacity: 0;
        transform: translateY(115vh) scale(.94);
      }
      56% {
        opacity: 1;
        transform: translateY(-18px) scale(1.015);
      }
      74% {
        transform: translateY(7px) scale(.996);
      }
      88% {
        transform: translateY(-3px) scale(1.002);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes rewardCardShine {
      0% { transform: translateX(-120%); opacity: 0; }
      35% { opacity: .85; }
      100% { transform: translateX(120%); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .reward-fly-card,
      .reward-fly-card::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

    @media (max-width: 920px) {
      .economy-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
    }

    @media (max-width: 540px) {
      .economy-hud { grid-template-columns: 1fr; }
      .claim-reward-card { align-items: stretch; flex-direction: column; }
      .claim-reward-panel-head { align-items: flex-start; flex-direction: column; }
      .claim-reward-panel-head span { text-align: left; }
    }

  
    .final-text {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

  

    /* Update: Match view without economy HUD, surrender button, and larger round box */
    body.battle-active #economyHud {
      display: none !important;
    }

    body.battle-active .battle-screen {
      position: relative !important;
    }

    .surrender-btn {
      position: absolute;
      right: clamp(4px, 1.1vw, 18px);
      top: 50%;
      z-index: 16;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 122px;
      padding: 13px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 92, 122, .42);
      background:
        linear-gradient(180deg, rgba(255, 92, 122, .24), rgba(139, 35, 71, .22)),
        rgba(8, 10, 22, .86);
      color: #ffd3dc;
      font-weight: 1000;
      letter-spacing: .01em;
      box-shadow: 0 14px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
    }

    .surrender-btn:hover:not(:disabled) {
      transform: translateY(calc(-50% - 2px)) !important;
      background:
        linear-gradient(180deg, rgba(255, 92, 122, .34), rgba(139, 35, 71, .30)),
        rgba(8, 10, 22, .92);
    }

    .surrender-btn:disabled {
      opacity: .42;
      pointer-events: none;
    }

    body.battle-active .battle-match-score {
      min-width: clamp(245px, 25vw, 370px) !important;
      min-height: clamp(230px, 28vh, 315px) !important;
      padding: 24px 24px !important;
      gap: 14px !important;
      align-content: center !important;
    }

    body.battle-active .battle-match-round {
      max-width: 100% !important;
      gap: 8px !important;
    }

    body.battle-active .battle-match-round-title {
      font-size: clamp(25px, 2.55vw, 42px) !important;
      line-height: 1.05 !important;
      overflow-wrap: anywhere;
    }

    body.battle-active .battle-match-special {
      max-width: 100% !important;
      font-size: clamp(13px, 1.05vw, 16px) !important;
      line-height: 1.35 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.battle-active .battle-match-score > div:last-child strong {
      font-size: clamp(54px, 6vw, 92px) !important;
    }

    @media (max-width: 1280px) {
      .surrender-btn {
        position: static;
        width: min(320px, 100%);
        margin: -2px auto 0;
        transform: none;
      }
      .surrender-btn:hover:not(:disabled) {
        transform: translateY(-2px) !important;
      }
    }

  

    /* Final polish: battle center texts slightly smaller + surrender button red */
    body.battle-active .battle-match-round-title {
      font-size: clamp(23px, 2.3vw, 38px) !important;
      line-height: 1.02 !important;
      letter-spacing: -0.02em !important;
    }

    body.battle-active .battle-match-round-subtitle,
    body.battle-active .battle-match-score > .battle-match-round span,
    body.battle-active .battle-match-score .battle-match-round span {
      font-size: clamp(11px, 0.92vw, 14px) !important;
      line-height: 1.2 !important;
    }

    body.battle-active .battle-match-special {
      font-size: clamp(12px, 0.95vw, 15px) !important;
      line-height: 1.28 !important;
      padding: 12px 14px !important;
    }

    body.battle-active .battle-match-score > div:last-child strong {
      font-size: clamp(50px, 5.35vw, 84px) !important;
      line-height: .92 !important;
    }

    body.battle-active .battle-match-score > div:last-child span {
      font-size: clamp(10px, 0.78vw, 13px) !important;
      line-height: 1.1 !important;
    }

    .surrender-btn {
      border: 1px solid rgba(255, 74, 74, .62) !important;
      background:
        linear-gradient(180deg, rgba(255, 74, 74, .92), rgba(163, 20, 20, .88)),
        rgba(34, 8, 12, .96) !important;
      color: #fff2f2 !important;
      box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 24px rgba(255, 56, 56, .24) !important;
    }

    .surrender-btn:hover:not(:disabled) {
      background:
        linear-gradient(180deg, rgba(255, 96, 96, .98), rgba(184, 28, 28, .94)),
        rgba(34, 8, 12, .98) !important;
      box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 0 28px rgba(255, 56, 56, .30) !important;
    }

  

    /* Text-fit fix: center battle tile more compact so round title, special, and score do not overflow. */
    body.battle-active .battle-match-score {
      min-height: clamp(255px, 32vh, 345px) !important;
      padding: 20px 22px !important;
      gap: 8px !important;
      align-content: center !important;
      overflow: hidden !important;
    }

    body.battle-active .battle-match-round {
      gap: 4px !important;
      margin: 0 !important;
    }

    body.battle-active .battle-match-round-title {
      font-size: clamp(20px, 2.0vw, 34px) !important;
      line-height: 1.0 !important;
      letter-spacing: -0.018em !important;
      max-width: 100% !important;
    }

    body.battle-active .battle-match-round-sub,
    body.battle-active .battle-match-round-subtitle,
    body.battle-active .battle-match-score .battle-match-round span {
      font-size: clamp(10px, 0.82vw, 12px) !important;
      line-height: 1.12 !important;
      margin-top: 0 !important;
    }

    body.battle-active .battle-match-special {
      font-size: clamp(11px, 0.88vw, 14px) !important;
      line-height: 1.22 !important;
      padding: 10px 12px !important;
      margin: 2px 0 !important;
    }

    body.battle-active .battle-match-score .action-timer {
      padding: 8px 10px !important;
      margin-top: 2px !important;
      font-size: clamp(11px, .9vw, 14px) !important;
    }

    body.battle-active .battle-match-score .action-timer strong {
      font-size: clamp(24px, 2.8vw, 42px) !important;
      line-height: .9 !important;
    }

    body.battle-active .battle-match-score > div:last-child strong {
      font-size: clamp(46px, 5vw, 74px) !important;
      line-height: .86 !important;
    }

    body.battle-active .battle-match-score > div:last-child span {
      font-size: clamp(9px, 0.72vw, 11px) !important;
      margin-top: 2px !important;
    }

  

    /* Patch game16: Tasks, Special-Score-Bonus and Packlogik-Hinweise */
    .tasks-panel {
      display: grid;
      gap: 16px;
    }

    .task-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .task-card.is-done {
      border-color: rgba(71,230,161,.42);
      background: linear-gradient(145deg, rgba(71,230,161,.13), rgba(255,255,255,.035));
    }

    .task-copy {
      display: grid;
      gap: 6px;
    }

    .task-copy strong {
      font-size: clamp(20px, 2vw, 30px);
      letter-spacing: -.04em;
    }

    .task-copy span {
      color: var(--muted);
      font-weight: 750;
      line-height: 1.4;
    }

    .task-reward {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 11px;
      border-radius: 999px;
      color: #ffe7a6;
      background: rgba(247,201,72,.12);
      border: 1px solid rgba(247,201,72,.22);
      font-weight: 1000;
    }

    .score-boost-green {
      color: var(--good);
      text-shadow: 0 0 14px rgba(71,230,161,.34);
      font-weight: 1000;
    }

    @media (max-width: 700px) {
      .task-card {
        flex-direction: column;
        align-items: stretch;
      }
    }

  
    /* game17 Patch: Evo bar only under Evolution Cards + Evo Pack in the shop */
    .card-grid .game-card.type-evolution,
    .small-card-grid .game-card.type-evolution {
      margin-bottom: 34px !important;
    }

    .evo-progress-chip.evo-progress-bar-chip {
      position: absolute !important;
      left: 50% !important;
      bottom: -30px !important;
      transform: translateX(-50%) !important;
      width: min(92%, 190px) !important;
      display: grid !important;
      gap: 5px !important;
      padding: 7px 9px !important;
      border-radius: 14px !important;
      background: rgba(8, 11, 24, .88) !important;
      border: 1px solid rgba(71, 230, 161, .34) !important;
      box-shadow: 0 10px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
      pointer-events: none !important;
      z-index: 20 !important;
    }

    .evo-progress-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 10px;
      font-weight: 1000;
      color: rgba(235, 255, 246, .82);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .evo-progress-label strong {
      color: #b9ffd9;
      font-size: 11px;
      letter-spacing: 0;
    }

    .evo-progress-track {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.10);
    }

    .evo-progress-track i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--good), var(--accent-2));
      box-shadow: 0 0 14px rgba(71,230,161,.38);
    }

    .claim-reward-pack-img {
      width: 66px;
      height: 86px;
      object-fit: contain;
      filter: drop-shadow(0 10px 14px rgba(0,0,0,.30));
      margin-right: 4px;
    }

    .claim-reward-card {
      display: grid !important;
      grid-template-columns: auto 1fr auto;
      align-items: center;
    }

    .claim-reward-card-evo {
      border-color: rgba(71, 230, 161, .38) !important;
      background: linear-gradient(145deg, rgba(71,230,161,.13), rgba(255,255,255,.045)) !important;
    }

    @media (max-width: 540px) {
      .claim-reward-card {
        grid-template-columns: 1fr !important;
        justify-items: stretch;
      }

      .claim-reward-pack-img {
        margin: 0 auto 4px;
      }
    }


    /* game17 hotfix: Show special score cleanly inline + Evo bar visible under Evo cards */
    .duel-score #duelScoreText {
      display: flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: clamp(8px, 1.2vw, 16px) !important;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      text-align: center !important;
    }

    .duel-score #duelScoreText .score-side {
      display: inline-flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: .14em !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      margin: 0 !important;
    }

    .duel-score #duelScoreText .score-base,
    .duel-score #duelScoreText .score-separator {
      display: inline-block !important;
      line-height: 1 !important;
      margin: 0 !important;
      color: inherit !important;
      font-size: 1em !important;
      font-weight: 1000 !important;
    }

    .duel-score #duelScoreText .score-boost-green {
      display: inline-block !important;
      line-height: 1 !important;
      margin: 0 !important;
      color: var(--good) !important;
      font-size: .42em !important;
      font-weight: 1000 !important;
      letter-spacing: -.025em !important;
      vertical-align: baseline !important;
      text-shadow: 0 0 14px rgba(71,230,161,.38) !important;
    }

    .card-grid .game-card.type-evolution,
    .small-card-grid .game-card.type-evolution {
      margin-bottom: 62px !important;
      overflow: visible !important;
    }

    #allCardsGrid,
    #myCardsGrid {
      row-gap: 74px !important;
      padding-bottom: 76px !important;
      overflow: visible !important;
    }

    .collection-list {
      padding-bottom: 86px !important;
    }

    .evo-progress-chip.evo-progress-bar-chip {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      bottom: auto !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: min(96%, 205px) !important;
      min-height: 42px !important;
      display: grid !important;
      gap: 6px !important;
      padding: 8px 10px !important;
      border-radius: 15px !important;
      background: rgba(8, 11, 24, .96) !important;
      border: 1px solid rgba(71, 230, 161, .46) !important;
      box-shadow: 0 12px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10) !important;
      pointer-events: none !important;
      z-index: 80 !important;
      overflow: visible !important;
    }

    .evo-progress-label {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      font-size: 10px !important;
      line-height: 1 !important;
      font-weight: 1000 !important;
      color: rgba(235, 255, 246, .86) !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
    }

    .evo-progress-label span,
    .evo-progress-label strong {
      display: inline-block !important;
      line-height: 1 !important;
      margin: 0 !important;
    }

    .evo-progress-label strong {
      color: #b9ffd9 !important;
      font-size: 11px !important;
      letter-spacing: 0 !important;
    }

    .evo-progress-track {
      display: block !important;
      width: 100% !important;
      height: 8px !important;
      border-radius: 999px !important;
      overflow: hidden !important;
      background: rgba(255,255,255,.13) !important;
      border: 1px solid rgba(255,255,255,.11) !important;
    }

    .evo-progress-track i {
      display: block !important;
      height: 100% !important;
      min-width: 0 !important;
      border-radius: inherit !important;
      background: linear-gradient(90deg, var(--good), var(--accent-2)) !important;
      box-shadow: 0 0 14px rgba(71,230,161,.38) !important;
    }


  

    /* game17 Hotfix 2: Reset card spacing, remove locked label, place Evo bar compactly */
    #allCardsGrid,
    #myCardsGrid {
      row-gap: 16px !important;
      column-gap: 16px !important;
      padding-bottom: 24px !important;
      overflow: visible !important;
    }

    .collection-list {
      padding-bottom: 26px !important;
    }

    .card-grid .game-card.type-evolution,
    .small-card-grid .game-card.type-evolution {
      margin-bottom: 0 !important;
      overflow: visible !important;
    }

    .lock-label {
      display: none !important;
    }

    .evo-progress-chip.evo-progress-bar-chip {
      position: absolute !important;
      top: auto !important;
      bottom: 3px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: min(82%, 170px) !important;
      min-height: 31px !important;
      display: grid !important;
      gap: 4px !important;
      padding: 5px 8px !important;
      border-radius: 12px !important;
      background: rgba(8, 11, 24, .92) !important;
      border: 1px solid rgba(71, 230, 161, .42) !important;
      box-shadow: 0 8px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
      pointer-events: none !important;
      z-index: 90 !important;
      overflow: hidden !important;
    }

    .evo-progress-label {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
      font-size: 9px !important;
      line-height: 1 !important;
      font-weight: 1000 !important;
      color: rgba(235, 255, 246, .88) !important;
      letter-spacing: .055em !important;
      text-transform: uppercase !important;
    }

    .evo-progress-label span,
    .evo-progress-label strong {
      display: inline-block !important;
      line-height: 1 !important;
      margin: 0 !important;
    }

    .evo-progress-label strong {
      color: #b9ffd9 !important;
      font-size: 10px !important;
      letter-spacing: 0 !important;
    }

    .evo-progress-track {
      display: block !important;
      width: 100% !important;
      height: 6px !important;
      border-radius: 999px !important;
      overflow: hidden !important;
      background: rgba(255,255,255,.13) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
    }

    .evo-progress-track i {
      display: block !important;
      height: 100% !important;
      min-width: 0 !important;
      border-radius: inherit !important;
      background: linear-gradient(90deg, var(--good), var(--accent-2)) !important;
      box-shadow: 0 0 12px rgba(71,230,161,.38) !important;
    }

    /* game17 Hotfix 2: Special score in the duel center is stable and cleanly single-line */
    .duel-score #duelScoreText {
      display: inline-grid !important;
      grid-template-columns: auto auto auto !important;
      align-items: baseline !important;
      justify-content: center !important;
      column-gap: .22em !important;
      width: 100% !important;
      max-width: 100% !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      text-align: center !important;
      font-size: clamp(42px, 5vw, 68px) !important;
      letter-spacing: -.045em !important;
    }

    .duel-score #duelScoreText.score-with-special {
      font-size: clamp(36px, 4.15vw, 58px) !important;
      column-gap: .24em !important;
    }

    .duel-score #duelScoreText .score-side {
      display: inline-flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: .13em !important;
      min-width: max-content !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      margin: 0 !important;
      flex: none !important;
    }

    .duel-score #duelScoreText .score-base,
    .duel-score #duelScoreText .score-separator {
      display: inline-block !important;
      font: inherit !important;
      line-height: 1 !important;
      margin: 0 !important;
      color: #f6f7ff !important;
      font-weight: 1000 !important;
      letter-spacing: inherit !important;
      flex: none !important;
    }

    .duel-score #duelScoreText .score-boost-green {
      display: inline-block !important;
      flex: none !important;
      align-self: baseline !important;
      line-height: 1 !important;
      margin: 0 0 0 .03em !important;
      color: var(--good) !important;
      font-size: .50em !important;
      font-weight: 1000 !important;
      letter-spacing: -.025em !important;
      white-space: nowrap !important;
      transform: translateY(-.08em) !important;
      text-shadow: 0 0 14px rgba(71,230,161,.42) !important;
    }

    @media (max-width: 700px) {
      .duel-score #duelScoreText.score-with-special {
        font-size: clamp(30px, 9vw, 44px) !important;
        column-gap: .16em !important;
      }
      #allCardsGrid,
      #myCardsGrid {
        row-gap: 14px !important;
      }
    }

  

    /* game17 Hotfix 3: 6 cards per row, larger special-score layout, shop image adjusted */
    #allCardsGrid,
    #myCardsGrid {
      grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
      column-gap: 16px !important;
      row-gap: 16px !important;
    }

    @media (max-width: 1120px) {
      #allCardsGrid,
      #myCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 700px) {
      #allCardsGrid,
      #myCardsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    .duel-score #duelScoreText {
      display: inline-flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: .26em !important;
      width: auto !important;
      max-width: 100% !important;
      white-space: nowrap !important;
      text-align: center !important;
      font-size: clamp(60px, 6.2vw, 90px) !important;
      line-height: .94 !important;
      letter-spacing: -.055em !important;
    }

    .duel-score #duelScoreText.score-with-special {
      font-size: clamp(52px, 5.35vw, 78px) !important;
      gap: .22em !important;
    }

    .duel-score #duelScoreText .score-side {
      display: inline-flex !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: .10em !important;
      min-width: max-content !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      font-size: 1em !important;
      margin: 0 !important;
    }

    .duel-score #duelScoreText .score-base,
    .duel-score #duelScoreText .score-separator {
      display: inline-block !important;
      font-size: 1em !important;
      font-weight: 1000 !important;
      line-height: 1 !important;
      color: #f6f7ff !important;
      margin: 0 !important;
    }

    .duel-score #duelScoreText .score-boost-green {
      display: inline-block !important;
      font-size: .62em !important;
      font-weight: 1000 !important;
      line-height: 1 !important;
      margin: 0 0 0 .05em !important;
      color: var(--good) !important;
      white-space: nowrap !important;
      transform: translateY(-.05em) !important;
      text-shadow: 0 0 14px rgba(71,230,161,.42) !important;
    }

    @media (max-width: 700px) {
      .duel-score #duelScoreText {
        font-size: clamp(46px, 11vw, 62px) !important;
      }

      .duel-score #duelScoreText.score-with-special {
        font-size: clamp(38px, 9vw, 54px) !important;
        gap: .16em !important;
      }
    }

  

    /* game19: real video-game start page before the main menu */
    #startScreen {
      min-height: calc(100vh - 44px);
    }

    .start-page {
      min-height: calc(100vh - 70px);
      display: grid;
      grid-template-rows: minmax(360px, auto) auto;
      align-content: center;
      gap: clamp(18px, 3vw, 30px);
      padding: clamp(4px, 1.2vw, 14px) 0;
    }

    .start-hero-card {
      min-height: clamp(390px, 55vh, 570px) !important;
      display: grid !important;
      align-content: end !important;
      padding: clamp(30px, 5vw, 68px) !important;
    }

    .start-hero-card p {
      max-width: 820px !important;
      font-size: clamp(15px, 1.25vw, 20px) !important;
    }

    .start-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: clamp(20px, 3vw, 34px);
      position: relative;
      z-index: 4;
    }

    .start-play-btn {
      min-width: min(100%, 280px);
      min-height: 66px;
      padding: 18px 30px !important;
      border-radius: 22px !important;
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 1000 !important;
      letter-spacing: -.03em;
      text-transform: uppercase;
      box-shadow:
        0 18px 38px rgba(34, 211, 238, .28),
        0 0 34px rgba(168, 85, 247, .28),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
    }

    .start-play-btn::after {
      content: "→";
      margin-left: 14px;
      font-size: 1.08em;
      line-height: 1;
    }

    .start-info-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .start-info-card {
      min-height: 132px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.13), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.026));
      box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
      padding: 22px;
      display: grid;
      align-content: start;
      gap: 9px;
      backdrop-filter: blur(14px);
    }

    .start-info-card strong {
      font-size: clamp(20px, 1.65vw, 28px);
      line-height: 1;
      letter-spacing: -.04em;
    }

    .start-info-card span {
      color: rgba(229,235,255,.74);
      line-height: 1.45;
      font-weight: 650;
      font-size: 14px;
    }

    @media (max-width: 900px) {
      .start-info-grid {
        grid-template-columns: 1fr;
      }

      .start-hero-card {
        min-height: 430px !important;
      }

      .start-play-btn {
        width: 100%;
      }
    }

  

    /* game19 menu relayout: Remove banner and arrange tiles like in the sketch */
    #homeScreen .home-menu-stage {
      min-height: calc(100vh - 86px) !important;
      display: grid !important;
      align-content: center !important;
      gap: 0 !important;
    }

    #homeScreen .home-menu-shell {
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    #homeScreen .home-menu-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-areas:
        "play play deck"
        "packshop cards cards"
        "tasks tasks tasks";
      gap: 18px !important;
      align-items: stretch;
    }

    #homeScreen .menu-card[data-nav="play"] { grid-area: play; }
    #homeScreen .menu-card[data-nav="deck"] { grid-area: deck; }
    #homeScreen .menu-card[data-nav="packshop"] { grid-area: packshop; }
    #homeScreen .menu-card[data-nav="cards"] { grid-area: cards; }
    #homeScreen #tasksMenuCard { grid-area: tasks; }

    #homeScreen .menu-card {
      min-height: 220px !important;
      padding: 28px !important;
      border-radius: 30px !important;
    }

    #homeScreen .menu-card strong {
      max-width: none !important;
      font-size: clamp(30px, 2.8vw, 42px) !important;
    }

    #homeScreen .menu-card span {
      font-size: 15px !important;
      max-width: 90%;
    }

    #homeScreen .menu-card .menu-card-bg {
      opacity: .18 !important;
      transform: scale(1.03);
    }

    #homeScreen .menu-card[data-nav="deck"],
    #homeScreen .menu-card[data-nav="packshop"] {
      min-height: 190px !important;
    }

    #homeScreen #tasksMenuCard {
      min-height: 130px !important;
    }

    @media (max-width: 980px) {
      #homeScreen .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "play play"
          "deck packshop"
          "cards cards"
          "tasks tasks";
      }
    }

    @media (max-width: 700px) {
      #homeScreen .home-menu-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "play"
          "deck"
          "packshop"
          "cards"
          "tasks";
      }

      #homeScreen .menu-card,
      #homeScreen .menu-card[data-nav="deck"],
      #homeScreen .menu-card[data-nav="packshop"],
      #homeScreen #tasksMenuCard {
        min-height: 175px !important;
      }

      #homeScreen #tasksMenuCard {
        min-height: 120px !important;
      }
    }

  

    /* game19 HUD polish: kompakte Status- and Navigationsgruppe right */
    .economy-hud,
    .top-hud,
    .player-hud,
    #economyHud {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 10px !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      margin: 0 0 16px auto !important;
      position: relative;
      z-index: 20;
    }

    .hud-right-group {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 10px !important;
      margin-left: auto !important;
      padding: 8px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(8, 10, 22, .70) !important;
      box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
      backdrop-filter: blur(16px);
    }

    .hud-coin-pill,
    .hud-icon-btn {
      height: 44px !important;
      min-width: 44px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
      color: #f6f7ff !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.16) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      overflow: visible !important;
    }

    .hud-coin-pill {
      gap: 8px !important;
      padding: 0 14px !important;
      min-width: 118px !important;
      font-weight: 1000 !important;
      letter-spacing: -.015em !important;
    }

    .hud-coin-icon {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 30%, #fff2b2, #f7c948 44%, #b97813 100%);
      color: #2b1800;
      font-size: 14px;
      line-height: 1;
      box-shadow: 0 0 16px rgba(247,201,72,.28), inset 0 1px 0 rgba(255,255,255,.55);
    }

    .hud-coin-value {
      font-size: 15px;
      color: #fff7d0;
      text-shadow: 0 0 12px rgba(247,201,72,.20);
    }

    .hud-icon-btn {
      cursor: pointer;
      padding: 0 !important;
      font-size: 20px !important;
      font-weight: 1000 !important;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }

    .hud-icon-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: rgba(34,211,238,.40) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.065)) !important;
    }

    .hud-icon-btn .hud-badge {
      position: absolute;
      right: -5px;
      top: -6px;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ff5c7a, #ff3fad);
      border: 2px solid rgba(10,12,24,.96);
      color: #fff;
      font-size: 11px;
      line-height: 15px;
      display: grid;
      place-items: center;
      font-weight: 1000;
      box-shadow: 0 8px 16px rgba(255,63,173,.28);
    }

    .hud-legacy-hidden {
      display: none !important;
    }

    @media (max-width: 760px) {
      .economy-hud,
      .top-hud,
      .player-hud,
      #economyHud {
        justify-content: center !important;
      }

      .hud-right-group {
        width: 100%;
        justify-content: space-between !important;
      }

      .hud-coin-pill {
        min-width: 0 !important;
        flex: 1 1 auto;
        justify-content: flex-start !important;
      }
    }

  

    /* game19 HUD Hotfix: breite Top-Navigationsleiste + farbige Statusbuttons */
    .economy-hud,
    .top-hud,
    .player-hud,
    #economyHud {
      width: min(1420px, calc(100% - 22px)) !important;
      min-height: 86px !important;
      margin: 0 auto 28px !important;
      padding: 12px 18px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      border-radius: 38px !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      background:
        linear-gradient(90deg, rgba(88, 38, 150, .24), rgba(10, 17, 34, .76) 48%, rgba(8, 55, 78, .42)),
        rgba(8, 10, 22, .64) !important;
      box-shadow:
        0 22px 46px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(255,255,255,.045) !important;
      backdrop-filter: blur(18px);
    }

    .hud-right-group {
      min-height: 58px !important;
      padding: 8px 10px !important;
      gap: 10px !important;
      border-radius: 26px !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
        rgba(12, 15, 28, .82) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      box-shadow:
        0 14px 26px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .hud-coin-pill,
    .hud-icon-btn {
      height: 52px !important;
      min-width: 52px !important;
      border-radius: 18px !important;
    }

    .hud-coin-pill {
      min-width: 138px !important;
      padding: 0 16px 0 12px !important;
      gap: 10px !important;
      background:
        linear-gradient(180deg, rgba(150, 100, 18, .96), rgba(83, 54, 8, .96)) !important;
      border-color: rgba(255, 214, 92, .32) !important;
      box-shadow:
        0 10px 20px rgba(0,0,0,.24),
        0 0 20px rgba(247,201,72,.12),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
    }

    .hud-coin-icon {
      width: 30px !important;
      height: 30px !important;
      background: rgba(43, 28, 5, .45) !important;
      border: 1px solid rgba(255, 231, 150, .22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 14px rgba(247,201,72,.20);
      overflow: hidden;
    }

    .hud-coin-icon img {
      width: 72%;
      height: 72%;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    }

    .hud-coin-value {
      font-size: 16px !important;
      color: #fff0a8 !important;
      font-weight: 1000 !important;
    }

    #hudNotificationsBtn {
      background:
        linear-gradient(180deg, rgba(49, 128, 232, .92), rgba(25, 69, 150, .94)) !important;
      border-color: rgba(146, 202, 255, .28) !important;
      color: #eef7ff !important;
    }

    #hudProfileBtn {
      background:
        linear-gradient(180deg, rgba(255, 92, 122, .95), rgba(165, 27, 55, .96)) !important;
      border-color: rgba(255, 183, 197, .30) !important;
      color: #fff4f6 !important;
    }

    #hudHomeBtn {
      background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
      border-color: rgba(255,255,255,.15) !important;
    }

    #hudNotificationsBtn:hover:not(:disabled),
    #hudProfileBtn:hover:not(:disabled),
    #hudHomeBtn:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.02) !important;
      filter: brightness(1.08);
    }

    .hud-icon-btn .hud-badge {
      right: -6px !important;
      top: -7px !important;
      min-width: 21px !important;
      height: 21px !important;
      font-size: 11px !important;
      line-height: 17px !important;
    }

    /* game19: Menu tiles slightly larger */
    #homeScreen .home-menu-shell {
      width: min(1280px, 100%) !important;
    }

    #homeScreen .home-menu-grid {
      gap: 22px !important;
    }

    #homeScreen .menu-card {
      min-height: 245px !important;
      padding: 32px !important;
      border-radius: 32px !important;
    }

    #homeScreen .menu-card[data-nav="deck"],
    #homeScreen .menu-card[data-nav="packshop"] {
      min-height: 220px !important;
    }

    #homeScreen #tasksMenuCard {
      min-height: 155px !important;
    }

    #homeScreen .menu-card strong {
      font-size: clamp(34px, 3.05vw, 48px) !important;
      line-height: .94 !important;
    }

    #homeScreen .menu-card span {
      font-size: 16px !important;
      line-height: 1.35 !important;
    }

    @media (max-width: 760px) {
      .economy-hud,
      .top-hud,
      .player-hud,
      #economyHud {
        width: min(100% - 18px, 1420px) !important;
        min-height: 74px !important;
        padding: 9px !important;
        border-radius: 28px !important;
      }

      .hud-right-group {
        min-height: 54px !important;
      }

      .hud-coin-pill,
      .hud-icon-btn {
        height: 48px !important;
        min-width: 48px !important;
      }

      .hud-coin-pill {
        min-width: 0 !important;
      }
    }

  

    /* game19 performance/icon hotfix: PNG-Icons + weniger teure Effekte */
    .economy-hud,
    .top-hud,
    .player-hud,
    #economyHud,
    .hud-right-group,
    .start-info-card,
    .panel,
    .hero-card,
    .menu-card,
    .modal-shell {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .economy-hud,
    .top-hud,
    .player-hud,
    #economyHud {
      box-shadow:
        0 12px 26px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    .hud-right-group {
      box-shadow:
        0 8px 18px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    .hud-coin-pill,
    .hud-icon-btn {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 5px 12px rgba(0,0,0,.16) !important;
    }

    .hud-icon-btn:hover:not(:disabled) {
      transform: translateY(-1px) !important;
      filter: none !important;
    }

    .hud-btn-img {
      width: 24px;
      height: 24px;
      display: block;
      object-fit: contain;
      pointer-events: none;
    }

    #hudNotificationsBtn .hud-btn-img,
    #hudHomeBtn .hud-btn-img,
    #hudProfileBtn .hud-btn-img {
      filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
    }

    #hudProfileBtn .hud-btn-img {
      width: 25px;
      height: 25px;
    }

    .hud-coin-icon img {
      filter: none !important;
    }

    .menu-card .menu-card-bg,
    #homeScreen .menu-card .menu-card-bg {
      filter: none !important;
    }

    body::before {
      opacity: .55 !important;
    }

    body::after {
      opacity: .35 !important;
    }

  

    /* game19: Main menu tiles larger again */
    #homeScreen .home-menu-shell {
      width: min(1420px, 100%) !important;
    }

    #homeScreen .home-menu-grid {
      gap: 26px !important;
    }

    #homeScreen .menu-card {
      min-height: 292px !important;
      padding: 38px !important;
      border-radius: 36px !important;
    }

    #homeScreen .menu-card[data-nav="deck"],
    #homeScreen .menu-card[data-nav="packshop"] {
      min-height: 260px !important;
    }

    #homeScreen #tasksMenuCard {
      min-height: 190px !important;
    }

    #homeScreen .menu-card strong {
      font-size: clamp(40px, 3.55vw, 58px) !important;
      line-height: .9 !important;
      letter-spacing: -.055em !important;
    }

    #homeScreen .menu-card span {
      font-size: 18px !important;
      line-height: 1.35 !important;
      max-width: 92% !important;
    }

    #homeScreen .menu-card::after {
      width: 54px !important;
      height: 54px !important;
      font-size: 30px !important;
      right: 26px !important;
      top: 24px !important;
    }

    @media (max-width: 980px) {
      #homeScreen .menu-card,
      #homeScreen .menu-card[data-nav="deck"],
      #homeScreen .menu-card[data-nav="packshop"] {
        min-height: 235px !important;
      }

      #homeScreen #tasksMenuCard {
        min-height: 160px !important;
      }
    }

    @media (max-width: 700px) {
      #homeScreen .menu-card,
      #homeScreen .menu-card[data-nav="deck"],
      #homeScreen .menu-card[data-nav="packshop"] {
        min-height: 205px !important;
        padding: 30px !important;
      }

      #homeScreen #tasksMenuCard {
        min-height: 145px !important;
      }
    }

  

    /* game19: Fully remove old left economy display */
    #economyHud .economy-tile,
    .economy-hud .economy-tile {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }

    /* game19: Arena progress on the right side of the Play screen */
    #playScreen #modeSelection.mode-grid {
      width: 100% !important;
      max-width: none !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
      gap: 28px !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }

    #playScreen .duel-mode-card {
      min-height: 500px !important;
      grid-column: 1;
      grid-row: 1;
    }

    #playScreen .play-more-modes-note {
      grid-column: 1;
      grid-row: 2;
      margin: 0;
      padding: 0 12px;
      color: rgba(239, 243, 255, .88);
      font-size: 16px;
      font-weight: 900;
      line-height: 1.4;
      text-align: center;
    }

    #playScreen .league-side-panel {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .league-side-panel {
      min-height: 500px;
      border-radius: 32px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 50% 0%, rgba(34,211,238,.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(8, 12, 26, .72);
      box-shadow:
        0 18px 40px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
      padding: 22px 20px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 16px;
      overflow: hidden;
      position: relative;
    }

    .league-side-panel::before {
      content: "";
      position: absolute;
      inset: -25% -30% auto auto;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(168,85,247,.22), transparent 66%);
      pointer-events: none;
    }

    .league-side-head {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 6px;
    }

    .league-side-head span {
      color: rgba(229,235,255,.66);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .league-side-head strong {
      color: #fff;
      font-size: clamp(34px, 3vw, 46px);
      line-height: .92;
      letter-spacing: -.055em;
    }

    .league-side-head p {
      margin: 0;
      color: rgba(229,235,255,.72);
      font-weight: 750;
      line-height: 1.35;
      font-size: 13px;
    }

    .league-ladder {
      position: relative;
      min-height: 360px;
      z-index: 1;
    }

    .league-track {
      position: absolute;
      left: 50%;
      top: 20px;
      bottom: 24px;
      width: 18px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(255,255,255,.095);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 0 18px rgba(0,0,0,.35);
      overflow: hidden;
    }

    .league-track-fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--league-progress, 0%);
      border-radius: inherit;
      background: linear-gradient(0deg, #a855f7 0%, #22d3ee 70%, #47e6a1 100%);
      box-shadow: 0 0 18px rgba(34,211,238,.34);
      transition: height .65s cubic-bezier(.2,.9,.2,1);
    }

    .league-mark {
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--mark-pos, 0%);
      display: grid;
      grid-template-columns: 1fr 34px 1fr;
      align-items: center;
      gap: 10px;
      transform: translateY(50%);
    }

    .league-mark::before,
    .league-mark::after {
      content: "";
      height: 1px;
      background: rgba(255,255,255,.18);
    }

    .league-mark-dot {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(13,17,32,.96);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 8px 16px rgba(0,0,0,.20);
      color: rgba(235,241,255,.72);
      font-size: 11px;
      font-weight: 1000;
    }

    .league-mark.is-active .league-mark-dot,
    .league-mark.is-passed .league-mark-dot {
      background: linear-gradient(135deg, rgba(71,230,161,.96), rgba(34,211,238,.90));
      color: #07111b;
      border-color: rgba(255,255,255,.42);
    }

    .league-mark-label {
      position: absolute;
      right: 0;
      transform: translateX(4px);
      padding: 4px 7px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(235,241,255,.68);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .league-mark.is-active .league-mark-label {
      color: #b9fff1;
      border-color: rgba(34,211,238,.28);
    }

    .league-current-badge {
      position: absolute;
      left: calc(50% + 20px);
      bottom: var(--league-progress, 0%);
      transform: translateY(50%);
      padding: 7px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(34,211,238,.92));
      color: #fff;
      border: 1px solid rgba(255,255,255,.30);
      box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 0 22px rgba(34,211,238,.20);
      font-size: 12px;
      font-weight: 1000;
      white-space: nowrap;
      transition: bottom .65s cubic-bezier(.2,.9,.2,1);
    }

    .league-side-foot {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .league-side-stat {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.055);
      padding: 12px;
    }

    .league-side-stat span {
      display: block;
      color: rgba(229,235,255,.60);
      font-size: 10px;
      font-weight: 1000;
      letter-spacing: .09em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .league-side-stat strong {
      display: block;
      color: #fff;
      font-size: 20px;
      line-height: 1;
      letter-spacing: -.04em;
    }

    @media (max-width: 1120px) {
      #playScreen #modeSelection.mode-grid {
        grid-template-columns: 1fr !important;
      }

      #playScreen .duel-mode-card,
      #playScreen .play-more-modes-note,
      #playScreen .league-side-panel {
        grid-column: 1;
        grid-row: auto;
      }

      .league-side-panel {
        min-height: 380px;
      }

      .league-ladder {
        min-height: 240px;
      }
    }

  

    /* game19 fix: Prepare Duel restored as a separate window/overlay */
    #duelSetup.duel-setup-panel {
      position: fixed !important;
      inset: 0 !important;
      z-index: 110 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      min-height: 100vh !important;
      margin: 0 !important;
      padding: 22px !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: rgba(4, 5, 12, .78) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: auto !important;
    }

    #duelSetup.duel-setup-panel.hidden {
      display: none !important;
    }

    #duelSetup .duel-setup-layout {
      width: min(1180px, calc(100vw - 36px)) !important;
      max-height: calc(100vh - 36px) !important;
      overflow: auto !important;
      border-radius: 30px !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        linear-gradient(145deg, rgba(17, 20, 39, .98), rgba(8, 10, 22, .96)) !important;
      box-shadow: 0 28px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.09) !important;
      padding: clamp(18px, 2.2vw, 30px) !important;
      display: grid !important;
      grid-template-columns: minmax(290px, .9fr) minmax(360px, 1.15fr) !important;
      gap: 24px !important;
    }

    body.duel-setup-open .app > .screen:not(#playScreen) {
      pointer-events: none;
    }

    body.duel-setup-open {
      overflow: hidden;
    }

    @media (max-width: 900px) {
      #duelSetup .duel-setup-layout {
        grid-template-columns: 1fr !important;
      }
    }

  

    /* game19: Topbar-Navigation vereinheitlichen + rote Back-Buttons */
    .btn-back-red,
    .topbar .btn-back-red {
      min-width: 142px !important;
      border-radius: 18px !important;
      padding: 13px 20px !important;
      border: 1px solid rgba(255, 120, 120, .40) !important;
      background:
        linear-gradient(180deg, rgba(255, 75, 75, .96), rgba(172, 20, 35, .96)) !important;
      color: #fff !important;
      font-weight: 1000 !important;
      box-shadow:
        0 12px 24px rgba(255, 50, 50, .20),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
    }

    .btn-back-red:hover:not(:disabled) {
      background:
        linear-gradient(180deg, rgba(255, 97, 97, 1), rgba(195, 24, 42, .98)) !important;
      transform: translateY(-2px) !important;
    }

    .btn-back-red::before {
      content: "←";
      margin-right: 9px;
      font-size: 1.08em;
      line-height: 1;
    }

    /* Speed Duel play-now button red */
    .duel-mode-cta {
      background:
        linear-gradient(180deg, #ff4d4d 0%, #c9182d 100%) !important;
      border-color: rgba(255,255,255,.24) !important;
      box-shadow:
        0 14px 28px rgba(255, 50, 50, .28),
        inset 0 -4px 0 rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
    }

    .duel-mode-cta:hover:not(:disabled) {
      background:
        linear-gradient(180deg, #ff6969 0%, #df1f37 100%) !important;
    }

    #playScreen .topbar .nav-actions,
    #deckScreen .topbar .nav-actions,
    #packshopScreen .topbar .nav-actions,
    #cardsScreen .topbar .nav-actions,
    #tasksScreen .topbar .nav-actions {
      justify-content: flex-end !important;
    }

  

    /* game19 mailbox/profile/back-button patch */
    .btn-back-red {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
    }

    .btn-back-red::before {
      content: none !important;
      display: none !important;
    }

    .btn-back-red::after {
      content: "";
      width: 21px;
      height: 21px;
      display: inline-block;
      background: url("https://pub-bfced383e45f41c5a685b6ae7b631fc4.r2.dev/images/back.png") center / contain no-repeat;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
    }

    #cardsScreen .btn-card-info {
      min-height: 48px;
      padding: 12px 18px;
      border: 1px solid rgba(85, 218, 255, .28);
      background: rgba(34, 211, 238, .10);
      color: #eafcff;
      font-weight: 900;
    }

    #cardsScreen .btn-card-info:hover:not(:disabled) {
      border-color: rgba(85, 218, 255, .52);
      background: rgba(34, 211, 238, .18);
    }

    #hudNotificationsBtn .hud-badge {
      left: -6px !important;
      right: auto !important;
      top: auto !important;
      bottom: -6px !important;
      min-width: 22px !important;
      height: 22px !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      line-height: 18px !important;
      background: linear-gradient(135deg, #ff5c7a, #ff2e63) !important;
      border: 2px solid rgba(10,12,24,.98) !important;
    }

    .message-popover {
      position: fixed;
      z-index: 250;
      width: min(340px, calc(100vw - 24px));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(10, 13, 27, .98);
      box-shadow: 0 22px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
      padding: 12px;
      display: none;
    }

    .message-popover.open {
      display: grid;
      gap: 10px;
      animation: messagePopoverIn .16s ease both;
    }

    @keyframes messagePopoverIn {
      from { opacity: 0; transform: translateY(-8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .message-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 8px 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .message-popover-head strong {
      font-size: 18px;
      line-height: 1;
      letter-spacing: -.035em;
    }

    .message-popover-head span {
      color: rgba(229,235,255,.58);
      font-size: 12px;
      font-weight: 850;
    }

    .message-list {
      display: grid;
      gap: 8px;
      max-height: 320px;
      overflow: auto;
    }

    .message-item {
      width: 100%;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(145deg, rgba(49,128,232,.16), rgba(255,255,255,.045));
      color: #f6f7ff;
      padding: 12px;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: center;
      text-align: left;
      cursor: pointer;
    }

    .message-item:hover {
      border-color: rgba(34,211,238,.38);
      background:
        linear-gradient(145deg, rgba(49,128,232,.24), rgba(255,255,255,.065));
      transform: translateY(-1px);
    }

    .message-item-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(247,201,72,.14);
      border: 1px solid rgba(247,201,72,.24);
    }

    .message-item-icon img {
      width: 23px;
      height: 23px;
      object-fit: contain;
      display: block;
    }

    .message-item-text strong {
      display: block;
      font-size: 14px;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .message-item-text span {
      display: block;
      color: rgba(229,235,255,.64);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
    }

    .message-empty {
      padding: 18px 12px;
      text-align: center;
      color: rgba(229,235,255,.62);
      font-weight: 800;
      line-height: 1.35;
    }

    .profile-overlay {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(2, 3, 9, .72);
    }

    .profile-overlay.open {
      display: flex;
      animation: profileFadeIn .16s ease both;
    }

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

    .profile-window {
      width: min(640px, calc(100vw - 28px));
      min-height: 360px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.15);
      background:
        radial-gradient(circle at 80% 0%, rgba(255,92,122,.16), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(10, 13, 27, .98);
      box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
      padding: 24px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 18px;
    }

    .profile-window-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .profile-window-head strong {
      display: block;
      font-size: clamp(28px, 3vw, 42px);
      line-height: .95;
      letter-spacing: -.055em;
    }

    .profile-window-head span {
      display: block;
      margin-top: 6px;
      color: rgba(229,235,255,.62);
      font-size: 13px;
      font-weight: 800;
    }

    .profile-close-btn {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: #fff;
      font-weight: 1000;
      font-size: 20px;
    }

    .profile-placeholder {
      display: grid;
      place-items: center;
      text-align: center;
      color: rgba(229,235,255,.66);
      font-weight: 800;
      line-height: 1.45;
      border-radius: 22px;
      border: 1px dashed rgba(255,255,255,.14);
      background: rgba(255,255,255,.035);
      padding: 22px;
    }

  

    /* game19 critical fix: Make HUD buttons truly clickable */
    #economyHud,
    .economy-hud,
    #hudRightGroup,
    .hud-right-group {
      pointer-events: auto !important;
    }

    #economyHud,
    .economy-hud {
      z-index: 5000 !important;
      position: sticky !important;
      top: 10px !important;
    }

    #hudRightGroup,
    .hud-right-group {
      position: relative !important;
      z-index: 5001 !important;
    }

    #hudNotificationsBtn,
    #hudHomeBtn,
    #hudProfileBtn,
    .hud-icon-btn,
    .hud-coin-pill {
      pointer-events: auto !important;
      position: relative !important;
      z-index: 5002 !important;
    }

    #hudNotificationsBtn,
    #hudHomeBtn,
    #hudProfileBtn {
      cursor: pointer !important;
      user-select: none !important;
    }

    #hudNotificationsBtn *,
    #hudHomeBtn *,
    #hudProfileBtn * {
      pointer-events: none !important;
    }

    .message-popover,
    .message-popover *,
    .profile-overlay,
    .profile-overlay * {
      pointer-events: auto !important;
    }

  

    /* game19: Test buttons restored plus task list on the right in the main menu */
    .topbar-test-actions {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-right: 8px;
    }

    .btn-test-mini {
      min-width: 124px !important;
      border-radius: 16px !important;
      padding: 11px 14px !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.052)) !important;
      color: #f6f7ff !important;
      font-weight: 1000 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.16) !important;
    }

    .btn-test-mini:hover:not(:disabled) {
      transform: translateY(-2px) !important;
      border-color: rgba(34,211,238,.35) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.075)) !important;
    }

    #tasksMenuCard {
      display: none !important;
    }

    #homeScreen .home-menu-with-tasks {
      width: min(1720px, 100%) !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(330px, 430px) !important;
      gap: 30px !important;
      align-items: stretch !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      width: 100% !important;
    }

    .home-task-panel {
      min-height: 100%;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 50% 0%, rgba(34,211,238,.14), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(8, 12, 26, .70);
      box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
      padding: 24px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
      overflow: hidden;
    }

    .home-task-head {
      display: grid;
      gap: 7px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .home-task-head span {
      color: rgba(229,235,255,.62);
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .home-task-head strong {
      color: #fff;
      font-size: clamp(30px, 2.6vw, 44px);
      line-height: .92;
      letter-spacing: -.055em;
    }

    .home-task-list {
      display: grid;
      align-content: start;
      gap: 12px;
      overflow: auto;
      padding-right: 3px;
    }

    .home-task-item {
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.030));
      padding: 16px;
      display: grid;
      gap: 10px;
    }

    .home-task-item.is-ready {
      border-color: rgba(71,230,161,.32);
      background:
        linear-gradient(145deg, rgba(71,230,161,.12), rgba(255,255,255,.035));
    }

    .home-task-item strong {
      display: block;
      color: #fff;
      font-size: 18px;
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .home-task-item p {
      margin: 0;
      color: rgba(229,235,255,.68);
      font-weight: 750;
      line-height: 1.35;
      font-size: 13px;
    }

    .home-task-reward {
      display: inline-flex;
      width: max-content;
      gap: 7px;
      align-items: center;
      border-radius: 999px;
      padding: 8px 10px;
      background: rgba(247,201,72,.13);
      border: 1px solid rgba(247,201,72,.22);
      color: #ffe9a8;
      font-weight: 1000;
      font-size: 12px;
    }

    .home-task-empty {
      border-radius: 22px;
      border: 1px dashed rgba(255,255,255,.14);
      background: rgba(255,255,255,.035);
      color: rgba(229,235,255,.64);
      text-align: center;
      font-weight: 850;
      line-height: 1.45;
      padding: 24px 18px;
    }

    .home-task-claim {
      justify-self: start;
      border-radius: 15px !important;
      padding: 10px 13px !important;
      font-size: 13px !important;
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
      }

      .home-task-panel {
        min-height: 260px;
      }
    }

    @media (max-width: 760px) {
      .topbar .nav-actions {
        gap: 8px !important;
      }

      .topbar-test-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .btn-test-mini {
        min-width: 0 !important;
      }
    }

  

    /* game19: Main menu tiles left of the task list are larger again */
    #homeScreen .home-menu-with-tasks {
      width: min(1840px, calc(100vw - 88px)) !important;
      grid-template-columns: minmax(980px, 1fr) minmax(390px, 440px) !important;
      gap: 42px !important;
      align-items: stretch !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 28px !important;
      height: 100%;
      align-content: stretch;
    }

    #homeScreen .home-menu-with-tasks .menu-card {
      min-height: 340px !important;
      padding: 44px !important;
      border-radius: 40px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
    #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
      min-height: 315px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card strong {
      font-size: clamp(48px, 4vw, 72px) !important;
      line-height: .88 !important;
      letter-spacing: -.065em !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card span {
      font-size: clamp(17px, 1.25vw, 21px) !important;
      line-height: 1.3 !important;
      max-width: 94% !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card::after {
      width: 62px !important;
      height: 62px !important;
      right: 30px !important;
      top: 28px !important;
      font-size: 34px !important;
    }

    .home-task-panel {
      min-height: 100% !important;
    }

    @media (max-width: 1350px) {
      #homeScreen .home-menu-with-tasks {
        width: min(100% - 30px, 1420px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px) !important;
        gap: 30px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 300px !important;
        padding: 36px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 270px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card strong {
        font-size: clamp(40px, 3.45vw, 58px) !important;
      }
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 250px !important;
      }
    }

    @media (max-width: 700px) {
      #homeScreen .home-menu-with-tasks {
        width: min(100% - 18px, 100%) !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card,
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 205px !important;
        padding: 30px !important;
      }
    }

  

    /* game19: menu size balanced, task list with right margin */
    #homeScreen .home-menu-stage {
      align-content: center !important;
      padding-inline: clamp(28px, 5vw, 96px) !important;
    }

    #homeScreen .home-menu-with-tasks {
      width: min(1580px, 100%) !important;
      max-width: calc(100vw - clamp(80px, 11vw, 210px)) !important;
      margin: 0 auto !important;
      grid-template-columns: minmax(740px, 1fr) minmax(330px, 390px) !important;
      gap: clamp(26px, 3vw, 42px) !important;
      align-items: stretch !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      gap: clamp(18px, 1.8vw, 26px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card {
      min-height: clamp(245px, 27vh, 300px) !important;
      padding: clamp(30px, 2.8vw, 40px) !important;
      border-radius: 34px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
    #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
      min-height: clamp(220px, 24vh, 270px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card strong {
      font-size: clamp(40px, 3.25vw, 58px) !important;
      line-height: .9 !important;
      letter-spacing: -.058em !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card span {
      font-size: clamp(15px, 1.05vw, 18px) !important;
      line-height: 1.33 !important;
      max-width: 92% !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card::after {
      width: 54px !important;
      height: 54px !important;
      right: 26px !important;
      top: 24px !important;
      font-size: 30px !important;
    }

    .home-task-panel {
      min-height: clamp(520px, 58vh, 690px) !important;
      max-width: 390px !important;
      justify-self: stretch !important;
    }

    .home-task-head strong {
      font-size: clamp(30px, 2.4vw, 42px) !important;
    }

    @media (max-width: 1350px) {
      #homeScreen .home-menu-stage {
        padding-inline: 28px !important;
      }

      #homeScreen .home-menu-with-tasks {
        max-width: calc(100vw - 56px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 370px) !important;
        gap: 28px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 245px !important;
        padding: 30px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 220px !important;
      }
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
        max-width: min(100%, 980px) !important;
      }

      .home-task-panel {
        max-width: none !important;
        min-height: 260px !important;
      }
    }

  

    /* game19: Menu slightly larger while keeping a clean margin */
    #homeScreen .home-menu-stage {
      padding-inline: clamp(24px, 4vw, 70px) !important;
    }

    #homeScreen .home-menu-with-tasks {
      width: min(1660px, 100%) !important;
      max-width: calc(100vw - clamp(56px, 7vw, 132px)) !important;
      grid-template-columns: minmax(820px, 1fr) minmax(360px, 420px) !important;
      gap: clamp(30px, 3.2vw, 48px) !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      gap: clamp(22px, 2vw, 30px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card {
      min-height: clamp(275px, 30vh, 330px) !important;
      padding: clamp(34px, 3vw, 46px) !important;
      border-radius: 38px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
    #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
      min-height: clamp(250px, 27vh, 300px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card strong {
      font-size: clamp(46px, 3.7vw, 66px) !important;
      line-height: .88 !important;
      letter-spacing: -.062em !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card span {
      font-size: clamp(16px, 1.14vw, 20px) !important;
      line-height: 1.32 !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card::after {
      width: 58px !important;
      height: 58px !important;
      right: 28px !important;
      top: 26px !important;
      font-size: 32px !important;
    }

    .home-task-panel {
      min-height: clamp(575px, 63vh, 745px) !important;
      max-width: 420px !important;
      padding: 28px !important;
      border-radius: 38px !important;
    }

    .home-task-head strong {
      font-size: clamp(34px, 2.65vw, 48px) !important;
    }

    .home-task-item {
      padding: 18px !important;
      border-radius: 24px !important;
    }

    .home-task-item strong {
      font-size: 20px !important;
    }

    .home-task-item p {
      font-size: 14px !important;
    }

    @media (max-width: 1350px) {
      #homeScreen .home-menu-stage {
        padding-inline: 24px !important;
      }

      #homeScreen .home-menu-with-tasks {
        max-width: calc(100vw - 48px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
        gap: 30px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 265px !important;
        padding: 34px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 240px !important;
      }
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
        max-width: min(100%, 1040px) !important;
      }

      .home-task-panel {
        max-width: none !important;
        min-height: 300px !important;
      }
    }

  

    /* game19: Menu a little larger again */
    #homeScreen .home-menu-stage {
      padding-inline: clamp(22px, 3.4vw, 58px) !important;
    }

    #homeScreen .home-menu-with-tasks {
      width: min(1740px, 100%) !important;
      max-width: calc(100vw - clamp(46px, 5.8vw, 108px)) !important;
      grid-template-columns: minmax(900px, 1fr) minmax(380px, 440px) !important;
      gap: clamp(32px, 3.4vw, 52px) !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      gap: clamp(24px, 2.15vw, 32px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card {
      min-height: clamp(300px, 32vh, 360px) !important;
      padding: clamp(38px, 3.25vw, 50px) !important;
      border-radius: 40px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
    #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
      min-height: clamp(270px, 29vh, 325px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card strong {
      font-size: clamp(50px, 4vw, 72px) !important;
      line-height: .87 !important;
      letter-spacing: -.064em !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card span {
      font-size: clamp(17px, 1.22vw, 21px) !important;
      line-height: 1.31 !important;
      max-width: 94% !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card::after {
      width: 62px !important;
      height: 62px !important;
      right: 30px !important;
      top: 28px !important;
      font-size: 34px !important;
    }

    .home-task-panel {
      min-height: clamp(620px, 67vh, 790px) !important;
      max-width: 440px !important;
      padding: 30px !important;
      border-radius: 40px !important;
    }

    .home-task-head strong {
      font-size: clamp(38px, 2.9vw, 52px) !important;
    }

    .home-task-item {
      padding: 20px !important;
      border-radius: 26px !important;
    }

    .home-task-item strong {
      font-size: 21px !important;
    }

    .home-task-item p {
      font-size: 15px !important;
    }

    @media (max-width: 1350px) {
      #homeScreen .home-menu-stage {
        padding-inline: 22px !important;
      }

      #homeScreen .home-menu-with-tasks {
        max-width: calc(100vw - 44px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(355px, 415px) !important;
        gap: 32px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 285px !important;
        padding: 36px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 258px !important;
      }
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
        max-width: min(100%, 1080px) !important;
      }

      .home-task-panel {
        max-width: none !important;
        min-height: 320px !important;
      }
    }

  

    /* game19: Make tiles wider above all, not only taller */
    #homeScreen .home-menu-stage {
      padding-inline: clamp(18px, 2.8vw, 48px) !important;
    }

    #homeScreen .home-menu-with-tasks {
      width: min(1860px, 100%) !important;
      max-width: calc(100vw - clamp(38px, 4.8vw, 86px)) !important;
      grid-template-columns: minmax(1080px, 1fr) minmax(330px, 390px) !important;
      gap: clamp(28px, 2.8vw, 42px) !important;
    }

    #homeScreen .home-menu-with-tasks .home-menu-grid {
      gap: clamp(22px, 1.9vw, 30px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card {
      min-height: clamp(285px, 30vh, 335px) !important;
      padding: clamp(36px, 3vw, 48px) !important;
      border-radius: 40px !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
    #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
      min-height: clamp(255px, 27vh, 300px) !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card strong {
      font-size: clamp(50px, 3.75vw, 70px) !important;
      line-height: .88 !important;
    }

    #homeScreen .home-menu-with-tasks .menu-card span {
      font-size: clamp(17px, 1.12vw, 20px) !important;
      line-height: 1.32 !important;
      max-width: 96% !important;
    }

    .home-task-panel {
      max-width: 390px !important;
      min-height: clamp(590px, 64vh, 760px) !important;
      padding: 28px !important;
    }

    @media (max-width: 1450px) {
      #homeScreen .home-menu-with-tasks {
        max-width: calc(100vw - 40px) !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 370px) !important;
        gap: 28px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card {
        min-height: 270px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card[data-nav="deck"],
      #homeScreen .home-menu-with-tasks .menu-card[data-nav="packshop"] {
        min-height: 245px !important;
      }
    }

    @media (max-width: 1180px) {
      #homeScreen .home-menu-with-tasks {
        grid-template-columns: 1fr !important;
        max-width: min(100%, 1080px) !important;
      }

      .home-task-panel {
        max-width: none !important;
        min-height: 320px !important;
      }
    }

  

    /* Demo release start page: adult notice, FAQ and footer */
    #startScreen {
      min-height: 100vh !important;
    }

    #startScreen .start-page {
      width: min(1180px, 100%) !important;
      min-height: auto !important;
      grid-template-rows: none !important;
      align-content: start !important;
      gap: clamp(18px, 2.4vw, 28px) !important;
      padding: 0 0 clamp(34px, 5vw, 70px) !important;
      margin: 0 auto !important;
    }

    .start-mature-notice {
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        radial-gradient(circle at 8% 8%, rgba(255,209,102,.13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.026));
      box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
      padding: 18px 20px;
      display: grid;
      gap: 6px;
    }

    .start-mature-notice strong {
      color: #ffd166;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .start-mature-notice span {
      color: rgba(229,235,255,.80);
      line-height: 1.48;
      font-weight: 650;
    }

    .start-faq-section {
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(145deg, rgba(19,23,43,.86), rgba(12,14,26,.76));
      box-shadow: 0 20px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
      padding: clamp(20px, 3vw, 30px);
    }

    .start-faq-section h2 {
      margin: 0 0 16px;
      font-size: clamp(30px, 3vw, 52px);
      line-height: .95;
      letter-spacing: -.06em;
    }

    .start-faq-list {
      display: grid;
      gap: 10px;
    }

    .start-faq-item {
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 20px;
      background: rgba(255,255,255,.045);
      overflow: hidden;
    }

    .start-faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 950;
      font-size: clamp(16px, 1.3vw, 20px);
      letter-spacing: -.025em;
    }

    .start-faq-item summary::-webkit-details-marker { display: none; }

    .start-faq-item summary::after {
      content: "+";
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.88);
      font-size: 22px;
      line-height: 1;
      transition: transform .16s ease, background .16s ease;
    }

    .start-faq-item[open] summary::after {
      content: "–";
      background: linear-gradient(135deg, rgba(139,92,246,.8), rgba(34,211,238,.65));
    }

    .start-faq-answer {
      padding: 0 18px 18px;
      color: rgba(229,235,255,.78);
      line-height: 1.58;
      font-weight: 650;
      display: grid;
      gap: 10px;
    }

    .start-faq-answer p { margin: 0; }

    .start-faq-answer ul {
      margin: 0;
      padding-left: 20px;
      display: grid;
      gap: 6px;
    }

    .start-footer {
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 8px 0 0;
      color: rgba(229,235,255,.60);
    }

    .start-footer-left {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .start-footer-copy {
      color: rgba(229,235,255,.52);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .01em;
    }

    .start-footer-link {
      border-radius: 999px;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.055);
      color: rgba(229,235,255,.78);
      font-size: 13px;
      font-weight: 850;
    }

    .start-footer-link:hover {
      background: rgba(255,255,255,.09);
    }

    .start-legal-modal {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(4,5,10,.78);
    }

    .start-legal-modal.active { display: flex; }

    .start-legal-shell {
      width: min(860px, calc(100vw - 24px));
      max-height: min(760px, calc(100vh - 24px));
      overflow: auto;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(circle at 16% 0%, rgba(139,92,246,.22), transparent 34%),
        linear-gradient(145deg, rgba(15,18,32,.98), rgba(8,10,20,.98));
      box-shadow: 0 26px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
      padding: clamp(18px, 3vw, 26px);
    }

    .start-legal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      padding-bottom: 14px;
      margin-bottom: 16px;
    }

    .start-legal-head strong {
      display: block;
      font-size: clamp(26px, 3vw, 42px);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .start-legal-head span {
      display: block;
      color: rgba(229,235,255,.62);
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
    }

    .start-legal-close {
      border-radius: 16px;
      padding: 11px 15px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.08);
      font-weight: 900;
      flex: 0 0 auto;
    }

    .start-legal-page { display: none; color: rgba(229,235,255,.78); line-height: 1.58; font-weight: 650; }
    .start-legal-page.active { display: grid; gap: 14px; }
    .start-legal-page h3 { margin: 0; color: #fff; font-size: 20px; }
    .start-legal-page h4 { margin: 8px 0 0; color: rgba(255,255,255,.96); font-size: 15px; letter-spacing: .01em; }
    .start-legal-page p { margin: 0; }
    .start-legal-page ul, .start-legal-page ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
    .start-legal-note { color: rgba(229,235,255,.58); font-size: 13px; }

    /* Beta start page polish: random hero banner, spacing and integrated mature notice */
    #startScreen .start-page {
      gap: clamp(26px, 3.8vw, 46px) !important;
      padding-bottom: clamp(46px, 7vw, 92px) !important;
    }

    #startScreen .start-hero-card {
      position: relative !important;
      overflow: hidden !important;
      min-height: clamp(430px, 58vh, 610px) !important;
      background:
        linear-gradient(90deg,
          rgba(5, 8, 20, .88) 0%,
          rgba(5, 8, 20, .70) 42%,
          rgba(5, 8, 20, .34) 70%,
          rgba(5, 8, 20, .58) 100%),
        var(--us-start-banner-bg, url("https://pub-bfced383e45f41c5a685b6ae7b631fc4.r2.dev/images/Banner_1.png")) center center / cover no-repeat !important;
      box-shadow:
        0 28px 82px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    #startScreen .start-hero-card::before {
      z-index: 0 !important;
      background:
        radial-gradient(circle at 18% 15%, rgba(34,211,238,.26), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255,42,91,.18), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)) !important;
    }

    #startScreen .start-hero-card::after {
      z-index: 1 !important;
      opacity: .42 !important;
    }

    #startScreen .start-hero-card > h1,
    #startScreen .start-hero-card > p,
    #startScreen .start-hero-card > .start-mature-notice,
    #startScreen .start-hero-card > .start-actions {
      position: relative !important;
      z-index: 3 !important;
    }

    #startScreen .start-hero-card > .start-mature-notice {
      width: min(820px, 100%) !important;
      margin-top: clamp(18px, 2.4vw, 28px) !important;
      padding: 14px 16px !important;
      border-radius: 20px !important;
      background:
        linear-gradient(135deg, rgba(255,209,102,.14), rgba(255,255,255,.055)) !important;
      border: 1px solid rgba(255,209,102,.28) !important;
      box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    #startScreen .start-hero-card > .start-mature-notice strong {
      color: #ffd166 !important;
      font-size: 14px !important;
      letter-spacing: .06em !important;
    }

    #startScreen .start-hero-card > .start-mature-notice span {
      color: rgba(255,255,255,.86) !important;
      font-size: 14px !important;
      line-height: 1.45 !important;
    }

    #startScreen .start-info-grid {
      gap: clamp(18px, 2.5vw, 28px) !important;
    }

    #startScreen .start-faq-section {
      margin-top: 2px !important;
    }

    #startScreen .start-footer {
      padding-top: 2px !important;
      margin-top: 0 !important;
    }

    @media (max-width: 760px) {
      #startScreen .start-hero-card {
        min-height: 500px !important;
      }
    }



    /* Start page spacing + darker banner image final adjustment */
    #startScreen .start-page {
      gap: clamp(34px, 4.6vw, 62px) !important;
      padding-bottom: clamp(54px, 8vw, 106px) !important;
    }

    #startScreen .start-hero-card {
      background:
        linear-gradient(90deg,
          rgba(3, 5, 15, .96) 0%,
          rgba(3, 5, 15, .88) 43%,
          rgba(3, 5, 15, .66) 72%,
          rgba(3, 5, 15, .84) 100%),
        var(--us-start-banner-bg, url("https://pub-bfced383e45f41c5a685b6ae7b631fc4.r2.dev/images/Banner_1.png")) center center / cover no-repeat !important;
    }

    #startScreen .start-hero-card::before {
      background:
        radial-gradient(circle at 18% 15%, rgba(34,211,238,.18), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255,42,91,.12), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34)) !important;
    }


    /* Start page title and bottom-left model artwork */
    #startScreen {
      position: relative !important;
      overflow-x: hidden !important;
    }

    #startScreen .start-page {
      position: relative !important;
      z-index: 1 !important;
    }

    #startScreen .start-main-title {
      font-size: clamp(42px, 6.4vw, 92px) !important;
      max-width: min(1080px, 100%) !important;
      text-transform: uppercase !important;
      letter-spacing: -.065em !important;
    }

    #startScreen .start-side-model {
      position: absolute;
      left: max(10px, calc((100vw - 1180px) / 2 - 130px));
      bottom: clamp(44px, 5vw, 76px);
      width: clamp(240px, 25vw, 390px);
      max-height: min(72vh, 650px);
      object-fit: contain;
      pointer-events: none;
      z-index: 1;
      opacity: .96;
      filter: drop-shadow(0 28px 54px rgba(0,0,0,.62));
    }

    #startScreen .start-faq-section,
    #startScreen .start-footer {
      position: relative !important;
      z-index: 2 !important;
    }

    @media (min-width: 1020px) {
      #startScreen .start-faq-section {
        width: min(850px, 72%) !important;
        margin-left: auto !important;
        margin-right: 0 !important;
      }
    }

    @media (max-width: 1019px) {
      #startScreen .start-side-model {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(340px, 58vw);
        margin: -10px auto -18px 0;
        display: block;
      }
    }


    /* Final fix: keep FAQ layout intact and place the model artwork freely beside it */
    #startScreen {
      position: relative !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    #startScreen .start-page {
      width: min(1180px, calc(100% - 28px)) !important;
      margin: 0 auto !important;
      display: grid !important;
      gap: clamp(38px, 4.8vw, 68px) !important;
      padding-bottom: clamp(54px, 7vw, 96px) !important;
    }

    #startScreen .start-faq-model-row {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: minmax(250px, 34%) minmax(0, 1fr) !important;
      gap: clamp(24px, 3vw, 42px) !important;
      align-items: end !important;
      position: relative !important;
      z-index: 2 !important;
    }

    #startScreen .start-side-model {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      width: min(390px, 100%) !important;
      max-height: min(74vh, 690px) !important;
      object-fit: contain !important;
      justify-self: start !important;
      align-self: end !important;
      margin: 0 0 -8px max(-42px, calc((1180px - 100vw) / 2)) !important;
      pointer-events: none !important;
      z-index: 1 !important;
      opacity: .98 !important;
      filter: drop-shadow(0 30px 58px rgba(0,0,0,.62)) !important;
    }

    #startScreen .start-faq-section {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      position: relative !important;
      z-index: 3 !important;
    }

    #startScreen .start-footer {
      position: relative !important;
      z-index: 4 !important;
    }

    @media (max-width: 1019px) {
      #startScreen .start-faq-model-row {
        grid-template-columns: 1fr !important;
      }

      #startScreen .start-side-model {
        width: min(360px, 70vw) !important;
        margin: 0 auto -18px 0 !important;
      }
    }



    /* Final start page model placement: keep FAQ centered and float artwork at page-left bottom */
    #startScreen .start-faq-model-row {
      width: 100% !important;
      display: block !important;
      position: relative !important;
      min-height: clamp(470px, 43vw, 650px) !important;
      z-index: 2 !important;
      overflow: visible !important;
    }

    #startScreen .start-faq-model-row .start-faq-section {
      width: min(850px, calc(100% - 40px)) !important;
      max-width: 850px !important;
      margin: 0 auto !important;
      position: relative !important;
      z-index: 3 !important;
    }

    #startScreen .start-faq-model-row .start-side-model {
      position: absolute !important;
      left: calc((100vw - 100%) / -2 + 6px) !important;
      right: auto !important;
      top: auto !important;
      bottom: clamp(-18px, -1.2vw, -8px) !important;
      width: clamp(380px, 26vw, 510px) !important;
      max-width: none !important;
      max-height: none !important;
      height: auto !important;
      object-fit: contain !important;
      margin: 0 !important;
      justify-self: auto !important;
      align-self: auto !important;
      pointer-events: none !important;
      z-index: 1 !important;
      opacity: .98 !important;
      filter: drop-shadow(0 34px 62px rgba(0,0,0,.66)) !important;
    }

    @media (max-width: 1180px) {
      #startScreen .start-faq-model-row {
        min-height: auto !important;
        display: grid !important;
        gap: 18px !important;
      }

      #startScreen .start-faq-model-row .start-side-model {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: min(430px, 72vw) !important;
        margin: 0 auto -12px 0 !important;
      }

      #startScreen .start-faq-model-row .start-faq-section {
        width: 100% !important;
        max-width: 850px !important;
        margin: 0 auto !important;
      }
    }


    /* Final start page cleanup: remove side artwork spacing and keep FAQ centered */
    #startScreen .start-faq-model-row {
      width: 100% !important;
      display: block !important;
      min-height: auto !important;
      position: relative !important;
      z-index: 2 !important;
      overflow: visible !important;
    }

    #startScreen .start-faq-model-row .start-faq-section {
      width: min(850px, calc(100% - 40px)) !important;
      max-width: 850px !important;
      margin: 0 auto !important;
      position: relative !important;
      z-index: 3 !important;
    }



    /* Start page showcase image between feature cards and FAQ */
    #startScreen .start-showcase-section {
      width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      position: relative !important;
    }

    #startScreen .start-showcase-section::before {
      content: none !important;
      display: none !important;
    }

    #startScreen .start-showcase-image {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      position: relative !important;
      z-index: 0 !important;
    }



    

    /* Hide legacy balancing/test controls in release builds */
    .topbar-test-actions,
    #giveAllCardsBtn,
    #giveCoinsBtn,
    #giveTrophiesBtn {
      display: none !important;
    }

    /* Fix native dropdown option contrast in Cards filters */
    .select option {
      background: #f3f4f6 !important;
      color: #111827 !important;
    }

    .select option:checked {
      background: #d1d5db !important;
      color: #111827 !important;
    }



    /* Release cleanup: hide the small round-type badge above the victory video. */
    #duelAttributeTags,
    .duel-attrs {
      display: none !important;
    }

    /* Release cleanup: keep duel setup labels simple and remove duplicate small labels. */
    #duelSetup .duel-versus-side > span { display: none !important; }