/* Ava's World — core styles. Candy-pastel glassy UI, touch-first. Fixed light theme. */

:root {
  color-scheme: light;
  --pink: #ff7eb6;
  --pink-2: #ff4f9a;
  --pink-soft: #ffe4ef;
  --purple: #a77bff;
  --purple-2: #7d5cff;
  --lilac: #efe4ff;
  --mint: #c4f3df;
  --sky: #cfe9ff;
  --butter: #fff3b8;
  --ink: #4b3a66;
  --ink-2: #7a6896;
  --ink-3: #a597bd;
  --white: #ffffff;

  --bg: #fdf2f8;
  --glass: rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-solid: #fff7fb;
  --glass-border: rgba(255, 255, 255, .95);

  --r-xs: 12px;
  --r-sm: 16px;
  --r: 20px;
  --r-md: 24px;
  --r-lg: 28px;

  --shadow-1: 0 1px 2px rgba(96, 52, 128, .08), 0 4px 12px rgba(96, 52, 128, .10);
  --shadow-2: 0 2px 6px rgba(96, 52, 128, .10), 0 10px 28px rgba(96, 52, 128, .16);
  --shadow-3: 0 6px 16px rgba(96, 52, 128, .16), 0 22px 54px rgba(96, 52, 128, .24);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(150, 100, 190, .10);

  --grad-primary: linear-gradient(135deg, #ff8cc6 0%, #d77bff 52%, #8f6bff 100%);
  --grad-primary-hi: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  --grad-sky: linear-gradient(160deg, #ffd3e8 0%, #ead6ff 30%, #cfe6ff 62%, #ffe7f2 100%);

  --font: 'Fredoka', 'Baloo 2', ui-rounded, 'SF Pro Rounded', 'Nunito', 'Segoe UI Rounded', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Baloo 2', 'Fredoka', ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --top-h: 64px;
  --ease-bounce: cubic-bezier(.2, 1.5, .35, 1);
  --ease-out: cubic-bezier(.2, .9, .25, 1);
}

/* ---------------------------------------------------------------- base / iPad hardening */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  position: fixed; inset: 0;
  height: 100vh; height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
img, svg { -webkit-user-drag: none; user-drag: none; }
button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 3px solid rgba(167, 123, 255, .65); outline-offset: 2px; }

#app { position: absolute; inset: 0; overflow: hidden; }

.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--bg); }

/* ---------------------------------------------------------------- screens + transitions */
.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity .42s ease, transform .55s var(--ease-out), visibility 0s linear .56s;
  will-change: transform, opacity;
  overflow: hidden;
}
.screen.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .42s ease, transform .55s var(--ease-out), visibility 0s;
}
.screen.no-trans { transition: none !important; }
.screen.st-zoom-out { transform: scale(1.14); }
.screen.st-shrink { transform: scale(.9); }
.screen.st-left { transform: translateX(-30%); }
.screen.st-right { transform: translateX(30%); }
.screen.st-tile { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, .25)); }

/* ---------------------------------------------------------------- skies + clouds */
.sky { position: absolute; inset: 0; z-index: 0; }
.sky-title {
  background: var(--grad-sky);
  background-size: 300% 300%;
  animation: aw-sky 20s ease-in-out infinite;
}
.sky-title::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 82% 78%, rgba(255, 214, 240, .7), rgba(255, 255, 255, 0) 40%);
}
.sky-house {
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 246, 200, .9), rgba(255, 246, 200, 0) 24%),
    linear-gradient(180deg, #cfe8ff 0%, #e8dcff 45%, #ffe3f0 78%, #c9f0d6 78.2%, #b6e8c5 100%);
}
@keyframes aw-sky {
  0%, 100% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
}
.clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute; display: block;
  width: 180px; height: 56px; border-radius: 60px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(150, 120, 200, .12);
  animation: aw-drift 60s linear infinite;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 80px; height: 80px; left: 26px; top: -40px; }
.cloud::after { width: 104px; height: 104px; left: 70px; top: -58px; }
.cloud.c1 { top: 14%; left: -10%; transform: scale(.9); animation-duration: 70s; }
.cloud.c2 { top: 62%; left: 30%; transform: scale(.6); animation-duration: 90s; animation-delay: -40s; opacity: .85; }
.cloud.c3 { top: 26%; left: 60%; transform: scale(.7); animation-duration: 80s; animation-delay: -20s; }
.cloud.c4 { top: 78%; left: 80%; transform: scale(.8); animation-duration: 100s; animation-delay: -66s; opacity: .8; }
@keyframes aw-drift {
  from { translate: -20vw 0; }
  to { translate: 120vw 0; }
}

