/* ============================================================
   base.css — 色板 / reset / 语义类 / 按钮体系 / 标题屏 / toast / debug
   《我才是策划!!!!!》v2(v1 资产整体移植)
   ============================================================ */

:root{
  --bg:#0e1420;
  --panel:#161e2e;
  --line:#26324a;
  --text:#c9d4e8;
  --dim:#7d8aa5;
  --gold:#f0c96a;
  --green:#6fd08c;
  --red:#e5605c;
  --blue:#6ea8fe;
  --mono:'Consolas';
  /* 派生变量(不新增色相,均由色板衍生的透明度/加深) */
  --panel-hi:#1c2639;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --gold-glow:0 0 18px rgba(240,201,106,.45);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(130% 90% at 50% -10%, #131c2d 0%, var(--bg) 58%) fixed,
    var(--bg);
  color:var(--text);
  font:14px/1.6 "PingFang SC","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:where(img,svg,video){display:block;max-width:100%}
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,dl,dd,pre){margin:0}
:where(ul,ol){padding:0;list-style:none}
:where(a){color:var(--blue);text-decoration:none}
:where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(input,select,textarea){font:inherit;color:inherit}
:where(:focus-visible){outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:rgba(240,201,106,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0f18}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3a4a6b}

/* ---------- :where() 兜底排版(零特异性,任何注入样式都能覆盖) ---------- */
:where(#app :is(h1,h2,h3,h4)){line-height:1.3;font-weight:700}
:where(#modal-box,#event-feed,#hand-cards,#joker-strip,#toast) :is(h1,h2,h3,h4){font-size:1.1em}
:where(#modal-box) :where(p){margin:.35em 0;line-height:1.75}
:where(#modal-box) :where(small,.small,.note,.sub,.dim,.hint){color:var(--dim);font-size:12px;line-height:1.6}
:where(#modal-box) :where(hr){border:0;border-top:1px solid var(--line);margin:14px 0}
:where(#modal-box) :where(table){border-collapse:collapse}
:where(#modal-box) :where(td,th){padding:6px 10px;vertical-align:middle}
:where(#modal-box) :where(code){font-family:var(--mono),monospace}

/* 通用情绪色(供引擎在任意注入节点使用) */
:where(.good,.pos){color:var(--green)}
:where(.bad,.neg,.crisis){color:var(--red)}
:where(.gold,.warn){color:var(--gold)}
:where(.mono){font-family:var(--mono),monospace;font-variant-numeric:tabular-nums}

/* ---------- 可见性语义(SPEC §3:只用 .hidden/.active/.locked/.disabled) ---------- */
.hidden{display:none !important}
.screen{display:none}
.screen.active{display:flex}
.locked{opacity:.5;filter:saturate(.35) brightness(.85);cursor:not-allowed}
button.locked::before,.btn.locked::before,.act-btn.locked::before{
  content:"🔒";font-size:.8em;margin-right:.45em;opacity:.75;filter:grayscale(1)
}
button.locked,button.disabled{pointer-events:none}
:where(button,.btn,.act-btn,.shop-card,.career-card):not(.locked):not(.disabled){cursor:pointer}
.disabled{opacity:.4;filter:grayscale(.8);pointer-events:none}

/* ---------- 按钮体系 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:9px 22px;border-radius:8px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  color:var(--text);font-weight:600;font-size:14px;letter-spacing:.05em;
  box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease;
  user-select:none;
}
.btn:not(.locked):not(.disabled):hover{
  transform:translateY(-2px);border-color:#3a4a6b;
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.btn:not(.locked):not(.disabled):active{transform:translateY(0);transition-duration:.06s}

.btn-primary{
  border-color:#f6df9d;
  background:linear-gradient(180deg,#f6d784,#dca63e);
  color:#241a05;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:0 3px 0 #8a6a22,0 6px 18px rgba(240,201,106,.28);
}
.btn-primary:not(.locked):not(.disabled):hover{
  filter:brightness(1.07);
  box-shadow:0 3px 0 #8a6a22,0 8px 24px rgba(240,201,106,.42);
  border-color:#ffe9b5;
}
.btn-primary:not(.locked):not(.disabled):active{box-shadow:0 1px 0 #8a6a22,0 3px 10px rgba(240,201,106,.3)}

.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--dim);
}
.btn-ghost:not(.locked):not(.disabled):hover{color:var(--text);border-color:var(--dim)}

.btn-big{font-size:17px;padding:13px 32px;border-radius:10px;letter-spacing:.08em}

/* 底部行动条按钮(冷职场芯片) */
.act-btn{
  display:inline-flex;align-items:center;gap:.4em;
  height:40px;padding:0 18px;border-radius:8px;
  background:#121a2a;border:1px solid var(--line);
  color:var(--dim);font-size:13px;letter-spacing:.08em;font-weight:600;
  transition:transform .16s ease,color .16s ease,border-color .16s ease,background .16s ease;
  white-space:nowrap;
}
.act-btn:not(.locked):not(.disabled):hover{
  transform:translateY(-1px);
  color:var(--text);
  border-color:rgba(240,201,106,.55);
  background:#17203399;
}
.act-btn.active{color:var(--gold);border-color:rgba(240,201,106,.6)}

/* ============================================================
   标题屏 —— 大字呐喊(v1 资产:伪元素重绘 + 五枚错位感叹号)
   ============================================================ */
#title-screen{
  --logo-size:clamp(44px,7vw,86px);
  position:fixed;inset:0;z-index:10;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:left;
  background:
    radial-gradient(1100px 620px at 50% 26%, rgba(240,201,106,.075), transparent 62%),
    radial-gradient(900px 540px at 50% 115%, rgba(110,168,254,.06), transparent 60%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(4,7,12,.85) 100%),
    var(--bg);
}
#title-screen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(240,201,106,.35) 30%,rgba(240,201,106,.35) 70%,transparent);
}
.title-inner{position:relative;padding:0}

#title-logo{
  position:relative;
  margin:0;
  font-size:var(--logo-size);
  font-weight:900;
  line-height:1.12;
  white-space:nowrap;
  color:transparent;
}
#title-logo::before{
  content:"我才是策划";
  position:absolute;left:0;top:0;
  background:linear-gradient(180deg,#f7f9ff 12%,var(--text) 55%,#8fa0c0 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  transform:rotate(-2deg);
  text-shadow:0 5px 0 rgba(0,0,0,.55),0 0 36px rgba(240,201,106,.15);
  animation:logo-slam .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes logo-slam{
  from{opacity:0;transform:rotate(-2deg) scale(1.16)}
  to{opacity:1;transform:rotate(-2deg) scale(1)}
}
#title-logo::after,
.title-inner::before,.title-inner::after,
#title-sub::before,#title-sub::after{
  position:absolute;
  font-family:var(--mono),monospace;
  font-weight:900;line-height:1;
  transform:rotate(var(--mr,0deg));
  animation:mark-in .5s cubic-bezier(.2,1.6,.4,1) both;
}
#title-logo::after{
  content:"!";--mr:-14deg;
  left:calc(var(--logo-size)*5.08);top:calc(var(--logo-size)*.47);
  font-size:calc(var(--logo-size)*.55);
  color:rgba(240,201,106,.45);
  animation-delay:.1s;
}
.title-inner::before{
  content:"!";--mr:9deg;
  left:calc(var(--logo-size)*5.64);top:calc(var(--logo-size)*.35);
  font-size:calc(var(--logo-size)*.66);
  color:rgba(240,201,106,.62);
  animation-delay:.16s;
}
.title-inner::after{
  content:"!";--mr:-11deg;
  left:calc(var(--logo-size)*6.28);top:calc(var(--logo-size)*.36);
  font-size:calc(var(--logo-size)*.8);
  color:rgba(240,201,106,.82);
  animation-delay:.22s;
}
#title-sub::before{
  content:"!";--mr:13deg;
  left:calc(var(--logo-size)*7.0);top:calc(var(--logo-size)*.26);
  font-size:calc(var(--logo-size)*.95);
  color:var(--gold);
  text-shadow:0 0 18px rgba(240,201,106,.35);
  animation-delay:.28s;
}
#title-sub::after{
  content:"!";--mr:-16deg;
  left:calc(var(--logo-size)*7.82);top:calc(var(--logo-size)*.16);
  font-size:calc(var(--logo-size)*1.12);
  color:var(--red);
  text-shadow:0 0 28px rgba(229,96,92,.55),0 4px 0 rgba(0,0,0,.5);
  animation-delay:.34s;
}
@keyframes mark-in{
  from{opacity:0;transform:rotate(var(--mr,0deg)) translateY(calc(var(--logo-size)*-.45)) scale(2)}
  to{opacity:1;transform:rotate(var(--mr,0deg)) translateY(0) scale(1)}
}

#title-sub{margin-top:16px;color:var(--dim);font-size:15px;letter-spacing:.32em}
#title-actions{display:flex;gap:14px;justify-content:flex-start;margin-top:36px}
.title-note{margin-top:26px;color:var(--dim);font-size:12px;opacity:.8;font-style:italic}
.title-hint{margin-top:8px;color:var(--dim);font-size:11px;opacity:.5;font-family:var(--mono),monospace}

/* ============================================================
   #toast —— 顶部滑入
   ============================================================ */
#toast{
  position:fixed;top:16px;left:50%;z-index:1000;
  max-width:72vw;
  padding:10px 22px;border-radius:9px;
  background:linear-gradient(180deg,#1e2941,#151e30);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  color:var(--text);font-size:13px;line-height:1.6;text-align:center;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;
  transform:translate(-50%,-180%);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.15),opacity .25s ease;
}
#toast.show,#toast.active{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   #debug-panel —— ` 呼出的控制台
   ============================================================ */
#debug-panel{
  position:fixed;left:12px;bottom:12px;z-index:1200;
  width:min(360px,86vw);max-height:44vh;
  display:flex;flex-direction:column;
  background:rgba(5,9,16,.94);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);
  font-family:var(--mono),monospace;
}
.debug-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.3em;color:var(--dim);
}
#btn-reset-save{
  font-family:inherit;font-size:10px;letter-spacing:.05em;
  padding:2px 8px;border:1px solid var(--red);border-radius:4px;color:var(--red);
  transition:background .15s ease;
}
#btn-reset-save:hover{background:rgba(229,96,92,.15)}
#debug-state{
  margin:0;padding:8px 10px;overflow:auto;
  font-size:10.5px;line-height:1.55;color:#7ce39b;
  text-shadow:0 0 6px rgba(111,208,140,.25);
  white-space:pre-wrap;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}