/* Visit card layout; the card skin itself is the shared #nav card in style.css. */
#nav:has(.visit-heading) { width: min(360px, calc(100vw - 24px)); }
.visit-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.visit-heading small { color: var(--muted); }
.visit-heading[class*="visit-frame-"] { border: 2px solid var(--visit-frame); border-radius: 12px; padding: 7px 9px; background: var(--surface); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--visit-frame) 18%, transparent); }
.visit-frame-altin { --visit-frame: #d5a62c; }
.visit-frame-bakir { --visit-frame: #b66d43; }
.visit-frame-mermer { --visit-frame: #c8bcaa; }
.visit-frame-gece { --visit-frame: #515b93; }
.visit-frame-sahil { --visit-frame: #5396a8; }
.visit-frame-steam { --visit-frame: #4fa3ff; }
.visit-heading.visit-frame-steam { box-shadow: 0 0 7px #4fa3ffa0, inset 0 0 0 2px #16213e; }
.visit-frame-bogaz_seti { --visit-frame: #3f7fae; }
/* Skyline backdrop (kart slot): decorative, behind the card text. Ink at ~16% keeps the text above AA on parchment. */
.visit-kart-card { position: relative; isolation: isolate; min-width: 0; }
.visit-kart-card > .visit-skyline { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: auto; max-height: 100%; color: var(--ink); opacity: .16; pointer-events: none; }
.visit-kart-card > .visit-skyline.is-set { opacity: .34; }
.visit-bey { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 1px 7px 1px 4px; border: 1px solid #c4a97f; border-radius: 999px; background: #fff8e5; color: #695131; font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.visit-bey .bey-outfit { height: 20px; width: auto; }
.visit-emblem { font-size: 1.35rem; line-height: 1; }
.visit-cosmetic-tag { color: #805327; border: 1px solid #c59a66; border-radius: 999px; padding: 1px 7px; font-size: .78rem; font-weight: 700; }
.visit-theme { color: var(--muted); font-size: .88em; }
.visit-attack { border-top: 1px solid var(--border-soft); padding-top: var(--space-2); }
.visit-attack summary { cursor: var(--cursor-pointer, pointer); min-height: var(--touch-target); display: flex; align-items: center; font-weight: 700; }
.visit-units { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.visit-units button { flex: 1; }
/* Player card header: the heading (emblem, name, badges, optional frame) fills the header row next to the ✕. */
#nav .row2.head > .visit-heading { flex: 1; min-width: 0; }
#nav .row2.head .visit-heading b { flex: 0 1 auto; overflow: visible; text-overflow: clip; white-space: normal; font: inherit; font-weight: 700; }
#nav .visit-controls { position: sticky; bottom: calc(-1 * var(--space-3)); padding-block: var(--space-2); background: var(--surface); z-index: var(--z-local-control); }
#nav:has(.visit-heading) button { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #nav:has(.visit-heading) { width: auto; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #nav:has(.visit-heading) { width: min(360px, 46vw); }
}
/* Keep transient feedback clear of the touch return controls. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  body:has(#nav:not([hidden]) .visit-heading) #toasts {
    left: var(--edge-left, 8px); right: auto; top: max(64px, env(safe-area-inset-top)); bottom: auto;
    width: min(220px, calc(100vw - 160px)); max-height: 24dvh; overflow-y: auto; transform: none;
  }
}
@media (max-height: 500px) and (max-width: 1100px) {
  body:has(#nav:not([hidden]) .visit-heading) #alerts {
    left: var(--edge-left, 8px); right: auto; top: 62px; max-width: min(240px, 40vw); max-height: 24dvh;
  }
  body:has(#nav:not([hidden]) .visit-heading) #toasts { top: calc(70px + var(--alerts-h, 0px)); }
}

.map-cosmetics { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-cosmetics[class*="visit-frame-"] { border: 2px solid var(--visit-frame); border-radius: 6px; padding: 1px 4px; }

/* İmece (public/imece.js): düğme ve hak/sebep satırı; dar ekranda alt alta */
.visit-imece { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.visit-scout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.visit-scout small { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; opacity: .85; }
.visit-scout-report { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.visit-imece small { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; opacity: .85; }