button, a, summary { touch-action: manipulation; }
button { cursor: pointer; font: bold 12px/1.3 Verdana, sans-serif; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #fff200; outline-offset: 3px; }
.y2k-burst { border: 0; padding: 0; }
.y2k-wordart { font-size: clamp(30px, 5.2vw, 54px); }
.y2k-wordart span { animation: y2k-hue 7s linear infinite; }
.quick-settings { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 2px ridge silver; background: #10052b; color: #fff200; margin-top: 6px; font-size: 11px; }
.quick-settings button, .silver, .lightbox-controls button { padding: 5px 7px; border: 2px outset #eee; background: linear-gradient(#eee, #aaa); color: #000; }
.quick-settings button[aria-pressed="true"] { border-style: inset; background: #fff200; }
.quick-settings strong { margin-right: auto; }
.y2k-welcome { grid-template-columns: minmax(0, 1fr) 190px; }
.portrait { order: 2; }
.menu-toggle { display: none; }
.y2k-frame { margin: 8px 0; }
.y2k-frame:hover { transform: scale(1.02); }
.photo { display: block; margin: 0; width: 100%; padding: 0; border: 0; background: #100525; color: #fff; }
.photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.portrait .photo img { aspect-ratio: 809 / 1280; }
.fan-note { font-size: 10px; color: #bfc0ff; }
.primary { display: inline-block; padding: 9px 8px; text-decoration: none; font-size: 12px; }
.archive-item h3 { font: bold 16px/1.3 "Comic Sans MS", Verdana, sans-serif; color: #00f0ff; margin: 8px 0; }
.archive-item p { margin: 8px 0; }
.album { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.album.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.album.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.album figure { width: 100%; max-width: 220px; margin: 4px 0; min-width: 0; padding: 4px; border: 3px outset silver; background: #17102b; }
.album .photo img { min-height: 110px; max-height: 290px; }
.album figcaption { text-align: center; margin: 6px 0 2px; color: #fff200; font: 11px/1.3 Verdana, sans-serif; }
.y2k-pet { border: 0; background: none; width: 100%; color: #000; padding: 6px; }
#counter { font: bold 23px/1.1 "Courier New", monospace; color: #39ff14; letter-spacing: 3px; text-shadow: 0 0 7px #39ff14; }
#counter.bump { animation: digit .2s ease-out; }
@keyframes digit { from { transform: translateY(-4px); } to { transform: translateY(0); } }
#quote { padding: 15px 10px; margin: 8px 0 14px; border: 2px dashed #ff2bd6; color: #fff200; background: #200027; font: bold 19px/1.4 "Comic Sans MS", Verdana, sans-serif; }
details { margin-top: 14px; }
summary { cursor: pointer; color: #00f0ff; padding: 7px 0; }
.guest .y2k-button { display: inline-block; text-decoration: none; padding: 10px; }
.y2k-player-controls img, .y2k-window-bar img, .lightbox-bar img { width: 15px; height: 15px; vertical-align: middle; }
.y2k-window-bar { touch-action: none; }
.y2k-window-bar button { display: grid; place-items: center; }
.y2k-toast { max-width: calc(100vw - 30px); text-align: center; }
.footer-button { color: #33ccff; background: none; border: 0; text-decoration: underline; padding: 5px; font-size: 10px; }
#lightbox { padding: 8px; border: 4px ridge silver; background: #c0c0c0; color: #000; max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); }
#lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox-bar { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 4px 6px; background: linear-gradient(#0a5bff, #0831d9); color: #fff; font-size: 12px; }
.lightbox-bar button { border: 2px outset #fff; background: #c0391c; padding: 4px; }
#large-photo { display: block; height: auto; max-height: calc(100svh - 145px); max-width: 100%; object-fit: contain; margin: 8px auto; }
.lightbox-controls { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
body[data-effects="soft"] .y2k-burst, body[data-effects="soft"] .y2k-globe, body[data-effects="soft"] .y2k-new, body[data-effects="soft"] .y2k-blinkie, body[data-effects="soft"] .y2k-wordart span { animation: none; }
body[data-effects="off"], body[data-effects="off"] *, body[data-effects="off"] *::before { animation: none !important; transition: none !important; }
body[data-effects="off"]::before { animation: none; }
body[data-effects="off"] .y2k-marquee span, body[data-effects="off"] .y2k-track span { padding-left: 0; transform: none; }
body[data-effects="off"] .y2k-spark { display: none; }
@media (max-width: 760px) {
.y2k-header { grid-template-columns: 48px minmax(0,1fr) 48px; }
.y2k-burst { width: 46px; height: 46px; font-size: 9px; }
.y2k-globe { width: 44px; height: 44px; }
.y2k-wordart { font-size: clamp(25px, 7vw, 46px); }
.y2k-wordart span + span { font-size: .5em; letter-spacing: 0; }
.y2k-tagline { font-size: 12px; }
.y2k-clock { font-size: 9px; }
.y2k-layout > aside { display: contents; }
.y2k-layout > main { order: 1; }
.y2k-layout > aside > :not(nav) { order: 2; }
.y2k-nav a { padding: 9px 6px; }
.y2k-welcome { display: block; }
.y2k-welcome::after { content: ''; display: block; clear: both; }
.portrait { float: right; width: 128px; margin: 2px 0 10px 12px; }
.desktop-menu-title { display: none; }
.menu-toggle { display: block; width: 100%; padding: 9px; color: #fff200; background: linear-gradient(90deg, #1f3cff, #7a1cff); border: 2px outset #6c8cff; text-align: left; }
.y2k-nav { display: none; }
nav.is-open .y2k-nav { display: grid; }
.y2k-hello { font-size: 20px; }
.y2k-construction strong { font-size: 10px; text-align: center; }
.album.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
.album figcaption { font-size: 10px; }
.y2k-window { width: min(300px, calc(100vw - 24px)); }
.quick-settings { gap: 5px; }
.quick-settings button { min-height: 34px; font-size: 10px; }
.quick-settings strong { width: 100%; }
.lightbox-controls button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.y2k-marquee span, .y2k-track span { padding-left: 0; }
.y2k-spark { display: none; }
}
