:root { --wheel-red: #c0202a; --wheel-signal: #ff4d5b; --wheel-line: #292929; --wheel-muted: #929292; }
::selection { background: var(--wheel-red); color: #fff; }
.wheel-main { width: min(100% - 32px, 1440px); margin: 38px auto 80px; }
.wheel-console { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, .72fr); border: 1px solid var(--wheel-line); border-top: 0; background: #0e0e0e; }
.wheel-stage { display: grid; grid-template-rows: auto minmax(450px, 1fr) auto auto; min-width: 0; border-right: 1px solid var(--wheel-line); }
.wheel-stage > header, .wheel-history > header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 0 34px; border-bottom: 1px solid var(--wheel-line); }
.wheel-stage > header { justify-content: flex-end; }
.wheel-stage h2, .wheel-history h2 { margin: 0; font-size: 30px; font-weight: 600; text-transform: uppercase; }
#source-state, .wheel-history header span, .spin-credit > span, .earning-progress span, .entries-form label, .entries-form label span, .wheel-result span, .spin-credit small, .history-meta { color: var(--wheel-muted); font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
#source-state.is-live { color: #fff; }
#source-state.is-live::before { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--wheel-red); content: ""; animation: source-pulse 1.8s ease-out infinite; }
.wheel-machine { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 42px; background: #080808; }
.wheel-assembly { position: relative; width: min(58vw, 560px); aspect-ratio: 1; }
.wheel-rim { position: relative; width: 100%; aspect-ratio: 1; border: 10px solid #151515; border-radius: 50%; outline: 1px solid #444; box-shadow: 0 24px 50px rgba(0,0,0,.55); transition: transform 6s cubic-bezier(.12,.72,.08,1); }
#wheel-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: transform 6s cubic-bezier(.12,.72,.08,1); }
.wheel-label { position: absolute; overflow: hidden; color: #fff; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; line-height: 1; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; transition: transform 6s cubic-bezier(.12,.72,.08,1); }
.wheel-label.is-light { color: #080808; }
.wheel-hub { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: flex; align-items: baseline; justify-content: center; width: 104px; height: 104px; border: 1px solid #555; border-radius: 50%; background: #050505; transform: translate(-50%,-50%); font-size: 22px; font-weight: 700; }
.wheel-pointer { position: absolute; top: 50%; right: 18px; z-index: 3; width: 0; height: 0; border-top: 17px solid transparent; border-right: 34px solid #fff; border-bottom: 17px solid transparent; filter: drop-shadow(7px 0 8px rgba(0,0,0,.6)); transform: translateY(-50%); }
.wheel-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 16px 34px; border-top: 1px solid var(--wheel-line); }
.wheel-result strong { overflow: hidden; color: #fff; font-size: clamp(26px,4vw,48px); font-weight: 600; line-height: .9; text-align: right; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.wheel-result.has-winner { background: var(--wheel-red); }
.wheel-result.has-winner span { color: rgba(255,255,255,.72); }
.spin-button { min-height: 64px; border: 0; border-top: 1px solid var(--wheel-red); background: var(--wheel-red); color: #fff; cursor: pointer; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.spin-button:hover, .spin-button:focus-visible { background: #e02835; }
.spin-button:disabled { background: #171717; color: #666; cursor: not-allowed; }
.wheel-controls { display: grid; align-content: start; }
.wheel-controls > section, .entries-form { padding: 30px; border-bottom: 1px solid var(--wheel-line); }
.spin-credit { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; }
.credit-counter { grid-column: 1 / -1; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.credit-counter strong { color: #fff; font: 500 clamp(72px,9vw,126px)/.8 "IBM Plex Mono", monospace; letter-spacing: -.04em; text-align: center; }
.spin-credit button { min-height: 48px; border: 1px solid var(--wheel-red); border-radius: 2px; background: transparent; color: var(--wheel-signal); cursor: pointer; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.credit-counter button { width: 44px; min-height: 44px; border-color: #3a3a3a; color: #fff; font: 500 22px "IBM Plex Mono", monospace; }
.credit-counter button:hover, .credit-counter button:focus-visible { border-color: var(--wheel-red); background: var(--wheel-red); }
.spin-credit .active-button[aria-pressed="true"] { background: var(--wheel-red); color: #fff; }
.spin-credit small { align-self: center; line-height: 1.45; }
.earning-progress { display: grid; gap: 26px; }
.earning-progress header { display: flex; align-items: center; justify-content: space-between; }
.earning-progress button { min-height: 32px; padding: 0 10px; border: 1px solid #3a3a3a; background: transparent; color: #fff; cursor: pointer; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.earning-progress button:hover, .earning-progress button:focus-visible { border-color: var(--wheel-red); color: var(--wheel-signal); }
.earning-progress button:disabled { opacity: .45; cursor: not-allowed; }
.earning-progress form { display: grid; gap: 22px; }
.earning-progress form > label { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.earning-progress strong { font: 500 13px "IBM Plex Mono", monospace; }
.earning-progress strong b { color: var(--wheel-signal); font-weight: inherit; }
.earning-progress strong input { width: 66px; height: 28px; margin: -8px 2px; border: 1px solid #3a3a3a; background: #050505; color: #fff; font: inherit; text-align: center; }
.earning-progress i { grid-column: 1 / -1; height: 4px; overflow: hidden; background: #292929; }
.earning-progress em { display: block; width: 0; height: 100%; background: var(--wheel-red); transition: width 300ms ease-out; }
.earning-progress footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#targets-status { text-transform: none; }
.entries-form { display: grid; gap: 12px; }
.entries-form label { display: flex; justify-content: space-between; }
.entries-form label span { color: #666; }
.entries-form textarea { width: 100%; resize: vertical; border: 1px solid #3a3a3a; border-radius: 2px; background: #050505; color: #fff; padding: 14px; font: 500 14px/1.6 "IBM Plex Mono", monospace; caret-color: var(--wheel-signal); }
.entries-form textarea:focus { border-color: var(--wheel-red); outline: 2px solid transparent; }
.entries-form > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#entries-status { color: var(--wheel-muted); font: 500 9px "IBM Plex Mono", monospace; }
.entries-form button { min-height: 44px; padding: 0 16px; border: 1px solid var(--wheel-red); border-radius: 2px; background: transparent; color: var(--wheel-signal); cursor: pointer; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.entries-form button:hover, .entries-form button:focus-visible { background: var(--wheel-red); color: #fff; }
.wheel-history { border: 1px solid var(--wheel-line); border-top: 0; background: #0e0e0e; }
.wheel-history-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 22px; align-items: center; min-height: 72px; padding: 12px 34px; border-bottom: 1px solid var(--wheel-line); }
.wheel-history-row > span { color: var(--wheel-muted); font: 500 11px "IBM Plex Mono", monospace; }
.wheel-history-row strong { overflow: hidden; font-size: 23px; font-weight: 600; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.history-meta { display: grid; gap: 5px; text-align: right; }
.wheel-empty { margin: 0; padding: 28px 34px; color: var(--wheel-muted); font: 500 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--wheel-signal); outline-offset: 3px; }
@keyframes source-pulse { 70%,100% { box-shadow: 0 0 0 8px rgba(192,32,42,0); } 0% { box-shadow: 0 0 0 0 rgba(192,32,42,.5); } }
@media (max-width: 940px) { .wheel-console { grid-template-columns: 1fr; } .wheel-stage { border-right: 0; } .wheel-controls { border-top: 1px solid var(--wheel-line); } .wheel-assembly { width: min(78vw,560px); } }
@media (max-width: 640px) { .wheel-main { width: 100%; margin-top: 0; } .wheel-main .titlebar { align-items: flex-start; flex-direction: column; gap: 22px; } .wheel-console, .wheel-history { border-inline: 0; } .wheel-stage > header, .wheel-history > header, .wheel-result, .wheel-controls > section, .entries-form, .wheel-history-row { padding-inline: 18px; } .wheel-stage > header { gap: 12px; } #source-state { max-width: 130px; text-align: right; } .wheel-machine { min-height: 350px; padding: 34px 16px; } .wheel-assembly { width: min(calc(100vw - 64px),380px,100%); } .wheel-rim { border-width: 7px; } .wheel-pointer { right: 12px; } .wheel-hub { width: 76px; height: 76px; font-size: 17px; } .wheel-result { align-items: flex-start; flex-direction: column; } .wheel-result strong { max-width: 100%; text-align: left; } .spin-credit { grid-template-columns: 1fr; } .spin-credit > span, .credit-counter, .spin-credit .active-button, .spin-credit small { grid-column: 1; } .credit-counter strong { font-size: 84px; } .wheel-history-row { grid-template-columns: 38px minmax(0,1fr); } .history-meta { grid-column: 2; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .wheel-rim, .wheel-labels, .wheel-label { transition-duration: 50ms; } #source-state.is-live::before { animation: none; } }