/* ---------------------------------------------------------------- title screen */
#scr-title { display: flex; align-items: center; justify-content: center; }
.floaties { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.floaty {
  position: absolute; bottom: -60px;
  font-size: 28px; line-height: 1;
  opacity: 0;
  animation: aw-floaty linear infinite;
  text-shadow: 0 2px 6px rgba(160, 90, 200, .25);
  will-change: transform, opacity;
}
@keyframes aw-floaty {
  0% { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 0; }
  10% { opacity: .95; }
  50% { transform: translate3d(28px, -55vh, 0) rotate(10deg); }
  90% { opacity: .9; }
  100% { transform: translate3d(-16px, -112vh, 0) rotate(-6deg); opacity: 0; }
}
.title-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  text-align: center;
}
.logo-wrap { position: relative; padding: 0 .3em; }
.logo, .mini-logo {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 800;
  line-height: 1.05; letter-spacing: .01em;
  white-space: nowrap;
}
.logo { font-size: clamp(54px, 13vmin, 150px); }
.logo::before, .mini-logo::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; right: 0;
  color: #fff;
  -webkit-text-stroke: .17em #fff;
  text-shadow: 0 .07em 0 #f3b2dc, 0 .13em 0 #d99ae8, 0 .2em .25em rgba(130, 60, 170, .32);
  z-index: 0;
}
.logo span, .mini-logo span {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #ffb3dc 0%, #ff6fb1 42%, #d86bff 72%, #8f6bff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.logo::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; right: 0; z-index: 2;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .95) 49%, rgba(255, 255, 255, 0) 60%),
              linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: aw-shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aw-shimmer {
  0% { background-position: 130% 0, 0 0; }
  55%, 100% { background-position: -30% 0, 0 0; }
}
.spark {
  position: absolute; color: #fff; font-size: clamp(20px, 4vmin, 44px);
  text-shadow: 0 0 10px #ffd1ec, 0 0 22px #d4b0ff;
  animation: aw-sparkle-pop 2.4s ease-in-out infinite;
}
.sp1 { left: -4%; top: 6%; }
.sp2 { right: -2%; top: -6%; animation-delay: -.8s; font-size: clamp(26px, 5vmin, 56px); }
.sp3 { right: 12%; bottom: -12%; animation-delay: -1.5s; }
.sp4 { left: 18%; bottom: -14%; animation-delay: -2s; font-size: clamp(14px, 3vmin, 30px); }
@keyframes aw-sparkle-pop {
  0%, 100% { transform: scale(.4) rotate(0deg); opacity: .2; }
  50% { transform: scale(1.1) rotate(25deg); opacity: 1; }
}
.tagline {
  margin: clamp(6px, 1.6vmin, 18px) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 3.6vmin, 34px);
  color: #fff;
  letter-spacing: .04em;
  padding: .2em 1em;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 140, 198, .85), rgba(167, 123, 255, .85));
  box-shadow: var(--shadow-2), var(--inset-hi);
}
.tagline i { font-style: normal; opacity: .75; margin: 0 .2em; }
.mascot-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 4vmin, 48px);
  margin-top: clamp(10px, 3vmin, 34px);
}
.mascot {
  width: clamp(110px, 26vmin, 250px); height: clamp(100px, 24vmin, 230px);
  animation: aw-mascot 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 12px rgba(120, 60, 150, .22));
}
.mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes aw-mascot {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.btn-play {
  position: relative; overflow: hidden;
  border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 6.4vmin, 60px);
  color: #fff;
  min-height: 72px;
  padding: .32em 1.05em .3em 1.2em;
  border-radius: 999px;
  background: var(--grad-primary);
  box-shadow: 0 .16em 0 #9a52d8, 0 .5em 1em rgba(130, 60, 190, .35), inset 0 2px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 2px 0 rgba(120, 40, 160, .35);
  display: inline-flex; align-items: center; gap: .35em;
  animation: aw-breathe 2.2s ease-in-out infinite;
  touch-action: manipulation;
  transition: transform .12s;
}
.btn-play::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 6%; height: 42%;
  border-radius: 999px; background: var(--grad-primary-hi);
  pointer-events: none;
}
.btn-play b { font-size: .7em; }
.btn-play:active { transform: scale(.94); animation: none; }
@keyframes aw-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (orientation: portrait) and (max-width: 640px) {
  .mascot-row { flex-direction: column; gap: 18px; }
  .mascot { width: 46vw; height: 42vw; }
  .logo { font-size: clamp(48px, 15vw, 90px); }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  appearance: none; -webkit-appearance: none;
  position: relative;
  border: 0; margin: 0;
  min-width: 48px; min-height: 48px;
  padding: 4px 8px;
  border-radius: 18px;
  background: var(--glass-strong);
  color: var(--ink);
  box-shadow: var(--shadow-1), var(--inset-hi);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-weight: 600; font-size: 14px; line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  flex: none;
}
.btn:active, .btn.is-pressed { transform: scale(.94); }
.btn[disabled], .btn.is-disabled { opacity: .42; pointer-events: none; }
.btn .ic { font-size: 22px; line-height: 1; display: block; }
.btn .lb { font-size: 10.5px; font-weight: 600; white-space: nowrap; color: var(--ink-2); letter-spacing: .01em; }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 3px 0 #a65bd9, var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-primary .lb { color: rgba(255, 255, 255, .92); }
.btn-wide { flex-direction: row; gap: 8px; padding: 8px 18px; font-size: 17px; min-height: 52px; border-radius: 20px; }
.btn-wide .ic { font-size: 22px; }
.btn-danger { background: linear-gradient(135deg, #ff8a9a, #ff5c8a); color: #fff; box-shadow: 0 3px 0 #d64570, var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn .badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffcf4d, #ff9d3c);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(200, 110, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 1px 0 rgba(160, 80, 10, .35);
  pointer-events: none;
}
.btn .badge:empty { display: none; }

/* glass surfaces (with solid fallback) */
.glass { background: var(--glass-solid); }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .glass { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
}

/* ---------------------------------------------------------------- house map */
#scr-house { display: flex; flex-direction: column; }
.house-header {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(8px + var(--safe-t)) calc(14px + var(--safe-r)) 6px calc(14px + var(--safe-l));
  min-height: calc(var(--top-h) + var(--safe-t));
}
.mini-logo { font-size: clamp(26px, 4.2vmin, 40px); padding: 0 .2em; flex: none; }
.hdr-btns {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overflow-y: visible; padding: 6px 2px;
  scrollbar-width: none; touch-action: pan-x;
}
.hdr-btns::-webkit-scrollbar { display: none; }
.house-scroll {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
}
.house {
  --hw: min(1120px, 94vw, calc((100vh - 170px) * 2.05));
  --hw: min(1120px, 94vw, calc((100dvh - 170px) * 2.05));
  position: relative;
  width: var(--hw);
  flex: none;
}
.roof { position: relative; width: 100%; height: calc(var(--hw) * .16); margin-bottom: -2px; z-index: 1; }
.roof svg { position: absolute; left: -3%; width: 106%; bottom: 0; height: 100%; overflow: visible; display: block; }
.house-body {
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #fff5fa, #ffe9f3);
  border: 6px solid #fff;
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: calc(var(--hw) * .014);
  box-shadow: var(--shadow-3), inset 0 -8px 0 rgba(240, 180, 215, .35);
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--hw) * .012);
}
.room-tile {
  appearance: none; border: 0; margin: 0;
  position: relative; display: block; width: 100%;
  padding: 6px 6px 4px;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(220, 170, 220, .25);
  cursor: pointer;
  text-align: left;
  transition: transform .18s var(--ease-bounce), box-shadow .2s;
  touch-action: manipulation;
  animation: aw-tile-in .55s var(--ease-bounce) both;
}
.room-tile:active { transform: scale(.95); }
@media (hover: hover) { .room-tile:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-2); } }
@keyframes aw-tile-in { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.room-tile .mini {
  position: relative; width: 100%; padding-top: 62.5%;
  border-radius: 14px; overflow: hidden;
  background: #f4e9f4;
  box-shadow: inset 0 0 0 2px rgba(200, 160, 210, .25);
}
.room-tile .mini svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room-tile .mini::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.room-tile .lbl {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 2px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 1.5vw, 18px);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-tile .lbl .ic { font-size: 1.25em; flex: none; }
.room-tile .lbl .tx { overflow: hidden; text-overflow: ellipsis; }
.house-ground {
  height: calc(var(--hw) * .02); min-height: 10px;
  margin: 0 -4%;
  border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, #9fe0b4, #7fcf9a);
  box-shadow: 0 8px 18px rgba(80, 150, 100, .2);
}
@media (orientation: portrait) {
  .house { --hw: min(720px, 94vw); }
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .house-scroll { justify-content: flex-start; }
  .room-tile .lbl { font-size: clamp(14px, 3.4vw, 20px); }
}

/* ---------------------------------------------------------------- editor */
#scr-editor { display: flex; flex-direction: column; background: linear-gradient(180deg, #fbeefe 0%, #f6e9ff 55%, #ffeef6 100%); }
#scr-editor::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 10% 30%, rgba(255, 196, 228, .55), rgba(255, 255, 255, 0) 35%),
    radial-gradient(circle at 90% 60%, rgba(200, 180, 255, .5), rgba(255, 255, 255, 0) 38%);
}
.ed-top {
  position: relative; z-index: 5; flex: none;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(var(--top-h) + var(--safe-t));
  padding: calc(6px + var(--safe-t)) calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l));
}
.ed-left { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.room-nav {
  display: flex; align-items: center; gap: 2px; min-width: 0;
  padding: 3px; border-radius: 22px;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-1), var(--inset-hi);
}
.btn-arrow { min-width: 44px; min-height: 48px; padding: 0; border-radius: 18px; background: rgba(255, 255, 255, .9); }
.btn-arrow .ic { font-size: 30px; font-weight: 700; color: var(--purple-2); margin-top: -3px; }
.room-name {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 240px;
  padding: 0 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
}
.room-name .rn-ic { font-size: 22px; flex: none; }
.room-name .rn-tx { overflow: hidden; text-overflow: ellipsis; }
.room-name.bump { animation: aw-name-bump .45s var(--ease-bounce); }
@keyframes aw-name-bump { 0% { transform: scale(.8); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

.seg {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; margin: 0 auto;
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-1), var(--inset-hi);
}
.seg .btn { min-width: 48px; background: transparent; box-shadow: none; border-radius: 18px; padding: 3px 6px; }
.seg .btn.is-on { background: var(--grad-primary); box-shadow: 0 2px 0 #a65bd9, 0 4px 12px rgba(150, 80, 200, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.seg .btn.is-on .lb { color: #fff; }
.ed-right {
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: visible;
  padding: 6px 2px;
  scrollbar-width: none;
  touch-action: pan-x;
}
.ed-right::-webkit-scrollbar { display: none; }
.btn-top { min-width: 52px; }
.ed-right .sep { width: 2px; height: 30px; border-radius: 2px; background: rgba(160, 120, 200, .18); flex: none; margin: 0 2px; }

.ed-stage-wrap { position: relative; z-index: 2; flex: 1; min-height: 0; }
.ed-fit {
  position: absolute;
  top: 4px; bottom: 8px;
  left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r));
  display: flex; align-items: center; justify-content: center;
}
.ed-frame {
  position: relative; flex: none;
  width: 640px; height: 400px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #f3e6ef;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .95), 0 0 0 7px rgba(220, 170, 230, .35), var(--shadow-3);
  touch-action: none;
  transform: translateZ(0);
}
.ed-frame.sl-out-l { transition: transform .17s ease-in, opacity .17s ease-in; transform: translateX(-60px) scale(.97); opacity: 0; }
.ed-frame.sl-out-r { transition: transform .17s ease-in, opacity .17s ease-in; transform: translateX(60px) scale(.97); opacity: 0; }
.ed-frame.sl-in-l { transform: translateX(-60px) scale(.97); opacity: 0; }
.ed-frame.sl-in-r { transform: translateX(60px) scale(.97); opacity: 0; }
.ed-frame.sl-go { transition: transform .3s var(--ease-out), opacity .25s ease-out; transform: none; opacity: 1; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
#stage .aw-inst { cursor: grab; }
#stage .aw-inst.is-lifted { cursor: grabbing; }
#stage [data-handle] { cursor: nwse-resize; }
.ed-overlays { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; max-width: 60%; }
.ed-overlays > * { pointer-events: auto; }
.ed-wipe { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; }
.ed-wipe.go-shine {
  opacity: 1;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .85) 48%, rgba(255, 230, 248, .6) 54%, rgba(255, 255, 255, 0) 70%);
  background-size: 300% 100%;
  animation: aw-wipe-shine .7s ease-out forwards;
}
@keyframes aw-wipe-shine { from { background-position: 120% 0; } to { background-position: -40% 0; opacity: 0; } }
.ed-wipe.go-ripple {
  opacity: 1;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255, 255, 255, .92) 0, rgba(255, 240, 250, .6) 16%, rgba(255, 255, 255, 0) 40%);
  transform-origin: var(--rx, 50%) var(--ry, 50%);
  animation: aw-ripple .65s ease-out forwards;
}
@keyframes aw-ripple { 0% { transform: scale(.25); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }

/* trash bubble */
.ed-trash {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe0ec 60%, #ffc2d8);
  box-shadow: 0 6px 18px rgba(200, 60, 120, .3), inset 0 2px 0 #fff, 0 0 0 4px rgba(255, 255, 255, .8);
  transform: scale(0); opacity: 0;
  transition: transform .25s var(--ease-bounce), opacity .2s, background .2s;
  pointer-events: none;
}
.ed-trash.is-show { transform: scale(1); opacity: 1; }
.ed-trash.is-hot { transform: scale(1.25); background: radial-gradient(circle at 35% 30%, #fff, #ff9fc3 60%, #ff5c8a); }
.ed-trash.is-hot span { animation: aw-wobble .4s ease-in-out infinite; }
@keyframes aw-wobble { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) scale(1.1); } }

/* floating action bar */
.ed-actionbar {
  position: absolute; z-index: 6; left: 0; top: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 24px;
  background: var(--glass-solid);
  box-shadow: var(--shadow-3), var(--inset-hi), 0 0 0 2px rgba(255, 255, 255, .9);
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.9);
  transform-origin: 50% 100%;
  transition: opacity .16s ease, transform .22s var(--ease-bounce);
  max-width: calc(100% - 16px);
  overflow-x: auto; scrollbar-width: none;
  touch-action: pan-x;
}
.ed-actionbar::-webkit-scrollbar { display: none; }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .ed-actionbar { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.ed-actionbar.is-show { opacity: 1; pointer-events: auto; transform: none; }
.ed-actionbar.below { transform-origin: 50% 0; }
.ed-actionbar .btn { min-width: 52px; background: rgba(255, 255, 255, .95); }
.ed-actionbar .btn.del { background: linear-gradient(180deg, #fff, #ffe3ec); }

/* ---------------------------------------------------------------- tray */
.ed-tray {
  position: relative; z-index: 4; flex: none;
  padding: 0 0 var(--safe-b);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--glass-solid);
  box-shadow: 0 -6px 24px rgba(120, 70, 160, .12), inset 0 1px 0 #fff;
  transition: box-shadow .2s, background .2s;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .ed-tray { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
}
.tray-tabs {
  display: flex; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding: 8px calc(12px + var(--safe-r)) 4px calc(12px + var(--safe-l));
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.tray-tabs::-webkit-scrollbar, .tray-strip::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; flex: none;
  min-height: 48px; min-width: 48px;
  padding: 4px 14px 4px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-1), var(--inset-hi);
  font-weight: 600; font-size: 15px; color: var(--ink-2);
  cursor: pointer; touch-action: pan-x;
  transition: transform .12s, background .2s, color .2s;
}
.tab .ic { font-size: 22px; line-height: 1; }
.tab:active { transform: scale(.94); }
.tab.is-on { background: var(--grad-primary); color: #fff; box-shadow: 0 3px 0 #a65bd9, 0 6px 14px rgba(150, 80, 200, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.tab .cnt { font-size: 11px; opacity: .7; font-weight: 600; }
.tray-strip {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px calc(14px + var(--safe-r)) 12px calc(14px + var(--safe-l));
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  min-height: 130px;
}
.card {
  appearance: none; border: 0; margin: 0;
  position: relative; flex: none;
  width: 100px; height: 112px;
  padding: 6px 5px 5px;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff 0%, #fff7fc 100%);
  box-shadow: var(--shadow-1), inset 0 -3px 0 rgba(220, 170, 225, .28);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  scroll-snap-align: start;
  cursor: grab;
  touch-action: pan-x;
  transition: transform .14s var(--ease-bounce), box-shadow .2s, opacity .2s;
  animation: aw-card-in .35s var(--ease-bounce) both;
}
@keyframes aw-card-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.card:active, .card.is-pressed { transform: scale(.94); }
.card.is-dragging { opacity: .35; transform: scale(.9); }
.card .thumb { width: 88px; height: 76px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card .thumb svg { width: 100%; height: 100%; display: block; overflow: visible; }
.card.surf .thumb { width: 90px; height: 74px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(200, 160, 210, .3); }
.card.surf .thumb svg { overflow: hidden; }
.card .nm {
  width: 100%;
  font-size: 11.5px; font-weight: 600; line-height: 1.15; color: var(--ink-2);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.card.is-current { box-shadow: 0 0 0 3px #c58bff, var(--shadow-2); }
.card.is-current::after {
  content: '✓'; position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-primary); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(150, 80, 200, .35);
}
.card.paint .thumb { position: relative; }
.card.paint .thumb::after {
  content: '🎨'; position: absolute; right: 2px; bottom: 2px; font-size: 22px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15));
}
.card.paint { background: linear-gradient(180deg, #fff, #f3e8ff); }
.tray-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 112px; color: var(--ink-2); font-weight: 600; font-size: 16px; text-align: center;
}
.tray-trash-hint {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 120, 160, .9), rgba(200, 110, 255, .9));
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.ed-tray.is-trash .tray-trash-hint { opacity: 1; }

/* colors sheet (over the tray) */
.color-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  min-height: 100%;
  padding: 8px calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: #fff8fc;
  box-shadow: 0 -10px 30px rgba(120, 70, 160, .2), inset 0 1px 0 #fff;
  transform: translateY(105%);
  transition: transform .3s var(--ease-out);
  display: flex; flex-direction: column; gap: 8px;
}
.color-sheet.is-open { transform: none; }
.cs-head { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; padding: 2px; }
.cs-head::-webkit-scrollbar, .cs-pal::-webkit-scrollbar { display: none; }
.cs-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; padding: 0 6px; }
.cs-slot { flex-direction: row; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 18px; }
.cs-slot .sw { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .12); }
.cs-slot .lb { font-size: 13px; }
.cs-slot.is-on { box-shadow: 0 0 0 3px #c58bff, var(--shadow-1); }
.cs-head .grow { flex: 1; }
.cs-pal {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 112px; overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y;
  padding: 4px 2px;
}
.sw-btn {
  appearance: none; border: 0; padding: 0; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .07), inset 0 6px 8px rgba(255, 255, 255, .45), 0 2px 5px rgba(80, 40, 110, .18);
  transition: transform .12s var(--ease-bounce);
}
.sw-btn:active { transform: scale(.88); }
.sw-btn.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #b27bff, 0 4px 10px rgba(80, 40, 110, .25); transform: scale(1.06); }

