:root {
  color-scheme: light;
  --ink: #211329;
  --paper: #fffaff;
  --violet: #8f55cf;
  --violet-deep: #4f257d;
  --violet-dark: #2b133e;
  --lilac: #d5b8f5;
  --lilac-pale: #f2e9ff;
  --blue: #a8dfff;
  --yellow: #fff19b;
  --pink: #ffb8d5;
  --line: 3px solid var(--ink);
  --mouse-x: 50%;
  --mouse-y: 50%;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
html.gliding { scroll-behavior: auto; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,.55), transparent 26rem),
    linear-gradient(135deg, #e9dbfa 0%, #c6a2ed 52%, #d9c3f3 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  transition: background-color .35s ease, color .35s ease;
}

body.night {
  color-scheme: dark;
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(148,91,205,.17), transparent 23rem),
    linear-gradient(135deg, #170923, #2d1543 48%, #1a0b29);
  color: #fffaff;
}

body.night .topbar { background: rgba(39,18,57,.86); border-color: rgba(255,255,255,.2); }
body.night .logo, body.night nav a { color: #fffaff; }
body.night .about { background: #251137; }
body.night .section-head p, body.night .number-label { color: #ccb0ea; }
body.night footer { background: #12071b; color: #d8c3ee; }

button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 4px; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,.22);
  pointer-events: none;
}
.scroll-progress i { display: block; width: 0; height: 100%; background: var(--yellow); box-shadow: 0 0 10px rgba(255,241,155,.7); }

.section-transition { position: fixed; top: 98px; left: 50%; z-index: 800; visibility: hidden; color: white; opacity: 0; pointer-events: none; transform: translate(-50%, -25px) scale(.72) rotate(-7deg); transition: opacity .18s ease, transform .25s cubic-bezier(.2,.9,.3,1.3), visibility .25s; }
.section-transition::before { position: absolute; inset: -12px -20px; z-index: -1; border: var(--line); border-radius: 15px 8px 17px 9px; background: linear-gradient(135deg, #8f55cf, #5b258a); box-shadow: 6px 6px 0 var(--ink); content: ""; }
.section-transition > div { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.section-transition span { color: var(--yellow); font-size: 1rem; letter-spacing: .12em; }
.section-transition strong { font-family: Arial Black, Impact, sans-serif; font-size: 1.15rem; letter-spacing: -.03em; }
.section-transition small { font-family: "Comic Sans MS", cursive; font-size: .72rem; font-weight: 900; }
.section-transition.active { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1) rotate(2deg); }
.section-transition.leaving { opacity: 0; transform: translate(-50%, -22px) scale(.8) rotate(7deg); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .11;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  gap: 11px;
  background: #6f39aa;
  color: white;
  text-align: center;
  transition: opacity .45s ease, visibility .45s ease;
}

.page-loader.done { opacity: 0; visibility: hidden; }
.loader-face { font-size: 2.5rem; animation: loader-hop .6s ease-in-out infinite alternate; }
.page-loader strong { font-family: Arial Black, Impact, sans-serif; font-size: 2rem; letter-spacing: -2px; }
.loader-line { width: 180px; height: 8px; overflow: hidden; border: 2px solid white; border-radius: 99px; }
.loader-line i { display: block; width: 40%; height: 100%; background: var(--yellow); animation: loader-slide .8s ease-in-out infinite alternate; }

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  color: var(--yellow);
  font-size: 1.15rem;
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--violet-dark);
  transform: translate(-50%, -50%);
  transition: width .12s ease, height .12s ease, font-size .12s ease;
}

.cursor-follower.big { font-size: 2rem; }

.cursor-particle {
  position: fixed;
  z-index: 119;
  color: #fff0a8;
  font-size: .7rem;
  pointer-events: none;
  animation: cursor-fade .65s ease-out forwards;
}
.cursor-particle.music-trail { color: var(--pink); font-size: .92rem; }

.topbar {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: min(1060px, calc(100% - 30px));
  min-height: 62px;
  align-items: center;
  padding: 8px 10px 8px 16px;
  border: 2px solid rgba(33,19,41,.18);
  border-radius: 18px;
  background: rgba(255,250,255,.82);
  box-shadow: 0 14px 40px rgba(53,22,85,.16);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.logo { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--ink); font-weight: 900; text-decoration: none; }
.logo-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--ink); border-radius: 12px 6px 11px 7px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-size: .7rem; transform: rotate(-4deg); }
nav { display: flex; align-items: center; gap: 4px; }
nav a { padding: 10px 13px; border-radius: 11px; color: var(--ink); font-size: .88rem; font-weight: 800; text-decoration: none; transition: transform .16s ease, background .16s ease; }
nav a:hover { background: var(--lilac-pale); transform: translateY(-2px) rotate(-2deg); }

.top-actions { display: flex; align-items: center; justify-self: end; gap: 7px; }
.sound-toggle { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); cursor: pointer; font-size: 1rem; font-weight: 900; transition: transform .15s ease, box-shadow .15s ease; }
.sound-toggle:hover { transform: rotate(-10deg) scale(1.06); box-shadow: 1px 2px 0 var(--ink); }
.sound-toggle[aria-pressed="false"] { background: #d8cedf; color: #6e6474; }

.lights {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--violet-dark);
  box-shadow: 3px 3px 0 var(--ink);
  color: white;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lights:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

main { overflow: clip; }
.hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); align-items: center; gap: clamp(35px, 6vw, 90px); padding: 125px max(7vw, 28px) 80px; isolation: isolate; }

.hero-wallpaper { position: absolute; inset: 0; z-index: -4; overflow: hidden; }
.hero-wallpaper img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.15); transform: scale(1.07); animation: hero-zoom 18s ease-in-out infinite alternate; }
.hero-wash { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(87,41,128,.93) 0%, rgba(117,61,164,.73) 43%, rgba(82,39,120,.3) 100%); }
.hero::after { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 72% 45%, transparent 0 22%, rgba(46,18,70,.2) 58%, rgba(29,10,45,.48) 100%); content: ""; }

.orbit { position: absolute; z-index: -1; border: 2px dashed rgba(255,255,255,.3); border-radius: 50%; animation: orbit-spin 22s linear infinite; }
.orbit::before, .orbit::after { position: absolute; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--violet-dark); content: "✦"; }
.orbit-one { top: 14%; right: 3%; width: 390px; height: 390px; }
.orbit-one::before { top: 5%; left: 15%; }
.orbit-one::after { right: -10px; bottom: 25%; content: "♡"; }
.orbit-two { right: 33%; bottom: 5%; width: 190px; height: 190px; animation-direction: reverse; animation-duration: 15s; }
.orbit-two::before { right: 8%; bottom: 0; width: 30px; height: 30px; }
.orbit-two::after { display: none; }

.hero-copy { position: relative; z-index: 4; max-width: 650px; color: white; }
.mini-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 11px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); font-family: "Comic Sans MS", cursive; font-size: .84rem; font-weight: 900; transform: rotate(-3deg); }
.mini-label span { width: 8px; height: 8px; border-radius: 50%; background: #6d35ad; animation: dot-blink 1s steps(2) infinite; }

h1 { margin: 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(5.4rem, 12vw, 10.5rem); font-weight: 900; line-height: .69; letter-spacing: -.095em; text-transform: lowercase; }
h1 span { display: inline-block; color: white; text-shadow: 7px 7px 0 var(--violet-dark); animation: word-wobble 4s ease-in-out infinite; }
h1 em { display: inline-block; padding-right: .08em; color: var(--yellow); font-style: normal; -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink); transform: rotate(-4deg); }
.hero-copy > p { max-width: 470px; margin: 28px 0 0; font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 900; line-height: 1.5; }

