:root{--bg:#0b0b1a;--surface:#ffffff0d;--surface-border:#ffffff1a;--input-bg:#ffffff0f;--text:#f1f5f9;--text-muted:#94a3b8;--primary:#6366f1;--primary-hover:#818cf8;--accent:#ec4899;--radius:16px;--card-blur:12px;--wheel-glow:#6366f159}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{max-width:1100px;margin:0 auto;padding:48px 16px}.app-header{text-align:center;margin-bottom:40px}.logo{letter-spacing:-.03em;font-size:clamp(2rem,5vw,3rem);font-weight:800}.logo span{background:linear-gradient(90deg, var(--primary), var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text}.tagline{color:var(--text-muted);margin-top:8px}.layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}.card{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(var(--card-blur));backdrop-filter:blur(var(--card-blur));padding:24px;box-shadow:0 20px 50px #00000059}.wheel-card{flex-direction:column;align-items:center;display:flex}.wheel-wrapper{aspect-ratio:1;width:100%;max-width:480px;position:relative}.wheel-container{width:100%;height:100%;filter:drop-shadow(0 10px 30px var(--wheel-glow))}.wheel-pointer-track{pointer-events:none;z-index:1;transition:transform .2s;position:absolute;inset:0}.wheel-pointer{border-left:16px solid #0000;border-right:16px solid #0000;border-top:30px solid var(--text);filter:drop-shadow(0 3px 4px #00000080);z-index:1;width:0;height:0;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.result-wrapper{margin-top:20px;position:relative}.result{text-align:center;min-height:3.6rem;color:var(--text-muted);opacity:0;flex-direction:column;align-items:center;gap:2px;font-size:1.25rem;display:flex}.result.visible{opacity:1;animation:.5s cubic-bezier(.34,1.56,.64,1) result-pop}.result strong{color:var(--text)}.result-congrats{letter-spacing:.02em;background:linear-gradient(90deg, var(--primary-hover), var(--accent), #f59e0b, var(--primary-hover));color:#0000;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:800;animation:2.5s linear infinite congrats-shimmer}@keyframes result-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes congrats-shimmer{to{background-position:300% 0}}.confetti{pointer-events:none;z-index:2;width:0;height:0;position:absolute;top:40%;left:50%}.confetti-piece{background:var(--color);opacity:0;width:7px;height:11px;animation:confetti-burst 1.4s cubic-bezier(.15, .6, .35, 1) var(--delay) forwards;border-radius:2px;margin:-5px 0 0 -3px;position:absolute}.confetti-piece.round{border-radius:50%;width:8px;height:8px}@keyframes confetti-burst{0%{opacity:1;transform:translate(0)rotate(0)}55%{opacity:1;transform:translate(calc(var(--x) * .85), var(--y)) rotate(calc(var(--r) * .6))}to{opacity:0;transform:translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r))}}@media (prefers-reduced-motion:reduce){.confetti{display:none}.result.visible,.result-congrats{animation:none}}.button-container{gap:12px;margin-top:16px;display:flex}.btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:999px;padding:12px 28px;font-weight:600;transition:background .2s,transform .1s,box-shadow .2s,border-color .2s}.btn:active{transform:scale(.97)}.btn:focus-visible,.btn-icon:focus-visible{outline:2px solid var(--primary-hover);outline-offset:2px}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;box-shadow:0 8px 20px #6366f166}.btn-primary:hover{box-shadow:0 10px 28px #ec489973}.btn-secondary{background:var(--input-bg);color:var(--text);border-color:var(--surface-border)}.btn-secondary:hover{background:#ffffff1f}.btn-add{color:var(--primary-hover);background:#6366f126;border:1px dashed #818cf880;border-radius:10px;flex:1}.btn-add:hover{background:#6366f140}.btn-ghost{color:var(--text-muted);background:0 0;border-radius:10px}.btn-ghost:hover{color:var(--text);background:var(--input-bg)}.settings-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.settings-header h2{font-size:1.1rem;font-weight:700}.count{color:var(--text-muted);background:var(--input-bg);border:1px solid var(--surface-border);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600}.item-list{flex-direction:column;gap:8px;max-height:420px;padding-right:4px;list-style:none;display:flex;overflow-y:auto}.item-row{background:var(--input-bg);border:1px solid var(--surface-border);border-radius:10px;align-items:center;gap:10px;padding:6px 6px 6px 12px;transition:border-color .2s;display:flex}.item-row:focus-within{border-color:var(--primary)}.swatch{border-radius:50%;flex-shrink:0;width:12px;height:12px}.item-row input{min-width:0;font:inherit;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:6px 0}.item-row input::placeholder{color:var(--text-muted)}.btn-icon{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-shrink:0;font-size:1.25rem;line-height:1;transition:background .2s,color .2s}.btn-icon:hover:not(:disabled){color:#fb7185;background:#f43f5e1f}.btn-icon:disabled{opacity:.3;cursor:not-allowed}.settings-actions{gap:8px;margin-top:16px;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.settings-panel{margin-top:24px;padding:0}.settings-panel summary{cursor:pointer;border-radius:var(--radius);justify-content:space-between;align-items:center;padding:20px 24px;font-size:1.1rem;font-weight:700;list-style:none;display:flex}.settings-panel summary::-webkit-details-marker{display:none}.settings-panel summary:focus-visible{outline:2px solid var(--primary-hover);outline-offset:-2px}.chevron{border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);width:10px;height:10px;transition:transform .2s;transform:rotate(45deg)}.settings-panel[open] .chevron{transform:rotate(-135deg)}.settings-groups{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 24px;display:grid}.settings-group{background:var(--input-bg);border:1px solid var(--surface-border);border-radius:12px;flex-direction:column;gap:14px;min-width:0;padding:16px;display:flex}.settings-group legend{float:left;letter-spacing:.08em;text-transform:uppercase;width:100%;color:var(--primary-hover);font-size:.75rem;font-weight:700}.setting-field{flex-direction:column;gap:6px;display:flex}.setting-color,.setting-checkbox{flex-direction:row;justify-content:space-between;align-items:center}.setting-label{flex-direction:column;font-size:.875rem;font-weight:600;display:flex}.setting-hint{color:var(--text-muted);font-size:.75rem;font-weight:400}.range-field{align-items:center;gap:10px;display:flex}.range-field input{min-width:0;accent-color:var(--primary);flex:1}.range-field output{text-align:right;font-variant-numeric:tabular-nums;min-width:56px;color:var(--text-muted);font-size:.8rem}:is(.settings-panel,.theme-panel) select{font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--surface-border);border-radius:8px;padding:8px 10px;font-size:.875rem}:is(.settings-panel,.theme-panel) select option{background:var(--bg)}:is(.settings-panel,.theme-panel) input[type=color]{border:1px solid var(--surface-border);cursor:pointer;background:0 0;border-radius:8px;width:32px;height:32px;padding:0}:is(.settings-panel,.theme-panel) input[type=color]::-webkit-color-swatch-wrapper{padding:3px}:is(.settings-panel,.theme-panel) input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}:is(.settings-panel,.theme-panel) input:focus-visible,:is(.settings-panel,.theme-panel) select:focus-visible{outline:2px solid var(--primary-hover);outline-offset:2px}.color-list{flex-wrap:wrap;gap:8px;display:flex}.color-chip{position:relative}.chip-remove{width:16px;height:16px;color:var(--text);cursor:pointer;opacity:0;background:#334155;border:none;border-radius:50%;font-size:.7rem;line-height:1;transition:opacity .15s;position:absolute;top:-6px;right:-6px}.color-chip:hover .chip-remove:not(:disabled),.chip-remove:focus-visible{opacity:1}.chip-add{width:32px;height:32px;color:var(--primary-hover);cursor:pointer;background:0 0;border:1px dashed #818cf880;border-radius:8px;font-size:1.1rem}.chip-add:hover{background:#6366f126}.toggle{appearance:none;cursor:pointer;background:#ffffff26;border-radius:999px;flex-shrink:0;width:40px;height:22px;transition:background .2s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle:checked{background:var(--primary)}.toggle:checked:after{transform:translate(18px)}.image-field{align-items:center;gap:8px;display:flex}.image-preview{object-fit:cover;border:1px solid var(--surface-border);border-radius:8px;width:40px;height:40px}.btn-small{background:var(--input-bg);border:1px solid var(--surface-border);padding:6px 14px;font-size:.85rem}.file-button input{display:none}.sound-list{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.sound-row{background:var(--input-bg);border:1px solid var(--surface-border);border-radius:8px;align-items:center;gap:8px;width:100%;padding:2px 2px 2px 10px;display:flex}.sound-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:.85rem;overflow:hidden}.sound-row .btn-icon{width:28px;height:28px}.settings-footer{justify-content:flex-end;padding:16px 24px 20px;display:flex}.app-bg{z-index:-2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.app-bg-fill{position:absolute;inset:0}.app-bg-image .app-bg-fill{inset:-40px}.app-bg-dim{background:#000;position:absolute;inset:0}.app-bg-glow.drift .app-bg-fill{animation:30s ease-in-out infinite alternate bg-drift}.app-bg-gradient.drift .app-bg-fill{width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;animation:40s linear infinite bg-drift-spin;inset:50% auto auto 50%}.app-bg-image.drift .app-bg-fill{animation:40s ease-in-out infinite alternate bg-ken-burns}.app-bg.hue-cycle{animation:20s linear infinite bg-hue}@keyframes bg-drift{0%{transform:translate(0)scale(1)}50%{transform:translate(15%,10%)scale(1.15)}to{transform:translate(-5%,20%)scale(1.05)}}@keyframes bg-drift-spin{to{transform:rotate(360deg)}}@keyframes bg-ken-burns{0%{transform:scale(1)}to{transform:scale(1.15)translate(2%,-2%)}}@keyframes bg-hue{to{filter:hue-rotate(360deg)}}.particles{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.particle{top:-40px;left:var(--x);width:var(--size);height:var(--size);font-size:var(--size);animation:particle-fall var(--duration) linear var(--delay) infinite;line-height:1;position:absolute}.particles-snow .particle{opacity:.8;background:#fff;border-radius:50%;box-shadow:0 0 6px #fff9}.particles-confetti .particle{width:calc(var(--size) + 3px);height:calc(var(--size) * 1.6 + 3px);background:var(--color);opacity:.85;border-radius:2px}.particles-hearts .particle{opacity:.75;width:auto;height:auto}.particles-bubbles .particle{background:radial-gradient(circle at 30% 30%,#ffffff59,#0000 60%);border:1.5px solid #ffffff73;border-radius:50%;animation-name:particle-rise;top:auto;bottom:-60px}.particles-stars .particle{top:var(--y);background:#fff;border-radius:50%;animation-name:particle-twinkle;animation-timing-function:ease-in-out;box-shadow:0 0 8px 1px #ffffffb3}@keyframes particle-fall{to{transform:translate(var(--drift), calc(100vh + 80px)) rotate(var(--spin))}}@keyframes particle-rise{to{transform:translate(var(--drift), calc(-100vh - 80px))}}@keyframes particle-twinkle{0%,to{opacity:.1;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}.theme-settings{z-index:60;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:fixed;top:16px;right:16px}.theme-cog{width:44px;height:44px;color:var(--text);background:var(--surface);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;border-radius:50%;place-items:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s;display:grid;box-shadow:0 8px 24px #00000059}.theme-cog:hover{color:var(--primary-hover);background:#ffffff1f;transform:rotate(60deg)}.theme-cog.open{color:var(--primary-hover);transform:rotate(180deg)}.theme-cog:focus-visible{outline:2px solid var(--primary-hover);outline-offset:2px}.theme-panel{background:#111124eb;flex-direction:column;gap:14px;width:min(360px,100vw - 32px);max-height:calc(100vh - 92px);padding:16px;animation:.2s ease-out theme-panel-in;display:flex;overflow-y:auto}@keyframes theme-panel-in{0%{opacity:0;transform:translateY(-8px)scale(.98)}}.theme-panel-header{justify-content:space-between;align-items:center;display:flex}.theme-panel-header h2{font-size:1.1rem;font-weight:700}.theme-presets{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.theme-preset{font:inherit;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;font-size:.7rem;font-weight:600;transition:background .2s,color .2s,border-color .2s;display:flex}.theme-preset:hover{color:var(--text);background:var(--input-bg);border-color:var(--surface-border)}.theme-preset:focus-visible{outline:2px solid var(--primary-hover);outline-offset:2px}.theme-preset-swatch{aspect-ratio:1.6;border:1px solid var(--surface-border);border-radius:8px;place-items:center;width:100%;display:grid}.theme-preset-random{background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#14b8a6,#6366f1,#ec4899,#f43f5e);font-size:1.1rem}.theme-panel .settings-footer{padding:0}@media (prefers-reduced-motion:reduce){.app-bg,.app-bg-fill,.particle,.theme-panel{animation:none!important}.particles:not(.particles-stars){display:none}}.side-drawer{--panel-width:min(460px, calc(100vw - 56px));z-index:50;width:var(--panel-width);pointer-events:none;align-items:center;transition:transform .35s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.side-drawer.open{z-index:55;transform:none}.side-tab{top:var(--tab-top);font:inherit;color:#fff;background:linear-gradient(180deg, var(--primary), var(--accent));cursor:pointer;pointer-events:auto;border:none;border-radius:12px 0 0 12px;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;font-size:.85rem;font-weight:700;display:flex;position:absolute;right:100%;box-shadow:-6px 8px 24px #00000059}.side-tab span:first-child{font-size:1.3rem}.side-tab-label{writing-mode:vertical-rl;letter-spacing:.04em;transform:rotate(180deg)}.side-tab:focus-visible{outline:2px solid var(--primary-hover);outline-offset:2px}.side-panel{border-radius:var(--radius) 0 0 var(--radius);pointer-events:auto;background:#15152b;border-right:none;width:100%;max-height:100%;padding:16px;overflow-y:auto}.side-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.side-header h2{flex:1;font-size:1.1rem;font-weight:700}.side-help{color:var(--text-muted);margin-top:12px;font-size:.8rem;line-height:1.6}.side-help kbd{color:var(--text);background:var(--input-bg);border:1px solid var(--surface-border);border-radius:4px;padding:1px 6px;font-family:inherit;font-size:.75rem}.side-credit{color:var(--text-muted);margin-top:8px;font-size:.7rem}.side-credit a{font-size:inherit;color:var(--primary-hover);font-weight:600}.dino-drawer{--tab-top:calc(50% - 182px)}.dino-screen{background:#f7f7f7;border-radius:10px;height:210px;overflow:hidden}.doom-drawer{--panel-width:min(980px, calc(100vw - 56px));--tab-top:calc(50% - 46px);--screen-height:min(calc((var(--panel-width) - 32px) * 10 / 16), calc(100vh - 170px));--screen-bg:#000}.tetris-drawer{--panel-width:min(820px, calc(100vw - 56px));--tab-top:calc(50% + 68px);--screen-height:min(600px, calc(100vh - 170px));--screen-bg:#e7f5ff}.game-screen{height:var(--screen-height);background:var(--screen-bg);border-radius:10px;overflow:hidden}.dino-screen iframe,.game-screen iframe{border:0;width:100%;height:100%;display:block}@media (prefers-reduced-motion:reduce){.side-drawer{transition:none}}@media (width<=800px){.layout{grid-template-columns:1fr}.app{padding:32px 16px}}