/* 喵汪沒想到 Demo — 日系可愛風
 * 固定亮色：遊戲美術為插畫配色，不做深色模式反轉。 */

:root {
  color-scheme: light;
  --ink: #5B3A2E;
  --ink-soft: #8A6A5C;
  --cream: #FFF6E6;
  --paper: #FFFDF7;
  --butter: #FFE39A;
  --pink: #F7A8C0;
  --pink-deep: #F58AAA;
  --pink-tint: #FFEFF3;
  --mint: #9FD6C2;
  --mint-tint: #E8F6EF;
  --orange: #FFB27A;
  --orange-tint: #FFF1E3;
  --sky: #CFEAF6;
  --red: #E65A5A;
  --gold: #FFD45C;
  --radius: 18px;
  --shadow-press: 0 4px 0 var(--ink);
  --font: 'Huninn', 'Zen Maru Gothic', 'jf-openhuninn', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background-color: #F9E7CF;
  background-image: radial-gradient(circle at 12px 12px, #F3D7B5 3px, transparent 3.5px);
  background-size: 34px 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- App 外框（桌機呈手機比例） ---------- */

.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  max-height: 940px;
  background: var(--cream);
  overflow: hidden;
}

@media (min-width: 500px) and (min-height: 700px) {
  .app {
    height: min(94dvh, 940px);
    border: 4px solid var(--ink);
    border-radius: 36px;
    box-shadow: 0 10px 0 rgba(91, 58, 46, .25), 0 24px 60px rgba(91, 58, 46, .2);
  }
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.screen.active { display: flex; animation: screenIn .35s ease-out; }

@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 按鈕 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 10px 20px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper);
  font-weight: 700; font-size: 16px; letter-spacing: .04em;
  box-shadow: var(--shadow-press);
  transition: transform .08s, box-shadow .08s, background .2s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; box-shadow: 0 2px 0 var(--ink); }
.btn-lg { min-height: 54px; font-size: 18px; padding: 12px 28px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--pink); }
.btn-secondary { background: var(--mint); }
.btn-danger { background: #FFB4A8; }
.btn-danger.armed { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn-ghost:active:not(:disabled) { box-shadow: none; }

.icon-btn {
  width: 40px; height: 40px; flex: none;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--paper); box-shadow: 0 3px 0 var(--ink);
  font-size: 26px; line-height: 1; font-weight: 900; padding: 0 0 3px;
}

.hint-text { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 8px 16px; }

/* ---------- 標題 ---------- */

.screen-title {
  background: linear-gradient(180deg, #CDEBF7 0%, #E6F4F2 38%, var(--cream) 62%);
  align-items: center; justify-content: center;
}
.title-deco {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60px 22px at 18% 14%, #fff 98%, transparent),
    radial-gradient(ellipse 40px 18px at 26% 11%, #fff 98%, transparent),
    radial-gradient(ellipse 70px 24px at 82% 22%, #fff 98%, transparent),
    radial-gradient(ellipse 36px 16px at 74% 19%, #fff 98%, transparent);
  animation: drift 12s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateX(14px); } }

.title-inner {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 24px 20px; width: 100%;
}
.title-kicker {
  margin: 0; padding: 6px 16px; border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); font-weight: 700; font-size: 14px; letter-spacing: .1em;
}
.logo {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  font-weight: 900; line-height: 1.02; letter-spacing: .04em;
  transform: rotate(-3deg);
}
.logo span {
  display: block;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 8px 0 var(--ink);
}
.logo-a { font-size: 64px; color: var(--orange); }
.logo-b { font-size: 50px; color: var(--pink); margin-top: 2px; }

.title-pets { display: flex; gap: 6px; margin: 4px 0 6px; }
.title-pet { width: 128px; animation: hop 1.6s ease-in-out infinite; }
.title-pet:nth-child(2) { animation-delay: .8s; }
.title-actions { display: flex; flex-direction: column; gap: 10px; width: min(280px, 100%); }
.title-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.05, .93); }
  45% { transform: translateY(-14px) scale(.97, 1.04); }
  70% { transform: translateY(0) scale(1.03, .97); }
}

/* ---------- 通用頁首 ---------- */

.screen-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 8px;
}
.screen-head h2 { margin: 0; font-size: 22px; font-weight: 900; }

/* ---------- 選角 ---------- */

