@font-face{font-family:"Megu Petita";src:url("/game-fonts/petitalight.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Megu Petita";src:url("/game-fonts/petitabold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root {
  /* Canonical Bosie palette: shared with clubhouse/public/styles.css and the native app. */
  --cream-page:#faf5ee; --cream-card:#fffdfa; --cream-tint:#f4ebe0; --cream-border:#efe6da;
  --ink-primary:#3a3640; --ink-secondary:#8a8078;
  --rose-400:#e98aa9; --rose-500:#dd6e92; --mint-400:#46c79a; --mint-500:#1f9f72;
  --peri-50:#eaf2fb; --peri-400:#6f9fdc; --peri-500:#4f81c8;
  --lav-50:#f1ecf8; --lav-200:#d4c4ec; --lav-400:#9a7bbf; --lav-600:#6a4a8c;
  --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:var(--peri-50); font-family:"Megu Petita",Arial,sans-serif; }
body.original-preview{background:#75bfd3}
body.original-preview #app{min-height:100vh;display:grid;place-items:center}
body.entry-page #app{min-height:100vh;display:grid;place-items:center}
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(430px,100%); margin:auto; padding:clamp(10px,2.5vw,18px); }
.paper { background:var(--cream-card); border:2px solid var(--lav-200); box-shadow:none; border-radius:14px; }
.loading,.paper#welcome,#pair { width:100%;max-width:510px;padding:36px;text-align:center; }
#welcome,#pair{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px}
#welcome .intro,#pair .intro,#welcome h1,#pair h1,#welcome form,#pair form,#pair .pair-tools{width:100%;margin:0}
#welcome form,#new-form,.pair-tools{display:grid;gap:12px}
#welcome .big-button,#pair .big-button{justify-self:center;margin:0}
#pair .pair-art,#pair .eyebrow{margin:0}
#web-closed{width:100%;padding-block:36px;padding-inline:22px;display:grid;grid-template-columns:minmax(0,320px);justify-content:center;justify-items:center;align-items:center;gap:14px;text-align:center;background:#b8e3ec;border-color:#50849b;box-shadow:none;font-family:"Megu Petita",Arial,sans-serif;color:#244c64}
.preview-kicker{margin:0;font-size:18px;line-height:1.25;font-weight:700;color:#285b75}
#megu-original{display:block;width:320px;height:208px;max-width:100%;object-fit:contain;background:#71bdd2;border:2px solid #39738f}
.translation{position:relative;width:320px;max-width:100%;height:76px;overflow:hidden;background:url("/game-objects/bg_message@2x.png") center/100% 100% no-repeat}
.translation p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding-inline:22px;padding-block:8px 14px;color:var(--ink-primary);font:400 15px/1.25 "Megu Petita",Arial,sans-serif;transition:transform 420ms var(--ease-bosie),opacity 420ms var(--ease-bosie);opacity:0;transform:translateY(7px)}
.translation p.active{opacity:1;transform:translateY(0)}
.translation .translation-idle{display:block;padding:0;color:var(--ink-primary);font-family:"Megu Petita","Arial Unicode MS",sans-serif;font-size:21px;opacity:1;transform:none}
.translation-idle span{position:absolute;left:var(--note-x);top:var(--note-y);line-height:1;transform:translate(-50%,-50%) rotate(var(--note-turn)) scale(var(--note-scale));animation:note-arrive 420ms var(--ease-bosie) both}
.translation.has-line .translation-idle{opacity:0;transform:translateY(-7px)}
@keyframes note-arrive{from{opacity:0;transform:translate(-50%,-30%) rotate(var(--note-turn)) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--note-turn)) scale(var(--note-scale))}}
.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 { display:block;width:72px;height:72px;object-fit:contain;margin:18px auto 2px; }
.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:700; }
.intro { line-height:1.5; color:var(--ink-secondary); }
#new-form { text-align:left; }
.pair-tools{text-align:left}.pair-tools p{margin:0;color:var(--ink-secondary);line-height:1.45}.pair-tools .text-button{justify-self:center;margin:0}
label { display:grid; gap:6px; font-size:14px; }
label span { color:var(--ink-secondary); }
input,textarea { width:100%; border:1.5px solid var(--lav-200); background:var(--cream-card); color:var(--ink-primary); padding:11px 12px; border-radius:9px; outline:none; }
input:focus,textarea:focus { border-color:var(--peri-400); box-shadow:0 0 0 3px #6f9fdc26; }
.big-button { min-width:114px;height:40px;border:0;background:transparent url("/game-buttons/btn_yes_114@2x.png") center/100% 100% no-repeat;padding:0 18px;box-shadow:none;cursor:pointer;margin-top:8px;color:var(--ink-primary);transition:transform var(--motion-fast) var(--ease-bosie); }
.asset-download{display:grid;grid-template-columns:54px 1fr;align-items:center;width:min(216px,100%);height:64px;background:url("/game-buttons/button_savelayut@2x.png") center/100% 100% no-repeat;color:var(--ink-primary);font:400 14px/1.15 "Megu Petita",Arial,sans-serif;text-align:center;text-decoration:none}
.asset-download span{grid-column:2}
.pair-tools .asset-download{justify-self:center}
.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:1/1; 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:10px 0; padding:9px 12px; background:#fff7df; border:1px solid #907b67; }
#mood { margin:0; font-style:italic; }
.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(4,1fr); gap:8px; margin:12px 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; }
.charge-hint{display:flex;align-items:center;gap:5px;margin:2px auto 11px;padding:0;border:0;background:transparent;color:var(--ink-secondary);font:11px Arial,sans-serif;cursor:pointer}.charge-hint img{width:18px;height:18px;object-fit:contain}.charge-hint:hover span{text-decoration:underline}.charge-hint:disabled{opacity:.45;cursor:wait}
.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; }
.thread p img,.thread p video{display:block;max-width:100%;max-height:220px;object-fit:contain;margin-top:7px;border-radius:5px}
.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; }
.system-line { justify-self:center; background:transparent; color:var(--ink-secondary); font:11px/1.4 Arial,sans-serif; text-align:center; }
#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; }
.build-version { position:fixed; right:8px; bottom:6px; color:var(--ink-secondary); font:10px Arial,sans-serif; opacity:.7; }
@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}}