@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root {
    --wheel-ink: #14283a;
    --wheel-navy: #0d2032;
    --wheel-navy-2: #122f49;
    --wheel-paper: #fff9e8;
    --wheel-paper-2: #f3ead0;
    --wheel-red: #e24b3b;
    --wheel-red-dark: #b9342a;
    --wheel-yellow: #f4c94e;
    --wheel-mint: #7dd4b2;
    --wheel-cyan: #52bdd2;
    --wheel-border: rgba(20, 40, 58, 0.18);
    --wheel-shadow: 0 18px 48px rgba(7, 25, 41, 0.18);
}

* { box-sizing: border-box; }

body.pokemon-wheel-page {
    margin: 0;
    color: var(--wheel-ink);
    background: #f4efdE;
    font-family: 'Libre Franklin', sans-serif;
}

.pokemon-wheel-page button,
.pokemon-wheel-page input,
.pokemon-wheel-page select {
    font: inherit;
}

.wheel-page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(20, 40, 58, 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(rgba(20, 40, 58, 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
        radial-gradient(circle at 16% 8%, rgba(226, 75, 59, 0.09), transparent 28%),
        radial-gradient(circle at 83% 18%, rgba(82, 189, 210, 0.11), transparent 30%),
        #f4efde;
}

.wheel-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 34px;
}

.wheel-hero::after {
    content: '';
    position: absolute;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(20, 40, 58, 0.08);
    border-radius: 50%;
    right: -280px;
    top: -260px;
    box-shadow: 0 0 0 38px rgba(20, 40, 58, 0.025), 0 0 0 78px rgba(20, 40, 58, 0.02);
    pointer-events: none;
}

.wheel-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr);
    gap: 44px;
    align-items: end;
}

.wheel-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wheel-breadcrumb a { color: #4b6f83; text-decoration: none; }
.wheel-breadcrumb span:last-child { color: var(--wheel-red-dark); font-weight: 700; }

.wheel-kicker,
.console-eyebrow,
.section-kicker,
.dialog-kicker {
    margin: 0 0 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #527389;
}

.wheel-hero h1 {
    margin: 0;
    max-width: 780px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(3.6rem, 7.3vw, 7rem);
    line-height: 0.86;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--wheel-navy);
}

.wheel-hero-lead {
    max-width: 780px;
    margin: 24px 0 0;
    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
    line-height: 1.72;
    color: #405e70;
}

.wheel-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.wheel-proof-row span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid rgba(20, 40, 58, 0.14);
    background: rgba(255, 249, 232, 0.68);
    box-shadow: inset 0 -2px 0 rgba(20, 40, 58, 0.04);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #5d7380;
}

.wheel-proof-row strong { color: var(--wheel-navy); font-size: 0.92rem; }

.wheel-hero-note {
    position: relative;
    min-height: 250px;
    padding: 26px;
    border: 1px solid rgba(20, 40, 58, 0.18);
    background: var(--wheel-navy);
    color: #d8e6e9;
    box-shadow: 12px 12px 0 rgba(226, 75, 59, 0.14);
}

.hero-note-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: #7dd4b2;
}

.hero-note-dial {
    position: relative;
    width: 94px;
    height: 94px;
    margin: 22px 0 18px;
    border: 1px dashed rgba(255,255,255,0.34);
    border-radius: 50%;
}

.hero-note-dial::before,
.hero-note-dial::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
}
.hero-note-dial::after { inset: 28px; background: var(--wheel-red); border: 0; }
.hero-note-dial span {
    position: absolute;
    left: 46px;
    top: 4px;
    width: 2px;
    height: 38px;
    background: var(--wheel-yellow);
    transform-origin: 50% 43px;
    transform: rotate(33deg);
}
.hero-note-dial i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wheel-mint);
    right: 7px;
    bottom: 19px;
}

.wheel-hero-note p {
    margin: 0;
    line-height: 1.65;
    font-size: 0.93rem;
}
.wheel-hero-note strong { color: #fff6d6; }

.wheel-app-section { padding: 18px 0 66px; }

.wheel-console {
    overflow: hidden;
    border: 1px solid rgba(20, 40, 58, 0.22);
    background: rgba(255, 249, 232, 0.94);
    box-shadow: var(--wheel-shadow);
}

.wheel-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: var(--wheel-navy);
    color: white;
}

