/* Theme controls and the reward presentation are shared by both appearances. */
.header-actions{gap:9px}
.theme-toggle{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid #36373e;border-radius:9px;background:#202125;color:#c6bd8d;transition:background .18s,border-color .18s}
.theme-toggle>svg{width:18px;height:18px}
.theme-toggle:hover{background:#2b2b30;border-color:#68604a;color:#fcd711}
.theme-preference{padding:19px 0 8px}
.theme-preference>strong{font-size:13px;font-weight:600}
.theme-preference>p{font-size:11px;color:#7a8290;margin:7px 0 13px}
.theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-choice{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid #363943;border-radius:9px;padding:13px 12px;text-align:left;background:#1d1e23;color:#8d929e}
.theme-choice>svg{width:19px;height:19px;flex-shrink:0}
.theme-choice>span{display:flex;flex-direction:column;gap:5px}
.theme-choice strong{font-size:12px;font-weight:600}
.theme-choice small{font-size:10px;font-weight:400;line-height:1.4;color:#7f8795}
.theme-choice>svg:last-child{margin-left:auto;width:15px;height:15px;opacity:0}
.theme-choice[aria-pressed="true"]{border-color:#99842b;background:#2a281e;color:#f3da74}
.theme-choice[aria-pressed="true"]>svg:last-child{opacity:1}
.theme-choice:hover{border-color:#7d7659}
.dial-light-ring{display:none}

.circle-outcome.win{display:block;position:relative;padding:0;color:#fff0b0}
.circle-outcome.win .outcome-title{position:absolute;top:7%;left:0;width:100%;font:800 19px/1.25 Tektur,sans-serif;letter-spacing:1.1px;color:#ffed9f;text-shadow:0 2px 14px #d0b43a30;animation:reward-title-in .4s ease-out both}
.reward-art{position:absolute;left:50%;top:50%;width:57%;height:57%;transform:translate(-50%,-50%);display:grid;place-items:center;isolation:isolate}
.reward-art:before{content:'';position:absolute;inset:-12%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#f5d66c17,transparent 70%)}
.reward-art>.art{--size:109px;width:100%;height:100%;margin:0;object-fit:contain;filter:drop-shadow(0 5px 8px #0003);animation:reward-item-in .65s cubic-bezier(.2,.7,.2,1) both}
.reward-check{position:absolute;right:-2%;bottom:6%;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#b9d788;color:#23351c;border:3px solid #1a1a1c}
.reward-check>svg{width:13px;height:13px;stroke-width:2.8}
.circle-outcome.win>.reward-name{position:absolute;left:5%;bottom:7%;width:90%;max-width:none;font:600 12px/1.4 'Exo 2',sans-serif;color:#e3ddc7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes reward-title-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes reward-item-in{0%{opacity:0;transform:scale(.55) rotate(-10deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Block Blue: the light direction selected from concept 03. */
html[data-theme="light"]{color-scheme:light;--bg:#edf1f7;--surface:#fff;--surface-2:#f2f5fb;--border:#dbe3ef;--muted:#73829a;--text:#273c5c;--yellow:#8db6ed;--panel:#fff;--panel-head:#f3f6fc;--light-accent:#3d6fae;--light-subtle:#e7eef9}
html[data-theme="light"] body{background:#edf1f7;color:var(--text)}
html[data-theme="light"] :is(.topbar,.live-rail,.chosen-card,.inventory-panel,.ui-panel,.account-stat,.inventory-summary,.stats-strip,.history-panel,dialog){background:#fff;border-color:var(--border)}
html[data-theme="light"] .topbar{border-bottom:1px solid #dce4ef}
html[data-theme="light"] :is(.chosen-card,.ui-panel,.account-stat,.history-panel,.inventory-summary){box-shadow:0 3px 15px #37537a05}
html[data-theme="light"] .chosen-card.has-item:hover{box-shadow:0 0 0 1px #acc6e8,0 5px 16px #37537a09}
html[data-theme="light"] :is(.panel-top,.inventory-switch,.profile-tabs,.history-header,.history-table th){background:#f3f6fc;border-color:var(--border)}
html[data-theme="light"] :is(.brand,.game-stat select,.selected-label strong,.item-name,.panel-title h2,.game-heading h1,.account-stat>strong,.test-inventory-value strong,.test-panel-heading h2,.profile-name-line h2,.history-items .item-label,.history-header h2,.profile-empty h3,.screen-heading h1){color:var(--text)}
html[data-theme="light"] .game-stat option{background:#fff;color:var(--text)}
html[data-theme="light"] :is(.stat-label,.nav-link,.social-button,.section-kicker,.chosen-instruction,.selected-label small,.chance-label,.catalog-strip,.panel-sort,.range-label,.item-meta,.quantity,.reset-link,.panel-bottom,.screen-heading p,.profile-id,.profile-since,.account-stat>span,.account-stat>small,.account-stat>strong small,.profile-tabs button,.profile-empty p,.recent-description>span,.account-details>div>span,.test-inventory-value>span,.test-inventory-panel>p,.test-panel-note,.profile-shortcuts button,.field-label,.field-hint,.preference-row small,.preference-icon,.theme-preference>p,.history-header p,.stats-strip .stat>span,.inventory-summary>div>span,.inventory-summary strong small,.history-empty p,footer,footer p){color:#65758e}
html[data-theme="light"] :is(.nav-link.active,.inventory-switch button.active,.catalog-strip .all-items,.profile-tabs button.active,.text-action,.block-heading .text-action,.reset-link:hover,.change-item:hover,.mobile-nav button.active,.mobile-nav button[data-view="upgrade"].active){color:var(--light-accent)}
html[data-theme="light"] :is(.nav-link.active,.profile-tabs button.active){border-color:#80aae2}
html[data-theme="light"] :is(.text-action:hover,.profile-shortcuts button:hover){color:#294f83}
html[data-theme="light"] :is(.social-button,.workspace-tools button,.theme-toggle){background:#f2f5fb;color:#7385a1;border-color:#d6e0ee}
html[data-theme="light"] :is(.social-button:hover,.workspace-tools button:hover,.theme-toggle:hover){background:#e7eef9;color:#3d6fae;border-color:#9bbce6}
html[data-theme="light"] .workspace-tools button.on{color:#3869a7;background:#e6eef9}
html[data-theme="light"] .catalog-strip button{color:#5b7192}
html[data-theme="light"] :is(.search-box input,.value-input,.name-form-row input,.sort-select){background:#f8faff;border-color:#dbe4f0;color:var(--text)}
html[data-theme="light"] :is(.search-box input,.value-input,.name-form-row input)::placeholder{color:#8b99ae}
html[data-theme="light"] .search-box>span{color:#91a0b6}
html[data-theme="light"] .item-card{background:linear-gradient(145deg,color-mix(in srgb,var(--rarity) 6%,#f7f9fd),#f7f9fd 70%);border-color:#dfe6f1;color:var(--text)}
html[data-theme="light"] .item-card:hover:not(:disabled){background:#eff4fd;border-color:#9ebce5}
html[data-theme="light"] .item-card.selected{background:#ecf3fe;border-color:#8bafe1;box-shadow:inset 0 0 0 1px #8bafe1}
html[data-theme="light"] .item-card .item-price{color:#5e7495}
html[data-theme="light"] .item-card.selected:after{background:#79a5df;color:#fff}
html[data-theme="light"] :is(.upgrade-button,.primary-button,.yellow-action,.sign-in:not(.account-button),.roblox-login){background:#8db6ed;border-color:#8db6ed;color:#203d64;box-shadow:0 3px 0 #7da6dd30}
html[data-theme="light"] :is(.upgrade-button:hover:not(:disabled),.primary-button:hover,.yellow-action:hover){background:#a4c6f3;border-color:#8db6ed}
html[data-theme="light"] .is-rolling .upgrade-button{background:#b4ccec;box-shadow:none}
html[data-theme="light"] :is(.outline-action,.theme-choice){background:#f8faff;border-color:#d8e2ef;color:#58718f}
html[data-theme="light"] :is(.outline-action:hover,.theme-choice:hover){background:#edf3fc;border-color:#a4bfe3}
html[data-theme="light"] .theme-choice[aria-pressed="true"]{background:#eaf2fe;border-color:#8db1e2;color:#315f9d}
html[data-theme="light"] .theme-choice small{color:#7d8da4}
html[data-theme="light"] .sign-in.account-button{color:var(--text);background:transparent;box-shadow:none}
html[data-theme="light"] :is(.account-avatar,.profile-avatar){background:#eaf1fc;border-color:#c2d4ed;color:#4b77af}
html[data-theme="light"] .test-badge{background:#eaf1fc;color:#4a76ad}
html[data-theme="light"] :is(.account-details,.recent-row,.test-panel-note,.profile-shortcuts button,.preference-row,.history-table td,.panel-bottom){border-color:#e0e7f1}
html[data-theme="light"] .preference-switch{background:#e5ebf4;border-color:#cad6e6}
html[data-theme="light"] .preference-switch:after{background:#9aaec9}
html[data-theme="light"] .preference-switch:checked{background:#a8c5ee;border-color:#8aafdf}
html[data-theme="light"] .preference-switch:checked:after{background:#fff}
html[data-theme="light"] .status-pill{background:#e8f3ed;color:#4f856c}
html[data-theme="light"] .status-pill.loss{background:#f7eaf0;color:#a56a7f}
html[data-theme="light"] .experience-banner{background:#e6edf8;border-color:#d4dfef;color:#426a9d}
html[data-theme="light"] .experience-banner img{opacity:.35;filter:saturate(.2)}
html[data-theme="light"] .rail-item{background:linear-gradient(90deg,color-mix(in srgb,var(--rarity) 15%,#eef3fb),#f3f6fc 80%);border-color:var(--rarity)}
html[data-theme="light"] .rail-item.featured{background:linear-gradient(115deg,#e8effa,#d0e1f7 80%);border-color:#86afe4}
html[data-theme="light"] .rail-title{color:#4c658a}
html[data-theme="light"] .rail-subtitle{color:#8294ad}
html[data-theme="light"] :is(.brand>img,.game-heading img,.footer-brand img,.panel-title>img,.mode-button>img,.header-stat strong>img,.mobile-nav button[data-view="upgrade"]>img){filter:brightness(0) saturate(100%) invert(51%) sepia(32%) saturate(802%) hue-rotate(176deg) brightness(94%) contrast(91%)}
html[data-theme="light"] .mode-button.active{color:#4c77b0;background:#e5eefb}
html[data-theme="light"] .mode-button.active .roblox-symbol:after{background:#e5eefb}

/* Swap the ring, keeping the same pointer, chance and spin mechanics. */
html[data-theme="light"] :is(.dial-outline,.dial-svg,.dial-black,.dial-inner-border){display:none}
html[data-theme="light"] .dial-border{inset:10%;border:1px solid #e1e8f3;background:#f7f9fd;z-index:0}
html[data-theme="light"] .dial-light-ring{display:block;position:absolute;width:92.53%;height:92.53%;left:3.735%;top:3.735%;z-index:1;overflow:visible}
html[data-theme="light"] .light-ring-block{fill:#dfe8f6}
html[data-theme="light"] .light-ring-block.active{fill:#82ade9}
html[data-theme="light"] .light-inner-line{fill:none;stroke:#e3eaf4;stroke-width:.8}
html[data-theme="light"] .dial-content{background:#fff;box-shadow:0 0 0 1px #e4ebf5;color:var(--text)}
html[data-theme="light"] .dial-logo{filter:brightness(0) saturate(100%) invert(51%) sepia(32%) saturate(802%) hue-rotate(176deg) brightness(94%) contrast(91%)}
html[data-theme="light"] .chance-value{color:#2c456b;font-weight:700}
html[data-theme="light"] .dial-pointer img{display:none}
html[data-theme="light"] .dial-pointer:before{display:block;top:12px;left:calc(50% - 8px);width:16px;height:16px;border-radius:6px;background:#628fcb;border:3px solid #edf1f7;box-shadow:0 1px 6px #5375a22a}
html[data-theme="light"] .is-rolling .dial-content{box-shadow:0 0 0 1px #d8e4f5,0 0 25px #7caae619}
html[data-theme="light"] .dial.is-win .light-ring-block{fill:#82b59c}
html[data-theme="light"] .dial.is-loss .light-ring-block{fill:#d29aab}
html[data-theme="light"] .circle-outcome.win .outcome-title{color:#3c6b9c;text-shadow:0 2px 10px #90b9e820}
html[data-theme="light"] .circle-outcome.win>.reward-name{color:#627b9d}
html[data-theme="light"] .reward-art:before{background:radial-gradient(circle,#bad5f62e,transparent 70%)}
html[data-theme="light"] .reward-art>.art{filter:drop-shadow(0 4px 6px #5276a31b)}
html[data-theme="light"] .reward-check{background:#9ecbb2;color:#27533d;border-color:#fff}
html[data-theme="light"] .circle-outcome.loss{color:#b97f92}
html[data-theme="light"] .circle-outcome.loss>span{color:#947f92}
html[data-theme="light"] .circle-outcome.loss .outcome-mark{filter:none}

html[data-theme="light"] dialog{box-shadow:0 15px 80px #263c5c26}
html[data-theme="light"] dialog::backdrop{background:#34476166}
html[data-theme="light"] dialog :is(p,ol){color:#687b94}
html[data-theme="light"] .modal-close{color:#8191a7}
html[data-theme="light"] .modal-close:hover{color:#365c8c}
html[data-theme="light"] .game-grid .game-button{background:#f5f8fe;border-color:#dbe4f1;color:#607694}
html[data-theme="light"] .game-grid .game-button.active{background:#e7f0fc;border-color:#91b4e4;color:#3f6ca9}
html[data-theme="light"] .game-grid .game-button:hover{border-color:#8cacd9}
html[data-theme="light"] .auth-art-panel{background:#cbdff8}
html[data-theme="light"] .auth-orbit{border-color:#b8d0f0}
html[data-theme="light"] .auth-orbit:before{border-color:#a6c1e6}
html[data-theme="light"] :is(.auth-tag,.auth-pack-count,.auth-experience){color:#3b618f}
html[data-theme="light"] .auth-form-panel{background:#fff;border-color:#dce5f2}
html[data-theme="light"] .auth-benefits>div{color:#65758e}
html[data-theme="light"] .auth-benefits svg{color:#638ec6}
html[data-theme="light"] .auth-dialog .modal-close{background:#d7e7fb;color:#527baa}
html[data-theme="light"] .guest-inventory h3{color:var(--text)}
html[data-theme="light"] .guest-inventory p{color:#7c8da5}
html[data-theme="light"] .toast{background:#f8fbff;border-color:#b6cce9;color:#4e6f98;box-shadow:0 10px 35px #314a701a}
html[data-theme="light"] .support-button{background:#fff;border-color:#8db6ed;color:#6a96ce}
html[data-theme="light"] .support-button:before{background:#8db6ed}
html[data-theme="light"] .mobile-nav{background:#fffffff5;border-color:#dce5f1;box-shadow:0 -1px 0 #dce5f1}
html[data-theme="light"] .mobile-nav button{color:#8998ad}
html[data-theme="light"] .mobile-nav .mobile-login{background:#8db6ed;color:#26436c}
html[data-theme="light"] .mobile-login .roblox-symbol:after{background:#8db6ed}

@media(max-width:900px){
  .header-actions{gap:8px}
  .theme-toggle{width:30px;height:30px;border-radius:7px}
  .theme-toggle>svg{width:17px;height:17px}
  .circle-outcome.win .outcome-title{font-size:15px;letter-spacing:.7px;top:7%}
  .circle-outcome.win>.reward-name{font-size:10px;bottom:7%}
  .reward-art>.art{--size:88px}
  .reward-check{width:19px;height:19px;border-width:2px}
  .reward-check>svg{width:12px;height:12px}
  .theme-choice{padding:12px 10px;gap:8px}
  .theme-choice small{font-size:9px}
}
@media(max-width:350px){.circle-outcome.win .outcome-title{font-size:13px}.circle-outcome.win>.reward-name{font-size:9px}.theme-choices{gap:7px}.theme-choice{gap:6px;padding:11px 8px}.theme-choice>svg{width:16px}.theme-choice>svg:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.outcome-title,.reward-art>.art{animation:none!important}}