/* ============ 游戏界面：开始页 / 主界面 / 结算 / 结局 ============ */

/* ---------- 屏幕容器 ---------- */
.screen{
  max-width:1080px;margin:0 auto;padding:26px 18px 60px;
  animation:page-turn .3s ease both;
}
.game{max-width:1180px;margin:0 auto;padding:0 16px 40px;}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 4px;
  background:linear-gradient(var(--paper) 78%, rgba(250,244,232,0));
}
.topbar .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-title);font-size:17px;font-weight:700;}
.topbar .brand svg{width:22px;height:22px;color:var(--honey);}
.topbar .spacer{flex:1;}
.topbar .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.age-pill{
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:4px 14px;box-shadow:var(--shadow-sm);
}
.age-pill .age{font-family:var(--font-title);font-size:18px;font-weight:700;}
.age-pill .year{font-size:12px;color:var(--ink-faint);}
.stage-chip{background:#eef3f8;border-color:#cfdeeb;color:#3f6285;}
.topbar .tools{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- 主布局 ---------- */
.board{
  display:grid;gap:16px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"scene" "play" "side";
  margin-top:6px;
}
.play-col{grid-area:play;display:flex;flex-direction:column;gap:16px;min-width:0;}
.side-col{grid-area:side;display:flex;flex-direction:column;gap:16px;min-width:0;}
.scene-slot{grid-area:scene;min-width:0;}
@media (min-width:900px){
  .board{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:"scene scene" "play side";
    align-items:start;
  }
}

/* ---------- 场景插画 ---------- */
.scene-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);background:var(--card);
}
.scene-photo{
  position:relative;
  width:100%;
  aspect-ratio:400/210;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.scene-tint{position:absolute;inset:0;pointer-events:none;}
.scene-weather{position:absolute;inset:0;width:100%;height:100%;}
.scene-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-top:1px dashed var(--line);
  background:var(--card);
}
.scene-foot .weather-name{font-family:var(--font-title);font-weight:700;font-size:15px;}
.scene-foot .weather-desc{font-size:13px;color:var(--ink-soft);flex:1;min-width:180px;}
.postmark{
  position:absolute;top:12px;right:12px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 9px;border:2px solid rgba(169,90,60,.5);border-radius:2px;
  color:rgba(150,78,52,.75);font-size:10px;line-height:1.25;
  transform:rotate(8deg);background:rgba(255,253,247,.55);
  letter-spacing:.08em;
}
.postmark .pm-year{font-family:var(--font-title);font-size:13px;font-weight:700;letter-spacing:.02em;}
.scene-paused{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(250,244,232,.55);color:var(--ink-soft);
  font-family:var(--font-title);font-size:16px;letter-spacing:.3em;
}
/* 场景内动画 */
.anim-cloud{animation:drift-x 26s linear infinite;}
.anim-cloud.slow{animation-duration:38s;}
.anim-rain line{animation:fall-y 1.1s linear infinite;}
.anim-snow circle{animation:fall-y 4s linear infinite;}
.anim-sun{transform-origin:center;animation:spin-slow 60s linear infinite;}
.anim-bob{animation:float-y 4s ease-in-out infinite;}
.anim-wave{animation:glow-pulse 5s ease-in-out infinite;}

