/* ── PokéRoulette ── */
    #rouletteGameView {
      display: none;
      flex-direction: column;
      gap: 1.4rem;
    }

    #rouletteGameView.active { display: flex; }

    .roulette-game-header {
      text-align: center;
      display: grid;
      gap: 0.7rem;
      padding: 0.5rem 0 0.25rem;
    }

    .roulette-game-header h1 {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(1rem, 3vw, 1.45rem);
      color: var(--accent);
      line-height: 1.6;
      text-shadow: 0 0 24px rgba(255,203,5,0.35);
    }

    .roulette-game-header p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .roulette-game-layout {
      display: grid;
      grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
      gap: 1.4rem;
      align-items: start;
    }

    .roulette-panel,
    .roulette-side-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 1.25rem;
      box-shadow: 0 0 26px rgba(61,126,255,0.08);
    }

    .roulette-wheel-wrap {
      position: relative;
      width: min(440px, 100%);
      margin: 0 auto;
      display: grid;
      place-items: center;
    }

    #pokemonRouletteCanvas {
      width: 100%;
      max-width: 420px;
      aspect-ratio: 1;
      border-radius: 50%;
      filter: drop-shadow(0 18px 34px rgba(0,0,0,0.35));
    }

    .roulette-pointer {
      position: absolute;
      top: 50%;
      right: -4px;
      left: auto;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 0;
      border-right: 34px solid var(--accent);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
      z-index: 2;
    }

    .roulette-center-ball {
      position: absolute;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: linear-gradient(#ef4444 0 46%, #111827 46% 54%, #f8fafc 54% 100%);
      border: 5px solid #111827;
      box-shadow: 0 0 22px rgba(255,203,5,0.25);
      pointer-events: none;
    }

    .roulette-center-ball::after {
      content: '';
      position: absolute;
      inset: 50% auto auto 50%;
      width: 24px;
      height: 24px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #f8fafc;
      border: 5px solid #111827;
    }


    .roulette-pointer-readout {
      margin: 0 auto 0.85rem;
      width: min(440px, 100%);
      min-height: 54px;
      border: 1px solid rgba(255,203,5,0.36);
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,203,5,0.13), transparent 62%),
        rgba(22,22,40,0.94);
      display: grid;
      place-items: center;
      padding: 0.72rem 0.95rem;
      box-shadow: 0 0 22px rgba(255,203,5,0.08), inset 0 0 0 1px rgba(255,255,255,0.035);
      text-align: center;
    }

    .roulette-pointer-readout .readout-label {
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 0.24rem;
    }

    .roulette-pointer-readout .readout-value {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      line-height: 1.45;
      text-shadow: 0 0 16px rgba(255,203,5,0.18);
    }

    .roulette-outcome-overlay {
      position: fixed;
      inset: 0;
      z-index: 3600;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
    }

    .roulette-outcome-overlay.open { display: flex; }

    .roulette-outcome-modal {
      width: min(440px, 94vw);
      border: 1px solid rgba(255,203,5,0.38);
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,203,5,0.14), transparent 62%),
        var(--card);
      padding: 1.55rem;
      display: grid;
      gap: 1rem;
      text-align: center;
      box-shadow: 0 18px 70px rgba(0,0,0,0.48), 0 0 34px rgba(255,203,5,0.12);
    }

    .roulette-outcome-modal img {
      width: 118px;
      height: 118px;
      object-fit: contain;
      image-rendering: pixelated;
      margin: 0 auto;
      filter: drop-shadow(0 0 18px rgba(255,203,5,0.22));
    }

    .roulette-outcome-modal h2 {
      font-family: 'Press Start 2P', monospace;
      color: var(--accent);
      font-size: 0.72rem;
      line-height: 1.55;
    }

    .roulette-outcome-modal p {
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.5;
      font-weight: 800;
    }

    .roulette-outcome-continue {
      border: none;
      border-radius: 13px;
      padding: 0.88rem 1rem;
      background: linear-gradient(135deg, var(--accent), #ffa500);
      color: #1a1000;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(255,203,5,0.25);
      transition: transform 0.15s, filter 0.15s;
    }

    .roulette-outcome-continue:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

    .roulette-champion-modal {
      width: min(680px, 94vw);
    }

    .roulette-champion-kicker {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.66rem;
      line-height: 1.5;
      text-shadow: 0 0 20px rgba(255,203,5,0.18);
    }

    .roulette-champion-team {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 0.7rem;
      margin-top: 0.25rem;
    }

    .roulette-champion-member {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 16px;
      background: rgba(255,255,255,0.04);
      padding: 0.7rem 0.55rem;
      display: grid;
      justify-items: center;
      gap: 0.35rem;
      min-height: 142px;
    }

    .roulette-champion-member img {
      width: 78px;
      height: 78px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 12px rgba(255,203,5,0.16));
    }

    .roulette-champion-member-name {
      color: #fff;
      font-weight: 950;
      line-height: 1.18;
      text-align: center;
    }

    .roulette-champion-member-power {
      color: var(--accent);
      font-size: 0.74rem;
      font-weight: 950;
    }

    .roulette-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .roulette-main-btn,
    .roulette-secondary-btn {
      border: none;
      border-radius: 13px;
      padding: 0.88rem 1rem;
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      letter-spacing: 1px;
      cursor: pointer;
      transition: transform 0.15s, filter 0.15s, border-color 0.15s;
    }

    .roulette-main-btn {
      background: linear-gradient(135deg, var(--accent), #ffa500);
      color: #1a1000;
      box-shadow: 0 4px 20px rgba(255,203,5,0.25);
    }

    .roulette-secondary-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
    }

    .roulette-main-btn:hover,
    .roulette-secondary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
    .roulette-main-btn:disabled,
    .roulette-secondary-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

    .roulette-result-card {
      margin-top: 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      min-height: 112px;
      padding: 1rem;
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 0.85rem;
      align-items: center;
    }

    .roulette-result-card img {
      width: 74px;
      height: 74px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 14px rgba(61,126,255,0.30));
    }

    .roulette-result-card .title {
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      color: var(--accent);
      line-height: 1.5;
    }

    .roulette-result-card .text {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
      margin-top: 0.35rem;
      font-weight: 800;
    }

    .roulette-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.65rem;
      margin-bottom: 1rem;
    }

    .roulette-stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.78rem 0.55rem;
      text-align: center;
    }

    .roulette-stat .label {
      display: block;
      color: var(--muted);
      font-size: 0.62rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin-bottom: 0.38rem;
    }

    .roulette-stat .value {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      line-height: 1.4;
    }

    .roulette-team-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
    }

    .roulette-team-slot {
      min-height: 112px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 0.7rem 0.45rem;
      text-align: center;
      display: grid;
      place-items: center;
      gap: 0.3rem;
    }

    .roulette-team-slot.empty { opacity: 0.48; border-style: dashed; }
    .roulette-team-slot img { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
    .roulette-team-slot .name { color: #fff; font-size: 0.72rem; font-weight: 900; line-height: 1.2; }
    .roulette-team-slot .power { color: var(--accent); font-size: 0.68rem; font-weight: 900; }

    .roulette-log {
      margin-top: 1rem;
      max-height: 190px;
      overflow-y: auto;
      display: grid;
      gap: 0.45rem;
      padding-right: 0.25rem;
    }

    .roulette-log-entry {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 0.62rem 0.75rem;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .game-tile-icon.roulette-icon {
      background: radial-gradient(circle at 50% 50%, rgba(255,203,5,0.22), rgba(61,126,255,0.10) 62%, rgba(0,0,0,0.20));
    }

    .game-tile-icon.roulette-icon img {
      width: 76px;
      height: 76px;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 12px rgba(255,203,5,0.34));
    }

    .roulette-setup-card {
      margin-bottom: 1rem;
      padding: 1.15rem;
      border-radius: 20px;
      border: 1px solid rgba(255,203,5,0.32);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,203,5,0.16), transparent 42%),
        radial-gradient(circle at 92% 12%, rgba(61,126,255,0.16), transparent 45%),
        rgba(22,22,40,0.92);
      box-shadow: 0 0 28px rgba(255,203,5,0.08), inset 0 0 0 1px rgba(255,255,255,0.035);
    }

    .roulette-setup-card[hidden] { display: none; }

    .roulette-setup-title {
      font-family: 'Press Start 2P', monospace;
      color: var(--accent);
      font-size: 0.68rem;
      line-height: 1.55;
      text-align: center;
      text-shadow: 0 0 18px rgba(255,203,5,0.24);
    }

    .roulette-setup-hint {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
      text-align: center;
      font-weight: 800;
      margin: 0.55rem 0 0.9rem;
    }

    .roulette-gen-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .roulette-gen-btn {
      min-height: 116px;
      border: 1px solid rgba(61,126,255,0.42);
      border-radius: 18px;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(61,126,255,0.14), rgba(255,255,255,0.035)),
        var(--surface);
      cursor: pointer;
      display: grid;
      place-items: center;
      gap: 0.28rem;
      padding: 0.9rem 0.55rem;
      font-family: 'Nunito', sans-serif;
      font-weight: 900;
      transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s, background 0.16s;
      box-shadow: 0 0 18px rgba(61,126,255,0.08);
    }

    .roulette-gen-btn:hover,
    .roulette-gen-btn:focus-visible,
    .roulette-gen-btn.active {
      transform: translateY(-2px);
      border-color: var(--accent);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,203,5,0.18), transparent 60%),
        linear-gradient(180deg, rgba(61,126,255,0.20), rgba(255,255,255,0.045)),
        var(--surface);
      box-shadow: 0 10px 28px rgba(0,0,0,0.24), 0 0 22px rgba(255,203,5,0.15);
      outline: none;
    }

    .roulette-gen-btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; }

    .roulette-gen-btn .gen-number {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #1a1000;
      background: linear-gradient(135deg, var(--accent), #ffa500);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.62rem;
      box-shadow: 0 0 18px rgba(255,203,5,0.24);
    }

    .roulette-gen-btn .gen-main {
      font-family: 'Press Start 2P', monospace;
      color: #fff;
      font-size: 0.56rem;
      line-height: 1.35;
      margin-top: 0.25rem;
    }

    .roulette-gen-btn .gen-sub {
      color: #9db9ff;
      font-size: 0.78rem;
      line-height: 1.2;
    }

    .roulette-phase-card,
    .roulette-opponent-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 0.95rem 1rem;
      margin-bottom: 1rem;
      display: grid;
      gap: 0.55rem;
    }

    .roulette-phase-label,
    .roulette-opponent-title {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.54rem;
      line-height: 1.45;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .roulette-phase-text,
    .roulette-opponent-text {
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.45;
      font-weight: 800;
    }

    .roulette-progress-row {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 0.48rem;
      align-items: stretch;
    }

    .roulette-badge-slot {
      min-height: 58px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.10);
      background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
      position: relative;
      overflow: hidden;
    }

    .roulette-badge-slot::after {
      content: '';
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 2px dashed rgba(255,255,255,0.10);
      opacity: 0.85;
    }

    .roulette-badge-slot.earned {
      border-color: rgba(255,203,5,0.58);
      background: radial-gradient(circle at 50% 15%, rgba(255,203,5,0.18), rgba(255,255,255,0.04));
      box-shadow: 0 0 16px rgba(255,203,5,0.13), inset 0 0 0 1px rgba(255,203,5,0.08);
    }

    .roulette-badge-slot.earned::after {
      display: none;
    }

    .roulette-badge-slot img {
      width: clamp(38px, 4vw, 56px);
      height: clamp(38px, 4vw, 56px);
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 10px rgba(255,203,5,0.22));
    }

    .roulette-power-bar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.55rem;
      margin-top: 0.2rem;
    }

    .roulette-power-meter {
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .roulette-power-fill {
      display: block;
      height: 100%;
      width: 10%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent2), var(--accent));
      transition: width 0.25s ease;
    }

    .roulette-power-fill.enemy { background: linear-gradient(90deg, #ff3b3b, #ffa500); }
    .roulette-vs-label { color: var(--accent); font-family: 'Press Start 2P', monospace; font-size: 0.48rem; }

    .roulette-team-slot.shiny {
      border-color: rgba(255,203,5,0.55);
      background: radial-gradient(circle at 50% 0%, rgba(255,203,5,0.16), transparent 62%), var(--surface);
      box-shadow: 0 0 18px rgba(255,203,5,0.12);
    }


    .roulette-inventory-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 0.95rem 1rem;
      margin-bottom: 1rem;
      display: grid;
      gap: 0.7rem;
    }

    .roulette-inventory-title {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.54rem;
      line-height: 1.45;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .roulette-inventory-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .roulette-inventory-item {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 13px;
      background: rgba(255,255,255,0.035);
      padding: 0.65rem 0.45rem;
      display: grid;
      place-items: center;
      gap: 0.28rem;
      text-align: center;
      min-height: 82px;
    }

    .roulette-inventory-item img {
      width: 34px;
      height: 34px;
      image-rendering: pixelated;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(61,126,255,0.20));
    }

    .roulette-inventory-item .item-name {
      color: #fff;
      font-size: 0.68rem;
      font-weight: 900;
      line-height: 1.15;
    }

    .roulette-inventory-item .item-count {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.48rem;
      line-height: 1.25;
    }

    .roulette-inventory-note {
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .roulette-team-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.8rem;
    }

    .roulette-team-header #rouletteTeamTitle {
      margin: 0 !important;
    }

    .roulette-bank-btn {
      border: 1px solid rgba(255,203,5,0.42);
      border-radius: 12px;
      background: rgba(255,203,5,0.08);
      color: var(--accent);
      padding: 0.54rem 0.75rem;
      font-family: 'Nunito', sans-serif;
      font-size: 0.78rem;
      font-weight: 900;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      white-space: nowrap;
    }

    .roulette-bank-btn:hover,
    .roulette-bank-btn:focus-visible {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 0 18px rgba(255,203,5,0.16);
      outline: none;
    }

    .roulette-bank-overlay {
      position: fixed;
      inset: 0;
      z-index: 3650;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(8px);
    }

    .roulette-bank-overlay.open { display: flex; }

    .roulette-bank-modal {
      width: min(900px, 96vw);
      max-height: min(86vh, 820px);
      overflow-y: auto;
      border: 1px solid rgba(255,203,5,0.38);
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,203,5,0.13), transparent 58%),
        var(--card);
      padding: 1.45rem;
      display: grid;
      gap: 1rem;
      box-shadow: 0 18px 70px rgba(0,0,0,0.50), 0 0 34px rgba(255,203,5,0.12);
    }

    .roulette-bank-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .roulette-bank-header h2 {
      font-family: 'Press Start 2P', monospace;
      color: var(--accent);
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .roulette-bank-hint {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.5;
      font-weight: 800;
    }

    .roulette-bank-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .roulette-bank-column {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 1rem;
      display: grid;
      gap: 0.75rem;
    }

    .roulette-bank-column h3 {
      color: var(--accent);
      font-family: 'Press Start 2P', monospace;
      font-size: 0.58rem;
      line-height: 1.5;
    }

    .roulette-bank-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.68rem;
    }

    .roulette-bank-mon {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      background: rgba(255,255,255,0.035);
      min-height: 136px;
      padding: 0.72rem 0.48rem;
      display: grid;
      place-items: center;
      text-align: center;
      gap: 0.34rem;
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .roulette-bank-mon:hover,
    .roulette-bank-mon.selected {
      transform: translateY(-2px);
      border-color: var(--accent);
      background: rgba(255,203,5,0.08);
      box-shadow: 0 0 18px rgba(255,203,5,0.14);
    }

    .roulette-bank-mon.shiny {
      border-color: rgba(255,203,5,0.55);
      background: radial-gradient(circle at 50% 0%, rgba(255,203,5,0.15), transparent 62%), rgba(255,255,255,0.035);
    }

    .roulette-bank-mon.empty {
      cursor: default;
      opacity: 0.52;
      border-style: dashed;
    }

    .roulette-bank-mon.empty:hover {
      transform: none;
      border-color: var(--border);
      background: rgba(255,255,255,0.035);
      box-shadow: none;
    }

    .roulette-bank-mon img {
      width: 72px;
      height: 72px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 0 14px rgba(61,126,255,0.24));
    }

    .roulette-bank-mon .name {
      color: #fff;
      font-size: 0.75rem;
      font-weight: 900;
      line-height: 1.18;
    }

    .roulette-bank-mon .power {
      color: var(--accent);
      font-size: 0.7rem;
      font-weight: 900;
    }

    .roulette-bank-empty {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.4;
      font-weight: 800;
      padding: 1rem;
      border: 1px dashed var(--border);
      border-radius: 14px;
      text-align: center;
    }


    /* ── Roulette XL Layout ── */
    #rouletteGameView.active {
      width: min(1500px, calc(100vw - 3rem));
      margin: 0 auto;
    }

    #rouletteGameView .roulette-game-header {
      padding-top: 0.25rem;
      gap: 0.45rem;
    }

    #rouletteGameView .roulette-game-header h1 {
      font-size: clamp(1.15rem, 2.2vw, 1.85rem);
    }

    #rouletteGameView .roulette-game-header p {
      font-size: 1.04rem;
    }

    #rouletteGameView .roulette-game-layout {
      grid-template-columns: minmax(620px, 1.15fr) minmax(430px, 0.85fr);
      gap: 1.65rem;
    }

    #rouletteGameView .roulette-panel,
    #rouletteGameView .roulette-side-card {
      border-radius: 26px;
      padding: 1.45rem;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,203,5,0.065), transparent 58%),
        var(--card);
      box-shadow: 0 18px 52px rgba(0,0,0,0.26), 0 0 34px rgba(61,126,255,0.10);
    }

    #rouletteGameView .roulette-panel {
      display: grid;
      grid-template-rows: auto auto auto auto auto;
      align-content: start;
    }

    #rouletteGameView .roulette-wheel-wrap,
    #rouletteGameView .roulette-pointer-readout {
      width: min(640px, 100%);
    }

    #pokemonRouletteCanvas {
      max-width: 620px;
    }

    #rouletteGameView .roulette-pointer {
      top: 50%;
      right: -7px;
      left: auto;
      transform: translateY(-50%);
      border-top-width: 25px;
      border-bottom-width: 25px;
      border-left-width: 0;
      border-right-width: 46px;
    }

    #rouletteGameView .roulette-center-ball {
      width: 108px;
      height: 108px;
      border-width: 7px;
    }

    #rouletteGameView .roulette-center-ball::after {
      width: 34px;
      height: 34px;
      border-width: 7px;
    }

    #rouletteGameView .roulette-pointer-readout {
      min-height: 68px;
      border-radius: 18px;
      margin-bottom: 1rem;
      padding: 0.82rem 1.05rem;
    }

    #rouletteGameView .roulette-pointer-readout .readout-label {
      font-size: 0.7rem;
    }

    #rouletteGameView .roulette-pointer-readout .readout-value {
      font-size: 0.72rem;
    }

    #rouletteGameView .roulette-controls {
      width: min(640px, 100%);
      margin: 1.15rem auto 0;
      gap: 0.9rem;
    }

    #rouletteGameView .roulette-main-btn,
    #rouletteGameView .roulette-secondary-btn {
      min-height: 54px;
      font-size: 0.68rem;
      border-radius: 15px;
    }

    #rouletteGameView .roulette-result-card {
      width: min(640px, 100%);
      margin: 1.1rem auto 0;
      min-height: 134px;
      grid-template-columns: 100px 1fr;
      gap: 1.05rem;
      border-radius: 18px;
      padding: 1.05rem 1.15rem;
    }

    #rouletteGameView .roulette-result-card img {
      width: 94px;
      height: 94px;
    }

    #rouletteGameView .roulette-result-card .title {
      font-size: 0.68rem;
    }

    #rouletteGameView .roulette-result-card .text {
      font-size: 0.98rem;
    }

    #rouletteGameView .roulette-setup-card,
    #rouletteGameView .roulette-phase-card,
    #rouletteGameView .roulette-opponent-card,
    #rouletteGameView .roulette-inventory-card {
      border-radius: 20px;
      padding: 1.1rem 1.15rem;
    }

    #rouletteGameView .roulette-gen-btn {
      min-height: 132px;
      border-radius: 20px;
    }

    #rouletteGameView .roulette-gen-btn .gen-number {
      width: 52px;
      height: 52px;
      font-size: 0.72rem;
    }

    #rouletteGameView .roulette-gen-btn .gen-main {
      font-size: 0.66rem;
    }

    #rouletteGameView .roulette-gen-btn .gen-sub {
      font-size: 0.9rem;
    }

    #rouletteGameView .roulette-stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.72rem;
      margin-bottom: 1.1rem;
    }

    #rouletteGameView .roulette-stat {
      min-height: 86px;
      border-radius: 16px;
      padding: 0.86rem 0.55rem;
    }

    #rouletteGameView .roulette-stat .label {
      font-size: 0.66rem;
    }

    #rouletteGameView .roulette-stat .value {
      font-size: 0.68rem;
    }

    #rouletteGameView .roulette-inventory-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.7rem;
    }

    #rouletteGameView .roulette-inventory-item {
      min-height: 104px;
      border-radius: 16px;
      padding: 0.72rem 0.55rem;
    }

    #rouletteGameView .roulette-inventory-item img {
      width: 48px;
      height: 48px;
    }

    #rouletteGameView .roulette-inventory-item .item-name {
      font-size: 0.76rem;
    }

    #rouletteGameView .roulette-inventory-item .item-count {
      font-size: 0.56rem;
    }

    #rouletteGameView .roulette-progress-row {
      gap: 0.62rem;
    }

    #rouletteGameView .roulette-badge-slot {
      min-height: 70px;
      border-radius: 18px;
    }

    #rouletteGameView .roulette-badge-slot img {
      width: 58px;
      height: 58px;
    }

    #rouletteGameView .roulette-power-meter {
      height: 14px;
    }

    #rouletteGameView .roulette-team-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.82rem;
    }

    #rouletteGameView .roulette-team-slot {
      min-height: 154px;
      border-radius: 18px;
      padding: 0.85rem 0.55rem;
      gap: 0.42rem;
    }

    #rouletteGameView .roulette-team-slot img {
      width: 92px;
      height: 92px;
      filter: drop-shadow(0 0 14px rgba(61,126,255,0.25));
    }

    #rouletteGameView .roulette-team-slot .name {
      font-size: 0.82rem;
    }

    #rouletteGameView .roulette-team-slot .power {
      font-size: 0.78rem;
    }

    #rouletteGameView #rouletteTeamTitle {
      font-size: 0.74rem !important;
      margin-top: 0.15rem;
      margin-bottom: 0.95rem !important;
    }

    #rouletteGameView .roulette-log {
      max-height: 235px;
      gap: 0.55rem;
    }

    #rouletteGameView .roulette-log-entry {
      font-size: 0.9rem;
      padding: 0.72rem 0.86rem;
    }

    #rouletteGameView .roulette-outcome-modal {
      width: min(560px, 94vw);
      padding: 1.85rem;
    }

    #rouletteGameView .roulette-outcome-modal img {
      width: 154px;
      height: 154px;
    }

    #rouletteGameView .roulette-outcome-modal h2 {
      font-size: 0.86rem;
    }

    #rouletteGameView .roulette-outcome-modal p {
      font-size: 1.06rem;
    }

    @media (max-width: 1180px) {
      #rouletteGameView.active { width: min(100%, calc(100vw - 2rem)); }
      #rouletteGameView .roulette-game-layout { grid-template-columns: 1fr; }
      #rouletteGameView .roulette-wheel-wrap,
      #rouletteGameView .roulette-pointer-readout,
      #rouletteGameView .roulette-controls,
      #rouletteGameView .roulette-result-card { width: min(680px, 100%); }
      #pokemonRouletteCanvas { max-width: min(620px, 100%); }
    }

    @media (max-width: 700px) {
      #rouletteGameView.active { width: 100%; }
      #rouletteGameView .roulette-panel,
      #rouletteGameView .roulette-side-card { padding: 1rem; border-radius: 20px; }
      #pokemonRouletteCanvas { max-width: min(92vw, 440px); }
      #rouletteGameView .roulette-center-ball { width: 76px; height: 76px; border-width: 5px; }
      #rouletteGameView .roulette-center-ball::after { width: 24px; height: 24px; border-width: 5px; }
      #rouletteGameView .roulette-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #rouletteGameView .roulette-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #rouletteGameView .roulette-team-slot { min-height: 132px; }
      #rouletteGameView .roulette-team-slot img { width: 76px; height: 76px; }
      #rouletteGameView .roulette-gen-grid { grid-template-columns: 1fr; }
      .roulette-bank-columns { grid-template-columns: 1fr; }
      .roulette-bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .roulette-team-header { align-items: stretch; flex-direction: column; }
      .roulette-bank-btn { width: 100%; }
    }