:root {
  --bg: #FFF5F8; --card: #FFFFFF; --ink: #4A3F55; --muted: #8A7A96;
  --mint: #B8E0D2; --pink: #FFD6E8; --coral: #FFB4A2; --lav: #D4C4F0;
  --line: #EBD7E4; --ok: #7BC8A4; --warn: #F0C27A; --bad: #E89ABB;
  --radius: 18px; --shadow: 0 8px 24px rgba(74,63,85,.08);
  font-family: Nunito, "Segoe UI", system-ui, sans-serif;
}
html, body { margin:0; background: var(--bg); color: var(--ink); min-height:100%; }
body.contrast { --bg:#FFF0F5; --ink:#1A1220; --card:#fff; --line:#C9A8B8; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
.app { max-width: 480px; margin: 0 auto; padding: 12px 12px 96px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.brand { font-weight:800; letter-spacing:.02em; }
.pill { background:var(--pink); border-radius:999px; padding:4px 10px; font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:12px; }
.avatar-wrap { display:flex; justify-content:center; align-items:center; min-height:200px; }
.needs { display:grid; gap:8px; }
.need { display:grid; grid-template-columns:64px 1fr 36px; align-items:center; gap:8px; font-size:13px; }
.bar { height:10px; background:#F3E6EE; border-radius:999px; overflow:hidden; }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--lav)); border-radius:999px; }
.bar.warn > i { background:var(--warn); } .bar.bad > i { background:var(--bad); }
.actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.actions button, .btn {
  border:0; border-radius:14px; padding:10px 8px; background:var(--mint); color:var(--ink);
  font-weight:700; cursor:pointer; box-shadow:0 2px 0 #9bcfc0;
}
.actions button:active, .btn:active { transform:translateY(1px); box-shadow:none; }
.btn.pink { background:var(--pink); box-shadow:0 2px 0 #e8b6cb; }
.btn.coral { background:var(--coral); box-shadow:0 2px 0 #e39a88; }
.btn.ghost { background:transparent; border:1px solid var(--line); box-shadow:none; }
.btn.block { width:100%; margin-top:8px; }
.nav {
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:min(480px,100%);
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px; background:rgba(255,245,248,.95);
  border-top:1px solid var(--line); padding:8px; backdrop-filter:blur(8px);
}
.nav button { border:0; background:transparent; padding:8px 4px; border-radius:12px; font-size:11px; color:var(--muted); cursor:pointer; }
.nav button.active { background:var(--pink); color:var(--ink); font-weight:800; }
.hidden { display:none !important; }
.chat-log { max-height:280px; overflow:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.bubble { max-width:85%; padding:10px 12px; border-radius:16px; font-size:14px; line-height:1.35; }
.bubble.me { align-self:flex-end; background:var(--lav); }
.bubble.mochi { align-self:flex-start; background:#fff; border:1px solid var(--line); }
.bubble .meta { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.chat-input { display:flex; gap:8px; }
.chat-input input { flex:1; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.warns { font-size:12px; color:#9a5b6e; margin:6px 0; }
.checkin { background:#fff; border:2px dashed var(--lav); border-radius:16px; padding:10px; margin-bottom:10px; font-size:13px; }
.list { display:flex; flex-direction:column; gap:8px; }
.list .row { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:13px; }
.tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag { background:var(--pink); border-radius:999px; padding:2px 8px; font-size:11px; }
.skill { margin-bottom:8px; }
.skill .label { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.progress { height:8px; background:#F3E6EE; border-radius:99px; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--coral); }
.onboard { text-align:center; }
.onboard h1 { margin:8px 0; }
.goal-grid { display:grid; gap:8px; margin:12px 0; }
.goal-grid button { padding:14px; border-radius:16px; border:2px solid var(--line); background:#fff; cursor:pointer; text-align:left; }
.goal-grid button.selected { border-color:var(--mint); background:#E8F6F1; }
.toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 14px; border-radius:12px; font-size:13px; z-index:20; max-width:90%; }
.screen h2 { margin:0 0 10px; font-size:18px; }
.muted { color:var(--muted); font-size:12px; }
.roadmap-item { display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center; padding:8px; border-bottom:1px solid var(--line); font-size:13px; }
.roadmap-item .st { font-size:11px; padding:2px 6px; border-radius:999px; background:#eee; }
.roadmap-item .st.done { background:var(--mint); }
.roadmap-item .st.stub { background:var(--lav); }
.roadmap-item .st.open { background:#F3E6EE; }
canvas.game { width:100%; border-radius:16px; border:1px solid var(--line); background:#fff; touch-action:none; }
.field { margin-bottom:10px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.field input[type=text], .field input[type=url], .field select { width:100%; padding:10px; border-radius:12px; border:1px solid var(--line); }
.toggle { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }

.avatar-wrap { flex-direction: column; gap: 10px; padding-bottom: 12px; }
.room-host { width: 100%; }
.room-host .mochi-room-scene { margin: 0 auto; }
.room-controls { width: 100%; }
.night-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.seg { display:inline-flex; background:#F3E6EE; border-radius:999px; padding:3px; gap:2px; }
.seg-btn { border:0; background:transparent; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; }
.seg-btn.active { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(74,63,85,.12); }
.outfit-grid { display:flex; flex-wrap:wrap; gap:6px; }
.outfit-chip { border:2px solid var(--line); background:#fff; border-radius:12px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; color:var(--ink); }
.outfit-chip.active { border-color: var(--mint); background:#E8F6F1; }
.outfit-chip .prev { display:inline-block; width:22px; height:22px; vertical-align:middle; margin-right:4px; object-fit:contain; }

.memgame .mem-card { aspect-ratio:1; border:2px solid var(--line); border-radius:12px; background:#fff; font-size:28px; cursor:pointer; }
.memgame .mem-card.open, .memgame .mem-card.done { background:#E8F6F1; border-color:var(--mint); }
.album-thumb { width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.persona-chip { display:inline-block; background:var(--lav); border-radius:999px; padding:4px 10px; margin:2px; font-size:12px; font-weight:700; }
#battery-hint.hidden { display:none !important; }
body.font-lg { font-size: 17px; }

.bubble.filtered { border-color: #E8A0B0; background: #FFF0F3; }
.filter-badge { font-size: 11px; font-weight: 700; color: #C45B74; margin-top: 4px; }

.outfit-chip.dim { opacity: 0.85; }
.mochi-furn { filter: drop-shadow(0 2px 4px rgba(74,63,85,0.15)); }

.nudge-badge { font-size: 12px; font-weight: 700; color: #9A6B00; margin-top: 6px; background: #FFF3D0; border-radius: 8px; padding: 4px 8px; }
.drift-badge { font-size: 11px; font-weight: 700; color: #5B4A8A; margin-top: 6px; background: #EDE8FF; border-radius: 8px; padding: 4px 8px; }