:root {
      --bg: #07090d;
      --panel: rgba(14, 17, 24, 0.94);
      --panel-2: #111621;
      --line: rgba(255,255,255,.1);
      --text: #f7f8fb;
      --muted: #8992a5;
      --gold:var(--accent);
      --gold-2: #ff9d00;
      --accent:#248cff;--accent-rgb:36,140,255;--accent-ink:#06101d;--green:var(--accent);--color-accent:var(--accent);
      --danger: #ff4d67;
      --shadow: 0 28px 80px rgba(0,0,0,.48);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      overflow: hidden;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 70% 45%, rgba(25, 92, 255, .12), transparent 32%),
        radial-gradient(circle at 35% 70%, rgba(var(--accent-rgb),.06), transparent 30%),
        linear-gradient(135deg, #05070b, #0b0e15 55%, #05070b);
    }

    button, input, textarea, select { font: inherit; }
    button { color: inherit; }

    .app {
      height: 100%;
      display: block;
    }

    .sidebar {
      position: fixed;
      z-index: 50;
      left: 0;
      top: 0;
      bottom: 0;
      width: min(380px, 92vw);
      min-width: 0;
      overflow: auto;
      padding: 20px;
      background: linear-gradient(180deg, rgba(17,21,30,.985), rgba(8,11,16,.985));
      border-right: 1px solid var(--line);
      box-shadow: 28px 0 80px rgba(0,0,0,.48);
      backdrop-filter: blur(22px);
      transform: translateX(0);
      transition: transform .38s cubic-bezier(.2,.85,.2,1), box-shadow .38s ease;
    }

    body.drawer-closed .sidebar {
      transform: translateX(calc(-100% - 28px));
      box-shadow: none;
    }

    .drawer-close {
      margin-left: auto;
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.055);
      color: #aeb6c7;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }
    .drawer-close:hover { color: white; background: rgba(255,255,255,.1); }

    .drawer-open {
      position: absolute;
      z-index: 32;
      left: auto;
      right: 20px;
      top: 20px;
      height: 46px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 15px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      color: white;
      background: rgba(8,11,16,.72);
      box-shadow: 0 12px 28px rgba(0,0,0,.32);
      backdrop-filter: blur(16px);
      cursor: pointer;
      font-weight: 900;
      letter-spacing: .03em;
      transition: opacity .2s ease, transform .2s ease, background .2s ease;
    }
    .drawer-open:hover { transform: translateY(-2px); background: rgba(20,25,34,.88); }
    body:not(.drawer-closed) .drawer-open { opacity: 0; pointer-events: none; transform: translateX(10px); }
    body.embedded .drawer-open { display:none !important; }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .brand-logo, .hub-logo {
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 24%, #ffe975, #ffbf00 42%, #ff8a00 75%);
      color: #101217;
      font-weight: 1000;
      font-style: italic;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 8px 26px rgba(255,166,0,.28);
      text-shadow: 0 1px 0 rgba(255,255,255,.45);
    }

    .brand-logo { width: 46px; height: 46px; font-size: 27px; overflow: hidden; }
    .brand-logo img, .hub-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .brand-title { font-size: 17px; font-weight: 900; letter-spacing: .02em; }
    .brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

    .section {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.025);
      margin-bottom: 14px;
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 900;
      color: #dce1eb;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .counter {
      color: #111;
      background: var(--green);
      border-radius: 99px;
      padding: 3px 8px;
      font-size: 10px;
      letter-spacing: 0;
    }

    .field, .textarea, .select {
      width: 100%;
      color: var(--text);
      background: #0b0f16;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 12px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .field, .select { height: 42px; padding: 0 12px; }
    .textarea { min-height: 78px; padding: 11px 12px; resize: vertical; }
    .field:focus, .textarea:focus, .select:focus {
      border-color: rgba(var(--accent-rgb),.7);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08);
    }

    .row { display: flex; gap: 8px; }
    .row > * { min-width: 0; }
    .grow { flex: 1; }

    .btn {
      border: 0;
      border-radius: 12px;
      min-height: 42px;
      padding: 0 14px;
      font-weight: 850;
      cursor: pointer;
      background: #202735;
      transition: transform .15s, filter .15s, background .15s;
    }
    .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn.primary { color: #111; background: linear-gradient(135deg, var(--green), #a9ef00); }
    .btn.gold { color: #1a1200; background: linear-gradient(135deg, #ffe55f, #ffad00); }
    .btn.ghost { background: rgba(255,255,255,.055); border: 1px solid var(--line); }
    .btn.danger { background: rgba(255,77,103,.12); color: #ff9bab; }
    .btn.icon { width: 42px; padding: 0; display: grid; place-items: center; }

    .upload {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 74px;
      margin-top: 9px;
      border: 1px dashed rgba(255,255,255,.18);
      border-radius: 14px;
      background: rgba(255,255,255,.025);
      color: var(--muted);
      text-align: center;
      cursor: pointer;
    }
    .upload strong { color: white; font-size: 13px; }
    .upload small { display:block; margin-top: 3px; }
    .upload input { position:absolute; inset:0; opacity:0; cursor:pointer; }

    .center-editor {
      display:grid;
      grid-template-columns:64px minmax(0,1fr);
      gap:10px;
      align-items:center;
    }
    .center-preview {
      width:64px;
      height:64px;
      border-radius:50%;
      overflow:hidden;
      display:grid;
      place-items:center;
      background:radial-gradient(circle at 38% 28%,#2b3341,#080b10 68%);
      border:3px solid #ffc72c;
      box-shadow:0 8px 22px rgba(0,0,0,.34),0 0 20px rgba(255,188,0,.18);
      color:#fff;
      font-weight:1000;
      font-size:24px;
    }
    .center-preview img { width:100%;height:100%;object-fit:cover;display:block; }
    .mini-label { display:block;color:var(--muted);font-size:10px;font-weight:800;margin:0 0 5px 2px;text-transform:uppercase;letter-spacing:.08em; }

    .items {
      display: grid;
      gap: 8px;
      max-height: 270px;
      overflow: auto;
      padding-right: 2px;
    }

    .item {
      display: grid;
      grid-template-columns: 42px minmax(0,1fr) 26px 34px;
      align-items: center;
      gap: 9px;
      padding: 7px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 12px;
    }
    .thumb {
      width: 42px; height: 42px;
      border-radius: 10px;
      display: grid; place-items: center;
      overflow: hidden;
      font-weight: 1000;
      color: #101217;
      border: 1px solid rgba(255,255,255,.14);
    }
    .thumb img { width: 100%; height: 100%; object-fit: cover; }
    .item input[type="text"] {
      width: 100%; height: 34px;
      border: 0; outline: 0;
      color: white;
      background: transparent;
      font-weight: 750;
    }
    .item-color-wrap{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 2px rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.28);cursor:pointer;transition:transform .18s ease}.item-color-wrap:hover{transform:scale(1.12)}.item-auto-color{width:24px;height:24px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff08;color:#8b96a7;font-size:9px;font-weight:1000;cursor:pointer}.item-auto-color.active{background:rgba(var(--accent-rgb),0.086);border-color:rgba(var(--accent-rgb),0.333);color:var(--accent)}.item-color{position:absolute;inset:-8px;width:40px!important;height:40px!important;padding:0;border:0;cursor:pointer;background:transparent}.item-color::-webkit-color-swatch-wrapper{padding:0}.item-color::-webkit-color-swatch{border:0;border-radius:50%}.item-color::-moz-color-swatch{border:0;border-radius:50%}
    .image-style-preview{display:flex;gap:8px;align-items:center;margin-top:9px}.image-style-preview span{display:block;width:52px;height:34px;background:linear-gradient(135deg,#fff,#dfe7f0);box-shadow:0 8px 18px rgba(0,0,0,.2)}.preview-round{width:34px!important;border-radius:50%}.preview-full{border-radius:7px}.image-style-row:has(input:checked)~.image-style-preview .preview-round,.image-style-row:not(:has(input:checked))~.image-style-preview .preview-full{outline:2px solid var(--green);outline-offset:2px}
    .remove {
      width: 32px; height: 32px; border: 0; border-radius: 9px;
      cursor: pointer; background: transparent; color: #6f788b; font-size: 18px;
    }
    .remove:hover { background: rgba(255,77,103,.12); color: #ff8296; }

    .note { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 9px; }

    .stage-wrap {
      position: relative;
      min-width: 0;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 0;
      overflow: hidden;
    }

    .stage-wrap::before {
      content: "";
      position: absolute;
      width: 70vw; height: 70vw;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,184,0,.08), transparent 60%);
      filter: blur(30px);
      pointer-events: none;
    }

    .stage {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      border-radius: 0;
      border: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(29,36,50,.9), rgba(5,7,11,.96) 62%),
        linear-gradient(135deg, #0b1018, #05070b);
      box-shadow: var(--shadow), inset 0 0 100px rgba(0,0,0,.35);
      isolation: isolate;
    }

    .stage::before {
      content: "";
      position:absolute; inset:0;
      background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity:.2;
      mask-image: linear-gradient(90deg, #000, transparent 42%, transparent 58%, #000);
      z-index:0;
    }
    .stage::after {
      content: "";
      position: absolute;
      inset: -25%;
      z-index: 1;
      pointer-events: none;
      opacity: .32;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,188,0,.16), transparent 25%),
        conic-gradient(from 0deg at 50% 50%, transparent, rgba(33,102,237,.08), transparent 24%, rgba(var(--accent-rgb),.06), transparent 50%);
      filter: blur(34px);
      transition: opacity .35s ease;
    }
    .stage.spinning::after {
      opacity: .72;
      animation: stageSweep 2.4s linear infinite;
    }
    @keyframes stageSweep { to { transform: rotate(360deg) scale(1.04); } }

    .topbar {
      display: none;
    }
    .stage-brand {
      display:flex; align-items:center; gap:8px;
      font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
      color:rgba(255,255,255,.74);
    }
    .live-pill {
      padding:7px 10px; border-radius:99px;
      background:rgba(5,8,12,.65); border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.65); font-size:10px; letter-spacing:.09em;
      backdrop-filter: blur(12px);
    }

    .wheel-shell {
      position: absolute;
      left: 50%; top: 51%;
      width: min(87vh, 980px, 68vw);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      padding: 17px;
      background:
        linear-gradient(145deg, #394150, #080a0e 38%, #212733 70%, #050608),
        #0c0f15;
      box-shadow:
        0 30px 80px rgba(0,0,0,.62),
        0 0 0 3px rgba(255,194,42,.24),
        inset 0 0 0 3px rgba(255,255,255,.11),
        inset 0 0 25px rgba(255,195,43,.14);
      z-index:2;
      transition: transform .35s cubic-bezier(.2,.85,.2,1), filter .25s ease;
    }
    .wheel-shell::before {
      content: "";
      position: absolute;
      inset: 12px;
      z-index: 6;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.16);
      box-shadow: inset 0 0 22px rgba(255,255,255,.06), 0 0 25px rgba(255,184,0,.08);
      pointer-events: none;
    }
    .wheel-shell::after {
      content: "";
      position: absolute;
      inset: 3.5%;
      z-index: 6;
      border-radius: 50%;
      background: linear-gradient(155deg, rgba(255,255,255,.18), transparent 24%, transparent 66%, rgba(0,0,0,.16));
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: .68;
    }
    .wheel-shell.spinning { transform: translate(-50%, -50%) scale(1.015); }

    .bulbs { position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:7; }
    .bulb {
      position:absolute;
      left:50%; top:50%;
      width:7px; height:7px; border-radius:50%;
      background:#ffd851;
      box-shadow:0 0 6px #ffd851, 0 0 16px rgba(255,184,0,.8);
      transform-origin:0 0;
    }

    #wheelCanvas {
      display:block;
      width:100%; height:100%;
      border-radius:50%;
      transition: filter .35s ease, opacity .35s ease, transform .35s ease;
      will-change: filter, transform;
    }
    .wheel-shell.spinning #wheelCanvas {
      filter: blur(2.2px) saturate(1.14) brightness(1.04);
    }
    .wheel-shell.result-open #wheelCanvas {
      filter: blur(12px) brightness(.52) saturate(.78);
      opacity:.82;
      transform: scale(1.02);
    }

    .hub {
      position:absolute;
      left:50%; top:50%;
      width:18%; aspect-ratio:1;
      transform:translate(-50%,-50%);
      border-radius:50%;
      z-index:8;
      padding:7px;
      background:linear-gradient(145deg,#fff19a,#ff9e00 55%,#b56c00);
      box-shadow:0 8px 30px rgba(0,0,0,.55),0 0 26px rgba(255,180,0,.55);
    }
    .hub-logo {
      width:100%;
      height:100%;
      overflow:hidden;
      background: radial-gradient(circle at 40% 25%, #1e2430, #0a0d13 65%);
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
      color:#fff;display:grid;place-items:center;font-weight:1000;font-size:clamp(22px,3.5vw,54px);text-shadow:0 3px 12px rgba(0,0,0,.7);
    }

    .pointer {
      position:absolute;
      right:-3.5%; top:50%;
      transform:translateY(-50%);
      width:14%; height:17%;
      z-index:10;
      filter:drop-shadow(0 9px 12px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,184,0,.35));
      transform-origin: 100% 50%;
    }
    .pointer.tick { animation: pointerTick .12s ease-out; }
    @keyframes pointerTick {
      0% { transform: translateY(-50%) rotate(0deg); }
      45% { transform: translateY(-50%) rotate(-8deg); }
      100% { transform: translateY(-50%) rotate(0deg); }
    }
    .pointer::before {
      content:"";
      position:absolute; inset:0;
      clip-path:polygon(100% 0, 100% 100%, 0 50%);
      background:linear-gradient(160deg,#fff6ae 0 16%,#ffbd00 32% 67%,#a35d00 100%);
    }
    .pointer::after {
      content:"";
      position:absolute; inset:10%;
      clip-path:polygon(100% 7%, 100% 93%, 12% 50%);
      background:linear-gradient(160deg,#ffe36a,#ff9d00);
    }

    .result {
      position:absolute;
      inset:0;
      z-index:24;
      display:grid;
      place-items:center;
      opacity:0;
      pointer-events:none;
      cursor: pointer;
      transition:opacity .34s ease, backdrop-filter .34s ease;
      background: rgba(3,5,9,.22);
      backdrop-filter: blur(0px);
    }
    .result.show {
      opacity:1;
      pointer-events:auto;
      backdrop-filter: blur(12px);
    }

    .result-display {
      position: relative;
      z-index: 2;
      width: min(86vw, 1320px);
      min-height: 44vh;
      display: grid;
      place-items: center;
      text-align: center;
      transform: scale(.72) translateY(22px);
      opacity: 0;
      transition: transform .5s cubic-bezier(.15,.9,.2,1.12), opacity .26s ease;
    }
    .result.show .result-display { transform: scale(1) translateY(0); opacity: 1; }

    .result-title {
      max-width: 92vw;
      margin: 0;
      font-size: clamp(66px, 12vw, 210px);
      line-height: .88;
      font-weight: 1000;
      letter-spacing: -.06em;
      color: white;
      text-transform: uppercase;
      text-shadow:
        0 8px 0 rgba(0,0,0,.42),
        0 18px 46px rgba(0,0,0,.52);
      overflow-wrap: anywhere;
    }

    .result-image {
      display: none;
      max-width: min(74vw, 1040px);
      max-height: 72vh;
      object-fit: contain;
      border-radius: 28px;
      filter: drop-shadow(0 30px 52px rgba(0,0,0,.62));
    }
    .result.has-image .result-image { display: block; }
    .result.has-image .result-title { display: none; }

    .spin-fab {
      position:absolute;
      left:50%; bottom:20px;
      transform:translateX(-50%);
      z-index:15;
      height:52px;
      min-width:180px;
      border:0;
      border-radius:999px;
      padding:0 25px;
      cursor:pointer;
      color:#141000;
      background:linear-gradient(135deg,#f3ff95,var(--green) 40%,#a8e600);
      box-shadow:0 12px 30px rgba(114,164,0,.28),inset 0 1px 0 rgba(255,255,255,.7);
      font-size:15px;
      font-weight:1000;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:transform .16s, filter .16s;
    }
    .spin-fab:hover { transform:translateX(-50%) translateY(-2px); filter:brightness(1.05); }
    .spin-fab:disabled { cursor:not-allowed; filter:grayscale(.7); opacity:.55; }

    .topbar, .drawer-open, .spin-fab, .shortcut { transition: opacity .24s ease, transform .2s ease; }
    body.winner-open .topbar,
    body.winner-open .drawer-open,
    body.winner-open .spin-fab,
    body.winner-open .shortcut {
      opacity: 0;
      pointer-events: none;
    }

    #confetti { position:absolute; inset:0; z-index:19; pointer-events:none; }

    .shortcut {
      position:absolute; right:18px; bottom:18px; z-index:14;
      color:rgba(255,255,255,.4); font-size:10px; letter-spacing:.06em;
    }

    .present .sidebar,
    .present .drawer-open { display:none; }
    .present .stage-wrap { padding:0; }
    .present .stage { width:100vw; height:100vh; border:0; border-radius:0; }
    .present .wheel-shell { width:min(90vh, 1040px, 70vw); }
    .present .shortcut { display:none; }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 50px;
      margin-top: 10px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
      background: rgba(255,255,255,.028);
      color: #dfe4ee;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }
    .toggle-row small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; }
    .toggle { position: relative; width: 44px; height: 24px; flex: 0 0 auto; }
    .toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .toggle span {
      position: absolute; inset: 0;
      border-radius: 999px;
      background: #2b3240;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      transition: background .2s ease;
    }
    .toggle span::after {
      content: "";
      position: absolute;
      left: 3px; top: 3px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 3px 9px rgba(0,0,0,.35);
      transition: transform .22s cubic-bezier(.2,.9,.2,1.15);
    }
    .toggle input:checked + span { background: var(--green); }
    .toggle input:checked + span::after { transform: translateX(20px); background: #111; }

    .admin-only[hidden] { display:none !important; }
    .admin-only { margin-bottom:10px; padding:11px; border:1px solid rgba(255,199,44,.25); border-radius:12px; background:rgba(255,199,44,.07); }
    .hub { cursor: pointer; transition: transform .18s ease, filter .18s ease; }
    .hub:hover { transform: translate(-50%,-50%) scale(1.055); filter: brightness(1.08); }
    .hub:active { transform: translate(-50%,-50%) scale(.97); }

    @media (max-width: 980px) {
      .wheel-shell { width: min(82vh, 88vw); }
      .topbar { left: 16px; right: 16px; }
      .stage-brand { display: none; }
      .shortcut { display: none; }
      .spin-fab { bottom: 16px; }
      .drawer-open span { display: none; }
      .drawer-open { width: 46px; padding: 0; justify-content: center; }
    }
  
/* V10 editor UX */
.sidebar{scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}
.sidebar .brand,.sidebar .head{position:sticky;top:-20px;z-index:20;margin:-20px -20px 16px;padding:20px;background:linear-gradient(180deg,rgba(15,19,28,.99) 75%,rgba(15,19,28,0));backdrop-filter:blur(20px)}
.section{transition:border-color .2s,background .2s}.section:focus-within{border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.025)}
.btn,.field,.textarea,.select,.upload,.toggle-row{min-height:46px}
@media(min-width:701px){
 .sidebar{width:min(430px,38vw);padding:22px}
 .items{max-height:34vh}
 .section{padding:17px;border-radius:19px}
}
@media(max-width:700px){
 .sidebar{
   left:8px!important;right:8px!important;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
   width:auto!important;height:min(84dvh,780px)!important;max-height:none!important;
   border:1px solid rgba(255,255,255,.13)!important;border-radius:30px!important;
   padding:18px 16px max(22px,env(safe-area-inset-bottom))!important;
   background:radial-gradient(circle at 90% 0%,rgba(116,76,255,.16),transparent 34%),linear-gradient(160deg,rgba(19,24,35,.98),rgba(7,10,16,.99))!important;
   box-shadow:0 -30px 95px rgba(0,0,0,.62)!important;
   transform:translateY(calc(100% + 28px))!important;
   transition:transform .42s cubic-bezier(.16,.86,.2,1)!important;
   overscroll-behavior:contain;
 }
 body:not(.drawer-closed) .sidebar{transform:translateY(0)!important}
 body.drawer-closed .sidebar{transform:translateY(calc(100% + 28px))!important}
 .sidebar:before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,.2);margin:0 auto 13px}
 .drawer-open{display:none!important}
 .brand,.head{top:-18px!important;margin:-18px -16px 12px!important;padding:14px 0 13px!important}
 .section{padding:15px;border-radius:18px;margin-bottom:10px}
 .items{max-height:31dvh}
 .row{gap:7px}
 .btn{min-height:50px;border-radius:15px}
 .field,.select{height:48px;font-size:16px}
 .textarea{font-size:16px}
 .upload{min-height:82px}
}

@media(min-width:701px){.sidebar{width:min(540px,46vw)!important}.items{max-height:38vh!important}.center-editor{grid-template-columns:78px 1fr}.center-preview{width:78px;height:78px}}

    @keyframes wheelShuffleDeck{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}25%{transform:translate(-50%,-50%) rotate(-7deg) scale(.96)}55%{transform:translate(-50%,-50%) rotate(8deg) scale(1.035)}78%{transform:translate(-50%,-50%) rotate(-3deg) scale(.99)}100%{transform:translate(-50%,-50%) rotate(0) scale(1)}}
    .wheel-shell.shuffle-anim{animation:wheelShuffleDeck .72s cubic-bezier(.18,.82,.2,1)}
    .wheel-shell.shuffle-anim #wheelCanvas{filter:blur(3px) saturate(1.2);transition:filter .18s ease}

    @media (max-width:700px){
      .wheel-shell{
        inline-size:var(--mobile-wheel-size,86vw)!important;
        block-size:var(--mobile-wheel-size,86vw)!important;
        width:var(--mobile-wheel-size,86vw)!important;
        height:var(--mobile-wheel-size,86vw)!important;
        min-width:var(--mobile-wheel-size,86vw)!important;
        min-height:var(--mobile-wheel-size,86vw)!important;
        max-width:var(--mobile-wheel-size,86vw)!important;
        max-height:var(--mobile-wheel-size,86vw)!important;
        aspect-ratio:1/1!important;
        box-sizing:border-box!important;
        padding:12px!important;
        top:48%;
        border-radius:50%!important;
        overflow:visible;
        contain:layout;
      }
      #wheelCanvas{
        position:absolute!important;
        left:12px!important;
        top:12px!important;
        width:calc(100% - 24px)!important;
        height:calc(100% - 24px)!important;
        max-width:calc(100% - 24px)!important;
        max-height:calc(100% - 24px)!important;
        aspect-ratio:1/1!important;
        border-radius:50%!important;
      }
      .pointer{right:-5%;width:16%;height:18%}
    }

