/* Dress Up. A cut-paper world: turquoise stage, hot pink for the thing to press, cream paper for everything you read. */
@font-face { font-family: Fredoka; src: url(/fonts/fredoka-wght-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Fredoka; src: url(/fonts/fredoka-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root { --teal: #0aa5a8; --deep: #07585e; --ink: #06383c; --pink: #ff2e88; --yellow: #ffd23f; --cream: #fff6e0; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--teal); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }
#app { position: fixed; inset: 0; height: 100svh; font: 500 17px/1.2 Fredoka, system-ui, sans-serif; color: var(--ink); overflow: hidden; }
.screen { position: absolute; inset: 0; display: grid; gap: 8px; justify-items: center; align-items: center; overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.stage { background: var(--teal) url(/art/stage.webp) center 62% / cover; }
.room { background: var(--deep) url(/art/room.webp) center / cover; }

/* painted paper behind every control */
[data-sign] { position: relative; isolation: isolate; }
canvas.face { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-fit] { display: block; width: 100%; text-align: center; text-wrap: balance; line-height: 1.2; }

.act { font-weight: 700; font-size: 21px; color: #fff; padding: 0 30px; height: 56px; min-width: 150px; display: grid; place-items: center; white-space: nowrap; transition: transform .08s; text-shadow: 0 1px 0 rgba(120, 0, 60, .35); }
.act.big { font-size: 27px; height: 68px; min-width: 220px; }
.act:active, .link:active, .tile:active, .tab:active, .entry:active { transform: translateY(2px) scale(.97); }
.act.off { filter: saturate(.3) brightness(1.15); }
.link { font-weight: 500; font-size: 16px; padding: 0 18px; height: 46px; display: grid; place-items: center; white-space: nowrap; }
.link.on { color: #fff; }
.say { height: 40px; padding: 0 22px 0 38px; display: grid; place-items: center; font-size: 17px; max-width: 100%; min-width: 180px; }
.say.small { height: 36px; }
.head { height: 52px; width: min(100%, 560px); padding: 0 44px; display: grid; place-items: center; font-weight: 700; font-size: 30px; color: var(--ink); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* the doll: a 600 x 896 cell shown through a 440 x 760 window, so wide hats and umbrellas spill past it instead of shrinking the doll */
.dollwrap { container-type: size; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative; }
/* the whole cell always fits the height, so a tall hat is never cut by a header; the cell's middle sits on the wrap's middle */
.dollbox { position: relative; width: min(78cqw, 100cqh * 440 / 896); aspect-ratio: 440 / 760; translate: 0 6.58%; pointer-events: none; }
.entry .dollbox, .ranked .dollbox { width: min(90cqw, 100cqh * 440 / 896); }
.doll { position: absolute; left: -18.18%; top: -13.16%; width: 136.36%; aspect-ratio: 600 / 896; }
.doll img { position: absolute; display: block; }
.doll .body { inset: 0; width: 100%; height: 100%; }
#app[data-outline=sticker] .doll { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 rgba(4, 50, 55, .28)); }
.layer.pop { animation: pop .38s cubic-bezier(.3, 1.7, .5, 1); transform-origin: 50% 50%; }
@keyframes pop { from { transform: translateY(-14%) scale(1.45); opacity: 0; } }
.layer.twin { animation: twin .9s ease-in-out infinite alternate; }
@keyframes twin { from { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px var(--yellow)); } to { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px var(--yellow)) drop-shadow(0 0 6px #ff9d00); } }

/* stage lights */
.lights { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.lights i { position: absolute; top: -10%; left: 50%; width: 46vmin; height: 130%; margin-left: -23vmin; transform-origin: 50% 0; opacity: .5;
  background: linear-gradient(to bottom, rgba(255, 246, 200, .75), rgba(255, 246, 200, 0) 78%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); animation: sweep 7s ease-in-out infinite alternate; }
.lights i:nth-child(1) { left: 18%; animation-duration: 6s; animation-delay: -2s; }
.lights i:nth-child(3) { left: 82%; animation-duration: 8s; animation-delay: -4s; }
@keyframes sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* ---------- home ---------- */
#home { grid-template: 'mark' minmax(0, 20fr) 'me' minmax(0, 44fr) 'door' auto / minmax(0, 1fr); }
.mark { grid-area: mark; height: 100%; width: calc(100% - 96px); justify-self: start; min-height: 0; z-index: 2; animation: bob 3.2s ease-in-out infinite alternate; }
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(4, 50, 55, .3)); }
@keyframes bob { from { transform: rotate(-1.5deg) translateY(0); } to { transform: rotate(1.5deg) translateY(-5px); } }
.purse { display: none; position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); height: 40px; padding: 0 16px 0 34px; align-items: center; gap: 6px; font-weight: 700; font-size: 19px; }
.purse img { width: 24px; height: 24px; }
#app[data-screen=home] .purse, #app[data-screen=store] .purse { display: flex; }
#store .head { width: calc(100% - 112px); justify-self: start; }
#me { grid-area: me; z-index: 3; animation: sway 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
/* other dolls cross the stage behind yours */
#parade { grid-area: me; position: relative; width: calc(100% + 24px); height: 100%; container-type: size; pointer-events: none; z-index: 1; overflow: hidden; }
.walker { position: absolute; left: 50%; bottom: 30%; height: 44cqh; aspect-ratio: 440 / 760; translate: -50% 0; animation: walk 9s linear infinite; }
.walker:nth-child(even) { animation-name: walk2; bottom: 38%; height: 36cqh; }
.walker .dollbox { width: 100%; translate: none; animation: step .42s ease-in-out infinite alternate; }
@keyframes walk { 0% { transform: translateX(-75cqw); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(75cqw); opacity: 0; } }
@keyframes walk2 { 0% { transform: translateX(75cqw); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(-75cqw); opacity: 0; } }
@keyframes step { from { transform: translateY(0) rotate(-2.5deg); } to { transform: translateY(-3%) rotate(2.5deg); } }
.door { grid-area: door; z-index: 4; display: grid; justify-items: center; gap: 8px; width: min(100%, 420px); }
#today { height: 46px; width: 100%; padding: 0 44px; display: grid; place-items: center; font-weight: 700; font-size: 22px; }
#next { width: 100%; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.links .link { width: 100%; }
#options-link { grid-column: 1 / -1; }

/* ---------- make your doll ---------- */
#make { grid-template-rows: 52px minmax(0, 1fr) auto 68px; }
.pickers { display: grid; gap: 10px; justify-items: center; width: min(100%, 460px); }
.swatches { display: flex; gap: 10px; }
.swatch { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--c); border: 4px solid var(--cream); box-shadow: 0 3px 0 rgba(4, 50, 55, .35); }
.swatch.on { border-color: var(--pink); transform: scale(1.14); }
.faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.face { width: 64px; height: 64px; border: 9px solid transparent; border-image: url(/art/ui-tile.webp) 40 fill / 9px; }
.face.on { border-image-source: url(/art/ui-tile-on.webp); transform: scale(1.08); }
.face i { display: block; width: 100%; height: 100%; background-size: 250% auto; background-position: 50% 30.5%; }

/* ---------- theme ---------- */
#theme { grid-template-rows: minmax(0, 1fr) 40px minmax(120px, 34svh) 40px 68px 46px minmax(0, 1fr); }
#theme > .say:first-of-type { grid-row: 2; }
.theme { grid-row: 3; width: min(100%, 620px); height: 100%; padding: 30px 26px; display: grid; place-items: center; font-weight: 700; font-size: 64px; color: var(--ink); animation: drop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes drop { from { transform: translateY(-40svh) rotate(-8deg); opacity: 0; } }
#theme > .say:last-of-type { grid-row: 4; }
#theme > .act { grid-row: 5; }
#theme > .back { grid-row: 6; }

/* ---------- dress-up ---------- */
#dress { grid-template: 'top' 54px 'fit' minmax(0, 1.2fr) 'tabs' 104px 'rack' minmax(0, 1fr) / minmax(0, 1fr); gap: 6px; align-items: stretch; justify-items: stretch; }
.theme-chip { grid-area: top; height: 54px; padding: 0 42px; display: grid; place-items: center; font-weight: 700; font-size: 24px; }
.clock { grid-area: clock; display: grid; gap: 4px; justify-items: stretch; padding-top: 4px; }
.clock b { font-weight: 700; font-size: 34px; color: var(--cream); text-align: center; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(4, 50, 55, .5); }
.tape { height: 14px; border-radius: 3px; background: rgba(4, 50, 55, .55); overflow: hidden; }
.tape i { display: block; height: 100%; background: url(/art/tape.webp) left center / auto 100% repeat-x; transform-origin: 0 50%; }
.clock.hurry b { color: var(--yellow); animation: beat .5s ease-in-out infinite alternate; }
@keyframes beat { to { transform: scale(1.18); } }
/* the fitting room: the doll, and beside it the clock and the Done button. Nothing ever sits on the doll. */
.fitting { grid-area: fit; position: relative; min-height: 0; display: grid; grid-template: 'doll clock' auto 'doll .' minmax(0, 1fr) 'doll done' auto / minmax(0, 1fr) 104px; column-gap: 6px; }
.fitting::before { content: ''; position: absolute; left: calc((100% - 110px) / 2); bottom: 0; width: min(64%, 300px); aspect-ratio: 520 / 96; transform: translateX(-50%); background: url(/art/podium.webp) center / contain no-repeat; }
#dress-doll { grid-area: doll; pointer-events: auto; padding-bottom: 8px; }
#done { grid-area: done; min-width: 0; width: 100%; padding: 0 6px; font-size: 20px; margin-bottom: 4px; }
#done.sure { animation: beat .4s ease-in-out infinite alternate; }
#dress.locked .rack, #dress.locked .tabs { filter: saturate(.4); pointer-events: none; }
.tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 4px; }
.tab { display: grid; grid-template-rows: 24px auto; justify-items: center; align-content: center; gap: 1px; padding: 0; border: 7px solid transparent; border-image: url(/art/ui-tile.webp) 40 fill / 7px; font-size: 11.5px; line-height: 1; min-height: 44px; min-width: 0; white-space: nowrap; }
.tab img { width: 24px; height: 24px; }
.tab.on { border-image-source: url(/art/ui-tile-on.webp); font-weight: 700; }
.rack { grid-area: rack; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 8px; align-content: start; padding: 2px; scrollbar-width: none; }
.tile { position: relative; aspect-ratio: 1; border: 9px solid transparent; border-image: url(/art/ui-tile.webp) 40 fill / 9px; display: grid; place-items: center; min-width: 0; }
.tile.on { border-image-source: url(/art/ui-tile-on.webp); }
.tile .thumb { width: 100%; height: 100%; object-fit: contain; }
.tile .own { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; filter: drop-shadow(0 1px 0 var(--deep)); }
.empty { grid-column: 1 / -1; color: var(--cream); text-align: center; padding: 24px 12px; font-size: 18px; }

/* ---------- sent ---------- */
#sent { grid-template-rows: 52px minmax(0, 1fr) 40px 40px 68px; }

/* ---------- the show ---------- */
#show { grid-template: 'head' 52px 'mid' minmax(0, 1fr) 'ballot' 136px / minmax(0, 1fr); }
#show-head { grid-area: head; }
#runway, #lineup { grid-area: mid; width: 100%; height: 100%; min-height: 0; }
#runway { position: relative; overflow: hidden; }
.strut { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; animation: walkon .6s cubic-bezier(.3, 1.3, .5, 1) both; transform-origin: 50% 100%; }
.strut .dollbox { animation: step .36s ease-in-out infinite alternate; }
.strut.off { animation: walkoff .4s ease-in both; }
@keyframes walkon { from { transform: translateY(-14%) scale(.4); opacity: 0; } }
@keyframes walkoff { to { transform: translateX(60%) scale(.9); opacity: 0; } }
/* the ballot row: while an outfit is on, the question and the ten marks; after the reveal, the Send button */
.ballot { grid-area: ballot; display: grid; grid-template-rows: 36px minmax(0, 1fr); justify-items: center; align-items: center; gap: 6px; width: min(100%, 560px); height: 100%; }
.count { height: 36px; padding: 0 22px 0 38px; display: grid; place-items: center; font-weight: 700; font-size: 16px; white-space: nowrap; }
.scorer { display: contents; }
.scorer .say { grid-row: 1; height: 36px; width: 100%; }
#show[data-part=runway] .count, #show[data-part=runway] #hint, #show[data-part=runway] #send { display: none; }
#show[data-part=lineup] .scorer, #show[data-part=lineup] .count { display: none; }
#show[data-part=lineup] #hint, #show[data-part=lineup] #send { grid-row: 1 / 3; }
.marks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: 100%; height: 100%; min-height: 0; }
.pt { font-weight: 700; font-size: 20px; color: var(--ink); min-width: 0; min-height: 44px; border: 7px solid transparent; border-image: url(/art/ui-tile.webp) 40 fill / 7px; display: grid; place-items: center; }
.pt.on { border-image-source: url(/art/ui-tile-on.webp); transform: scale(1.1); }
/* eight cards, as big as the room allows, never taller than it */
.lineup { container-type: size; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; --per: 4; --rows: 2; }
.entry { position: relative; container-type: size; display: grid; place-items: center; flex: none; width: min((100cqw - (var(--per) - 1) * 6px) / var(--per) - .5px, (100cqh - (var(--rows) - 1) * 6px) / var(--rows) * 440 / 800); aspect-ratio: 440 / 800; border: 8px solid transparent; border-image: url(/art/ui-tile.webp) 40 fill / 8px; transition: filter .3s; }
.entry .score { position: absolute; left: 50%; bottom: -8px; translate: -50% 0; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--ink); color: var(--cream); font-weight: 700; font-size: 15px; display: grid; place-items: center; z-index: 2; }
.entry .rank { display: none; }
.entry.made { border-image-source: url(/art/ui-tile-on.webp); } .entry.made .rank { display: grid; animation: pop .4s cubic-bezier(.3, 1.7, .5, 1); }
.entry.out { filter: saturate(.15) brightness(.75); }
.entry.out::before, .entry.out::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 9%; min-height: 8px; background: var(--pink); border-radius: 6px; transform: translateY(-50%) rotate(-32deg); animation: cross .3s ease-out both; z-index: 3; box-shadow: 0 2px 0 rgba(4, 50, 55, .4); }
.entry.out::after { transform: translateY(-50%) rotate(32deg); animation-delay: .12s; }
@keyframes cross { from { scale: 0 1; opacity: 0; } }
.rank { position: absolute; top: -8px; left: -8px; width: 44%; max-width: 46px; aspect-ratio: 1; background: center / contain no-repeat; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.rank b { font-weight: 700; font-size: 15px; color: var(--ink); transform: translateY(-22%); }
.rank[data-n]::after { content: attr(data-n); font-weight: 700; font-size: 15px; color: var(--ink); transform: translateY(-22%); }
.rank.r1 { background-image: url(/art/rosette-1.webp); } .rank.r2 { background-image: url(/art/rosette-2.webp); } .rank.r3 { background-image: url(/art/rosette-3.webp); }
.rank.r0 { display: none !important; }
.rank.big { top: 0; left: 0; width: 46%; max-width: 110px; } .rank.big b { font-size: 24px; }
#send { padding: 0 24px; }
#hint { height: 44px; padding: 0 16px 0 34px; display: grid; place-items: center; font-weight: 700; font-size: 15px; max-width: 150px; text-align: center; line-height: 1.1; }
.look { position: absolute; inset: 0; z-index: 10; background: rgba(5, 78, 84, .94); display: grid; grid-template: 'prev doll next' minmax(0, 1fr) 'bar bar bar' 56px / 52px minmax(0, 1fr) 52px; gap: 6px; align-items: center; justify-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.look .dollwrap { grid-area: doll; animation: lookin .25s ease-out; }
@keyframes lookin { from { transform: scale(.8); opacity: 0; } }
.arrow { width: 50px; height: 64px; font-weight: 700; font-size: 34px; line-height: 1; display: grid; place-items: center; padding-bottom: 6px; }
.look-bar { grid-area: bar; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; height: 100%; }

/* ---------- result ---------- */
#result { grid-template-rows: 52px 36px minmax(0, 1fr) minmax(96px, 24svh) 60px; }
#result .say { height: 36px; }
.res-top { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 8px; width: min(100%, 640px); height: 100%; min-height: 0; align-items: center; }
.nums { list-style: none; padding: 24px 14px 14px; display: grid; gap: .38em; align-content: center; max-height: 100%; overflow: hidden; font-size: 15.5px; }
.nums li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5em; align-items: center; }
.nums li b { font-weight: 700; font-size: 1.2em; display: flex; align-items: center; gap: .2em; }
.nums li b img { width: 1.3em; height: 1.3em; }
.nums .twinrow { grid-template-columns: 2em minmax(0, 1fr) auto; font-size: .92em; }
.nums .twinrow .thumb { width: 2em; height: 2em; object-fit: contain; filter: drop-shadow(0 0 4px #ff9d00); }
.nums .total { border-top: 3px dashed var(--teal); padding-top: .35em; font-weight: 700; }
.nums .total b { font-size: 1.7em; }
.nums .pay b { color: #b3530a; font-size: 1.4em; }
.rankrow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; width: min(100%, 720px); height: 100%; min-height: 0; }
.ranked { position: relative; container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; border-radius: 8px; padding-bottom: 16px; }
.ranked.you { background: rgba(255, 210, 63, .55); }
.ranked b { position: absolute; top: 0; left: 0; min-width: 20px; height: 20px; border-radius: 10px; background: var(--cream); font-weight: 700; font-size: 13px; display: grid; place-items: center; z-index: 2; }
.ranked span { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 13px; color: var(--cream); }
.ranked.you span { color: var(--ink); }
#result .act.big { height: 60px; }
.res-bar { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; }

/* ---------- store ---------- */
#store { grid-template-rows: 52px minmax(0, 1fr) 48px minmax(150px, 30svh) 60px; }
.shop-top { width: 100%; height: 100%; min-height: 0; }
#store .say { height: 48px; padding-right: 18px; width: min(100%, 520px); }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 520px); height: 100%; min-height: 0; }
.ware { aspect-ratio: auto; padding-bottom: 20px; min-height: 0; }
.ware .thumb { min-height: 0; }
.price { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 700; font-size: 15px; line-height: 20px; }
.price img { width: 17px; height: 17px; }
.price.got { color: #b3530a; }
.shop-bar { display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; }

/* ---------- sheets ---------- */
#sheet { position: absolute; inset: 0; z-index: 20; background: rgba(5, 78, 84, .9); display: grid; place-items: center; padding: 16px; }
/* the paper never scrolls; the list on it does */
.panel { width: min(100%, 520px); max-height: calc(100svh - 32px); padding: 34px 26px 22px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; justify-items: center; }
.panel > .how, .panel > .credits, .panel > .opts { width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.opts { display: grid; gap: 12px; align-content: start; }
.panel h2 { height: 50px; padding: 0 46px; display: grid; place-items: center; font-weight: 700; font-size: 25px; white-space: nowrap; }
.how { list-style: none; display: grid; gap: 12px; width: 100%; }
.how li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 18px; }
.how img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 1px 0 var(--deep)) drop-shadow(0 -1px 0 var(--deep)) drop-shadow(1px 0 0 var(--deep)) drop-shadow(-1px 0 0 var(--deep)); }
.credits { list-style: none; display: grid; gap: 9px; width: 100%; font-size: 15px; }
.credits li { display: grid; gap: 1px; } .credits b { font-weight: 700; }
.opt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .opt b { width: 100%; font-weight: 700; }
.opt .link { height: 44px; font-size: 15px; padding: 0 16px; }

#toast { position: absolute; z-index: 30; left: 50%; top: max(60px, 9svh); visibility: hidden; opacity: 0; transform: translate(-50%, -120%); background: var(--cream); color: var(--ink); font-weight: 700; font-size: 16px; padding: 10px 18px; border-radius: 10px; border: 3px solid var(--pink); max-width: 88%; text-align: center; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; pointer-events: none; }
#toast.on { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
#fly { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.coinfly { position: absolute; width: 30px; height: 30px; margin: -15px; animation: coin .7s cubic-bezier(.5, -0.3, .7, 1) both; }
@keyframes coin { to { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: .2; } }

/* ---------- wide screens: doll on one side, everything else on the other ---------- */
@media (min-aspect-ratio: 1/1) {
  #home { grid-template: 'mark me' minmax(0, 1fr) 'door me' auto / minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding-bottom: 28px; }
  #home .door { align-self: start; }
  .mark { width: 100%; justify-self: center; }
  #parade { width: 100%; }
  #dress { grid-template: 'top top' 58px 'fit tabs' 104px 'fit rack' minmax(0, 1fr) / minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 14px; }
  .tab { font-size: 12px; }
  .rack { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
  .fitting::before { width: min(58%, 300px); }
  #make { grid-template: 'head head' 52px 'doll pick' minmax(0, 1fr) 'doll done' 80px / minmax(0, 1fr) minmax(0, 1fr); }
  #make .head { grid-area: head; } #make-doll { grid-area: doll; } #make .pickers { grid-area: pick; align-self: end; } #make .act { grid-area: done; align-self: start; }
  .face { width: 84px; height: 84px; }
  .lineup { --per: 8; --rows: 1; }
  .entry { max-width: 170px; }
  #result { grid-template-rows: 52px 36px minmax(0, 1fr) minmax(110px, 26svh) 60px; }
  .res-top { width: min(100%, 780px); }
  .nums { --fit-max: 19; }
  .rankrow { width: min(100%, 900px); }
  #store { grid-template: 'head head' 52px 'doll say' 48px 'doll shelf' minmax(0, 1fr) 'doll bar' 60px / minmax(0, .8fr) minmax(0, 1fr); column-gap: 20px; }
  #store .head { grid-area: head; } .shop-top { grid-area: doll; } #store .say { grid-area: say; } .shelf { grid-area: shelf; } .shop-bar { grid-area: bar; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .face { width: 56px; height: 56px; }
  .swatches { gap: 6px; }
  .panel { padding: 26px 22px 14px; gap: 8px; }
  .how li { font-size: 15px; grid-template-columns: 34px minmax(0, 1fr); } .how img { width: 34px; height: 34px; }
  /* a phone on its side: the sums on the left, the eight outfits in two rows on the right */
  #result { grid-template: 'head say' 48px 'top rank' minmax(0, 1fr) 'ok ok' 52px / minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 12px; }
  #result .head { grid-area: head; height: 48px; } #result .say { grid-area: say; } .res-top { grid-area: top; } .res-bar { grid-area: ok; } #result .act.big { height: 52px; }
  .rankrow { grid-area: rank; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .nums { padding: 20px 12px 8px; }
}
@media (max-height: 600px) and (max-aspect-ratio: 1/1) {
  .act.big { height: 58px; font-size: 24px; }
  .links .link { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lights i, .mark, #me, .walker .dollbox, .strut .dollbox, .layer.twin { animation: none; }
}
@media (max-width: 520px) {
  /* ten marks need two rows of five to stay thumb-sized */
  .marks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .look { grid-template: 'prev doll next' minmax(0, 1fr) 'bar bar bar' 100px / 52px minmax(0, 1fr) 52px; }
  .look-bar .marks { height: 96px; }
  .look-bar { grid-template-columns: minmax(0, 1fr) 72px; }
}