@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  color: #3e3e62;
  background: #f8f5fb;
  font-synthesis: none;
  --olive: #9a80bf;
  --border: #e6deec;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 0 20%, #eeeafb, transparent 45%), radial-gradient(ellipse at 100% 80%, #fceaf0, transparent 40%); }
button, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, select { touch-action: manipulation; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #be8840; outline-offset: 3px; }
button { transition: background .18s, box-shadow .18s, transform .18s; }
button:hover { filter: brightness(.98); }
button:active { transform: translateY(1px); }
[hidden] { display: none !important; }
.topbar { height: 82px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 40px; padding: 0 4.5%; background: #fffcff; }
.brand { font-family: Outfit, sans-serif; font-size: 29px; font-weight: 600; letter-spacing: -1.3px; color: inherit; text-decoration: none; }
.brand > span:first-child { color: #ad85bd; font-size: 39px; vertical-align: middle; margin-right: 8px; }
.brand-dot { color: #d48eaa; }
.tagline { font-size: 10px; letter-spacing: 2px; color: #a094ac; }
.quiet { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 22px; padding: 10px 16px; color: #8a769c; font-size: 12px; }
main { max-width: 1540px; margin: auto; padding: 30px 4.5% 0; }
.intro { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 20px; }
.eyebrow { font-size: 9px; letter-spacing: 2px; font-weight: 700; color: #a08aaf; margin: 0 0 10px; }
h1, h2 { font-family: Outfit, 'Segoe UI', sans-serif; }
h1 > span { color: #d49ab8; }
h1 { font-size: clamp(27px, 3vw, 39px); font-weight: 500; letter-spacing: -1.2px; margin: 0 0 8px; }
.intro p:last-child { font-size: 13px; color: #94879f; margin: 0; }
.theme-control { display: grid; gap: 8px; min-width: 220px; }
.theme-control label { font-size: 10px; letter-spacing: 1px; color: #a08aaf; }
.theme-control select { padding: 13px 15px; background: #fffaff; border: 1px solid #e7d8ed; border-radius: 10px; color: #796487; font-weight: 600; box-shadow: 0 3px 8px #52634205; }
.game { display: flex; height: 660px; position: relative; border: 1px solid #e7d8ed; border-radius: 20px; overflow: hidden; background: #fffbff; box-shadow: 0 18px 48px -25px #8574aa40, 0 2px 5px #8c6ba20c; }
.wardrobe { width: 296px; flex-shrink: 0; padding: 25px 19px 18px; display: flex; flex-direction: column; border-right: 1px solid #ece1ef; z-index: 3; background: #fffbff; }
.wardrobe-heading { display: flex; align-items: center; justify-content: space-between; }
.wardrobe h2 { font-size: 25px; letter-spacing: -.6px; font-weight: 500; margin: 4px 0 23px; }
.wardrobe .eyebrow { font-size: 8px; }
.icon-button { display: grid; place-items: center; background: #f6edf8; border: 1px solid #e7dced; border-radius: 50%; width: 35px; height: 35px; color: #aa82b5; margin-top: -15px; }
.categories { display: flex; gap: 3px; border-bottom: 1px solid #ece1ef; padding-bottom: 12px; }
.categories button { flex: 1; background: none; border: 0; padding: 11px 3px; border-radius: 8px; font-size: 10px; color: #9a89a6; }
.categories button[aria-pressed=true] { background: #efe4f6; color: #9d6fb0; font-weight: 700; }
.category-description { font-size: 11px; color: #9c8ba8; margin: 16px 0 13px; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: auto; align-content: start; padding: 3px; scrollbar-width: thin; scrollbar-color: #dbc5e6 transparent; }
.item { position: relative; min-height: 126px; border: 1px solid #e8daef; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, #fffcff 0, #eee6f7 100%); padding: 10px 6px 9px; color: #84738d; }
.item:hover { border-color: #ba9dcd; box-shadow: 0 4px 12px #5c6d4412; }
.item[aria-pressed=true] { border-color: #bf8cca; box-shadow: inset 0 0 0 1px #bf8cca; background: radial-gradient(ellipse at 50% 40%, #fffaff 0, #f3dff1 100%); }
.item::before { content: ''; position: absolute; width: 65%; height: 9px; bottom: 30px; left: 18%; background: #b2a3c448; border-radius: 50%; filter: blur(5px); }
.item:nth-child(3n+2) { background: radial-gradient(ellipse at 50% 30%, #fffaff, #f7e7f0); }
.item:nth-child(3n) { background: radial-gradient(ellipse at 50% 30%, #ffffff, #e4ecf8); }
.item[aria-pressed=true]::after { content: '✓'; position: absolute; top: 7px; left: 7px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #b980c3; color: white; font-size: 10px; }
.item > svg { display: block; width: 100%; height: 87px; overflow: hidden; filter: drop-shadow(2px 5px 3px #826c9a26); }
.item svg { pointer-events: none; }
.item-name { font-size: 10px; display: block; margin-top: 7px; line-height: 1.4; }
.item-star { position: absolute; right: 9px; top: 7px; color: #af8a44; font-size: 13px; }
.wardrobe-tip { font-size: 10px; color: #a08aab; line-height: 1.7; border-top: 1px solid #ece0f2; padding-top: 14px; margin-top: auto; }
.stage { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #d6e3d7; isolation: isolate; }
.landscape { position: absolute; inset: 0; z-index: -2; }
.landscape img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: 52% center; }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(0deg, #fff3f0a6, transparent 27%); }
.stage-top { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.pill { background: #fffbf4e8; border: 1px solid #ffffffb0; border-radius: 30px; padding: 11px 15px; color: #82688f; font-size: 11px; backdrop-filter: blur(12px); box-shadow: 0 2px 10px #405d3c09; }
.scene-label { font-weight: 600; }
.weather { margin-left: auto; font-size: 10px; }
.character-area { position: absolute; height: 86%; aspect-ratio: 1 / 2; left: 57%; bottom: 30px; transform: translateX(-50%); }
#character { display: block; height: 100%; width: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(1px 3px 1px #3948310d); }
.scene-caption { position: absolute; bottom: 28px; left: 27px; max-width: 225px; pointer-events: none; }
.scene-caption > span { font-size: 8px; letter-spacing: 1.8px; color: #a0829c; font-weight: 600; }
.scene-caption h2 { font-size: 29px; letter-spacing: -1px; font-weight: 500; margin: 6px 0; color: #66506e; }
.scene-caption p { font-size: 11px; color: #967b91; line-height: 1.65; margin: 0; max-width: 185px; }
.shuffle { position: absolute; bottom: 26px; right: 22px; padding: 12px 17px; }
.bottom-bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 2px; gap: 15px; }
.person-picker { display: flex; align-items: center; gap: 7px; }
.person-picker > span { font-size: 11px; color: #9d87a8; margin-right: 12px; }
.person-picker > button { font-size: 12px; border: 1px solid #e5d5ee; border-radius: 20px; padding: 9px 19px; background: #fffaff50; color: #9c7cad; }
.person-picker > button[aria-pressed=true] { background: #b88ac8; border-color: #b88ac8; color: #fff8fd; box-shadow: 0 2px 7px #425b321c; }
#look-status { font-size: 11px; color: #a083ae; margin: 0; }
.favorite-save { border: 1px solid #bd91cb; border-radius: 24px; padding: 11px 18px; background: #f0e3f5; color: #745383; font-size: 12px; font-weight: 600; }
.favorite-save:disabled { background: #faf5fc; color: #80638e; border-color: #e6d8ee; cursor: default; }
.favorites { margin: 4px 0 25px; padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: #fffbff; }
.favorites-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.favorites-heading .eyebrow { margin-bottom: 6px; }
.favorites h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
#favorites-count { display: inline-block; vertical-align: middle; min-width: 26px; padding: 4px 8px; border-radius: 20px; background: #efe4f6; color: #80638e; font: 12px 'DM Sans', sans-serif; text-align: center; }
.favorites-heading > p, .favorites-empty { color: #806e8c; font-size: 12px; line-height: 1.6; }
.favorites-empty { margin: 0; padding: 20px; border: 1px dashed #dfcce9; border-radius: 12px; text-align: center; background: #fbf7fd; }
.favorites-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.favorite-card { position: relative; min-width: 0; }
.favorite-load { display: block; width: 100%; height: 100%; padding: 12px; border: 1px solid #e8daef; border-radius: 13px; background: linear-gradient(145deg, #f4edf9, #fff5f2); color: #6b537b; text-align: center; }
.favorite-load:hover, .favorite-load[aria-pressed=true] { border-color: #bd89cb; box-shadow: inset 0 0 0 1px #bd89cb; }
.favorite-load > svg { display: block; width: 100%; height: 185px; pointer-events: none; }
.favorite-label { display: block; font-size: 12px; font-weight: 700; margin: 8px 0 5px; }
.favorite-description { display: block; font-size: 11px; line-height: 1.5; color: #806e8c; }
.favorite-remove { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; border: 1px solid #e8daef; border-radius: 50%; background: #fffcff; color: #8f6b9d; font-size: 21px; }
#favorites-status, #favorites-storage-warning { font-size: 12px; color: #80638e; line-height: 1.6; margin: 14px 0 0; }
#favorites-status:empty { display: none; }
#favorites-storage-warning { color: #956132; }
footer { display: flex; justify-content: space-between; border-top: 1px solid #e7ddec; padding: 18px 0; font-size: 10px; color: #a898b3; }
@media (min-width: 1600px) {
  .game { height: 710px; }
}
@media (max-width: 1100px) {
  .tagline { display: none; }
  .wardrobe { width: 260px; padding: 24px 14px 18px; }
  .game { height: 630px; }
  .scene-caption { left: 20px; max-width: 160px; }
  .scene-caption h2 { font-size: 25px; }
  .scene-caption p { max-width: 140px; font-size: 10px; }
  .character-area { left: 56%; height: 83%; bottom: 42px; }
  .shuffle { font-size: 10px; right: 16px; bottom: 22px; padding: 11px 13px; }
  .weather { display: none; }
  .bottom-bar { flex-wrap: wrap; }
}
@media (max-width: 820px) and (min-width: 681px) {
  main { padding-right: 3%; padding-left: 3%; }
  .wardrobe { width: 226px; padding-right: 10px; padding-left: 10px; }
  .scene-caption p, .scene-caption > span { display: none; }
  .scene-caption h2 { font-size: 23px; }
  .character-area { height: 77%; left: 53%; bottom: 83px; }
  .shuffle { bottom: 70px; }
  .scene-caption { bottom: 20px; }
  .theme-control { min-width: 180px; }
}
@media (max-width: 680px) {
  .topbar { height: 66px; padding: 0 5%; gap: 10px; }
  .brand { font-size: 25px; }
  .brand > span:first-child { font-size: 31px; }
  .quiet { font-size: 10px; padding: 8px 10px; }
  main { padding: 23px 4% 0; }
  .intro { align-items: stretch; flex-direction: column; gap: 19px; margin-bottom: 18px; }
  .intro .eyebrow { font-size: 8px; }
  .intro p:last-child { font-size: 12px; }
  .theme-control { width: 100%; gap: 6px; }
  .theme-control select { padding: 11px; }
  .game { height: 690px; border-radius: 15px; }
  .stage { height: 100%; width: 100%; }
  .character-area { height: 510px; max-width: 80%; left: 50%; bottom: 65px; }
  .stage-top { left: 12px; right: 12px; top: 14px; }
  .pill { font-size: 10px; padding: 10px 12px; }
  .scene-label { margin-left: auto; }
  .scene-caption { bottom: 22px; left: 17px; max-width: 190px; }
  .scene-caption h2 { font-size: 25px; }
  .scene-caption p { display: none; }
  .scene-caption > span { font-size: 7px; }
  .shuffle { top: 63px; right: 12px; bottom: auto; font-size: 10px; }
  .wardrobe { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 250px; padding: 12px 13px; border: 0; border-top: 1px solid #e4d1ee; border-radius: 17px 17px 0 0; box-shadow: 0 -9px 28px #344a321a; background: #fffafff5; backdrop-filter: blur(14px); }
  .wardrobe-heading { flex-shrink: 0; height: 29px; }
  .wardrobe-heading .eyebrow { display: none; }
  .wardrobe h2 { font-size: 20px; margin: 0; }
  .icon-button { width: 31px; height: 31px; margin: 0; transform: rotate(-90deg); }
  .categories { margin-top: 8px; padding-bottom: 4px; gap: 5px; }
  .categories button { padding: 10px 3px; font-size: 11px; }
  .category-description { margin: 7px 0 5px; font-size: 10px; }
  .items { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 102px; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 8px; }
  .item { min-height: 111px; padding: 5px; }
  .item > svg { height: 70px; }
  .item-name { font-size: 9px; margin-top: 4px; }
  .wardrobe-tip { display: none; }
  .game.dressing-open .landscape, .game.dressing-open .stage::after { bottom: 250px; }
  .game.dressing-open .character-area { height: 375px; bottom: 261px; }
  .game.dressing-open .scene-caption { display: none; }
  .game.dressing-open .shuffle { top: 61px; }
  .person-picker { gap: 6px; flex-wrap: wrap; }
  .person-picker > span { margin-right: 4px; font-size: 10px; }
  .person-picker > button { padding: 8px 13px; font-size: 11px; }
  .bottom-bar { padding: 18px 0; gap: 12px; }
  #look-status { font-size: 10px; }
  .favorite-save { width: 100%; }
  .favorites { padding: 16px 12px; }
  .favorites-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .favorites-heading > p { margin: 0; font-size: 11px; }
  .favorites h2 { font-size: 21px; }
  .favorites-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .favorite-load { padding: 8px; }
  .favorite-load > svg { height: 165px; }
  .favorite-description { font-size: 10px; }
  footer { font-size: 9px; gap: 15px; }
  footer span { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}