/* dress-up page: scoped under .pg-dressup */
@keyframes dressup-bob { from { transform: translateY(0); } to { transform: translateY(-2.5%); } }
@keyframes dressup-drop-worn { from { opacity: 0; translate: 0 -20px; } to { opacity: 1; translate: 0 0; } }
@keyframes dressup-drop-placed { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }

.pg-dressup {
  .top { padding-block: 6px 26px; }
  .top .back { text-decoration: none; font-size: .85rem; }
  .top h1 { font: 400 clamp(2rem, 5vw, 3.4rem)/1.02 var(--f-slab); margin: 14px 0 6px; }
  .top .unit { font: 700 1.5rem/1.15 var(--f-hand); color: #5b3a1a; margin: 0; }
  .top .how { margin: 12px 0 0; max-width: 70ch; }
  .play { padding-block: 10px 60px; }
  .play .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }

  /* ---------- stage ---------- */
  .stage { position: relative; aspect-ratio: 16 / 11; background: #d9cdb4 url(/img/dress/backdrop.webp) center top / cover; box-shadow: 0 12px 26px rgba(40,25,5,.3); outline: 8px solid #fffdf6; outline-offset: -1px; overflow: hidden; user-select: none; -webkit-user-select: none; }
  .stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(transparent, rgba(60,40,15,.12)); pointer-events: none; }
  .doll { position: absolute; bottom: 5%; z-index: 1; touch-action: none; }
  /* scenery: props stood on the ground, always behind the characters */
  .scenery { position: absolute; inset: 0; z-index: 0; }
  .spot { position: absolute; aspect-ratio: 3 / 1; transform: translate(-50%, -50%); border: 3px dashed rgba(255,253,246,.95); border-radius: 50%; background: rgba(255,253,246,.28); opacity: 0; transition: opacity .15s, background .15s; pointer-events: none; }
  .stage.dragging-prop .spot { opacity: 1; }
  .spot.hot { background: rgba(228,111,85,.5); border-color: var(--coral); }
  .placed { position: absolute; max-width: none; cursor: grab; touch-action: none; filter: drop-shadow(0 6px 4px rgba(40,25,5,.3)); }
  .placed:focus-visible { outline: 3px dashed var(--coral); }
  .placed.pop { animation: dressup-drop-placed .28s cubic-bezier(.3,1.5,.6,1); }
  .doll > .body { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 6px rgba(40,25,5,.35)); pointer-events: none; }
  .doll .worn { position: absolute; max-width: none; cursor: grab; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); touch-action: none; }
  .doll .worn:focus-visible { outline: 3px dashed var(--coral); }
  .doll .worn.pop { animation: dressup-drop-worn .26s cubic-bezier(.3,1.5,.6,1); }
  .doll.over > .body { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px rgba(228,111,85,.9)); }
  .doll .rig { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 100%; }
  .doll.idle .rig { animation: sway 5s ease-in-out infinite alternate; }
  .doll.running .rig { animation: dressup-bob .45s ease-in-out infinite alternate; }
  .tag { position: absolute; bottom: 1.4%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; z-index: 5; }
  .tag b { font: 400 .9rem/1 var(--f-label); background: var(--label); padding: 6px 9px 5px; }
  .tag button { cursor: pointer; border: 0; font: 400 .72rem/1 var(--f-label); letter-spacing: .03em; padding: 6px 8px 5px; background: rgba(255,253,246,.8); color: var(--ink); }
  .tag button[aria-pressed="true"] { background: var(--navy); color: #fff; }
  .ghost { position: fixed; z-index: 100; width: 96px; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); }
  .status { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
  .status p { margin: 0; font: 700 1.25rem/1.2 var(--f-hand); }
  .ready { display: none; margin-top: 16px; background: var(--navy); color: var(--label); padding: 14px 18px; align-items: center; gap: 16px; flex-wrap: wrap; }
  .ready.show { display: flex; }
  .ready img { width: 90px; }
  .ready b { font: 400 1.4rem/1.1 var(--f-slab); display: block; }
  .ready .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

  .scenes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .scenes .lbl { font: 700 1.3rem/1 var(--f-hand); color: #5b3a1a; }
  .scene-list { display: flex; gap: 10px; flex-wrap: wrap; }
  .scene { cursor: pointer; border: 0; padding: 4px 4px 6px; background: #fffdf6; box-shadow: 0 3px 8px rgba(40,25,5,.2); display: grid; gap: 4px; transform: rotate(-1.5deg); transition: transform .15s; font: inherit; color: var(--ink); }
  .scene:nth-child(2) { transform: rotate(1.2deg); } .scene:nth-child(3) { transform: rotate(-.6deg); }
  .scene:hover { transform: translateY(-2px) rotate(0); }
  .scene img { width: 104px; height: 58px; object-fit: cover; display: block; }
  .scene span { font: 400 .68rem/1 var(--f-label); letter-spacing: .03em; }
  .scene[aria-pressed="true"] { outline: 4px solid var(--navy); outline-offset: 1px; }
  .scene:focus-visible { outline: 3px dashed var(--coral); }

  /* ---------- "what my picture shows" card ---------- */
  .say { --lh: 40px; position: relative; margin-top: 22px; background: #fffdf6; padding: 20px 22px 18px; box-shadow: 0 8px 20px rgba(40,25,5,.18); }
  .say .tape { top: -12px; left: 12%; }
  .say label { display: block; font: 400 1.35rem/1.1 var(--f-slab); margin-bottom: 6px; }
  .say textarea { display: block; width: 100%; resize: vertical; border: 0; padding: 0 4px; margin: 0; min-height: calc(var(--lh) * 3);
    font: 700 1.75rem/var(--lh) var(--f-hand); color: #1d3a8a; background: transparent repeating-linear-gradient(transparent 0 calc(var(--lh) - 2px), #a8d2ec calc(var(--lh) - 2px) var(--lh)); background-attachment: local; }
  .say textarea::placeholder { color: #9aa6c4; }
  .say textarea:focus { outline: 3px dashed var(--coral); outline-offset: 4px; }
  .merits { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--hach-yellow) 22%, #fffdf6); flex-wrap: wrap; }
  .merits .star { font-size: 2.4rem; line-height: 1; color: var(--hach-yellow); text-shadow: 0 2px 0 #b58c00; }
  .merits p { margin: 0; flex: 1 1 260px; }
  .merits .btn { min-width: 120px; display: inline-flex; justify-content: center; }
  .say .note { margin: 10px 0 0; min-height: 1.4em; font: 700 1.2rem/1.2 var(--f-hand); color: var(--teal); }
  .say .note.warn { color: var(--coral); }

  /* ---------- wardrobe ---------- */
  .wardrobe { background: #fffdf6; box-shadow: 0 8px 20px rgba(40,25,5,.18); padding: 16px 16px 18px; position: relative; }
  .wardrobe .tape { top: -12px; left: 40%; }
  .wardrobe h2 { font: 400 1.4rem/1.1 var(--f-slab); }
  .wardrobe .hint { font: 700 1.05rem/1.2 var(--f-hand); color: #8a6f4c; margin: 4px 0 8px; }
  .shelf { margin-top: 12px; }
  .shelf h3 { font: 400 .76rem/1 var(--f-label); letter-spacing: .08em; color: var(--sc); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
  .shelf h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
  .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .item { cursor: grab; border: 0; background: #f6efe0; padding: 8px 4px 6px; display: grid; justify-items: center; gap: 4px; font: inherit; color: inherit; touch-action: none; transition: transform .15s, opacity .2s; }
  .item img { width: 62px; height: 56px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
  .item span { font: 400 .62rem/1.1 var(--f-label); letter-spacing: .03em; text-align: center; pointer-events: none; }
  .item:hover { transform: translateY(-2px) rotate(-2deg); }
  .item:focus-visible { outline: 3px dashed var(--coral); }
  .item.on { opacity: .45; }
  .item.on span::after { content: " ✓"; color: var(--teal); }
  .item.lifting { opacity: .25; }

  /* ---------- item card ---------- */
  & dialog.info { border: 0; padding: 0; background: transparent; width: min(640px, calc(100vw - 24px)); max-width: none; }
  & dialog.info::backdrop { background: rgba(15, 20, 45, .55); }
  .ic { background: #fffdf6; border-top: 12px solid var(--sc); box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 20px 22px 20px; position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 20px; }
  .ic .x { position: absolute; top: 8px; right: 10px; cursor: pointer; border: 0; background: none; font: 400 1.1rem/1 var(--f-label); color: #8a6f4c; padding: 6px 8px; }
  .ic > img { width: 150px; height: 150px; object-fit: contain; transform: rotate(-5deg); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
  .ic .era { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: var(--sc); }
  .ic h2 { font: 400 1.6rem/1.1 var(--f-slab); margin: 6px 30px 10px 0; }
  .ic h3 { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: #8a6f4c; margin: 12px 0 4px; }
  .ic p { margin: 0; }
  .fetch { margin-top: 14px; background: color-mix(in srgb, var(--sc) 12%, #fffdf6); border-left: 6px solid var(--sc); padding: 10px 12px; }
  .fetch b { display: block; font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: var(--sc); margin-bottom: 4px; }
  .fetch .q { font-weight: 600; }
  .fetch button { cursor: pointer; border: 0; font: 700 1.1rem/1 var(--f-hand); color: var(--sc); background: none; padding: 6px 0 0; }
  .fetch .a { font: 700 1.3rem/1.2 var(--f-hand); margin-top: 6px; }
  .ic .acts { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
  .ic .acts button { cursor: pointer; border: 0; font: 400 .85rem/1 var(--f-label); letter-spacing: .03em; padding: 11px 14px 10px; color: #fff; }
  .ic .acts .scn { background: var(--navy); }
  .ic .acts .ada { background: var(--coral); } .ic .acts .rory { background: var(--teal); } .ic .acts .off { background: #efe3cb; color: var(--ink); }

  /* ---------- a unit without a dressing-up box ---------- */
  .top.none { padding-block: 40px 70px; }
  .top.none img { width: 150px; }
  .top.none .sets { margin: 10px 0 22px; padding-left: 1.2em; display: grid; gap: 6px; font-weight: 600; }

  @media (max-width: 980px) { .play .wrap { grid-template-columns: 1fr; } .items { grid-template-columns: repeat(6, 1fr); } }
  @media (max-width: 600px) { .items { grid-template-columns: repeat(3, 1fr); } .ic { grid-template-columns: 1fr; } .ic > img { width: 110px; height: 110px; } .tag button { padding: 5px 6px 4px; } }
  @media (prefers-reduced-motion: reduce) { .doll .rig, .worn.pop, .placed.pop { animation: none !important; } }
}