/* Compact navigation with the same destinations on every screen. */
.topbar nav{align-items:center}.topbar .nav-more{position:relative}.topbar .nav-more summary,.topbar .mobile-nav summary{list-style:none;cursor:pointer;border-radius:9px;padding:7px 12px;color:#675a7b;font:14px "Nunito",sans-serif}.topbar .nav-more summary:hover,.topbar .mobile-nav summary:hover{background:#fff9}.topbar details summary::-webkit-details-marker{display:none}.topbar details[open] summary{background:#fff;border:1px solid #e4d9f0}.topbar details>div{position:absolute;top:calc(100% + 10px);right:0;min-width:195px;padding:9px;display:grid;gap:2px;border:1px solid #d5c6e5;border-radius:13px;background:#fff9;box-shadow:0 14px 34px #64507833;z-index:80}.topbar details>div button{display:block;text-align:left;width:100%;border:0;background:transparent;padding:9px 12px;border-radius:7px;color:#5b4b70;cursor:pointer}.topbar details>div button:hover,.topbar details>div button:focus-visible{background:#eedff7}.topbar .mobile-nav{display:none;position:relative}.topbar details summary:focus-visible{outline:3px solid #8768b2;outline-offset:2px}
@media(max-width:900px){.topbar .mobile-nav{display:block;margin-left:auto}.topbar .clock{margin-left:0}.topbar .mobile-nav>div{max-height:min(75vh,560px);overflow:auto}}
@media(max-width:520px){.topbar{gap:8px}.topbar .clock{display:none}.desktopicons{flex-wrap:wrap;gap:8px}.desktopicons button{width:90px}}
.admin-commands,.offline-export{margin-top:24px;padding:19px;border:1px solid #ddcfe9;border-radius:13px;background:#f8f4ff}.admin-commands h4,.offline-export h4{font:27px "Patrick Hand",cursive;color:#62517e;margin:0 0 7px}.admin-commands p,.offline-export p{margin:5px 0 14px}.admin-command-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.admin-command-row label{min-width:min(250px,100%);flex:1;margin:0}.admin-command-row button{min-height:43px}.offline-export code{font-family:"DM Mono",monospace}.profile-toolbar>div{display:flex;flex-wrap:wrap;gap:7px}
/* Few quiet pixel shapes. They never intercept a click or cover navigation. */
.season-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4}.season-piece{position:absolute;top:-20px;animation:season-fall linear infinite;filter:drop-shadow(0 1px 1px #54446e33)}.season-piece.snow{width:9px;height:9px;background:#f6fdff;clip-path:polygon(40% 0,60% 0,60% 36%,100% 36%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 36%,40% 36%)}.season-piece.leaves{width:11px;height:14px;background:#b87973;clip-path:polygon(50% 0,95% 24%,90% 64%,53% 90%,44% 100%,36% 84%,5% 66%,4% 28%)}.season-piece.leaves:nth-child(3n){background:#b8a46c}.season-piece.leaves:nth-child(3n + 1){background:#a98e9b}@keyframes season-fall{from{transform:translate3d(0,-20px,0) rotate(0)}to{transform:translate3d(var(--drift,0px),calc(100vh + 50px),0) rotate(120deg)}}@media(prefers-reduced-motion:reduce){.season-piece{display:none}}
/* J0C3LYN's own transparent juicebox drawing replaces the earlier carton art. */
.artist-studio-inner{grid-template-columns:minmax(170px,235px) minmax(0,1fr)}
.juice-art{position:relative;display:block;width:min(225px,100%);margin:auto;line-height:0}
.artist-studio-inner .juice-art img{display:block;width:100%;height:auto;max-width:100%;filter:drop-shadow(0 8px 12px #76608533)}
.juice-drop{position:absolute;top:8%;left:83%;width:5px;height:8px;border-radius:75% 20% 75% 75%;background:#ffbd65;box-shadow:inset -1px -1px #e9994b88;pointer-events:none;transform:rotate(45deg);animation:juice-drip 4.4s ease-in infinite}
.juice-drop-two{left:85%;animation-delay:2.2s;animation-duration:5.2s}
@keyframes juice-drip{0%,12%{opacity:0;transform:translateY(0) rotate(45deg) scale(.5)}18%{opacity:.85}80%{opacity:.78}100%{opacity:0;transform:translateY(76px) rotate(45deg) scale(1)}}
.juice-cloud img{width:38px;height:38px;left:7px;top:-26px;object-fit:contain;image-rendering:auto}
.avatar-float img{width:34px;height:38px;left:12px;top:-16px;object-fit:contain;image-rendering:auto}
@media(max-width:620px){.artist-studio-inner{grid-template-columns:120px minmax(0,1fr)}.juice-art{width:115px}.artist-studio-inner .juice-art img{width:100%}.juice-drop{width:3px;height:5px}}
@media(prefers-reduced-motion:reduce){.juice-drop{display:none}}

/* A classic pixel cursor and a little chrome on the diary windows. */
html,body{cursor:url('assets/y2k-arrow.svg') 2 2,auto}
button,a,summary,label[for],.button,.choice,.swatch,.catalog-item,.shop-card button,.game-stage canvas{cursor:url('assets/y2k-hand.svg') 11 3,pointer}
input,textarea,[contenteditable="true"]{cursor:text}
.window{box-shadow:0 22px 70px #5c428227,inset 0 0 0 1px #fff9,0 6px 0 #c9b2df55}
.windowbar{background:linear-gradient(93deg,#d9c6ffdd,#ffd4e9e8 45%,#bfeff9df);border-bottom:2px solid #ba9bd185}
.windowdots,.windowbar>span:last-child{letter-spacing:3px}
.button,.desktopicons button,.album{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.button:hover,.desktopicons button:hover{transform:translateY(-2px);filter:saturate(1.13)}
.button:focus-visible,.avatar-tabs button:focus-visible,.shop-card button:focus-visible{outline:3px solid #7855b3;outline-offset:3px}
.sectionhead h2,.herocopy h1{text-shadow:3px 3px 0 #ffd1eb,6px 6px 0 #a7ddf19c}
.portrait{width:285px;height:285px;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 8px #e9c9f576,0 0 0 11px #fff9,0 30px 70px #7254a033}
.portrait::before{z-index:2;inset:12px;border:2px dashed #ffffffc9;border-radius:50%;pointer-events:none}
.portrait img,.profilepic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;image-rendering:pixelated}
.orbit::after{content:"";position:absolute;bottom:-16px;right:10%;width:72px;height:50px;background:url('assets/angel-wings.svg') center/contain no-repeat;filter:drop-shadow(2px 5px 2px #bd91c577);pointer-events:none}
.profilepic{overflow:hidden;border:5px solid white;box-shadow:0 0 0 6px #eac9ed99,0 12px 23px #8664a949}
.profilepic img{object-position:50% 29%}
@media(max-width:520px){.portrait{width:220px;height:220px}.orbit::after{right:4%;width:54px}}

/* Seasonal pieces are original 24px sprites, kept behind all controls. */
.season-piece.snow,.season-piece.leaves{background-color:transparent;clip-path:none;background-repeat:no-repeat;background-position:center;background-size:contain}
.season-piece.snow{width:21px;height:21px;background-image:url('assets/pixel-snowflake.svg');filter:drop-shadow(1px 2px 1px #7795bd55)}
.season-piece.leaves{width:18px;height:18px;background-image:url('assets/pixel-leaf.svg');filter:drop-shadow(1px 2px 1px #82645655)}
.season-piece.leaves:nth-child(3n){background-color:transparent;filter:hue-rotate(28deg) drop-shadow(1px 2px 1px #82645655)}
.season-piece.leaves:nth-child(3n + 1){background-color:transparent;filter:hue-rotate(-25deg) drop-shadow(1px 2px 1px #82645655)}
.season-layer{z-index:3}

/* Two tabs within the pixel avatar creator, like a tiny seasonal game catalog. */
.avatar-tabs{display:flex;gap:8px;padding:13px 18px;border-bottom:1px solid #e2c8ec;background:linear-gradient(90deg,#f6ecff,#ffe9f3,#e9f9ff)}
.avatar-tabs button{padding:9px 17px;border-radius:9px;border:1px solid #bc9ccd;background:#ffffffb9;color:#59436c;font:13px "DM Mono",monospace;cursor:url('assets/y2k-hand.svg') 11 3,pointer}
.avatar-tabs button[aria-selected="true"]{background:#503963;color:#fff4fc;box-shadow:3px 3px 0 #eeb5d8}
#avatar-shop-panel[hidden],#avatar-builder-panel[hidden]{display:none!important}
#avatar-shop-panel{padding:27px;background:radial-gradient(circle at 8% 5%,#8f6ca04d,transparent 25%),radial-gradient(circle at 85% 25%,#6b9cb842,transparent 27%),linear-gradient(150deg,#322344,#573956 55%,#323a62);color:#fff2fa}
.shop-header{display:flex;gap:25px;align-items:end;justify-content:space-between;flex-wrap:wrap;border-bottom:2px dashed #f5d5f080;padding-bottom:20px}
.shop-header h3{font:clamp(32px,5vw,56px) "DotGothic16",monospace;margin:7px 0;color:#fff3e8;text-shadow:3px 3px 0 #b67a9c}
.shop-header p:not(.eyebrow){max-width:520px;margin:7px 0;font-size:14px;line-height:1.5}
.shop-header .eyebrow{color:#d5b6e8}.shop-wallet{flex:none;border:2px solid #ffe7f4;box-shadow:4px 4px 0 #312239;padding:14px 17px;background:#efdbef;color:#483155;border-radius:9px;font:13px "DM Mono",monospace;white-space:pre-wrap}
.shop-strip{padding:13px;margin:19px 0 10px;border:1px solid #eac9e880;border-radius:8px;background:#ffffff18;text-align:center;font:11px "DM Mono",monospace;letter-spacing:.03em}
.shop-status{margin:12px 0 20px;font:12px/1.6 "DM Mono",monospace;color:#f9dfcc}
.shop-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.shop-card{border:2px solid #f9deeda8;border-radius:13px;background:linear-gradient(155deg,#fff8f9,#eadcf5 64%,#c7e9ee);color:#443153;padding:13px;box-shadow:5px 6px 0 #281d3680;display:flex;flex-direction:column;gap:8px;min-width:0}
.shop-card:nth-child(4n+2){background:linear-gradient(145deg,#fbebf7,#decde9 63%,#f3d7b7)}
.shop-card:nth-child(4n+3){background:linear-gradient(145deg,#f7eafa,#cde6ec 62%,#e3c5db)}
.shop-card.is-owned{border-color:#a8e6ce}
.shop-art{width:100%;max-width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border:3px solid #fff;border-radius:8px;background:#392947;box-shadow:0 4px 8px #321c3955}
.shop-card>div{display:flex;flex:1;flex-direction:column}.shop-card small{font:9px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#856993}
.shop-card h4{font:23px/1.05 "Patrick Hand",cursive;margin:8px 0 5px}.shop-card p{font:13px "DM Mono",monospace;margin:0 0 12px;color:#774e7f}
.shop-card button{margin-top:auto;padding:9px 7px;font-size:12px;width:100%}.shop-card button:disabled{opacity:.58;cursor:not-allowed}
.shop-footnote{font:11px/1.6 "DM Mono",monospace;text-align:center;margin:26px 0 4px;color:#f1d7e9}
.catalog-item.is-locked{border-color:#b28eba;opacity:.7}.catalog-item.is-locked span:last-child{font-style:italic}
#arcade-museum{display:flex;width:auto;min-height:168px;position:relative;overflow:hidden;background:linear-gradient(140deg,#f6dde7 0%,#f8e0b8 18%,#fcf1ab 35%,#cbead6 53%,#c8dff0 72%,#dec9f3 100%);color:#4c385e}
#arcade-museum::after{content:"";position:absolute;top:12px;right:10px;width:38px;height:28px;background:url('assets/angel-wings.svg') center/contain no-repeat;opacity:.75;pointer-events:none}
#arcade-museum .level-meter{background:#73568755}
#arcade-museum .level-meter span{background:linear-gradient(90deg,#e995bb,#f7d782,#abe0b5,#a2c7e7,#c39ad7)}
@media(max-width:940px){.shop-items{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:670px){.shop-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.shop-card{padding:9px}.shop-card h4{font-size:21px}.shop-header{align-items:start}.shop-wallet{white-space:normal}}
@media(max-width:430px){#avatar-shop-panel{padding:17px}.avatar-tabs{padding:10px}.avatar-tabs button{font-size:11px;padding:9px}.shop-card small{font-size:8px}}