:root {
  --bg: #f8f6fc;
  --surface: #ffffff;
  --ink: #292235;
  --muted: #6c627b;
  --accent: #8241e6;
  --accent-deep: #7131cc;
  --soft: #eee5fc;
  --line: #e9e4ef;
  --dock: #ffffff;
  --quiet-icon: #81768f;
  --slot-surface: #eee9f6;
  --task-surface: #ffffff;
  --task-outline: #e4daef;
  --channel-surface: #f1e9fc;
  --channel-outline: #e5d6f7;
  --reward-surface: #fff0c9;
  --reward-ink: #755014;
  --success-surface: #d8fc8b;
  --success-ink: #324713;
  --particle-ink: #987db8;
  --hero-spark: #b47a19;
}

body.dark {
  --bg: #1b1428;
  --surface: #282033;
  --ink: #f8f4fc;
  --muted: #b6acbf;
  --accent: #b58af6;
  --accent-deep: #c29bff;
  --soft: #38264e;
  --line: #3a3046;
  --dock: #2b213b;
  --quiet-icon: #b2a5c1;
  --slot-surface: #30253f;
  --task-surface: #2c223a;
  --task-outline: #453452;
  --channel-surface: #3a2a50;
  --channel-outline: #503966;
  --reward-surface: #49371f;
  --reward-ink: #f9d783;
  --success-surface: #d8fc8b;
  --success-ink: #324713;
  --particle-ink: #a282d3;
  --hero-spark: #edbb54;
}

.theme-transition, .theme-transition .app, .theme-transition .sheet, .theme-transition .dock, .theme-transition .inventory-entry, .theme-transition .inventory-slot {
  transition: background-color .32s ease, color .25s ease, border-color .25s ease;
}

