/* Play Houses - friendly, rounded, pastel. System fonts only. */
:root {
  --ink: #5b4a72;
  --ink-soft: #8a7aa0;
  --paper: #fff7fb;
  --pink: #ff9ebb;
  --pink-soft: #ffe4ee;
  --sky: #cfe8ff;
  --shadow: rgba(91, 74, 114, 0.16);
  --line: #4a3340; /* the dark outline colour, same as PH.OUTLINE.color */
  --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);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: #fdf0e8; color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; width: 100%; }
#app { position: absolute; inset: 0; }
img, svg { -webkit-user-drag: none; user-drag: none; }
button { font: inherit; color: inherit; touch-action: manipulation; }
.hidden { display: none !important; }
.grow { flex: 1; }
.ico { width: 28px; height: 28px; display: block; }
svg.art { display: block; overflow: visible; }

.screen {
  position: absolute; inset: 0;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}

/* ---------- buttons ---------- */
.btn {
  width: 56px; height: 56px; border-radius: 20px; border: 3px solid var(--line); padding: 0;
  background: #fff; color: var(--ink); display: inline-grid; place-items: center;
  box-shadow: 0 4px 0 var(--shadow); cursor: pointer; flex: none;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.btn:disabled { opacity: 0.4; }
.btn.round { border-radius: 50%; }
.btn.on { background: var(--pink-soft); box-shadow: inset 0 0 0 4px var(--pink), 0 4px 0 var(--shadow); }
.btn.go { background: #aeeaa6; color: #2f6b3a; }
.btn.danger { background: #ffd0d0; color: #b0405a; }
.btn.danger.confirm { background: #ff7f8f; color: #fff; animation: pulse 0.5s infinite alternate; }
.btn.accent { background: #e4d9ff; color: #5b3fa8; }
.btn svg.art { width: 100%; height: 100%; }
.btn.tab { width: 64px; height: 64px; padding: 8px; }
.btn.tab.small { width: 56px; height: 56px; padding: 6px; border-radius: 18px; }
.btn.cat { width: 56px; height: 56px; padding: 6px; border-radius: 19px; }
.btn.cat.paintcat { color: #ff7fa8; }
.btn.cat .ico { width: 30px; height: 30px; }
.btn.pose { width: 52px; height: 66px; padding: 4px; border-radius: 18px; }
.btn.chip { width: 54px; height: 54px; padding: 4px; border-radius: 50%; }
.btn.chip.add { color: var(--ink-soft); }
.btn.colorbtn .dot { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.7), 0 0 0 3px var(--ink); }
@keyframes pulse { to { transform: scale(1.08); } }

/* ---------- start screen ---------- */
.home {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  background:
    radial-gradient(circle at 12% 18%, #ffe0ec 0 90px, transparent 91px),
    radial-gradient(circle at 88% 82%, #dff0ff 0 130px, transparent 131px),
    radial-gradient(circle at 80% 12%, #fff2c2 0 70px, transparent 71px),
    radial-gradient(circle at 15% 85%, #dcf6d4 0 100px, transparent 101px),
    #fff8f1;
}
.home .logo svg { width: min(46vw, 300px); height: auto; animation: bob 3.2s ease-in-out infinite; }
.profiles { display: flex; gap: min(4vw, 34px); flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.profile {
  width: min(26vw, 210px); min-width: 140px; border: 0; border-radius: 44px; background: var(--bg, #ffe4ee);
  padding: 18px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 9px 0 var(--shadow); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.profile:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--shadow); }
.profile .pic { width: 100%; max-width: 150px; aspect-ratio: 1; }
.profile .pic svg { width: 100%; height: 100%; }
.faces { display: flex; gap: 6px; min-height: 46px; }
.face { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.75); padding: 2px; display: grid; place-items: center; overflow: hidden; }
.face svg { width: 100%; height: 100%; }
.face.plus { color: var(--ink-soft); }
.face.plus .ico { width: 24px; height: 24px; }
.profile.armed { box-shadow: 0 0 0 7px #ff7f8f, 0 9px 0 var(--shadow); }
.profiles.small .profile { width: 110px; min-width: 0; padding: 10px; border-radius: 30px; }
.corner { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }

/* ---------- play screen: the scene fills the screen, everything else floats ---------- */
.play { padding: 0; background: #dff0ff; --panel-w: 420px; }
.stagewrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.floaty, .topbar, .actionbar, .minimap { transition: opacity 0.2s, transform 0.25s; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 6px calc(14px + var(--safe-l));
}
.topbar > * { pointer-events: auto; }
.topbar > .grow { pointer-events: none; }
.topbar .btn { box-shadow: 0 4px 0 var(--shadow), 0 8px 18px rgba(91, 74, 114, 0.18); }
.seg { display: flex; gap: 8px; padding: 4px; background: rgba(255, 255, 255, 0.8); border-radius: 26px; box-shadow: 0 6px 18px rgba(91, 74, 114, 0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seg.rooms { background: rgba(255, 228, 238, 0.85); }
.panelbtn { width: 62px; height: 62px; border-radius: 22px; padding: 7px; background: #ffe27a; }
.panelbtn.drawerbtn-people { background: #ffd1e0; }
.panelbtn.drawerbtn-paint { background: #d7ecff; color: #3f78b8; }
.panelbtn.open { background: #ffd1e0; color: #b0405a; }
.panelbtn svg.art { width: 100%; height: 100%; }
.panelbtn .ico { width: 34px; height: 34px; }

/* while something is being dragged the chrome gets out of the way */
.play.dragging .topbar, .play.dragging .actionbar, .play.dragging .colorrow, .play.dragging .minimap { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.play.dragging .topbar > * { pointer-events: none; }

.bin {
  position: absolute; z-index: 40; left: calc(16px + var(--safe-l)); top: calc(14px + var(--safe-t)); width: 92px; height: 92px; border-radius: 50%;
  background: #ff9aa8; color: #fff; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 6px 0 rgba(176, 64, 90, 0.35), 0 12px 24px rgba(91, 74, 114, 0.25);
  opacity: 0; transform: translateY(-30px) scale(0.5); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.15s;
}
.bin svg { width: 56%; height: 56%; overflow: visible; }
.bin .lid { transform-origin: 14px 16px; transition: transform 0.2s; }
.play.dragging .bin { opacity: 1; transform: none; animation: binwiggle 1.6s ease-in-out 0.3s infinite; }
.bin.hover { background: #ff5f78; animation: none !important; transform: scale(1.28) !important; box-shadow: 0 0 0 8px rgba(255, 95, 120, 0.3), 0 10px 0 rgba(176, 64, 90, 0.35); }
.bin.hover .lid { transform: rotate(-32deg) translate(-3px, -4px); }
@keyframes binwiggle { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-5deg); } 55% { transform: rotate(5deg); } }

.minimap {
  position: absolute; z-index: 15; left: 50%; bottom: calc(14px + var(--safe-b)); width: min(220px, 34vw); height: 14px; margin-left: calc(min(220px, 34vw) / -2);
  border-radius: 8px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 2px 8px rgba(91, 74, 114, 0.18); pointer-events: none; opacity: 0.8;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.minimap.single { display: none; }
.minimap .dots b { position: absolute; top: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; opacity: 0.75; }
.minimap .win { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: rgba(255, 158, 187, 0.4); box-shadow: inset 0 0 0 2.5px #ff7fa8; }

.actionbar {
  position: absolute; z-index: 18; left: 50%; bottom: calc(40px + var(--safe-b)); transform: translateX(-50%); display: flex; justify-content: center; pointer-events: none; max-width: 96vw;
}
.ctx { display: none; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 34px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 6px 0 var(--shadow), 0 12px 28px rgba(91, 74, 114, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: auto; }
.has-selection .ctx { display: flex; animation: pop 0.25s ease-out; }
.ctx .btn { background: #fff7fb; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
.colorrow {
  position: absolute; left: 50%; bottom: calc(126px + var(--safe-b)); transform: translateX(-50%); z-index: 22;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 16px; max-width: 92%;
  background: #fff; border-radius: 28px; box-shadow: 0 6px 0 var(--shadow), 0 14px 30px rgba(91, 74, 114, 0.25);
}
/* keep the bottom bits clear of the catalogue popup */
@media (min-aspect-ratio: 1/1) {
  .panel-open .actionbar, .panel-open .minimap, .panel-open .colorrow { left: calc((100% - var(--panel-w) - 16px) / 2); }
}

/* ---------- stage world ---------- */
.world { position: absolute; left: 0; top: 0; height: 820px; transform-origin: 0 0; will-change: transform; --inv: 1; }
.world .bg, .world .items { position: absolute; inset: 0; }
.world .bg svg { display: block; }
.world .items { pointer-events: none; }
.item { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; contain: layout style; }
.item .body { width: 100%; height: 100%; transform-origin: 50% 100%; } /* contact shadows are baked into the art; the blur filter only shows while lifted */
.item svg { width: 100%; height: 100%; display: block; overflow: visible; }
.item svg * { pointer-events: auto; }
.item .body.lifted { transform: translateY(-8px) scale(1.07); filter: drop-shadow(0 18px 8px rgba(91, 74, 114, 0.28)); }
.item .body.bounce { animation: bounce 0.55s cubic-bezier(0.3, 0.7, 0.4, 1); }
.item.overbin .body { transform: translateY(-8px) scale(0.78) rotate(-6deg); opacity: 0.8; }
.pose-dance .body, .mk-preview.pose-dance svg { animation: dance 0.65s ease-in-out infinite alternate; }
@keyframes bounce {
  0% { transform: translateY(-16px) scale(1.05, 0.95); }
  35% { transform: translateY(0) scale(1.12, 0.86); }
  58% { transform: translateY(-8px) scale(0.97, 1.04); }
  78% { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: none; }
}
@keyframes dance { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-10px); } }

.sel { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; display: none; --hs: calc(58px * var(--inv, 1)); }
.sel .box { position: absolute; inset: 0; border: calc(3px * var(--inv, 1)) dashed #ff7fa8; border-radius: calc(16px * var(--inv, 1)); background: rgba(255, 158, 187, 0.08); }
.sel.has-rot::before { content: ""; position: absolute; left: 50%; top: calc(var(--hs) * -0.7); width: calc(3px * var(--inv, 1)); height: calc(var(--hs) * 0.7); background: #ff7fa8; margin-left: calc(-1.5px * var(--inv, 1)); }
.hd {
  position: absolute; width: var(--hs); height: var(--hs); border: 0; padding: 0; border-radius: 50%;
  background: #fff; color: var(--ink); display: grid; place-items: center; pointer-events: auto; touch-action: none; cursor: grab;
  box-shadow: 0 calc(4px * var(--inv, 1)) 0 rgba(91, 74, 114, 0.25), 0 0 0 calc(3px * var(--inv, 1)) #ff9ebb;
}
.hd i { display: block; width: 54%; height: 54%; transform: rotate(var(--ir, 0deg)); pointer-events: none; }
.hd svg { width: 100%; height: 100%; }
.hd-del { left: calc(var(--hs) * -0.5); top: calc(var(--hs) * -0.5); background: #ff8f9f; color: #fff; }
.hd-size { right: calc(var(--hs) * -0.5); bottom: calc(var(--hs) * -0.5); background: #d7ecff; }
.hd-rot { left: 50%; top: calc(var(--hs) * -1.35); margin-left: calc(var(--hs) * -0.5); background: #e4d9ff; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 9500; }
.spark { position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.spark svg { width: 100%; height: 100%; display: block; }

/* ---------- catalogue popup (right side in landscape, bottom sheet in portrait) ---------- */
.panel {
  position: absolute; z-index: 30; right: calc(12px + var(--safe-r)); top: calc(92px + var(--safe-t)); bottom: calc(12px + var(--safe-b)); width: var(--panel-w);
  display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 10px 12px 12px;
  background: rgba(255, 247, 251, 0.97); border: 4px solid var(--line); border-radius: 32px; box-shadow: 0 8px 0 var(--shadow), 0 18px 40px rgba(91, 74, 114, 0.28);
  transform: translateX(calc(100% + 40px)); transition: transform 0.28s cubic-bezier(0.3, 1.1, 0.5, 1); pointer-events: none;
}
.panel-open .panel { transform: none; pointer-events: auto; }
.panel-open.dragging .panel { transform: translateX(calc(100% + 40px)); transition-duration: 0.18s; }
.panel { display: flex; flex-direction: column; }
/* two rows of big picture tabs on top (zone, then the zone's object categories), the objects below */
.zonetabs, .cattabs { display: flex; flex: none; gap: 8px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 2px 6px; scrollbar-width: none; }
.zonetabs::-webkit-scrollbar, .cattabs::-webkit-scrollbar { display: none; }
.zonetabs .btn.zone { width: 62px; height: 62px; padding: 6px; border-radius: 20px; }
.cattabs { background: var(--pink-soft); border-radius: 22px; padding: 6px; }
.cattabs .btn.cat { width: 52px; height: 52px; padding: 5px; border-radius: 17px; }
.drawer-people .zonetabs, .drawer-people .cattabs, .drawer-paint .zonetabs, .drawer-paint .cattabs { display: none; }
.grid {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  touch-action: pan-y; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; grid-auto-rows: calc((var(--panel-w) - 64px) / 3); padding: 4px 2px 12px;
}
.tile {
  position: relative; aspect-ratio: 1; border-radius: 22px; background: #fff; border: 3px solid var(--line); padding: 8px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px var(--pink-soft), 0 3px 0 var(--shadow); touch-action: pan-y; cursor: grab; min-width: 0;
}
.tile svg.art { width: 100%; height: 100%; pointer-events: none; }
.tile.dragging { opacity: 0.45; }
.tile.tapped { animation: tapped 0.3s ease-out; }
@keyframes tapped { 40% { transform: scale(0.9); } }
.tile .badge {
  position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #e4d9ff; color: #5b3fa8;
  display: grid; place-items: center; padding: 0; box-shadow: 0 2px 0 var(--shadow);
}
.tile .badge .ico { width: 22px; height: 22px; }
.grid-people { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
.grid-people .tile { aspect-ratio: 0.74; padding: 12px 8px 8px; }
.tile.newchar { color: var(--ink-soft); background: #fff; border: 0; box-shadow: inset 0 0 0 3px #e7defa, 0 3px 0 var(--shadow); cursor: pointer; touch-action: manipulation; }
.tile.newchar .ico { width: 44px; height: 44px; }

.grid-paint { display: flex; flex-direction: column; gap: 14px; }
.zonehint { width: 56px; height: 56px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 4px var(--pink), 0 3px 0 var(--shadow); flex: none; }
.zonehint svg { width: 100%; height: 100%; overflow: hidden; }
.paintsec { background: #fff; border-radius: 24px; padding: 10px 12px; box-shadow: 0 3px 0 var(--shadow); }
.paintlabel { color: var(--ink-soft); }
.paintlabel .ico { width: 30px; height: 30px; }
.swrow { display: flex; flex-wrap: wrap; gap: 9px; padding: 8px 2px; }
.swatch-c { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.75), 0 2px 0 var(--shadow); cursor: pointer; flex: none; }
.swatch-c.on { outline: 4px solid var(--ink); outline-offset: 2px; }
.swatch-p { width: 50px; height: 50px; border-radius: 18px; border: 0; padding: 0; background: #fff; box-shadow: 0 2px 0 var(--shadow); cursor: pointer; flex: none; }
.swatch-p svg { width: 100%; height: 100%; display: block; }
.swatch-p.on { outline: 4px solid var(--ink); outline-offset: 2px; }
.swrow.big .swatch-c { width: 62px; height: 62px; }

.ghost { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; filter: drop-shadow(0 14px 8px rgba(91, 74, 114, 0.3)); transition: opacity 0.15s; }
.ghost.overbin { opacity: 0.55; }
.ghost svg { width: 100%; height: 100%; display: block; }

/* ---------- portrait iPad / phone: the popup becomes a bottom sheet ---------- */
@media (max-aspect-ratio: 1/1) {
  .play { --panel-h: clamp(340px, 42vh, 460px); }
  .panel { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); top: auto; bottom: calc(10px + var(--safe-b)); width: auto; height: var(--panel-h); border-radius: 30px; transform: translateY(calc(100% + 30px)); }
  .panel-open .panel { transform: none; }
  .panel-open.dragging .panel { transform: translateY(calc(100% + 30px)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 112px; }
  .grid-people { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 170px; }
  .grid.grid-paint { display: flex; flex-direction: column; }
  .topbar { gap: 8px; padding-left: calc(10px + var(--safe-l)); padding-right: calc(10px + var(--safe-r)); flex-wrap: wrap; }
  .panel-open .actionbar { bottom: calc(var(--panel-h) + 56px + var(--safe-b)); }
  .panel-open .minimap { bottom: calc(var(--panel-h) + 24px + var(--safe-b)); }
  .panel-open .colorrow { bottom: calc(var(--panel-h) + 140px + var(--safe-b)); }
}
@media (max-width: 860px) {
  .topbar .btn.tab { width: 54px; height: 54px; }
  .topbar .btn.tab.small { width: 48px; height: 48px; }
  .topbar .btn { width: 50px; height: 50px; }
  .topbar .panelbtn { width: 54px; height: 54px; }
  .topbar { gap: 6px; }
}

/* ---------- character maker ---------- */
.maker { z-index: 50; display: flex; flex-direction: column; background: linear-gradient(#fff3f8, #e8f4ff); }
.mk-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.mk-cast { display: flex; gap: 8px; overflow-x: auto; touch-action: pan-x; padding: 2px 2px 6px; max-width: 62%; }
.mk-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; padding: 0 14px 14px; }
.mk-left { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; padding: 12px 12px 14px; border-radius: 34px; background: radial-gradient(circle at 50% 40%, #fff, #ffeaf3); box-shadow: 0 5px 0 var(--shadow); }
.mk-preview { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.mk-preview svg { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 8px 6px rgba(91, 74, 114, 0.2)); }
.mk-poses { display: flex; gap: 10px; flex: none; }
.mk-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 10px 10px 6px; border-radius: 34px; background: #fff; box-shadow: 0 5px 0 var(--shadow); }
.mk-tabs { display: flex; gap: 8px; overflow-x: auto; touch-action: pan-x; padding: 4px 4px 10px; flex: none; }
.mk-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 4px 12px; }
.mk-group + .mk-group { margin-top: 10px; padding-top: 10px; border-top: 3px dotted var(--pink-soft); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.opt { aspect-ratio: 1; border: 0; padding: 6px; border-radius: 22px; background: #fff8fb; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 3px var(--pink-soft), 0 3px 0 var(--shadow); touch-action: pan-y; min-width: 0; }
.opt svg.art { width: 100%; height: 100%; }
.opt.on { background: #ffeef5; box-shadow: inset 0 0 0 5px var(--pink), 0 3px 0 var(--shadow); }
.opt .none { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #d9cfe8; position: relative; }
.opt .none::after { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 5px; background: #d9cfe8; transform: translateX(-50%) rotate(45deg); }
@media (max-aspect-ratio: 1/1) {
  .mk-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
  .mk-left { flex-direction: row; justify-content: center; }
  .mk-preview { width: auto; height: 100%; flex: 0 1 auto; }
  .mk-poses { flex-direction: column; }
  .mk-cast { max-width: 100%; }
  .mk-top { flex-wrap: wrap; }
}

/* ---------- grown-up gate ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(91, 74, 114, 0.4); padding: 16px; }
.card { position: relative; width: min(92vw, 400px); max-height: 94vh; overflow-y: auto; padding: 26px 24px 24px; border-radius: 34px; background: #fff; text-align: center; box-shadow: 0 8px 0 var(--shadow); touch-action: pan-y; }
.card h2 { margin: 0 0 8px; font-size: 22px; }
.card p { margin: 6px 0 12px; color: var(--ink-soft); font-size: 17px; }
.card p.note { font-size: 14px; }
.card .x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; box-shadow: none; background: #f6f0ff; }
.gate-screen { height: 56px; line-height: 56px; margin: 0 auto 12px; width: 180px; border-radius: 18px; background: #f6f0ff; font-size: 30px; font-weight: 800; letter-spacing: 4px; }
.gate-screen.shake { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { height: 60px; border: 0; border-radius: 20px; background: #ffe9f1; font-size: 26px; font-weight: 800; box-shadow: 0 4px 0 var(--shadow); }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.key.ok { background: #aeeaa6; color: #2f6b3a; }
.wide { display: block; width: 100%; margin: 10px 0; padding: 16px; border: 0; border-radius: 20px; background: #ffe9f1; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 var(--shadow); }
.wide.warn { background: #ffe3c4; }
.wide.danger { background: #ffc9c9; }
.wide.armed { background: #ff7f8f; color: #fff; }

/* keep intrinsic svg sizes from stretching buttons / tiles */
.btn { overflow: hidden; }
.btn svg.art { max-width: 100%; max-height: 100%; }
.tile > svg.art, .opt > svg.art { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.grid-people .tile > svg.art { inset: 12px 8px 8px; width: calc(100% - 16px); height: calc(100% - 20px); }
.opt { position: relative; }
.opt > svg.art { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.tile, .opt { min-height: 0; overflow: hidden; }
.tile .badge { z-index: 2; }

/* cropped thumbnails must not leak outside their tile */
.btn svg.art, .opt svg.art, .face svg, .tile svg.art, .swatch-p svg { overflow: hidden; }
.mk-preview { position: relative; }
.mk-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-aspect-ratio: 1/1) {
  .mk-preview { aspect-ratio: 200 / 340; height: 100%; width: auto; }
}
.play.dragging .sel { opacity: 0; }