/**
 * Way of Citizen – Responsive Design
 * Mobile-first approach with breakpoints
 */

/* ============ BREAKPOINTS ============ */
/* Mobile: 0-480px */
/* Tablet: 481-768px */
/* Desktop: 769px+ */

/* ============ TABLET (481px - 768px) ============ */

@media (max-width: 768px) {
    /* Platz für das schwebende Chat-Widget reservieren (GameNav::render(),
       .chat-widget, position:fixed unten rechts auf praktisch jeder Seite
       mit GameNav - siehe .notif-bell-widget-Fix oben rechts für dasselbe
       Muster). Ohne diesen Rand liegt der 52px-FAB auf kurzen Seiten bzw.
       ganz unten auf langen Seiten über dem letzten Inhalt/Button
       (Playwright-Check: Verkaufen-Button auf game_new.php?tab=market,
       Unterstützung-Button auf truppen.php, u.a.). */
    /* !important: praktisch jede Standalone-Seite (tickets.php, shop.php,
       profil.php, ...) hat ihren eigenen inline <style>-Block mit
       "body { padding: var(--spacing-lg); }" NACH diesem Stylesheet im
       <head> - dessen Shorthand würde padding-bottom sonst wieder auf
       16px zurücksetzen und den Fix auf ~20 Seiten wirkungslos machen
       (per Playwright bestätigt: getComputedStyle ergab 16px statt 80px). */
    body {
        padding-bottom: 80px !important;
    }

    /* Typography */
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    p {
        font-size: 13px;
    }

    /* Layout */
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-auto {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* Stats Grid */
    .city-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Building Grid */
    .buildings-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .building-card {
        min-height: 420px;
    }

    .building-portrait {
        height: 140px;
    }

    /* Quick Build */
    .quick-build {
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .quick-build-btn {
        padding: var(--spacing-sm);
    }

    .quick-build-icon {
        font-size: 20px;
    }

    .quick-build-label {
        font-size: 10px;
    }

    /* Army Grid */
    .army-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    /* Cards */
    .card {
        padding: var(--spacing-md);
    }

    /* Buttons */
    .btn {
        min-height: 40px;
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .btn-lg {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Modal */
    .modal-content {
        max-width: 90%;
        padding: var(--spacing-md);
    }

    /* Notification - min-width gilt für alle (auch in-flow Banner wie
       #guestBanner), aber top/right sind nur für den schwebenden Toast
       gedacht (body > .notification, position:fixed, siehe components.css).
       Bei position:relative-Bannern verschiebt top/right nur die Optik,
       nicht die im Fluss reservierte Fläche - der Toast rutschte dadurch
       sichtbar auf die nachfolgenden Elemente (Nutzerbericht: Stadtansicht-
       Überschrift lag unter dem Gastkonto-Banner). */
    .notification {
        min-width: min(280px, 100%);
    }

    body > .notification {
        right: var(--spacing-sm);
        top: var(--spacing-sm);
    }

    /* Rankings Table */
    .rankings-table th,
    .rankings-table td {
        padding: var(--spacing-md) var(--spacing-sm);
        font-size: 12px;
    }

    .rank-player {
        gap: var(--spacing-sm);
    }

    .rank-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Header */
    .top-header {
        padding: var(--spacing-sm) var(--spacing-md);
        /* Platz für die schwebende Benachrichtigungsglocke reservieren,
           siehe sidebar.css .top-header - sonst blockiert sie hier Klicks
           auf den rechten Teil von .header-user-menu (Profil-Link). */
        padding-right: 68px;
    }

    .header-user-menu {
        gap: var(--spacing-sm);
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Content */
    .content-wrapper {
        padding: var(--spacing-md);
    }

    /* Sidebar */
    .sidebar-stats {
        padding: var(--spacing-md);
    }

    .sidebar-footer {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    /* Spacing adjustments */
    .m-lg { margin: var(--spacing-md); }
    .mt-lg { margin-top: var(--spacing-md); }
    .mb-lg { margin-bottom: var(--spacing-md); }
    .p-lg { padding: var(--spacing-md); }

    /* Gap adjustments */
    .gap-lg { gap: var(--spacing-md); }

    /* Stadtansicht: schrumpft proportional statt Pan/Zoom zu brauchen -
       Seitenverhältnis bleibt 1:1 (siehe game-ui.css), sonst würden
       Kachel-Positionen in % wieder verzerrt und überlappen. */
    .city-scene { max-height: 480px; }

    /* Stadtansicht v5 (2026-09-20): auf dem Telefon ist die Szene nur rund
       380px breit. Eine feste 12px-Beschriftung wirkt dort riesig und
       verdeckt die halbe Landschaft (auf einem Pixel 5 nachgemessen) -
       deshalb kleiner, enger und dichter am Gebäude. */
    .city-node-label {
        font-size: 9px;
        padding: 1px 5px;
        bottom: -15px;
        border-radius: 4px;
    }

    .city-node-site { font-size: 20px; }

    /* Die Sprites sind auf dem Telefon teils nur ~50px breit - als
       Klickfläche zu wenig. Dieses unsichtbare Feld bringt jeden Knoten auf
       mindestens 44x44px, ohne das Bild oder das Layout zu verändern. */
    .city-node::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        min-width: 44px;
        min-height: 44px;
        width: 100%;
        height: 100%;
    }
}

/* ============ MOBILE (< 480px) ============ */

@media (max-width: 480px) {
    /* Root variables overrides for mobile */
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --radius-lg: 10px;
    }

    /* Typography */
    h1 {
        font-size: 24px;
        margin-bottom: var(--spacing-sm);
    }

    h2 {
        font-size: 20px;
        margin-bottom: var(--spacing-sm);
    }

    h3 {
        font-size: 18px;
        margin-bottom: var(--spacing-xs);
    }

    h4 {
        font-size: 16px;
    }

    p {
        font-size: 12px;
        margin-bottom: var(--spacing-sm);
    }

    small {
        font-size: 11px;
    }

    /* Layout */
    .main-wrapper {
        flex-direction: column;
        height: auto;
    }

    .main-content {
        height: auto;
    }

    .top-header {
        min-height: 56px;
        padding: var(--spacing-xs) var(--spacing-sm);
        padding-left: 52px;
        /* Platz für die schwebende Benachrichtigungsglocke (GameNav::
           render(), position:fixed oben rechts, siehe .notif-bell-widget in
           components.css) reservieren - sonst verdeckt sie die letzte
           Ressourcenanzeige in .header-resources (Playwright-Check auf
           game_new.php). */
        padding-right: 64px;
    }

    .header-resources {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: var(--spacing-sm);
    }

    .header-resource {
        font-size: 11px;
    }

    /* Grid layouts */
    .grid {
        grid-template-columns: 1fr;
    }

    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .grid-cols-auto {
        grid-template-columns: 1fr;
    }

    /* Flex layouts */
    .flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    /* Stats Grid */
    .city-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-box {
        padding: var(--spacing-sm);
    }

    .stat-icon {
        font-size: 24px;
    }

    .stat-icon-img {
        width: 36px;
        height: 36px;
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 10px;
    }

    /* Building Grid */
    .buildings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .building-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
        min-height: 380px;
    }

    .building-icon {
        font-size: 36px;
    }

    .building-portrait {
        width: calc(100% + 2 * var(--spacing-sm));
        height: 110px;
        margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) 0;
    }

    .building-name {
        font-size: 12px;
    }

    .building-level {
        font-size: 10px;
    }

    /* Quick Build */
    .quick-build {
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .quick-build-btn {
        padding: var(--spacing-xs);
        min-width: calc(50% - 4px);
        gap: var(--spacing-xs);
    }

    .quick-build-icon {
        font-size: 18px;
    }

    .quick-build-label {
        font-size: 9px;
    }

    /* Cards */
    .card {
        padding: var(--spacing-sm);
    }

    .card-header {
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }

    .card-footer {
        flex-direction: column;
    }

    .card-stat {
        padding: var(--spacing-sm);
    }

    /* Buttons */
    .btn {
        min-height: 40px;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 12px;
        width: 100%;
    }

    .btn-sm {
        width: auto;
        min-height: 32px;
    }

    .btn-lg {
        min-height: 44px;
        width: 100%;
    }

    /* Input Fields */
    .input-group {
        margin-bottom: var(--spacing-sm);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 13px;
    }

    /* Badges */
    .badge {
        padding: var(--spacing-xs) var(--spacing-xs);
        font-size: 10px;
    }

    /* Progress Bar */
    .progress {
        height: 6px;
        margin: var(--spacing-sm) 0;
    }

    /* Modal */
    .modal-content {
        max-width: 100%;
        width: calc(100% - 16px);
        padding: var(--spacing-sm);
        max-height: 80vh;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--spacing-sm);
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Tabs */
    .tabs {
        margin-bottom: var(--spacing-md);
        overflow-x: auto;
    }

    .tab-button {
        padding: var(--spacing-sm);
        font-size: 12px;
        min-width: auto;
    }

    /* Notification - siehe Kommentar in der 768px-Regel oben: top/left/
       right nur für den schwebenden Toast (body > .notification), sonst
       schieben sie in-flow-Banner (z.B. #guestBanner) 60px tiefer als ihre
       im Layout reservierte Fläche - das ließ sie über nachfolgende
       Elemente wie die Stadtansicht-Überschrift rutschen. */
    .notification {
        min-width: min(calc(100vw - 16px), 100%);
        max-width: 100%;
    }

    body > .notification {
        right: var(--spacing-sm);
        top: 60px;
        left: var(--spacing-sm);
    }

    /* List items */
    .list-item {
        padding: var(--spacing-sm);
    }

    .list-item-title {
        font-size: 13px;
    }

    .list-item-subtitle {
        font-size: 11px;
    }

    /* Economy Card */
    .economy-card {
        padding: var(--spacing-md);
    }

    .economy-chart {
        height: 150px;
        gap: 2px;
    }

    .resource-row {
        padding: var(--spacing-sm) 0;
    }

    .resource-current {
        font-size: 14px;
    }

    .resource-capacity {
        font-size: 11px;
    }

    /* Construction Queue */
    .construction-queue {
        padding: var(--spacing-md);
    }

    .construction-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .construction-icon {
        font-size: 24px;
    }

    .construction-name {
        font-size: 12px;
    }

    .construction-time {
        font-size: 11px;
    }

    /* Army Grid */
    .army-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .army-unit {
        padding: var(--spacing-sm);
    }

    .army-icon {
        font-size: 36px;
    }

    .army-portrait {
        width: calc(100% + 2 * var(--spacing-sm));
        height: 140px;
        margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) var(--spacing-xs);
    }

    .army-name {
        font-size: 12px;
    }

    .army-count {
        font-size: 16px;
    }

    .army-stats {
        font-size: 10px;
        padding-top: var(--spacing-sm);
    }

    /* Quest List */
    .quest-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .quest-icon {
        font-size: 24px;
    }

    .quest-title {
        font-size: 12px;
    }

    .quest-description {
        font-size: 11px;
    }

    /* Rankings Table */
    .rankings-table {
        font-size: 12px;
    }

    .rankings-table th,
    .rankings-table td {
        padding: var(--spacing-sm);
    }

    .rank-avatar {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .rank-badge {
        font-size: 9px;
    }

    /* Sidebar */
    .sidebar-stats {
        padding: var(--spacing-sm);
        border-bottom: none;
    }

    .sidebar-stat {
        padding: var(--spacing-xs) 0;
        font-size: 12px;
    }

    .sidebar-menu {
        padding: var(--spacing-md) 0;
    }

    .sidebar-menu-link {
        padding: var(--spacing-md) var(--spacing-sm);
        font-size: 13px;
    }

    .sidebar-menu-icon {
        font-size: 16px;
    }

    .sidebar-footer {
        padding: var(--spacing-md) var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .sidebar-footer-btn {
        padding: var(--spacing-sm);
        font-size: 12px;
    }

    /* Hamburger */
    .hamburger-toggle {
        width: 40px;
        height: 40px;
        top: 8px;
        left: 8px;
    }

    .hamburger-line {
        width: 18px;
    }

    /* Spacing */
    .m-0 { margin: 0; }
    .m-sm { margin: var(--spacing-xs); }
    .m-md { margin: var(--spacing-sm); }
    .m-lg { margin: var(--spacing-md); }

    .mt-sm { margin-top: var(--spacing-xs); }
    .mt-md { margin-top: var(--spacing-sm); }
    .mt-lg { margin-top: var(--spacing-md); }

    .mb-sm { margin-bottom: var(--spacing-xs); }
    .mb-md { margin-bottom: var(--spacing-sm); }
    .mb-lg { margin-bottom: var(--spacing-md); }

    .p-sm { padding: var(--spacing-xs); }
    .p-md { padding: var(--spacing-sm); }
    .p-lg { padding: var(--spacing-md); }

    /* Gap */
    .gap-sm { gap: var(--spacing-xs); }
    .gap-md { gap: var(--spacing-sm); }
    .gap-lg { gap: var(--spacing-md); }

    /* Spacing utilities - full width */
    .flex-column {
        width: 100%;
    }

    /* Content wrapper */
    .content-wrapper {
        padding: var(--spacing-sm);
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none;
    }

    /* Trade offers */
    .trade-offer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .trade-arrow {
        transform: rotate(90deg);
    }

    .trade-actions {
        width: 100%;
    }

    .trade-actions .btn {
        width: 100%;
    }
}

/* ============ LANDSCAPE MODE ============ */

@media (max-height: 600px) and (orientation: landscape) {
    body {
        min-height: auto;
    }

    .main-wrapper {
        height: auto;
    }

    .content-wrapper {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .top-header {
        min-height: 48px;
        padding: var(--spacing-xs) var(--spacing-md);
        padding-right: 68px;
    }

    .header-resources {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
    }

    h1, h2 {
        margin-bottom: var(--spacing-sm);
    }

    .city-stats {
        margin-bottom: var(--spacing-md);
    }

    .buildings-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        margin-bottom: var(--spacing-md);
    }

    .building-card {
        min-height: 0;
    }

    .building-portrait {
        height: 90px;
    }

    .economy-chart {
        height: 120px;
    }

    /* Stadtansicht: Labels sind Dauer-Beschriftung, nicht nur Hover -
       auf kleinen Screens nur verkleinern statt ausblenden */
    .city-hotspot-label { font-size: 9px; padding: 1px 5px; top: -20px; }
}

/* ============ PRINT STYLES ============ */

@media print {
    .sidebar,
    .hamburger-toggle,
    .sidebar-overlay,
    .top-header {
        display: none;
    }

    .main-content {
        width: 100%;
    }

    .content-wrapper {
        background: white;
        color: black;
    }

    .card,
    .building-card {
        page-break-inside: avoid;
    }
}