.wheel-console-head h2 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.65rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.wheel-console-head .console-eyebrow { color: #7dd4b2; margin-bottom: 5px; }

.dataset-state {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.13);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #c6d4d8;
}
.dataset-state button { border: 0; background: transparent; color: #fff0a8; font-weight: 700; cursor: pointer; }
.dataset-light { width: 8px; height: 8px; border-radius: 50%; background: #e1af52; box-shadow: 0 0 0 4px rgba(225,175,82,.13); }
.dataset-state[data-status="ready"] .dataset-light { background: #73d1aa; box-shadow: 0 0 0 4px rgba(115,209,170,.13); }
.dataset-state[data-status="error"] .dataset-light { background: #ec6657; box-shadow: 0 0 0 4px rgba(236,102,87,.13); }

.wheel-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(350px, 0.72fr);
    min-height: 760px;
}

.wheel-arena {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: 30px 30px 24px;
    background:
        radial-gradient(circle at 50% 38%, rgba(82,189,210,.13), transparent 31%),
        linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
        repeating-linear-gradient(0deg, rgba(20,40,58,.022) 0, rgba(20,40,58,.022) 1px, transparent 1px, transparent 24px);
}

.wheel-stage-wrap {
    width: min(100%, 720px);
    padding: 18px;
}

.wheel-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    filter: drop-shadow(0 22px 28px rgba(8, 31, 50, 0.21));
}

#pokemonWheel {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.08,.64,.07,1);
    will-change: transform;
}

.wheel-stage::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
    border: 12px solid var(--wheel-navy);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #f5d879, inset 0 0 0 9px rgba(255,255,255,.15), 0 8px 0 #091928;
}

.wheel-scan-ring {
    position: absolute;
    inset: 4.5%;
    border: 1px dashed rgba(255,255,255,.38);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.wheel-pointer {
    position: absolute;
    z-index: 5;
    top: -13px;
    left: 50%;
    width: 54px;
    height: 74px;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 3px rgba(9,25,40,.22));
    pointer-events: none;
}

.wheel-pointer span {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: var(--wheel-red);
    border-top: 6px solid #fff7de;
}

.wheel-hub {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    width: 124px;
    height: 124px;
    transform: translate(-50%, -50%);
    border: 8px solid #fff8e2;
    border-radius: 50%;
    background: linear-gradient(#ec5e4e 0 46%, #10283b 46% 54%, #fff8e2 54% 100%);
    box-shadow: 0 8px 20px rgba(7, 25, 41, .28), inset 0 0 0 2px rgba(20,40,58,.22);
    color: var(--wheel-navy);
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}
.wheel-hub:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.045); filter: brightness(1.04); }
.wheel-hub:not(:disabled):active { transform: translate(-50%, -50%) scale(.98); }
.wheel-hub:disabled { cursor: not-allowed; opacity: .66; }
.wheel-hub .hub-top,
.wheel-hub .hub-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 800;
    letter-spacing: .08em;
}
.wheel-hub .hub-top { top: 22px; color: #fff9e8; font-size: .9rem; }
.wheel-hub .hub-bottom { bottom: 20px; color: var(--wheel-navy); font-size: .8rem; }

.wheel-arena-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(100%, 720px);
    margin-top: 18px;
}