.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 26px; }
.main-button, .scribble-button, .spotify-link { position: relative; overflow: hidden; border: var(--line); cursor: pointer; font-weight: 900; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.main-button { display: inline-flex; min-height: 56px; align-items: center; gap: 14px; padding: 0 19px; border-radius: 14px 8px 16px 9px; background: white; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.main-button b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--violet); color: white; }
.scribble-button { min-height: 50px; padding: 0 16px; border-radius: 8px 14px 7px 13px; background: var(--pink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(2deg); }
.game-button { position: relative; min-height: 48px; overflow: hidden; padding: 0 15px; border: var(--line); border-radius: 50%; background: var(--blue); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; font-weight: 900; transform: rotate(-3deg); transition: transform .15s ease, box-shadow .15s ease; }
.word-hunt-button { position: relative; min-height: 48px; overflow: hidden; padding: 0 15px; border: var(--line); border-radius: 10px 17px 9px 15px; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; font-weight: 900; transform: rotate(2deg); transition: transform .15s ease, box-shadow .15s ease; }
.main-button:hover, .scribble-button:hover, .spotify-link:hover, .game-button:hover, .word-hunt-button:hover { transform: translate(3px, 3px) rotate(-1deg); box-shadow: 2px 2px 0 var(--ink); }

.hero-collage { position: relative; z-index: 3; width: min(610px, 100%); justify-self: center; transform-style: preserve-3d; transition: transform .12s ease-out; }
.main-photo { margin: 0; padding: 13px 13px 24px; border: 4px solid var(--ink); border-radius: 8px 14px 7px 12px; background: #fff; box-shadow: 18px 19px 0 rgba(31,14,47,.72); color: var(--ink); transform: rotate(2.2deg); }
.main-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; border: 3px solid var(--ink); object-fit: cover; animation: photo-breathe 6s ease-in-out infinite alternate; }
.main-photo figcaption { padding-top: 17px; font-family: "Comic Sans MS", cursive; font-size: 1.18rem; font-weight: 900; text-align: center; }
.tape { position: absolute; z-index: 5; background: rgba(255,241,155,.85); box-shadow: 0 2px 5px rgba(0,0,0,.13); }
.tape-top { top: -14px; left: 41%; width: 125px; height: 38px; transform: rotate(-7deg); }
.burst-sticker { position: absolute; right: -38px; bottom: 62px; z-index: 6; display: grid; width: 126px; height: 126px; place-items: center; border: 3px solid var(--ink); border-radius: 46% 54% 39% 61% / 59% 35% 65% 41%; background: var(--yellow); box-shadow: 7px 7px 0 var(--ink); cursor: pointer; font-family: Arial Black, Impact, sans-serif; font-size: 1.15rem; line-height: .9; transform: rotate(10deg); animation: sticker-float 3s ease-in-out infinite; }
.burst-sticker:hover { animation-play-state: paused; transform: rotate(-8deg) scale(1.08); }
.tiny-note { position: absolute; z-index: 7; font-family: "Comic Sans MS", cursive; font-weight: 900; }
.note-a { top: 11%; left: -52px; color: white; font-size: 1rem; line-height: 1.1; text-align: center; transform: rotate(-11deg); }
.note-b { top: -36px; right: 12%; color: var(--yellow); font-size: 1.4rem; letter-spacing: 5px; transform: rotate(6deg); }

.loose-stickers { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.loose-sticker { position: absolute; display: grid; place-items: center; border: var(--line); box-shadow: 5px 5px 0 var(--ink); cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .15s ease, scale .15s ease; }
.loose-sticker:active, .loose-sticker.dragging { z-index: 10; cursor: grabbing; box-shadow: 2px 2px 0 var(--ink); scale: 1.08; }
.sticker-heart { top: 22%; left: 48%; width: 66px; height: 66px; border-radius: 50%; background: var(--pink); font-size: 2.1rem; transform: rotate(10deg); }
.sticker-star { right: 4%; bottom: 20%; width: 58px; height: 58px; border-radius: 16px 7px 15px 8px; background: var(--yellow); font-size: 1.7rem; transform: rotate(-12deg); }
.sticker-hc { bottom: 14%; left: 4%; width: 72px; height: 52px; border-radius: 11px 18px 10px 17px; background: var(--blue); font-family: Arial Black, sans-serif; font-size: .9rem; transform: rotate(6deg); }
.sticker-note { top: 15%; right: 33%; width: 53px; height: 53px; border-radius: 50% 35% 48% 31%; background: var(--yellow); font-size: 1.7rem; transform: rotate(-9deg); }
.sticker-yaha { right: 44%; bottom: 20%; width: 78px; height: 48px; border-radius: 50%; background: var(--pink); font-family: Arial Black, sans-serif; font-size: .76rem; transform: rotate(9deg); }
.sticker-purple { right: 24%; bottom: 7%; width: 86px; height: 44px; border-radius: 8px 17px 9px 16px; background: #c497ee; font-family: "Comic Sans MS", cursive; font-size: .75rem; font-weight: 900; transform: rotate(-5deg); }

.scroll-down { position: absolute; bottom: 25px; left: 50%; z-index: 8; display: grid; gap: 4px; color: white; font-size: .72rem; font-weight: 900; text-align: center; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-down span { font-size: 1.4rem; animation: scroll-hop 1s ease-in-out infinite; }

.news-ticker { position: relative; z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; border-block: var(--line); background: var(--yellow); color: var(--ink); }
.news-badge { z-index: 2; display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 0 18px; border-right: var(--line); background: var(--ink); color: white; font-family: Arial Black, Arial, sans-serif; font-size: .78rem; letter-spacing: 1px; white-space: nowrap; }
.news-badge i { width: 9px; height: 9px; border-radius: 50%; background: #ff4b85; box-shadow: 0 0 0 4px rgba(255,75,133,.2); animation: news-blink .8s steps(2) infinite; }
.news-window { overflow: hidden; }
.news-track { display: flex; width: max-content; min-height: 48px; align-items: center; animation: news-left 95s linear infinite; will-change: transform; }
.ticker-running .news-track { animation: none; }
.news-run { display: flex; flex: none; align-items: center; }
.news-run span { display: inline-flex; align-items: center; font-family: Arial Black, Arial, sans-serif; font-size: .76rem; letter-spacing: .7px; white-space: nowrap; }
.news-run span::after { margin: 0 18px; color: var(--violet-deep); content: "★"; }

.section-pad { padding: clamp(85px, 10vw, 140px) max(7vw, 28px); }
.about { position: relative; isolation: isolate; background-color: #f8f0ff; background-image: radial-gradient(#c9a7ec 1.6px, transparent 1.6px); background-size: 24px 24px; transition: background-color .35s ease; }
.section-stickers { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.about-chi { top: 7%; right: 3%; width: 69px; height: 51px; border-radius: 17px 8px 19px 9px; background: var(--blue); font-family: Arial Black, sans-serif; font-size: .75rem; transform: rotate(8deg); }
.about-ura { bottom: 9%; left: 3%; width: 65px; height: 65px; border-radius: 50%; background: var(--yellow); font-family: Arial Black, sans-serif; font-size: .72rem; transform: rotate(-9deg); }
.about-face { right: 3%; bottom: 7%; width: 116px; height: 48px; border-radius: 40%; background: white; font-size: .62rem; transform: rotate(5deg); }
.about-love { top: 45%; left: 2%; width: 50px; height: 50px; border-radius: 15px 7px 14px 9px; background: var(--pink); font-size: 1.6rem; transform: rotate(-7deg); }
.section-head { display: flex; width: min(1180px, 100%); align-items: end; justify-content: space-between; gap: 30px; margin: 0 auto 48px; }
.section-head p, .number-label { margin: 0; color: #6b438f; font-family: "Comic Sans MS", cursive; font-size: .88rem; font-weight: 900; }
.section-head h2 { max-width: 690px; margin: 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.8rem, 6vw, 6rem); line-height: .85; letter-spacing: -.07em; text-align: right; text-transform: lowercase; }

.fact-grid { display: grid; width: min(1180px, 100%); grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 auto; }
.fact-card { position: relative; min-height: 330px; overflow: hidden; padding: 25px; border: var(--line); box-shadow: 10px 10px 0 var(--ink); transform-style: preserve-3d; transition: transform .12s ease-out; }
.fact-card:nth-child(1) { border-radius: 36px 9px 22px 13px; transform: rotate(-1.5deg); }
.fact-card:nth-child(2) { border-radius: 10px 38px 11px 26px; transform: translateY(18px) rotate(1deg); }
.fact-card:nth-child(3) { border-radius: 25px 12px 40px 8px; transform: rotate(-.7deg); }
.purple-card { background: #a768dc; color: white; }
.blue-card { background: var(--blue); color: var(--ink); }
.yellow-card { background: var(--yellow); color: var(--ink); }
.fact-number { font-family: Arial, sans-serif; font-size: .78rem; font-weight: 900; }
.fact-doodle { position: absolute; top: 20px; right: 20px; font-size: 3.2rem; transform: rotate(8deg); }
.blue-card .fact-doodle { font-size: 1.1rem; }
.fact-card p { margin: 115px 0 7px; font-size: .82rem; font-weight: 900; text-transform: uppercase; }
.fact-card h3 { margin: 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.4rem, 4.2vw, 4.3rem); line-height: .83; letter-spacing: -.065em; }
.fact-card small { display: block; margin-top: 16px; font-family: "Comic Sans MS", cursive; font-size: .83rem; font-weight: 900; }
.music-doodle { animation: note-dance 1.2s ease-in-out infinite alternate; }

.music { position: relative; isolation: isolate; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px, 8vw, 110px); align-items: center; background: var(--violet-dark); color: white; }
.music-note-sticker { top: 8%; right: 3%; width: 57px; height: 57px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 1.65rem; transform: rotate(8deg); }
.music-play-sticker { bottom: 8%; left: 4%; width: 77px; height: 46px; border-radius: 9px 18px 8px 17px; background: #1ed760; color: #111; font-family: Arial Black, sans-serif; font-size: .72rem; transform: rotate(-7deg); }
.music-star-sticker { right: 3%; bottom: 7%; width: 92px; height: 47px; border-radius: 40%; background: var(--blue); color: var(--ink); font-size: .9rem; transform: rotate(6deg); }
.music-lei-sticker { top: 9%; left: 3%; width: 75px; height: 51px; border-radius: 50%; background: var(--pink); color: var(--ink); font-family: "Comic Sans MS", cursive; font-size: .72rem; font-weight: 900; transform: rotate(-8deg); }
.music-copy, .player-wrap { z-index: 2; }
.music-copy { justify-self: end; }
.music-copy h2 { margin: 13px 0 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(4.8rem, 9vw, 9rem); line-height: .72; letter-spacing: -.08em; }
.music-copy h2 span { color: var(--yellow); -webkit-text-stroke: 2px var(--ink); text-shadow: 6px 6px 0 #12071a; }
.music-note { margin: 27px 0 0; font-family: "Comic Sans MS", cursive; font-weight: 900; }
.spotify-link { display: inline-flex; min-height: 48px; align-items: center; margin-top: 22px; padding: 0 16px; border-radius: 10px; background: #1ed760; box-shadow: 5px 5px 0 #12071a; color: #111; }

.player-wrap { position: relative; width: min(660px, 100%); padding: 12px; border: 4px solid #12071a; border-radius: 18px 8px 22px 10px; background: #c497ee; box-shadow: 16px 16px 0 #12071a; transform: rotate(1deg); transition: transform .12s ease-out; }
.player-top { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 8px 10px; color: var(--ink); font-family: Arial, sans-serif; font-size: .75rem; font-weight: 900; }
.player-top div { display: flex; gap: 6px; }
.player-top i { width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.player-top i:nth-child(2) { background: var(--pink); }
.player-top i:nth-child(3) { background: var(--blue); }
.player-wrap iframe { display: block; border: 3px solid #12071a; border-radius: 10px; background: #20112f; }
.player-bottom { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 22px; padding-top: 10px; color: var(--ink); }
.player-bottom b { display: block; animation: disc-spin 1.2s linear infinite; }

.end-card { display: flex; width: min(1080px, calc(100% - 40px)); min-height: 290px; align-items: center; justify-content: space-between; gap: 30px; margin: 80px auto; padding: 45px clamp(28px, 6vw, 72px); border: var(--line); border-radius: 30px 11px 34px 13px; background: var(--pink); box-shadow: 11px 11px 0 var(--ink); transform: rotate(-1deg); }
.end-card p { margin: 0; font-family: "Comic Sans MS", cursive; font-weight: 900; }
.end-card h2 { margin: 5px 0 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(3.8rem, 8vw, 7rem); line-height: .85; letter-spacing: -.07em; }
.end-face { font-size: clamp(2rem, 5vw, 4.5rem); animation: end-bounce 2s ease-in-out infinite; }

.floating-music { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: grid; width: 72px; height: 72px; place-items: center; padding: 8px; border: var(--line); border-radius: 50%; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; transform: rotate(5deg); transition: transform .15s ease, opacity .2s ease; }
.floating-music:hover { transform: rotate(-8deg) scale(1.06); }
.floating-music span { font-size: 1.45rem; line-height: .8; animation: note-dance 1s ease-in-out infinite alternate; }
.floating-music small { font-size: .68rem; font-weight: 900; }

.toast { position: fixed; left: 50%; bottom: 30px; z-index: 140; max-width: calc(100vw - 40px); padding: 12px 17px; border: var(--line); border-radius: 11px 7px 12px 8px; background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); font-family: "Comic Sans MS", cursive; font-size: .88rem; font-weight: 900; opacity: 0; pointer-events: none; transform: translate(-50%, 18px) rotate(-2deg); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }

.win-popup { position: fixed; inset: 0; z-index: 1100; display: grid; visibility: hidden; place-items: center; background: rgba(32,13,46,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
.win-popup > div { display: grid; min-width: min(390px, calc(100vw - 38px)); gap: 8px; padding: 38px 28px; border: 4px solid var(--ink); border-radius: 25px 9px 29px 12px; background: var(--yellow); box-shadow: 14px 14px 0 var(--ink); color: var(--ink); text-align: center; transform: scale(.45) rotate(-12deg); transition: transform .38s cubic-bezier(.2,.9,.25,1.35); }
.win-popup span { color: var(--violet); font-size: 1.5rem; letter-spacing: .22em; }
.win-popup strong { font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.8rem, 10vw, 5.2rem); line-height: .8; letter-spacing: -.07em; }
.win-popup small { font-family: "Comic Sans MS", cursive; font-size: .85rem; font-weight: 900; }
.win-popup.show { visibility: visible; opacity: 1; }
.win-popup.show > div { transform: scale(1) rotate(2deg); }

.game-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(24,9,36,.75); opacity: 0; backdrop-filter: blur(8px); transition: opacity .2s ease; }
.game-overlay.open { opacity: 1; }
.game-overlay[hidden] { display: none; }
.game-window { width: min(700px, 100%); overflow: hidden; border: 4px solid var(--ink); border-radius: 18px 9px 21px 11px; background: var(--paper); box-shadow: 15px 15px 0 #14091e; color: var(--ink); transform: translateY(22px) rotate(1deg); transition: transform .22s ease; }
.game-overlay.open .game-window { transform: translateY(0) rotate(0); }
.game-bar { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding-left: 14px; border-bottom: var(--line); background: var(--violet); color: white; font-family: Arial, sans-serif; font-size: .77rem; font-weight: 900; }
.game-bar button { width: 48px; align-self: stretch; border: 0; border-left: var(--line); background: var(--yellow); color: var(--ink); cursor: pointer; font-size: 1.5rem; font-weight: 900; }
.game-info { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px; }
.game-info p { margin: 0; font-family: "Comic Sans MS", cursive; font-size: .78rem; font-weight: 900; }
.game-info h2 { margin: 2px 0 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2rem, 6vw, 3.5rem); line-height: .85; letter-spacing: -.06em; }
.game-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.game-stats span { padding: 6px 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--lilac-pale); font-family: Arial, sans-serif; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.game-arena { position: relative; height: min(360px, 42vh); overflow: hidden; margin: 0 20px; border: var(--line); border-radius: 12px 7px 14px 8px; background: linear-gradient(180deg, #643594, #351b52); cursor: crosshair; }
.game-arena > p { position: absolute; top: 50%; left: 50%; width: min(310px, 80%); margin: 0; color: white; font-family: "Comic Sans MS", cursive; font-size: .92rem; font-weight: 900; text-align: center; transform: translate(-50%,-50%); }
.catch-star { position: absolute; display: grid; width: 45px; height: 45px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); color: var(--violet-dark); cursor: pointer; font-size: 1.25rem; animation: catch-pop .23s ease-out, catch-pulse .7s ease-in-out infinite alternate; }
.start-game { display: block; min-width: 140px; min-height: 47px; margin: 17px auto 20px; padding: 0 20px; border: var(--line); border-radius: 11px 7px 12px 8px; background: var(--pink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font-weight: 900; }
.start-game:disabled { cursor: not-allowed; filter: grayscale(.5); opacity: .65; }

.word-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 14px; background: rgba(24,9,36,.82); opacity: 0; backdrop-filter: blur(10px); transition: opacity .22s ease; }
.word-overlay[hidden] { display: none; }
.word-overlay.open { opacity: 1; }
.word-window { width: min(1040px, 100%); max-height: calc(100svh - 28px); overflow: auto; border: 4px solid var(--ink); border-radius: 22px 9px 25px 12px; background: #fffaff; box-shadow: 17px 17px 0 #14091e; color: var(--ink); transform: translateY(25px) rotate(-1deg) scale(.97); transition: transform .25s cubic-bezier(.2,.9,.25,1.15); }
.word-overlay.open .word-window { transform: translateY(0) rotate(0) scale(1); }
.word-bar { position: sticky; top: 0; z-index: 30; }
.word-game-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 20px 22px 15px; }
.word-game-head p { margin: 0; color: #6b438f; font-family: "Comic Sans MS", cursive; font-size: .75rem; font-weight: 900; }
.word-game-head h2 { margin: 3px 0 8px; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .78; letter-spacing: -.07em; }
.word-game-head small { font-family: "Comic Sans MS", cursive; font-size: .78rem; font-weight: 900; }
.word-game-head > strong { flex: none; padding: 9px 12px; border: var(--line); border-radius: 10px 16px 9px 15px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-family: Arial Black, sans-serif; font-size: .82rem; transform: rotate(3deg); }
.word-arena { position: relative; height: min(550px, 58vh); min-height: 405px; overflow: hidden; margin: 0 20px; border: var(--line); border-radius: 16px 8px 18px 10px; background-color: #452364; background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px); background-size: 22px 22px; box-shadow: inset 0 0 70px rgba(17,5,27,.38); }
.word-slots { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 8; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.word-slot { position: relative; display: grid; min-width: 0; min-height: 68px; place-items: center; padding: 15px 5px 5px; border: 2px dashed rgba(255,255,255,.7); border-radius: 10px 6px 11px 7px; background: rgba(255,255,255,.1); color: white; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.word-slot small { position: absolute; top: 4px; left: 6px; color: rgba(255,255,255,.55); font-family: Arial, sans-serif; font-size: .55rem; font-weight: 900; }
.word-slot span { max-width: 100%; overflow: hidden; font-family: Arial Black, Arial, sans-serif; font-size: clamp(.56rem, 1.4vw, .78rem); opacity: .32; text-overflow: ellipsis; text-transform: lowercase; }
.word-slot.active { border-style: solid; border-color: var(--yellow); background: rgba(255,241,155,.18); box-shadow: 0 0 0 4px rgba(255,241,155,.13), 0 0 22px rgba(255,241,155,.3); animation: active-slot 1s ease-in-out infinite alternate; }
.word-slot.correct { border-style: solid; border-color: #79ee8d; background: #caffcf; box-shadow: 0 0 18px rgba(77,230,105,.45); color: #123d1c; transform: translateY(-2px); }
.word-slot.correct span { opacity: 1; }
.word-slot.wrong { border-style: solid; border-color: #ff658f; background: #ffb4c8; color: #571128; animation: wrong-slot .5s ease; }
.word-feedback { position: absolute; top: 96px; left: 50%; z-index: 6; width: min(620px, calc(100% - 30px)); margin: 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 9px 15px 8px 14px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-family: "Comic Sans MS", cursive; font-size: .78rem; font-weight: 900; text-align: center; transform: translateX(-50%); }
.word-piece { position: absolute; z-index: 10; min-width: 75px; min-height: 47px; padding: 0 13px; border: var(--line); border-radius: 10px 17px 9px 15px; background: white; box-shadow: 5px 5px 0 var(--ink); color: var(--ink); cursor: grab; font-family: Arial Black, Arial, sans-serif; font-size: .8rem; text-transform: lowercase; touch-action: none; user-select: none; transform: rotate(var(--piece-turn, 0deg)); transition: left .48s cubic-bezier(.2,.8,.2,1), top .48s cubic-bezier(.2,.8,.2,1), transform .14s ease, opacity .18s ease; }
.word-colour-0 { background: var(--yellow); }
.word-colour-1 { background: var(--pink); }
.word-colour-2 { background: var(--blue); }
.word-colour-3 { background: #c99df1; }
.word-piece:hover { transform: rotate(var(--piece-turn, 0deg)) translateY(-3px) scale(1.04); }
.word-piece.dragging-word { z-index: 40; cursor: grabbing; box-shadow: 2px 2px 0 var(--ink); transform: rotate(2deg) scale(1.09); transition: transform .12s ease; }
.word-piece.wrong { background: #ff91ae; animation: wrong-piece .5s ease; }
.word-piece.solved { opacity: 0; pointer-events: none; transform: scale(.2) rotate(20deg); }
.word-arena.scrambling .word-piece:not(.solved) { animation: scramble-piece .55s ease; }
.word-arena.wrong-answer { animation: wrong-arena .55s ease; }
.word-scramble { display: block; min-height: 44px; margin: 14px auto 18px; padding: 0 15px; border: var(--line); border-radius: 9px 15px 8px 14px; background: var(--pink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); cursor: pointer; font-size: .76rem; font-weight: 900; }
.word-window.complete .word-arena { box-shadow: inset 0 0 70px rgba(17,5,27,.25), 0 0 0 6px rgba(107,232,130,.3); }

body.party .hero { animation: party-hue 1s linear infinite; }
body.party .news-track { animation-duration: 8s; }

.sparkle { position: fixed; z-index: 1200; color: var(--yellow); pointer-events: none; text-shadow: 2px 2px 0 var(--ink); animation: sparkle-out .85s ease-out forwards; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.62); pointer-events: none; transform: scale(0); animation: ripple .55s ease-out; }
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.hero.section-arriving .hero-copy { animation: section-copy-land .68s cubic-bezier(.2,.9,.25,1.2); }
.about.section-arriving .fact-card { animation: section-card-land .7s cubic-bezier(.2,.9,.25,1.2); }
.about.section-arriving .fact-card:nth-child(2) { animation-delay: .07s; }
.about.section-arriving .fact-card:nth-child(3) { animation-delay: .14s; }
.music.section-arriving .music-copy { animation: section-copy-land .68s cubic-bezier(.2,.9,.25,1.2); }
.music.section-arriving .player-wrap { animation: section-player-land .75s cubic-bezier(.2,.9,.25,1.2) .08s both; }

footer { display: flex; justify-content: space-between; gap: 18px; padding: 22px max(5vw, 22px); border-top: var(--line); background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; font-size: .72rem; font-weight: 900; text-transform: uppercase; transition: background .35s ease, color .35s ease; }

@keyframes loader-hop { to { transform: translateY(-9px) rotate(3deg); } }
@keyframes loader-slide { from { transform: translateX(-10%); } to { transform: translateX(165%); } }
@keyframes cursor-fade { to { opacity: 0; transform: translateY(18px) rotate(80deg) scale(.4); } }
@keyframes hero-zoom { to { transform: scale(1.14) translate3d(-1%, -1%, 0); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes dot-blink { 50% { opacity: .3; } }
@keyframes word-wobble { 0%,100% { transform: rotate(0); } 50% { transform: rotate(1.2deg) translateY(-4px); } }
@keyframes photo-breathe { to { filter: saturate(1.16) contrast(1.03); transform: scale(1.01); } }
@keyframes sticker-float { 0%,100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes scroll-hop { 50% { transform: translateY(7px); } }
@keyframes news-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes news-blink { 50% { opacity: .35; } }
@keyframes note-dance { to { transform: translateY(-8px) rotate(10deg); } }
@keyframes disc-spin { to { transform: rotate(360deg); } }
@keyframes end-bounce { 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes sparkle-out { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(1.55) rotate(180deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes catch-pop { from { opacity: 0; transform: scale(.2) rotate(-90deg); } }
@keyframes catch-pulse { to { transform: scale(1.13) rotate(8deg); } }
@keyframes party-hue { to { filter: hue-rotate(360deg); } }
@keyframes section-copy-land { 0% { opacity: 0; transform: translateX(-45px) rotate(-3deg); } 60% { transform: translateX(7px) rotate(1deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes section-card-land { 0% { opacity: 0; scale: .82; translate: 0 55px; rotate: -5deg; } 70% { scale: 1.03; translate: 0 -5px; rotate: 1deg; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes section-player-land { 0% { opacity: 0; transform: translateX(55px) rotate(7deg) scale(.9); } 70% { transform: translateX(-7px) rotate(-1deg) scale(1.02); } 100% { opacity: 1; transform: rotate(1deg) scale(1); } }
@keyframes active-slot { to { transform: translateY(-3px) scale(1.025); } }
@keyframes wrong-slot { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-9px) rotate(-2deg); } 50% { transform: translateX(8px) rotate(2deg); } 75% { transform: translateX(-5px); } }
@keyframes wrong-piece { 0%,100% { transform: rotate(var(--piece-turn, 0deg)); } 25% { transform: translateX(-12px) rotate(-8deg); } 50% { transform: translateX(10px) rotate(8deg); } 75% { transform: translateX(-6px) rotate(-4deg); } }
@keyframes wrong-arena { 0%,100% { filter: none; transform: translateX(0); } 20% { filter: saturate(1.7); transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes scramble-piece { 0% { filter: blur(0); } 35% { filter: blur(2px); transform: scale(.72) rotate(20deg); } 100% { filter: blur(0); } }

.night-stars { position: fixed; inset: 0; z-index: 1; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.night-stars span { position: absolute; color: #fff3a8; font-size: var(--star-size, 12px); opacity: var(--star-opacity, .7); text-shadow: 0 0 8px rgba(255,243,168,.7); animation: night-twinkle var(--star-speed, 2.4s) ease-in-out infinite alternate; }
body.night .night-stars { opacity: 1; }
body.night .about, body.night .playground { background-color: #1b0b2a; background-image: radial-gradient(rgba(236,214,255,.17) 1.5px, transparent 1.5px); }
body.night .daily-note { border-color: #fff5fb; background: #3a1b50; box-shadow: 9px 9px 0 #0d0414; color: #fffaff; }
body.night .daily-stamp { border-color: #fff5fb; background: #8f55cf; box-shadow: 4px 4px 0 #0d0414; }
body.night .quiz-card, body.night .dress-card { border-color: #fff5fb; box-shadow: 12px 12px 0 #0d0414; }
body.night .quiz-card { background: #2b123e; color: #fffaff; }
body.night .quiz-answer { border-color: #fff5fb; box-shadow: 4px 4px 0 #0d0414; color: var(--ink); }

.loader-runway { position: relative; width: 250px; height: 112px; overflow: hidden; border-bottom: 3px dashed rgba(255,255,255,.7); }
.loader-duo { position: absolute; left: -94px; bottom: 5px; width: 88px; height: 88px; border: 3px solid var(--ink); border-radius: 25px 12px 27px 14px; box-shadow: 5px 5px 0 var(--ink); object-fit: cover; animation: loader-run 1.05s cubic-bezier(.25,.8,.35,1) infinite; }
.loader-dust { position: absolute; right: 15px; bottom: 18px; color: var(--yellow); font-size: .85rem; animation: loader-dust 1.05s ease-out infinite; }

.daily-note { position: relative; z-index: 3; display: grid; width: min(920px, calc(100% - 36px)); grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; margin: 55px auto; padding: 20px 24px; border: var(--line); border-radius: 26px 9px 29px 12px; background: #fffaff; box-shadow: 9px 9px 0 var(--ink); color: var(--ink); transform: rotate(-.6deg); }
.daily-stamp { display: grid; width: 68px; height: 68px; place-items: center; padding: 7px; border: var(--line); border-radius: 50%; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: rotate(4deg); }
.daily-stamp span { font-family: Arial Black, Impact, sans-serif; font-size: 1.25rem; line-height: 1; }
.daily-stamp small { font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.daily-note p { margin: 0 0 4px; color: #765197; font-family: "Comic Sans MS", cursive; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.daily-note strong { font-family: Arial Black, Impact, sans-serif; font-size: clamp(1rem, 2.4vw, 1.45rem); line-height: 1.1; }
.daily-scribble { color: var(--pink); font-size: 2.8rem; animation: daily-heart 1.5s ease-in-out infinite alternate; }

.playground { position: relative; z-index: 2; background-color: #c8a0ec; background-image: linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%), linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%); background-position: 0 0, 18px 18px; background-size: 36px 36px; transition: background-color .35s ease; }
.play-grid { display: grid; width: min(1180px, 100%); grid-template-columns: .72fr 1.28fr; gap: 28px; margin: 0 auto; }
.quiz-card, .dress-card { overflow: hidden; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); color: var(--ink); }
.quiz-card { border-radius: 31px 10px 35px 13px; background: #fffaff; transform: rotate(-.5deg); }
.dress-card { border-radius: 10px 34px 13px 38px; background: var(--yellow); transform: translateY(18px) rotate(.25deg); }
.play-card-top { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: var(--line); background: var(--violet-deep); color: white; font-family: Arial Black, Arial, sans-serif; font-size: .72rem; letter-spacing: .08em; }
.play-card-top i { display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid white; border-radius: 50%; font-style: normal; }
.dress-top { background: #ef78ad; color: var(--ink); }
.dress-top i { border-color: var(--ink); }
.studio-showoff { min-height: 30px; padding: 0 11px; border: 2px solid var(--ink); border-radius: 99px; background: #fff7bd; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); cursor: pointer; font: 900 .68rem/1 "Comic Sans MS", cursive; letter-spacing: 0; }
.quiz-body { min-height: 520px; padding: 27px; }
.quiz-kicker { margin: 0 0 14px; color: #765197; font-family: "Comic Sans MS", cursive; font-size: .78rem; font-weight: 900; }
.quiz-progress { height: 9px; overflow: hidden; border: 2px solid var(--ink); border-radius: 99px; background: #e9daf8; }
.quiz-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--violet)); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.quiz-body h3 { min-height: 84px; margin: 32px 0 22px; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .88; letter-spacing: -.055em; }
.quiz-answers { display: grid; gap: 10px; }
.quiz-answer { min-height: 52px; padding: 9px 13px; border: var(--line); border-radius: 11px 17px 10px 15px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font-size: .82rem; font-weight: 900; text-align: left; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.quiz-answer:nth-child(2n) { background: var(--blue); transform: rotate(.5deg); }
.quiz-answer:hover { background: var(--pink); box-shadow: 1px 1px 0 var(--ink); transform: translate(3px,3px) rotate(-1deg); }
.quiz-result { display: grid; min-height: 400px; place-items: center; align-content: center; text-align: center; }
.quiz-result > span { margin-bottom: 10px; font-size: 3rem; animation: result-pop 1s ease-in-out infinite alternate; }
.quiz-result small { font-family: "Comic Sans MS", cursive; font-size: .8rem; font-weight: 900; }
.quiz-result strong { font-family: Arial Black, Impact, sans-serif; font-size: clamp(3rem, 7vw, 5rem); line-height: .84; letter-spacing: -.07em; }
.quiz-result p { max-width: 340px; margin: 16px auto 20px; font-size: .84rem; font-weight: 800; line-height: 1.5; }
.quiz-restart { min-height: 44px; padding: 0 18px; border: var(--line); border-radius: 12px 7px 13px 8px; background: var(--pink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); cursor: pointer; font-weight: 900; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.dress-studio-shell { display: grid; grid-template-columns: minmax(350px, 1.08fr) minmax(260px, .92fr); background: #fff8c7; }
.dress-preview-pane { min-width: 0; padding: 14px; }
.wardrobe-panel { min-width: 0; padding: 15px; border-left: var(--line); background: #fffaff; }
.doll-version-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; }
.doll-version-row > strong { font: 900 .68rem/1 Arial Black, Arial, sans-serif; letter-spacing: .06em; }
.doll-version-picker { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.doll-version-picker button, .wardrobe-tabs button { min-height: 29px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 99px; background: white; color: var(--ink); cursor: pointer; font: 900 .64rem/1 "Comic Sans MS", cursive; }
.doll-version-picker button[aria-pressed="true"], .wardrobe-tabs button[aria-selected="true"] { background: var(--pink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px,-1px); }
.dress-stage { --stage-accent: #744a9c; position: relative; height: 430px; overflow: hidden; border: var(--line); border-radius: 24px 9px 27px 12px; background: linear-gradient(155deg, #faedff, #cda7ef); box-shadow: inset 0 0 42px rgba(79,37,125,.16); perspective: 900px; touch-action: none; transition: background .3s ease, box-shadow .3s ease; }
.dress-stage[data-version="lilac"] { --stage-accent: #6a3f9a; background: radial-gradient(circle at 50% 30%, #fff 0 8%, transparent 34%), linear-gradient(150deg,#ead5ff,#9c6bc8); }
.dress-stage[data-version="night"] { --stage-accent: #fff1a5; background: radial-gradient(circle at 75% 18%,#fff6bd 0 5%,transparent 5.5%), radial-gradient(circle at 22% 22%,#fff 0 1px,transparent 2px), linear-gradient(150deg,#251138,#65408b); box-shadow: inset 0 0 55px #12071a; }
.dress-stage[data-version="candy"] { --stage-accent: #df4e92; background: linear-gradient(135deg,#ffd8ea 0 35%,#fff2a8 35% 67%,#c9e9ff 67%); }
.dress-stage::after { position: absolute; right: -8%; bottom: -40%; width: 116%; height: 55%; border-radius: 50%; background: rgba(255,255,255,.3); content: ""; }
.dress-backdrop { position: absolute; inset: 24px 12px auto; color: rgba(79,37,125,.35); color: color-mix(in srgb, var(--stage-accent) 42%, transparent); font-size: 1.35rem; letter-spacing: 2rem; text-align: center; animation: backdrop-float 3s ease-in-out infinite alternate; }
.dress-hint { position: absolute; top: 11px; left: 50%; z-index: 20; max-width: calc(100% - 40px); margin: 0; overflow: hidden; padding: 6px 11px; border: 2px solid var(--ink); border-radius: 10px 16px 9px 15px; background: white; box-shadow: 3px 3px 0 var(--ink); font: 900 .72rem/1.2 "Comic Sans MS", cursive; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%) rotate(-1deg); }
.dress-hint.is-good { background: #bff2c7; }
.dress-hint.is-error { background: #ffb5ca; animation: dress-message-shake .3s ease; }
.dress-drop-label { position: absolute; top: 58px; left: 50%; z-index: 15; padding: 5px 12px; border: 2px dashed var(--stage-accent); border-radius: 99px; background: rgba(255,255,255,.78); color: var(--stage-accent); opacity: 0; font: 900 .62rem/1 Arial Black, Arial, sans-serif; letter-spacing: .05em; pointer-events: none; transform: translateX(-50%) scale(.8); transition: opacity .15s ease, transform .15s ease; }
.dress-stage.wardrobe-dragging .dress-drop-label { opacity: 1; transform: translateX(-50%) scale(1); }
.dress-turntable { position: absolute; bottom: 15px; left: 50%; z-index: 5; width: min(310px, 78%); aspect-ratio: 1; outline: 0; cursor: ew-resize; perspective: 900px; touch-action: none; transform: translateX(-50%); }
.dress-turntable:focus-visible { outline: 3px dashed #fff; outline-offset: 5px; }
.dress-doll { position: absolute; inset: 0; transform: rotateY(var(--doll-angle, 0deg)); transform-origin: 50% 62%; transform-style: preserve-3d; transition: transform .16s cubic-bezier(.2,.8,.2,1), filter .2s ease; pointer-events: none; }
.dress-turntable.is-turning .dress-doll { transition: none; }
.dress-stage[data-version="lilac"] .dress-doll { filter: drop-shadow(0 0 11px rgba(255,255,255,.75)) saturate(1.05); }
.dress-stage[data-version="night"] .dress-doll { filter: drop-shadow(0 0 14px rgba(226,194,255,.55)) brightness(.97); }
.dress-stage[data-version="candy"] .dress-doll { filter: drop-shadow(0 0 9px rgba(255,94,161,.34)) saturate(1.08); }
.dress-character, .dress-worn-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.dress-character { z-index: 2; object-fit: contain; filter: drop-shadow(7px 9px 0 rgba(33,19,41,.2)); }
.dress-worn-layer { z-index: 3; pointer-events: none; }
.dress-worn-item { position: absolute; left: var(--item-x); top: var(--item-y); z-index: var(--item-layer); width: var(--item-size); height: auto; filter: drop-shadow(2px 3px 0 rgba(33,19,41,.22)) var(--item-filter, none); transform: translate(-50%,-50%); transform-origin: center; animation: wardrobe-item-pop .32s cubic-bezier(.2,.9,.3,1.35); }
.dress-snap-zone { position: absolute; z-index: 12; display: grid; place-items: center; border: 2px dashed var(--stage-accent); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.dress-snap-zone span { padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--stage-accent); font: 900 .57rem/1 "Comic Sans MS", cursive; }
.snap-head { top: 2%; left: 19%; width: 62%; height: 31%; }
.snap-face { top: 38%; left: 23%; width: 54%; height: 23%; }
.snap-top { top: 59%; left: 27%; width: 46%; height: 22%; }
.snap-bottom { top: 77%; left: 27%; width: 46%; height: 21%; }
.dress-stage.wardrobe-dragging .dress-snap-zone { opacity: .72; animation: snap-zone-pulse .8s ease-in-out infinite alternate; }
.turntable-shadow { position: absolute; bottom: 8px; left: 50%; z-index: 1; width: 190px; height: 24px; border-radius: 50%; background: rgba(46,23,56,.25); filter: blur(4px); pointer-events: none; transform: translateX(-50%); }
.turn-controls { display: grid; grid-template-columns: 38px minmax(90px,1fr) 38px auto auto 50px; align-items: center; gap: 6px; margin-top: 9px; }
.turn-controls button, .dress-history-actions button, .quick-look-grid button, .save-look-row button { min-height: 34px; padding: 0 9px; border: 2px solid var(--ink); border-radius: 9px 13px 8px 12px; background: white; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); cursor: pointer; font: 900 .66rem/1 "Comic Sans MS", cursive; }
.turn-controls button[aria-pressed="true"] { background: var(--pink); }
.turn-controls input { width: 100%; accent-color: #8c54bd; }
.turn-controls output { color: #70458f; font: 900 .62rem/1 "Comic Sans MS", cursive; text-align: center; }
.worn-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.worn-slot { display: flex; min-width: 0; min-height: 34px; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 8px; border: 2px solid rgba(42,23,49,.45); border-radius: 10px; background: rgba(255,255,255,.68); color: #72508c; font: 900 .59rem/1.1 "Comic Sans MS", cursive; }
.worn-slot.is-filled { border-color: var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.worn-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worn-slot b { flex: 0 0 auto; font-size: .72rem; }
.dress-history-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 10px; }
.dress-history-actions button:nth-child(3) { background: var(--pink); }
.dress-history-actions button:nth-child(4) { background: #fff2a6; }
.dress-history-actions button:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }
.wardrobe-heading, .wardrobe-subhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.wardrobe-heading small { display: block; margin-bottom: 2px; color: #7d5a95; font: 900 .6rem/1 Arial Black, Arial, sans-serif; letter-spacing: .08em; }
.wardrobe-heading h3 { margin: 0; font: 900 1.7rem/.9 Arial Black, Impact, sans-serif; letter-spacing: -.05em; }
.wardrobe-heading > span, .wardrobe-subhead span { color: #77538f; font: 900 .58rem/1.15 "Comic Sans MS", cursive; }
.wardrobe-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 10px; }
.wardrobe-grid { display: grid; max-height: 330px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; overflow: auto; padding: 2px 5px 7px 2px; scrollbar-color: #9a64c5 transparent; }
.wardrobe-item { position: relative; display: grid; min-width: 0; min-height: 91px; grid-template-rows: 60px auto; place-items: center; padding: 5px; border: var(--line); border-radius: 12px 7px 14px 9px; background: #fff; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); cursor: grab; touch-action: none; }
.wardrobe-item:nth-child(3n+2) { background: #f3e5ff; }
.wardrobe-item:nth-child(3n) { background: #fff3ad; }
.wardrobe-item img { width: 78px; max-width: 94%; height: 58px; object-fit: contain; filter: drop-shadow(1px 2px 0 rgba(33,19,41,.16)) var(--preview-filter, none); pointer-events: none; }
.wardrobe-item span { overflow: hidden; max-width: 100%; font: 900 .59rem/1 "Comic Sans MS", cursive; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.wardrobe-item[aria-pressed="true"] { background: #bff2c7; box-shadow: 1px 1px 0 var(--ink); transform: translate(2px,2px); }
.wardrobe-item:hover { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px,2px) rotate(-1deg); }
.wardrobe-item[aria-pressed="true"]::after { position: absolute; top: 4px; right: 5px; display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: white; content: "✓"; font-size: .65rem; }
.wardrobe-drag-ghost { position: fixed; z-index: 9999; width: 82px; height: 82px; padding: 6px; border: 3px solid var(--ink); border-radius: 18px; background: rgba(255,250,255,.92); box-shadow: 7px 8px 0 rgba(33,19,41,.45); pointer-events: none; transform: translate(-50%,-50%) rotate(-4deg) scale(1.05); }
.wardrobe-drag-ghost img { width: 100%; height: 100%; object-fit: contain; filter: var(--preview-filter, none); }
.quick-looks, .saved-looks { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(42,23,49,.35); }
.wardrobe-subhead h4 { margin: 0; font: 900 .84rem/1 Arial Black, Arial, sans-serif; letter-spacing: -.02em; }
.quick-look-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-top: 8px; }
.quick-look-grid button:nth-child(1) { background: #e5ccff; }
.quick-look-grid button:nth-child(2) { background: #ffb9d4; }
.quick-look-grid button:nth-child(3) { background: #fff2a6; }
.quick-look-grid button:nth-child(4) { background: #b9e6ff; }
.save-look-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 8px; }
.save-look-row input { min-width: 0; min-height: 37px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 11px 7px 12px 8px; background: white; color: var(--ink); font: 800 .7rem/1.2 "Comic Sans MS", cursive; }
.save-look-row button { background: var(--pink); }
.saved-look-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.saved-look { position: relative; min-height: 54px; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px 14px 8px 13px; background: #f5eaff; color: var(--ink); }
.saved-look-load { display: block; width: 100%; min-height: 52px; padding: 7px 27px 7px 9px; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.saved-look strong, .saved-look small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-look strong { font: 900 .7rem/1.2 "Comic Sans MS", cursive; }
.saved-look small { margin-top: 4px; color: #77538f; font-size: .56rem; }
.saved-look-delete { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: white; color: var(--ink); cursor: pointer; font-weight: 900; }
.saved-look-empty { display: grid; min-height: 54px; place-items: center; border: 2px dashed #9d81ac; border-radius: 10px; color: #826695; font: 900 .62rem/1 "Comic Sans MS", cursive; }
.dress-studio-card.showoff-mode { position: fixed; inset: 12px; z-index: 200; max-height: calc(100svh - 24px); overflow: auto; border-radius: 18px; background: var(--yellow); box-shadow: 0 24px 90px rgba(15,5,22,.7); transform: none; }
.dress-studio-card.showoff-mode .dress-studio-shell { grid-template-columns: 1fr; }
.dress-studio-card.showoff-mode .wardrobe-panel { display: none; }
.dress-studio-card.showoff-mode .dress-preview-pane { width: min(900px,100%); margin: auto; }
.dress-studio-card.showoff-mode .dress-stage { height: min(68svh,650px); }
.dress-studio-card.showoff-mode .dress-turntable { width: min(500px,76%); }
body.dress-showoff-open { overflow: hidden; }
@keyframes wardrobe-item-pop { 0% { opacity: .2; transform: translate(-50%,-50%) scale(.72) rotate(-7deg); } 65% { transform: translate(-50%,-50%) scale(1.09) rotate(2deg); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes snap-zone-pulse { to { opacity: 1; transform: scale(1.04); } }
@keyframes dress-message-shake { 25% { transform: translateX(calc(-50% - 5px)) rotate(-2deg); } 70% { transform: translateX(calc(-50% + 5px)) rotate(2deg); } }

.music-extras { display: grid; grid-column: 1 / -1; grid-template-columns: .8fr 1.2fr; gap: 26px; width: min(1180px, 100%); justify-self: center; margin-top: 24px; }
.visualizer-card, .song-shelf { border: 4px solid var(--ink); color: var(--ink); }
.visualizer-card { display: grid; min-height: 310px; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 29px 10px 32px 13px; background: var(--pink); box-shadow: 11px 11px 0 #12071a; transform: rotate(-.7deg); }
.visualizer-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 7px 15px; padding: 23px 24px 14px; }
.visualizer-copy p { grid-column: 1 / -1; margin: 0; font-family: "Comic Sans MS", cursive; font-size: .75rem; font-weight: 900; }
.visualizer-copy h3 { margin: 0; overflow: hidden; font-family: Arial Black, Impact, sans-serif; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: .9; letter-spacing: -.055em; text-overflow: ellipsis; }
.visualizer-toggle { min-height: 40px; padding: 0 12px; border: var(--line); border-radius: 11px 7px 12px 8px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font-size: .7rem; font-weight: 900; }
.visualizer-toggle[aria-pressed="true"] { background: #a8f4b3; }
.visualizer-bars { display: flex; height: 175px; align-items: end; justify-content: center; gap: 5px; padding: 15px 18px 0; border-top: var(--line); background: linear-gradient(180deg, #5c2987, #241033); }
.visualizer-bars i { flex: 1; height: 14%; max-width: 16px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bar-colour, var(--yellow)); transition: height .2s ease; }
.visualizer-card.playing .visualizer-bars i { height: var(--bar-height, 55%); animation: equaliser var(--bar-speed, .58s) ease-in-out infinite alternate; animation-delay: var(--bar-delay, 0s); }

.song-shelf { min-height: 310px; padding: 22px; border-radius: 10px 31px 13px 34px; background: var(--yellow); box-shadow: 11px 11px 0 #12071a; transform: rotate(.5deg); }
.song-shelf-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.song-shelf-head p { margin: 0; font-family: "Comic Sans MS", cursive; font-size: .72rem; font-weight: 900; }
.song-shelf-head h3 { margin: 1px 0 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .84; letter-spacing: -.065em; }
.song-shelf-head > span { padding: 7px 9px; border: 2px solid var(--ink); border-radius: 10px; background: white; font-family: Arial Black, sans-serif; font-size: .68rem; }
.song-shelf-note { margin: 13px 0 15px; font-family: "Comic Sans MS", cursive; font-size: .7rem; font-weight: 900; }
.song-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.song-card { position: relative; display: grid; min-height: 96px; align-content: space-between; overflow: hidden; padding: 9px; border: 2px solid var(--ink); border-radius: 10px 5px 12px 6px; background: #fffaff; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.song-card:nth-child(3n+2) { background: var(--blue); transform: rotate(1deg); }
.song-card:nth-child(3n) { background: #d2a8f5; transform: rotate(-1deg); }
.song-card:not(.empty):hover { z-index: 3; box-shadow: 1px 1px 0 var(--ink); transform: translate(2px,2px) rotate(-2deg); }
.song-card > span { font-family: Arial Black, sans-serif; font-size: .58rem; }
.song-card strong { display: -webkit-box; overflow: hidden; font-family: Arial Black, Arial, sans-serif; font-size: .66rem; line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.song-card small { font-size: .55rem; font-weight: 900; opacity: .65; }
.song-card.empty { place-content: center; border-style: dashed; background: rgba(255,255,255,.42); box-shadow: none; opacity: .6; text-align: center; }
.song-card.empty strong { font-size: 1.1rem; opacity: .55; }

.achievement-launcher { position: fixed; left: 22px; bottom: 22px; z-index: 45; display: grid; width: 78px; height: 72px; place-items: center; padding: 7px; border: var(--line); border-radius: 16px 8px 18px 9px; background: var(--pink); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); cursor: pointer; transform: rotate(-4deg); transition: transform .15s ease, box-shadow .15s ease; }
.achievement-launcher:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(3px,3px) rotate(2deg); }
.achievement-launcher > span { font-size: 1.35rem; line-height: .8; }
.achievement-launcher small { font-size: .58rem; font-weight: 900; }
.achievement-launcher b { font-family: Arial Black, sans-serif; }
.achievement-launcher.new-badge { animation: badge-earned .7s cubic-bezier(.2,.9,.25,1.3); }
.achievement-overlay { position: fixed; inset: 0; z-index: 650; display: grid; place-items: center; padding: 14px; background: rgba(24,9,36,.82); opacity: 0; backdrop-filter: blur(9px); transition: opacity .2s ease; }
.achievement-overlay[hidden] { display: none; }
.achievement-overlay.open { opacity: 1; }
.achievement-window { width: min(840px, 100%); max-height: calc(100svh - 28px); overflow: auto; border: 4px solid var(--ink); border-radius: 24px 9px 27px 12px; background: #fffaff; box-shadow: 16px 16px 0 #100617; color: var(--ink); transform: translateY(25px) scale(.96) rotate(-1deg); transition: transform .25s cubic-bezier(.2,.9,.25,1.15); }
.achievement-overlay.open .achievement-window { transform: translateY(0) scale(1) rotate(0); }
.achievement-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 24px; }
.achievement-head p { margin: 0; color: #765197; font-family: "Comic Sans MS", cursive; font-size: .75rem; font-weight: 900; }
.achievement-head h2 { margin: 2px 0 0; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.8rem, 7vw, 5.2rem); line-height: .8; letter-spacing: -.07em; }
.achievement-head > strong { padding: 9px 12px; border: var(--line); border-radius: 11px 17px 10px 16px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-family: Arial Black, sans-serif; font-size: .78rem; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding: 0 24px 28px; }
.achievement-badge { position: relative; min-height: 150px; padding: 16px; border: var(--line); border-radius: 18px 8px 20px 10px; background: #eee7f3; filter: grayscale(1); opacity: .56; }
.achievement-badge:nth-child(3n+2) { transform: translateY(5px) rotate(1deg); }
.achievement-badge.unlocked { background: var(--yellow); filter: none; opacity: 1; box-shadow: 5px 5px 0 var(--ink); }
.achievement-badge > span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 12px; border: 2px solid var(--ink); border-radius: 50%; background: white; font-size: 1.35rem; }
.achievement-badge strong { display: block; font-family: Arial Black, Arial, sans-serif; font-size: .86rem; }
.achievement-badge p { margin: 6px 0 0; font-size: .68rem; font-weight: 800; line-height: 1.35; }

@keyframes loader-run { 0% { left: -94px; transform: translateY(0) rotate(-3deg); } 45% { transform: translateY(-7px) rotate(3deg); } 100% { left: 258px; transform: translateY(0) rotate(-2deg); } }
@keyframes loader-dust { 0% { opacity: 0; transform: translateX(-80px) scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(25px) scale(1.15); } }
@keyframes night-twinkle { to { opacity: .18; transform: scale(.55) rotate(35deg); } }
@keyframes daily-heart { to { transform: translateY(-7px) rotate(8deg) scale(1.08); } }
@keyframes result-pop { to { transform: translateY(-7px) rotate(5deg) scale(1.08); } }
@keyframes backdrop-float { to { transform: translateY(15px) rotate(2deg); } }
@keyframes equaliser { from { height: 12%; } to { height: var(--bar-height, 70%); } }
@keyframes badge-earned { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1) rotate(-4deg); } }

@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; padding-top: 135px; }
  .hero-copy { padding-left: 3vw; }
  .hero-collage { width: min(620px, 88%); }
  .loose-sticker { scale: .86; }
  .sticker-heart { top: 43%; left: 4%; }
  .sticker-star { right: 5%; bottom: 35%; }
  .sticker-hc { bottom: 5%; left: 7%; }
  .sticker-note { top: 38%; right: 4%; }
  .sticker-yaha { right: 8%; bottom: 20%; }
  .sticker-purple { right: 34%; bottom: 3%; }
  .hero-wash { background: linear-gradient(180deg, rgba(74,31,111,.8), rgba(89,42,130,.68)); }
  .music { grid-template-columns: 1fr; }
  .music-copy { width: min(660px, 100%); justify-self: center; }
  .player-wrap { justify-self: center; }
  .fact-grid { grid-template-columns: 1fr; }
  .fact-card { min-height: 270px; }
  .fact-card:nth-child(2) { transform: rotate(1deg); }
  .fact-card p { margin-top: 80px; }
  .play-grid, .music-extras { grid-template-columns: 1fr; }
  .dress-card { transform: rotate(.5deg); }
  .song-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .dress-studio-shell { grid-template-columns: 1fr; }
  .wardrobe-panel { border-top: var(--line); border-left: 0; }
  .dress-stage { height: 430px; }
}

@media (max-width: 650px) {
  .topbar { grid-template-columns: 1fr auto; }
  nav { position: fixed; bottom: 14px; left: 50%; z-index: 48; width: min(330px, calc(100vw - 104px)); justify-content: space-around; padding: 5px; border: 2px solid rgba(33,19,41,.18); border-radius: 16px; background: rgba(255,250,255,.9); box-shadow: 0 10px 28px rgba(39,15,57,.2); backdrop-filter: blur(15px); transform: translateX(-50%); }
  nav a { color: var(--ink) !important; }
  .lights { width: 42px; padding: 0; justify-content: center; }
  .lights-label { display: none; }
  .hero { min-height: auto; padding: 125px 18px 95px; }
  h1 { font-size: clamp(5.2rem, 28vw, 8rem); }
  h1 em { -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 var(--ink); }
  .hero-copy { padding-left: 0; }
  .hero-collage { width: calc(100% - 26px); margin-top: 25px; }
  .loose-sticker { scale: .72; }
  .news-ticker { grid-template-columns: 86px minmax(0, 1fr); }
  .news-badge { justify-content: center; padding: 0 8px; font-size: 0; }
  .news-badge::after { font-size: .69rem; content: "NEWS"; }
  .news-run span { font-size: .7rem; }
  .main-photo { box-shadow: 11px 12px 0 rgba(31,14,47,.72); }
  .burst-sticker { right: -19px; bottom: 40px; width: 94px; height: 94px; font-size: .9rem; }
  .note-a { display: none; }
  .scroll-down { display: none; }
  .section-pad { padding-inline: 18px; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head h2 { text-align: left; }
  .fact-card { min-height: 245px; }
  .fact-card h3 { font-size: 2.8rem; }
  .word-overlay { padding: 7px; }
  .word-window { max-height: calc(100svh - 14px); }
  .word-game-head { align-items: flex-start; flex-direction: column; gap: 10px; padding: 16px 14px 12px; }
  .word-game-head h2 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .word-slots { grid-template-columns: repeat(4, 1fr); }
  .word-slot { min-height: 56px; }
  .word-feedback { top: 145px; }
  .word-arena { min-height: 470px; margin-inline: 10px; }
  .music-copy h2 { font-size: clamp(4.4rem, 22vw, 7rem); }
  .player-wrap { padding: 8px; box-shadow: 9px 10px 0 #12071a; }
  .player-wrap iframe { height: 430px; }
  .game-info { align-items: flex-start; flex-direction: column; }
  .game-stats { justify-content: flex-start; }
  .game-arena { height: 310px; margin-inline: 12px; }
  .end-card { align-items: flex-start; flex-direction: column; margin-block: 60px 90px; }
  .end-face { align-self: flex-end; }
  .floating-music { right: 12px; bottom: 12px; width: 68px; height: 68px; }
  .achievement-launcher { left: 12px; bottom: 86px; width: 68px; height: 64px; }
  .daily-note { grid-template-columns: auto 1fr; gap: 13px; margin-block: 38px; padding: 16px; }
  .daily-scribble { display: none; }
  .play-grid { gap: 24px; }
  .quiz-body { min-height: 480px; padding: 20px; }
  .quiz-body h3 { min-height: 70px; }
  .dress-preview-pane, .wardrobe-panel { padding: 11px; }
  .doll-version-row { align-items: flex-start; flex-direction: column; }
  .doll-version-picker { justify-content: flex-start; }
  .dress-stage { height: 390px; }
  .dress-turntable { width: min(285px, 82%); }
  .turn-controls { grid-template-columns: 36px minmax(70px,1fr) 36px auto auto; }
  .turn-controls output { grid-column: 1 / -1; min-height: 17px; }
  .worn-slots { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dress-history-actions { grid-template-columns: repeat(2,1fr); }
  .wardrobe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wardrobe-item { min-height: 86px; grid-template-rows: 55px auto; }
  .wardrobe-item img { height: 52px; }
  .dress-studio-card.showoff-mode { inset: 5px; max-height: calc(100svh - 10px); }
  .dress-studio-card.showoff-mode .dress-stage { height: min(64svh,520px); }
  .dress-studio-card.showoff-mode .dress-turntable { width: min(380px,88%); }
  .music-extras { gap: 22px; }
  .visualizer-copy { grid-template-columns: 1fr; align-items: start; }
  .visualizer-toggle { width: fit-content; }
  .visualizer-bars { gap: 3px; padding-inline: 10px; }
  .song-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achievement-grid { grid-template-columns: 1fr 1fr; padding-inline: 15px; }
  .achievement-head { align-items: flex-start; flex-direction: column; padding-inline: 17px; }
  footer { align-items: flex-start; flex-direction: column; padding-bottom: 100px; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-follower { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .news-track { animation-duration: 95s !important; animation-iteration-count: infinite !important; }
  .ticker-running .news-track { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-follower, .cursor-particle { display: none; }
}

/* classic Pinterest-photo dress room */
.classic-character-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.classic-character-row > div { display: grid; gap: 3px; }
.classic-character-row strong { font: 900 .72rem/1 Arial Black,Arial,sans-serif; letter-spacing: .06em; }
.classic-character-row span { color: #77538f; font: 900 .67rem/1.2 "Comic Sans MS",cursive; }
.classic-photo-tag { padding: 7px 10px; border: 2px solid var(--ink); border-radius: 99px; background: #ffbdd8; box-shadow: 2px 2px 0 var(--ink); color: var(--ink) !important; transform: rotate(1deg); }
.dress-stage { background: linear-gradient(150deg,#f8eaff 0 63%,#d2a9eb 63% 100%) !important; box-shadow: inset 0 0 40px rgba(77,38,106,.13); perspective: none; }
.dress-stage::before { position: absolute; inset: auto 7% 18px; height: 66px; border: 3px solid rgba(69,36,80,.38); border-radius: 50%; background: rgba(255,249,205,.42); content: ""; }
.dress-stage::after { display: none; }
.dress-backdrop { inset: 67px 12px auto; color: rgba(79,37,125,.42); font: 900 .64rem/1 Arial Black,Arial,sans-serif; letter-spacing: .12em; animation: none; }
.classic-doll-frame { bottom: 18px; cursor: default; perspective: none; }
.dress-doll { transform: none !important; transform-style: flat; transition: filter .2s ease; }
.dress-stage[data-version] .dress-doll { filter: none; }
.dress-character { filter: drop-shadow(7px 9px 0 rgba(33,19,41,.18)); }
.dress-hint { top: 12px; }
.dress-drop-label { top: 43px; }
.dress-studio-card.showoff-mode .dress-stage { height: min(72svh,680px); }
.dress-studio-card.showoff-mode .dress-turntable { width: min(520px,78%); }

@media (max-width: 650px) {
  .classic-character-row { align-items: flex-start; }
  .classic-photo-tag { padding: 6px 8px; font-size: .6rem !important; }
  .dress-backdrop { top: 61px; }
}