@font-face{font-family:Outfit;src:url('assets/Outfit-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/DM-Sans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Comic Neue Angular';src:url('assets/ComicNeueAngular-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;font-weight:400;background:#000;color:#fff;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#000}body{min-height:100svh;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}::selection{color:#000;background:#fff}[hidden]{display:none!important}
#background{position:fixed;inset:-40px;z-index:0;background:#000;opacity:0;overflow:hidden;perspective:900px;transform-style:preserve-3d}.star-plane{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform;pointer-events:none}#stars-far{transform:translateZ(-120px) scale(1.134)}#stars-mid{transform:translateZ(-55px) scale(1.062)}body.entered #background,body.revealing #background{opacity:1;transition:opacity .7s}
#bio{position:fixed;inset:0;z-index:2;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;outline:none;pointer-events:none}body.revealing #bio,body.entered #bio{opacity:1;visibility:visible}body.revealing #bio{transition:opacity .65s}.profile{width:min(316px,calc(100vw - 56px));display:flex;flex-direction:column;align-items:center;position:relative;top:-8px;pointer-events:none}.portrait-layer,.name-layer,.widget-layer{pointer-events:auto}.portrait-layer{border-radius:50%}.portrait,.portrait-static{width:122px;height:122px;display:block;border-radius:50%;border:0;object-fit:cover;object-position:center;user-select:none}.portrait-static{display:none}.portrait-layer.video-failed .portrait{display:none}.portrait-layer.video-failed .portrait-static{display:block}.name-layer{margin:21px 0 30px}h1{margin:0;font-family:Outfit,Urbanist,Sora,Arial,sans-serif;font-size:82px;font-weight:900;letter-spacing:-.055em;line-height:.99;padding-right:.055em;text-shadow:0 0 2px #ffffff12;font-kerning:normal}.widget-stack{width:100%;display:flex;flex-direction:column;gap:12px}.widget-layer{border-radius:21px}.widget{width:100%;min-height:82px;display:flex;align-items:center;gap:17px;padding:19px 20px;border:1px solid #ffffff2e;border-radius:21px;background:linear-gradient(125deg,#131313 0%,#090909 52%,#060606 100%);box-shadow:inset 0 1px 0 #ffffff08,0 5px 20px #0005;transition:border-color .22s,box-shadow .22s,background .22s,translate .22s;position:relative;isolation:isolate}.widget::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#ffffff04,transparent 60%);opacity:0;transition:opacity .22s;pointer-events:none;z-index:-1}.widget:hover,.widget:focus-visible{border-color:#ffffff65;box-shadow:inset 0 1px 0 #ffffff12,0 9px 26px #0009;translate:0 -2px}.widget:hover::after,.widget:focus-visible::after{opacity:1}.platform-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff09;border-radius:13px;background:linear-gradient(145deg,#ffffff07,#ffffff01);flex-shrink:0}.app-icon{width:24px;height:24px;fill:#fff}.x-icon{width:21px;height:21px}.widget-title{font-size:16px;font-weight:400;line-height:1.2;letter-spacing:-.02em}.card-end{display:flex;align-items:center;gap:13px;margin-left:auto}.card-arrow{width:15px;height:15px;fill:none;stroke:#ffffff5a;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s,translate .22s}.widget:hover .card-arrow{stroke:#ffffffd0;translate:1px -1px}.discord-avatar-wrap{position:relative;width:34px;height:34px;flex-shrink:0}.social-avatar{display:block;width:34px;height:34px;border-radius:50%;border:0;object-fit:cover;user-select:none}.status-bubble{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border:3px solid #080808;border-radius:50%;background:#777}.status-bubble[data-status=online]{background:#43b581}.status-bubble[data-status=idle]{background:#f0b232}.status-bubble[data-status=idle]::after{content:'';position:absolute;right:0;top:0;width:4px;height:4px;border-radius:50%;background:#080808}.status-bubble[data-status=dnd]{background:#f23f43}.status-bubble[data-status=dnd]::after{content:'';position:absolute;left:1px;top:3px;width:5px;height:1px;background:#080808}.status-bubble[data-status=offline]::after,.status-bubble[data-status=unknown]::after{content:'';position:absolute;inset:2px;background:#080808;border-radius:50%}
#intro{position:fixed;inset:0;z-index:10;touch-action:none;user-select:none;cursor:crosshair;isolation:isolate;outline:none}#slice-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}#intro-prompt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:12px;font-weight:400;letter-spacing:.3em;white-space:nowrap;pointer-events:none;color:#ffffffb8;transition:opacity .2s}#intro.is-exiting #intro-prompt{opacity:0}.skip-intro,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-intro:focus-visible{clip:auto;left:50%;bottom:40px;transform:translateX(-50%);width:auto;height:auto;margin:0;border:1px solid #ffffff80;border-radius:24px;background:#000;color:#fff;padding:11px 18px;font-size:12px;overflow:visible}
.audio-controls{position:fixed;z-index:5;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom))}.sound-toggle{position:relative;display:grid;place-items:center;width:39px;height:39px;border:1px solid #ffffff32;border-radius:50%;background:#0a0a0a;box-shadow:inset 0 1px 0 #ffffff06;transition:border-color .2s,background .2s}.sound-toggle:hover{border-color:#ffffff90;background:#121212}.sound-toggle svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.sound-waves{display:none}.sound-toggle[aria-pressed=true] .sound-waves{display:block}.sound-toggle[aria-pressed=true] .sound-off-line{display:none}.volume-panel{position:absolute;right:48px;bottom:0;display:flex;align-items:center;gap:10px;width:211px;height:39px;border:1px solid #ffffff29;border-radius:25px;padding:0 13px;background:linear-gradient(120deg,#141414,#080808);box-shadow:inset 0 1px 0 #ffffff07;opacity:0;transform:translateX(13px) scaleX(.95);transform-origin:right center;pointer-events:none;visibility:hidden;transition:opacity .22s,transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}.audio-controls.is-open .volume-panel{opacity:1;transform:translateX(0) scaleX(1);pointer-events:auto;visibility:visible}.volume-panel::after{content:'';position:absolute;left:100%;width:12px;top:-4px;bottom:-4px}.range-end{font-size:8px;color:#ffffff60;font-variant-numeric:tabular-nums}.volume-value{font-size:10px;color:#fff;min-width:19px;text-align:right;font-variant-numeric:tabular-nums}.volume-panel input{--volume:30%;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:24px;background:transparent;cursor:pointer;margin:0;flex:1;touch-action:pan-x}.volume-panel input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,#fff var(--volume),#ffffff30 var(--volume))}.volume-panel input::-moz-range-track{height:4px;border-radius:999px;background:#ffffff30}.volume-panel input::-moz-range-progress{height:4px;border-radius:999px;background:#fff}.volume-panel input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:0;border-radius:50%;background:#fff;margin-top:-3px;box-shadow:0 0 0 3px #ffffff08;transition:box-shadow .2s}.volume-panel input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}.volume-panel input:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #ffffff15}#audio-notice{position:fixed;z-index:11;right:24px;bottom:75px;max-width:250px;padding:12px 15px;border:1px solid #ffffff50;border-radius:12px;background:#000;color:#fff;font-size:11px;line-height:1.5}
@media(max-height:590px){.profile{top:-3px}.portrait,.portrait-static{width:100px;height:100px}.name-layer{margin:16px 0 23px}h1{font-size:69px}.widget{min-height:72px;padding:14px 19px}.widget-stack{gap:10px}.platform-icon{width:37px;height:37px}}
@media(max-height:440px){.profile{top:0}.portrait,.portrait-static{width:66px;height:66px}.name-layer{margin:10px 0 15px}h1{font-size:53px}.widget{min-height:58px;padding:10px 16px;border-radius:17px}.widget-layer{border-radius:17px}.platform-icon{width:32px;height:32px;border-radius:10px}.app-icon{width:21px;height:21px}.x-icon{width:19px;height:19px}.widget-stack{gap:8px}.widget-title{font-size:14px}.audio-controls{right:14px;bottom:14px}}
@media(max-width:360px){.volume-panel{width:190px;gap:8px}.range-end{font-size:7px}}
@media(prefers-reduced-motion:reduce){.portrait{display:none}.portrait-static{display:block}*,*::before,*::after{transition:none!important;animation:none!important}#intro{cursor:default}.skip-intro{clip:auto;left:50%;bottom:calc(50% - 80px);transform:translateX(-50%);width:auto;height:auto;margin:0;border:1px solid #ffffff60;border-radius:24px;background:#000;padding:10px 17px;font-size:11px;overflow:visible}.star-plane{will-change:auto}.widget:hover,.widget:focus-visible{translate:none}}

/* The board lives in the same centered column as the profile and has no panel. */
#bio{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding:24px 20px max(40px,env(safe-area-inset-bottom));scrollbar-width:none}
#bio::-webkit-scrollbar{display:none}
.profile{margin:auto 0;top:0;flex-shrink:0}
.game{width:218px;max-width:100%;margin-top:25px;pointer-events:auto}
.game-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:218px;height:218px;max-width:100%;margin:auto}
.game-grid{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ffffffc7;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 .6px #fff);pointer-events:none}
.game-cell{display:grid;place-items:center;position:relative;z-index:1;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;font-family:'Comic Neue Angular',cursive;font-size:53px;font-weight:400;line-height:1;transition:transform .15s,text-shadow .15s}
.game-cell:not(:disabled):hover{transform:scale(1.05)}
.game-cell:focus-visible{outline:1px solid #ffffffb0;outline-offset:-6px;border-radius:5px}
.game-cell:disabled{cursor:default}
.game-cell[data-mark=X]{color:#ff5367;text-shadow:0 0 5px #ff53673d}
.game-cell[data-mark=O]{color:#619eff;text-shadow:0 0 5px #619eff3d}
.game-cell.is-winning{text-shadow:0 0 10px currentColor}
.game-win-line{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;fill:none;stroke:#ff5367;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px currentColor);color:#ff5367}
.game-win-line[data-mark=O]{stroke:#619eff;color:#619eff}
.game-win-line line{stroke-dasharray:1;stroke-dashoffset:0}
.game-win-line.is-drawing line{animation:draw-game-win .26s cubic-bezier(.2,.65,.35,1) both}
@keyframes draw-game-win{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-height:740px){.game{width:180px;margin-top:16px}.game-board{width:180px;height:180px}.game-cell{font-size:45px}}
@media(max-width:820px){#bio{padding:clamp(18px,3vh,30px) 20px max(60px,env(safe-area-inset-bottom))}.portrait,.portrait-static{width:104px;height:104px}.name-layer{margin:15px 0 22px}h1{font-size:72px}.widget{min-height:68px;padding:13px 18px}.widget-stack{gap:10px}.game{width:190px;margin-top:22px}.game-board{width:190px;height:190px}.game-cell{font-size:46px}}
@media(max-width:820px) and (max-height:700px){.game{width:165px;margin-top:16px}.game-board{width:165px;height:165px}.game-cell{font-size:40px}}
@media(prefers-reduced-motion:reduce){.game-cell:not(:disabled):hover{transform:none}}
h1{text-shadow:0 0 7px #ffffff55,0 0 20px #ffffff20}
.x-identity{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.x-followers{font-size:11px;line-height:1.1;color:#ffffff8f;letter-spacing:0}

/* A single centered monochrome hologram surface holds the profile. The light
   layer tilts; the portrait and wordmark stay fixed in place. */
#bio{padding:96px 20px 28px}
.profile{--shine-x:50%;--shine-y:30%;--tilt-x:0deg;--tilt-y:0deg;width:min(610px,calc(100vw - 42px));min-height:720px;margin:auto 0;padding:33px 38px 31px;top:0;isolation:isolate;overflow:hidden;pointer-events:auto;border:1px solid #ffffff25;border-radius:34px;background:linear-gradient(155deg,#ffffff0b 0%,#070707eb 27%,#050505e8 70%,#ffffff0a 100%);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff0b,0 22px 80px #000b;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
.profile::before{content:'';position:absolute;inset:-5%;z-index:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 47px,#ffffff06 48px,transparent 49px 92px),linear-gradient(125deg,#ffffff10,transparent 27%,#ffffff08 49%,transparent 72%,#ffffff0e);transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.04);transition:transform .25s ease-out}
.profile::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle 110px at var(--shine-x) var(--shine-y),#ffffff20,transparent 100%);opacity:.55;transition:opacity .25s}
.profile:hover::after{opacity:.82}
.profile>*{position:relative;z-index:1}
.profile .portrait-layer{flex-shrink:0}
.profile .name-layer{margin:14px 0 21px}
.profile .widget-stack{width:min(316px,100%);gap:10px}
.profile .widget{min-height:72px;padding:14px 18px}
.profile .game{width:188px;margin-top:22px}
.profile .game-board{width:188px;height:188px}
.profile .game-cell{font-size:45px}
.widget-layer{will-change:transform}
.widget{transition:border-color .25s,box-shadow .25s,background .25s,translate .25s}

.signup-pill{position:fixed;top:max(19px,env(safe-area-inset-top));left:50%;z-index:5;width:min(450px,calc(100vw - 36px));height:55px;display:flex;align-items:center;gap:10px;padding:5px 6px 5px 21px;border-radius:999px;overflow:hidden;transform:translateX(-50%);box-shadow:0 10px 32px #0008;pointer-events:auto}
.signup-pill::before{content:'';position:absolute;inset:-420%;background:conic-gradient(transparent 0 68%,#ffffff18 73%,#ffffffd8 78%,#ffffff18 83%,transparent 88%);animation:signup-orbit 6s linear infinite}
.signup-pill::after{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(125deg,#191919,#090909 66%,#1b1b1b)}
.signup-pill input,.signup-action{position:relative;z-index:1}
.signup-pill input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;font-family:'DM Sans',Arial,sans-serif;font-size:13px;letter-spacing:-.01em}
.signup-pill input::placeholder{color:#ffffffb7;opacity:1}
.signup-pill input:focus-visible{outline:none}
.signup-pill:focus-within{box-shadow:0 0 0 2px #ffffffb5,0 10px 32px #0008}
.signup-action{height:43px;min-width:120px;display:grid;place-items:center;padding:0 21px;border:0;border-radius:999px;background:linear-gradient(135deg,#fff,#cfcfcf);color:#080808;font-size:13px;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,0 1px 10px #ffffff1e;transition:filter .2s,transform .2s}
.signup-action:hover{filter:brightness(1.12);transform:translateY(-1px)}
@keyframes signup-orbit{to{transform:rotate(360deg)}}

.music-card{width:min(316px,100%);min-height:78px;margin-top:13px;display:flex;align-items:center;gap:13px;padding:11px 12px;border:1px solid #ffffff2a;border-radius:19px;background:linear-gradient(120deg,#171717,#080808 63%,#141414);box-shadow:inset 0 1px 0 #ffffff14,0 10px 24px #0007}
.music-art{position:relative;width:54px;height:54px;flex:none;overflow:hidden;border:1px solid #ffffff26;border-radius:12px;background:radial-gradient(circle at 28% 26%,#ffffff8f 0 1px,transparent 2px),radial-gradient(circle at 70% 71%,#ffffffad 0 1px,transparent 2px),linear-gradient(145deg,#383838,#090909 60%,#272727)}
.music-art::after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,#ffffff45,transparent 36%,#ffffff0d 64%,transparent);opacity:.5}
.music-art span{position:absolute;width:46px;height:46px;top:4px;left:4px;border:1px solid #ffffff79;border-radius:50%;transform:rotateX(58deg) rotate(-27deg)}
.music-art span:nth-child(2){width:29px;height:29px;top:13px;left:12px;border-color:#ffffffae;transform:rotateY(58deg) rotate(20deg)}
.music-art span:nth-child(3){width:7px;height:7px;top:23px;left:23px;background:#fff;box-shadow:0 0 11px #fff;border:0}
.music-details{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.music-eyebrow{font-size:8px;letter-spacing:.16em;color:#ffffff8c}
.music-details strong{font-family:'DM Sans',Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#music-seek{--progress:0%;width:100%;height:13px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:pan-x}
#music-seek::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(to right,#fff var(--progress),#ffffff3d var(--progress))}
#music-seek::-moz-range-track{height:3px;border-radius:99px;background:#ffffff3d}
#music-seek::-moz-range-progress{height:3px;border-radius:99px;background:#fff}
#music-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;margin-top:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #ffffff85}
#music-seek::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:#fff}
#music-seek:disabled{opacity:.45;cursor:default}
.music-play{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:#f2f2f2;color:#050505;transition:transform .2s,background .2s}
.music-play:hover{transform:scale(1.07);background:#fff}
.music-play svg{width:18px;height:18px;fill:currentColor}
.music-card{gap:10px}.music-transport{display:flex;align-items:center;gap:3px;flex-shrink:0}
.music-transport .music-play{width:32px;height:32px}
.music-skip{width:23px;height:32px;display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:9px;background:transparent;color:#ffffffbb;transition:color .18s,background .18s,transform .18s}
.music-skip svg{width:17px;height:17px;fill:currentColor}.music-skip:hover:not(:disabled){color:#fff;background:#ffffff12;transform:scale(1.08)}
.music-skip:disabled{opacity:.27;cursor:default}
.music-pause-shape{display:none}.music-card.is-playing .music-play-shape{display:none}.music-card.is-playing .music-pause-shape{display:block}
.volume-panel{width:143px;padding:0 15px;gap:0}

@media(max-width:820px){#bio{padding:83px 14px 24px}.profile{width:min(420px,calc(100vw - 28px));min-height:0;padding:26px 20px 27px;border-radius:27px}.profile .name-layer{margin:12px 0 18px}.profile .widget{min-height:67px;padding:12px 17px}.profile .game{width:174px;margin-top:19px}.profile .game-board{width:174px;height:174px}.profile .game-cell{font-size:42px}.music-card{min-height:72px}.music-art{width:48px;height:48px}.music-art span{left:1px;top:1px}.music-art span:nth-child(2){left:9px;top:9px}.music-art span:nth-child(3){left:20px;top:20px}}
@media(max-width:370px){.signup-pill{height:51px;padding-left:16px}.signup-action{height:39px;min-width:104px;padding:0 14px}.profile{padding-left:16px;padding-right:16px}.profile .game,.profile .game-board{width:160px;height:160px}}
@media(max-height:700px) and (min-width:821px){.profile{min-height:0;padding-top:22px;padding-bottom:22px}.profile .portrait,.profile .portrait-static{width:98px;height:98px}.profile .name-layer{margin:9px 0 14px}.profile h1{font-size:68px}.profile .widget{min-height:63px;padding:10px 16px}.profile .music-card{min-height:66px}.profile .game,.profile .game-board{width:155px;height:155px}.profile .game{margin-top:14px}.profile .game-cell{font-size:38px}}
@media(prefers-reduced-motion:reduce){.signup-pill::before{animation:none;background:#ffffff6b}.profile::before{transform:none}.profile::after{opacity:.35}.widget-layer{will-change:auto}.music-play:hover,.signup-action:hover{transform:none}}
.music-art{background:#1a1710}.music-art::after{display:none}.music-art img{display:block;width:100%;height:100%;object-fit:cover}.music-art span{display:none}

/* The card itself follows the pointer while its shine moves independently. */
.profile{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .22s ease-out}
.profile::before{transform:scale(1.04)}
.profile .portrait,.profile .portrait-static{width:138px;height:138px}
.profile h1{font-size:75px}
@media(max-width:820px){.profile .portrait,.profile .portrait-static{width:118px;height:118px}.profile h1{font-size:66px}}
@media(max-height:700px) and (min-width:821px){.profile .portrait,.profile .portrait-static{width:108px;height:108px}.profile h1{font-size:62px}}
@media(prefers-reduced-motion:reduce){.profile{transform:none!important}}

/* Give touch visitors one viewport-sized scroll frame, including the full board. */
@media(max-width:820px),(pointer:coarse){
  #bio{display:block;height:100vh;height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden;pointer-events:auto;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;padding-top:max(83px,calc(env(safe-area-inset-top) + 72px));padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 70px))}
  #bio::-webkit-scrollbar{display:block;width:4px}
  #bio::-webkit-scrollbar-thumb{background:#ffffff55;border-radius:99px}
  .profile{margin:0 auto;overflow:clip;transform:none}
  .profile>*{flex-shrink:0}
  .game-board{touch-action:pan-y}
}

/* The card ends at the player; the game is a separate section below the fold. */
#bio{display:flex;align-items:center;justify-content:flex-start;pointer-events:auto;height:100vh;height:100dvh;overflow-y:auto;touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:96px 20px max(48px,env(safe-area-inset-bottom))}
.profile-stage{width:100%;min-height:calc(100vh - 96px);min-height:calc(100dvh - 96px);display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding-bottom:34px;pointer-events:none}
.profile{min-height:0;margin:0;padding-bottom:26px;flex-shrink:0}
#bio>.game{width:218px;margin:32px 0 18px;flex:0 0 auto}
#bio>.game .game-board{width:100%;height:auto;aspect-ratio:1}
.music-art{border-radius:8px;overflow:visible}.music-art img{border-radius:inherit}
.music-source-badge{position:absolute;right:-9px;bottom:-3px;z-index:2;display:grid;place-items:center;width:21px;height:16px;background:none;border:0;padding:0;filter:drop-shadow(0 1px 2px #000);transition:transform .18s}
.music-source-badge svg{width:21px;height:16px}.music-source-badge:hover{transform:scale(1.12)}
#music-artist{font-size:10px;line-height:1.2;color:#ffffff85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:820px),(pointer:coarse){#bio{padding:83px 14px max(84px,calc(env(safe-area-inset-bottom) + 60px))}.profile-stage{min-height:calc(100vh - 83px);min-height:calc(100dvh - 83px);padding-bottom:28px}.profile{padding-bottom:24px}#bio>.game{width:190px;margin-top:28px}}