/* ============ 唐宁文具店 样式 ============ */
:root{
  --ink:#4a3b2f;            /* 主文字（暖棕） */
  --ink-soft:#7a6a59;
  --cream:#fff6e6;          /* 奶油底 */
  --cream-2:#ffefd4;
  --pink:#ffadc6;
  --pink-dark:#e87a9b;
  --pink-text:#8a2c4c;
  --amber:#ffd89b;
  --amber-dark:#e0ae5a;
  --amber-text:#7a5410;
  --blue:#bfe6ff;
  --blue-dark:#6fb0e6;
  --blue-text:#1a557f;
  --green:#bfe6c8;
  --green-dark:#5fae74;
  --green-text:#2e7a45;
  --purple:#dcc7f2;
  --panel:#fffdf7;
  --shadow:0 6px 0 rgba(120,90,60,.18);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  background:#3a2f28;
  overflow:hidden;
  color:var(--ink);
  user-select:none;
}

#game-root{
  position:fixed; inset:0;
  background:radial-gradient(circle at 50% 30%, #5a4a3e, #2c241e);
}

/* 背景音乐开关（固定右上角，不随舞台缩放） */
.music-btn{
  position:fixed; top:12px; right:14px; z-index:200;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:3px solid #fff; background:var(--pink); color:#fff; font-size:22px;
  box-shadow:0 4px 0 rgba(0,0,0,.25); line-height:1; padding:0;
}
.music-btn:active{transform:translateY(2px);}

/* 固定逻辑分辨率 1280x720；由 JS 等比缩放并居中（letterbox）。
   注意：必须 absolute 脱离文档流，否则与父级居中叠加会算错位置。 */
#stage{
  position:absolute; left:0; top:0;
  width:1280px; height:720px;
  transform-origin:top left;
  background:var(--cream);
  overflow:hidden;
  border-radius:8px;
}

/* ---------- 通用层 ---------- */
.layer{position:absolute; inset:0;}
.layer-bg img,.layer-bg .placeholder{width:100%;height:100%;object-fit:cover;display:block;}

/* 资源占位框 */
.placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#efe4cf,#efe4cf 14px,#e6d8bd 14px,#e6d8bd 28px);
  color:#8a755a;font-size:18px;border:2px dashed #c9b48c;border-radius:10px;
  padding:8px;line-height:1.4;
}
.placeholder.ph-bg{font-size:30px;border-radius:0;}
.placeholder.ph-sprite{border-radius:16px;font-size:20px;}
.placeholder.ph-item{font-size:26px;}

/* ---------- HUD 顶栏 ---------- */
.hud{
  position:absolute;top:18px;left:18px;right:18px;height:58px;
  display:flex;align-items:center;gap:14px;z-index:30;pointer-events:none;
}
.hud .title-pill{
  background:var(--pink);border:3px solid #fff;border-radius:16px;
  padding:8px 20px;font-size:24px;font-weight:700;color:var(--pink-text);
  box-shadow:var(--shadow);
}
.hud .spacer{flex:1;}
.chip{
  background:#fff;border:3px solid #fff;border-radius:14px;padding:7px 16px;
  font-size:19px;font-weight:700;box-shadow:var(--shadow);display:flex;align-items:center;gap:6px;
}
.chip.day{background:var(--blue);color:var(--blue-text);}
.chip.money{background:var(--amber);color:var(--amber-text);}
.chip.rep{background:var(--green);color:var(--green-text);}

/* ---------- 立绘 ---------- */
/* 固定展示框（宽×高）+ 底部对齐自适应缩放：任意图片比例都不会越界 / 互相重叠 */
.layer-sprites{z-index:10;}
.sprite{
  position:absolute;bottom:0;width:440px;height:690px;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
  transition:filter .25s ease, left .3s ease, right .3s ease;
}
.sprite.pos-left{left:36px;}
.sprite.pos-center{left:50%;transform:translateX(-50%);}
.sprite.pos-right{right:36px;}
.sprite.dim{filter:brightness(.62) drop-shadow(0 8px 10px rgba(0,0,0,.25));}
.sprite-anim{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;transform-origin:bottom center;transition:opacity .3s ease, transform .3s ease;}
.sprite-anim img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}
.sprite-anim.enter,.sprite-anim.leave{opacity:0;transform:translateY(28px) scale(.96);}
.sprite-anim.pop{animation:spritePop .32s ease;}
.sprite.speaking .sprite-anim img{animation:spriteBob 2.4s ease-in-out infinite;}
.sprite .placeholder.ph-sprite{width:320px;height:560px;}
@keyframes spritePop{0%{transform:scale(1);}40%{transform:scale(1.05);}100%{transform:scale(1);}}
@keyframes spriteBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* ---------- 对话框 ---------- */
.dialogue-box{
  position:absolute;left:60px;right:60px;bottom:36px;z-index:40;
  background:rgba(255,253,247,.96);border:4px solid #fff;border-radius:22px;
  box-shadow:0 8px 0 rgba(120,90,60,.22);padding:22px 30px 26px;min-height:158px;
  cursor:pointer;
}
.dialogue-box .speaker{
  position:absolute;top:-26px;left:30px;background:var(--pink);color:#fff;
  font-size:22px;font-weight:700;padding:6px 22px;border-radius:14px;border:3px solid #fff;
  box-shadow:var(--shadow);
}
.dialogue-box .dtext{font-size:26px;line-height:1.65;color:var(--ink);min-height:86px;}
.dialogue-box .hint{position:absolute;right:24px;bottom:12px;font-size:18px;color:var(--ink-soft);animation:blink 1.1s infinite;}
@keyframes blink{50%{opacity:.25;}}

