@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}
@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}}