.screen-select { background: var(--cream); }
.select-cards {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 16px; align-content: center;
}
.screen-select .select-cards { flex: none; margin-top: auto; }
.screen-select .hint-text { margin-bottom: auto; padding-bottom: 40px; }
.species-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 10px 20px;
  border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.species-card:first-child { background: linear-gradient(180deg, var(--pink-tint), var(--paper)); }
.species-card:last-child { background: linear-gradient(180deg, var(--orange-tint), var(--paper)); }
.species-card:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.species-art { width: 100%; max-width: 150px; animation: hop 2s ease-in-out infinite; }
.species-card:last-child .species-art { animation-delay: 1s; }
.species-name { font-size: 22px; font-weight: 900; }
.species-desc { font-size: 13px; color: var(--ink-soft); }

/* ---------- 捏臉 ---------- */

.screen-custom { background: linear-gradient(180deg, var(--mint-tint), var(--cream) 45%); }
.custom-preview { position: relative; display: grid; place-items: center; padding: 4px 0 0; }
.custom-pet { position: relative; z-index: 1; width: 170px; }
.screen-custom .custom-preview { padding-top: 16px; }
.custom-pet.pop { animation: pop .35s ease-out; }
.custom-pedestal {
  width: 170px; height: 26px; margin-top: -22px;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--butter);
}
@keyframes pop { 40% { transform: scale(1.08, .94); } 70% { transform: scale(.97, 1.03); } }

.custom-panel {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  margin: 14px 14px 0; padding: 14px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 900; font-size: 14px; }
.field-label::before { content: '✿ '; color: var(--pink-deep); }
.name-input {
  font: inherit; font-size: 17px; font-weight: 700; color: var(--ink);
  padding: 10px 14px; border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--cream);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 12px;
  border: 2.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 0 var(--ink);
}
.chip.selected { background: var(--butter); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 2px #fff; }
.chip.locked { opacity: .55; }
.chip-lock { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); }
.custom-foot { margin-top: auto; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }

/* ---------- 客廳：HUD ---------- */

.screen-room { background: var(--cream); }

.hud {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
}
.hud-pet { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.hud-avatar {
  width: 54px; height: 54px; flex: none;
  border: 3px solid var(--ink); border-radius: 50%;
  background: var(--sky); overflow: hidden; padding: 4px 3px 0;
}
.hud-info { flex: 1; min-width: 0; }
.hud-name-row { display: flex; align-items: center; gap: 6px; }
.lv-badge {
  flex: none; font-size: 12px; font-weight: 900; padding: 1px 8px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--gold);
}
.hud-name { font-weight: 900; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-bar {
  height: 12px; margin-top: 4px;
  border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden;
}
.exp-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #9ED9A6 0 6px, #B6E6BC 6px 12px);
  transition: width .6s cubic-bezier(.3, 1.4, .5, 1);
}
.exp-text { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }

.hud-menu { display: flex; gap: 6px; flex: none; }
.menu-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 50px; padding: 4px 0 3px;
  border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--paper); box-shadow: 0 3px 0 var(--ink);
  font-size: 11px; font-weight: 700;
}
.menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.menu-icon { display: inline-block; width: 24px; height: 24px; }
.menu-icon svg, .stat-icon svg, .action-icon svg, .dex-icon svg, .fx svg { display: block; width: 100%; height: 100%; }

/* ---------- 客廳：場景 ---------- */

.stage {
  flex: 1; min-height: 0;
  container-type: size;
  display: grid; place-items: center;
}
/* scene 填滿 stage；world 維持 3:4 座標系、底部對齊，並放大 12%（左右各裁約 6% 空白邊）。
 * 螢幕比 3:4 更高時，world 上方多出的高度以同花色牆面延伸（條紋與 SVG 對齊）。 */
