:root {
  font-family: ui-rounded, "Trebuchet MS", Arial, sans-serif;
  color: #54483e;
  background: #f8efe4;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #f8efe4; touch-action: manipulation; }
button { font: inherit; }
.app { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: #ead4b7; }
.app:fullscreen { width: 100%; height: 100%; }
.game-nav { position: absolute; z-index: 4000; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); display: flex; justify-content: space-between; pointer-events: none; }
.nav-right { display: flex; gap: 6px; pointer-events: none; }
.nav-button, .game-dialog button, .fullscreen-toggle { min-height: 44px; border: 1px solid rgba(99, 70, 46, .35); border-radius: 100px; padding: 6px 12px; background: rgba(255, 250, 241, .91); color: #54483e; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(48, 32, 20, .12); }
.nav-button { pointer-events: auto; display: grid; place-items: center; width: 46px; height: 46px; min-height: 46px; padding: 4px; background: rgba(255, 250, 241, .82); }
.nav-button[aria-pressed="true"] { background: #e8d0ad; }
.ui-icon { position: relative; display: block; flex: none; overflow: hidden; pointer-events: none; }
.ui-icon img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.fullscreen-toggle { display: none; }
.fullscreen-toggle.available { display: inline-flex; align-items: center; }
.nav-button:active, .game-dialog button:active, .fullscreen-toggle:active { transform: translateY(1px); }
.nav-button:focus-visible, .game-dialog button:focus-visible, .fullscreen-toggle:focus-visible, .piece:focus-visible { outline: 3px solid #5393c5; outline-offset: 3px; }
.scene { position: absolute; inset: 0; overflow: hidden; background: #ead4b7; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; --safe-bottom: env(safe-area-inset-bottom, 0px); }
.scene:active { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 1774px; height: 887px; transform-origin: 0 0; }
.room-art { display: block; width: 1774px; height: 887px; max-width: none; pointer-events: none; }
.pieces { position: absolute; inset: 0; }
.piece { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; line-height: 0; transform: translate(-50%, -100%); cursor: grab; touch-action: none; }
.piece::before { content: ""; position: absolute; inset: -11px; min-width: 58px; min-height: 58px; }
.piece.fixed { pointer-events: none; }
/* The pilot bed is fixed during play but reacts to taps. */
.piece-pilotBedLayered.fixed, .piece-doubleBedLayered.fixed, .piece.fixed[data-interactable] { pointer-events: auto; }
.piece.dragging { cursor: grabbing; }
/* Any future game character inherits catalog hiding automatically.
   Keep it off furniture layers to avoid Samsung/Chromium flicker. */
.piece.game-character.catalog-character-hidden {
  visibility: hidden;
  pointer-events: none;
}

.sprite-clip { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.sprite-clip img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* 7E: one lightweight transparent image over each ORIGINAL sleeping head.
   No filters, canvases, per-frame DOM changes or replacement character art. */
.sleep-eyelids-7e { position: absolute; inset: 0; display: block; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.sleep-eyelids-7e[data-actor="momo"] { background-image: url('./art/momo-sleep-eyelids-7f.svg'); }
.sleep-eyelids-7e[data-actor="bobo"] { background-image: url('./art/bobo-sleep-eyelids-7f.svg'); }

.piece-layer { position: absolute; left: 0; bottom: 0; }
.piece[data-item-id="momo"] [data-pose="sit"], .piece[data-item-id="bobo"] [data-pose="sit"] { display: none; }
.piece[data-item-id="momo"].seated [data-pose="stand"], .piece[data-item-id="bobo"].seated [data-pose="stand"] { display: none; }
.piece[data-item-id="momo"].seated [data-pose="sit"], .piece[data-item-id="bobo"].seated [data-pose="sit"] { display: block; }
/* 10D: only ONE compact, baked bitmap per held pose. No per-frame masks,
   full-body SVG compositions or filters on the carried actor. */
.hold-pose-img { display:none; position:absolute; inset:0;
  width:100%; height:100%; object-fit:fill; pointer-events:none; }
.piece.game-character.has-held-prop:not(.seated):not(.lying)
  .sprite-clip[data-pose="stand"],
.piece.game-character.has-held-prop.seated:not(.lying)
  .sprite-clip[data-pose="sit"] { display:none; }
.piece.game-character.has-held-prop:not(.seated):not(.lying)
  .hold-pose-img[data-pose="hold-stand"],
.piece.game-character.has-held-prop.seated:not(.lying)
  .hold-pose-img[data-pose="hold-sit"] { display:block; }
/* A small shared fingertip is above each held prop's painted handle.
   Its color varies by CHARACTER, never by object type. */
.held-item-fingers { display: none; position: absolute; z-index: 3;
  width: 15px; height: 13px; transform: translate(-50%, -50%);
  background: #efbb9c; border: 2px solid #865a43;
  border-radius: 8px 8px 9px 9px; pointer-events: none; }
.piece.has-grip .held-item-fingers { display: block; }
.piece[data-grip-actor="bobo"] .held-item-fingers { background: #e7b38e; }
/* 8D: sofa and chair use the identical approved seated sprite. */
/* Bed poses are independent of approved standing/seated art. */
.piece.game-character [data-pose="lie"] { display: none; }
.piece.game-character.lying [data-pose="stand"],
.piece.game-character.lying [data-pose="sit"] { display: none; }
.piece.game-character.lying [data-pose="lie"] { display: block; }
.bed-blanket-layer {
  position: absolute; display: block; transform: translate(-50%, -100%);
  pointer-events: none;
}
.bed-blanket-layer[hidden] { display: none; }
.bed-blanket-layer > .sprite-clip { position: absolute; inset: 0; }
.bed-blanket-layer > .sprite-clip[hidden] { display: none; }

.piece-front { position: absolute; display: block; transform: translate(-50%, -100%); pointer-events: none; }
/* Experimental pressure shading: owned by each sofa slot, never drawn over the
   characters. Separate transparent vector rather than a solid front sofa band. */
.seat-cushion-dent {
  position: absolute;
  display: block;
  width: 204px;
  height: 88px;
  bottom: 55px;
  transform: translateX(-50%);
  background: center / 100% 100% no-repeat url('./art/seat-cushion-dent-6c.svg');
  pointer-events: none;
}
.seat-cushion-dent[data-seat-id="seat-left"] { left: calc(50% - 90px); }
.seat-cushion-dent[data-seat-id="seat-right"] { left: calc(50% + 90px); }
.seat-cushion-dent[hidden] { display: none; }
.piece-front.dragging .sprite-clip { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #fff); }
.piece-front.dragging.invalid-drop .sprite-clip { filter: drop-shadow(0 0 3px #e23838) drop-shadow(0 0 9px #e23838); }
.catalog-preview { position: relative; display: block; flex: none; }
.catalog-preview > .sprite-clip { position: absolute; inset: 0; }
.piece.dragging .sprite-clip { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 10px 8px rgba(75, 51, 34, .30)); }
.piece.dragging.invalid-drop .sprite-clip { filter: drop-shadow(0 0 3px #e23838) drop-shadow(0 0 9px #e23838) drop-shadow(0 10px 8px rgba(75, 51, 34, .30)); }
/* Every interactive piece now uses the EXACT approved sofa glow,
   including the raster-cached pilot bed. No rectangular green outline. */
.piece.interaction-seat-target > .sprite-clip,
.piece-front.interaction-seat-target > .sprite-clip {
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #4fe18b)
    drop-shadow(0 0 13px rgba(34, 165, 94, .85));
}
/* A bed consists of several large transparent layers. Keep editor dragging
   inexpensive rather than stacking multiple GPU drop-shadow filters. */
.piece-pilotBedLayered.dragging .sprite-clip,
.piece-doubleBedLayered.dragging .sprite-clip,
.piece-front[data-owner-type="pilotBedLayered"].dragging .sprite-clip,
.piece-front[data-owner-type="doubleBedLayered"].dragging .sprite-clip {
  filter: none;
}
.mini-perf-meter {
  position: fixed; top: 66px; left: 10px; z-index: 10020;
  padding: 4px 7px; border-radius: 6px; background: rgba(25,38,27,.86);
  color: #c7ffd9; font: 600 13px ui-monospace, monospace; pointer-events: none;
}
/* Choose either half of the sofa while dragging a character. Each marker
   represents a real, available interaction site rather than a fake button. */
.seat-choice-marker { position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(40,176,101,.36), 0 0 12px #43d18b;
  background: rgba(60,191,111,.78); transform: translate(-50%,-50%);
  pointer-events: none; z-index: 40000; }
.seat-choice-marker.unavailable { background: rgba(137,135,131,.55);
  box-shadow: none; opacity: .48; }
/* 10A: hand target is a single re-used marker; no extra render loop. */
.hand-drop-marker { position:absolute; transform:translate(-50%,-50%);
  width:35px; height:35px; border-radius:50%; z-index:45000;
  border:3px solid #fff9d9; background:rgba(89,203,150,.28);
  box-shadow:0 0 0 5px rgba(57,195,131,.30),0 0 14px rgba(65,214,136,.8);
  pointer-events:none; }
.hand-drop-marker[hidden] { display:none; }
.piece.held-catalog-hidden { visibility:hidden; pointer-events:none; }
.piece.react:not([data-lamp-visual]) .sprite-clip { animation: hop .5s ease-out; }
/* A character carrying a prop may not hop only its body while its arm and
   object remain stationary. Ordinary character/object feedback is unchanged. */
.piece.game-character.has-held-prop.react .sprite-clip { animation: none; }
/* A lamp animates as one unit: original art, illuminated shade and aura. */
.piece.react[data-lamp-visual] .lamp-visual { animation: hop .5s ease-out; }
/* Localized warm light: obvious even in a sunny room. One static shade
   overlay and one existing gradient per ON lamp. No animation/filter loop. */
.lamp-visual { position: relative; display: block; width: 100%; height: 100%;
  pointer-events: none; }
.lamp-visual > .sprite-clip { position: relative; z-index: 1; }
.lamp-lit-shade { display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 2; pointer-events: none;
  background: center / 100% 100% no-repeat url('./art/lamp-lit-shade-9b.svg'); }
.piece.lamp-lit .lamp-lit-shade { display: block; }
.lamp-visual > .lamp-glow { position: absolute; left: 50%;
  top: calc(100% - 120px); width: 190px; height: 165px;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255,237,154,.62) 0%, rgba(255,216,111,.35) 35%,
    rgba(255,205,103,.12) 57%, transparent 78%);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity .16s; }
.lamp-visual > .lamp-glow.is-on { opacity: 1; }
.lamp-glow[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.game-dialog { width: min(330px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; border: 2px solid #be8f69; border-radius: 22px; background: #fff7e9; color: #54483e; box-shadow: 0 12px 35px rgba(48, 32, 20, .24); text-align: center; }
.game-dialog::backdrop { background: rgba(43, 30, 22, .48); }
.game-dialog h2 { margin: 0 0 12px; font-size: 21px; }
.game-dialog p { margin: 0 0 16px; }
.game-dialog form { margin: 0; }
.game-dialog > button, .game-dialog > form > button { width: 100%; margin-top: 8px; }
.dialog-actions { display: flex; justify-content: center; gap: 8px; }
.dialog-actions > button, .dialog-actions > form { flex: 1; }
.dialog-actions button { width: 100%; }
.editor-panel { position: absolute; z-index: 4100; top: calc(58px + env(safe-area-inset-top)); right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; width: clamp(108px, 18vw, 166px); padding: 6px calc(5px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) 5px; background: rgba(255, 247, 233, .96); border-left: 2px solid #be8f69; border-top: 2px solid #be8f69; border-radius: 17px 0 0 0; box-shadow: -5px 0 18px rgba(48, 32, 20, .16); touch-action: pan-y; animation: editor-slide .2s ease-out; }
.editor-panel[hidden] { display: none; }
.editor-toolbar { display: flex; flex: none; justify-content: space-between; gap: 3px; }
.catalog-categories { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.catalog-categories button, .editor-toolbar > button { display: grid; place-items: center; flex: none; min-height: 38px; border: 1px solid #cba988; border-radius: 12px; padding: 3px; background: #fffaf1; color: #54483e; font-size: 11px; font-weight: 800; cursor: pointer; }
.catalog-categories button { min-width: 0; }
.editor-toolbar > button { flex: 1; }
.catalog-categories button[aria-selected="true"] { background: #e8d0ad; border-color: #a87d55; }
.editor-toolbar > button:disabled { opacity: .45; cursor: default; }
.catalog-items { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.catalog-item { display: flex; flex: none; align-items: center; justify-content: center; width: 100%; min-height: 72px; padding: 3px; border: 1px solid #d8b997; border-radius: 14px; background: #fffaf1; cursor: grab; touch-action: pan-y; }
.catalog-item:active { cursor: grabbing; }
.catalog-item:disabled { opacity: .62; cursor: default; }
.catalog-empty { margin: 4px; font-size: 11px; font-weight: 700; text-align: center; }
.editor-trash { position: absolute; z-index: 4200; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 68px; height: 68px; border: 3px dashed #ae7f65; border-radius: 18px; background: rgba(255, 247, 233, .94); color: #704537; pointer-events: none; transform: translateX(-50%); box-shadow: 0 2px 9px rgba(48, 32, 20, .18); }
.editor-trash[hidden] { display: none; }
.editor-trash svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.editor-trash.active { background: #f4b9ab; border-color: #b84839; color: #9b3428; box-shadow: 0 0 0 6px rgba(184, 72, 57, .2); }
.catalog-ghost { position: fixed; z-index: 5000; pointer-events: none; transform: translate(-50%, -100%); filter: drop-shadow(0 10px 8px rgba(75, 51, 34, .3)); }
.catalog-ghost.valid-drop { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #fff) drop-shadow(0 10px 8px rgba(75, 51, 34, .3)); }
.catalog-ghost.invalid-drop { filter: drop-shadow(0 0 4px #e23838) drop-shadow(0 0 9px #e23838) drop-shadow(0 10px 8px rgba(75, 51, 34, .3)); }
@keyframes editor-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.orientation-gate { display: none; position: fixed; inset: 0; z-index: 10000; background: #f8efe4; padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); text-align: center; touch-action: manipulation; }
.update-notice { position: fixed; z-index: 10010; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 28px); padding: 10px 12px; border: 2px solid #be8f69; border-radius: 16px; background: #fff7e9; box-shadow: 0 5px 18px rgba(89, 62, 42, .2); font-size: 13px; font-weight: 700; }
.update-notice[hidden] { display: none; }
.update-notice button { min-height: 44px; border: 2px solid #be8f69; border-radius: 100px; padding: 5px 13px; background: #f8efe4; color: inherit; font-weight: 800; cursor: pointer; }
.orientation-gate strong { font-size: clamp(20px, 6vw, 30px); }
.orientation-gate p { margin: 0; font-size: 15px; }
.phone-art { width: 116px; height: 196px; margin: 0 auto 6px; padding: 8px; border: 6px solid #a37558; border-radius: 25px; background: #f5ddbe; box-shadow: 0 9px 20px rgba(89, 62, 42, .2); transform: rotate(-22deg); }
.phone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 13px; }
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 34% center; }
@keyframes hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-9px); } }
@media (orientation: portrait) and (max-width: 900px) {
  .orientation-gate { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
}
@media (max-height: 450px) {
  .game-dialog { padding: 12px 18px; }
  .game-dialog h2 { margin-bottom: 5px; }
  .game-dialog p { margin-bottom: 8px; }
}
@media (max-width: 620px) {
  .nav-button { width: 44px; height: 44px; min-height: 44px; }
  .update-notice { width: calc(100% - 28px); justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}