:root {
  color-scheme: light;
  --ink: #29463e;
  --muted: #687c74;
  --cream: #fffaf1;
  --paper: rgba(255, 252, 246, .94);
  --peach: #f1846d;
  --peach-dark: #d95f4d;
  --sage: #628b78;
  --line: rgba(57, 86, 74, .15);
  --shadow: 0 20px 60px rgba(74, 58, 38, .18);
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: #eee3d2;
  color: var(--ink);
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(241, 132, 109, .5);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: white;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.app {
  width: min(1180px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: 14px clamp(12px, 3vw, 30px) calc(18px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.identity, .icon-button, .action-dock button, .furniture, .pet-zone, .close-panel, .dialog-close {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.identity {
  justify-self: start;
  min-height: 48px;
  padding: 5px 10px 5px 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  text-align: left;
  backdrop-filter: blur(12px);
}
.identity-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #f6a28b;
  color: white;
  font: 700 22px Georgia, serif;
}
.identity strong, .identity small { display: block; }
.identity strong { font-size: 14px; }
.identity small { max-width: 160px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { font: 700 clamp(17px, 2vw, 22px) Georgia, serif; letter-spacing: -.02em; }
.brand span { color: var(--peach-dark); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icon-button {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 5px 18px rgba(80, 61, 38, .08);
  font-weight: 800;
}
.sync-state { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.sync-state i { width: 8px; height: 8px; border-radius: 50%; background: #9aa49f; }
.sync-state[data-mode="ready"] i { background: #5ca47f; }
.sync-state[data-mode="saving"] i { background: #e3a64c; animation: pulse 1s infinite; }
.sync-state[data-mode="error"] i { background: #d76659; }

.room {
  position: relative;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: clamp(24px, 4vw, 42px);
  background: #dec8a7 url("/assets/room-v2.webp") center / cover no-repeat;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,248,230,.02), rgba(84,55,25,.05));
}
.room[data-glow="sage"]::before { background: rgba(116, 157, 132, .12); mix-blend-mode: multiply; }
.room[data-glow="sky"]::before { background: rgba(110, 161, 193, .11); mix-blend-mode: multiply; }
.room-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 36% 72%, rgba(255,250,212,.32), transparent 32%); }
.room-dust { position: absolute; inset: 0; pointer-events: none; }
.room-dust i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,244,192,.8); animation: float 8s ease-in-out infinite; }
.room-dust i:nth-child(1) { left: 31%; top: 35%; }
.room-dust i:nth-child(2) { left: 56%; top: 25%; animation-delay: -2s; }
.room-dust i:nth-child(3) { left: 72%; top: 49%; animation-delay: -4s; }
.room-dust i:nth-child(4) { left: 45%; top: 63%; animation-delay: -6s; }

.furniture {
  position: absolute;
  z-index: 4;
  min-width: 76px;
  min-height: 76px;
  padding: 0;
  background: transparent;
}
.furniture::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  border-radius: 28px;
  transition: border-color .18s, background .18s, transform .18s;
}
.furniture:hover::after, .furniture:focus-visible::after { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.12); transform: scale(1.03); }
.object-label {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translate(-50%, 100%);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,252,245,.86);
  box-shadow: 0 5px 16px rgba(70,50,30,.13);
  opacity: .78;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.plant { left:2%; bottom:14%; width:128px; height:196px; }
.chair { right:2%; bottom:14%; width:178px; height:214px; }
.furniture-art {
  position:absolute;
  inset:0;
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 13px 12px rgba(72,45,27,.2));
  transform-origin:50% 100%;
  transition:transform .22s ease,opacity .22s ease;
}
.room[data-furniture-mode="overlay"] { background-position:left center; }
.room[data-furniture-mode="overlay"] .furniture-art { display:block; }
.room[data-furniture-mode="overlay"] .plant { left:clamp(0px,2vw,22px); right:auto; bottom:13%; width:clamp(104px,14vw,142px); height:clamp(158px,22vw,210px); }
.room[data-furniture-mode="overlay"] .chair { left:auto; right:clamp(-12px,1vw,16px); bottom:13%; width:clamp(138px,19vw,188px); height:clamp(168px,23vw,228px); }
.room[data-furniture-mode="overlay"] .plant[data-stage="1"] .furniture-art { opacity:.86; transform:scale(.82); }
.room[data-furniture-mode="overlay"] .plant[data-stage="2"] .furniture-art { transform:scale(.92); }
.room[data-furniture-mode="overlay"] .furniture:hover .furniture-art { transform:translateY(-4px) scale(1.015); }
.room[data-furniture-mode="overlay"] .plant[data-stage="1"]:hover .furniture-art { transform:translateY(-4px) scale(.84); }
.room[data-furniture-mode="overlay"] .plant[data-stage="2"]:hover .furniture-art { transform:translateY(-4px) scale(.94); }
.room[data-furniture-mode="overlay"] .plant[data-stage="3"]::before {
  content:"✿";
  position:absolute;
  z-index:1;
  top:9%;
  left:53%;
  color:#f38b76;
  font-size:25px;
  text-shadow:0 2px 3px rgba(95,58,39,.22);
  pointer-events:none;
}
.room[data-furniture-mode="overlay"] .plant[data-stage="3"][data-flower="tulip"]::before { content:"♥"; color:#d97182; }
.room[data-furniture-ready="true"] .furniture { transition:opacity .2s ease; }
.ball { left: 50%; bottom: 5%; width: 90px; height: 90px; transform: translateX(-50%); }
.ball > span:first-child {
  position: absolute;
  width: 62px;
  height: 62px;
  left: 14px;
  top: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 25%, #fff4d2 0 8%, #f58d73 9% 49%, #d85f51 50% 57%, #f6b566 58% 100%);
  box-shadow: inset -8px -10px 16px rgba(119,53,38,.18), 0 13px 14px rgba(87,52,31,.18);
  transition: transform .25s;
}
.ball:hover > span:first-child { transform: translateY(-7px) rotate(10deg); }
.ball.is-passing > span:first-child { animation: ball-pass .7s ease-in-out; }

.plant-art { display:none; position:absolute; inset:0; transform-origin:50% 100%; transition:transform .4s; }
.plant-art i { position: absolute; display: block; }
.plant-art .pot { left: 29px; bottom: 0; width: 58px; height: 52px; border-radius: 8px 8px 25px 25px; background: linear-gradient(90deg,#a85e3f,#cf7b53 55%,#9d5338); box-shadow: 0 10px 15px rgba(70,40,28,.2); }
.plant-art .pot::before { content:""; position:absolute; left:-5px; top:-7px; width:68px; height:15px; border-radius:8px; background:#d4885e; }
.plant-art .stem { left: 55px; bottom: 47px; width: 7px; height: 58px; border-radius: 9px; background: #61895f; transform-origin: bottom; }
.plant-art .leaf { bottom: 72px; width: 35px; height: 19px; border-radius: 100% 0 100% 0; background: #729c6d; opacity: 0; transition: opacity .4s, transform .4s; }
.plant-art .leaf-one { left: 28px; transform: rotate(17deg) scale(.6); }
.plant-art .leaf-two { left: 58px; bottom: 88px; transform: rotate(118deg) scale(.6); }
.plant-art .bud { left: 45px; bottom: 98px; width: 28px; height: 33px; border-radius: 50% 50% 42% 42%; background: #f39a87; opacity: 0; transform: scale(.3); transition: opacity .4s, transform .4s; }
.plant-art .bloom { left: 34px; bottom: 96px; width: 50px; height: 50px; opacity: 0; transform: scale(.3); transition: opacity .45s, transform .45s; }
.plant-art .bloom::before { content:"✿"; color:#f38b76; font-size:52px; line-height:1; text-shadow:0 4px 8px rgba(90,50,35,.13); }
.plant-art[data-flower="tulip"] .bloom::before { content:"♥"; color:#db6d82; }
.plant-art[data-stage="2"] .leaf, .plant-art[data-stage="3"] .leaf { opacity: 1; transform: rotate(17deg) scale(1); }
.plant-art[data-stage="1"] .leaf-one { opacity:1; transform:rotate(17deg) scale(.82); }
.plant-art[data-stage="2"] .leaf-two, .plant-art[data-stage="3"] .leaf-two { transform: rotate(118deg) scale(1); }
.plant-art[data-stage="2"] .bud { opacity: 1; transform: scale(1); }
.plant-art[data-stage="3"] .bloom { opacity: 1; transform: scale(1); }
.plant-art[data-stage="3"] .bud { opacity: 0; }
.plant:hover .plant-art { transform: translateY(-3px) rotate(-1deg); }

.amigo-stage {
  position: absolute;
  z-index: 6;
  pointer-events:none;
  left: 50%;
  bottom: 10%;
  width: clamp(250px, 32vw, 380px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: left .55s ease, bottom .55s ease, transform .55s ease;
}
.amigo-stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(86,50,25,.18)); user-select: none; pointer-events: none; }
.amigo-stage[data-action="listen"] { animation: lean .9s ease-in-out infinite alternate; }
.amigo-stage[data-action="celebrate"], .amigo-stage[data-action="train"] { animation: happy-bounce .6s ease-in-out 3; }
.amigo-stage[data-action="rest"] { transform: translateX(-50%) translateY(5px) rotate(-1deg); }
.amigo-stage.chair-mode { left: 78%; bottom: 17%; transform: translateX(-50%) scale(.78); }
.amigo-stage.chair-mode.rocking { animation: rocking 1.4s ease-in-out infinite alternate; }
.outfit, .care-effect { position: absolute; inset: 0; pointer-events: none; }
.outfit::before, .outfit::after, .outfit i { content:""; position:absolute; display:none; }
.outfit[data-item="scarf"]::before { display:block; left:38.5%; top:48.5%; width:24%; height:7%; border-radius:48% 48% 40% 40%; background:#e96758; box-shadow:0 3px 0 #bd493e; transform:rotate(-2deg); }
.outfit[data-item="scarf"]::after { display:block; left:54.5%; top:52%; width:6%; height:15%; border-radius:5px 5px 8px 8px; background:#e96758; clip-path:polygon(0 0,100% 4%,84% 100%,12% 96%); transform:rotate(-7deg); }
.outfit[data-item="glasses"]::before,
.outfit[data-item="glasses"]::after {
  display:block;
  top:32.5%;
  width:14%;
  height:9%;
  box-sizing:border-box;
  border:clamp(3px, .9vw, 4px) solid #344846;
  border-radius:9px;
  background:rgba(255,255,255,.05);
}
.outfit[data-item="glasses"]::before { left:35.5%; }
.outfit[data-item="glasses"]::after { left:52%; }
.outfit[data-item="glasses"] i { display:block; left:49%; top:36.2%; width:4.5%; height:clamp(3px, .8vw, 4px); border-radius:999px; background:#344846; }
.outfit[data-item="artist"],
.outfit[data-item="gardener"],
.outfit[data-item="cook"],
.outfit[data-item="explorer"],
.outfit[data-item="musician"],
.outfit[data-item="stargazer"],
.outfit[data-item="storyteller"],
.outfit[data-item="maker"] { background-position:center; background-repeat:no-repeat; background-size:contain; }
.outfit[data-item="artist"] { background-image:url("/assets/outfit-artist-v1.svg"); }
.outfit[data-item="gardener"] { background-image:url("/assets/outfit-gardener-v1.svg"); }
.outfit[data-item="cook"] { background-image:url("/assets/outfit-cook-v1.svg"); }
.outfit[data-item="explorer"] { background-image:url("/assets/outfit-explorer-v1.svg"); }
.outfit[data-item="musician"] { background-image:url("/assets/outfit-musician-v1.svg"); }
.outfit[data-item="stargazer"] { background-image:url("/assets/outfit-stargazer-v1.svg"); }
.outfit[data-item="storyteller"] { background-image:url("/assets/outfit-storyteller-v1.svg"); }
.outfit[data-item="maker"] { background-image:url("/assets/outfit-maker-v1.svg"); }
.care-effect[data-effect="bubbles"] { background: radial-gradient(circle at 34% 48%,rgba(255,255,255,.9) 0 6px,transparent 7px),radial-gradient(circle at 64% 56%,rgba(221,247,255,.9) 0 9px,transparent 10px),radial-gradient(circle at 47% 69%,rgba(255,255,255,.85) 0 11px,transparent 12px); animation: float 1.8s ease-in-out infinite alternate; }
.care-effect[data-effect="wet"]::before { content:"◌  ◦  ◌"; position:absolute; left:31%; top:20%; color:#8dd0db; font-size:26px; }
.care-effect[data-snack] { display:grid; place-items:center; padding:0 0 20% 13%; filter:drop-shadow(0 5px 5px rgba(80,45,28,.2)); animation:snack-to-mouth .7s ease-out both; }
.care-effect[data-effect="shower"]::before { content:""; position:absolute; z-index:2; width:13%; height:34%; border-radius:999px; background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(124,205,224,.92) 10% 17%,transparent 18% 28%); transform:rotate(12deg); filter:drop-shadow(0 4px 2px rgba(48,132,155,.18)); animation:water-stream .38s linear infinite; }
.care-effect[data-effect="shower"]::after { content:""; position:absolute; width:27%; height:17%; border-radius:50%; background:radial-gradient(ellipse,rgba(141,216,230,.65),rgba(141,216,230,.2) 58%,transparent 62%); animation:wet-spot .5s ease-out both; }
.care-effect[data-effect="shower"][data-zone="head"]::before { left:43%; top:-2%; }
.care-effect[data-effect="shower"][data-zone="head"]::after { left:36%; top:28%; }
.care-effect[data-effect="shower"][data-zone="body"]::before { left:49%; top:23%; }
.care-effect[data-effect="shower"][data-zone="body"]::after { left:39%; top:53%; }
.care-effect[data-effect="shower"][data-zone="arms"]::before { left:68%; top:26%; }
.care-effect[data-effect="shower"][data-zone="arms"]::after { left:58%; top:57%; }
.pet-zone { position: absolute; z-index: 9; background: transparent; border-radius: 50%; pointer-events:auto; }
.pet-head { left: 27%; top: 17%; width: 47%; height: 42%; }
.pet-hand { right: 7%; top: 50%; width: 28%; height: 31%; }

.system-status {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(37,63,55,.82);
  color: white;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(20,40,33,.18);
}

.activity-panel {
  --panel-pad: 18px;
  position: absolute;
  z-index: 15;
  left: 16px;
  bottom: 16px;
  width: min(405px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: var(--panel-pad);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 18px 45px rgba(67,51,34,.22);
  backdrop-filter: blur(18px);
  animation: panel-in .24s ease-out;
}
.room[data-panel="tarot"] .activity-panel { width:min(530px,calc(100% - 32px)); }
.room[data-panel="tarot"] .amigo-stage { left:68%; }
.room[data-panel="game"] .activity-panel { left:50%; bottom:12px; width:min(660px,calc(100% - 24px)); max-height:calc(100% - 24px); transform:translateX(-50%); }
.room[data-panel="game"] .amigo-stage,
.room[data-panel="game"] .furniture { opacity:0; pointer-events:none; }
.activity-panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:calc(var(--panel-pad) * -1) 0 14px; padding:var(--panel-pad) 0 10px; position:sticky; z-index:4; top:calc(var(--panel-pad) * -1); background:linear-gradient(180deg,#fffaf3 0%,#fffaf3 82%,rgba(255,250,243,0) 100%); }
.room[data-panel="game"] .activity-panel header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:start; }
.room[data-panel="game"] .activity-panel header > div { grid-column:2; text-align:center; }
.room[data-panel="game"] .activity-panel header .close-panel { grid-column:1; grid-row:1; }
.activity-panel header p, .eyebrow { margin:0 0 5px; color:var(--peach-dark); font-size:10px; font-weight:900; letter-spacing:.14em; }
.activity-panel h2, dialog h1, dialog h2 { margin:0; font:700 clamp(25px,3vw,34px)/1.05 Georgia,serif; letter-spacing:-.025em; }
.close-panel, .dialog-close { width:44px; height:44px; flex:0 0 44px; border-radius:14px; background:#f1e9dc; font-size:24px; }
.panel-body p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.panel-choice, .secondary, .primary, .danger, .hold-button, .rhythm-pad, .region-button, .snack-card, .tag-button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.83);
  cursor: pointer;
  font-weight: 800;
}
.panel-choice { min-height: 76px; padding:12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; text-align:left; }
.panel-choice span { font-size:22px; }
.panel-choice small { color:var(--muted); font-weight:600; }
.tarot-entry { grid-column:1/-1; min-height:68px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; background:linear-gradient(120deg,#fff4ec,#f2eee3); }
.tarot-entry > span:first-child { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#31564b; color:#ffe3a2; }
.tarot-entry > span:nth-child(2) { min-width:0; font-size:inherit; }
.tarot-entry b, .tarot-entry small { display:block; }
.tarot-entry > i { color:var(--sage); font-style:normal; font-size:20px; }
.primary { border-color: transparent; background: var(--peach); color:white; padding:12px 18px; box-shadow:0 8px 22px rgba(221,96,78,.23); }
.primary:hover { background:var(--peach-dark); }
.secondary { padding:11px 15px; background:#fff; }
.danger { padding:11px 15px; background:#fff; color:#b3473d; }
.primary:disabled, .secondary:disabled { cursor:default; opacity:.58; box-shadow:none; }
.wide { width:100%; }
.panel-actions, .dialog-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.progress-track { height:9px; overflow:hidden; border-radius:999px; background:#eadfce; }
.progress-track i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#6f9b77,#9ac586); transition:width .08s linear; }
.flower-picker, .outfit-picker, .tag-picker { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.flower-picker button, .outfit-picker button { min-height:48px; padding:10px 13px; border:1px solid var(--line); border-radius:14px; background:white; cursor:pointer; font-weight:800; }
.flower-picker button.active, .outfit-picker button.active, .tag-button.active { border-color:var(--peach); background:#fff0e9; }
.hold-button { position:relative; width:100%; overflow:hidden; border:0; background:#6e9a7e; color:white; }
.hold-button::before { content:""; position:absolute; inset:0; width:var(--hold,0%); background:#47765f; }
.hold-button span { position:relative; z-index:1; }
.hold-button.is-holding { transform:scale(.985); }

.ball-play { display:grid; place-items:center; min-height:105px; }
.ball-play button { width:80px; height:80px; border:0; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff6da 0 8%,#f58d73 9% 48%,#d85f51 49% 57%,#f6b566 58%); box-shadow:0 13px 19px rgba(100,55,35,.2); cursor:pointer; animation:ball-idle 1.7s ease-in-out infinite; }
.ball-play button.returning { animation:ball-return .65s ease-in-out; }
.quiet-note { display:block; margin-top:10px; color:var(--muted); font-size:12px; text-align:center; }

.speak-control { display:grid; place-items:center; gap:12px; }
.hold-speak { width:112px; height:112px; border:0; border-radius:50%; background:linear-gradient(145deg,#f49a82,#e66c58); color:white; cursor:pointer; box-shadow:0 16px 35px rgba(205,88,68,.28),inset 0 1px rgba(255,255,255,.4); font-weight:900; }
.hold-speak span { display:block; font-size:30px; margin-bottom:3px; }
.hold-speak.is-listening { animation:listen-ring 1.1s infinite; }
.hold-speak:disabled { cursor:wait; opacity:.9; }
.ai-mode-button { min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); cursor:pointer; font-size:12px; font-weight:800; }
.ai-mode-button:hover { border-color:#78a087; background:#f4faf5; }
.ai-mode-button:disabled { cursor:wait; opacity:.65; }
.ai-connection { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:11px; font-weight:800; }
.ai-connection i { width:7px; height:7px; border-radius:50%; background:#a9aaa6; }
.ai-connection[data-state="live"] { color:#3f7258; }
.ai-connection[data-state="live"] i { background:#5ca47f; box-shadow:0 0 0 4px rgba(92,164,127,.13); }
.ai-connection[data-state="checking"] i { background:#e3a64c; animation:pulse 1s infinite; }
.ai-connection[data-state="fallback"] { color:#a45548; }
.ai-connection[data-state="fallback"] i { background:#d76659; }
.speak-text-form { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.speak-text-form input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); padding:9px 11px; }
.speak-text-form .secondary { min-width:72px; }
.language-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.language-row select, .field input, .playlist-input { min-height:46px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); padding:9px 11px; }
.fallback-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }

.bath-regions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0; }
.region-button { min-height:72px; display:grid; place-items:center; gap:2px; }
.region-button span { font-size:20px; }
.region-button.done { border-color:#7ba78b; background:#edf8ef; color:#416b54; }
.bath-step { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.bath-step i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#e9ded0; font-style:normal; font-size:12px; }
.bath-step i.active { background:#6e9a7e; color:white; }

.snack-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.snack-card { min-height:94px; font-size:30px; }
.snack-card small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.snack-card.is-dragging { opacity:.65; transform:scale(.95); }

.rhythm-board { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.rhythm-pad { min-height:74px; font-size:20px; color:white; border:0; opacity:.65; transition:transform .08s,opacity .08s,filter .08s; }
.rhythm-pad:nth-child(1) { background:#ea806e; }
.rhythm-pad:nth-child(2) { background:#efad62; }
.rhythm-pad:nth-child(3) { background:#79a989; }
.rhythm-pad:nth-child(4) { background:#7296b0; }
.rhythm-pad[data-owner="amigo"] { cursor:default; }
.rhythm-pad.active { opacity:1; filter:brightness(1.12); transform:translateY(-5px); box-shadow:0 9px 18px rgba(44,55,49,.17); }
.rhythm-meta { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.result-face { display:grid; place-items:center; min-height:90px; font-size:58px; }

.peek-intro { height:150px; position:relative; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(62,85,74,.1); border-radius:20px; background:linear-gradient(150deg,#f3ecdf,#e6efe4); }
.peek-intro > span { color:rgba(67,93,81,.2); font-size:132px; line-height:1; }
.peek-intro img { position:absolute; bottom:-25px; width:150px; height:150px; object-fit:contain; animation:peek-intro 2.6s ease-in-out infinite; }
.peek-meta { min-height:40px; margin-bottom:8px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.peek-meta strong { color:var(--ink); }
.peek-pause { min-width:72px; min-height:40px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:850; }
.peek-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; max-width:min(100%,clamp(240px,calc((100svh - 430px) * 1.03),620px)); margin-inline:auto; }
.peek-window { position:relative; min-width:0; aspect-ratio:1.03; overflow:hidden; padding:0; border:7px solid #9b6a44; border-radius:12px; background:#5c7e6f; box-shadow:inset 0 0 0 3px #d5ab72,0 5px 10px rgba(76,48,28,.15); cursor:pointer; perspective:420px; touch-action:manipulation; }
.peek-window::after { content:""; position:absolute; z-index:5; inset:0; border:2px solid rgba(255,232,188,.5); border-radius:4px; pointer-events:none; }
.window-room { position:absolute; inset:0; display:grid; place-items:end center; overflow:hidden; background:radial-gradient(circle at 50% 35%,#fff5d9,#d8e5d2 72%); }
.window-room img { width:108%; height:108%; margin-bottom:-25%; object-fit:contain; opacity:0; transform:translateY(34%) scale(.72); transition:opacity .12s,transform .2s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.window-door { position:absolute; z-index:3; top:0; bottom:0; width:50%; background:linear-gradient(90deg,#98633e,#c08a57 48%,#885737); border:2px solid rgba(87,53,31,.42); transition:transform .2s cubic-bezier(.2,.8,.2,1); backface-visibility:hidden; }
.window-door::after { content:""; position:absolute; top:48%; width:5px; height:5px; border-radius:50%; background:#f2c884; box-shadow:0 1px 2px rgba(60,36,20,.35); }
.door-left { left:0; transform-origin:left center; }
.door-left::after { right:7px; }
.door-right { right:0; transform-origin:right center; }
.door-right::after { left:7px; }
.peek-window.is-opening .door-left,
.peek-window.is-peeking .door-left,
.peek-window.is-miss .door-left,
.peek-window.is-hit .door-left { transform:rotateY(-98deg); }
.peek-window.is-opening .door-right,
.peek-window.is-peeking .door-right,
.peek-window.is-miss .door-right,
.peek-window.is-hit .door-right { transform:rotateY(98deg); }
.peek-window.is-opening .window-room img { opacity:.72; transform:translateY(12%) scale(.9); }
.peek-window.is-peeking .window-room img { opacity:1; transform:translateY(0) scale(1); }
.peek-window.is-miss .window-room img { opacity:1; transform:translateY(3%) scale(.98); animation:peek-blink .14s ease-in-out both; }
.peek-window.is-hit .window-room img { opacity:1; transform:translateY(13%) scale(.86) rotate(-2deg); }
.peek-window:focus-visible { outline-offset:3px; }
.peek-progress { height:6px; margin-top:9px; overflow:hidden; border-radius:999px; background:#e5d9c8; }
.peek-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef836d,#f0b46b); transition:width .2s; }
.peek-actions { display:grid; grid-template-columns:1fr 1fr; }
.peek-actions button { width:100%; }
.peek-result { min-height:270px; display:grid; place-items:center; align-content:center; text-align:center; overflow:hidden; border-radius:22px; background:radial-gradient(circle at 50% 45%,#fff6db,#e4ede0); }
.peek-result img { width:min(230px,65%); aspect-ratio:1; object-fit:contain; animation:result-amigo .5s ease-out both; }
.peek-result p { max-width:430px; margin:0 18px 14px; font-size:13px; }
.peek-result[data-band="wave"][data-reaction="none"] img { animation:result-wave 1.1s ease-in-out both; }
.peek-result[data-band="peek"][data-reaction="none"] img { animation:result-peek 1.15s ease-in-out both; }
.peek-result[data-band="pout"][data-reaction="none"] img { animation:result-pout 1.15s ease-in-out both; }
.peek-result[data-band="reach"][data-reaction="none"] img { animation:result-reach 1.15s ease-in-out both; }
.peek-result[data-band="reach"] img { filter:drop-shadow(0 12px 13px rgba(83,54,32,.18)); }

.outfit-preview { position:relative; width:130px; height:130px; margin:0 auto 8px; }
.outfit-preview img { width:100%; height:100%; object-fit:contain; }
.outfit-preview .outfit { display:block; }
.outfit-preview .outfit[data-item="scarf"]::before { box-shadow:0 1px 0 #bd493e; }
.outfit-preview .outfit[data-item="glasses"]::before,
.outfit-preview .outfit[data-item="glasses"]::after { border-width:2px; border-radius:4px; }
.outfit-preview .outfit[data-item="glasses"] i { height:2px; }
.outfit-selection { display:flex; align-items:baseline; justify-content:center; gap:7px; margin:-6px 0 12px; text-align:center; }
.outfit-selection b { color:var(--ink); }
.outfit-selection span { color:var(--muted); font-size:12px; }
.outfit-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:4px; border-radius:15px; background:#eee5d8; }
.outfit-tabs button { min-height:44px; padding:8px 11px; border:0; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; font-weight:900; }
.outfit-tabs button.active { background:#fff; color:var(--ink); box-shadow:0 4px 12px rgba(55,43,30,.09); }
.outfit-tabs small { display:inline-grid; place-items:center; min-width:21px; height:21px; margin-left:3px; border-radius:999px; background:rgba(64,83,75,.1); font-size:10px; }
.outfit-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 0; }
.outfit-picker .outfit-choice { display:grid; grid-template-columns:32px minmax(0,1fr) 16px; align-items:center; gap:8px; min-height:58px; padding:8px; text-align:left; }
.outfit-choice > span:nth-child(2) { min-width:0; }
.outfit-choice b, .outfit-choice small { display:block; overflow:hidden; text-overflow:ellipsis; }
.outfit-choice b { color:var(--ink); font-size:12px; white-space:nowrap; }
.outfit-choice small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:650; line-height:1.25; }
.outfit-choice-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#f2e8da; color:#d26352; font-size:17px; }
.outfit-choice > i { visibility:hidden; color:#d26352; font-style:normal; font-size:13px; }
.outfit-choice.active > i { visibility:visible; }
.outfit-actions { margin-top:10px; }
.tarot-shell { position:relative; }
.tarot-guide { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 7px; padding:6px 34px 6px 8px; border:1px solid rgba(49,86,75,.12); border-radius:16px; background:#f3ecdf; }
.tarot-guide > button { position:absolute; top:5px; right:5px; width:30px; height:30px; border:0; border-radius:10px; background:rgba(255,255,255,.75); cursor:pointer; font-size:18px; }
.tarot-guide > span { display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:5px; min-width:0; }
.tarot-guide i { grid-row:1/3; display:grid; place-items:center; color:#d46150; font-style:normal; font-size:17px; white-space:nowrap; }
.tarot-guide b, .tarot-guide small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tarot-guide b { font-size:11px; }
.tarot-guide small { color:var(--muted); font-size:9px; font-weight:700; }
.tarot-table { position:relative; min-height:158px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(52,83,72,.12); border-radius:20px; background:radial-gradient(circle at 50% 30%,rgba(255,247,221,.94),rgba(221,230,211,.76)),linear-gradient(135deg,#edf2e8,#eadfce); perspective:900px; }
.tarot-deck { position:relative; width:100%; height:152px; }
.tarot-card-back { position:absolute; left:50%; top:50%; width:88px; aspect-ratio:2/3; display:grid; place-items:center; border:3px solid #fff5df; border-radius:12px; background:radial-gradient(circle at center,#547768 0 11%,transparent 12%),repeating-linear-gradient(45deg,rgba(255,230,166,.12) 0 3px,transparent 3px 9px),#31564b; box-shadow:0 11px 22px rgba(39,62,52,.19); transition:transform .48s cubic-bezier(.2,.8,.2,1); }
.tarot-card-back::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,236,190,.58); border-radius:8px; }
.tarot-card-back span { position:relative; z-index:1; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,236,190,.75); border-radius:50%; color:#ffe5a8; font:700 15px Georgia,serif; }
.tarot-shell[data-phase="gathered"] .tarot-card-back { transform:translate(-50%,-50%); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(2) { transform:translate(calc(-50% + 1px),calc(-50% - 1px)) rotate(.4deg); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(3) { transform:translate(calc(-50% + 2px),calc(-50% - 2px)) rotate(-.5deg); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(4) { transform:translate(calc(-50% + 3px),calc(-50% - 3px)) rotate(.6deg); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(5) { transform:translate(calc(-50% + 4px),calc(-50% - 4px)) rotate(-.4deg); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(6) { transform:translate(calc(-50% + 5px),calc(-50% - 5px)) rotate(.5deg); }
.tarot-shell[data-phase="gathered"] .tarot-card-back:nth-child(7) { transform:translate(calc(-50% + 6px),calc(-50% - 6px)); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(1) { transform:translate(-174%,-34%) rotate(-22deg); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(2) { transform:translate(-145%,-45%) rotate(-15deg); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(3) { transform:translate(-104%,-53%) rotate(-7deg); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(4) { transform:translate(-50%,-56%); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(5) { transform:translate(4%,-53%) rotate(7deg); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(6) { transform:translate(45%,-45%) rotate(15deg); }
.tarot-shell[data-phase="spread"] .tarot-card-back:nth-child(7) { transform:translate(74%,-34%) rotate(22deg); }
.tarot-reveals { width:100%; min-height:154px; padding:6px; display:flex; align-items:center; justify-content:center; gap:8px; }
.tarot-card { width:91px; aspect-ratio:2/3; padding:0; border:0; border-radius:13px; background:transparent; cursor:pointer; perspective:700px; animation:tarot-reveal .46s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:var(--card-delay,0ms); transition:transform .18s ease,filter .18s ease; }
.tarot-count-3 .tarot-card { width:82px; }
.tarot-card:hover { transform:translateY(-3px); }
.tarot-card.selected { transform:translateY(-5px) scale(1.025); filter:drop-shadow(0 8px 8px rgba(63,67,49,.18)); }
.tarot-card-frame { position:relative; width:100%; height:100%; padding:6px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden; border:3px solid #fff4d6; border-radius:inherit; background:linear-gradient(165deg,#e8eddc 0 58%,#f7d8bf 100%); box-shadow:0 10px 20px rgba(54,69,57,.18); backface-visibility:hidden; }
.tarot-card.selected .tarot-card-frame { box-shadow:0 0 0 2px #d66b58,0 13px 24px rgba(54,69,57,.2); }
.tarot-card-frame > small { align-self:flex-start; color:#557366; font:700 9px Georgia,serif; }
.tarot-card-frame > b { max-width:100%; color:#29463e; font:700 10px/1.05 Georgia,serif; text-align:center; }
.tarot-card-amigo { position:relative; width:72px; height:72px; display:block; }
.tarot-count-3 .tarot-card-amigo { width:64px; height:64px; }
.tarot-card-amigo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.tarot-card-amigo .outfit { display:block; }
.tarot-card-amigo .outfit[data-item="glasses"]::before,
.tarot-card-amigo .outfit[data-item="glasses"]::after { border-width:2px; border-radius:3px; }
.tarot-card-amigo .outfit[data-item="glasses"] i { height:2px; }
.tarot-reading { min-height:52px; margin:7px 1px 0; padding:7px 10px; display:grid; gap:2px; border-radius:14px; background:#f3ecdf; animation:tarot-reading-in .22s ease-out; }
.tarot-reading strong { font:700 14px Georgia,serif; }
.tarot-reading span { color:var(--muted); font-size:11px; line-height:1.35; }
.tarot-prompt { min-height:24px; margin:5px 0 0 !important; display:grid; place-items:center; text-align:center; font-size:11px !important; }
.tarot-actions { display:grid; gap:6px; margin-top:6px; }
.tarot-deck-actions, .tarot-draw-actions { display:grid; gap:7px; }
.tarot-deck-actions { grid-template-columns:1fr 1fr; }
.tarot-draw-actions { grid-template-columns:repeat(3,1fr); }
.tarot-actions button { min-height:40px; padding:7px; }
.tarot-gesture-row { min-height:38px; margin-top:5px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7px; }
.tarot-gesture-toggle { min-height:38px; padding:6px 10px; flex:0 0 auto; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:11px; font-weight:850; }
.tarot-gesture-toggle:disabled { cursor:wait; opacity:.65; }
.tarot-amigo-pick { min-height:38px; padding:6px 10px; border:1px solid #e5aa95; border-radius:12px; background:#fff6ef; color:#29463e; cursor:pointer; font-size:11px; font-weight:850; }
.tarot-amigo-pick:hover, .tarot-amigo-pick:focus-visible { background:#ffeadd; border-color:#f58470; }
.tarot-mode-note { display:block; margin:2px 2px 5px; color:var(--muted); font-size:10px; line-height:1.3; }
.tarot-gesture-hud { position:relative; min-height:58px; padding:5px 8px 5px 5px; display:grid; grid-template-columns:66px 1fr; align-items:center; gap:9px; overflow:hidden; border-radius:13px; background:#29463e; color:white; }
.tarot-gesture-hud video { width:66px; height:48px; border-radius:9px; background:#162821; object-fit:cover; transform:scaleX(-1); }
.tarot-gesture-hud span { font-size:11px; font-weight:800; }
.tarot-gesture-hud > i { position:absolute; left:0; bottom:0; width:var(--gesture-progress,0%); height:3px; background:#f4b87a; transition:width .12s linear; }

@media (min-width: 1000px) {
  .room[data-panel="tarot"] .amigo-stage {
    left: 78%;
    bottom: 2%;
    width: clamp(360px, 40vw, 440px);
  }
}
.playlist-form { display:grid; gap:9px; }
.playlist-input { width:100%; }
.setting-row { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.setting-row div strong, .setting-row div small { display:block; }
.setting-row div small { color:var(--muted); margin-top:3px; }
.switch { position:relative; width:50px; height:28px; flex:0 0 50px; }
.switch input { position:absolute; opacity:0; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#cbc9c3; transition:.2s; }
.switch span::after { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:.2s; }
.switch input:checked + span { background:#6e9a7e; }
.switch input:checked + span::after { transform:translateX(22px); }
.account-card { padding:13px; border-radius:16px; background:#f3ecdf; }
.account-card strong, .account-card small { display:block; }
.account-card small { margin-top:3px; color:var(--muted); }
.tag-button { padding:9px 12px; min-height:42px; }

.action-dock {
  justify-self: center;
  width: min(520px, 100%);
  min-height: 70px;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,252,246,.83);
  box-shadow: 0 12px 35px rgba(78,60,39,.15);
  backdrop-filter: blur(18px);
}
.action-dock button { min-height:56px; border-radius:18px; background:transparent; display:grid; place-items:center; align-content:center; gap:2px; }
.action-dock button span { font-size:20px; }
.action-dock button b { font-size:11px; }
.action-dock button:hover, .action-dock button.active { background:#fff0e9; color:#bd4f40; }

dialog { border:0; color:var(--ink); }
dialog::backdrop { background:rgba(35,52,45,.44); backdrop-filter:blur(8px); }
.welcome-dialog, .confirm-dialog { width:min(540px,calc(100% - 24px)); border-radius:28px; padding:0; background:var(--cream); box-shadow:var(--shadow); }
.welcome-dialog form, .confirm-dialog form { position:relative; padding:clamp(24px,5vw,42px); }
.welcome-dialog p:not(.eyebrow), .confirm-dialog p { color:var(--muted); line-height:1.55; }
.welcome-dialog .primary { display:block; width:100%; margin-top:18px; }
.tiny-amigo { float:right; width:112px; height:112px; margin:-22px -12px 4px 12px; }
.tiny-amigo img { width:100%; height:100%; object-fit:contain; }
.age-check { display:flex; align-items:center; gap:10px; margin-top:18px; min-height:44px; font-weight:700; }
.age-check input { width:22px; height:22px; accent-color:var(--peach-dark); }
.dialog-close { position:absolute; top:14px; right:14px; }
.field { display:grid; gap:7px; margin:18px 0; font-size:12px; font-weight:800; }
.personality-picker { border:0; padding:0; margin:0; }
.personality-picker legend { margin-bottom:8px; font-size:12px; font-weight:800; }
.personality-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.personality-picker label { position:relative; }
.personality-picker input { position:absolute; opacity:0; }
.personality-picker span { min-height:70px; padding:10px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); border-radius:14px; background:white; cursor:pointer; }
.personality-picker small { margin-top:3px; color:var(--muted); }
.personality-picker input:checked + span { border-color:var(--peach); background:#fff0e9; }
.guide-room { position:relative; height:190px; margin:-12px -12px 22px; overflow:hidden; border-radius:22px; background:url('/assets/room-v2.webp') center/cover; }
.guide-room img { position:absolute; width:150px; height:150px; left:50%; bottom:0; transform:translateX(-50%); object-fit:contain; }
.guide-room i { position:absolute; font-style:normal; }
.guide-plant { left:8%; bottom:20px; font-size:45px; color:#c9676d; }
.guide-ball { left:28%; bottom:18px; width:34px; height:34px; border-radius:50%; background:#ef806b; }
.guide-chair { right:10%; bottom:18px; font-size:58px; color:#76543a; }
.guide-points { display:flex; flex-wrap:wrap; gap:7px; }
.guide-points span { padding:6px 9px; border-radius:999px; background:#efe7da; font-size:11px; font-weight:800; }
.toast { position:fixed; z-index:100; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:min(420px,calc(100% - 24px)); padding:11px 15px; border-radius:14px; background:#29463e; color:white; box-shadow:0 12px 30px rgba(30,52,43,.25); text-align:center; font-size:13px; font-weight:700; }

@keyframes panel-in { from { opacity:0; transform:translateY(12px); } }
@keyframes float { 50% { transform:translateY(-10px); opacity:.55; } }
@keyframes pulse { 50% { opacity:.35; } }
@keyframes happy-bounce { 50% { transform:translateX(-50%) translateY(-15px) rotate(2deg); } }
@keyframes lean { to { transform:translateX(-50%) rotate(1.8deg); } }
@keyframes rocking { to { transform:translateX(-50%) scale(.78) rotate(2.5deg); } }
@keyframes ball-idle { 50% { transform:translateY(-5px); } }
@keyframes ball-pass { 50% { transform:translate(-170px,-130px) scale(.75) rotate(160deg); } }
@keyframes ball-return { 50% { transform:translateY(-18px) scale(.85); } }
@keyframes listen-ring { 50% { box-shadow:0 0 0 12px rgba(241,132,109,.14),0 16px 35px rgba(205,88,68,.3); } }
@keyframes snack-to-mouth { from { opacity:0; transform:translate(-35%,25%) scale(.6); } to { opacity:1; transform:none; } }
@keyframes water-stream { 50% { opacity:.65; transform:rotate(12deg) translateY(4px); } }
@keyframes wet-spot { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
@keyframes peek-intro { 0%,100% { transform:translateY(34px); } 45%,65% { transform:translateY(0); } }
@keyframes peek-blink { 0%,100% { filter:none; } 45%,70% { filter:brightness(.84); transform:translateY(5%) scale(.98,.9); } }
@keyframes result-amigo { from { opacity:0; transform:translateY(24px) scale(.88); } }
@keyframes result-wave { 0% { opacity:0; transform:translateY(22px) scale(.9); } 45% { opacity:1; transform:rotate(-3deg); } 70% { transform:rotate(3deg); } 100% { transform:none; } }
@keyframes result-peek { 0% { opacity:0; transform:translateY(55%) scale(.9); } 48% { opacity:1; transform:translateY(12%) scale(.96); } 72% { transform:translateY(32%) scale(.94); } 100% { transform:none; } }
@keyframes result-pout { 0% { opacity:0; transform:translateY(45%) scale(.88); } 55% { opacity:1; transform:translateY(8%) scale(.9,1.04); } 78% { transform:translateY(25%) scale(.94,1.01); } 100% { transform:scale(.94); } }
@keyframes result-reach { 0% { opacity:0; transform:translateY(48%) scale(.88); } 50% { opacity:1; transform:translateY(12%) scale(.98); } 78% { transform:translateY(2%) scale(1.06); } 100% { transform:none; } }
@keyframes tarot-reveal { from { opacity:0; transform:translateY(18px) rotateY(80deg) scale(.92); } }
@keyframes tarot-reading-in { from { opacity:0; transform:translateY(5px); } }

@media (max-width: 760px) {
  .app { padding:8px 8px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
  .topbar { min-height:50px; grid-template-columns:1fr auto; }
  .brand { display:none; }
  .sync-state span { display:none; }
  .identity small { max-width:120px; }
  .room { min-height:0; height:calc(100svh - 150px - env(safe-area-inset-bottom)); border-radius:26px; background-position:center; }
  .amigo-stage { width:min(82vw,340px); bottom:9%; }
  .pet-hand { right:15%; width:22%; }
  .ball { bottom:4%; transform:translateX(-50%) scale(.83); }
  .object-label { font-size:10px; }
  .activity-panel { --panel-pad:14px; left:10px; bottom:10px; width:calc(100% - 20px); max-height:44%; border-radius:21px; }
  .room[data-panel="tarot"] .activity-panel { width:calc(100% - 20px); max-height:62%; }
  .room[data-panel="game"] .activity-panel { --panel-pad:8px; left:4px; bottom:4px; width:calc(100% - 8px); max-height:calc(100% - 8px); transform:none; border-radius:22px; }
  .room[data-panel="game"] .activity-panel header { margin-bottom:4px; padding-bottom:5px; }
  .room[data-panel="game"] .activity-panel h2 { font-size:22px; }
  .room[data-panel] .amigo-stage:not(.chair-mode) { bottom:39%; transform:translateX(-50%) scale(.76); }
  .room[data-panel="tarot"] .amigo-stage:not(.chair-mode) { left:50%; bottom:64%; transform:translateX(-50%) scale(.62); }
  .room[data-panel="tarot"] .amigo-stage[data-action="listen"],
  .room[data-panel="tarot"] .amigo-stage[data-action="train"],
  .room[data-panel="tarot"] .amigo-stage[data-action="celebrate"] { animation:none; }
  .room[data-panel] .plant { opacity:.55; }
  .room[data-panel] .chair { opacity:.55; }
  .room[data-panel="game"] .amigo-stage,
  .room[data-panel="game"] .plant,
  .room[data-panel="game"] .chair,
  .room[data-panel="game"] .ball { opacity:0; }
  .activity-panel h2 { font-size:23px; }
  .panel-body p { margin-bottom:10px; font-size:13px; }
  .outfit-preview { display:none; }
  .outfit-selection { margin:0 0 9px; }
  .panel-choice { min-height:62px; }
  .tarot-entry { min-height:60px; }
  .tarot-table { min-height:144px; }
  .tarot-deck { height:140px; }
  .tarot-reveals { min-height:140px; }
  .action-dock { min-height:64px; border-radius:21px; }
  .action-dock button { min-height:50px; }
  .action-dock button span { font-size:18px; }
  .peek-grid { gap:12px; }
  .peek-window { border-width:6px; border-radius:10px; }
  .peek-result { min-height:330px; }
  .tiny-amigo { width:88px; height:88px; }
  .personality-picker { grid-template-columns:1fr; }
  .personality-picker span { min-height:54px; }
}

@media (max-width: 420px) {
  .identity { background:transparent; padding-left:0; }
  .identity-mark { width:36px; height:36px; }
  .icon-button { width:44px; height:44px; }
  .room { background-position:50% center; }
  .chair { right:0; }
  .room[data-furniture-mode="overlay"] .chair { right:-4px; width:104px; }
  .room[data-furniture-mode="overlay"] .chair .furniture-art { left:-34px; width:138px; max-width:none; }
  .plant { left:0; }
  .panel-grid { grid-template-columns:1fr 1fr; }
  .peek-meta { gap:6px; }
  .speak-control { gap:8px; }
  .hold-speak { width:96px; height:96px; }
}

@media (max-width: 350px) {
  .outfit-card-grid { grid-template-columns:1fr; }
}

@media (max-height: 550px) and (min-width: 600px) {
  .app { height:100svh; min-height:0; padding:6px 10px; gap:6px; grid-template-rows:42px minmax(0,1fr) 52px; }
  .topbar, .identity { min-height:42px; }
  .identity-mark, .icon-button { width:38px; height:38px; }
  .room { min-height:0; height:auto; border-radius:20px; }
  .amigo-stage { width:min(29vw,230px); bottom:1%; }
  .room[data-furniture-mode="overlay"] .plant { bottom:5%; width:94px; height:134px; }
  .room[data-furniture-mode="overlay"] .chair { bottom:5%; width:118px; height:140px; }
  .ball { bottom:0; transform:translateX(-50%) scale(.7); transform-origin:bottom center; }
  .action-dock { min-height:52px; border-radius:18px; }
  .action-dock button { min-height:44px; }
  .room[data-panel="game"] { z-index:20; overflow:visible; }
  .room[data-panel="game"] .activity-panel { position:fixed; z-index:50; --panel-pad:6px; inset:4px; width:calc(100vw - 8px); height:calc(100svh - 8px); max-height:none; transform:none; border-radius:16px; }
  .room[data-panel="game"] .activity-panel header { margin-bottom:2px; padding-bottom:3px; }
  .room[data-panel="game"] .activity-panel h2 { font-size:18px; }
  .room[data-panel="game"] .peek-meta { min-height:30px; margin-bottom:4px; }
  .room[data-panel="game"] .peek-pause { min-height:30px; }
  .room[data-panel="game"] .peek-grid { max-width:260px; gap:6px; }
  .room[data-panel="game"] .peek-window { border-width:5px; }
  .room[data-panel="game"] .peek-progress { margin-top:5px; }
  .room[data-panel="game"] .quiet-note { margin-top:4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}