.scene {
  --ww: min(calc((100cqw - 18px) * 1.12), calc((100cqh - 10px) * .75));
  position: relative;
  width: calc(100cqw - 12px);
  height: calc(100cqh - 4px);
  border: 3px solid var(--ink); border-radius: 24px;
  overflow: hidden;
  background-color: #FDEAD1;
  background-image:
    linear-gradient(to top, #F4D6AA calc(var(--ww) * 4 / 3 * .41), transparent 0),
    linear-gradient(90deg, #FBE3C6 42.3%, transparent 42.3%);
  background-size: 100% 100%, calc(var(--ww) * 26 / 300) 100%;
  background-repeat: no-repeat, repeat-x;
  background-position: 0 0, calc((100cqw - 18px - var(--ww)) / 2 + var(--ww) * 6 / 300) 0;
  user-select: none;
}
/* 吊燈只在 world 上方有足夠延伸牆面時顯示（stage 夠高） */
.lamp {
  display: none; position: absolute; left: 36%; top: 0; width: 60px; z-index: 1;
  transform-origin: 50% 0; animation: lampSway 4s ease-in-out infinite;
}
.lamp svg { display: block; width: 100%; }
@container (max-aspect-ratio: 5 / 8) { .lamp { display: block; } }
@keyframes lampSway { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg); } }
.world {
  position: absolute; left: 50%; bottom: 0;
  width: var(--ww); aspect-ratio: 3 / 4;
  transform: translateX(-50%);
}
.scene.shake { animation: shake .45s; }
@keyframes shake {
  20% { transform: translate(-4px, 1px); } 40% { transform: translate(4px, -1px); }
  60% { transform: translate(-3px, 0); } 80% { transform: translate(2px, 1px); }
}

.scene-bg, .room-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.night-sky { opacity: 0; transition: opacity .5s; }
.scene.night .night-sky { opacity: 1; }
.night-overlay {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(circle at 50% 80%, rgba(40, 46, 96, .25), rgba(30, 34, 80, .6));
  opacity: 0; transition: opacity .5s;
}
.scene.night .night-overlay { opacity: 1; }

.owner {
  position: absolute; left: 12.2%; top: 27.75%; width: 37%; z-index: 3;
  transform-origin: 50% 100%;
}
.owner.react-angry, .owner.react-rage { animation: ownerShake .5s 2; }
.owner.react-surprised { animation: ownerJump .5s; }
.owner.react-happy, .owner.react-healed { animation: ownerBounce .6s 2; }
.owner.react-tired, .owner.react-sleepy, .owner.react-helpless { animation: ownerSway 1.4s; }
@keyframes ownerShake { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes ownerJump { 40% { transform: translateY(-9%) scale(1.03); } }
@keyframes ownerBounce { 50% { transform: scale(1.04, .96); } }
@keyframes ownerSway { 30% { transform: rotate(-4deg); } 70% { transform: rotate(3deg); } }

.pet {
  position: absolute; left: 47%; top: 88%; width: 25%; z-index: 5;
  transform: translate(-50%, -100%);
  transition: left .65s cubic-bezier(.45, 0, .3, 1), top .65s cubic-bezier(.45, 0, .3, 1);
}
.pet.no-move { transition: none; }
.pet-flip { transition: transform .2s; }
.pet.flip .pet-flip { transform: scaleX(-1); }
.pet.moving .pet-anim { animation: moveHop .22s ease-in-out 3; }
.pet-anim { transform-origin: 50% 100%; animation: breathe 2.4s ease-in-out infinite; }
.pet-anim svg { display: block; width: 100%; }

@keyframes breathe { 50% { transform: scale(1.02, .975); } }
@keyframes moveHop { 50% { transform: translateY(-12%); } }

.pet-anim.anim-wiggle { animation: wiggle .28s ease-in-out 4; }
.pet-anim.anim-sleep { animation: sleepy 1.1s ease-in-out forwards; }
.pet-anim.anim-push { animation: push .3s ease-in-out 3; }
.pet-anim.anim-stomp { animation: stomp .2s ease-in-out 5; }
.pet-anim.anim-scratch { animation: scratch .12s linear 9; }
.pet-anim.anim-roll { animation: roll 1.1s ease-in-out; }
.pet-anim.anim-parkour { animation: parkour 1.8s ease-in-out; }

@keyframes wiggle { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes sleepy { to { transform: scale(1.08, .86); } }
@keyframes push { 50% { transform: translateX(-12%) rotate(-8deg); } }
@keyframes stomp { 50% { transform: translateY(-10%) scale(1.03, .96); } }
@keyframes scratch { 50% { transform: translateX(-5%) rotate(-3deg); } }
@keyframes roll {
  30% { transform: rotate(-180deg) translateY(10%); }
  70% { transform: rotate(-180deg) translateY(10%); }
  100% { transform: rotate(-360deg); }
}
@keyframes parkour {
  0% { transform: translate(0, 0); }
  14% { transform: translate(-70%, -150%) rotate(-20deg); }
  26% { transform: translate(-150%, -170%); }
  42% { transform: translate(-20%, -330%) rotate(200deg); }
  56% { transform: translate(170%, -250%) rotate(360deg); }
  72% { transform: translate(120%, -60%) rotate(380deg); }
  86% { transform: translate(40%, -30%) rotate(360deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* 道具 */
.prop { position: absolute; pointer-events: none; }
.prop svg { display: block; width: 100%; }

.prop-cup {
  left: 68.3%; top: 72%; width: 8.5%; z-index: 4;
  transform: translate(-50%, -100%);
}
.prop-cup .steam { animation: steam 1.8s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-2px); opacity: .5; } }
.prop-cup.fall { animation: cupFall .75s ease-in forwards; }
.prop-cup.respawn { animation: fadeIn .5s ease-out; }
@keyframes cupFall {
  0% { transform: translate(-50%, -100%) rotate(0); }
  30% { transform: translate(-80%, -110%) rotate(-35deg); }
  100% { transform: translate(-150%, 80%) rotate(-110deg); opacity: 0; }
}
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -90%); } to { opacity: 1; transform: translate(-50%, -100%); } }