/* drag ghost */
.aw-ghost {
  position: fixed; left: 0; top: 0; z-index: 250;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 16px rgba(90, 40, 120, .28));
  transition: opacity .2s;
}
.aw-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }
.aw-ghost.fly { transition: transform .32s var(--ease-out), opacity .32s ease; }
.aw-ghost .inner { width: 100%; height: 100%; transform-origin: 50% 50%; animation: aw-ghost-in .2s var(--ease-bounce); }
@keyframes aw-ghost-in { from { transform: scale(.4); } }

/* ---------------------------------------------------------------- panels (bottom sheet) */
#aw-modal-root { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(70, 40, 90, .28);
  opacity: 0; transition: opacity .25s;
  pointer-events: auto;
  touch-action: none;
}
.panel-backdrop.is-open { opacity: 1; }
.panel {
  position: absolute; left: 50%; bottom: 0;
  width: min(760px, 100%);
  max-height: min(82vh, 760px); max-height: min(82dvh, 760px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: #fff9fc;
  box-shadow: var(--shadow-3), inset 0 1px 0 #fff;
  transform: translate(-50%, 105%);
  transition: transform .34s var(--ease-out);
  pointer-events: auto;
  padding-bottom: var(--safe-b);
}
.panel.is-open { transform: translate(-50%, 0); }
.panel.is-dragging { transition: none; }
.panel-grab { flex: none; padding: 10px 0 2px; display: flex; justify-content: center; touch-action: none; cursor: grab; }
.panel-grab i { display: block; width: 54px; height: 6px; border-radius: 3px; background: rgba(160, 120, 200, .35); }
.panel-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 10px 22px;
  touch-action: none;
}
.panel-head h2 { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--ink); }
.panel-head .btn { border-radius: 50%; min-width: 48px; }
.panel-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 2px 22px 22px;
  font-size: 17px; line-height: 1.45;
  -webkit-user-select: none; user-select: none;
}
.panel-body p { margin: .4em 0 .8em; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.panel-list { display: flex; flex-direction: column; gap: 10px; }
.panel-list .btn { justify-content: flex-start; }
.tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tips li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); }
.tips li b { font-size: 26px; flex: none; }