/* ---------- 状态区 ---------- */
.stat-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:8px 0;}
.stat-row + .stat-row{border-top:1px dashed var(--line);}
.stat-ico{
  width:34px;height:34px;border-radius:2px;display:grid;place-items:center;flex:none;
  background:var(--paper-2);border:1px solid var(--line);
}
.stat-ico svg{width:18px;height:18px;}
.stat-main{min-width:0;}
.stat-head{display:flex;align-items:baseline;gap:8px;}
.stat-name{font-size:13px;color:var(--ink-soft);}
.stat-val{font-family:var(--font-title);font-size:17px;font-weight:700;margin-left:auto;}
.stat-desc{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar{height:7px;border-radius:2px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;margin-top:5px;}
.bar > i{display:block;height:100%;border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.3,1);}
.stat-delta{font-size:12px;font-weight:700;font-family:var(--font-ui);}
.stat-delta.up{color:#3f6b48;}
.stat-delta.down{color:#8f4340;}

/* ---------- 事件卡 ---------- */
.event-card{position:relative;}
.event-card::after{
  content:"";position:absolute;left:16px;right:16px;top:-9px;height:18px;
  background:var(--honey);opacity:.18;border-radius:4px;transform:rotate(-.6deg);
  pointer-events:none;
}
.event-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-faint);margin-bottom:4px;}
.event-title{font-family:var(--font-title);font-size:19px;line-height:1.4;margin-bottom:6px;}
.event-text{color:var(--ink-soft);font-size:14.5px;}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.choice{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--card);padding:12px 14px;font-family:var(--font-ui);
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.choice:hover:not(:disabled){border-color:var(--honey);transform:translateY(-1px);}
.choice[aria-pressed="true"]{border-color:var(--honey);background:#fdf6e6;box-shadow:inset 0 0 0 1px var(--honey);}
.choice .c-text{font-size:14.5px;font-weight:600;}
.choice .c-hint{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.choice[disabled]{opacity:.45;cursor:not-allowed;}

/* ---------- 行动区 ---------- */
.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.action{
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--card);
  padding:12px;cursor:pointer;font-family:var(--font-ui);
  transition:border-color .12s ease,transform .12s ease,background .12s ease;
  min-height:96px;
}
.action:hover:not(:disabled){border-color:var(--sage);transform:translateY(-2px);}
.action[aria-pressed="true"]{border-color:var(--sage);background:#eef5ee;box-shadow:inset 0 0 0 1px var(--sage);}
.action:disabled{opacity:.5;cursor:not-allowed;}
.action .a-ico{width:30px;height:30px;border-radius:2px;display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--line);}
.action .a-ico svg{width:17px;height:17px;}
.action .a-name{font-size:14px;font-weight:700;}
.action .a-tag{font-size:12px;color:var(--ink-faint);line-height:1.45;}
.action .a-cost{font-size:11px;color:var(--rose);margin-top:auto;}
.settle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}
.settle-hint{font-size:12.5px;color:var(--ink-faint);flex:1;min-width:160px;}
.repeat-warn{font-size:12.5px;color:#a8713a;background:#fdf3e2;border:1px solid #eed9ae;border-radius:2px;padding:6px 10px;margin-top:10px;}

/* ---------- 手账时间线 ---------- */
.journal-list{display:flex;flex-direction:column;gap:0;max-height:420px;overflow:auto;padding-right:4px;}
.journal-item{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0;}
.journal-item + .journal-item{border-top:1px dashed var(--line);}
.j-year{font-family:var(--font-title);font-size:13px;color:var(--ink-soft);text-align:right;line-height:1.3;}
.j-year b{display:block;font-size:15px;color:var(--ink);}
.j-body{min-width:0;}
.j-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.j-text{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.j-deltas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.j-tag{font-size:11px;color:var(--ink-faint);border:1px solid var(--line);border-radius:2px;padding:1px 8px;}
.journal-empty{font-size:13px;color:var(--ink-faint);padding:6px 0;}

/* ---------- 年末结算 ---------- */
.settle-modal{width:min(620px,100%);}
.settle-weather{
  display:flex;align-items:center;gap:12px;
  background:var(--paper-2);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  padding:10px 14px;margin-bottom:14px;font-size:13.5px;color:var(--ink-soft);
}
.settle-weather svg{width:22px;height:22px;color:var(--honey);flex:none;}
.delta-list{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;}
.delta-item{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:2px;padding:4px 11px;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:var(--card);
  animation:delta-pop .3s ease both;
}
.delta-item svg{width:14px;height:14px;}
.delta-item.up{background:#e8f3ea;border-color:#c3ddc8;color:#3f6b48;}
.delta-item.down{background:#fbeceb;border-color:#e9c6c2;color:#8f4340;}
.feedback-list{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.feedback-list li{display:flex;gap:8px;font-size:13.5px;color:var(--ink-soft);}
.feedback-list li::before{content:"·";color:var(--honey);font-weight:700;}
.feedback-list li b{color:var(--ink);font-weight:600;}
.settle-journal{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px;}
.settle-journal .j-title{font-size:14px;}

/* ---------- 开始页 ---------- */
.page-bg{
  position:fixed;inset:0;z-index:-1;
  background-size:cover;background-position:center;
}
.page-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(250,244,232,.88) 0%,rgba(250,244,232,.82) 50%,rgba(250,244,232,.92) 100%);
}
.start-hero{text-align:center;padding:14px 0 4px;}
.start-hero .kicker{font-size:12.5px;letter-spacing:.35em;color:var(--ink-faint);}
.start-hero h1{font-size:clamp(30px,6vw,46px);margin:8px 0 6px;}
.start-hero .sub{color:var(--ink-soft);font-size:14.5px;max-width:620px;margin:0 auto;}
.start-hero .deco{margin:14px auto 0;width:min(520px,92%);}
.start-hero .deco-img{
  width:100%;height:auto;display:block;border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.e-hero-img{margin:14px auto 0;max-width:520px;}
.e-hero-img img{
  width:100%;height:auto;display:block;border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.start-body{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin-top:18px;}
@media (min-width:860px){.start-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;color:var(--ink-soft);font-weight:600;}
.field input[type="text"]{
  font-family:var(--font-ui);font-size:15px;color:var(--ink);
  padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--card);min-height:44px;
}
.field input[type="text"]:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 3px rgba(238,193,99,.25);}
.style-chips{display:flex;flex-wrap:wrap;gap:8px;}
.style-chip{
  border:1px solid var(--line-strong);background:var(--card);border-radius:2px;
  padding:7px 14px;font-size:13px;cursor:pointer;font-family:var(--font-ui);color:var(--ink-soft);
  min-height:36px;
}
.style-chip[aria-pressed="true"]{border-color:var(--honey);background:#fdf6e6;color:var(--ink);font-weight:600;}
.trait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;max-height:390px;overflow:auto;padding:2px;}
.trait{
  text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);padding:9px 11px;cursor:pointer;font-family:var(--font-ui);
  transition:border-color .12s ease,background .12s ease;
}
.trait:hover{border-color:var(--honey);}
.trait[aria-pressed="true"]{border-color:var(--honey);background:#fdf6e6;box-shadow:inset 0 0 0 1px var(--honey);}
.trait .t-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:5px;}
.trait .t-name .t-star{color:var(--honey);font-size:11px;}
.trait .t-desc{font-size:11.5px;color:var(--ink-faint);line-height:1.45;margin-top:2px;}
.start-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.start-note{font-size:12.5px;color:var(--ink-faint);}

/* ---------- 结局页 ---------- */
.ending-hero{text-align:center;padding:10px 0 0;}
.ending-hero .e-kicker{font-size:12.5px;letter-spacing:.3em;color:var(--ink-faint);}
.ending-hero h1{font-size:clamp(28px,5.5vw,42px);margin:8px 0 4px;}
.ending-hero .e-style{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  background:#eef3f8;border:1px solid #cfdeeb;color:#3f6285;
  border-radius:2px;padding:5px 16px;font-size:13.5px;font-weight:600;
}
.ending-body{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin-top:16px;}
@media (min-width:900px){.ending-body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}}
.ending-para{font-size:14.5px;color:var(--ink-soft);margin-bottom:10px;}
.ending-para b{color:var(--ink);}
.ending-para.poetic{font-family:var(--font-title);font-size:16px;color:var(--ink);}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.final-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-top:8px;}
.final-stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;text-align:center;}
.final-stat .fs-name{font-size:11.5px;color:var(--ink-faint);}
.final-stat .fs-val{font-family:var(--font-title);font-size:19px;font-weight:700;}
.moments{display:flex;flex-direction:column;gap:8px;}
.moment{border-left:3px solid var(--honey);padding:2px 0 2px 12px;}
.moment .m-year{font-size:11.5px;color:var(--ink-faint);}
.moment .m-title{font-size:13.5px;font-weight:700;}
.moment .m-text{font-size:12.5px;color:var(--ink-soft);}
.ending-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:22px 0 10px;}
.ending-note{text-align:center;font-size:12.5px;color:var(--ink-faint);}

