:root {
  /* Bosie design tokens: same role names as the operator surface, warmer values for the house skin. */
  --cream-page:#ead9be; --cream-card:#fff9e9; --cream-tint:#f4ead7; --cream-border:#9c8a77;
  --ink-primary:#44372e; --ink-secondary:#7c6a5b;
  --rose-400:#d99a91; --mint-400:#91a985; --lav-200:#ddc8dc; --lav-400:#aa87b1;
  --motion-fast:140ms; --motion-room:320ms; --ease-bosie:cubic-bezier(.2,.8,.25,1);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink-primary); background:#d7c29f radial-gradient(circle at 20% 10%,#f4e8cf 0 12%,transparent 35%); font-family:Georgia,'Times New Roman',serif; }
button,input,textarea { font:inherit; color:inherit; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#app { width:min(760px,100%); margin:auto; padding:clamp(14px,3vw,30px); }
.paper { background:var(--cream-card); border:2px solid #776453; box-shadow:5px 6px 0 #9d866b; border-radius:4px; }
.loading,.paper#welcome,#pair { max-width:510px; margin:10vh auto; padding:36px; text-align:center; }
.stamp { display:inline-block; padding:5px 9px 3px; border:2px solid #9b6f67; color:#9b6f67; font:700 12px/1.1 Arial,sans-serif; letter-spacing:.16em; transform:rotate(-2deg); }
.pair-art { font-size:64px; margin:18px 0 2px; color:#9b6f67; }
.eyebrow { margin:0 0 4px; text-transform:uppercase; letter-spacing:.14em; font:700 11px Arial,sans-serif; color:var(--ink-secondary); }
h1 { margin:0; font-size:clamp(27px,6vw,42px); font-weight:normal; }
.intro { line-height:1.5; color:var(--ink-secondary); }
#new-form { display:grid; gap:15px; text-align:left; margin-top:24px; }
label { display:grid; gap:6px; font-size:14px; }
label span { color:var(--ink-secondary); }
input,textarea { width:100%; border:1.5px solid #9c8a77; background:#fffef7; padding:11px 12px; border-radius:3px; outline:none; }
input:focus,textarea:focus { border-color:#8a637e; box-shadow:0 0 0 3px #aa87b126; }
.big-button { border:2px solid #654f43; border-radius:3px; background:var(--rose-400); padding:12px 18px; box-shadow:2px 3px 0 #765f50; cursor:pointer; margin-top:8px; transition:transform var(--motion-fast) var(--ease-bosie); }
.big-button:active{transform:translate(2px,2px)}
.big-button:disabled { opacity:.55; cursor:wait; }
.error { min-height:1.2em; color:#9c3e38; }
.house header { display:flex; justify-content:space-between; align-items:end; padding:6px 3px 14px; }
.balances { display:flex; gap:7px; flex-wrap:wrap; justify-content:end; }
.balances span { background:var(--cream-card); border:1px solid #8d7965; padding:5px 8px; border-radius:12px; font:12px Arial,sans-serif; }
.room-wrap { position:relative; aspect-ratio:4/3; background:#b8c9c1; border:3px solid #655549; box-shadow:5px 6px 0 #957d64; overflow:hidden; }
#room-bg { width:100%; height:100%; object-fit:contain; display:block; }
#room-sprite{position:absolute;left:50%;bottom:10%;width:28%;height:38%;object-fit:contain;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(0 3px 2px #58463538)}
#care-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}.fx-bit{position:absolute;left:50%;top:56%;font-size:30px;will-change:transform,opacity}.fx-wash{color:#d8f5f5;text-shadow:0 0 0 #6ca6ae}.fx-charge{width:80px;height:80px;margin:-40px;border-radius:50%;background:#fff5a8aa;filter:blur(4px)}
#room-loading { position:absolute; inset:0; display:grid; place-items:center; background:#f7edd9cc; color:var(--ink-secondary); }
.corner-button { position:absolute; right:8px; top:8px; width:36px; height:36px; border:1px solid #745f51; border-radius:50%; background:#fff8e3dd; cursor:pointer; }
.mood-card { margin:13px 0; padding:12px 15px; background:#fff7df; border:1px solid #907b67; }
#mood { margin:0 0 9px; font-style:italic; }
.small-state { color:#62564e; font-size:.86rem; margin:.2rem 0 .55rem; }
.taste-memory { border-top:1px dotted #aa9581; margin:.6rem 0; padding:.55rem 0; font-size:.84rem; }
.taste-memory summary { cursor:pointer; }
.taste-memory p { margin:.45rem 0; }
.meter-row { display:grid; grid-template-columns:50px 1fr 34px; gap:8px; align-items:center; font:11px Arial,sans-serif; text-transform:uppercase; letter-spacing:.07em; }
.meter { height:10px; background:#dfd4c4; border:1px solid #88735f; overflow:hidden; }
.meter i { display:block; height:100%; width:0; background:var(--lav-400); transition:width var(--motion-room) var(--ease-bosie); }
.care { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:15px 0; }
.care button { min-width:0; border:1.5px solid #756253; background:#fff6df; padding:6px 3px 5px; box-shadow:2px 2px 0 #a38a70; cursor:pointer; transition:transform var(--motion-fast) var(--ease-bosie); }
.care button:active{transform:translate(2px,2px)}
.care button:disabled { opacity:.38; cursor:not-allowed; }
.care img { display:block; width:min(55px,100%); height:45px; object-fit:contain; margin:auto; image-rendering:auto; }
.care span { display:block; font:11px Arial,sans-serif; }
.doors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 12px}.doors button{border:1px solid var(--cream-border);background:#f7edda;padding:5px 2px;cursor:pointer}.doors button.on{background:var(--lav-200);box-shadow:inset 0 -3px 0 var(--lav-400)}.doors img{width:34px;height:28px;object-fit:contain;vertical-align:middle}.doors span{display:block;font:10px Arial,sans-serif}
.view-panel.paper{padding:16px;margin-bottom:13px;min-height:260px}.view-panel h2{font-weight:normal;margin:3px 0 8px}.panel-note{font-size:12px;color:var(--ink-secondary);line-height:1.45}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px}.shop-item{border:1px solid var(--cream-border);background:#fffdf4;padding:8px;cursor:pointer;text-align:left}.shop-item img{width:100%;height:80px;object-fit:contain}.shop-item b,.shop-item span{display:block}.shop-item b{font-size:12px}.shop-item span{font:10px/1.35 Arial,sans-serif;color:var(--ink-secondary)}.scene-image{width:100%;max-height:430px;object-fit:contain;border:1px solid var(--cream-border);background:#eee2cf}.post-list{display:grid;gap:9px}.post{padding:10px;background:#f4ead7;border-left:3px solid var(--lav-400);font-size:12px;line-height:1.45}.post b{display:block;margin-bottom:3px}.post small{color:var(--ink-secondary)}.post img{display:block;max-width:180px;max-height:150px;object-fit:contain;margin-top:8px}.confirm{position:fixed;inset:0;z-index:20;background:#342a22aa;display:grid;place-items:center;padding:20px}.confirm>.paper{width:min(390px,100%);padding:22px;text-align:center}.confirm img{width:150px;height:130px;object-fit:contain}.confirm .text-button{display:inline-block;margin-left:14px}
.talk { padding:14px; }
.thread { max-height:260px; overflow:auto; display:grid; gap:8px; padding:2px 2px 12px; }
.thread p { margin:0; max-width:88%; padding:8px 10px; line-height:1.4; white-space:pre-wrap; }
.bosie-line { justify-self:start; background:#eee1c9; border-radius:2px 10px 10px 10px; }
.owner-line { justify-self:end; background:var(--lav-200); border-radius:10px 2px 10px 10px; }
#chat-form { display:grid; grid-template-columns:1fr auto; gap:8px; }
#chat-form textarea { resize:vertical; min-height:50px; }
#chat-form button { border:1.5px solid #6f5a4b; background:var(--mint-400); padding:0 16px; cursor:pointer; }
.text-button { display:block; margin:18px auto 4px; border:0; background:transparent; color:var(--ink-secondary); text-decoration:underline; cursor:pointer; font-size:12px; }
@media (max-width:520px) { #app{padding:10px}.care,.doors{gap:4px}.care button{padding:4px 1px}.care img{height:38px}.doors img{width:30px}.loading,.paper#welcome,#pair{margin:4vh auto;padding:24px 18px}.house header{padding-top:5px}.item-grid{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}