.prop-shards {
  left: 58%; top: 81%; width: 20%; z-index: 4;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.prop-shards.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.prop-typing {
  left: 76%; top: 22%; z-index: 7;
  transform: translate(-50%, -100%);
  padding: 3px 8px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--paper); font-weight: 900; font-size: 12px; letter-spacing: .06em;
  white-space: nowrap; opacity: 0;
}
.prop-typing.show { animation: typing 1.1s steps(1) 2 forwards; }
@keyframes typing {
  0% { opacity: 1; clip-path: inset(0 80% 0 0); }
  25% { clip-path: inset(0 55% 0 0); }
  50% { clip-path: inset(0 30% 0 0); }
  75%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

.prop-slipper {
  left: 80%; top: 97%; width: 13%; z-index: 6;
  transform: translate(-50%, -100%) scale(.6); opacity: 0;
  transition: opacity .3s, transform .3s, left .65s cubic-bezier(.45, 0, .3, 1), top .65s cubic-bezier(.45, 0, .3, 1);
}
.prop-slipper.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.prop-slipper.carried { left: 45%; top: 75%; }

.prop-scratch {
  left: 7.5%; top: 56%; width: 8%; z-index: 2;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s;
}
.prop-scratch.show { opacity: 1; }

/* 情緒面板 */
.mood-card {
  position: absolute; right: 3%; top: 2.5%; width: 40%; z-index: 10;
  padding: 6px 8px 7px;
  background: rgba(255, 253, 247, .94);
  border: 2.5px solid var(--ink); border-radius: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.mood-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 1px; }
.mood-who { font-size: 12px; font-weight: 900; }
.mood-chip {
  font-size: 12px; font-weight: 900; padding: 0 8px;
  border: 2px solid var(--ink); border-radius: 999px; transition: background .3s;
}
.mood-chip[data-tone="good"] { background: #FFD1DC; }
.mood-chip[data-tone="calm"] { background: var(--mint-tint); }
.mood-chip[data-tone="warn"] { background: var(--butter); }
.mood-chip[data-tone="bad"] { background: #FFB0A6; }
.stat-row { display: flex; align-items: center; gap: 4px; }
.stat-icon { width: 15px; height: 15px; flex: none; }
.stat-bar { flex: 1; height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.stat-fill { height: 100%; transition: width .6s ease; }
.fill-aff { background: #F7A1B6; }
.fill-stress { background: #F28B6E; }

.discover-pill {
  position: absolute; left: 3%; bottom: 2.5%; z-index: 10;
  display: flex; align-items: center; gap: 3px;
  padding: 2px 9px 2px 5px; font-size: 12px; font-weight: 900;
  border: 2.5px solid var(--ink); border-radius: 999px; background: rgba(255, 253, 247, .94);
}
.discover-pill .menu-icon { width: 18px; height: 18px; }

/* 對話泡泡 */
.bubble {
  position: absolute; left: 8%; right: 40%; bottom: 69%; z-index: 11;
  padding: 8px 11px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px;
  font-size: clamp(12px, 3.6cqw, 15px); font-weight: 700; line-height: 1.4;
  opacity: 0; transform: scale(.85); transform-origin: 40% 100%;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.bubble::after {
  content: ''; position: absolute; left: 48%; bottom: -12px;
  width: 16px; height: 16px; background: var(--paper);
  border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg) skew(8deg, 8deg); border-radius: 0 0 4px 0;
}
.bubble.show { opacity: 1; transform: scale(1); animation: bubbleIn .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bubbleIn { from { transform: scale(.6); } }

.toast {
  position: absolute; left: 50%; top: 50%; z-index: 12;
  transform: translate(-50%, -50%) scale(.8);
  padding: 8px 16px; white-space: nowrap;
  background: var(--gold); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  font-size: 14px; font-weight: 900;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 特效 */
.fx-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.fx {
  position: absolute; width: 8%;
  transform: translate(-50%, -50%);
  animation: fxFloat 1.5s ease-out forwards; opacity: 0;
}
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(.9) rotate(12deg); }
}
.float-text {
  position: absolute; z-index: 9; white-space: nowrap;
  transform: translate(-50%, 0);
  font-weight: 900; font-size: 16px; color: #fff;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);
  animation: floatUp 1.5s ease-out forwards;
}
.float-text.exp { color: #B6F0A0; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

/* ---------- 客廳：行動面板 ---------- */

/* 精簡：4×2 細長膠囊（圖示＋名稱），乖巧／搗蛋以底色區分 */
.actions { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.action-btn {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; height: 36px; padding: 0 3px;
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 11.5px; font-weight: 900; line-height: 1; white-space: nowrap;
  transition: transform .08s, box-shadow .08s, opacity .2s;
}
.action-btn.kind-good { background: #FFE3EA; }
.action-btn.kind-naughty { background: #FFE6CC; }
.action-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.action-btn.locked { background: #EFE6DC; color: var(--ink-soft); font-size: 11px; }
.action-grid.busy .action-btn:not(.locked) { opacity: .55; }
.action-icon { width: 17px; height: 17px; flex: none; }
.action-name { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Modal ---------- */

.modal {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(91, 58, 46, .42);
}
.modal[hidden] { display: none; }
.modal.open { animation: fadeBg .25s ease-out; }
.modal.open .sheet { animation: sheetUp .35s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes fadeBg { from { background: rgba(91, 58, 46, 0); } }
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0; } }

.modal-card { background: var(--cream); border: 3px solid var(--ink); }
.sheet {
  width: 100%; max-height: 88%;
  display: flex; flex-direction: column;
  border-radius: 26px 26px 0 0; border-bottom: none;
  padding: 0 14px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.sheet > * + * { margin-top: 10px; }
.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -14px; padding: 12px 14px;
  background: var(--mint); border-bottom: 3px solid var(--ink);
  border-radius: 23px 23px 0 0;
}
.sheet-head h3 { margin: 0; font-size: 19px; font-weight: 900; }
.close-btn {
  width: 36px; height: 36px; padding: 5px;
  border: 2.5px solid var(--ink); border-radius: 10px;
  background: #F07F7F; box-shadow: 0 3px 0 var(--ink);
}
.close-btn::before {
  content: ''; display: block; width: 100%; height: 100%;
  background:
    linear-gradient(45deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fff 42% 58%, transparent 58%);
}

/* 升級 */
#modal-levelup { align-items: center; padding: 20px; }
.levelup-card {
  position: relative; width: 100%; max-width: 330px;
  padding: 20px 20px 22px; border-radius: 28px;
  text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #FFF3C4, var(--cream) 60%);
}
.modal.open .levelup-card { animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes popIn { from { transform: scale(.5); opacity: 0; } }
.levelup-rays {
  position: absolute; left: 50%; top: 42%; width: 520px; height: 520px;
  margin: -260px 0 0 -260px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 212, 92, .35) 0 10deg, transparent 10deg 20deg);
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.levelup-kicker { position: relative; margin: 0; font-weight: 900; font-size: 15px; color: var(--pink-deep); letter-spacing: .2em; }
.levelup-title { position: relative; margin: 2px 0 0; font-size: 28px; font-weight: 900; }
.levelup-pet { position: relative; width: 130px; margin: 6px auto; animation: hop 1.2s ease-in-out infinite; }
.reward-list {
  position: relative; list-style: none; margin: 0 0 16px; padding: 10px 12px;
  background: var(--paper); border: 2.5px dashed var(--ink); border-radius: 16px;
  font-weight: 700; font-size: 15px; display: flex; flex-direction: column; gap: 4px;
}
.reward-list li::before { content: '★ '; color: #F2B233; }

/* 圖鑑 */
.dex-progress { margin: 12px 0 0; font-weight: 700; text-align: center; }
.dex-progress b { font-size: 22px; color: var(--pink-deep); }
.dex-list { display: flex; flex-direction: column; gap: 10px; }
.dex-row {
  border: 2.5px solid var(--ink); border-radius: 16px; padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.dex-row.kind-good { background: var(--pink-tint); }
.dex-row.kind-naughty { background: var(--orange-tint); }
.dex-row.kind-special { background: #F1EBFB; }
.dex-row-head { display: flex; align-items: center; gap: 6px; font-weight: 900; }
.dex-icon { width: 24px; height: 24px; }
.dex-cell {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .7);
  font-size: 13px; color: #B7A79E;
}
.dex-cell.found { color: var(--ink); background: #fff; }
.dex-tag {
  flex: none; font-size: 11px; font-weight: 900; padding: 1px 7px;
  border: 2px solid currentColor; border-radius: 999px;
}
.dex-line { line-height: 1.45; font-weight: 700; }

/* 皮膚工坊 */
.demo-notice {
  margin: 12px 0 0; padding: 7px 10px; font-size: 12.5px; font-weight: 700;
  background: var(--butter); border: 2px dashed var(--ink); border-radius: 12px;
}
.skin-step { display: flex; flex-direction: column; gap: 10px; }
.skin-step[hidden] { display: none; }
.skin-lead { margin: 4px 0 0; text-align: center; font-weight: 900; font-size: 16px; }
.upload-box {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 3px dashed var(--ink); border-radius: 18px; background: var(--paper);
  cursor: pointer; font-weight: 700;
}
.upload-preview {
  width: 72px; height: 72px; flex: none; display: grid; place-items: center;
  border: 2.5px solid var(--ink); border-radius: 50%; background: var(--sky); overflow: hidden;
}
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-icon { width: 36px; height: 36px; }
.form-error { margin: 0; min-height: 1em; color: #C0392B; font-weight: 700; font-size: 13px; }
.plan-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-card {
  text-align: left; padding: 10px;
  border: 2.5px solid var(--ink); border-radius: 16px; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.plan-card.selected { background: var(--pink-tint); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 3px var(--pink); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; }
.plan-price { font-size: 22px; color: var(--pink-deep); }
.plan-features { margin: 6px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.5; }

.gen-anim { display: grid; place-items: center; padding: 16px 0 4px; }
.gen-pet { width: 130px; animation: genGlow 1s ease-in-out infinite alternate; }
@keyframes genGlow { from { filter: saturate(.2) brightness(1.15); } to { filter: saturate(1) drop-shadow(0 0 10px var(--gold)); } }
.gen-bar { height: 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.gen-fill { height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--pink) 0 8px, #FBC3D3 8px 16px); }
.gen-fill.run { animation: genFill 2.6s ease-in-out forwards; }
@keyframes genFill { to { width: 100%; } }

.result-compare { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 8px; }
.result-photo {
  width: 104px; height: 104px; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--sky);
}
.result-photo img { width: 100%; height: 100%; object-fit: cover; }
.result-arrow { font-size: 28px; font-weight: 900; }
.result-pet { width: 130px; animation: hop 1.4s ease-in-out infinite; }

/* 設定 */
.test-log { margin-top: 12px; padding: 10px 12px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; }
.test-log-title { margin: 0 0 6px; font-weight: 900; font-size: 14px; }
.test-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.test-stats div { text-align: center; padding: 6px 2px; background: var(--cream); border-radius: 10px; }
.test-stats dt { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.test-stats dd { margin: 2px 0 0; font-weight: 900; font-size: 15px; }

/* 預覽嵌入（畫面總覽）時不需要外框 */
.is-preview body { background: var(--cream); }
.is-preview .app { max-width: none; max-height: none; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }

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

/* 窄螢幕（≤380px，小手機與總覽嵌入）：HUD 精簡 */
@media (max-width: 380px) {
  .hud { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hud-avatar { width: 44px; height: 44px; }
  .hud-menu { gap: 4px; }
  .menu-btn { width: 36px; height: 36px; justify-content: center; padding: 0; }
  .menu-label { display: none; }
  .exp-text { white-space: nowrap; }
  .action-btn { flex-direction: column; gap: 1px; height: 42px; border-radius: 12px; font-size: 10px; }
  .action-icon { width: 17px; height: 17px; }
  .species-desc { font-size: 12px; }
}