@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--pink:#ffa5e6;--purple:#b18bff;--line:rgba(255,255,255,.14)}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#0b0715;color:#fff;font-family:'DM Sans',system-ui,sans-serif;overflow-x:hidden}.wallpaper{position:fixed;inset:0;background:radial-gradient(ellipse at 15% 15%,#4b1e6d 0,transparent 46%),radial-gradient(ellipse at 80% 85%,#521f59 0,transparent 42%),linear-gradient(130deg,#110920,#1a0e2b 50%,#090712);background-position:center;background-size:cover;z-index:-3}.shade{position:fixed;inset:0;background:linear-gradient(140deg,rgba(7,3,17,.45),rgba(8,4,18,.68));z-index:-2}.noise{pointer-events:none;position:fixed;inset:0;opacity:.16;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}.topbar{position:absolute;top:0;left:0;width:100%;padding:25px clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between}.wordmark{text-decoration:none;color:#fff;font:800 23px Outfit,system-ui;letter-spacing:-1px}.wordmark span{color:var(--pink)}.topright{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#c9b8d9}.live-dot{display:inline-block;width:7px;height:7px;background:#f49bdc;border-radius:50%;box-shadow:0 0 12px #f49bdc;margin-right:9px}.center{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 16px 42px}.profile{width:min(100%,440px);border:1px solid rgba(255,255,255,.21);background:rgba(25,15,41,.72);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);border-radius:25px;box-shadow:0 25px 100px rgba(0,0,0,.4),0 0 70px rgba(153,85,206,.15);overflow:hidden}.banner{height:125px;position:relative;background:linear-gradient(115deg,#6a318e,#bd619a 45%,#49318a);background-size:cover;background-position:center}.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,8,30,.4),transparent)}.banner-label{position:absolute;right:19px;top:18px;z-index:1;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#fff9}.profile-content{position:relative;padding:0 32px 26px;text-align:center}.avatar{width:92px;height:92px;margin:-48px auto 14px;border:4px solid #24152f;border-radius:50%;position:relative;z-index:1;background:linear-gradient(135deg,#db8bde,#6c4ac2);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;box-shadow:0 5px 22px #08031099}.avatar span{font:700 40px Outfit}.eyebrow{color:#e5a8f0;font-size:9px;font-weight:700;letter-spacing:3px;margin-top:8px}h1{font:800 40px/1.1 Outfit,system-ui;letter-spacing:-1.7px;margin:11px 0 3px}.verified{font-size:18px;vertical-align:middle;margin-left:7px;color:var(--pink)}.handle{font-size:13px;color:#bca9cb;margin:0}.bio{font-size:13px;line-height:1.75;color:#e2d6e9;max-width:315px;margin:17px auto 19px}.divider{height:1px;background:var(--line);position:relative;margin:25px 0 24px}.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0 13px;background:#24162f;color:#ecb1e9}.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:11px}.social{width:47px;height:47px;border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:rgba(255,255,255,.07);transition:.2s transform,.2s background,.2s box-shadow}.social:hover,.social:focus-visible{transform:translateY(-4px);background:rgba(190,120,228,.24);box-shadow:0 8px 25px #a16dc444;outline:none}.social svg{width:21px;height:21px;fill:currentColor}.social .text-icon{font:800 18px Outfit}.music{display:flex;align-items:center;gap:12px;margin-top:27px;padding:12px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.055);text-align:left}.album{width:48px;height:48px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#b875c9,#533b9d);font-size:23px;background-size:cover;background-position:center}.track{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.nowplaying{font-size:9px;font-weight:800;letter-spacing:1.8px;color:#d8a5f6}.track strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track small{font-size:11px;color:#bba8ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play{height:37px;width:37px;border:0;border-radius:50%;background:#e9a4ef;color:#2a113b;font-size:14px;cursor:pointer;transition:transform .2s}.play:hover{transform:scale(1.08)}.volume-row{display:flex;align-items:center;gap:12px;margin:13px 5px 0;color:#b8a5c9;font-size:11px}.volume-row input{flex:1;accent-color:#e9a4ef;height:3px;cursor:pointer}.footer{margin:24px 0 0;color:#bca5ca;font-size:11px;letter-spacing:1px}@media(max-width:480px){.topbar{padding:22px}.topright{font-size:9px}.center{padding-top:95px}.profile-content{padding-left:23px;padding-right:23px}.banner{height:115px}h1{font-size:36px}}