.icon { stroke-width: 1.9; }
.racco-eyes { stroke: var(--dock); stroke-width: 1.65; }
.racco-smile { stroke-width: 1.3; fill: none; }
.brand-mark { color: #665b70; stroke-width: 1.7; }
.brand-mark .racco-face { fill: #e9e0d6; fill-opacity: 1; }
.brand-mark .racco-eyes { stroke: #fffaf0; }
.icon-fill { fill-opacity: .12; }
.icon-button { width: 44px; height: 44px; color: var(--quiet-icon); border-radius: 14px; }
.icon-button .icon, .help .icon { width: 27px; height: 27px; }
.icon-button:active { background: var(--line); }
.icon-button .icon-fill { fill-opacity: 0; }
.header { padding-left: 20px; padding-right: 14px; }
.wordmark { font-size: 18px; }
.primary { background: linear-gradient(180deg,#8744e6,#7330ce); }
.dark .primary { background: linear-gradient(180deg,#8d49e9,#7633d0); }
.text-button { font-size: 13px; min-height: 44px; }
.legal-links button { font-size: 11px; min-height: 44px; }
.scene-profile, .scene-inventory { background: var(--bg); }
.scene-profile .scenery { opacity: .35; mask-image: linear-gradient(transparent 65%,#000 85%); }
.scene-inventory .scenery { opacity: .5; }
.scene-profile .content { padding: 10px 24px 8px; }
.profile-identity { display: flex; align-items: center; gap: 17px; padding: 18px 0 28px; }
.profile-identity .avatar { width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; background: transparent; }
.profile-identity .sticker { width: 100px; height: 100px; margin: -5px -4px; }
.profile-identity h1 { font-size: 28px; letter-spacing: -.6px; }
.profile-identity p { color: var(--muted); margin-top: 5px; font-size: 14px; }
.inventory-entry { min-height: 72px; padding: 15px 18px; border: 0; border-radius: 20px; background: var(--soft); box-shadow: none; color: var(--ink); gap: 14px; }
.inventory-entry strong { font-size: 17px; font-weight: 750; }
.entry-icon { width: 32px; height: 36px; background: none; border-radius: 0; color: var(--accent-deep); }
.entry-icon .icon { width: 30px; height: 30px; }
.inventory-entry > .icon { width: 15px; height: 15px; color: var(--quiet-icon); }
.inventory-entry:active { transform: scale(.985); box-shadow: none; }
.scene-profile .profile-section { margin-top: 29px; }
.scene-profile .profile-section h2 { margin: 0 0 9px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .15px; }
.settings-list { border: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.settings-list button { min-height: 70px; gap: 14px; font-size: 15px; border-radius: 0; padding: 10px 0; }
.settings-list button + button { border-top: 1px solid var(--line); }
.app .settings-list button:nth-child(n) > .icon:first-child { box-sizing: border-box; width: 25px; height: 25px; padding: 0; background: transparent; border-radius: 0; color: var(--quiet-icon); }
.settings-list button > .icon:last-child { width: 13px; height: 13px; color: var(--quiet-icon); }
.settings-list small { font-size: 12px; color: var(--muted); }
.theme-glyph { display: inline-grid; width: 25px; height: 25px; flex-shrink: 0; position: relative; color: var(--quiet-icon); perspective: 120px; }
.theme-glyph > .icon { position: absolute; inset: 0; width: 25px; height: 25px; transition: transform .5s cubic-bezier(.3,.8,.2,1), opacity .3s ease; }
.theme-glyph .icon-sun { transform: rotateY(0) rotate(-10deg); opacity: 1; }
.theme-glyph .icon-moon { transform: rotateY(-100deg) rotate(-40deg); opacity: 0; }
.theme-glyph.is-night .icon-sun { transform: rotateY(100deg) rotate(40deg); opacity: 0; }
.theme-glyph.is-night .icon-moon { transform: rotateY(0) rotate(0); opacity: 1; }
.toggle { width: 46px; height: 28px; flex-shrink: 0; border-radius: 20px; background: #cfc7da; transition: background .25s; }
.dark .toggle { background: #5b5068; }
.toggle:before { width: 22px; height: 22px; top: 3px; left: 3px; background: #fff; box-shadow: 0 1px 3px #21122b26; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.toggle.on, .dark .toggle.on { background: #8241e6; }
.toggle.on:before { transform: translateX(18px); }
.dock { border: 0; box-shadow: 0 4px 24px #2a16450c; }
.dark .dock { box-shadow: 0 4px 24px #00000018; }
.dock-divider { height: 20px; }
.dock button { color: var(--quiet-icon); }
.dock button .icon { width: 27px; height: 27px; }
.dock button .icon-profile { width: 29px; height: 29px; stroke-width: 1.45; }
.dock button.active:before { display: none; }
.dock .active .icon-fill { fill-opacity: .22; }
.dock .active .racco-eye { fill: #fff9e8; }

.inventory-grid .inventory-slot { border: 0; box-shadow: none; border-radius: 20px; background: var(--slot-surface); color: var(--muted); font-size: 12px; }
.inventory-grid .occupied { background: linear-gradient(145deg,#ffe694,#ffc84e); color: #604020; box-shadow: 0 3px 0 #c78c2733; }
.inventory-art > .icon-inventory { width: 69px; height: 69px; }
.inventory-title h1 { font-size: 27px; }
.task-card { border: 0; box-shadow: none; }
.level-row { border: 0; box-shadow: none; background: transparent; padding-left: 4px; padding-right: 4px; }
.soft-icon { background: transparent; color: var(--muted); width: 28px; }
.level-value { background: var(--soft); color: var(--accent-deep); }
.reward { background: var(--soft); color: var(--accent-deep); }
.secondary.channel-button { background: var(--soft); color: var(--accent-deep); box-shadow: none; }
.channel-row p { font-size: 12px; }
.level-row p { font-size: 11px; }
.scrim { background: #17112257; backdrop-filter: blur(2px); }
.sheet { border: 0; border-radius: 28px 28px 0 0; padding: 11px 24px 24px; box-shadow: 0 -8px 36px #100b1b18; }
.sheet-handle { width: 32px; height: 4px; background: var(--quiet-icon); opacity: .3; }
.sheet h2 { font-size: 21px; margin: 21px 42px 19px 0; letter-spacing: -.35px; }
.close-sheet { top: 21px; right: 12px; }
.close-sheet .icon { width: 22px; height: 22px; }
.choice-list { display: grid; gap: 3px; border: 0; margin-top: 0; }
.choice-list button { min-height: 62px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 650; gap: 14px; }
.choice-list button + button { border: 0; }
.choice-list button.chosen { border: 0; box-shadow: none; background: var(--soft); color: var(--ink); }
.flag { width: 32px; height: 23px; border-radius: 5px; box-shadow: 0 0 0 1px #0000000a; }
.selection-marker, .selection-marker.selected { width: 26px; height: 26px; background: none; border: 0; color: var(--accent-deep); }
.selection-marker .icon { width: 23px; height: 23px; stroke-width: 2.6; }
.appearance-controls { padding-top: 1px; }
.setting-control { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 0; background: transparent; color: var(--ink); text-align: left; }
.setting-control + .setting-control { border-top: 1px solid var(--line); }
.setting-control > .icon { width: 25px; height: 25px; color: var(--quiet-icon); }
.setting-control > span:not(.theme-glyph) { flex: 1; min-width: 0; }
.setting-control strong { display: block; font-size: 15px; font-weight: 650; }
.setting-control small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.setting-control:disabled { opacity: .46; }
.night-control:not(:disabled) .theme-glyph { color: #bb8228; }
.night-control:not(:disabled) .theme-glyph.is-night { color: var(--accent-deep); }
.sheet-appearance h2 { margin-bottom: 12px; }
.sheet-privacy h2 { font-size: 20px; }
.wheel-peek { position: absolute; width: 172px; height: 134px; left: -5px; top: -95px; z-index: 0; }
.wheel { isolation: isolate; }
.wheel-grips { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.grip-fur { fill: url(#paw-fur); stroke: #38303f; stroke-width: 1.3; }
.grip-toes { fill: none; stroke: #403648; stroke-width: 1.2; stroke-linecap: round; }
.paw-contact { fill: #261935; opacity: .23; filter: blur(2px); }
.wheel-shadow { z-index: -1; }
.rim { z-index: 1; }
.hub { z-index: 2; }
.game-stage { min-height: 390px; }
.wheel { margin-top: 64px; }
.gift-detail .bottom-actions { padding-bottom: 12px; }
.claim-hint { margin-top: 15px; font-size: 12px; color: var(--muted); text-align: center; }
.sheet-claim-confirm { text-align: center; padding-top: 11px; }
.sheet-claim-confirm h2 { margin: 6px 0 10px; font-size: 24px; }
.claim-preview { display: grid; place-items: center; height: 130px; margin-top: 12px; }
.claim-bear { width: 130px; height: 130px; }
.claim-copy { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 270px; margin: auto; }
.claim-recipient { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); margin: 15px auto 25px; font-size: 14px; }
.claim-recipient .icon { color: var(--accent-deep); }
.sheet-claim-confirm .text-button { width: 100%; margin-top: 7px; }
.received-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-deep); margin-top: 15px; }
.received-label .icon { width: 19px; height: 19px; }
.inventory-slot { position: relative; }
.slot-received { position: absolute; right: 6px; top: 6px; color: #604020; display: grid; place-items: center; }
.slot-received .icon { width: 18px; height: 18px; }
.sending-dots { display: flex; gap: 7px; margin-top: 28px; }
.sending-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); animation: sending-bounce 1.2s ease infinite; }
.sending-dots i:nth-child(2) { animation-delay: .12s; }
.sending-dots i:nth-child(3) { animation-delay: .24s; }
.legal-copy h3 { font-size: 15px; }
.legal-copy p { font-size: 13px; }
.result-hero:before, .win-hero:before { width: 92%; height: 84%; left: 4%; top: 14%; border-radius: 0; transform: none; opacity: 1; background: radial-gradient(ellipse at 50% 55%,#9863d921 0%,#9863d90b 43%,transparent 73%); filter: blur(22px); }
.win-hero:before, .claim-result .result-hero:before { background: radial-gradient(ellipse at 50% 55%,#d1a34f24 0%,#d1a34f09 43%,transparent 73%); }
.dark .result-hero:before { background: radial-gradient(ellipse at 50% 55%,#9062cb1c 0%,#9062cb08 43%,transparent 73%); }
.dark .win-hero:before, .dark .claim-result .result-hero:before { background: radial-gradient(ellipse at 50% 55%,#c39a4920 0%,#c39a4908 43%,transparent 73%); }
.scene-welcome .welcome-halo { border-radius: 0; transform: none; background: radial-gradient(ellipse,#ffffff25,transparent 70%); filter: blur(22px); }

@keyframes ear-greet {
  30% { transform: scaleX(.9) rotate(-5deg); }
  65% { transform: scaleX(1.06) rotate(3deg); }
}

@keyframes sending-bounce {
  0%,70%,100% { transform: translateY(0); opacity: .4; }
  35% { transform: translateY(-5px); opacity: 1; }
}

@media (max-height: 740px) {
  .profile-identity { padding: 10px 0 22px; }
  .profile-identity .avatar { width: 78px; height: 78px; }
  .profile-identity .sticker { width: 86px; height: 86px; }
  .settings-list button { min-height: 64px; }
  .scene-profile .profile-section { margin-top: 25px; }
  .game-stage { min-height: 335px; }
  .wheel-peek { width: 151px; height: 118px; left: -4px; top: -83px; }
  .wheel { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}