/* gallery */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gal-item { position: relative; background: #fff; padding: 8px 8px 26px; border-radius: 8px; box-shadow: var(--shadow-2); transform: rotate(var(--rot, 0deg)); }
.gal-item img { width: 100%; display: block; border-radius: 3px; aspect-ratio: 16 / 10; object-fit: cover; background: #f4e9f4; }
.gal-item .cap { position: absolute; left: 8px; right: 52px; bottom: 5px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-item .del { position: absolute; right: -10px; bottom: -12px; min-width: 48px; min-height: 48px; border-radius: 50%; }
.gal-empty { text-align: center; color: var(--ink-2); padding: 30px 10px; font-size: 18px; }
.gal-empty b { display: block; font-size: 54px; margin-bottom: 8px; }

/* polaroid modal */
.modal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background: rgba(60, 30, 80, .45);
  opacity: 0; transition: opacity .25s;
  pointer-events: auto;
  touch-action: none;
}
.modal.is-open { opacity: 1; }
.polaroid {
  position: relative;
  width: min(760px, 92vw, calc((100vh - 200px) * 1.6 + 36px));
  width: min(760px, 92vw, calc((100dvh - 200px) * 1.6 + 36px));
  background: #fff;
  padding: 18px 18px 14px;
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(40, 10, 60, .4), 0 6px 14px rgba(40, 10, 60, .25);
  transform: rotate(-2deg) scale(.6);
  transition: transform .45s var(--ease-bounce);
}
.modal.is-open .polaroid { transform: rotate(-1.5deg) scale(1); }
.polaroid::before {
  content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px;
  background: rgba(255, 190, 220, .75); transform: rotate(3deg); border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.polaroid img {
  display: block; width: 100%; height: auto;
  border-radius: 3px; background: #f4e9f4;
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
  pointer-events: auto;
}
.polaroid .pcap { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); text-align: center; margin: 10px 0 10px; }
.polaroid .pacts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.polaroid .pacts a.btn { text-decoration: none; }

/* ---------------------------------------------------------------- toast, flash, particles */
#aw-toast {
  position: fixed; left: 50%; top: calc(76px + var(--safe-t)); z-index: 300;
  max-width: min(520px, 90vw);
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  font-weight: 600; font-size: 17px; text-align: center;
  box-shadow: var(--shadow-3), 0 0 0 3px rgba(255, 190, 225, .6);
  transform: translate(-50%, -24px) scale(.9);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .3s var(--ease-bounce);
}
#aw-toast.is-show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#aw-flash { position: fixed; inset: 0; z-index: 280; background: #fff; opacity: 0; pointer-events: none; }
#aw-flash.go { animation: aw-flash .55s ease-out; }
@keyframes aw-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
#aw-fx { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.pt {
  position: absolute; left: 0; top: 0;
  font-size: 22px; line-height: 1;
  will-change: transform, opacity;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(120, 50, 140, .2);
}
.pt.rect { width: 10px; height: 14px; border-radius: 3px; }
.pt.dot { width: 10px; height: 10px; border-radius: 50%; }