/* Expanded Spotify-inspired player */
.music{display:block;margin-top:26px;padding:14px 15px 12px;border-radius:19px;background:linear-gradient(145deg,rgba(39,28,51,.92),rgba(18,15,29,.93));box-shadow:inset 0 1px 0 #ffffff17,0 10px 35px #0003}
.music-main{display:flex;align-items:center;gap:12px}
.album{width:58px;height:58px;border-radius:12px;box-shadow:0 6px 18px #0005}
.track strong{font-size:14px}.track small{font-size:12px}.nowplaying{color:#d6a0e9}
.play{width:41px;height:41px;flex-shrink:0;background:#f1a8ee;font-size:16px}
.seek-row{display:flex;align-items:center;gap:10px;margin-top:16px;color:#c7b5cf;font-size:10px;font-variant-numeric:tabular-nums}
.seek-row input{flex:1;min-width:0;accent-color:#f1a8ee;cursor:pointer}
.volume-row{margin:13px 0 0}.volume-row input{min-width:0}
.music-status{min-height:13px;margin-top:7px;font-size:10px;color:#d9a8e6;text-align:center}

/* Click-to-enter screen; the GIF wallpaper remains visible behind it. */
.entry-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:22px;background:rgba(7,3,17,.55);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);transition:opacity .5s ease,visibility .5s ease}
.entry-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.entry-card{width:min(100%,420px);padding:48px 30px;text-align:center;border:1px solid rgba(255,193,245,.35);border-radius:26px;background:rgba(29,15,48,.76);box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 65px rgba(209,114,232,.16)}
.entry-star{font-size:24px;color:#ffb4ee;letter-spacing:12px}.entry-card h2{font:800 clamp(35px,8vw,52px) Outfit,system-ui;margin:17px 0 8px;letter-spacing:-2px}.entry-card h2 span{color:#ffa5e6}.entry-card p{font-size:14px;color:#e2d0eb;margin:0 0 30px}.entry-card button{border:0;border-radius:14px;padding:15px 34px;background:linear-gradient(120deg,#ffb3e9,#b38aff);color:#241132;font:800 15px Outfit,system-ui;cursor:pointer;box-shadow:0 10px 32px #9c50c955;transition:transform .2s}.entry-card button:hover{transform:translateY(-2px)}.entry-card button:focus-visible{outline:3px solid white;outline-offset:4px}.entry-card small{display:block;color:#c6a9d6;margin-top:21px;font-size:11px;letter-spacing:.6px}
@media(prefers-reduced-motion:reduce){.entry-overlay,.entry-card button{transition:none}}


/* Home / Live navigation */
.page-tabs{display:flex;gap:7px;margin:0 0 19px;padding:5px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(25,15,41,.77);backdrop-filter:blur(18px)}
.page-tab{min-width:105px;border:0;border-radius:11px;padding:11px 21px;background:transparent;color:#cbb7da;font:700 13px Outfit,system-ui;cursor:pointer;transition:background .2s,color .2s}
.page-tab:hover,.page-tab:focus-visible{color:#fff;background:rgba(255,255,255,.09)}
.page-tab.is-active{background:linear-gradient(120deg,#ffb3e9,#b38aff);color:#25122e;box-shadow:0 5px 18px #0003}
.tab-dot{display:inline-block;width:6px;height:6px;margin-left:5px;vertical-align:middle;border-radius:50%;background:currentColor;opacity:.6}
.tab-panel[hidden]{display:none!important}
#homePanel{width:min(100%,440px)}
.live-panel{width:min(100%,820px);padding:22px;border:1px solid rgba(255,255,255,.21);border-radius:25px;background:rgba(25,15,41,.78);backdrop-filter:blur(26px);box-shadow:0 25px 100px rgba(0,0,0,.4)}
.live-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.live-heading h2{margin:0;font:800 24px Outfit,system-ui}
.live-heading p{margin:5px 0 0;color:#cbb7da;font-size:12px}
.live-heading a{color:#ffb3e9;font-size:12px;text-decoration:none;white-space:nowrap}
.twitch-player{aspect-ratio:16/9;width:100%;border-radius:15px;overflow:hidden;background:#0e0917;display:grid;place-items:center;color:#d9b7e9;font-size:13px}
.twitch-player iframe{width:100%;height:100%;border:0}
.stream-note{margin:15px 0 0;color:#cbb7da;font-size:11px;line-height:1.6}
@media(max-width:480px){.live-panel{padding:14px}.live-heading h2{font-size:20px}.live-heading{align-items:flex-start;flex-direction:column}}


/* TENTH.WTF — airy sky-blue / frosted glass theme */
:root { color-scheme:light; --pink:#329bd6; --purple:#6bbcf0; --line:rgba(62,130,178,.24); --sky-ink:#174967; --sky-muted:#517f9d; }
body { background:#dff4ff; color:var(--sky-ink); }
.wallpaper { background-color:#c9edff; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.shade { background:linear-gradient(145deg,rgba(217,243,255,.42),rgba(104,181,225,.30)); }
.noise { opacity:.08; }
.wordmark { color:#f7fdff;text-shadow:0 2px 14px #184e7788; }
.wordmark span { color:#8ad9ff; }
.profile,.live-panel { border-color:rgba(255,255,255,.75); background:rgba(232,248,255,.77); box-shadow:0 22px 75px rgba(43,111,157,.18),0 0 48px rgba(141,215,255,.24); }
.banner { background-color:#83d0f5; background-position:center; background-repeat:no-repeat; background-size:cover; }
.banner:after { background:linear-gradient(0deg,rgba(62,139,191,.13),transparent); }
.avatar { border-color:#e5f7ff; background-color:#a4d9f7; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow:0 5px 22px #4e9cca55; }
.verified,.eyebrow { color:#288fc9; }
.handle,.bio,.track small,.volume-row,.seek-row,.footer { color:var(--sky-muted); }
.divider span { background:#e3f5fd; color:#5da8d6; }
.social { color:#21638d; background:rgba(255,255,255,.55); border-color:rgba(80,158,206,.25); }
.social:hover,.social:focus-visible { background:#d1efff; box-shadow:0 8px 25px #73bde066; }
.music { border-color:rgba(106,177,216,.3); background:linear-gradient(145deg,rgba(251,254,255,.93),rgba(210,237,252,.94)); box-shadow:inset 0 1px 0 #fff,0 10px 35px #4288b325; }
.album { background-color:#a9d9f6; }
.nowplaying { color:#308ec3; }
.play { background:#6fc4f3; color:#104667; }
.play:hover { background:#8ed8ff; }
.seek-row input,.volume-row input { accent-color:#3b9ed8; }
.music-status { color:#377ba6; }
.entry-overlay { background:rgba(115,183,222,.40); }
.entry-card { border-color:rgba(255,255,255,.82); background:rgba(232,248,255,.88); box-shadow:0 30px 90px rgba(32,107,156,.24),0 0 65px rgba(164,222,255,.32); }
.entry-star,.entry-card h2 span { color:#2f9dd8; }
.entry-card h2 { color:#155177; }
.entry-card p,.entry-card small { color:#5283a4; }
.entry-card button { background:linear-gradient(120deg,#aeeaff,#63b8ef); color:#134a6b; box-shadow:0 10px 32px #5ba9d966; }
.entry-card button:focus-visible { outline-color:#267daf; }
.page-tabs { border-color:rgba(255,255,255,.85); background:rgba(229,247,255,.78); box-shadow:0 6px 24px #5aabd029; }
.page-tab { color:#477e9f; }
.page-tab:hover,.page-tab:focus-visible { color:#195779; background:rgba(255,255,255,.62); }
.page-tab.is-active { background:linear-gradient(120deg,#b9efff,#70c4f5); color:#124b6d; box-shadow:0 5px 18px #438fc03d; }
.live-heading p,.stream-note { color:#527e9b; }
.live-heading a { color:#207cb7; }
.twitch-player { background:#d3efff; color:#347eaa; }

/* Games tab — sky blue theme */
.games-panel{width:min(100%,1100px);padding:22px;border:1px solid rgba(116,192,233,.5);border-radius:25px;background:rgba(231,248,255,.86);backdrop-filter:blur(26px);box-shadow:0 20px 65px rgba(23,101,157,.17);color:#184c6d}
.game-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}
.game-heading h2{margin:0;font:800 24px Outfit,system-ui}.game-heading p{margin:5px 0 0;color:#5483a0;font-size:12px}
.game-fullscreen{border:1px solid #8ecff1;background:linear-gradient(120deg,#c5efff,#83cdf5);color:#185476;border-radius:12px;padding:11px 17px;font:700 13px Outfit,system-ui;cursor:pointer}
.game-fullscreen:hover{filter:brightness(.96)}.game-fullscreen:focus-visible{outline:3px solid #258bd0;outline-offset:3px}
.game-stage{width:100%;aspect-ratio:16/9;min-height:300px;background:#071020;border-radius:15px;overflow:hidden}
.game-mount,.game-mount iframe{width:100%;height:100%;display:block;border:0}
.game-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;background:#071020}
.game-stage:fullscreen .game-mount{width:100%;height:100%}
.game-note{margin:13px 0 0;font-size:11px;color:#5483a0}
@media(max-width:600px){.games-panel{padding:12px}.game-heading{align-items:flex-start;flex-direction:column}.game-stage{min-height:220px}.page-tab{min-width:0;flex:1;padding:11px 12px}}