.pool-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.pool-meter-number {
    display: inline-grid;
    place-items: center;
    min-width: 70px;
    height: 56px;
    padding: 0 10px;
    border: 1px solid rgba(20,40,58,.18);
    background: var(--wheel-navy);
    color: #fff5d3;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.pool-meter span:last-child { display: grid; gap: 2px; }
.pool-meter strong { font-family: 'IBM Plex Mono', monospace; font-size: .77rem; text-transform: uppercase; }
.pool-meter small { color: #667d89; font-size: .72rem; line-height: 1.35; }

.spin-speed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(20,40,58,.15);
    background: rgba(255,255,255,.58);
}
.spin-speed > span { padding: 0 7px; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; text-transform: uppercase; color: #738792; }
.spin-speed button {
    min-height: 34px;
    border: 0;
    background: transparent;
    padding: 0 9px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    color: #547080;
    cursor: pointer;
}
.spin-speed button.is-active { background: var(--wheel-navy); color: #fff5d5; }

.spin-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: min(100%, 720px);
    margin-top: 16px;
}
.primary-spin,
.secondary-action {
    min-height: 54px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}
.primary-spin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--wheel-red);
    color: #fff9e8;
    box-shadow: inset 0 -4px 0 rgba(93,25,18,.27), 0 8px 16px rgba(153,45,36,.16);
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.primary-spin:hover:not(:disabled) { background: #ee5c4b; }
.primary-spin:disabled, .secondary-action:disabled { opacity: .45; cursor: not-allowed; }
.secondary-action { padding: 0 20px; border: 1px solid rgba(20,40,58,.19); background: #fff9e8; color: var(--wheel-navy); }

.spin-hint {
    width: min(100%, 720px);
    margin: 8px 0 0;
    color: #778993;
    font-size: .72rem;
    font-family: 'IBM Plex Mono', monospace;
}

.quick-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    width: min(100%, 720px);
    margin-top: 20px;
}
.quick-presets > span { margin-right: 3px; font-family: 'IBM Plex Mono', monospace; font-size: .67rem; font-weight: 700; text-transform: uppercase; color: #7b8a91; }
.quick-presets button {
    min-height: 34px;
    border: 1px solid rgba(20,40,58,.16);
    background: transparent;
    color: #34566a;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}
.quick-presets button:hover { background: var(--wheel-paper-2); border-color: rgba(20,40,58,.28); }

.wheel-control-rail {
    min-width: 0;
    border-left: 1px solid rgba(20,40,58,.16);
    background: #efe5cb;
}

.control-panel {
    padding: 20px;
    border-bottom: 1px solid rgba(20,40,58,.15);
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.panel-heading > span:first-child {
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(20,40,58,.18);
    color: var(--wheel-red-dark);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .71rem;
    font-weight: 800;
}
.panel-heading h3,
.panel-heading strong {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--wheel-navy);
}
.panel-heading p,
.panel-heading small {
    display: block;
    margin: 4px 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: #6d7f88;
}

.mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 14px;
}
.mode-tabs button {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(20,40,58,.16);
    background: rgba(255,255,255,.48);
    color: #3d5d6d;
    cursor: pointer;
}
.mode-tabs button strong { font-family: 'IBM Plex Mono', monospace; font-size: .77rem; text-transform: uppercase; }
.mode-tabs button small { font-size: .7rem; color: #778890; }
.mode-tabs button.is-active { border-color: var(--wheel-navy); background: var(--wheel-navy); color: #fff6d7; box-shadow: inset 0 -3px 0 var(--wheel-red); }
.mode-tabs button.is-active small { color: #bfcdd2; }

.team-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(20,40,58,.17);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.team-size-buttons { display: inline-flex; }
.team-size-buttons button { min-width: 38px; height: 34px; border: 1px solid rgba(20,40,58,.18); margin-left: -1px; background: rgba(255,255,255,.46); color: #466475; cursor: pointer; }
.team-size-buttons button.is-active { background: var(--wheel-red); color: white; border-color: var(--wheel-red); }

.panel-mini-actions,
.filter-subheading {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
}
.panel-mini-actions button,
.filter-subheading button {
    min-height: 28px;
    border: 0;
    padding: 0 7px;
    background: transparent;
    color: #4e6e80;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    font-weight: 700;
    cursor: pointer;
}

.generation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
    margin-top: 6px;
}
.generation-grid button {
    display: grid;
    justify-items: start;
    gap: 1px;
    min-height: 52px;
    padding: 7px 9px;
    border: 1px solid rgba(20,40,58,.14);
    background: rgba(255,255,255,.45);
    color: #607684;
    cursor: pointer;
}
.generation-grid b { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; }
.generation-grid small { font-size: .62rem; }
.generation-grid button.is-active { background: #fff8e5; border-color: var(--wheel-red); color: var(--wheel-navy); box-shadow: inset 0 -3px 0 rgba(226,75,59,.18); }

.advanced-panel { padding: 0; }
.advanced-panel > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    cursor: pointer;
}
.advanced-panel > summary::-webkit-details-marker { display: none; }
.advanced-panel .panel-heading > span:nth-child(2) { display: block; }
.summary-chevron { font-size: 1.2rem; transition: transform .18s ease; }
.advanced-panel[open] .summary-chevron { transform: rotate(180deg); }
.advanced-body { padding: 0 20px 20px; }

.filter-subheading { align-items: center; justify-content: space-between; margin: 0 0 9px; }
.filter-subheading strong { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.filter-subheading span { display: inline-flex; gap: 3px; }

.type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 5px;
}
.type-grid button {
    min-height: 32px;
    padding: 4px 7px;
    border: 1px solid rgba(20,40,58,.13);
    background: rgba(255,255,255,.42);
    color: #607481;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    opacity: .52;
}
.type-grid button.is-active { opacity: 1; color: #10283b; border-color: rgba(20,40,58,.28); box-shadow: inset 0 -3px 0 var(--type-color, #8ca0a9); background: #fff9ea; }
.type-normal { --type-color:#a8a77a; } .type-fire { --type-color:#ee8130; } .type-water { --type-color:#6390f0; } .type-electric { --type-color:#f7d02c; } .type-grass { --type-color:#7ac74c; } .type-ice { --type-color:#96d9d6; } .type-fighting { --type-color:#c22e28; } .type-poison { --type-color:#a33ea1; } .type-ground { --type-color:#e2bf65; } .type-flying { --type-color:#a98ff3; } .type-psychic { --type-color:#f95587; } .type-bug { --type-color:#a6b91a; } .type-rock { --type-color:#b6a136; } .type-ghost { --type-color:#735797; } .type-dragon { --type-color:#6f35fc; } .type-dark { --type-color:#705746; } .type-steel { --type-color:#b7b7ce; } .type-fairy { --type-color:#d685ad; }

.filter-row-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 7px;
    margin-top: 14px;
}
.filter-row-group label { display: grid; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: .63rem; font-weight: 700; text-transform: uppercase; color: #617580; }
.filter-row-group select {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(20,40,58,.16);
    border-radius: 0;
    background: #fff9e8;
    color: var(--wheel-navy);
    font-size: .72rem;
    font-family: 'Libre Franklin', sans-serif;
    text-transform: none;
    padding: 0 8px;
}

.switch-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(20,40,58,.14);
    cursor: pointer;
}
.switch-row > span:first-child { display: grid; gap: 2px; }
.switch-row strong { font-size: .76rem; color: #365568; }
.switch-row small { font-size: .66rem; color: #7b8d95; line-height: 1.35; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 42px; height: 23px; border-radius: 20px; background: #b9b9aa; box-shadow: inset 0 0 0 1px rgba(20,40,58,.12); transition: background .16s ease; }
.switch-ui::after { content:''; position:absolute; width:17px; height:17px; top:3px; left:3px; border-radius:50%; background:#fff9e8; box-shadow:0 1px 3px rgba(20,40,58,.2); transition:transform .16s ease; }
.switch-row input:checked + .switch-ui { background: var(--wheel-red); }
.switch-row input:checked + .switch-ui::after { transform: translateX(19px); }
.switch-row input:focus-visible + .switch-ui { outline: 3px solid rgba(82,189,210,.32); outline-offset: 2px; }

.seed-input-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 13px; }
.seed-input-row input { min-width:0; height:42px; border:1px solid rgba(20,40,58,.18); background:#fff9e8; padding:0 10px; color:var(--wheel-navy); font-family:'IBM Plex Mono',monospace; font-size:.72rem; }
.seed-input-row button,
.seed-actions button { min-height: 40px; border: 1px solid rgba(20,40,58,.16); background: rgba(255,255,255,.45); color:#3c5d6e; font-weight:700; cursor:pointer; }
.seed-input-row button { padding:0 13px; }
.seed-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:7px; }

.wheel-lower-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr .8fr;
    border-top: 1px solid rgba(20,40,58,.16);
}
.result-panel,
.team-panel,
.history-panel { min-width:0; padding:22px; background:#fff9e8; }
.team-panel { border-left:1px solid rgba(20,40,58,.14); }
.history-panel { border-left:1px solid rgba(20,40,58,.14); background:#f0e7cf; }
.section-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-head-row h2 { margin:0; font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; line-height:1; text-transform:uppercase; color:var(--wheel-navy); }
.section-head-row h2 span { color:#748890; font-size:.85rem; font-family:'IBM Plex Mono',monospace; }
.result-head-actions { display:inline-flex; gap:6px; }
.result-head-actions button,
.history-panel .section-head-row > button { min-height:32px; border:1px solid rgba(20,40,58,.15); background:transparent; padding:0 9px; color:#4c6978; font-size:.66rem; font-weight:700; cursor:pointer; }
.result-head-actions button:disabled { opacity:.4; cursor:not-allowed; }

.result-empty { min-height:180px; display:flex; align-items:center; justify-content:center; gap:16px; border:1px dashed rgba(20,40,58,.22); color:#687c86; }
.result-empty > span { display:grid; place-items:center; width:58px; height:58px; border:1px solid rgba(20,40,58,.2); border-radius:50%; font-family:'Barlow Condensed',sans-serif; font-size:2rem; color:var(--wheel-red); }
.result-empty strong { display:block; margin-bottom:4px; color:#365568; }
.result-empty p { margin:0; max-width:300px; font-size:.76rem; line-height:1.5; }

.winner-card {
    display:grid;
    grid-template-columns: 164px 1fr;
    gap:18px;
    min-height:210px;
    padding:16px;
    border:1px solid rgba(20,40,58,.17);
    background:
        linear-gradient(135deg, rgba(255,255,255,.68), transparent 45%),
        #f7efd9;
}
.winner-art {
    display:grid;
    place-items:center;
    min-height:170px;
    border:1px solid rgba(20,40,58,.12);
    background:radial-gradient(circle, rgba(82,189,210,.15), transparent 62%);
    overflow:hidden;
}
.winner-art img { width:145px; height:145px; object-fit:contain; image-rendering:auto; }
.winner-body { min-width:0; }
.winner-id { font-family:'IBM Plex Mono',monospace; font-size:.67rem; color:#71858e; letter-spacing:.04em; }
.winner-name { margin:4px 0 8px; font-family:'Barlow Condensed',sans-serif; font-size:2rem; line-height:.95; text-transform:uppercase; color:var(--wheel-navy); }
.winner-flags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.type-badge,.flag-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 7px; border:1px solid rgba(20,40,58,.13); background:#fff9e8; font-size:.59rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.type-badge { border-bottom:3px solid var(--badge-color,#98a6ac); }
.flag-badge { background:var(--wheel-navy); color:#fff6d5; }
.winner-meta { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 12px; color:#607783; font-size:.69rem; }
.winner-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.winner-stat { padding:6px 4px; border-top:2px solid rgba(20,40,58,.11); text-align:center; }
.winner-stat span { display:block; font-family:'IBM Plex Mono',monospace; font-size:.52rem; color:#7b8a91; text-transform:uppercase; }
.winner-stat strong { font-family:'Barlow Condensed',sans-serif; font-size:1rem; color:#203e52; }
.winner-card-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:7px; padding-top:5px; }
.winner-card-actions button { min-height:34px; border:1px solid rgba(20,40,58,.17); background:#fff9e8; color:#34576a; font-size:.67rem; font-weight:800; cursor:pointer; }
.winner-card-actions .winner-primary { background:var(--wheel-red); color:white; border-color:var(--wheel-red); }

.team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.team-slot { position:relative; min-width:0; min-height:104px; padding:8px 7px 7px; border:1px dashed rgba(20,40,58,.18); background:rgba(255,255,255,.32); text-align:center; }
.team-slot.is-filled { border-style:solid; background:#f4ecd6; }
.team-slot img { width:58px; height:58px; object-fit:contain; display:block; margin:0 auto 2px; }
.team-slot strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.65rem; color:#345467; }
.team-slot small { display:block; margin-top:2px; color:#8a989e; font-family:'IBM Plex Mono',monospace; font-size:.54rem; }
.team-slot button { position:absolute; right:4px; top:4px; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:rgba(20,40,58,.8); color:white; cursor:pointer; }
.team-note { margin:10px 0 0; color:#768991; font-size:.68rem; line-height:1.45; }

.history-list { list-style:none; margin:0; padding:0; display:grid; gap:5px; max-height:252px; overflow:auto; }
.history-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; min-height:44px; padding:6px 7px; border:1px solid rgba(20,40,58,.11); background:rgba(255,255,255,.45); }
.history-item img { width:32px; height:32px; object-fit:contain; }
.history-item strong { display:block; font-size:.68rem; color:#365569; }
.history-item small { display:block; font-size:.56rem; color:#84939a; font-family:'IBM Plex Mono',monospace; }
.history-item button { border:0; background:transparent; color:#667d89; font-size:.62rem; cursor:pointer; }
.history-empty { color:#7b8b93; font-size:.72rem; padding:16px 0; }

.app-status {
    min-height: 42px;
    display:flex;
    align-items:center;
    padding:9px 22px;
    border-top:1px solid rgba(20,40,58,.14);
    background:var(--wheel-navy);
    color:#c8d6da;
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
}
.app-status[data-tone="success"] { color:#94e0bf; }
.app-status[data-tone="error"] { color:#ffad9f; }
.app-status[data-tone="warning"] { color:#f1d37b; }

.wheel-guide-section { padding: 58px 0 30px; }
.wheel-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.wheel-guide-card { padding:24px; border:1px solid rgba(20,40,58,.14); background:rgba(255,249,232,.78); }
.wheel-guide-card-wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(240px,.7fr) 1fr 1fr; column-gap:28px; }
.wheel-guide-card-wide .section-kicker, .wheel-guide-card-wide h2 { grid-column:1; }
.wheel-guide-card-wide > p:not(.section-kicker) { grid-row:1 / span 3; align-self:center; margin-top:0; }
.wheel-guide-card-wide > p:nth-of-type(2) { grid-column:2; }
.wheel-guide-card-wide > p:nth-of-type(3) { grid-column:3; }
.wheel-guide-card h2 { margin:0 0 10px; font-family:'Barlow Condensed',sans-serif; font-size:1.65rem; line-height:1.05; text-transform:uppercase; color:var(--wheel-navy); }
.wheel-guide-card p { margin:0; font-size:.9rem; line-height:1.72; color:#4d6979; }

.wheel-faq-section { padding:46px 0 58px; }
.wheel-section-heading { max-width:760px; margin-bottom:20px; }
.wheel-section-heading h2 { margin:0; font-family:'Barlow Condensed',sans-serif; font-size:2.4rem; text-transform:uppercase; line-height:1; color:var(--wheel-navy); }
.wheel-section-heading > p:last-child { color:#617a88; line-height:1.6; }
.pokemon-wheel-page .faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pokemon-wheel-page .faq-grid details { border:1px solid rgba(20,40,58,.14); background:rgba(255,249,232,.78); padding:0 18px; }
.pokemon-wheel-page .faq-grid summary { cursor:pointer; padding:17px 0; font-weight:800; color:#28495d; }
.pokemon-wheel-page .faq-grid details p { margin:0 0 18px; color:#587281; font-size:.86rem; line-height:1.7; }

.winner-dialog {
    width:min(92vw, 440px);
    border:1px solid rgba(20,40,58,.25);
    padding:28px;
    background:#fff8e5;
    color:var(--wheel-navy);
    box-shadow:0 30px 80px rgba(4,18,31,.42);
    text-align:center;
}
.winner-dialog::backdrop { background:rgba(6,22,34,.72); backdrop-filter:blur(5px); }
.dialog-close { position:absolute; right:10px; top:10px; width:34px; height:34px; border:1px solid rgba(20,40,58,.15); background:transparent; color:#3f5e6e; font-size:1.3rem; cursor:pointer; }
.winner-dialog-art { width:220px; height:220px; margin:0 auto 10px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle, rgba(82,189,210,.2), transparent 64%); }
.winner-dialog-art img { width:205px; height:205px; object-fit:contain; }
.winner-dialog h2 { margin:4px 0 8px; font-family:'Barlow Condensed',sans-serif; font-size:3rem; line-height:.92; text-transform:uppercase; }
.dialog-types { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; }
.winner-dialog > p:not(.dialog-kicker) { color:#607682; font-size:.78rem; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.dialog-actions button { min-height:44px; border:1px solid rgba(20,40,58,.17); background:#fff8e5; color:#36576a; font-weight:800; cursor:pointer; }
.dialog-actions button:first-child { background:var(--wheel-navy); color:#fff5d4; border-color:var(--wheel-navy); }

@media (max-width: 1080px) {
    .wheel-hero-grid { grid-template-columns: 1fr .56fr; gap:26px; }
    .wheel-workbench { grid-template-columns: minmax(0,1fr); }
    .wheel-control-rail { border-left:0; border-top:1px solid rgba(20,40,58,.16); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .control-panel { border-right:1px solid rgba(20,40,58,.13); }
    .advanced-panel { grid-column:1 / -1; }
    .seed-panel { border-bottom:0; }
    .wheel-lower-grid { grid-template-columns:1fr 1fr; }
    .history-panel { grid-column:1 / -1; border-left:0; border-top:1px solid rgba(20,40,58,.14); }
    .history-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:none; }
}

@media (max-width: 760px) {
    .wheel-hero { padding:34px 0 24px; }
    .wheel-hero-grid { grid-template-columns:1fr; }
    .wheel-hero-note { min-height:0; box-shadow:7px 7px 0 rgba(226,75,59,.12); }
    .hero-note-dial { display:none; }
    .hero-note-code { margin-bottom:10px; }
    .wheel-hero h1 { font-size:clamp(3.2rem,17vw,5rem); }
    .wheel-proof-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .wheel-proof-row span { justify-content:center; }
    .wheel-console-head { align-items:flex-start; flex-direction:column; padding:17px 16px; }
    .wheel-arena { padding:20px 14px 18px; }
    .wheel-stage-wrap { padding:14px 8px 10px; }
    .wheel-stage::before { inset:-6px; border-width:8px; }
    .wheel-pointer { width:42px; height:58px; top:-8px; }
    .wheel-hub { width:96px; height:96px; border-width:6px; }
    .wheel-hub .hub-top { top:17px; font-size:.72rem; }
    .wheel-hub .hub-bottom { bottom:15px; font-size:.68rem; }
    .wheel-arena-toolbar { flex-direction:column; align-items:stretch; }
    .pool-meter { justify-content:center; }
    .spin-speed { justify-content:center; flex-wrap:wrap; }
    .spin-actions { grid-template-columns:1fr; }
    .secondary-action { min-height:46px; }
    .quick-presets { justify-content:center; }
    .wheel-control-rail { grid-template-columns:1fr; }
    .control-panel { border-right:0; }
    .generation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .type-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .filter-row-group { grid-template-columns:1fr; }
    .wheel-lower-grid { grid-template-columns:1fr; }
    .team-panel,.history-panel { grid-column:auto; border-left:0; border-top:1px solid rgba(20,40,58,.14); }
    .winner-card { grid-template-columns:116px 1fr; gap:12px; }
    .winner-art { min-height:132px; }
    .winner-art img { width:110px; height:110px; }
    .winner-name { font-size:1.65rem; }
    .winner-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .history-list { grid-template-columns:1fr; }
    .wheel-guide-grid { grid-template-columns:1fr; }
    .wheel-guide-card-wide { grid-column:auto; display:block; }
    .wheel-guide-card-wide > p { margin-top:10px !important; }
    .pokemon-wheel-page .faq-grid { grid-template-columns:1fr; }
}

@media (max-width: 430px) {
    .wheel-hero-lead { font-size:.95rem; }
    .wheel-proof-row span { padding:8px 7px; font-size:.62rem; }
    .wheel-proof-row strong { font-size:.8rem; }
    .wheel-stage-wrap { width:100%; }
    .wheel-arena { padding-inline:10px; }
    .wheel-hub { width:84px; height:84px; }
    .wheel-hub .hub-top { top:14px; font-size:.64rem; }
    .wheel-hub .hub-bottom { bottom:12px; font-size:.62rem; }
    .wheel-pointer { width:36px; height:50px; }
    .pool-meter-number { min-width:60px; height:50px; font-size:1.7rem; }
    .spin-speed button { padding:0 7px; }
    .quick-presets > span { width:100%; text-align:center; }
    .quick-presets button { flex:1 1 calc(33% - 7px); padding:4px 7px; }
    .generation-grid button { padding:6px; }
    .type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seed-actions { grid-template-columns:1fr; }
    .winner-card { grid-template-columns:1fr; text-align:center; }
    .winner-art { min-height:150px; }
    .winner-flags,.winner-meta,.winner-card-actions { justify-content:center; }
    .team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .result-panel,.team-panel,.history-panel { padding:18px 14px; }
    .section-head-row { align-items:flex-start; }
    .winner-dialog { padding:24px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    #pokemonWheel { transition-duration: 0.08s !important; }
    .wheel-hub,.summary-chevron,.switch-ui,.switch-ui::after { transition:none !important; }
}