/* ---------- 阶段徽章：名称 + 描述（小屏隐藏描述） ---------- */
.stage-chip .stage-blurb::before{ content:" · "; }
.stage-chip .stage-blurb{ overflow:hidden; text-overflow:ellipsis; }

/* ---------- 帮助弹窗 ---------- */
.help-list{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-soft);}
.help-list b{color:var(--ink);}
.help-list li{display:flex;gap:9px;}
.help-list li::before{content:"◆";color:var(--honey);font-size:11px;line-height:1.7;}

/* ============ 手机端适配（≤ 640px） ============ */
@media (max-width: 640px){
  :root{ --radius:3px; --radius-sm:2px; }
  body{ font-size:14.5px; }
  .game{ padding:0 12px 24px; }
  .screen{ padding:16px 12px 44px; }
  .card{ padding:15px; }

  /* 顶栏：更紧凑，工具按钮收成图标 */
  .topbar{ gap:8px; padding:8px 2px; }
  .topbar .brand{ font-size:15px; gap:7px; }
  .topbar .brand svg{ width:20px; height:20px; }
  .topbar .meta{ gap:6px; min-width:0; flex-basis:100%; }  /* 手机端：年龄/阶段独占一行 */
  .age-pill{ padding:3px 11px; }
  .age-pill .age{ font-size:16px; }
  .stage-chip{ max-width:100%; }
  .stage-chip .stage-blurb{ display:none; }
  .topbar .tools{ gap:6px; }
  .topbar .tools .btn-label{ display:none; }
  .topbar .tools .btn{
    width:40px; min-height:40px; padding:0; border-radius:50%;
  }

  /* 场景：圆角小一点，邮戳和文字都缩小 */
  .scene-card{ border-radius:var(--radius); }
  .postmark{ top:8px; right:8px; padding:4px 7px; font-size:9px; }
  .postmark .pm-year{ font-size:11px; }
  .scene-foot{ padding:9px 12px; gap:8px; }
  .scene-foot .weather-name{ font-size:14px; }
  .scene-foot .weather-desc{ font-size:12.5px; min-width:0; }

  /* 状态：描述允许两行，不再截断成一行 */
  .stat-row{ padding:7px 0; }
  .stat-desc{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .stat-val{ font-size:16px; }

  /* 事件卡 */
  .event-title{ font-size:17px; }
  .event-text{ font-size:14px; }
  .choice{ padding:11px 12px; }
  .choice .c-text{ font-size:14px; }

  /* 行动：固定两列，保证拇指好点 */
  .actions-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; }
  .action{ min-height:92px; padding:11px; }
  .action .a-name{ font-size:13.5px; }
  .action .a-tag{ font-size:11.5px; }

  /* 结算按钮占满一行 */
  .settle-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .settle-row .btn{ width:100%; }
  .settle-hint{ text-align:center; }

  /* 手账 */
  .journal-list{ max-height:54dvh; }
  .journal-item{ grid-template-columns:46px 1fr; }
  .j-title{ font-size:13px; }
  .j-text{ font-size:12px; }

  /* 弹窗改成底部抽屉，按钮整行 */
  .modal-backdrop{ padding:0; align-items:flex-end; }
  .modal{
    width:100%; max-height:92dvh;
    border-radius:3px 20px 0 0; border-bottom:none;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    animation:sheet-up .26s cubic-bezier(.2,.9,.3,1.05) both;
  }
  .modal-title{ font-size:18px; }
  .modal-actions{ flex-direction:column-reverse; gap:8px; }
  .modal-actions .btn{ width:100%; }
  .settle-weather{ font-size:13px; padding:9px 12px; }
  .delta-list{ gap:6px; }
  .delta-item{ font-size:12px; padding:3px 9px; }

  /* 开始页 */
  .start-hero h1{ font-size:30px; }
  .start-hero .sub{ font-size:13.5px; }
  .trait-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); max-height:48dvh; gap:7px; }
  .trait{ padding:8px 10px; }
  .start-actions{ flex-direction:column; align-items:stretch; }
  .start-actions .btn{ width:100%; }
  .start-actions .start-note{ text-align:center; }

  /* 结局页 */
  .ending-hero h1{ font-size:27px; }
  .final-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ending-actions{ flex-direction:column; }
  .ending-actions .btn{ width:100%; }
  .moment .m-title{ font-size:13px; }
}

