/* 主持控台、工作人員控台（平板 1280×800 起）。沿用 C 典藏卡牌的卡框與牌桌，資訊用無襯線字，求現場一眼看清楚。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: #020604; }
body { color: #f5ead0; font: 15px/1.5 "PingFang TC", "Noto Sans TC", sans-serif; -webkit-font-smoothing: antialiased;
  position: relative; isolation: isolate; background: none; }
/* KQ04 Codex rendering-only: clip only the backdrop to the original body bounds.
   Keep the original viewport-fixed image and document-height scrolling gradient. */
.console-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0); }
.console-backdrop::before { content: ""; position: fixed; inset: 0; z-index: -2;
  background: url(assets/gen/c-table.jpg) center 30% / cover; transform: translateZ(0); }
.console-backdrop::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(2,6,4,.86), rgba(2,6,4,.97) 60%); }
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-family: "Didot", "Bodoni 72", serif; font-weight: 700; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 18px 24px 10px; }
.top { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(217,177,92,.3); }
.top img { width: 170px; filter: drop-shadow(0 3px 8px #000); }
.top h1 { font: 600 24px "Songti TC", "Noto Serif TC", serif; letter-spacing: .2em; color: #ffe7b0; }
.top .meta { margin-left: auto; text-align: right; font-size: 13px; color: #b6ab90; }
.top .meta b { color: #ffe2a0; font-weight: 600; }
.card { padding: 18px 20px; border: 16px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 16px stretch; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
h2 { font: 600 18px "Songti TC", "Noto Serif TC", serif; letter-spacing: .14em; color: #ffe7b0; margin-bottom: 10px; }
.chip { display: inline-block; padding: 2px 9px; font-size: 12px; border-radius: 20px; border: 1px solid rgba(217,177,92,.5); color: #e8dcc0; white-space: nowrap; }
.chip.go { border-color: #8fd18a; color: #bfe8a8; } .chip.warn { border-color: #e2a35c; color: #ffcf96; } .chip.bad { border-color: #e07a6a; color: #ffb2a4; } .chip.done { border-color: rgba(245,234,208,.3); color: rgba(245,234,208,.55); }
.btn { min-height: 52px; padding: 0 22px; font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #ffe7b0; background: none; border: 12px solid transparent; border-image: url(assets/gen/c-card-front.png) 84 fill / 12px stretch; transition: transform .1s; }
.btn:active { transform: translateY(2px); }
.btn.alt { color: #e8dcc0; font-weight: 600; filter: saturate(.4) brightness(.85); }
.btn.bad { color: #ffb2a4; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.fine { font-size: 12.5px; color: #9c927c; line-height: 1.6; }
.err { min-height: 22px; margin-top: 8px; font-size: 14px; color: #ffb2a4; }
.ok { color: #bfe8a8; }
.toast { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 50; pointer-events: none; }
.toast div { padding: 10px 18px; font-size: 15px; background: rgba(10,22,16,.96); box-shadow: 0 0 0 1px rgba(217,177,92,.7), 0 8px 18px rgba(0,0,0,.6); border-radius: 4px; animation: toast 2.6s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.netbar { display: none; margin-top: 10px; padding: 8px 12px; font-size: 14px; color: #ffcf96; border: 1px solid #e2a35c; border-radius: 4px; }
.netbar.show { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.busy { opacity: .6; pointer-events: none; }
/* KH13 r8：英雄照生成後、審圖前，本機做成正式明信片的進度（金色掃光；減少動態時靜止） */
.fzbar { position: relative; height: 6px; margin: 8px 0 4px; border-radius: 3px; overflow: hidden; background: rgba(217,177,92,.18); }
.fzbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, #ffd98a, transparent); animation: fz 1.6s ease-in-out infinite; }
@keyframes fz { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .fzbar i { animation: none; width: 100%; opacity: .45; } }