/* German Dominion - Live dinosaur dashboard.
   Tokens + topbar come from /_shared.css + /assets/topbar.css. Selectors below
   are the live.js / live/index.html DOM contract - keep every id and class name
   stable. No emojis and English copy only (site copy policy). */

.live-main { max-width: 1240px; margin: 0 auto; padding: clamp(34px, 6vw, 84px) clamp(16px, 5vw, 48px) 110px; }

.live-intro { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.live-intro h1 { margin: 0; font: 400 clamp(38px, 6vw, 72px)/0.98 var(--display); text-transform: uppercase; color: var(--bone); }
.live-intro p { margin: 8px 0 0; max-width: 640px; color: var(--bone-62); font-size: 14px; line-height: 1.5; }

/* live / stale / offline connection pill */
.live-pill { display: none; align-items: center; gap: 10px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
body[data-scene="live"] .live-pill { display: inline-flex; }
.live-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: livepulse 1.8s var(--ease) infinite; }
.live-pill .txt { color: var(--bone); }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 var(--green-glow); } 70% { box-shadow: 0 0 0 8px rgba(57,201,119,0); } 100% { box-shadow: 0 0 0 0 rgba(57,201,119,0); } }
body[data-conn="stale"] .live-pill .dot { background: var(--amber); animation: none; box-shadow: 0 0 8px var(--amber-glow); }
body[data-conn="stale"] .live-pill .txt { color: var(--amber); }
body[data-conn="offline"] .live-pill .dot { background: var(--crimson); animation: none; box-shadow: 0 0 8px var(--crimson-glow); }
body[data-conn="offline"] .live-pill .txt { color: #ff7b70; }

/* scenes */
.scene { display: none; }
body[data-scene="loading"] #scene-loading { display: block; }
body[data-scene="noauth"] #scene-noauth { display: block; }
body[data-scene="nodino"] #scene-nodino { display: block; }
body[data-scene="live"] #scene-live { display: block; }

.scene-card { display: grid; place-items: center; gap: 18px; min-height: 320px; padding: 48px 24px; text-align: center; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); }
.scene-card h2 { margin: 0; font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.scene-card p { margin: 0; max-width: 460px; color: var(--bone-62); font-size: 14px; line-height: 1.55; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bone-18); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* banners */
.banner { display: none; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-size: 13px; margin: 0 0 18px; }
.banner.warn { border: 1px solid var(--warn); color: var(--warn); background: rgba(255,179,71,0.07); }
.banner.err { border: 1px solid var(--crimson); color: #ff7b70; background: rgba(230,59,46,0.08); }
body[data-scene="live"][data-conn="stale"] #banner-stale { display: flex; }
body[data-scene="live"][data-conn="offline"] #banner-offline { display: flex; }

/* grid layout */
.live-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
body[data-conn="stale"] .live-grid, body[data-conn="offline"] .live-grid { opacity: .64; filter: saturate(.7); }
.panel { border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%); overflow: hidden; }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px 0; }
.panel > header h2 { margin: 0; font: 400 20px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.panel > header .sub { color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.panel .body { padding: 18px 22px 22px; }
.preview-panel, .vitals-panel { grid-column: auto; }
.prime-panel, .vault-panel, .teleport-panel { grid-column: 1 / -1; }
@media (max-width: 940px) { .live-grid { grid-template-columns: 1fr; } .prime-panel, .vault-panel, .teleport-panel { grid-column: auto; } }

/* summary head */
.summary-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.summary-row .name { font: 400 26px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.summary-row .stage { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.tag { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 700 9px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--glass-border); color: var(--bone-62); }
.tag.prime { border-color: var(--accent); color: var(--accent-hot); background: rgba(57,201,119,0.10); }
.tag.elder { border-color: var(--amber); color: var(--amber-hot); background: rgba(255,179,71,0.10); }
.tag.recovering { border-color: var(--warn); color: var(--warn); }
.tag.mutation { border-color: rgba(57,201,119,0.35); color: var(--bone-80); }
.tag.mutation.elder { border-color: var(--amber); color: var(--amber-hot); background: rgba(255,179,71,0.10); }

/* vitals grid */
.vitals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.stat { padding: 12px 13px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.stat .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat .lab { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.stat .val { color: var(--bone); font: 500 13px/1 var(--ui); }
.stat .bar { height: 6px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: var(--bone-08); }
.stat .fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson), var(--accent)); transition: width .3s ease; }
.stat .src { margin-top: 8px; color: var(--bone-34); font: 600 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; display: none; }
.stat.pending .val { color: var(--bone-34); }
.stat.pending .src { display: block; }

/* diet bars */
.diet-row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 10px; margin: 0 0 10px; }
.diet-row .dl { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; }
.diet-row .db { height: 8px; border-radius: 999px; overflow: hidden; background: var(--bone-08); }
.diet-row .db .fill { display: block; height: 100%; width: 0; transition: width .3s ease; }
.diet-row.carb .db .fill { background: var(--accent); }
.diet-row.prot .db .fill { background: var(--amber); }
.diet-row.lip .db .fill { background: var(--crimson); }
.diet-row .dv { text-align: right; color: var(--bone); font: 500 12px/1 var(--mono); }
#diet-note { margin-top: 6px; color: var(--bone-34); font: 600 9px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* prime panel */
.prime-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.prime-score { display: flex; align-items: baseline; gap: 8px; font: 400 46px/1 var(--display); color: var(--bone); }
.prime-score em { color: var(--bone-34); font-style: normal; font-size: 20px; }
.prime-score b:last-child { color: var(--bone-62); font-size: 26px; }
.prime-badge { display: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent-hot); background: rgba(57,201,119,0.12); font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.prime-badge.on { display: inline-block; }
.prime-meter { height: 6px; margin: 16px 0 4px; border-radius: 999px; overflow: hidden; background: var(--bone-08); }
.prime-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--crimson), var(--accent)); transition: width .3s ease; }
.prime-splits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.prime-splits article { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.prime-splits span { display: block; color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.prime-splits strong { display: block; margin-top: 8px; font: 400 18px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.curated-title, .checklist-title { margin: 22px 0 10px; color: var(--accent); font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; }
.condition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.condition { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.condition span { color: var(--bone-80); font: 500 12px/1.3 var(--ui); }
.condition .st { color: var(--bone-34); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.condition.met { border-color: var(--accent); background: rgba(57,201,119,0.09); }
.condition.met .st { color: var(--accent-hot); }
.condition.na { opacity: .6; }
.prime-message { margin-top: 14px; color: var(--bone-62); font: 600 10px/1.5 var(--mono); }

/* vault panel */
.vault-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.slots { display: flex; align-items: center; gap: 12px; }
.pips { display: flex; gap: 5px; }
.pip { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--glass-border); background: var(--bone-08); }
.pip.on { background: var(--accent); border-color: var(--accent); }
.slots .count { color: var(--bone); font: 400 18px/1 var(--display); text-transform: uppercase; }
.vault-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stored-list { display: grid; gap: 10px; margin-top: 18px; }
.stored { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.stored .meta .name { font: 400 18px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.stored .meta .line { margin-top: 6px; color: var(--bone-62); font: 500 11px/1 var(--mono); }
.stored .meta .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.stored .meta .mutations { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.stored .ops { display: flex; gap: 8px; }
.stored .ops button { padding: 8px 14px; font-size: 12px; }
.vault-empty { margin-top: 16px; padding: 22px; text-align: center; color: var(--bone-62); border: 1px dashed var(--glass-border); border-radius: 12px; font-size: 13px; }

/* teleport */
.teleport-block { padding: 14px 0; }
.teleport-block + .teleport-block { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--glass-border); }
.teleport-block-title { margin: 0 0 8px; color: var(--bone); font: 400 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.teleport-explain { margin: 0 0 14px; color: var(--bone-62); font-size: 13px; line-height: 1.5; }
.teleport-code-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.teleport-code-active { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); }
.teleport-code-value { font: 700 20px/1 var(--mono); letter-spacing: .18em; color: var(--accent-hot); }
.teleport-code-expiry { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.teleport-redeem-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.teleport-redeem-row input { flex: 1 1 220px; min-width: 180px; text-transform: uppercase; letter-spacing: .1em; }
.teleport-hint { margin: 10px 0 0; color: var(--bone-34); font: 600 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.teleport-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.teleport-row select { min-width: 240px; }
.teleport-cooldown { color: var(--bone-62); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.teleport-disabled, .teleport-empty { margin-top: 14px; color: var(--bone-34); font-size: 13px; }

/* progress row + toast + modal */
.progress-row { display: none; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-1); color: var(--bone-80); font-size: 13px; }
.progress-row.on { display: flex; }
.progress-row .spinner { width: 18px; height: 18px; border-width: 2px; }

#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 3000; max-width: 460px; padding: 13px 18px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(8,20,16,0.96); color: var(--bone); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { border-color: var(--accent); }
#toast.err { border-color: var(--crimson); }
#toast.warn { border-color: var(--warn); }

.modal-backdrop { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 20px; background: rgba(4,7,6,0.72); }
.modal-card { width: min(440px, 100%); border: 1px solid var(--glass-border); border-radius: 16px; background: var(--bg-1); padding: 26px; }
.modal-card h3 { margin: 0 0 10px; font: 400 24px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.modal-card p { margin: 0 0 20px; color: var(--bone-62); font-size: 14px; line-height: 1.55; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* 3D preview */
.preview-frame { position: relative; margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-border); background: radial-gradient(ellipse at 50% 20%, rgba(57,201,119,0.08), transparent 70%), var(--bg-0); aspect-ratio: 4 / 3; }
.preview-frame canvas { display: block; width: 100%; height: 100%; }
.preview-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--bone-62); font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; text-align: center; }
.fallback-card { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.fallback-card.on { display: flex; }
.fallback-card .fname { font: 400 24px/1 var(--display); text-transform: uppercase; color: var(--bone); }
.fallback-card p { margin: 0; color: var(--bone-62); font-size: 12px; }

@media (max-width: 620px) {
  .vitals { grid-template-columns: 1fr; }
  .condition-grid { grid-template-columns: 1fr; }
  .prime-splits { grid-template-columns: 1fr; }
  .stored { grid-template-columns: 1fr; }
  .stored .ops { justify-content: flex-start; }
}

/* ---- Dead drops (paid carcass delivery) ---- */
.deaddrop-copy { margin: 0 0 10px; color: var(--ink-dim, #9fb4a8); font-size: 13px; line-height: 1.55; }
.deaddrop-gates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dd-gate {
  font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(159, 180, 168, .25); color: #9fb4a8; background: rgba(12, 20, 16, .5);
}
.dd-gate.ok { border-color: rgba(94, 214, 156, .45); color: #7fe0af; }
.dd-gate.no { border-color: rgba(224, 122, 122, .45); color: #e59a9a; }
.deaddrop-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.btn.dd-offer {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; line-height: 1.2; text-align: center;
}
.btn.dd-offer .dd-name { font-weight: 600; }
.btn.dd-offer .dd-price { font-size: 11px; opacity: .75; }
.btn.dd-offer:disabled { opacity: .45; cursor: not-allowed; }
.deaddrop-cooldown, .deaddrop-disabled-note {
  margin-top: 10px; font-size: 12px; color: #9fb4a8;
  border: 1px dashed rgba(159, 180, 168, .3); border-radius: 8px; padding: 7px 10px;
}
.deaddrop-cooldown b { font-variant-numeric: tabular-nums; }

/* ---- Inventory (permanent skins) ---- */
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.inv-card {
  display: flex; flex-direction: column; gap: 6px; padding: 9px;
  border: 1px solid rgba(159, 180, 168, .18); border-radius: 10px; background: rgba(10, 16, 13, .45);
}
.inv-thumb { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 7px; background: rgba(6, 10, 8, .6); }
.inv-name { font-size: 13px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.inv-meta { font-size: 11px; color: #9fb4a8; }
.inv-apply { margin-top: auto; }
.inv-apply:disabled { opacity: .5; cursor: not-allowed; }
.inventory-empty { color: #9fb4a8; font-size: 13px; line-height: 1.55; }