/* ---------- Cards ---------- */
.card {
  position: absolute; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border: 0; border-radius: 20px; text-align: left;
  background: var(--card); color: var(--card-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 40px -18px var(--shadow);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, outline-color .15s;
  outline: 3px solid transparent; outline-offset: 4px; cursor: inherit;
}
.card:hover, .card.reticle-hit { transform: translateY(-8px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 30px 50px -20px var(--shadow); outline-color: var(--accent); }
.card.inspected { outline-color: var(--hot); }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.thumb { position: relative; flex: none; height: 168px; border-radius: 13px; overflow: hidden; }
.thumb svg, .thumb canvas, .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.thumb img { object-fit: cover; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 6px; min-height: 0; flex: 1; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--card-dim); }
.card-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 26px; line-height: 1.02; text-wrap: balance; }
.card-desc { margin: 0; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--card-ink) 82%, var(--card)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.chip { font: 600 11px/1 var(--f-mono); letter-spacing: .04em; padding: 6px 8px; border-radius: 7px; background: color-mix(in srgb, var(--card-ink) 8%, var(--card)); color: var(--card-ink); }
.card-cta { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--card-dim); padding-top: 4px; }
.card-cta span:last-child { color: var(--card-ink); }
.card:hover .card-cta span:last-child, .card.reticle-hit .card-cta span:last-child { color: var(--accent); }
.card-locked .card-title::after { content: " ▣"; font-size: .6em; vertical-align: middle; color: var(--thumb-red); }
.redact { display: inline-block; height: .78em; border-radius: 3px; background: var(--card-ink); vertical-align: middle; }

/* far LOD: only thumbnails and titles survive */
#world .card-desc, #world .chips, #world .card-cta, #world .card-meta, #world .zone-sub, #world .info-body { transition: opacity .2s ease; }
#world.far .card-desc, #world.far .chips, #world.far .card-cta, #world.far .card-meta, #world.far .zone-sub, #world.far .info-body { opacity: 0; }
#world.far .zone-title { font-size: 150px; }
#world.far .zone-long .zone-title { font-size: 92px; } /* long names already wrap to two lines */

/* info cards (chi sono, educazione, contatti, hub) */
.info-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 6px; flex: 1; min-height: 0; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--card-ink) 12%, var(--card)); }
.row:first-child { border-top: 0; }
.row strong { font-weight: 700; font-size: 16px; }
.row small { grid-column: 1 / -1; color: var(--card-dim); font-size: 14px; }
.row .val { font: 600 12px/1.2 var(--f-mono); color: var(--card-dim); text-align: right; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { aspect-ratio: 1; max-width: 100%; border-radius: 10px; background: color-mix(in srgb, var(--card-ink) 7%, var(--card)); display: grid; place-items: center; text-align: center; padding: 6px; font: 600 10.5px/1.15 var(--f-mono); letter-spacing: .02em; position: relative; }
.slot::before { content: attr(data-k); position: absolute; left: 6px; top: 5px; font-size: 9px; color: var(--card-dim); }
.copy-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.copy-row code { font: 600 14px/1.3 var(--f-mono); user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 9px 12px;
  background: var(--card-ink); color: var(--card); font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: inherit;
}
.btn:hover { background: var(--accent); color: var(--accent-ink); }
.big-name { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 64px; line-height: .88; text-transform: uppercase; }
.lede { margin: 0; font-size: 17px; line-height: 1.45; max-width: 46ch; }
.hub-h { margin: 4px 0 -4px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--card-dim); }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; font-size: 14px; }
.badge { justify-self: end; font: 700 11px/1 var(--f-mono); padding: 6px 8px; border-radius: 6px; background: var(--thumb-green); color: #fff; letter-spacing: .06em; }

/* featured project (card.featured): darker, bigger, gold edge */
.card-featured {
  background: linear-gradient(160deg, #23242b, #121316 70%); color: #ecebe4; gap: 16px; padding: 14px;
  box-shadow: 0 0 0 1px rgba(244, 197, 52, .45), 0 34px 80px -26px rgba(255, 106, 26, .6);
}
.card-featured .thumb { height: 300px; border-radius: 15px; }
.card-featured .card-body { gap: 12px; padding: 4px 12px 8px; }
.card-featured .card-title { font-size: 54px; font-weight: 900; font-stretch: 125%; line-height: .92; text-transform: uppercase; }
.card-featured .card-desc { font-size: 17px; color: #c9c8c1; max-width: 52ch; }
.card-featured .card-meta, .card-featured .card-cta { color: #9c9b94; }
.card-featured .card-meta span:first-child { color: #f4c534; }
.card-featured .card-cta span:last-child { color: #f4c534; }
.card-featured .chip { background: rgba(255, 255, 255, .08); color: #ecebe4; }
.card-featured:hover, .card-featured.reticle-hit { outline-color: #f4c534; }
.card-featured .thumb img { object-position: 50% 36%; }
.feat-badge {
  position: absolute; top: 272px; left: 28px; padding: 7px 11px; border-radius: 8px; background: #f4c534; color: #17181b;
  font: 700 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
}

/* flagship crown (card.crown) */
.crown-badge { position: absolute; top: -30px; right: 14px; width: 60px; height: 50px; transform: rotate(14deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); animation: crown-bob 3.2s ease-in-out infinite; pointer-events: none; }
.crown-badge svg { width: 100%; height: 100%; display: block; }
@keyframes crown-bob { 50% { transform: rotate(8deg) translateY(-6px); } }
.card:hover .crown-badge { animation-duration: 1.2s; }

/* Steam card */
.steam-id {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px;
  background: #1b2838; color: #c7d5e0; text-decoration: none; transition: transform .2s cubic-bezier(.2,.9,.3,1.4), background .2s;
}
.steam-id img { width: 46px; height: 46px; border-radius: 8px; display: block; }
.steam-id span { display: grid; gap: 3px; min-width: 0; }
.steam-id b { color: #fff; font-size: 16px; }
.steam-id small { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .04em; color: #8fa6b8; }
.steam-id i { font-style: normal; font-weight: 700; color: #66c0f4; padding-right: 6px; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.steam-id:hover { background: #24384d; transform: translateY(-2px); }
.steam-id:hover i { transform: translate(3px, -3px); }
.steam-games { display: grid; gap: 6px; }
.sg {
  position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 6px; border-radius: 10px;
  color: var(--card-ink); text-decoration: none; background: color-mix(in srgb, var(--card-ink) 6%, var(--card));
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4), background .2s;
}
.sg img { width: 104px; height: 49px; object-fit: cover; border-radius: 6px; display: block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sg-txt { display: grid; gap: 4px; min-width: 0; }
.sg-txt b { font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-txt small { font: 600 11px/1.2 var(--f-mono); color: var(--card-dim); }
.sg-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--card-ink) 14%, var(--card)); overflow: hidden; }
.sg-bar i { display: block; height: 100%; background: #66c0f4; border-radius: inherit; }
.sg-fav { position: absolute; top: -7px; left: 2px; padding: 3px 7px; border-radius: 6px; background: #f4c534; color: #17181b; font: 700 9.5px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5); }
.sg:hover { transform: translateX(4px); background: color-mix(in srgb, #66c0f4 16%, var(--card)); }
.sg:hover img { transform: scale(1.06); }
.steam-note { font-size: 11.5px; color: var(--card-dim); }
.sheet-card .sg-txt b { white-space: normal; }