/* 选项 */
.choices{position:absolute;left:0;right:0;bottom:230px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:16px;}
.choice-btn{
  background:#fff;border:4px solid var(--pink);border-radius:18px;padding:16px 34px;
  font-size:24px;font-weight:700;color:var(--pink-text);cursor:pointer;min-width:420px;text-align:center;
  box-shadow:var(--shadow);transition:transform .1s;
}
.choice-btn:hover{background:#fff0f5;transform:translateY(-2px);}
.choice-btn:active{transform:translateY(2px);}

/* ---------- 通用面板（经营画面） ---------- */
.panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:1080px;max-height:600px;background:var(--panel);border:5px solid #fff;
  border-radius:26px;box-shadow:0 12px 0 rgba(120,90,60,.22);z-index:35;
  display:flex;flex-direction:column;padding:24px 28px;
}
.panel h2{font-size:30px;color:var(--pink-text);margin-bottom:6px;text-align:center;}
.panel .sub{font-size:19px;color:var(--ink-soft);text-align:center;margin-bottom:14px;}
.panel-body{flex:1;overflow-y:auto;padding:4px;}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:3px dashed #e7d6b6;margin-top:14px;}

/* 物品卡（进货/定价共用） */
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.item-card{
  display:flex;align-items:center;gap:16px;background:var(--cream);border:3px solid #f0e2c4;
  border-radius:18px;padding:14px 18px;cursor:pointer;
}
.item-card.active{border-color:var(--pink-dark);background:#fff0f5;box-shadow:0 0 0 3px rgba(232,122,155,.35);}
.item-card .icon{width:74px;height:74px;flex:none;display:flex;align-items:center;justify-content:center;}
.item-card .icon img{width:100%;height:100%;object-fit:contain;}
.item-card .icon .placeholder.ph-item{width:74px;height:74px;border-radius:14px;}
.item-card .info{flex:1;min-width:0;}
.item-card .nm{font-size:22px;font-weight:700;}
.item-card .meta{font-size:16px;color:var(--ink-soft);margin-top:2px;}
.item-card .ctrl{display:flex;align-items:center;gap:8px;}

/* 数量步进 / 价格输入 */
.stepper{display:flex;align-items:center;gap:6px;}
.stepper button{width:42px;height:42px;border-radius:12px;border:3px solid var(--amber-dark);
  background:var(--amber);font-size:26px;font-weight:700;color:var(--amber-text);cursor:pointer;line-height:1;}
.stepper button:active{transform:translateY(2px);}
.stepper .val{min-width:48px;text-align:center;font-size:24px;font-weight:700;}
.price-input{width:96px;height:46px;border-radius:12px;border:3px solid var(--blue-dark);background:#fff;
  font-size:22px;font-weight:700;text-align:center;color:var(--blue-text);}
.tag-ok{color:var(--green-text);font-weight:700;}
.tag-warn{color:#c2410c;font-weight:700;}

/* 大按钮 */
.btn{
  border:none;border-radius:18px;padding:14px 36px;font-size:24px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .1s;
}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(120,90,60,.18);}
.btn.primary{background:var(--green);color:var(--green-text);border:3px solid var(--green-dark);}
.btn.amber{background:var(--amber);color:var(--amber-text);border:3px solid var(--amber-dark);}
.btn.pink{background:var(--pink);color:#fff;border:3px solid var(--pink-dark);}
.btn.ghost{background:#fff;color:var(--ink-soft);border:3px solid #e7d6b6;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.budget{font-size:22px;font-weight:700;color:var(--amber-text);}

/* ---------- 标题/开始画面 ---------- */
.title-screen{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;}
.title-screen .logo{
  font-size:74px;font-weight:800;color:#fff;text-align:center;line-height:1.1;
  text-shadow:0 4px 0 var(--pink-dark),0 8px 14px rgba(0,0,0,.35);
}
.title-screen .tagline{font-size:24px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4);margin-top:-8px;}
.title-menu{display:flex;flex-direction:column;gap:18px;margin-top:10px;}
.title-menu .btn{min-width:300px;}

/* ---------- 营业画面：顾客气泡 / 飘字 ---------- */
.shop-stage-hint{position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:25;
  background:rgba(255,253,247,.92);border:3px solid #fff;border-radius:16px;padding:8px 22px;
  font-size:22px;font-weight:700;color:var(--ink);box-shadow:var(--shadow);}
.customer-card{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:28;
  width:520px;background:rgba(255,253,247,.97);border:4px solid #fff;border-radius:22px;
  padding:22px 26px;box-shadow:0 10px 0 rgba(120,90,60,.22);text-align:center;
  transition:transform .25s ease,opacity .25s ease;
}
.customer-card.show{transform:translate(-50%,-50%) scale(1);opacity:1;}
.customer-card .who{font-size:22px;font-weight:700;color:var(--pink-text);margin-bottom:8px;}
.customer-card .want{font-size:26px;line-height:1.5;color:var(--ink);}
.customer-card .result{margin-top:14px;font-size:26px;font-weight:800;min-height:34px;}
.result.deal{color:var(--green-text);}
.result.miss{color:#c2410c;}
.shop-btns{position:absolute;bottom:30px;right:30px;z-index:30;display:flex;gap:14px;}

/* 结算 */
.settle-row{display:flex;justify-content:space-between;font-size:24px;padding:12px 6px;border-bottom:2px dashed #ecdcbd;}
.settle-row .v{font-weight:800;}
.settle-total{font-size:30px;font-weight:800;color:var(--amber-text);}

/* 淡入 */
.fade-in{animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.float-up{animation:floatUp .9s ease forwards;}
@keyframes floatUp{from{opacity:1;transform:translate(-50%,-50%);}to{opacity:0;transform:translate(-50%,calc(-50% - 46px));}}

/* ---------- 开店准备 Hub ---------- */
.hub-status{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;margin-bottom:14px;}
.hub-status .hs{background:var(--cream);border:2px solid #f0e2c4;border-radius:12px;padding:8px 14px;font-size:17px;color:var(--ink-soft);}
.hub-status .hs b{color:var(--ink);font-size:20px;margin-right:4px;}
.hub-order{background:#fff7e6;border:2px dashed var(--amber-dark);border-radius:14px;padding:12px 16px;margin-bottom:14px;font-size:17px;color:var(--amber-text);text-align:center;line-height:1.6;}
.hub-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.hub-action{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 10px;border-radius:18px;border:3px solid;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s;}
.hub-action:active{transform:translateY(3px);}
.hub-action .ha-t{font-size:24px;font-weight:700;}
.hub-action .ha-s{font-size:15px;opacity:.85;}
.hub-action.amber{background:var(--amber);border-color:var(--amber-dark);color:var(--amber-text);}
.hub-action.blue{background:var(--blue);border-color:var(--blue-dark);color:var(--blue-text);}
.hub-action.purple{background:var(--purple);border-color:#a97fd4;color:#5a3a85;}
.hub-action.pink{background:var(--pink);border-color:var(--pink-dark);color:#fff;}

/* ---------- 装修 / 雇工 ---------- */
.decor-cur{font-size:22px;text-align:center;margin-bottom:14px;font-weight:700;color:var(--ink);}
.decor-next{background:var(--cream);border:3px solid #f0e2c4;border-radius:16px;padding:16px 20px;font-size:18px;line-height:1.6;}
.decor-next .dn-name{font-size:22px;font-weight:700;color:#5a3a85;margin-bottom:6px;}
.decor-next .dn-desc{color:var(--ink-soft);margin-bottom:8px;}
.decor-next .dn-cost{font-weight:700;color:var(--amber-text);}
.hire-info{font-size:21px;line-height:2.1;text-align:center;}
.hire-info b{color:var(--ink);}

/* ---------- 顾客头像 ---------- */
.customer-card .avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 10px;border:4px solid #fff;box-shadow:0 4px 0 rgba(120,90,60,.2);background:var(--cream);}
.customer-card .avatar img,.customer-card .avatar .placeholder{width:100%;height:100%;object-fit:cover;display:block;}
.placeholder.ph-portrait{border-radius:50%;font-size:14px;padding:4px;}

/* ---------- 成就弹窗 ---------- */
.achv-wrap{position:absolute;top:86px;right:24px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;}
.achv-toast{display:flex;align-items:center;gap:10px;background:var(--panel);border:3px solid var(--amber-dark);border-radius:16px;padding:10px 18px;box-shadow:var(--shadow);font-size:18px;color:var(--ink);transform:translateX(130%);opacity:0;transition:transform .35s ease,opacity .35s ease;}
.achv-toast.show{transform:translateX(0);opacity:1;}
.achv-toast .achv-ico{font-size:28px;}
.achv-toast b{color:var(--amber-text);}

/* ---------- 成就一览 ---------- */
.achv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.achv-card{display:flex;align-items:center;gap:14px;background:var(--cream);border:3px solid #f0e2c4;border-radius:16px;padding:12px 16px;opacity:.5;}
.achv-card.got{opacity:1;background:#fff7e6;border-color:var(--amber-dark);}
.achv-card .ac-ico{font-size:34px;flex:none;}
.achv-card .ac-n{font-size:20px;font-weight:700;color:var(--ink);}
.achv-card .ac-d{font-size:15px;color:var(--ink-soft);margin-top:2px;}

/* ---------- 自由营业 · 打烊额外提示 ---------- */
.endless-extra{background:#fff7e6;border:2px dashed var(--amber-dark);border-radius:12px;padding:10px 16px;margin-bottom:10px;font-size:18px;color:var(--amber-text);text-align:center;}