.media-placement-active .item .thumb{outline:3px solid var(--accent);cursor:copy;box-shadow:0 0 22px rgba(var(--accent-rgb),.35)}
.wheel-media-tray{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 5px;margin-top:9px;scrollbar-width:thin}.wheel-media-card{flex:0 0 72px;width:72px;height:72px;padding:4px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:#090d14;cursor:grab}.wheel-media-card:active{cursor:grabbing}.wheel-media-card img{width:100%;height:100%;object-fit:contain;border-radius:9px}.wheel-media-empty,.wheel-media-help{color:#788496;font-size:9px;line-height:1.45}.wheel-media-help{display:block;margin-top:7px}.drag-target{outline:3px solid var(--accent)!important;outline-offset:5px;box-shadow:0 0 0 9px rgba(var(--accent-rgb),.08),0 0 40px rgba(var(--accent-rgb),.42)!important;animation:mediaDropPulse .72s ease-in-out infinite alternate;filter:saturate(1.12) brightness(1.05)}@keyframes mediaDropPulse{from{transform:scale(.994)}to{transform:scale(1.008)}}.image-style-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}.image-style-choice{min-height:88px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:#ffffff04;color:#fff;display:grid;justify-items:center;gap:5px;cursor:pointer}.image-style-choice.active{border-color:var(--accent);background:rgba(var(--accent-rgb),0.063);color:var(--accent)}.image-style-choice small{color:#7d899a;font-size:8px}.style-dot{width:38px;height:38px;display:block;background:linear-gradient(145deg,var(--accent),#7fa000);box-shadow:0 8px 18px rgba(0,0,0,.25)}.style-dot.round{border-radius:50%}.style-dot.square{border-radius:8px}


/* CareerModeStars host adapter; original wheel rendering and motion retained. */
[hidden]{display:none!important}.wheel-editor-fields{padding:0;margin:0;border:0;min-width:0}.wheel-editor-fields:disabled{opacity:.65}
body.embedded .drawer-open,.drawer-open{display:flex!important}body:not(.drawer-closed) .drawer-open{pointer-events:none}
.item{grid-template-columns:42px minmax(0,1fr) 24px 24px 32px}
.studio-toast{position:absolute;z-index:40;left:50%;bottom:86px;transform:translateX(-50%);padding:10px 16px;border:1px solid #ffffff18;border-radius:14px;background:#111b2ef0;font-size:12px;max-width:90%;text-align:center;color:#e5eefb;pointer-events:none}
.wheel-history-list{margin:0;padding-left:22px;font-size:13px;line-height:1.8;color:#b8c4d8;max-height:150px;overflow:auto}
.wheel-db-actions{margin-top:9px}.wheel-db-actions>*+*{margin-top:8px}.wheel-db-actions label{display:block;font-size:11px;color:#aab7ce}
.result-close{position:absolute;right:18px;top:18px;z-index:30;border:1px solid #fff3;background:#162237c9;color:white;width:44px;height:44px;border-radius:14px;font-size:28px;cursor:pointer}.result-caption{display:block;margin-top:18px;font-size:14px;color:#d7e1f0;text-shadow:0 2px 8px #000}
@media(max-width:700px){.drawer-open{width:auto;right:14px;top:14px}.drawer-open span{display:block;font-size:11px}.wheel-shell{max-width:calc(100vw - 28px)!important}.sidebar .brand{padding-inline:12px!important}.result-title{font-size:clamp(40px,12vw,100px)}.result-image{max-height:60vh}.wheel-editor-fields{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.wheel-shell.spinning #wheelCanvas{filter:none}}

body.present .drawer-open{display:none!important}.hub:focus-visible{outline:3px solid white;outline-offset:5px}

/* v33.3 · Account library + uninterrupted stage */
body,.stage,.stage-wrap{height:100dvh}.wheel-shell{top:50%;transition:left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.85,.2,1)}
.hub{border:0;line-height:1;font-family:inherit}.hub[aria-disabled="true"]{cursor:default;filter:saturate(.45)}
.hub-logo img,.center-preview img,.thumb img{object-fit:contain}
.wheel-shell.drag-target,.hub.drag-target{animation:none!important;transform:translate(-50%,-50%)!important}
#confetti{width:100%;height:100%;z-index:27;pointer-events:none}
.transparent-result .result-image{border-radius:0}
.result-image{max-height:70dvh}.result-display{min-height:0;max-height:85dvh}.result-caption{opacity:.68;font-size:12px;letter-spacing:.03em}
.spin-fab{display:none!important}
.wheel-empty-state{position:absolute;z-index:12;top:calc(50% + min(12vh,100px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;max-width:80%;width:330px}
.wheel-empty-state strong{font-size:clamp(18px,2.5vw,30px);letter-spacing:-.045em}.wheel-empty-state span{font-size:12px;color:#8291a8}.wheel-empty-state .btn{margin-top:9px;font-size:12px}
.placement-hint{position:absolute;z-index:35;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 16px;background:#13263bf0;border:1px solid #4e91dd70;border-radius:16px;font-size:12px;max-width:88vw;box-shadow:0 15px 60px #0008}
.placement-hint button{border:0;color:#fff;background:none;font-size:22px;cursor:pointer}
.studio-toast{bottom:30px;z-index:90;box-shadow:0 12px 42px #0006}.media-placement-active .studio-toast{bottom:92px}
.media-private{font-size:9px;font-weight:700;color:#8fb3e2;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border:1px solid #689ade30;border-radius:6px}
.media-storage-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:14px;color:#9baec8}.media-storage-line strong{color:#ebf2ff;font-weight:800}
#mediaMeter{display:block;width:100%;height:6px;margin:10px 0 3px;appearance:none;border:0;border-radius:5px;overflow:hidden;background:#223048}
#mediaMeter::-webkit-meter-bar{background:#223048;border:0}#mediaMeter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#347df1,#82b4ff)}#mediaMeter::-moz-meter-bar{background:#518ff4}
#mediaFileUsage{display:block;font-size:10px}.media-upload-row{margin-top:14px}.media-search-label{display:block;margin-top:13px}.media-login{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;margin:10px 0}
.wheel-media-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:360px;overflow-y:auto;overflow-x:hidden;padding:8px 1px;align-items:start}
.wheel-media-empty{grid-column:1/-1;font-size:12px;padding:14px 5px;color:#8395b2}
.media-tile{min-width:0;padding:5px;border:1px solid #ffffff12;border-radius:13px;background:#0b111d;transition:border-color .2s,background .2s}
.media-tile:hover{border-color:#7a9ac940;background:#111b2b}.media-tile.is-selected{border-color:#589dfa;background:#3064a626}
.wheel-media-card{display:block;aspect-ratio:1;width:100%;height:auto;padding:6px;border:0;border-radius:9px;background-color:#101a28;background-image:linear-gradient(45deg,#1b2a3c 25%,transparent 25%),linear-gradient(-45deg,#1b2a3c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1b2a3c 75%),linear-gradient(-45deg,transparent 75%,#1b2a3c 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;touch-action:none;overflow:hidden}
.wheel-media-card img{height:100%;width:100%;object-fit:contain;pointer-events:none;user-select:none;display:block;border-radius:0;aspect-ratio:1}
.wheel-media-card:focus-visible{outline:2px solid #9fc8ff;outline-offset:2px}
.media-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#c1cee2;margin:7px 1px 4px;font-weight:600}
.media-tile-tools{display:flex;align-items:center;gap:2px;min-height:25px}.media-tile-tools input{margin:0 auto 0 0;accent-color:#5c9aff;width:16px;height:16px}.media-tile-tools button{height:26px;width:26px;background:none;color:#8294af;border:0;border-radius:6px;cursor:pointer;font-size:16px}.media-tile-tools button:hover{background:#ffffff0d;color:white}
.media-selection-row{display:flex;gap:7px;margin-top:10px}.media-selection-row .btn{font-size:10px;padding:0 9px;min-height:37px;flex:1}
#mediaLoadMore{width:100%;font-size:12px;min-height:36px}.wheel-media-help{font-size:10px;line-height:1.6;color:#8495ae}
.media-drag-ghost{position:fixed;width:78px;height:78px;transform:translate(-50%,-60%);object-fit:contain;z-index:1000;pointer-events:none;filter:drop-shadow(0 10px 16px #0008)}
.image-style-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.image-style-choice{padding:10px 4px}.image-style-choice strong{font-size:11px}.image-style-choice small{font-size:9px}.style-dot.transparent{display:grid;place-items:center;background:none;box-shadow:none;color:var(--accent);font-size:38px;line-height:1}
.force-target-label{margin-top:12px}.admin-only{border-radius:16px;background:linear-gradient(140deg,#e2b0440d,#88540806);padding:14px;border-color:#ffc95232}
#forceQueueTools{margin-top:12px}#forceQueueTools .btn{font-size:11px;min-height:38px}.force-queue{margin:10px 0;padding-left:20px;max-height:180px;overflow:auto;font-size:12px}.force-queue li{padding:4px}.force-queue button{float:right;background:none;border:0;color:#ff9dab;font-size:18px;cursor:pointer}.history-force{margin-left:8px;border-radius:4px;background:#ffc74715;color:#ffd58b;padding:2px 5px;font-size:8px;font-weight:800}
.studio-confirm{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid #ffffff1c;border-radius:24px;background:#101827;color:#f3f6fc;box-shadow:0 30px 100px #000b}
.studio-confirm::backdrop{background:#02081499;backdrop-filter:blur(10px)}.studio-confirm h2{font-size:23px;letter-spacing:-.04em;margin:0 0 12px}.studio-confirm p{font-size:13px;line-height:1.6;color:#9eafc9;margin:0 0 20px}.studio-confirm .row{margin-top:22px;justify-content:flex-end}.studio-confirm .btn{font-size:12px;min-height:44px}
@media(min-width:1000px){.sidebar{width:380px!important;padding:20px}.sidebar .brand-title{font-size:14px}.sidebar .brand-sub{font-size:10px}.brand-logo{flex-shrink:0}.drawer-close{flex-shrink:0}.center-editor{grid-template-columns:64px 1fr}.center-preview{width:64px;height:64px}body:not(.drawer-closed):not(.present) .wheel-shell{left:calc(50% + 190px);width:min(85vh,calc(100vw - 445px));}body:not(.drawer-closed):not(.present) .wheel-empty-state{left:calc(50% + 190px)}}
@media(min-width:701px) and (max-width:999px){.sidebar{width:360px!important}.brand-title{font-size:13px}.brand-sub{font-size:10px}.brand-logo{flex-shrink:0}.drawer-close{flex-shrink:0}}
@media(max-width:700px){.wheel-shell{top:50%}.wheel-empty-state{top:calc(50% + 65px)}.wheel-empty-state strong{font-size:19px}.wheel-empty-state span{font-size:11px}.wheel-empty-state .btn{min-height:38px;padding:0 13px;margin-top:2px}.wheel-media-tray{max-height:320px}.media-tile-tools button{width:28px;height:30px}.media-selection-row .btn{min-height:38px;font-size:10px}.wheel-shell .hub{min-width:56px}.brand-title{font-size:13px}.brand-sub{font-size:10px}.brand-logo{flex-shrink:0}.drawer-close{flex-shrink:0}.placement-hint{bottom:24px}.stage .shortcut{display:none}}
@media(prefers-reduced-motion:reduce){.wheel-shell{transition:none}}

/* v33.4 · Explicit world theme + minimal editor. */
html[data-world="fut"]{--accent:#d2ff00;--accent-rgb:210,255,0;--accent-ink:#101500}
html[data-world="career"]{--accent:#248cff;--accent-rgb:36,140,255;--accent-ink:#06101d}
body{background:#080c12}.btn{font-weight:650;font-size:12px}.btn.primary,.btn.gold{color:var(--accent-ink);background:var(--accent);box-shadow:none}
.btn.primary:hover,.btn.gold:hover{filter:brightness(1.1)}.btn.ghost{background:#ffffff06;border-color:#ffffff12}.btn.danger{color:#f6a6ad;background:#ff667714}
.brand-logo{background:none;box-shadow:none;border-radius:12px}.brand-logo img{object-fit:contain}.brand-title{letter-spacing:-.02em!important;font-weight:650!important}.sidebar .brand{margin-bottom:8px}
.brand-logo{width:34px;height:34px}.drawer-close{height:34px;width:34px;min-height:34px!important}
.studio-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:#ffffff06;border:1px solid #ffffff0c;border-radius:12px;margin-bottom:18px}
.studio-tabs button{border:0;min-height:38px;border-radius:8px;background:none;color:#94a1b5;font-size:12px;cursor:pointer}
.studio-tabs button[aria-selected="true"]{color:var(--accent);background:rgba(var(--accent-rgb),.11)}
.studio-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.section{padding:15px!important;border-radius:15px!important;border-color:#ffffff0b;background:#ffffff02}
.section-title{font-size:11px;letter-spacing:.045em;font-weight:650}.note{font-size:11px}.section p:empty{display:none}
.studio-disclosure{border:1px solid #ffffff0d;border-radius:14px;margin-bottom:12px;overflow:hidden}.studio-disclosure>summary{padding:15px;font-size:12px;color:#a4b1c4;cursor:pointer}.studio-disclosure>.section{border:0;margin:0;border-top:1px solid #ffffff08}
.field:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}.section:focus-within{border-color:rgba(var(--accent-rgb),.18);background:#ffffff03}
.item-auto-color.active,.image-style-choice.active{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}
.style-dot{background:var(--accent)}.style-dot.transparent{background:none;color:var(--accent)}
.media-private{color:#96a6bc;border-color:#ffffff15}.media-tile.is-selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.media-tile-tools input{accent-color:var(--accent)}.wheel-media-card:focus-visible{outline-color:var(--accent)}
#mediaMeter::-webkit-meter-optimum-value{background:var(--accent)}#mediaMeter::-moz-meter-bar{background:var(--accent)}
.media-account-link{display:block;text-align:center;color:#93a4bc;font-size:11px;margin-top:16px;text-decoration:none}.media-account-link:hover{color:var(--accent)}
.library-wheel-link{display:none}.creator-advanced{margin:12px 0}.creator-advanced>summary{display:flex;align-items:center;cursor:pointer;font-size:11px;color:#9baac0;list-style:none}.creator-advanced[open]>summary{color:var(--accent)}
.admin-only{margin:8px 0;background:#ffffff03;border-color:#ffffff12}.force-queue li{display:flex;align-items:center;gap:6px}.force-queue li>span{overflow-wrap:anywhere;flex:1}
.hub{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 60%,white),var(--accent),color-mix(in srgb,var(--accent) 65%,black));box-shadow:0 8px 30px #0008,0 0 26px rgba(var(--accent-rgb),.3)}
.center-preview{border-color:var(--accent);box-shadow:0 8px 22px #0005,0 0 20px rgba(var(--accent-rgb),.15)}
.pointer::before{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 50%,white),var(--accent) 42%,color-mix(in srgb,var(--accent) 60%,black))}.pointer::after{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 60%,white),var(--accent))}
.pointer{filter:drop-shadow(0 9px 12px #0008) drop-shadow(0 0 12px rgba(var(--accent-rgb),.2))}
.bulb{background:color-mix(in srgb,var(--accent) 65%,white);box-shadow:0 0 6px var(--accent),0 0 16px rgba(var(--accent-rgb),.55)}
.wheel-shell{box-shadow:0 30px 80px #0009,0 0 0 3px rgba(var(--accent-rgb),.2),inset 0 0 0 3px #ffffff1c,inset 0 0 25px rgba(var(--accent-rgb),.12)}
.result-display{width:min(72vw,640px,68dvh);height:min(72vw,640px,68dvh);min-height:0;max-height:none;display:grid;place-items:center;aspect-ratio:1;margin:auto}
.result-image{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0;object-fit:contain;filter:drop-shadow(0 20px 36px #0007)}
.result-title{width:100%;max-width:100%;max-height:100%;font-size:120px;line-height:1.03;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 10px 30px #0008}
.result-close{top:20px;right:20px;font-size:24px!important;color:#ffffff70!important}.result-close:hover{color:white!important}
.wheel-empty-state strong{font-weight:650}.wheel-media-tray{margin-top:8px}
html[data-view="media"] body{height:auto;min-height:100dvh;overflow:auto;background:#0b1018}
html[data-view="media"] .stage-wrap,html[data-view="media"] .brand,html[data-view="media"] .studio-tabs,html[data-view="media"] #creatorControlsMount,html[data-view="media"] .media-account-link,html[data-view="media"] .media-selection-row,html[data-view="media"] .media-tile-tools input{display:none!important}
html[data-view="media"] .sidebar{position:relative!important;inset:auto!important;transform:none!important;box-shadow:none!important;background:none!important;border:0!important;border-radius:0!important;width:100%!important;height:auto!important;min-height:100dvh;max-height:none!important;padding:24px!important;overflow:visible;backdrop-filter:none}
html[data-view="media"] .sidebar::before{display:none}
html[data-view="media"] [data-studio-panel="options"],html[data-view="media"] [data-studio-panel="style"]{display:none!important}
html[data-view="media"] [data-studio-panel="media"]{display:block!important}
html[data-view="media"] .wheel-media-section{border:0;background:none;padding:0!important;margin:0}
html[data-view="media"] .wheel-media-tray{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:none;overflow:visible;margin:18px 0}
html[data-view="media"] .wheel-media-card{touch-action:auto;cursor:zoom-in}
html[data-view="media"] .media-label{font-size:12px}html[data-view="media"] .media-tile-tools{justify-content:flex-end}
html[data-view="media"] .media-upload-row{max-width:370px}html[data-view="media"] .media-search-label{max-width:420px}
html[data-view="media"] #mediaStorage{max-width:500px}html[data-view="media"] .library-wheel-link{display:inline-flex;align-items:center;text-decoration:none;margin-top:14px}
.media-preview{width:min(800px,90vw);max-height:90dvh;border:1px solid #ffffff20;border-radius:24px;background:#101720;padding:44px 24px 20px;color:white}
.media-preview::backdrop{background:#020409bb;backdrop-filter:blur(10px)}.media-preview>img{display:block;object-fit:contain;max-width:100%;width:100%;max-height:65dvh;margin:auto}.media-preview>p{margin:14px 0 0;text-align:center;overflow-wrap:anywhere;font-size:13px}.media-preview .result-close{position:absolute}
@media(max-width:700px){.result-display{width:min(80vw,64dvh);height:min(80vw,64dvh)}.sidebar .studio-tabs{margin-top:6px}.studio-tabs button{min-height:42px}.image-style-choice{min-height:76px}.result-title{font-size:70px}html[data-view="media"] .sidebar{padding:18px!important}html[data-view="media"] .wheel-media-tray{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* v33.5 — searchable image dropdowns, contained in the scrolling studio. */
.db-select{min-width:0}.db-select[hidden],.db-select__popup[hidden],.db-preview[hidden]{display:none!important}
.db-select .mini-label{margin-bottom:7px;font-size:10px}.db-select__trigger{width:100%;min-height:48px;display:flex;align-items:center;gap:9px;padding:7px 12px 7px 9px;border:1px solid #ffffff15;border-radius:13px;background:#080d15;color:#f2f6ff;text-align:left;cursor:pointer;transition:border-color .18s,background .18s}
.db-select__trigger:hover,.db-select__trigger[aria-expanded=true]{border-color:rgba(var(--accent-rgb),.65);background:rgba(var(--accent-rgb),.04)}
.db-select__trigger:focus-visible,.db-select__search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.db-select__value{display:flex;align-items:center;gap:10px;min-width:0;flex:1;font-size:12px;font-weight:600}.db-select__value>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-select__caret{font-size:19px;line-height:1;color:#8898af;transition:transform .2s}.db-select__trigger[aria-expanded=true] .db-select__caret{transform:rotate(180deg)}
.db-badge{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;color:#6e89a9;background:#ffffff05;border-radius:8px;font-size:18px;overflow:hidden}
.db-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0c121e;padding:2px}.db-badge--flag img{padding:5px 1px;background:#0c121e}
.db-select__popup{position:relative;margin-top:7px;padding:6px;border:1px solid rgba(var(--accent-rgb),.25);background:#0b111c;border-radius:15px;box-shadow:0 8px 22px #0003;min-width:0}
.db-select__search{width:100%;height:38px;padding:0 10px;margin-bottom:5px;border:0;border-radius:8px;background:#ffffff06;color:white;font:inherit;font-size:12px;outline:none}
.db-select__list{max-height:225px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}
.db-select__option{display:flex;align-items:center;gap:9px;padding:7px 8px;min-height:46px;border-radius:9px;cursor:pointer;color:#c1cddd;font-size:12px}
.db-select__option:hover,.db-select__option.is-active{background:rgba(var(--accent-rgb),.09);color:#fff}
.db-select__option[aria-selected=true]{color:var(--accent)}.db-select__copy{min-width:0;flex:1;display:grid;gap:3px}.db-select__copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-select__copy small{font-size:10px;color:#8092ac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-select__check{color:var(--accent);width:16px;flex-shrink:0}
.db-select__empty,.db-select__more{font-size:11px;line-height:1.5;color:#8fa1ba;padding:9px;margin:0}.db-select__more{display:block}
.db-preview{border-top:1px solid #ffffff10;margin-top:4px;padding-top:10px}.db-preview__tools{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8192a9;margin-bottom:7px}
.db-preview__all{font:inherit;border:0;background:none;color:var(--accent);padding:5px 0;cursor:pointer}
.db-preview__list{max-height:250px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff20 transparent}
.db-preview__row{display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;padding:7px 3px;min-height:48px;border-bottom:1px solid #ffffff05;cursor:pointer;font-size:12px!important;color:#dbe5f4!important}
.db-preview__row input{width:16px;height:16px;margin:0;accent-color:var(--accent);flex-shrink:0}.db-preview__row .db-badge{width:34px;height:34px;flex-basis:34px}
#databaseStatus:empty{display:none}#applyDatabase,#loadDatabase{width:100%}
.center-fields{border:0;margin:0;padding:0;min-width:0}.center-section .section-title{display:flex;justify-content:space-between;align-items:center}
.pro-badge{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--accent);background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.24);padding:4px 7px;border-radius:6px}
.center-section.is-locked .center-fields{opacity:.48}.center-section.is-locked .center-fields button,.center-section.is-locked .center-fields label{cursor:not-allowed!important;transform:none!important}
.center-plan-note{color:#91a2ba;font-size:11px;line-height:1.5;margin:12px 0 0}.center-pro-info{width:100%;margin-top:10px;color:var(--accent);border-color:rgba(var(--accent-rgb),.2)!important}
.center-preview img,.hub-logo img{object-fit:contain;padding:7%;background:transparent}

/* Lens optics live above the existing lamps, never across option labels. */
.wheel-optics{position:absolute;inset:-7%;border-radius:50%;z-index:7;pointer-events:none;transition:opacity .4s ease;mix-blend-mode:screen}
.rim-sweep,.rim-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.rim-sweep{background:conic-gradient(from 0deg,transparent 0deg 34deg,rgba(var(--wheel-lamp1-rgb,var(--accent-rgb)),.0) 45deg,rgba(var(--wheel-lamp1-rgb,var(--accent-rgb)),.38) 70deg,rgba(255,255,255,.58) 76deg,transparent 83deg 212deg,rgba(var(--wheel-lamp1-rgb,var(--accent-rgb)),.36) 240deg,rgba(255,255,255,.46) 246deg,transparent 253deg);
 -webkit-mask-image:radial-gradient(circle,transparent 59%,#000 61% 62%,transparent 65%);mask-image:radial-gradient(circle,transparent 59%,#000 61% 62%,transparent 65%);animation:rimOrbit 14s linear infinite;opacity:.66}
.rim-halo{background:radial-gradient(circle,transparent 59%,rgba(var(--wheel-lamp1-rgb,var(--accent-rgb)),.16) 62%,rgba(var(--wheel-lamp1-rgb,var(--accent-rgb)),.06) 65%,transparent 71%);opacity:.65;transition:opacity .5s}
.bulb::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.26),rgba(var(--lamp-rgb),.19) 28%,transparent 70%);opacity:.65;pointer-events:none}
.bulb:nth-child(4n+1)::after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%) rotate(var(--ray-angle,0deg));pointer-events:none;opacity:.48;
 background:linear-gradient(90deg,transparent 6%,rgba(var(--lamp-rgb),.05) 20%,rgba(255,255,255,.9) 49%,white 50%,rgba(255,255,255,.9) 51%,transparent 94%) center/100% 1px no-repeat,linear-gradient(0deg,transparent 6%,rgba(var(--lamp-rgb),.09) 20%,white 49% 51%,transparent 94%) center/1px 100% no-repeat;
 filter:drop-shadow(0 0 3px rgba(var(--lamp-rgb),.8));animation:rimGlint 4.8s var(--ray-delay,0s) ease-in-out infinite}
.wheel-shell.spinning .rim-sweep{animation-duration:3.6s;opacity:1}.wheel-shell.spinning .rim-halo{opacity:1}.wheel-shell.spinning .bulb::before{opacity:.95}.wheel-shell.spinning .bulb:nth-child(4n+1)::after{animation-duration:3.2s}
.wheel-shell.result-open .wheel-optics,.wheel-shell.result-open .bulb::before,.wheel-shell.result-open .bulb::after{opacity:0}
.light-fx-off .wheel-optics,.light-fx-off .bulb::before,.light-fx-off .bulb::after{display:none!important}
.page-hidden .rim-sweep,.page-hidden .bulb,.page-hidden .bulb::after,.page-hidden .stage::after{animation-play-state:paused!important}
@keyframes rimOrbit{to{transform:rotate(360deg)}}
@keyframes rimGlint{0%,100%{opacity:.18;transform:translate(-50%,-50%) rotate(var(--ray-angle,0deg)) scale(.68)}50%{opacity:.74;transform:translate(-50%,-50%) rotate(var(--ray-angle,0deg)) scale(1)}}
@media(max-width:700px){.db-select__search{font-size:16px}.db-select__list{max-height:190px}.db-select__trigger{min-height:48px}.bulb:nth-child(4n+1)::after{width:35px;height:35px}.db-preview__list{max-height:210px}}
@media(prefers-reduced-motion:reduce){.rim-sweep,.bulb,.bulb::after,.stage.spinning::after{animation:none!important}.wheel-optics{display:none}.bulb::before,.bulb::after{display:none!important}.db-select__trigger,.db-select__caret{transition:none}}

/* v34.1 · independent lamp, pointer and celebration palette. */
.effect-colors{display:grid;gap:12px;margin-bottom:14px}.effect-colors>label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#b2bfd1}.effect-colors__inputs{display:flex;gap:8px}.effect-colors input[type=color]{appearance:none;width:36px;height:36px;padding:3px;border:1px solid #ffffff26;border-radius:10px;background:#ffffff08;cursor:pointer}.effect-colors input[type=color]::-webkit-color-swatch-wrapper{padding:0}.effect-colors input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}.effect-colors input[type=color]::-moz-color-swatch{border:0;border-radius:6px}.effect-colors input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#resetEffectColors{width:100%}
.bulb{--lamp-color:var(--wheel-lamp1,var(--accent));--lamp-rgb:var(--wheel-lamp1-rgb,var(--accent-rgb));background:color-mix(in srgb,var(--lamp-color) 75%,white);box-shadow:0 0 6px var(--lamp-color),0 0 18px rgba(var(--lamp-rgb),.8)}
.bulb:nth-child(even){--lamp-color:var(--wheel-lamp2,var(--accent));--lamp-rgb:var(--wheel-lamp2-rgb,var(--accent-rgb))}
.pointer{filter:drop-shadow(0 9px 12px #0008) drop-shadow(0 0 12px rgba(var(--wheel-pointer-rgb,var(--accent-rgb)),.35))}
.pointer::before{background:linear-gradient(160deg,color-mix(in srgb,var(--wheel-pointer,var(--accent)) 25%,white) 0 16%,var(--wheel-pointer,var(--accent)) 32% 67%,color-mix(in srgb,var(--wheel-pointer,var(--accent)) 60%,black) 100%)}
.pointer::after{background:linear-gradient(160deg,color-mix(in srgb,var(--wheel-pointer,var(--accent)) 45%,white),var(--wheel-pointer,var(--accent)))}
.result-title{font-size:clamp(24px,6vw,88px);font-weight:850;letter-spacing:-.035em;line-height:1.1;text-shadow:0 8px 28px #0008}
@media(max-width:700px){.result-title{font-size:clamp(22px,8vw,44px)}}

/* v34.2: minimal Pro affordances. Disabled controls never hide their entitlement. */
#effectColorsSection>summary{display:flex;align-items:center;gap:10px}#effectColorsSection>summary .pro-badge{margin-left:auto}
#effectColorsSection.is-locked #effectColorFields{opacity:.45}#effectColorsSection.is-locked input,#effectColorsSection.is-locked #resetEffectColors{cursor:not-allowed}
.item-color-wrap.is-locked{opacity:.45;cursor:not-allowed}.item-color:disabled,.item-auto-color:disabled{cursor:not-allowed}.item-color-wrap.is-locked:hover{transform:none}
body.media-dragging,body.media-dragging *{cursor:grabbing!important;user-select:none!important}
.media-drag-ghost{position:fixed;z-index:1000;width:64px;height:64px;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 18px #0009);will-change:left,top}
.media-dragging .sidebar{transition:none!important}.media-dragging .wheel-shell{transition:none!important}
@media(max-width:700px){.media-dragging .sidebar{opacity:0!important;pointer-events:none!important;transition:none!important}}
.item .thumb.drag-target{animation:none!important;transform:none!important}

/* v34.3 — one-click elimination undo; never exposes creator outcome settings. */
.history-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.history-actions .btn{width:100%;white-space:normal;line-height:1.35;padding:10px 12px}
.history-actions .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.wheel-history-list li{overflow-wrap:anywhere}
.history-restored{display:inline-block;margin-inline-start:8px;font-size:10px;font-weight:600;color:var(--muted);vertical-align:middle}

/* v34.4: presentation never inherits the desktop editor gutter. */
body.present .wheel-shell,body.present .wheel-empty-state{left:50%!important}
body.present .wheel-shell{transition:transform .35s cubic-bezier(.2,.85,.2,1),filter .25s ease}
body.present .stage{width:100%;height:100dvh}
body.present #studioEdge{display:none!important}
#wheelCanvas,.result-image{image-rendering:auto}

/* Square dimensions remain independent of text/button minimum sizes on phones. */
.wheel-shell .hub{box-sizing:border-box;width:18%;height:18%;min-width:0;min-height:0;padding:clamp(3px,.7vw,7px);display:grid;place-items:center;aspect-ratio:1}
.wheel-shell .hub-logo{min-width:0;min-height:0;border-radius:50%;font-size:clamp(12px,2.6vw,36px)}
.studio-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.studio-tabs button{padding-inline:6px;font-size:12px}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.preset-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:72px;padding:12px;border:1px solid #ffffff20;border-radius:12px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),#101a29);color:var(--text,#fff);text-decoration:none;text-align:left;font:inherit;cursor:pointer;overflow-wrap:anywhere}
.preset-card:hover,.preset-card:focus-visible{border-color:var(--accent);background:rgba(var(--accent-rgb),.16)}.preset-card strong{font-size:12px}.preset-card small{font-size:10px;color:#acbbcc}.preset-card:disabled{opacity:.5;cursor:wait}
.preset-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preset-range[hidden]{display:none}.preset-range label{min-width:0}.preset-range input{width:100%}
#leaguePresets{max-height:400px;overflow:auto}#communityPresetSearch{min-width:0;width:100%}

@media(max-width:700px){.drawer-open{min-width:104px!important;padding:12px 18px!important;gap:9px!important;height:auto!important;min-height:44px!important}.drawer-open span{white-space:nowrap}}

/* One compact, constant result frame for every crest, regardless of file dimensions. */
html:not([data-studio-game]) .result-display{width:min(48vw,360px,45dvh);height:min(48vw,360px,45dvh)}
html:not([data-studio-game]) .result-display .result-image{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 10px 20px #0007)}
@media(max-width:700px){html:not([data-studio-game]) .result-display{width:min(60vw,260px,40dvh);height:min(60vw,260px,40dvh)}}
html:not([data-studio-game]) .result-display .result-image{position:absolute;inset:0;min-width:0;min-height:0}
html:not([data-studio-game]) .winner-open .sidebar{visibility:hidden;pointer-events:none}

/* 49.25-rc2: bounded multi-selects; scrolling never grabs the page or the iframe. */
.db-select__caret{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;font-size:inherit;line-height:0}
.db-select__caret svg{display:block;width:16px;height:16px}
.db-select__chips{display:flex;gap:5px;flex-wrap:wrap;max-height:90px;overflow-y:auto;margin-top:7px;scrollbar-width:thin;touch-action:pan-y}
.db-select__chips[hidden]{display:none}
.db-select__chip{display:flex;align-items:center;gap:4px;max-width:100%;border:1px solid rgba(var(--accent-rgb),.22);border-radius:7px;padding:4px 6px;background:rgba(var(--accent-rgb),.08);color:var(--text);font-size:11px;cursor:pointer}
.db-select__chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.db-select__chip svg{flex:none;width:13px;height:13px}
.db-select__drag{flex:0 0 30px;display:grid;place-items:center;align-self:stretch;min-height:34px;border-radius:7px;cursor:grab;touch-action:none;color:#91a6c0}
.db-select__drag:hover{color:var(--accent);background:rgba(var(--accent-rgb),.1)}.db-select__drag:active{cursor:grabbing}
.db-select__list,.db-preview__list{overscroll-behavior-y:auto;touch-action:pan-y;scrollbar-gutter:stable;overflow-x:hidden}
.db-select__option{touch-action:pan-y}.db-select__option .db-badge img{pointer-events:none}
.db-preview__row--added{cursor:default!important}.db-preview__row--added small{color:var(--accent)}
.db-preview__remove{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #ffffff12;border-radius:8px;background:#ffffff04;color:#9cacbf;cursor:pointer}
.db-preview__remove:hover{background:#ff4d6712;color:#ff8598;border-color:#ff4d6733}
.db-select__chip:focus-visible,.db-preview__remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar{overscroll-behavior-y:contain;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.sidebar select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2395a7be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.wheel-media-card{touch-action:pan-y}
.database-dragging .sidebar{pointer-events:none!important;opacity:.25;transition:none!important}
.database-dragging .wheel-shell{transition:none!important}
span.media-drag-ghost{display:flex;align-items:center;justify-content:center;background:#162234;color:#fff;border-radius:12px;padding:8px;font-size:11px;text-align:center;overflow:hidden}
@media(max-width:700px){.db-select__drag{flex-basis:40px;min-height:40px}.db-select__chip{min-height:32px}.db-select__list{max-height:min(225px,35dvh)}.sidebar{max-height:90dvh;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}}