/* =========================================================
   像素小镇 · 梦想经营   —   UI 样式
   风格锚点：开罗游戏式的奶油纸感面板 + 深棕描边 + 橙黄强调
   ========================================================= */

:root{
  --ink:#2A2018;
  --ink2:#5A4632;
  --paper:#FBF3DF;
  --paper2:#F2E5C8;
  --paper3:#E6D5B0;
  --line:#3B2C1E;
  --accent:#FF6B4A;
  --accent-d:#C9482C;
  --gold:#FFD93D;
  --gold-d:#D9A521;
  --green:#6BBF59;
  --green-d:#3E8B3A;
  --blue:#4F9FE0;
  --sky:#8FD0E8;
  --shadow:0 3px 0 rgba(0,0,0,.28);
  --r:10px;
  --panel-w:250px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

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

body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 50% -10%, #A8DDF0 0%, #7FC3DE 42%, #4E93B8 100%) fixed;
  color:var(--ink);
  overflow:hidden;
  font-size:14px;
  user-select:none;
}

#app{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:minmax(0,1fr);   /* 关键：防止子项把宽度撑破 */
  gap:8px;
  padding:8px;
  overflow:hidden;
}

/* grid 子项默认 min-width:auto，长内容（如日志）会撑破布局 —— 全部压回 0 */
#topbar, #logbar, #main, #stage { min-width:0; }

/* ================= 通用面板 ================= */
.panel{
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}

.panel-head{
  display:flex; align-items:baseline; gap:6px;
  padding:7px 10px;
  background:linear-gradient(180deg,var(--paper2),var(--paper3));
  border-bottom:3px solid var(--line);
  flex:0 0 auto;
}
.panel-head h2{margin:0;font-size:14px;letter-spacing:.5px}
.panel-head .hint{font-size:10px;color:var(--ink2);opacity:.85}

.panel-foot{
  flex:0 0 auto; display:flex; gap:6px; padding:7px;
  border-top:3px dashed var(--paper3);
}

/* ================= 顶栏 ================= */
#topbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:6px 10px;
}

.brand{display:flex;align-items:center;gap:7px;margin-right:4px}
.brand .logo{
  font-size:22px;width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--gold);
  border:3px solid var(--line);border-radius:9px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
}
.brand .btext{display:flex;flex-direction:column;line-height:1.05}
.brand b{font-size:15px;letter-spacing:.5px}
.brand i{font-style:normal;font-size:9.5px;color:var(--ink2);letter-spacing:1.5px}