/* 极窄屏（≤ 380px）：行动改单列，避免文字挤压 */
@media (max-width: 380px){
  .actions-grid{ grid-template-columns:minmax(0, 1fr); }
  .action{ min-height:0; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
  .action .a-ico{ width:26px; height:26px; }
  .action .a-name{ font-size:13.5px; }
  .action .a-tag{ font-size:11.5px; flex:1 1 100%; }
  .action .a-cost{ font-size:11px; }
}

@keyframes sheet-up{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }


/* ---------- 浮动停止按钮（自动模式） ---------- */
.auto-fab{
  position:fixed;right:18px;bottom:24px;z-index:70;
  display:none;align-items:center;gap:6px;
  background:var(--rose);color:#fff;border:none;border-radius:3px;
  padding:10px 16px;font-size:13.5px;font-weight:700;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.auto-fab svg{width:15px;height:15px;}
.auto-fab:hover{background:#c97070;}

/* ---------- 随机卷边 ---------- */
.card,.scene-card{position:relative;}
.curl-1::after,.curl-2::after,.curl-3::after,.curl-4::after{
  content:'';position:absolute;pointer-events:none;
  width:0;height:0;border-style:solid;
}
.curl-1::after{top:0;right:0;border-width:0 14px 14px 0;border-color:transparent #e8dcc4 transparent transparent;}
.curl-2::after{top:0;left:0;border-width:14px 14px 0 0;border-color:#e8dcc4 transparent transparent transparent;}
.curl-3::after{bottom:0;right:0;border-width:14px 0 0 14px;border-color:transparent transparent transparent #e8dcc4;}
.curl-4::after{bottom:0;left:0;border-width:0 14px 14px 0;border-color:transparent #e8dcc4 transparent transparent;}

/* ---------- 人生风格不换行 ---------- */
.e-style{white-space:nowrap;}

/* ---------- 成就标签加粗 ---------- */
.tag-cloud .chip{font-weight:700;}
.final-stat .fs-val{font-weight:700;}