/* Wheel presentation for the shared For-My Stream theme contract v4 */
:root {
  --wheel-panel: color-mix(in srgb,var(--fms-page-bg-deep) 90%,transparent);
  --wheel-line: color-mix(in srgb,var(--fms-line) 85%,transparent);
  --glass-bg: var(--wheel-panel);
  --glass-bg-light: color-mix(in srgb,var(--fms-page-text) 9%,transparent);
  --glass-bg-hover: color-mix(in srgb,var(--fms-page-text) 14%,transparent);
  --glass-border: var(--wheel-line);
  --glass-border-accent: color-mix(in srgb,var(--fms-focus) 62%,transparent);
  --accent: var(--fms-accent-primary);
  --accent-dim: color-mix(in srgb,var(--fms-accent-primary) 58%,transparent);
  --accent-glow: color-mix(in srgb,var(--fms-accent-primary) 30%,transparent);
  --text-primary: var(--fms-page-text);
  --text-secondary: var(--fms-page-muted);
  --text-muted: var(--fms-page-faint);
  --divider: var(--fms-line);
  --wheel-pointer: var(--fms-focus);
}
html,body{width:100%;height:100%;overflow:hidden}
body{
  color:var(--fms-page-text);
  background-color:var(--fms-page-bg);
  background-image:var(--fms-page-art);
  background-size:auto;
  background-position:center;
  background-repeat:repeat;
  font-family:var(--fms-font-body);
  transition:color var(--fms-motion-standard),background-color var(--fms-motion-standard);
}
body::before{
  z-index:0;
  background:var(--fms-texture-image) repeat;
  opacity:var(--fms-texture-opacity);
  mix-blend-mode:soft-light;
}
button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid var(--fms-focus);outline-offset:3px}
.top-bar{
  height:64px;
  padding:0 22px;
  color:var(--fms-page-text);
  border-bottom:1px solid var(--fms-line);
  background:color-mix(in srgb,var(--fms-page-bg-deep) 90%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.25);
}
.top-bar-btn,.twitch-connect .twitch-username-input{
  color:var(--fms-page-muted);
  border-color:var(--fms-line);
  border-radius:var(--fms-button-radius);
  background:color-mix(in srgb,var(--fms-page-bg-deep) 72%,transparent);
  font-family:var(--fms-font-interface);
}
.top-bar-btn:hover,.top-bar-btn[aria-expanded=true]{
  color:var(--fms-page-text);
  border-color:var(--fms-accent-cool);
  background:color-mix(in srgb,var(--fms-accent-cool) 12%,var(--fms-page-bg-deep));
}
.top-bar-title-text,.top-bar-title-stream,#spin-btn,.theme-dialog h2,.theme-option strong,.audio-panel-heading strong{
  font-family:var(--fms-font-ui-heading,var(--fms-font-display));
  letter-spacing:var(--fms-heading-spacing);
  text-transform:var(--fms-heading-transform);
}
.top-bar-title-text{color:var(--fms-page-text)}
.top-bar-title-stream,.top-bar-wheel-icon{color:var(--fms-accent-primary)}
.top-bar-title-for{color:var(--fms-page-faint)}
.twitch-connect .connect-btn,.add-item-btn{
  color:var(--fms-button-text);
  border:1px solid var(--fms-button-border);
  border-radius:var(--fms-button-radius);
  background:var(--fms-button-bg);
  box-shadow:var(--fms-button-shadow);
  font-family:var(--fms-font-interface);
}
.item-manager,.suggestion-box{
  top:92px;
  border:1px solid var(--wheel-line);
  border-radius:var(--fms-surface-radius);
  background:var(--wheel-panel);
  box-shadow:0 18px 48px rgba(0,0,0,.36);
}
.item-manager{bottom:36px}
.item-manager::before,.suggestion-box::before{
  position:absolute;z-index:-1;inset:7px;
  border:1px solid color-mix(in srgb,var(--fms-accent-primary) 23%,transparent);
  border-radius:inherit;pointer-events:none;content:"";
}
.item-list-header,.suggestion-instructions,.item-name,.suggestion-name,.item-chances-input{font-family:var(--fms-font-interface)}
.banner{isolation:isolate;padding-top:82px}
.banner::before{
  position:absolute;z-index:0;top:50%;left:50%;
  width:min(49vw,760px);aspect-ratio:1;
  border:2px solid color-mix(in srgb,var(--fms-accent-primary) 24%,transparent);
  border-radius:50%;
  background:radial-gradient(circle,transparent 0 39%,color-mix(in srgb,var(--fms-accent-primary) 24%,transparent) 39.4% 40%,transparent 40.4% 58%,color-mix(in srgb,var(--fms-accent-primary) 24%,transparent) 58.4% 59%,transparent 59.4%),radial-gradient(circle,color-mix(in srgb,var(--fms-accent-cool) 18%,transparent),transparent 68%);
  box-shadow:0 0 100px color-mix(in srgb,var(--fms-accent-cool) 18%,transparent);
  content:"";pointer-events:none;transform:translate(-50%,-50%);
}
.banner::after{
  position:absolute;z-index:0;right:25%;bottom:16%;left:25%;height:18%;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.46),transparent 68%);
  content:"";pointer-events:none;filter:blur(12px);
}
.banner .slider .item,#drum-wheel-drum .drum-item{
  isolation:isolate;
  border-color:color-mix(in srgb,var(--fms-page-text) 62%,transparent);
  border-radius:var(--fms-surface-radius);
  box-shadow:0 13px 28px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.11);
  font-family:var(--fms-font-display);
}
.banner .slider .item::after,#drum-wheel-drum .drum-item::after{
  position:absolute;z-index:1;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 32%,rgba(0,0,0,.18));
  content:"";pointer-events:none;
}
.banner .slider .item .item-label,#drum-wheel-drum .drum-item .drum-item-label{z-index:2;font-family:var(--fms-font-display)}
#carousel-pointer-bottom{border-bottom-color:var(--wheel-pointer);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--wheel-pointer) 70%,transparent))}
#drum-wheel-pointer-left{border-left-color:var(--wheel-pointer)}
#drum-wheel-pointer-right{border-right-color:var(--wheel-pointer)}
#drum-wheel-pointer-left,#drum-wheel-pointer-right{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--wheel-pointer) 70%,transparent))}
#spin-btn{
  min-width:260px;min-height:68px;bottom:42px;
  color:var(--fms-button-text);
  border:2px solid var(--fms-button-border);border-bottom-width:5px;
  border-radius:var(--fms-button-radius);
  background:var(--fms-button-bg);
  box-shadow:var(--fms-button-shadow),0 15px 48px var(--accent-glow);
}
#spin-btn:hover{opacity:1;box-shadow:var(--fms-button-shadow),0 20px 56px var(--accent-glow)}
.modal-overlay{color:var(--fms-page-text);background:color-mix(in srgb,var(--fms-page-bg-deep) 74%,transparent)}
.modal-content{
  --text-primary:var(--fms-surface-text);
  --text-secondary:var(--fms-surface-muted);
  --text-muted:var(--fms-surface-muted);
  --glass-bg:color-mix(in srgb,var(--fms-surface-text) 4%,var(--fms-surface-bg));
  --glass-bg-light:color-mix(in srgb,var(--fms-surface-text) 7%,var(--fms-surface-bg));
  --glass-bg-hover:color-mix(in srgb,var(--fms-surface-text) 11%,var(--fms-surface-bg));
  --glass-border:var(--fms-surface-border);
  color:var(--fms-surface-text);
  border:var(--fms-panel-line) solid var(--fms-surface-border);
  border-radius:var(--fms-surface-radius);
  background:var(--fms-surface-bg);
  box-shadow:var(--fms-surface-shadow);
  font-family:var(--fms-font-body);
}
.eyebrow{color:var(--fms-accent-primary);font:900 .69rem/1 var(--fms-font-interface);letter-spacing:.13em;text-transform:uppercase}
.theme-backdrop{
  position:fixed;z-index:10000;inset:0;display:grid;place-items:center;padding:1.25rem;
  background:color-mix(in srgb,var(--fms-page-bg-deep) 80%,transparent);backdrop-filter:blur(8px);
}
.theme-dialog{
  display:flex;width:min(70rem,calc(100vw - 2.5rem));min-height:min(41rem,calc(100dvh - 2.5rem));max-height:calc(100dvh - 2.5rem);
  flex-direction:column;padding:clamp(1.5rem,3vw,2.6rem);color:var(--fms-surface-text);
  border:var(--fms-panel-line) solid var(--fms-surface-border);border-radius:var(--fms-surface-radius);
  background:var(--fms-surface-bg);box-shadow:var(--fms-surface-shadow);font-family:var(--fms-font-body);
}
.theme-backdrop.is-welcome #theme-modal-close,.theme-backdrop.is-welcome #theme-cancel-btn{visibility:hidden;pointer-events:none}
.theme-dialog__heading{display:flex;flex:0 0 auto;align-items:flex-start;justify-content:space-between;gap:1rem}
.theme-dialog__heading h2,.theme-dialog__heading p{margin:0}
.theme-dialog__heading h2{font-family:var(--fms-font-display);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:var(--fms-heading-spacing);line-height:1;text-transform:var(--fms-heading-transform)}
.theme-dialog__heading p{margin-top:.75rem;color:var(--fms-surface-muted);font-size:.82rem}
.dialog-close{display:inline-grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;padding:0;color:var(--fms-surface-muted);border:1px solid var(--fms-surface-border);border-radius:var(--fms-button-radius);background:transparent;cursor:pointer}
.dialog-close:hover{color:var(--fms-surface-text);border-color:var(--fms-accent-cool)}
.theme-options{display:grid;flex:1 1 auto;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:.75rem;min-height:0;padding:1.4rem 0}
.theme-option{position:relative;display:grid;grid-template-rows:9.3rem 4.6rem;min-width:0;padding:.55rem;color:var(--fms-surface-text);border:2px solid var(--fms-surface-border);border-radius:0;background:var(--fms-surface-bg);cursor:pointer;text-align:left}
.theme-option:hover,.theme-option[aria-pressed=true]{border-color:var(--fms-accent-cool)}
.theme-option[aria-pressed=true]{box-shadow:4px 4px 0 var(--fms-accent-cool)}
.theme-sample{position:relative;display:block;overflow:hidden;border:1px solid color-mix(in srgb,var(--sample-c) 55%,#fff);background:var(--sample-a)}
.sample-heading,.sample-panel,.sample-detail{position:absolute;display:block}
.sample-heading{top:16%;left:10%;width:66%;height:13%;background:var(--sample-c);transform:skewX(-8deg)}
.sample-panel{bottom:12%;border:2px solid var(--sample-d)}
.sample-panel--a{left:10%;width:32%;height:33%;background:var(--sample-c)}
.sample-panel--b{right:9%;width:42%;height:48%;background:var(--sample-b);box-shadow:4px 4px 0 color-mix(in srgb,var(--sample-a) 65%,#000)}
.sample-detail{top:39%;left:11%;width:27%;height:5%;background:var(--sample-d)}
.theme-option__copy{display:block;min-width:0;padding:.65rem .15rem 0}
.theme-option__copy strong,.theme-option__copy span{display:block}
.theme-option__copy strong{font-family:var(--fms-font-interface);font-size:.72rem}
.theme-option__copy span{margin-top:.35rem;color:var(--fms-surface-muted);font-size:.64rem;line-height:1.35}
.theme-option__check{position:absolute;top:.8rem;right:.8rem;display:none;width:1.45rem;height:1.45rem;place-items:center;color:var(--fms-page-bg-deep);border-radius:50%;background:var(--fms-accent-highlight)}
.theme-option[aria-pressed=true] .theme-option__check{display:grid}
.theme-dialog__actions{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;min-height:4.4rem;gap:1rem;padding-top:1rem;border-top:1px solid var(--fms-surface-border)}
.theme-dialog__actions p{margin:0;color:var(--fms-surface-muted);font-size:.72rem}
.theme-dialog__actions>div{display:flex;gap:.6rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:2.65rem;gap:.55rem;padding:.65rem 1rem;border:var(--fms-panel-line) solid transparent;border-radius:var(--fms-button-radius);font-family:var(--fms-font-interface);font-size:.78rem;font-weight:800;line-height:1;cursor:pointer;transition:transform var(--fms-motion-fast) var(--fms-motion-easing),box-shadow var(--fms-motion-fast) var(--fms-motion-easing)}
.button:hover:not(:disabled){transform:translate(-1px,-1px)}
.button--primary{color:var(--fms-button-text);border-color:var(--fms-button-border);background:var(--fms-button-bg);box-shadow:var(--fms-button-shadow)}
.button--ghost{color:var(--fms-surface-text);border-color:var(--fms-surface-border);background:transparent}
.audio-panel{
  position:fixed;z-index:120;top:72px;left:122px;display:grid;width:330px;gap:15px;padding:16px;
  color:var(--fms-surface-text);border:var(--fms-panel-line) solid var(--fms-surface-border);
  border-radius:var(--fms-surface-radius);background:var(--fms-surface-bg);box-shadow:var(--fms-surface-shadow);
  font-family:var(--fms-font-interface);
}
.audio-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--fms-surface-border)}
.audio-panel-heading>div{display:grid;gap:2px}.audio-panel-heading strong{font-size:1rem}
.audio-status{max-width:124px;color:var(--fms-surface-muted);font-size:.64rem;line-height:1.25;text-align:right}
.audio-control{display:grid;grid-template-columns:52px 1fr 42px;align-items:center;gap:10px;color:var(--fms-surface-text);font-size:.76rem;font-weight:800}
.audio-control output{color:var(--fms-surface-muted);font-variant-numeric:tabular-nums;text-align:right}
.site-footer{position:fixed;z-index:30;right:12px;bottom:10px;display:flex;align-items:center;gap:10px;color:var(--fms-page-faint);font:600 11px/1 var(--fms-font-interface)}
.site-footer>a:not(.kofi-link){color:var(--fms-page-muted);text-decoration:none}
.footer-theme-btn,.kofi-link{display:inline-flex;align-items:center;min-height:28px;gap:5px;padding:5px 9px;color:var(--fms-page-muted);border:1px solid var(--fms-line);border-radius:var(--fms-button-radius);background:color-mix(in srgb,var(--fms-page-bg-deep) 82%,transparent);font:700 11px/1 var(--fms-font-interface);text-decoration:none}
.kofi-link{color:#fff;border-color:#ff8b89;background:#ff5e5b}
:root[data-theme=game-room] .banner .slider .item,:root[data-theme=game-room] #drum-wheel-drum .drum-item{border-width:3px;border-color:#fff4ad;box-shadow:7px 8px 0 #100a18,inset 0 0 0 2px rgba(255,255,255,.16)}
:root[data-theme=game-room] .item--color::after,:root[data-theme=game-room] .drum-item--color::after{background:radial-gradient(circle at 14% 16%,rgba(255,255,255,.28) 0 4px,transparent 5px),radial-gradient(circle at 84% 78%,rgba(255,255,255,.22) 0 3px,transparent 4px),linear-gradient(180deg,rgba(255,255,255,.14),transparent 48%)}
:root[data-theme=midnight-library] .banner::before{border-color:rgba(102,192,244,.34);background:repeating-radial-gradient(circle,transparent 0 52px,rgba(102,192,244,.14) 53px 54px),radial-gradient(circle,rgba(102,192,244,.13),transparent 67%)}
:root[data-theme=midnight-library] .banner .slider .item,:root[data-theme=midnight-library] #drum-wheel-drum .drum-item{border-color:#66c0f4;border-radius:3px;box-shadow:0 16px 34px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.2),0 0 0 1px rgba(102,192,244,.18)}
:root[data-theme=neon-terminal] .banner::before{border-radius:0;background:linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px),radial-gradient(circle,rgba(0,240,255,.09),transparent 64%);background-size:28px 28px,28px 28px,100% 100%;clip-path:polygon(9% 0,100% 0,100% 84%,91% 100%,0 100%,0 16%)}
:root[data-theme=neon-terminal] .banner .slider .item,:root[data-theme=neon-terminal] #drum-wheel-drum .drum-item{border:2px solid #00f0ff;border-radius:0;box-shadow:6px 6px 0 rgba(255,42,109,.72),0 0 22px rgba(0,240,255,.18);clip-path:polygon(0 0,91% 0,100% 13%,100% 100%,9% 100%,0 87%)}
:root[data-theme=graphic-rebellion] .banner::before{border:0;border-radius:0;background:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.5px) 0 0/13px 13px,conic-gradient(from 18deg,transparent 0 11%,rgba(230,0,18,.42) 11% 16%,transparent 16% 31%,rgba(255,253,244,.14) 31% 33%,transparent 33%);clip-path:polygon(4% 13%,20% 4%,37% 11%,54% 1%,72% 9%,96% 3%,91% 30%,100% 47%,91% 63%,97% 92%,69% 88%,50% 99%,31% 90%,4% 97%,9% 69%,0 51%,10% 33%)}
:root[data-theme=graphic-rebellion] .banner .slider .item,:root[data-theme=graphic-rebellion] #drum-wheel-drum .drum-item{border:4px solid #0a0909;border-radius:0;box-shadow:8px 8px 0 #e60012,-3px -3px 0 #fffdf4;clip-path:polygon(3% 0,100% 4%,96% 100%,0 94%)}
:root[data-theme=cozy-pixel] body,:root[data-theme=cozy-pixel] body::before{background-size:32px 32px;image-rendering:pixelated}
:root[data-theme=cozy-pixel] .banner::before{border:4px solid #f2c14e;border-radius:2px;background:conic-gradient(rgba(255,255,255,.035) 25%,transparent 0 50%,rgba(255,255,255,.035) 0 75%,transparent 0) 0 0/32px 32px,radial-gradient(circle,rgba(242,193,78,.12),transparent 68%);box-shadow:8px 8px 0 #152215}
:root[data-theme=cozy-pixel] .banner .slider .item,:root[data-theme=cozy-pixel] #drum-wheel-drum .drum-item{border:3px solid #493823;border-radius:2px;box-shadow:7px 7px 0 #152215,inset 0 0 0 3px rgba(255,240,200,.17);image-rendering:pixelated}
@media(max-width:1280px){.top-bar-btn span{display:none}.top-bar{grid-template-columns:auto 1fr auto}.audio-panel{left:72px}.item-manager{left:22px;width:310px}.suggestion-box{right:22px;width:310px}}
@media(max-width:1000px){.theme-options{grid-template-columns:repeat(5,10rem);overflow-x:auto}}
@media(max-width:720px){.theme-dialog{width:calc(100vw - 1rem);min-height:calc(100dvh - 1rem);max-height:calc(100dvh - 1rem);padding:1rem}.theme-options{grid-template-columns:repeat(5,9rem);padding-block:1rem}.theme-option{grid-template-rows:7.2rem 4.8rem}.theme-dialog__actions{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0ms!important}}