.res{display:flex;gap:6px;flex:1 1 auto;flex-wrap:wrap}
.res-item{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:2.5px solid var(--line);border-radius:8px;
  padding:3px 9px 3px 7px; min-width:104px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.07);
}
.res-item .ico{font-size:15px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.res-item .col{display:flex;flex-direction:column;line-height:1.1}
.res-item .val{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.res-item .rate{font-size:9.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.res-item.coin{background:linear-gradient(180deg,#FFF8DC,#FFE9A8)}
.res-item.fame{background:linear-gradient(180deg,#FFF3E0,#FFD9B0)}
.res-item.insight{background:linear-gradient(180deg,#EAF6FF,#C7E6FF)}
.res-item.badge{background:linear-gradient(180deg,#F6ECFF,#E0CCFF)}

.clock{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.chip{
  font-size:11px;font-weight:700;
  background:var(--paper2);border:2.5px solid var(--line);border-radius:7px;
  padding:3px 8px;white-space:nowrap;
}
.chip.mood{background:#DCF5D0}
.chip.mult{background:#FFE0D6}

/* ================= 主体 ================= */
#main{
  display:grid;
  grid-template-columns:var(--panel-w) minmax(0,1fr) var(--panel-w);
  gap:8px; min-height:0;
}

/* ---- 商店列表 ---- */
.list{overflow-y:auto;overflow-x:hidden;padding:7px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0}
.list::-webkit-scrollbar{width:9px}
.list::-webkit-scrollbar-track{background:var(--paper2);border-radius:6px}
.list::-webkit-scrollbar-thumb{background:var(--paper3);border:2px solid var(--line);border-radius:6px}

.card{
  display:flex;align-items:center;gap:7px;
  background:#fff;border:2.5px solid var(--line);border-radius:9px;
  padding:5px 7px;cursor:pointer;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.06);
  transition:transform .08s, background .1s;
  position:relative; flex:0 0 auto;
}
.card:hover{background:#FFFBF0;transform:translate(-1px,-1px)}
.card.sel{background:linear-gradient(180deg,#FFE9A8,#FFD06B);box-shadow:0 0 0 3px var(--accent), inset 0 -3px 0 rgba(0,0,0,.08)}
.card.locked{opacity:.5;filter:grayscale(.85);cursor:not-allowed}
.card.poor{opacity:.72}
.card .thumb{
  width:56px;height:56px;flex:0 0 auto;
  image-rendering:pixelated;
  background:linear-gradient(180deg,#DCF3FF,#B6E2F5);
  border:2px solid var(--line);border-radius:7px;
}
.card .meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.card .nm{font-size:12.5px;font-weight:700;display:flex;gap:4px;align-items:center}
.card .nm .lv{font-size:9.5px;font-weight:400;color:var(--ink2);background:var(--paper2);border-radius:4px;padding:0 4px}
.card .sub{font-size:10px;color:var(--ink2);line-height:1.25}
.card .price{font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px}
.card .price .ok{color:var(--green-d)}
.card .price .no{color:var(--accent-d)}
.card .lockmsg{font-size:9.5px;color:var(--accent-d);font-weight:700}
.card .key{
  position:absolute;top:3px;right:4px;font-size:8.5px;font-weight:700;
  background:var(--line);color:var(--paper);border-radius:4px;padding:0 3px;
}

/* ---- 舞台 ---- */
#stage{
  position:relative;min-width:0;min-height:0;
  border:3px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  background:#7FC3DE;
  overflow:hidden;
}
#map{
  position:absolute;inset:0;margin:auto;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  cursor:crosshair; touch-action:none; display:block;
}

.stage-hud{position:absolute;left:8px;top:8px;display:flex;gap:5px;flex-wrap:wrap;pointer-events:none}
.stat-chip{
  font-size:11px;font-weight:700;
  background:rgba(251,243,223,.92);border:2.5px solid var(--line);border-radius:7px;
  padding:2px 7px;box-shadow:0 2px 0 rgba(0,0,0,.2);
}

.icon-btn{
  position:absolute;top:8px;width:32px;height:32px;
  font-size:15px;line-height:1;cursor:pointer;
  background:var(--paper);border:2.5px solid var(--line);border-radius:8px;
  box-shadow:0 3px 0 rgba(0,0,0,.25);
  display:grid;place-items:center;padding:0;
}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
#btn-sound{right:46px}
#btn-menu{right:8px}

.tips{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  max-width:92%;
  background:rgba(42,32,24,.82);color:#FFF3DC;
  font-size:11.5px;padding:5px 12px;border-radius:20px;
  border:2px solid rgba(255,214,61,.55);
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s;
}
.tips.hide{opacity:0}

/* 地图飘字（金币 +12 之类） */
#floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floater{
  position:absolute;font-size:13px;font-weight:800;
  color:#FFF8D0;
  text-shadow:0 0 0 #2A2018, 1px 0 0 #2A2018, -1px 0 0 #2A2018, 0 1px 0 #2A2018, 0 -1px 0 #2A2018, 1px 1px 0 #2A2018, -1px -1px 0 #2A2018;
  animation:floatUp 1.15s cubic-bezier(.2,.7,.4,1) forwards;
  will-change:transform,opacity;
}
.floater.fame{color:#FFE066}
.floater.big{font-size:16px;color:#FFD93D}
@keyframes floatUp{
  0%{transform:translate(-50%,0) scale(.6);opacity:0}
  18%{transform:translate(-50%,-8px) scale(1.18);opacity:1}
  32%{transform:translate(-50%,-12px) scale(1)}
  100%{transform:translate(-50%,-46px) scale(1);opacity:0}
}

/* 灵感泡泡 / 金币泡泡 */
#bubble-layer{position:absolute;inset:0;pointer-events:none}
.bubble{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;
  display:grid;place-items:center;font-size:17px;
  border-radius:50%;cursor:pointer;pointer-events:auto;
  background:radial-gradient(circle at 35% 30%, #fff, #FFD93D 55%, #E8A21C);
  border:2.5px solid var(--line);
  box-shadow:0 0 12px rgba(255,217,61,.9);
  animation:bubblePulse 1.1s ease-in-out infinite;
}
.bubble.insight{background:radial-gradient(circle at 35% 30%, #fff, #A8D8FF 55%, #4F9FE0)}
.bubble.gone{animation:bubblePop .28s ease-out forwards}
@keyframes bubblePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes bubblePop{to{transform:scale(1.9);opacity:0}}

/* ---- 详情面板 ---- */
.insp-body{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0}
.insp-body::-webkit-scrollbar{width:9px}
.insp-body::-webkit-scrollbar-track{background:var(--paper2);border-radius:6px}
.insp-body::-webkit-scrollbar-thumb{background:var(--paper3);border:2px solid var(--line);border-radius:6px}

.kv{display:flex;justify-content:space-between;font-size:11.5px;padding:2px 0;border-bottom:1px dotted var(--paper3)}
.kv b{font-variant-numeric:tabular-nums}
.kv .good{color:var(--green-d)}
.kv .bad{color:var(--accent-d)}

.block{background:#fff;border:2.5px solid var(--line);border-radius:9px;padding:7px 8px}
.block h4{margin:0 0 5px;font-size:12px;display:flex;align-items:center;gap:5px}
.block .desc{font-size:10.5px;color:var(--ink2);line-height:1.4}

.big-thumb{
  width:100%;height:150px;image-rendering:pixelated;
  background:linear-gradient(180deg,#DCF3FF,#B6E2F5);
  border:2.5px solid var(--line);border-radius:9px;
  display:block;
}

.btn{
  font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,#FFE28A,#FFC93C);
  border:2.5px solid var(--line);border-radius:8px;
  padding:7px 10px;cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.28);
  transition:transform .06s;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6);transform:none;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn.ghost{background:linear-gradient(180deg,#FFFDF6,#EDE1C4)}
.btn.danger{background:linear-gradient(180deg,#FFA98F,#FF6B4A);color:#3A1508}
.btn.small{font-size:11px;padding:5px 8px;flex:1 1 auto}
.btn.wide{width:100%}
.btn.ghost small{font-weight:400;opacity:.8}

.row{display:flex;gap:6px}

/* ================= 底栏 ================= */
#logbar{
  display:flex;align-items:stretch;gap:8px;
  background:var(--paper);border:3px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:6px 8px;min-height:46px;
  min-width:0;overflow:hidden;
}
.log-scroll{
  flex:1 1 auto;min-width:0;display:flex;gap:14px;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  font-size:11.5px;color:var(--ink2);
}
.log-scroll::-webkit-scrollbar{display:none}
.log-item{white-space:nowrap;display:flex;align-items:center;gap:5px;animation:logIn .35s ease-out}
.log-item .t{opacity:.55;font-size:10px}
.log-item.hot{color:var(--accent-d);font-weight:700}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

.tabs{display:flex;gap:5px;flex:0 0 auto}
.tab{
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ink2);
  background:var(--paper2);border:2.5px solid var(--line);border-radius:8px;
  padding:5px 9px;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.2);
}
.tab.active{background:linear-gradient(180deg,#FFE28A,#FFC93C);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.3), inset 0 -3px 0 rgba(0,0,0,.1)}
.tab:active{transform:translateY(1px)}
.tab .badge-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:4px;vertical-align:1px;
  box-shadow:0 0 0 2px #fff;
}

/* ================= 弹窗 ================= */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,14,10,.55);
  display:grid;place-items:center;padding:16px;
  animation:fadeIn .18s ease-out;
}
.modal[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  width:min(520px,100%);max-height:86vh;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--line);border-radius:12px;
  box-shadow:0 8px 0 rgba(0,0,0,.35);
  animation:popIn .22s cubic-bezier(.34,1.4,.5,1);
}
@keyframes popIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{
  padding:9px 12px;background:linear-gradient(180deg,var(--paper2),var(--paper3));
  border-bottom:3px solid var(--line);border-radius:9px 9px 0 0;
}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:12px;overflow-y:auto;font-size:12.5px;line-height:1.6}
.modal-foot{padding:10px 12px;border-top:3px dashed var(--paper3);display:flex;gap:8px;justify-content:flex-end}

/* 研究项 */
.research-item{
  display:flex;align-items:center;gap:9px;padding:7px;
  border:2.5px solid var(--line);border-radius:9px;background:#fff;margin-bottom:7px;
}
.research-item .ri-ico{font-size:20px;width:32px;text-align:center;flex:0 0 auto}
.research-item .ri-main{flex:1 1 auto;min-width:0}
.research-item .ri-main b{font-size:12.5px}
.research-item .ri-main .d{font-size:10.5px;color:var(--ink2)}
.pips{display:flex;gap:2px;margin-top:3px}
.pip{width:12px;height:6px;border-radius:2px;background:var(--paper3);border:1.5px solid var(--line)}
.pip.on{background:var(--accent)}

/* 成就 */
.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.achv{display:flex;gap:7px;align-items:center;padding:6px;border:2.5px solid var(--line);border-radius:9px;background:#fff}
.achv.locked{opacity:.55;filter:grayscale(.8)}
.achv .ai{font-size:19px;flex:0 0 auto;width:26px;text-align:center}
.achv .an{font-size:11.5px;font-weight:700}
.achv .ad{font-size:10px;color:var(--ink2)}

/* ================= Toast ================= */
#toast-wrap{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{
  background:rgba(42,32,24,.92);color:#FFF3DC;font-size:12.5px;font-weight:700;
  padding:7px 15px;border-radius:20px;border:2.5px solid var(--gold);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
  animation:toastIn .3s cubic-bezier(.34,1.4,.5,1), toastOut .4s ease-in 2.1s forwards;
  max-width:88vw;text-align:center;
}
.toast.good{border-color:var(--green)}
.toast.warn{border-color:var(--accent)}
@keyframes toastIn{from{transform:translateY(-16px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-14px);opacity:0}}

/* ================= 响应式 ================= */
@media (max-width:1080px){ :root{--panel-w:212px} }
@media (max-width:900px){
  #main{grid-template-columns:minmax(0,1fr)}
  #shop, #inspector{
    position:absolute;left:8px;right:8px;bottom:56px;top:auto;
    max-height:min(46vh,330px);z-index:20;
    transform:translateY(14px);opacity:0;pointer-events:none;
    transition:transform .18s, opacity .18s;
  }
  #shop.open, #inspector.open{transform:none;opacity:1;pointer-events:auto}
  #main{position:relative}
  .brand i{display:none}
  .res-item{min-width:88px;padding:2px 7px 2px 6px}
  #topbar{gap:6px;padding:5px 7px}
  .chip{font-size:10px;padding:2px 6px}
  #logbar{flex-direction:column;min-height:auto}
  .log-scroll{min-height:18px}
  .tabs{overflow-x:auto;padding-bottom:2px}
}
@media (max-width:520px){
  .brand .btext{display:none}
  .res-item .rate{font-size:9px}
  .card .thumb{width:36px;height:36px}
}