@font-face {
  font-family: "Loft Nunito";
  src: url("./nunito-extra-bold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --play-ink: #34434b;
  --play-paper: #fff;
  --play-pink: #ee7999;
  --play-mint: #66bcab;
  --play-yellow: #ffcf66;
  --play-blue: #72b4e1;
  --play-shadow: 0 4px 0 #34434b24, 0 7px 16px #34434b14;
}

body, button, input, select { font-family: "Loft Nunito", "Avenir Next", sans-serif; letter-spacing: 0; }
.game-shell { background: #b8e3e6; }
.stage::before { border: 0; background: none; box-shadow: none; }
.scene-world::before, .scene-world::after { background: none; box-shadow: none; }
.scene-art { filter: none; }
.stage.night .scene-art { filter: brightness(.64) saturate(.85); }

.topbar {
  top: calc(14px + env(safe-area-inset-top));
  left: calc(18px + env(safe-area-inset-left));
  right: calc(18px + env(safe-area-inset-right));
  grid-template-columns: minmax(130px, 1fr) auto 48px;
  align-items: start;
  gap: 12px;
}
.brand {
  width: max-content;
  max-width: 100%;
  min-height: 54px;
  padding: 4px 10px 4px 4px;
  gap: 9px;
  border: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--play-shadow);
  backdrop-filter: none;
  color: var(--play-ink);
  text-decoration: none;
  cursor: pointer;
}
.brand:hover { background: #effaf7; }
.brand:focus-visible { outline: 3px solid #28786d; outline-offset: 4px; }
.brand:active { box-shadow: 0 2px 0 #34434b24; }
.brand h1 { font-size: 18px; line-height: 1.1; color: var(--play-ink); }
.brand-mark { width: 44px; height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 1px; border: 0; background: #28786d; box-shadow: inset 0 -3px 0 #173e3628; }
.brand-mark svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2.6; }
.home-label { color: #fff; font-size: 10px; line-height: 12px; }
.brand .subtitle, .selected-pill { display: none; }
.scene-nav {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.scene-button {
  position: relative;
  justify-content: center;
  flex: 0 0 68px;
  width: 68px;
  min-width: 0;
  height: 70px;
  padding: 43px 4px 4px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--play-shadow);
  color: var(--play-ink);
  font-size: 11px;
  line-height: 15px;
  transform: none;
}
.scene-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: #b8e3e6;
  background-size: auto 78px;
  background-position: 21% 37%;
  background-repeat: no-repeat;
  border-radius: 4px 4px 0 0;
}
.scene-button[data-scene="loft"]::before { background-image: url("./scene-loft.svg?v=11.2.1"); }
.scene-button[data-scene="roof"]::before { background-image: url("./scene-roof.svg?v=11.2.1"); }
.scene-button[data-scene="market"]::before { background-image: url("./scene-market.svg?v=11.2.1"); }
.scene-button[data-scene="studio"]::before { background-image: url("./scene-studio.svg?v=11.2.1"); }
.scene-button svg { display: none; }
.scene-button.active { border-color: #ffc755; background: #fff4ca; box-shadow: 0 4px 0 #b38936, 0 7px 15px #34434b17; transform: translateY(-2px); }
.controls { grid-column: 3; grid-row: 1; }
.controls .icon-button { width: 48px; height: 48px; border: 3px solid #fff; background: #c8e4f4; border-radius: 50%; box-shadow: var(--play-shadow); backdrop-filter: none; }
.status-strip {
  position: absolute;
  top: 80px;
  left: 50%;
  width: max-content;
  max-width: min(460px, calc(100vw - 44px));
  min-height: 0;
  padding: 9px 17px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--play-shadow);
  backdrop-filter: none;
  transform: translate(-50%, -7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.status-strip.message-visible { opacity: 1; transform: translate(-50%, 0); }
.status-strip .message { font-size: 13px; line-height: 1.35; white-space: normal; text-align: center; }
.status-strip .stars { display: none; }
.active-story-strip { top: 144px; }

.friend-rail {
  position: absolute;
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 580;
  display: flex;
  gap: 7px;
  padding: 0;
}
.friend-button {
  position: relative;
  display: grid;
  grid-template-rows: 55px 16px;
  place-items: center;
  width: 65px;
  height: 81px;
  flex: 0 0 65px;
  padding: 3px;
  border: 3px solid #fff;
  border-radius: 8px;
  background: var(--friend-bg, #d7edee);
  color: var(--play-ink);
  box-shadow: var(--play-shadow);
  cursor: pointer;
  transition: transform .15s ease;
}
.friend-button[aria-pressed="true"] { border-color: #ffc755; transform: translateY(-6px); }
.friend-button > span:last-child { font-size: 11px; line-height: 16px; }
.friend-portrait { position: relative; width: 58px; height: 58px; min-height: 0; transform: none; pointer-events: none; overflow: hidden; }
.friend-portrait::before { display: none; }
.friend-portrait .avatar { width: 65px; height: 87px; bottom: -34px; filter: none; transform: translateX(-50%); }
.friend-portrait .avatar .eye { animation: none; }
.friend-portrait .bubble, .friend-portrait .name-tag { display: none; }

.play-dock {
  left: auto;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  width: max-content;
  max-width: calc(100% - 324px);
  min-height: 0;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.dock-actions { gap: 7px; align-items: end; overflow: auto; padding: 5px 2px 7px; scrollbar-width: none; }
.dock-context-actions, .dock-actions .quick-actions { flex: 0 0 auto; gap: 7px; padding: 0; overflow: visible; }
.dock-tools { gap: 7px; align-items: end; padding-bottom: 7px; }
.play-dock .mini-button, #propDrawerToggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 53px;
  gap: 4px;
  width: 53px;
  min-width: 53px;
  height: 64px;
  min-height: 64px;
  padding: 5px 2px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--play-shadow);
  color: var(--play-ink);
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}
.toy-icon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.play-dock .mini-button > svg { width: 25px; height: 25px; margin: 0; }
.play-dock [data-quick="emote"] { background: #ffedb4; }
.play-dock [data-quick="greet"] { background: #d2efdf; }
.play-dock [data-quick="dance"] { background: #f7d7e3; }
.play-dock [data-quick="favorite"] { background: #ffe6d5; }
.play-dock [data-quick="nudge"] { background: #e0e0f5; }
.play-dock [data-arm-mischief], .play-dock [data-break-object] { background: #f5d6cc; }
.play-dock [data-oven-fire] { background: #ffe1b4; }
.play-dock [data-oven-fire].fire-active { background: #c6ecf7; }
.play-dock [data-arm-mischief].mischief-active { border-color: #d76366; background: #f4adad; }
.play-dock [data-throw-furniture], .play-dock [data-lift-furniture] { background: #cdf0e3; }
.play-dock [data-drop-furniture] { background: #d7e9fa; }
.play-dock #propDrawerToggle { background: var(--play-yellow); }
.camera-controls { gap: 5px; }
.camera-button { width: 40px; min-width: 40px; height: 44px; min-height: 44px; border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: var(--play-shadow); }
#cameraZoomOut, #cameraZoomIn { display: grid; }
.camera-edge { width: 48px; height: 58px; border: 3px solid #fff; background: #fff; box-shadow: var(--play-shadow); }
.camera-edge-left { left: 12px; }
.camera-edge-right { right: 12px; }

.prop-drawer { left: 50%; right: auto; bottom: calc(115px + env(safe-area-inset-bottom)); width: min(760px, calc(100% - 32px)); height: auto; border: 0; background: transparent; overflow: visible; transform: translateX(-50%); }
.prop-drawer .prop-panel { height: auto; grid-template-rows: auto auto minmax(0, 1fr); border: 3px solid #fff; border-radius: 8px; background: #f1f9f5; box-shadow: 0 8px 0 #34434b24, 0 20px 45px #34434b22; }
.prop-drawer .prop-panel .panel-title { padding: 13px 16px 5px; background: transparent; font-size: 16px; }
.prop-filters { display: flex; gap: 7px; padding: 8px 12px 12px; overflow-x: auto; }
.prop-filter { display: flex; gap: 5px; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 6px 12px; border: 2px solid #dbe6e1; border-radius: 8px; background: #fff; font-size: 12px; color: var(--play-ink); }
.prop-filter .toy-icon { width: 21px; height: 21px; }
.prop-filter[aria-pressed="true"] { border-color: #399980; background: #d0f0e1; }
.prop-drawer .prop-panel .tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(83px, 1fr)); gap: 9px; max-height: min(270px, 36svh); padding: 0 12px 14px; overflow-y: auto; overflow-x: hidden; scroll-padding: 12px; }
.prop-drawer .prop-panel .tray-item { display: flex; flex-direction: column; justify-content: center; width: auto; min-width: 0; height: 85px; padding: 8px 4px; border: 2px solid #fff; border-radius: 8px; background: #fff; box-shadow: 0 3px 0 #34434b16; }
.prop-drawer .prop-panel .tray-item[hidden] { display: none; }
.prop-drawer .prop-panel .tray-item .label { font-size: 10px; line-height: 1.15; white-space: normal; }
.prop-drawer .prop-panel .tray-icon { transform: scale(.94) rotate(-5deg); }
.prop-drawer .prop-panel .tray-icon.headphones { box-shadow: none; }
.prop-drawer .prop-panel .tray-icon.headphones::before,
.prop-drawer .prop-panel .tray-icon.headphones::after { content: ""; position: absolute; bottom: -2px; width: 9px; height: 15px; border: 2px solid #493e40; border-radius: 4px; background: #a898cb; }
.prop-drawer .prop-panel .tray-icon.headphones::before { left: -5px; }
.prop-drawer .prop-panel .tray-icon.headphones::after { right: -5px; }
.prop-drawer .prop-panel .tray-icon.pillow { width: 34px; height: 25px; border-radius: 7px; background: #f5e8d5; box-shadow: inset 0 0 0 3px #fff8; }
.prop-drawer .prop-panel .tray-item:hover { border-color: #74bbaa; }
.prop-drawer .prop-panel .tray-item:active .tray-icon { transform: scale(1.05) rotate(4deg); }
.prop-drawer-close { position: absolute; top: 9px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; color: var(--play-ink); }
.prop-drawer .prop-panel .panel-title > span:last-child { margin-right: 40px; font-size: 12px; }

/* Fixture fronts occlude only occupants. Friends walking past remain in front. */
.loft-fixture-front { position: absolute; z-index: 151; display: none; pointer-events: none; background: center / 100% 100% no-repeat; }
.bed-front { left: 54.267%; top: 49.222%; width: 6.267%; height: 17.333%; background-image: url("./bed-front.svg?v=11.2.1"); }
.bath-front { left: 81.067%; top: 49.667%; width: 7.6%; height: 20.333%; background-image: url("./bath-front.svg?v=11.2.1"); }
.stage.scene-loft:has(.actor.tucked-in) .bed-front,
.stage.scene-loft:has(.actor.bathing) .bath-front { display: block; }
.stage .actor.tucked-in .avatar { transform: translateX(-50%) rotate(-82deg); animation: none; transition: none; }
.stage .actor.bathing .avatar { transform: translateX(-50%); animation: none; transition: none; }
.stage .actor.sitting .avatar { transition: none; }
.stage .actor { pointer-events: none; }
.stage .actor :is(.head, .body, .arm, .leg, .name-tag) { pointer-events: auto; }
.stage .actor.tucked-in::before, .stage .actor.bathing::before,
.stage .actor.tucked-in .name-tag, .stage .actor.bathing .name-tag { display: none; }
.stage .actor.sleeping .eye { height: 2px; animation: none; }
.loft-photo-print { position: absolute; left: 45.6%; top: 29%; width: 1.8%; height: 8.5%; z-index: 61; padding: 3px; background: #fffaf0; border: 1px solid #c7bda6; transform: rotate(6deg); pointer-events: none; }
.loft-photo-print[hidden], .stage:not(.scene-loft) .loft-photo-print { display: none; }
.stage .loft-photo-print .friend-portrait { display: block; width: 100%; height: 78%; background: #c7e7df; overflow: hidden; }
.stage .loft-photo-print .friend-portrait .avatar { width: 56px; height: 75px; bottom: -29px; }
.loft-photo-print > span:last-child { display: block; text-align: center; font-size: 7px; line-height: 11px; }
.stage.scene-loft.bed-made .effect-bed-made, .stage.scene-loft.photo-filled .effect-photo-filled,
.stage.scene-loft.cozy-corner .effect-cozy-corner, .stage.scene-loft.photo-shoot .effect-photo-shoot { display: none; }
.stage .hotspot:hover:not(.target-near):not(.target-ready) { background: transparent; border-color: transparent; box-shadow: none; }
.stage.scene-loft .effect-record-on { left: 44.73%; top: 46.44%; width: .867%; height: .67%; background: #f4d985; border: 0; box-shadow: none; }
.stage.scene-loft .effect-record-on::before, .stage.scene-loft .effect-record-on::after { display: none; }
.stage.scene-loft .effect-tv-on { left: 33.03%; top: 21.78%; width: 7.07%; height: 13.44%; background: #fff8ba17; border: 2px solid #fff6b588; box-shadow: none; }
.stage.scene-loft .effect-sink-running { left: 74.13%; top: 44.7%; width: .2%; height: 3.6%; box-shadow: none; }
.stage.scene-loft .effect-laundry-running { left: 66.9%; top: 51.1%; width: 2.53%; height: 8.44%; border-width: 3px; box-shadow: none; }
.stage.scene-loft .effect-plant-happy { left: 25.8%; top: 64.4%; width: 2.9%; height: 10%; }
.stage.scene-loft .effect-shelf-decorated { left: 28.4%; top: 36%; width: 1.2%; height: 4%; }
.stage.scene-loft .effect-night { left: 57.1%; top: 36%; width: 4%; height: 14%; }
.stage.scene-loft .effect-combo-meal { left: 14%; top: 66%; width: 2.5%; height: 5%; }
.stage.scene-loft .effect-table-set { left: 11.5%; top: 66%; width: 6.5%; height: 6%; }
.stage.scene-loft .effect-garden-combo { left: 25.5%; top: 65%; width: 4%; height: 12%; }
.stage.scene-loft .effect-fridge-open { left: 21.85%; top: 30%; width: 3.3%; height: 20%; }
.stage.living-stove-active.scene-loft .scene-state-effects::before { left: 17.25%; top: 41.5%; width: 3.5%; height: 2%; }
.stage.living-stove-smoke.scene-loft .scene-state-effects::after { left: 18.7%; top: 38%; }
.stage.scene-loft .effect-oven-fire { left: 16.6%; top: 27%; width: 4.6%; height: 33%; }

/* Room changes sit on the objects themselves, in the same 3000 x 900 coordinates. */
.stage .room-detail { border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; animation: none; transform: none; opacity: 1; }
.room-detail > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stage.scene-roof .effect-roof-bloom { left: 12.433%; top: 45.889%; width: 6.333%; height: 13.333%; }
.stage.scene-roof .effect-picnic-ready { left: 44.333%; top: 77.444%; width: 4.333%; height: 7.222%; }
.stage.scene-roof .effect-garden-combo { display: none; }
.stage.scene-market .effect-market-stocked { left: 41.333%; top: 44%; width: 2.667%; height: 12.222%; }
.stage.scene-market .effect-mail-sent { left: 58.9%; top: 41%; width: 2.2%; height: 5%; transform: rotate(-5deg); }
.stage.scene-market .effect-gift-mail { left: 64.8%; top: 51.778%; width: 2.667%; height: 9.444%; }
.stage.scene-studio .effect-art-hung { left: 19.333%; top: 44.667%; width: 5.2%; height: 20.778%; }
.stage.scene-studio .effect-clinic-ready { left: 68.533%; top: 55.333%; width: 2.333%; height: 7.778%; }
.stage.scene-studio .effect-stage-show { left: 74.3%; top: 21%; width: 12.3%; height: 49%; background: linear-gradient(106deg, transparent 0 28%, #fff0bd40 29% 48%, transparent 49%), linear-gradient(74deg, transparent 0 49%, #c7e5ec40 50% 71%, transparent 72%); }
.stage.scene-studio .effect-band-ready { left: 79.8%; top: 46%; width: 4.2%; height: 12%; }
.stage.scene-studio .effect-clinic-kit { left: 68.9%; top: 63.1%; width: 1.1%; height: 2.8%; border-width: 1px; box-shadow: none; transform: none; }

/* The existing articulated parts still own every pose and attachment point. */
.stage :is(.actor, .friend-portrait) { width: clamp(104px, 10.5cqw, 142px); }
.stage .scene-world > .actor { width: 5.6%; }
:is(.actor, .friend-portrait) .avatar { filter: drop-shadow(0 5px 1px #34434b1a); }
:is(.actor, .friend-portrait).selected .avatar { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #fff); }
:is(.actor, .friend-portrait).selected::before { background: #ffc951; height: 13px; filter: none; box-shadow: 0 0 0 3px #fff9; }
:is(.actor, .friend-portrait) .head { top: 7%; height: 45%; border: 2.5px solid #493e40; border-radius: 45% 45% 44% 44%; background: var(--skin); box-shadow: inset 0 -4px 0 #8b403113; }
:is(.actor, .friend-portrait) .head::after { display: none; }
:is(.actor, .friend-portrait) .ear { top: 27%; border: 2px solid #493e40; width: 12px; height: 14px; }
:is(.actor, .friend-portrait) .body { top: 50%; height: 28%; border: 2.5px solid #493e40; border-radius: 15px 15px 9px 9px; box-shadow: inset 0 -4px 0 #34434b15; }
:is(.actor, .friend-portrait) .body::before { top: -2px; height: 7px; border-color: #493e40; }
:is(.actor, .friend-portrait) .body::after { display: none; }
:is(.actor, .friend-portrait) .arm { top: 54%; height: 23%; border: 2.5px solid #493e40; box-shadow: none; }
:is(.actor, .friend-portrait) .leg { top: 75%; height: 20%; border: 2.5px solid #493e40; background: var(--trousers, #607484); }
:is(.actor, .friend-portrait) .leg::after { height: 10px; border: 2px solid #493e40; background: var(--shoe); box-shadow: inset 0 -3px 0 #fff9; }
:is(.actor, .friend-portrait) .eye { top: 44%; width: 7px; height: 10px; background: #403a40; box-shadow: none; animation: friendBlink 7s infinite; transform-origin: center 65%; }
:is(.actor, .friend-portrait) .eye-left { left: 25%; }
:is(.actor, .friend-portrait) .eye-right { right: 25%; }
:is(.actor, .friend-portrait) .eye::after { width: 2px; height: 2px; }
:is(.actor, .friend-portrait) .brow { top: 31%; border-color: #694943; opacity: .7; }
:is(.actor, .friend-portrait) .nose { top: 56%; left: 47%; border: 0; width: 5px; height: 4px; border-radius: 50%; background: #ac664143; }
:is(.actor, .friend-portrait) .mouth { top: 68%; left: 39%; width: 23%; height: 7px; border-width: 2px; border-color: #71413c; }
:is(.actor, .friend-portrait) .cheek { top: 62%; width: 11px; height: 6px; background: #f075794d; }
:is(.actor, .friend-portrait) .hair-back { border: 2.5px solid #493e40; box-shadow: none; }
:is(.actor, .friend-portrait)[class*="hair-"] .hair-front { left: 6%; top: -5%; width: 88%; height: 45%; border: 0; border-radius: 0; background: none; filter: none; }
:is(.actor, .friend-portrait) .hair-front svg { width: 100%; height: 100%; overflow: visible; fill: var(--hair); stroke: #493e40; stroke-width: 2.2; stroke-linejoin: round; }
:is(.actor, .friend-portrait).hair-nova { --shoe: #ec9aa1; --trousers: #6b8ca8; }
:is(.actor, .friend-portrait).hair-milo { --shoe: #f6c76a; --trousers: #466c68; }
:is(.actor, .friend-portrait).hair-juno { --shoe: #f3ba73; --trousers: #b17491; }
:is(.actor, .friend-portrait).hair-rae { --shoe: #77b7b5; --trousers: #8792ba; }
:is(.actor, .friend-portrait).hair-nova .hair-back { left: 12%; width: 76%; top: 4%; height: 49%; border-radius: 45% 45% 22% 22%; }
:is(.actor, .friend-portrait).hair-milo .hair-back { left: 18%; width: 65%; top: 7%; height: 35%; border-radius: 48%; }
:is(.actor, .friend-portrait).hair-juno .hair-back { left: 10%; width: 80%; top: 1%; height: 47%; border-radius: 48%; }
:is(.actor, .friend-portrait).hair-juno .eye { animation-delay: -2.8s; }
:is(.actor, .friend-portrait).hair-milo .eye { animation-delay: -1.7s; }
:is(.actor, .friend-portrait).hair-rae .eye { animation-delay: -4.3s; }
.shirt-patch { position: absolute; left: 28%; top: 31%; width: 44%; height: 47%; }
.shirt-patch svg { display: block; width: 100%; height: 100%; }
:is(.actor, .friend-portrait) .freckles { position: absolute; top: 61%; left: 20%; width: 2px; height: 2px; border-radius: 50%; background: #98654d; box-shadow: 4px 2px #98654d, 8px 0 #98654d, 30px 0 #98654d, 34px 2px #98654d; opacity: .7; }
:is(.actor, .friend-portrait) .name-tag { min-width: 48px; padding: 2px 8px; font-size: 10px; background: #ffffffed; border: 0; box-shadow: 0 2px 0 #34434b12; }
.stage .actor .mood-chip { display: none; }
:is(.actor, .friend-portrait) .bubble { display: grid; place-items: center; padding: 7px; width: 42px; min-width: 42px; height: 40px; background: #fff; border: 2px solid #493e4026; color: #cb637e; font-size: 12px; box-shadow: 0 4px 0 #34434b18; }
:is(.actor, .friend-portrait) .bubble .toy-icon { width: 25px; height: 25px; }
:is(.actor, .friend-portrait) .bubble:not(:has(svg)) { width: auto; max-width: 90px; white-space: normal; overflow-wrap: anywhere; }
:is(.actor, .friend-portrait) .bubble::after { border-top-color: #fff; }
:is(.actor, .friend-portrait).sleeping .eye, :is(.actor, .friend-portrait).sleepy .eye { animation: none; height: 3px; top: 50%; border-radius: 0 0 50% 50%; background: #634846; }
:is(.actor, .friend-portrait).happy .mouth, :is(.actor, .friend-portrait).excited .mouth { height: 11px; border: 2px solid #71413c; background: #a64f59; border-radius: 3px 3px 50% 50%; }
:is(.actor, .friend-portrait).surprised .mouth { left: 44%; width: 12%; height: 10px; background: #a64f59; border: 2px solid #71413c; border-radius: 50%; }
:is(.actor, .friend-portrait).silly .mouth { height: 10px; background: #ea8a94; border: 2px solid #71413c; border-radius: 0 0 8px 8px; transform: rotate(-12deg); }
:is(.actor, .friend-portrait).dragging .eye { animation: none; transform: scaleY(1.18); }
:is(.actor, .friend-portrait).dragging .avatar { filter: drop-shadow(0 0 2px white) drop-shadow(0 14px 5px #34434b20); }
.friend-portrait .eye { animation: none; }
.journal { background: #f5fbf8; border-color: #fff; }
.journal-head { background: #cdebe0; }
.journal-tab.active { background: #ffdc85; color: #34434b; }

@keyframes friendBlink { 0%, 43%, 47%, 100% { scale: 1 1; } 45% { scale: 1 .08; } }

@media (max-width: 1100px) {
  .play-dock { max-width: calc(100% - 302px); right: 12px; }
  .friend-rail { left: 12px; gap: 5px; }
  .friend-button { width: 61px; flex-basis: 61px; }
  .play-dock .mini-button, #propDrawerToggle { width: 49px; min-width: 49px; flex-basis: 49px; }
  .camera-controls { flex-direction: column; gap: 4px; }
  .camera-button { width: 36px; min-width: 36px; }
  #cameraZoomOut, #cameraZoomIn { display: none; }
}
@media (max-width: 860px), (orientation: portrait) {
  .friend-rail { bottom: calc(96px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
  .play-dock { left: 50%; right: auto; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 20px); transform: translateX(-50%); }
  .prop-drawer { bottom: calc(192px + env(safe-area-inset-bottom)); }
  .stage :is(.actor, .friend-portrait) { width: clamp(104px, 12cqw, 138px); }
  .topbar { grid-template-columns: minmax(50px, 1fr) auto 44px; gap: 7px; left: 12px; right: 12px; }
  .brand h1 { font-size: 15px; max-width: 72px; }
  .scene-button { width: 59px; flex-basis: 59px; height: 65px; padding-top: 40px; }
  .scene-button::before { height: 38px; }
  .controls .icon-button { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .brand-copy { display: none; }
  .brand { padding: 3px; }
  .scene-nav { gap: 4px; }
  .scene-button { width: 53px; flex-basis: 53px; font-size: 10px; }
  .topbar { gap: 6px; left: 8px; right: 8px; }
  .friend-button { height: 71px; grid-template-rows: 46px 15px; width: 58px; flex-basis: 58px; }
  .friend-portrait { height: 48px; }
  .play-dock { gap: 5px; }
  .dock-context-actions, .dock-actions { gap: 5px; }
  .play-dock .mini-button { width: 47px; min-width: 47px; flex-basis: 47px; }
  .prop-filter { padding: 6px 10px; }
  .prop-filter span { display: none; }
  .status-strip { top: 77px; }
  .prop-drawer .prop-panel .tray { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .scene-nav { gap: 3px; }
  .scene-button { width: 46px; flex-basis: 46px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .topbar { top: 8px; }
  .scene-button { height: 52px; padding-top: 29px; }
  .scene-button::before { height: 28px; }
  .friend-rail { bottom: 12px; left: 10px; transform: none; }
  .friend-button { width: 49px; flex-basis: 49px; height: 62px; grid-template-rows: 39px 14px; }
  .friend-portrait { width: 43px; height: 42px; }
  .play-dock { left: auto; right: 10px; max-width: calc(100% - 237px); transform: none; bottom: 8px; }
  .prop-drawer { bottom: 87px; }
  .prop-drawer .prop-panel .tray { max-height: 36svh; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.actor, .friend-portrait) .eye { animation: none; }
  .friend-button, .status-strip { transition: none; }
}
.game-suspended :is(.actor, .friend-portrait) .eye { animation-play-state: paused; }