/* 建造面板、弹窗、皮肤选择、能量和鬼血条。基础变量和布局在 style.css。 */
.ghostbar { width: 90px; }
.ghostbar i { background: #b06cff; }
.stat.ghoststat b { min-width: 7em; }

/* 建造升级面板：宽屏时贴右侧，窄屏时盖在底部栏上方 */
#build-panel { position: fixed; top: 64px; right: 12px; bottom: 100px; width: min(380px, calc(100vw - 24px)); display: flex;
  flex-direction: column; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); z-index: 5; }
#build-panel[hidden] { display: none; }
.bp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bp-head button { min-height: 36px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn); color: var(--text); font: inherit; cursor: pointer; }
#bp-body { overflow-y: auto; padding: 8px 12px 14px; }
.bp-sec { margin: 12px 0 4px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.bp-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bp-row .nm { font-weight: 600; }
.bp-row .nm small { margin-left: 6px; color: var(--muted); font-weight: 400; }
.bp-row .inf { grid-column: 1; color: var(--muted); font-size: 14px; }
.bp-row .acts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.bp-row button { min-height: 34px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.bp-row button:hover:not(:disabled) { background: var(--btn-hover); }
.bp-row button.ad { border-style: dashed; color: var(--muted); }
.bp-row button:disabled { opacity: .42; cursor: not-allowed; }
.bp-row.broken .nm { color: var(--danger); }
.bp-empty { color: var(--muted); font-size: 15px; padding: 8px 0; }

/* 弹窗：比开始面板更靠前 */
.modal { z-index: 20; }
.modal .panel { width: min(420px, 100%); }
.modal .row { flex-wrap: wrap; }
.modal .row button { flex: 1 1 140px; }
.modal .count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

/* 皮肤选择 */
.skins-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; }
.skins-head small { color: var(--muted); }
.skins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.skin { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; background-color: var(--btn); padding: 0; cursor: pointer;
  background-repeat: no-repeat; image-rendering: pixelated; }
.skin[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.skin.locked { opacity: .55; }
.skin .tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; font-size: 13px; font-weight: 600; text-align: center; background: var(--surface-solid); color: var(--muted); border-radius: 0 0 7px 7px; }
.skin .tag.f { color: #e0709a; }
.skin .tag.m { color: #5f9be0; }
.stats { margin: 12px 0 0; color: var(--muted); font-size: 14px; text-align: center; }

@media (max-width: 640px) {
  #build-panel { top: auto; right: 8px; left: 8px; width: auto; bottom: 172px; max-height: 52vh; }
  .skins { grid-template-columns: repeat(5, 1fr); }
}

#btn-airdrop.ready { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }

/* 建造面板顶部的广告奖励入口 */
.bp-reward { padding: 10px 0 4px; border-bottom: 1px solid var(--border); }
.bp-reward .primary { width: 100%; min-height: 42px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 700; cursor: pointer; }
.bp-reward .inf { margin-top: 6px; color: var(--muted); font-size: 14px; }
.toast.k-reward { border-left-color: var(--accent); }

/* 帧率显示，按 F 开关，用来排查卡顿 */
#fps { position: fixed; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.65); color: #9ff0a8;
  font: 600 13px/1.3 ui-monospace, Menlo, Consolas, monospace; pointer-events: none; z-index: 30; white-space: pre; }

/* 开始面板内容多时在面板里滚动，但「开始」按钮始终固定在底部，小屏幕也点得到 */
#panel-start { padding-top: 20px; padding-bottom: 16px; }
#panel-start h1 { margin-bottom: 4px; font-size: 30px; }
#panel-start .lead { margin-bottom: 8px; }
#panel-start .rules { margin-bottom: 8px; }
#panel-start .keys { margin-bottom: 10px; }
#panel-start #btn-start { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 14px -6px var(--surface-solid); }

.keys summary { cursor: pointer; font-weight: 600; }
.keys[open] summary { margin-bottom: 6px; }

/* 矮窗口（常见的笔记本浏览器可视高度只有 600 多像素）：收起规则说明，保证角色和开始按钮不互相遮挡 */
@media (max-height: 780px) {
  #panel-start .rules, #panel-start .credit { display: none; }
  #panel-start .diff { margin-bottom: 10px; }
  #panel-start .skins { margin-bottom: 10px; }
}
@media (max-height: 640px) {
  #panel-start .lead, #panel-start .stats { display: none; }
}

/* 看广告弹窗：先说清楚看完能得到什么 */
.adbox { margin: 4px 0 14px; }
.adhead { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.adrow { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; margin-bottom: 6px; border-radius: 8px; background: var(--btn); border-left: 4px solid var(--muted); }
.adrow .tag { flex: none; min-width: 5.2em; font-weight: 700; font-size: 14px; }
.adrow .names { font-size: 15px; line-height: 1.5; }
.tier-common { border-left-color: #8f9bb0; } .tier-common .tag { color: #8f9bb0; }
.tier-rare   { border-left-color: #5fa8ff; } .tier-rare .tag   { color: #5fa8ff; }
.tier-epic   { border-left-color: #c07cff; } .tier-epic .tag   { color: #c07cff; }
.adreward { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px; background: var(--btn); border: 2px solid var(--muted); text-align: center; }
.adreward.tier-rare { border-color: #5fa8ff; box-shadow: 0 0 18px rgba(95,168,255,.35); }
.adreward.tier-epic { border-color: #c07cff; box-shadow: 0 0 22px rgba(192,124,255,.45); }
.adreward .tag { font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.adreward b { font-size: 24px; }
.adreward small { font-size: 15px; color: var(--muted); }
.adbar { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--btn); overflow: hidden; }
.adbar i { display: block; height: 100%; width: 0; background: var(--accent); animation: adfill linear forwards; }
@keyframes adfill { from { width: 0; } to { width: 100%; } }
.modal.ad .row .primary:not(:disabled) { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,90,.55); } 50% { box-shadow: 0 0 0 8px rgba(255,214,90,0); } }

/* 危急求助提示条：在状态栏下面，不挡操作 */
#offer { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); padding: 12px 14px;
  border-radius: 12px; background: var(--surface-solid); border: 2px solid var(--danger); box-shadow: var(--shadow); z-index: 6; }
#offer[hidden] { display: none; }
#offer .ot { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
#offer .ot b { font-size: 18px; color: var(--danger); }
#offer .ot span { font-size: 15px; }
#offer .obar { height: 4px; border-radius: 2px; background: var(--btn); overflow: hidden; margin-bottom: 10px; }
#offer .obar i { display: block; height: 100%; background: var(--danger); }
#offer .orow { display: flex; gap: 8px; }
#offer .orow button { flex: 1; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--btn); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
#offer .orow button.primary { flex: 2; border: 0; background: var(--accent); color: var(--accent-text); }

#bar button.pulse { animation: pulse 1.6s ease-in-out infinite; border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .modal.ad .row .primary:not(:disabled), #bar button.pulse { animation: none; } .adbar i { animation-duration: 0.01s !important; } }
@media (max-width: 640px) { #offer { top: 124px; } }