/* Theme control: the button shows the icon of the current scheme (system, light, dark). */
.theme-icon{display:none}
html:not([data-theme-preference]) .theme-icon-system,
html[data-theme-preference=system] .theme-icon-system,
html[data-theme-preference=light] .theme-icon-light,
html[data-theme-preference=dark] .theme-icon-dark{display:contents}
.drawer-theme-control{padding:7px 30px 10px}
.drawer-theme-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 15px;text-align:left;font-family:Golos,Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--green);background:var(--soft);border:1px solid var(--line);border-radius:2px;cursor:pointer}
.drawer-theme-toggle .ui-icon{width:18px;height:18px;flex-shrink:0}
.drawer-theme-toggle>span[data-theme-label]{min-width:0}
.theme-transitioning body,.theme-transitioning .topbar,.theme-transitioning .bottom-nav,.theme-transitioning .panel,.theme-transitioning .game-card,.theme-transitioning .story-card,.theme-transitioning input,.theme-transitioning textarea,.theme-transitioning select{transition:background-color .24s ease,border-color .24s ease,color .24s ease}
@media(prefers-reduced-motion:reduce){
  .theme-transitioning body,.theme-transitioning .topbar,.theme-transitioning .bottom-nav,.theme-transitioning .panel,.theme-transitioning .game-card,.theme-transitioning .story-card,.theme-transitioning input,.theme-transitioning textarea,.theme-transitioning select{transition:none!important}
}