/* ==========================================================================
   MAP CARDS + TABLET/DESKTOP WIDTHS
   ========================================================================== */

/* --- Map location cards (were inline styles in src/world/mapView.js) --- */
.location-card .loc-art { width: 80px; background: #000; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,0.1); position: relative; flex-shrink: 0; overflow: hidden; }
.location-card .loc-art img { width: 100%; height: 100%; object-fit: cover; }
.location-card .loc-art-shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.4), transparent); }
.location-card .loc-art-current { position: absolute; bottom: 6px; font-size: 7px; color: var(--accent-gold); font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 5px #000; }
.location-card .loc-body { flex: 1; padding: 12px 15px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.location-card .loc-name { font-size: 13px; color: var(--z-col); letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-head); }
.location-card .loc-sub { font-size: 9px; color: #666; font-weight: bold; margin-top: 2px; }
.location-card .loc-confirm { font-size: 8px; color: var(--danger); margin-top: 6px; font-weight: 800; }
.location-card .loc-action { width: 60px; border-left: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.01); flex-shrink: 0; }

/* --- Desktop layout on smaller screens (tablets held sideways, small laptops) ---
   The side columns give up width (down to 220px) so the fight column always keeps phone width. */
@media (min-width: 1024px) {
    body.game-running #game-interface { grid-template-columns: minmax(220px, 340px) minmax(420px, 1fr) minmax(220px, 340px); }
}
/* Narrow side columns: compact map cards */
@media (min-width: 1024px) and (max-width: 1139px) {
    body.game-running .location-card .loc-art { width: 52px; }
    body.game-running .location-card .loc-action { width: 38px; }
    body.game-running .location-card .loc-body { padding: 10px 10px; }
    body.game-running .location-card .loc-name { font-size: 12px; letter-spacing: 1px; }
}

/* --- Toasts on the desktop layout: top-right, sliding in from the screen edge
   (top-left covered the Travel column's current location) --- */
@media (min-width: 1024px) {
    #toast-container { left: auto; right: 20px; align-items: flex-end; }
}