/* ---------------------------------------------------------------- SVG: ambient classes (SPEC §5) */
.aw-blink, .aw-wag, .aw-twinkle, .aw-float, .aw-sway, .aw-spin, .aw-pulse, .aw-steam, .aw-beam {
  transform-box: fill-box;
}
.aw-blink { transform-origin: 50% 50%; animation: aw-blink 4.6s ease-in-out infinite; }
@keyframes aw-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(.08); }
  96% { transform: scaleY(1); }
}
.aw-wag { transform-origin: 0% 100%; animation: aw-wag .8s ease-in-out infinite alternate; }
@keyframes aw-wag { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.aw-twinkle { animation: aw-twinkle 1.8s ease-in-out infinite; }
@keyframes aw-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.aw-float { transform-origin: 50% 50%; animation: aw-float 3.4s ease-in-out infinite alternate; }
@keyframes aw-float { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.aw-sway { transform-origin: 50% 100%; animation: aw-sway 3.2s ease-in-out infinite alternate; }
@keyframes aw-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.aw-spin { transform-origin: 50% 50%; animation: aw-spin 6s linear infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-pulse { transform-origin: 50% 50%; animation: aw-pulse 1.7s ease-in-out infinite; }
@keyframes aw-pulse { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
.aw-steam { transform-origin: 50% 100%; animation: aw-steam 2.8s ease-out infinite; }
@keyframes aw-steam {
  0% { transform: translateY(6px) scale(.6); opacity: 0; }
  25% { opacity: .85; }
  100% { transform: translateY(-34px) scale(1.35); opacity: 0; }
}
/* party spotlight beams */
.aw-beam { transform-origin: 50% 0%; animation: aw-beam 5s ease-in-out infinite alternate; }
@keyframes aw-beam { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }

/* still render (thumbnails / tray) */
.aw-still *, .aw-still { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------------- SVG: item instance effects */
.aw-inst > .fx, .aw-inst > .aw-shadow { transform-box: fill-box; transform-origin: 50% 100%; }
.aw-inst > .aw-shadow { transform-origin: 50% 50%; transition: transform .18s ease, opacity .18s ease; }
.aw-inst > .fx { transition: transform .18s var(--ease-bounce); }
.aw-inst.is-lifted > .fx { transform: translateY(-12px) scale(1.04); }
.aw-inst.is-lifted > .aw-shadow { transform: scale(1.14, 1.2); opacity: .6; }
.aw-inst.is-pinch > .fx { transition: none; }

/* party: dogs dance */
.lt-party .aw-inst.is-dog > .fx { animation: aw-party-dance .62s ease-in-out infinite alternate; }
@keyframes aw-party-dance {
  0% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(0deg); }
  100% { transform: translateY(0) rotate(4deg); }
}

/* tap reactions (AW.ANIMS) */
.aw-inst > .fx.aw-tap-wiggle { animation: aw-tap-wiggle .7s ease-in-out !important; }
.aw-inst > .fx.aw-tap-bounce { animation: aw-tap-bounce .7s var(--ease-out) !important; }
.aw-inst > .fx.aw-tap-spin { animation: aw-tap-spin .7s ease-in-out !important; transform-origin: 50% 50%; }
.aw-inst > .fx.aw-tap-glow { animation: aw-tap-glow .7s ease-in-out !important; }
.aw-inst > .fx.aw-tap-sparkle { animation: aw-tap-sparkle .7s ease-in-out !important; }
.aw-inst > .fx.aw-tap-jump { animation: aw-tap-jump .7s var(--ease-out) !important; }
.aw-inst > .fx.aw-tap-shake { animation: aw-tap-shake .6s linear !important; }
.aw-inst > .fx.aw-tap-dance { animation: aw-tap-dance .7s ease-in-out !important; }
.aw-inst > .fx.aw-drop { animation: aw-drop .45s var(--ease-out) !important; }
.aw-inst > .fx.aw-popin { animation: aw-popin .55s var(--ease-bounce) both !important; }
.aw-inst > .fx.aw-poof { animation: aw-poof .3s ease-in forwards !important; transform-origin: 50% 50%; }
@keyframes aw-tap-wiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-7deg); } 35% { transform: rotate(6deg); }
  55% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); }
}
@keyframes aw-tap-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(0) scale(1.1, .88); }
  45% { transform: translateY(-34px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.06, .94); }
  85% { transform: translateY(-6px) scale(1); }
}
@keyframes aw-tap-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes aw-tap-glow {
  0%, 100% { transform: scale(1); filter: none; }
  40% { transform: scale(1.07); filter: brightness(1.35) saturate(1.2); }
}
@keyframes aw-tap-sparkle {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.1) rotate(-3deg); }
  60% { transform: scale(.97) rotate(3deg); }
}
@keyframes aw-tap-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  15% { transform: translateY(0) scale(1.12, .85); }
  45% { transform: translateY(-70px) scale(.92, 1.1) rotate(-6deg); }
  75% { transform: translateY(0) scale(1.1, .9); }
}
@keyframes aw-tap-shake {
  0%, 100% { transform: translateX(0); }
  12%, 36%, 60%, 84% { transform: translateX(-8px) rotate(-1deg); }
  24%, 48%, 72% { transform: translateX(8px) rotate(1deg); }
}
@keyframes aw-tap-dance {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-10px, -14px) rotate(-8deg); }
  40% { transform: translate(0, 0) rotate(0); }
  60% { transform: translate(10px, -14px) rotate(8deg); }
  80% { transform: translate(0, 0) rotate(0); }
}
@keyframes aw-drop {
  0% { transform: scale(1.04) translateY(-12px); }
  45% { transform: scale(1.07, .92); }
  75% { transform: scale(.97, 1.03); }
  100% { transform: scale(1); }
}
@keyframes aw-popin {
  0% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes aw-poof { to { transform: scale(1.35); opacity: 0; } }

/* lighting cross-fade */
.lights-g.fade-in { animation: aw-fade-in .5s ease-out; }
@keyframes aw-fade-in { from { opacity: 0; } }

/* selection (SVG) */
.sel-outline { pointer-events: none; }
.sel-outline.dash { animation: aw-march 1.2s linear infinite; }
@keyframes aw-march { to { stroke-dashoffset: -28; } }
.sel-handle .vis { transition: transform .15s; transform-box: fill-box; transform-origin: 50% 50%; }
.sel-handle:active .vis { transform: scale(1.2); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 999px) {
  .ed-top .btn .lb, .house-header .btn .lb { display: none; }
  .btn-top { min-width: 48px; }
  .room-name { max-width: 170px; font-size: 17px; }
  .ed-actionbar .btn .lb { display: none; }
  .ed-actionbar .btn { min-width: 48px; }
}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .ed-top { flex-wrap: wrap; row-gap: 0; padding-bottom: 2px; }
  .ed-left { flex: 1 1 auto; }
  .seg { margin: 0 0 0 auto; }
  .ed-right { flex: 1 1 100%; order: 3; justify-content: safe center; padding-top: 2px; }
  .room-name { max-width: 50vw; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .tray-strip { min-height: 156px; }
  .card { width: 122px; height: 136px; }
  .card .thumb { width: 108px; height: 96px; }
  .card.surf .thumb { width: 110px; height: 92px; }
  .card .nm { font-size: 12.5px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --top-h: 54px; }
  .ed-top .btn .lb { display: none; }
  .btn, .tab { min-height: 46px; }
  .tray-tabs { padding-top: 4px; padding-bottom: 2px; }
  .tab { min-height: 44px; font-size: 13px; padding: 2px 10px 2px 8px; }
  .tray-strip { min-height: 104px; padding-top: 4px; padding-bottom: 6px; }
  .card { width: 86px; height: 96px; }
  .card .thumb { width: 74px; height: 62px; }
  .card.surf .thumb { width: 76px; height: 60px; }
  .mini-logo { font-size: 24px; }
}

@media (max-height: 450px) and (orientation: landscape) {
  :root { --top-h: 50px; }
  .ed-top { padding-top: calc(3px + var(--safe-t)); padding-bottom: 3px; gap: 6px; min-height: 0; }
  .ed-right, .hdr-btns { padding: 2px; }
  .ed-top .btn, .room-nav .btn { min-height: 44px; min-width: 44px; }
  .btn .ic { font-size: 20px; }
  .room-name { font-size: 15px; max-width: 150px; }
  .tab span:not(.ic) { display: none; }
  .tab { padding: 2px 10px; min-height: 42px; }
  .tray-tabs { padding-top: 4px; padding-bottom: 0; }
  .tray-strip { min-height: 92px; padding-top: 4px; padding-bottom: 4px; }
  .card { width: 80px; height: 88px; padding: 4px 3px 3px; }
  .card .thumb { width: 70px; height: 58px; }
  .card.surf .thumb { width: 72px; height: 56px; }
  .card .nm { font-size: 10px; }
  .ed-trash { width: 64px; height: 64px; font-size: 30px; right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-blink, .aw-wag, .aw-twinkle, .aw-float, .aw-sway, .aw-spin, .aw-pulse, .aw-steam, .aw-beam,
  .sky-title, .cloud, .floaty, .logo::after, .spark, .mascot, .btn-play, .sel-outline.dash,
  .lt-party .aw-inst.is-dog > .fx { animation: none !important; }
  .floaty { display: none; }
  .screen { transition-duration: .2s, .2s, 0s !important; }
  .aw-inst > .fx[class*='aw-tap-'] { animation-duration: .3s !important; }
}

/* ---------- visiting a friend's shared design (read-only house) ---------- */
body.aw-readonly #tray,
body.aw-readonly #btn-undo,
body.aw-readonly #btn-redo,
body.aw-readonly #btn-surprise,
body.aw-readonly #btn-menu,
body.aw-readonly #actionbar,
body.aw-readonly #trash { display: none !important; }
body.aw-readonly .room-grid[data-count="1"] { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* ---------- pets waiting to be adopted (finish their design request to unlock) ---------- */
.card.is-locked .thumb svg { filter: brightness(0) saturate(0) opacity(.22); }
.card.is-locked .nm { opacity: .7; }
.card.is-locked::before {
  content: '🔒'; position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(120, 60, 140, .25);
}