/* Selected Work: live project scenes (see work-art.js). Replaces the static card art once loaded. */
.project-visual.g-host { --f-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --f-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.project-visual.g-host::before, .project-visual.g-host::after { content: none; }
html[data-theme="dark"] .project-visual.g-host { filter: none; }
/* ---------- graphic hosts ---------- */
.g-host { overflow: hidden; isolation: isolate; }
.g-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-svg text { font-family: var(--f-sans); }
.g-svg .gm { font-family: var(--f-mono); letter-spacing: .08em; }
.g-svg .dotc { transition: fill .5s ease; }
.wm { position: absolute; left: 4.2%; bottom: 6%; z-index: 2; margin: 0; font-weight: 800; letter-spacing: -.07em; line-height: .82; font-size: clamp(44px, 7vw, 112px); pointer-events: none; }
.g-sm .wm { font-size: clamp(36px, 4.6vw, 76px); }
.tagline { position: absolute; right: 4%; top: 6%; z-index: 2; max-width: 250px; text-align: right; font: 10px/1.55 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }

/* UP */
.g-up { background: #07110f; color: #fff; }
.g-up .tagline { color: rgba(255,255,255,.55); }
.up-chips { position: absolute; right: 4%; bottom: 7%; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.up-chips span { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.62); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: all .4s ease; }
.up-chips span.on { color: #04140f; background: linear-gradient(90deg, #00F5A0, #00C4FE); border-color: transparent; }
/* Trader */
.g-trader { background: #07090c; color: #f4f2ea; }
.g-trader .tagline { color: #8f949c; }
.tr-hud { position: absolute; left: 4%; top: 6%; z-index: 2; display: flex; align-items: center; gap: 10px; }
.tr-hud .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font: 600 11px var(--f-mono); letter-spacing: .06em; }
.tr-hud .pill i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d6a; }
.tr-speed { min-width: 46px; justify-content: center; transition: background .3s ease, color .3s ease; }
.tr-speed.fast { background: #2f5bff; border-color: #2f5bff; color: #fff; }
.tr-xp { display: flex; align-items: center; gap: 8px; font: 600 10px var(--f-mono); letter-spacing: .08em; color: #8f949c; }
.tr-xp div { width: 110px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.tr-xp b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d39b, #c9ff6b); border-radius: 6px; }
.tr-rank { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; top: 18%; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #f4ecd3; color: #1b1a14; font: 600 13px var(--f-sans); box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; white-space: nowrap; }
.tr-rank em { font-style: normal; color: #1f9b5d; font-family: var(--f-mono); font-size: 12px; }
/* Transmuter */
.g-transmuter { background: #06060a; color: #f5efe0; }
.g-transmuter .wm { background: linear-gradient(90deg, #f6c972, #e7a0a0 55%, #8b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-transmuter .tagline { color: rgba(245,239,224,.55); }
/* Slance */
.g-slance { background: #f0eadf; color: #111; }
.g-slance .tagline { color: #333; }
/* Qvrse */
.g-qvrse { background: #d7d9f9; color: #0f0f1a; }
.g-qvrse .tagline { color: #2a2a40; }
/* SCS */
.g-scs { background: #0b0d11; color: #eef1f6; }
.g-scs .tagline { color: rgba(238,241,246,.5); left: 4%; right: auto; text-align: left; }

@media (max-width: 560px) {
  .project-visual.g-host .tagline { display: none; }
  .up-chips span:not(.on) { display: none; }
}
/* Smart Contracts: two-line wordmark under the seal, clear of the code */
.project-visual.g-scs .wm { font-size: clamp(34px, 4.2vw, 64px); max-width: 30%; }
@media (max-width: 900px) { .project-visual.g-scs .wm { max-width: 60%; } }