/*
 * Kolonia – styl gry (przewodnik stylu: docs/06-przewodnik-stylu.md)
 * Grafiki: public/images/v3 (import: php artisan game:import-assets).
 * Treść stron nadal korzysta z Bootstrapa – niżej jest jego przestylowanie na ciemny motyw gry.
 */

@font-face {
    font-family: Cinzel;
    src: url('../images/v3/fonts/cinzel.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../images/v3/fonts/sourcesans3.woff2') format('woff2');
    font-weight: 200 900;
    font-display: swap;
}

/* Paleta „ciepły grafit” (v0.57.0): neutralne powierzchnie bez zieleni; zielony tylko dla wartości dodatnich. */
:root {
    --k-bg: #141312;            /* tło strony */
    --k-bg-header: #100f0e;     /* górny pasek */
    --k-bg-sidebar: #1a1917;    /* pasek boczny */
    --k-panel: #1f1d1b;         /* karty, panele, kafelki */
    --k-raised: #292623;        /* hover, aktywna pozycja, tło paska postępu */
    --k-line: #3a3632;          /* ramki i separatory */
    --k-line-hover: #4a453f;    /* ramka po najechaniu */
    --k-text: #ece7df;
    --k-muted: #9c958b;
    --k-bg-rgb: 20 19 18;
    --k-bg-header-rgb: 16 15 14;
    --k-bg-sidebar-rgb: 26 25 23;
    --k-panel-rgb: 31 29 27;
    --k-raised-rgb: 41 38 35;
    --k-line-rgb: 58 54 50;
    --k-brass: #79663e;
    --k-brass-light: #a98a45;
    --k-gold: #e9bb55;
    --k-ink: #1c1810;
    --k-red: #f48780;
    --k-cyan: #80d0d0;
    --k-focus: var(--k-gold);
    --k-success: #a4d4b0;
    --k-success-rgb: 164 212 176;
    --k-warning: #f1c66d;
    --k-nav: 184px;
    --k-top: 76px;   /* projekt v13 */
    --k-font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --k-serif: Cinzel, Georgia, 'Times New Roman', serif;
    color-scheme: dark;
    scrollbar-color: var(--k-line-hover) var(--k-bg);
}

[data-bs-theme=dark] {
    --bs-body-bg: var(--k-bg);
    --bs-body-color: var(--k-text);
    --bs-body-font-family: var(--k-font);
    --bs-body-font-size: 1rem;
    --bs-secondary-color: var(--k-muted);
    --bs-tertiary-bg: var(--k-panel);
    --bs-secondary-bg: var(--k-raised);
    --bs-border-color: var(--k-line);
    --bs-border-color-translucent: var(--k-line);
    --bs-link-color: var(--k-gold);
    --bs-link-color-rgb: 233, 187, 85;
    --bs-link-hover-color: #ffe495;
    --bs-link-hover-color-rgb: 255, 228, 149;
    --bs-emphasis-color: #fff8e8;
    --bs-heading-color: #f1e3b7;
    --bs-primary: var(--k-gold);
    --bs-primary-rgb: 233, 187, 85;
    --bs-primary-text-emphasis: #f5d78e;
    --bs-primary-bg-subtle: #3d331c;
    --bs-primary-border-subtle: #79663e;
    --bs-success-rgb: 164, 212, 176;
    --bs-warning-rgb: 241, 198, 109;
    --bs-danger-rgb: 244, 135, 128;
    --bs-info-rgb: 128, 208, 208;
    --bs-focus-ring-color: rgba(233, 187, 85, .45);
    --bs-card-bg: transparent;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.k-body {
    margin: 0;
    min-height: 100dvh;
    background: var(--k-bg);
    color: var(--k-text);
    font: 16px/1.45 var(--k-font);
}

/* Las za treścią – wytłumiony, żeby nie dawał zielonego nalotu. */
body.k-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgb(var(--k-bg-rgb) / .75), rgb(var(--k-bg-rgb) / .75)),
        url('../images/v3/ui/bg_page.webp') center / cover;
    filter: saturate(.25) brightness(.55);
    pointer-events: none;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .k-serif {
    font-family: var(--k-serif);
    font-weight: 600;
    letter-spacing: .01em;
}

a {
    color: var(--k-gold);
}

a:hover {
    color: #ffe495;
}

:focus-visible {
    outline: 3px solid var(--k-focus);
    outline-offset: 3px;
}

.icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex: none;
}

[hidden] {
    display: none !important;
}

/* ===================================================================
   Rama gry: górny pasek, menu boczne, treść
   =================================================================== */

.k-topbar {
    height: var(--k-top);
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 20px;
    background: linear-gradient(rgb(var(--k-panel-rgb) / .94), rgb(var(--k-bg-rgb) / .96)), url('../images/v3/ui/panel_texture.webp');
    border-bottom: 1px solid #9e824a;
    box-shadow: 0 2px 12px #0006;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.k-brand {
    width: calc(var(--k-nav) - 20px);
    flex: none;
    display: block;
}

.k-brand img {
    height: auto;
    display: block;
}

.k-logo {
    width: 100%;
}

/* znak zamiast pełnego logo – włącza go zwężony nagłówek (projekt v13) */
.k-brand .k-logo-mark {
    display: none;
    width: 48px;
}

/* ===================================================================
   Belka surowców – projekt grafika v13 (kolonia-wdrozenie-v13-naglowek)
   Jedna wspólna belka zamiast pięciu ramek; kafel: ikona → nazwa → wartość → produkcja.
   =================================================================== */
.k-resources {
    display: grid;
    grid-template-columns: repeat(4, minmax(116px, 1fr)) minmax(190px, 1.35fr);
    flex: 1;
    min-width: 0;
    max-width: 1150px;
    height: 58px;
    margin: auto;
    border: 1px solid #d2b24f3b;
    border-radius: 11px;
    background: linear-gradient(180deg, rgb(var(--k-raised-rgb) / .78), rgb(var(--k-panel-rgb) / .9));
    box-shadow: inset 0 1px #ffffff09, 0 5px 14px #00000029;
}

.k-resource {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 14px;
    text-align: left;
    color: var(--k-text);
    text-decoration: none;
    border-right: 1px solid #d2b24f3b;
}

.k-resource:last-child {
    border-right: 0;
    padding-right: 16px;
}

.k-resource:hover,
.k-resource:focus-visible {
    background: #dab44212;
}

.k-resource:focus-visible {
    outline: 2px solid var(--k-gold);
    outline-offset: -2px;
}

.k-res-icon {
    width: 36px;
    height: 36px;
    flex: none;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px #00000059);
}

.k-res-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.k-res-name {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9c6b8;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* wartość i produkcja w jednym wierszu: liczba po lewej, przyrost dosunięty do prawej */
.k-res-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

.k-res-row b {
    flex: 0 0 auto;   /* wartość zawsze w całości… */
    font-family: Georgia, 'Times New Roman', serif;   /* Cinzel rysuje cyfry i „tys.” kapitalikami */
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff7df;
    font-variant-numeric: tabular-nums;
}

.k-rate {
    flex: 0 1 auto;   /* …a bardzo długi przyrost skróci się, zamiast nachodzić na liczbę */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    color: #9bd879;
    font-variant-numeric: tabular-nums;
}

/* Magazyn: stan i pojemność, pasek zajęcia, pod nim czas do zapełnienia */
.k-store-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    min-width: 0;
}

.k-store-top b {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    color: #fff7df;
    font-variant-numeric: tabular-nums;
}

.k-store-top b small {
    font-family: var(--k-font);
    font-size: 10px;
    font-weight: 500;
    color: var(--k-muted);
}

.k-store-track {
    height: 4px;
    margin: 4px 0 3px;
    border-radius: 99px;
    overflow: hidden;
    background: #ffffff1f;
}

.k-store-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9b7a27, #dfb83e);
}

.k-store-track.is-high > span {
    background: linear-gradient(90deg, #b8791f, #f0a93c);
}

.k-store-meta {
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    color: #d7c98c;
    font-variant-numeric: tabular-nums;
}

.k-store-meta.k-full {
    color: var(--k-warning);
    font-weight: 700;
}

.k-user {
    position: relative;
    flex: none;
}

.k-user > button {
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    min-height: 44px;
    text-align: left;
}

.k-user img {
    width: 42px;
    height: 42px;
    border: 1px solid #c5a35b;
    border-radius: 50%;
    object-fit: cover;
}

.k-user-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 15px;
}

.k-user-name small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--k-gold);
    font-variant-numeric: tabular-nums;
}

.k-user .k-points-icon {
    width: 16px;
    height: 16px;
    border: 0 !important;
    border-radius: 0 !important;
}

.k-chevron {
    color: var(--k-gold);
}

.k-popover {
    position: absolute;
    right: 0;
    top: 54px;
    z-index: 1050;
    background: var(--k-panel);
    border: 1px solid var(--k-brass);
    border-radius: 8px;
    padding: 8px;
    min-width: 170px;
    box-shadow: 0 8px 24px #0008;
}

.k-popover button {
    border: 0;
    background: transparent;
    color: var(--k-text);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 6px;
}

.k-popover button:hover {
    background: var(--k-line);
}

.k-layout {
    display: grid;
    grid-template-columns: var(--k-nav) minmax(0, 1fr);
    min-height: calc(100dvh - var(--k-top));
}

.k-sidebar {
    background: linear-gradient(90deg, rgb(var(--k-bg-sidebar-rgb) / .93), rgb(var(--k-panel-rgb) / .8));
    border-right: 1px solid var(--k-line);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--k-top);
    height: calc(100dvh - var(--k-top));
    overflow-y: auto;
}

.k-nav-item {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: #efe6d4;
    text-decoration: none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.k-nav-item .icon {
    width: 28px;
    height: 28px;
}

.k-nav-item:hover {
    background: var(--k-raised);
    color: #fff;
}

.k-nav-item.active {
    background: var(--k-raised);
    border-top-color: #d4b85e75;
    border-bottom-color: #d4b85e75;
    box-shadow: inset 3px 0 var(--k-gold);
    color: var(--k-gold);
}

.k-nav-label {
    font-size: 15px;
    white-space: nowrap;
}

.k-badge {
    font: 600 11px/1.2 var(--k-font);
    background: var(--k-gold);
    color: var(--k-panel);
    border-radius: 4px;
    padding: 2px 5px;
    margin-left: auto;
}

.k-badge.unread {
    border-radius: 20px;
    background: #d83b49;
    color: #fff;
    min-width: 18px;
    text-align: center;
}

.k-badge.info {
    border-radius: 20px;
    background: var(--k-raised);
    color: var(--k-cyan);
    min-width: 18px;
    text-align: center;
}

.k-nav-foot {
    margin-top: auto;
    padding: 24px 20px 0;
    color: var(--k-muted);
    font-size: 12px;
}

.k-nav-foot small {
    display: block;
    margin-top: 4px;
    opacity: .6;
}

.k-online {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9bbc6c;
    margin-right: 6px;
}

.k-main {
    min-width: 0;
    padding: 24px 24px 16px;
    max-width: 1400px;
    width: 100%;
}

.k-main-plain {
    padding-top: 40px;
}

.k-footer {
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid var(--k-raised);
    text-align: center;
    color: var(--k-muted);
    font-size: 13px;
}

.k-icon-btn,
.k-hamburger,
.k-close-nav {
    display: none;
}

.k-veil {
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 1039;
}

/* Nagłówek strony (tytuł + opis) */
.k-page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.k-page-title h1 {
    font-size: 28px;
    margin: 0;
}

.k-page-title .k-subtitle {
    color: var(--k-muted);
    font-size: 13px;
}

/* ===================================================================
   Bootstrap w motywie gry
   =================================================================== */

.card {
    --bs-card-bg: transparent;
    --bs-card-border-color: #a98a4599;
    --bs-card-cap-bg: rgb(var(--k-bg-sidebar-rgb) / .6);
    --bs-card-color: var(--k-text);
    background: linear-gradient(110deg, rgb(var(--k-panel-rgb) / .91), rgb(var(--k-bg-rgb) / .95)), url('../images/v3/ui/panel_texture.webp');
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgb(var(--k-bg-sidebar-rgb) / .67), 0 10px 24px #0004;
}

.card .card {
    background: rgb(var(--k-bg-header-rgb) / .4);
    box-shadow: none;
    border-color: var(--k-line);
}

.card-header {
    font-weight: 600;
    color: #f1e3b7;
}

.card-title {
    font-family: var(--k-serif);
    color: #f1e3b7;
}

.shadow-sm {
    box-shadow: 0 0 0 3px rgb(var(--k-bg-sidebar-rgb) / .67), 0 10px 24px #0004 !important;
}

.bg-light,
.bg-white,
.bg-body,
.bg-body-tertiary {
    background-color: var(--k-panel) !important;
}

.text-muted,
.text-body-secondary {
    color: var(--k-muted) !important;
}

.text-dark {
    color: var(--k-text) !important;
}

.border {
    border-color: var(--k-line) !important;
}

/* Przyciski: główny = złoto, pozostałe = ciemne z mosiężną ramką */
.btn {
    --bs-btn-border-radius: 7px;
    --bs-btn-font-weight: 600;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(233, 187, 85, .5);
}

.btn-primary,
.btn-warning,
.btn-success {
    --bs-btn-color: #201c0c;
    --bs-btn-bg: #e9bb55;
    --bs-btn-border-color: #ffdd82;
    --bs-btn-hover-color: #201c0c;
    --bs-btn-hover-bg: #f3cb6a;
    --bs-btn-hover-border-color: #ffe7a0;
    --bs-btn-active-color: #201c0c;
    --bs-btn-active-bg: #d6a43b;
    --bs-btn-active-border-color: #ffdd82;
    --bs-btn-disabled-color: var(--k-muted);
    --bs-btn-disabled-bg: var(--k-line);
    --bs-btn-disabled-border-color: var(--k-line-hover);
    background-image: linear-gradient(#f8d66f, #d9a42a);
    box-shadow: inset 0 1px 0 #ffedb8, 0 2px 6px #0004;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-success:hover {
    background-image: linear-gradient(#ffe495, #e9bb55);
}

.btn-primary:disabled,
.btn-warning:disabled,
.btn-success:disabled,
.btn-primary.disabled,
.btn-warning.disabled,
.btn-success.disabled {
    background-image: none;
    box-shadow: none;
}

.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-info {
    --bs-btn-color: var(--k-text);
    --bs-btn-bg: rgb(var(--k-panel-rgb) / .91);
    --bs-btn-border-color: var(--k-brass);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--k-line);
    --bs-btn-hover-border-color: #b0904f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--k-line-hover);
    --bs-btn-active-border-color: #b0904f;
    --bs-btn-disabled-color: var(--k-muted);
    --bs-btn-disabled-bg: var(--k-raised);
    --bs-btn-disabled-border-color: var(--k-line-hover);
}

.btn-outline-danger,
.btn-danger {
    --bs-btn-color: #ffd7d3;
    --bs-btn-bg: #3a1d1ae0;
    --bs-btn-border-color: #96524a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5a2b26;
    --bs-btn-hover-border-color: #c26a60;
    --bs-btn-active-bg: #6d332d;
    --bs-btn-disabled-color: #a88f8c;
    --bs-btn-disabled-bg: #2a1d1b;
    --bs-btn-disabled-border-color: #4c3431;
}

.btn-link {
    --bs-btn-color: var(--k-gold);
    --bs-btn-hover-color: #ffe495;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.5);
}

/* Tabele */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--k-text);
    --bs-table-border-color: var(--k-line);
    --bs-table-striped-bg: #ffffff08;
    --bs-table-hover-bg: #ffffff0d;
    --bs-table-hover-color: var(--k-text);
    --bs-table-striped-color: var(--k-text);
}

.table > thead th,
.table-light,
thead.table-light th {
    --bs-table-bg: rgb(var(--k-bg-sidebar-rgb) / .8);
    --bs-table-color: #d9c690;
    color: #d9c690;
    font-weight: 600;
    font-size: .9rem;
    border-bottom-color: #a98a4577;
}

/* Formularze */
.form-control,
.form-select {
    --bs-body-bg: var(--k-bg);
    background-color: var(--k-bg);
    border-color: var(--k-line-hover);
    color: var(--k-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--k-bg-sidebar);
    border-color: #a98a45;
    color: var(--k-text);
    box-shadow: 0 0 0 3px rgba(233, 187, 85, .35);
}

.form-control::placeholder {
    color: var(--k-muted);
}

.form-range::-webkit-slider-thumb {
    background: var(--k-gold);
}

.form-range::-moz-range-thumb {
    background: var(--k-gold);
}

.form-check-input:checked {
    background-color: var(--k-gold);
    border-color: var(--k-gold);
}

.input-group-text {
    background: var(--k-panel);
    border-color: var(--k-line-hover);
    color: var(--k-muted);
}

/* Komunikaty */
.alert {
    --bs-alert-border-radius: 8px;
    border-width: 1px;
}

.alert-success {
    --bs-alert-color: #c3e6cb;
    --bs-alert-bg: var(--k-raised);
    --bs-alert-border-color: var(--k-line-hover);
    --bs-alert-link-color: #e6f5ea;
}

.alert-danger {
    --bs-alert-color: #ffc9c4;
    --bs-alert-bg: #3a1d1a;
    --bs-alert-border-color: #96524a;
    --bs-alert-link-color: #ffe0dc;
}

.alert-warning {
    --bs-alert-color: #f5d68c;
    --bs-alert-bg: #3a3019;
    --bs-alert-border-color: #8a7440;
    --bs-alert-link-color: #ffe7a8;
}

.alert-info,
.alert-primary,
.alert-secondary,
.alert-light {
    --bs-alert-color: var(--k-text);
    --bs-alert-bg: var(--k-raised);
    --bs-alert-border-color: var(--k-line);
    --bs-alert-link-color: var(--k-text);
}

/* Znaczniki i paski postępu */
.badge.text-bg-light,
.badge.bg-light,
.badge.text-bg-secondary,
.badge.bg-secondary {
    background-color: var(--k-raised) !important;
    color: var(--k-text) !important;
    border: 1px solid var(--k-line);
}

.badge.text-bg-primary,
.badge.bg-primary,
.badge.text-bg-warning,
.badge.bg-warning {
    background-color: var(--k-gold) !important;
    color: #1f1a0b !important;
}

.badge.text-bg-success,
.badge.bg-success {
    background-color: var(--k-raised) !important;
    color: var(--k-success) !important;
}

.badge.text-bg-info,
.badge.bg-info {
    background-color: var(--k-raised) !important;
    color: var(--k-cyan) !important;
}

.progress {
    --bs-progress-bg: var(--k-bg-header);
    --bs-progress-bar-bg: var(--k-gold);
    border: 1px solid var(--k-line);
}

.progress-bar.bg-success {
    background-color: #6fb07f !important;
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--k-text);
    --bs-list-group-border-color: var(--k-line);
    --bs-list-group-action-hover-bg: #ffffff0d;
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-active-bg: var(--k-raised);
    --bs-list-group-active-border-color: #a98a45;
}

.nav-tabs,
.nav-pills {
    --bs-nav-link-color: var(--k-muted);
    --bs-nav-link-hover-color: var(--k-text);
    --bs-nav-tabs-border-color: var(--k-line);
    --bs-nav-tabs-link-active-bg: var(--k-panel);
    --bs-nav-tabs-link-active-color: var(--k-gold);
    --bs-nav-tabs-link-active-border-color: #a98a45 #a98a45 var(--k-panel);
    --bs-nav-pills-link-active-bg: var(--k-raised);
    --bs-nav-pills-link-active-color: var(--k-gold);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--k-panel);
    --bs-dropdown-border-color: var(--k-brass);
    --bs-dropdown-link-color: var(--k-text);
    --bs-dropdown-link-hover-bg: var(--k-line);
    --bs-dropdown-link-hover-color: #fff;
}

.modal-content {
    --bs-modal-bg: var(--k-panel);
    --bs-modal-border-color: var(--k-brass);
}

.tooltip {
    --bs-tooltip-bg: var(--k-bg-sidebar);
    --bs-tooltip-color: var(--k-text);
}

.popover {
    --bs-popover-bg: var(--k-panel);
    --bs-popover-border-color: var(--k-brass);
    --bs-popover-body-color: var(--k-text);
    --bs-popover-header-bg: var(--k-bg-sidebar);
    --bs-popover-header-color: #f1e3b7;
}

hr {
    border-color: #a98a45;
    opacity: .35;
}

code {
    color: #f5d78e;
}

/* ===================================================================
   Tablet: wąskie menu z ikonami
   =================================================================== */

@media (min-width: 900px) and (max-width: 1350px) {
    :root {
        --k-nav: 78px;
    }

    .k-brand {
        width: 48px;
    }

    .k-brand .k-logo {
        display: none;
    }

    .k-brand .k-logo-mark {
        display: block;
    }

    .k-nav-item {
        justify-content: center;
        padding: 16px 8px;
        position: relative;
    }

    .k-nav-label {
        display: none;
    }

    .k-nav-item .k-badge {
        position: absolute;
        right: 5px;
        top: 8px;
    }

    .k-nav-foot {
        font-size: 10px;
        padding: 18px 8px 0;
        text-align: center;
    }

    .k-resources {
        grid-template-columns: repeat(4, minmax(96px, 1fr)) minmax(150px, 1.25fr);
    }

    .k-resource {
        position: relative;
        gap: 7px;
        padding: 6px 10px;
    }

    .k-res-icon {
        width: 32px;
        height: 32px;
    }

    .k-res-row {
        justify-content: flex-start;
    }

    .k-res-row b {
        font-size: 18px;
    }

    /* mniej miejsca w wierszu: przyrost przenosi się nad wartość, do prawego górnego rogu */
    .k-rate {
        position: absolute;
        right: 10px;
        top: 9px;
    }
}

/* najwęższy pulpit: nazwy surowców ustępują, wartość i przyrost stają jedno pod drugim */
@media (min-width: 900px) and (max-width: 1100px) {
    .k-res-name {
        display: none;
    }

    .k-res-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    .k-res-row b {
        font-size: 17px;
    }

    .k-rate {
        position: static;
    }

    .k-store-top b {
        font-size: 15px;
    }

    .k-user-name {
        display: none;
    }
}

/* ===================================================================
   Telefon: menu w szufladzie, surowce pod logo
   =================================================================== */

@media (max-width: 899px) {
    :root {
        --k-top: 112px;
        --k-nav: 0px;
    }

    .k-topbar {
        padding: 0 12px 56px;
        gap: 10px;
    }

    .k-brand {
        width: 150px;
        margin: auto;
    }

    .k-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--k-text);
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    .k-user img {
        width: 36px;
        height: 36px;
    }

    .k-user-name,
    .k-chevron {
        display: none;
    }

    /* telefon (projekt v13): belka zasobów w drugim wierszu nagłówka, przewijana poziomo –
       pięciu kafli nie ściskamy do szerokości ekranu */
    .k-resources {
        position: absolute;
        bottom: 6px;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        height: 54px;
        display: flex;
        border-radius: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .k-resources::-webkit-scrollbar {
        display: none;
    }

    .k-resource {
        flex: 0 0 116px;
        scroll-snap-align: start;
        padding: 6px 9px;
        gap: 7px;
    }

    .k-storage {
        flex: 0 0 170px;
    }

    .k-res-icon {
        width: 29px;
        height: 29px;
    }

    .k-res-name {
        display: none;
    }

    .k-res-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .k-res-row b {
        font-size: 16px;
        line-height: 20px;
    }

    .k-rate {
        position: static;
        font-size: 10px;
    }

    .k-store-top b {
        font-size: 15px;
    }

    .k-layout {
        display: block;
    }

    .k-sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: 280px;
        max-width: 85vw;
        z-index: 1040;
        background: rgb(var(--k-panel-rgb) / .97);
        padding-top: 12px;
        box-shadow: 8px 0 30px #0009;
    }

    .k-sidebar.open {
        display: flex;
    }

    .k-close-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 12px 12px;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: var(--k-text);
    }

    .k-close-nav .icon {
        width: 20px;
        height: 20px;
    }

    .k-nav-item {
        min-height: 52px;
        padding: 12px 20px;
    }

    .k-main {
        padding: 16px 12px 16px;
    }

    .k-page-title h1 {
        font-size: 21px;
    }
}

/* etykieta Magazynu w górnym pasku: czas do zapełnienia albo „Pełny!” */
#res-cap-label.k-full {
    color: var(--k-warning);
    font-weight: 700;
}

/* ---- dolny pasek nawigacji i arkusz „Więcej” (telefon < 900 px, projekt v5 – docs/09) ---- */
.k-bottomnav,
.k-more,
.k-more-veil {
    display: none;
}

:root {
    --k-bottom: 0px;
}

@media (max-width: 899px) {
    :root {
        --k-top: 92px;
        --k-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* przewijanie do elementu (fokus, kotwice) nie chowa go pod dolnym paskiem ani pod górą */
    html {
        scroll-padding-bottom: calc(var(--k-bottom) + 12px);
        scroll-padding-top: calc(var(--k-top) + 12px);
    }

    /* górny pasek: rząd logo + awatar 44 px, pod nim surowce 48 px; menu ☰ zastępuje dolny pasek */
    .k-topbar {
        padding: env(safe-area-inset-top, 0px) 12px 48px;
        height: calc(var(--k-top) + env(safe-area-inset-top, 0px));
        align-items: flex-start;
    }

    .k-topbar > .k-brand,
    .k-topbar > .k-user {
        height: 44px;
        display: flex;
        align-items: center;
    }

    .k-brand {
        width: 124px;
        margin: 0 auto 0 0;
    }

    .k-user button {
        min-width: 44px;
        min-height: 44px;
    }

    .k-user img {
        width: 32px;
        height: 32px;
    }

    .k-hamburger,
    .k-sidebar,
    .k-sidebar.open,
    .k-veil {
        display: none !important;
    }

    .k-resources,
    .k-resource {
        height: 48px;
    }

    .k-main {
        padding-bottom: calc(var(--k-bottom) + 16px);
    }

    .k-bottomnav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1045;
        height: var(--k-bottom);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--k-bg-sidebar);
        border-top: 1px solid var(--k-brass);
        box-shadow: 0 -4px 16px #0007;
    }

    .k-keyboard .k-bottomnav {
        display: none;
    }

    .k-bn-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 64px;
        min-width: 0;
        padding: 0;
        color: var(--k-muted);
        text-decoration: none;
        background: transparent;
        border: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .k-bn-item:active {
        background: var(--k-line);
    }

    .k-bn-item:focus-visible {
        outline: 3px solid var(--k-focus);
        outline-offset: -3px;
    }

    .k-bn-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 30px;
        border-radius: 8px;
    }

    .k-bn-icon .icon {
        width: 24px;
        height: 24px;
    }

    .k-bn-label {
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-bn-item.is-active {
        color: var(--k-gold);
    }

    .k-bn-item.is-active .k-bn-icon {
        background: var(--k-line);
    }

    .k-bn-item.is-active .k-bn-label {
        font-weight: 700;
    }

    .k-bn-item.is-active::before {
        content: '';
        position: absolute;
        top: -1px;
        left: calc(50% - 12px);
        width: 24px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--k-gold);
    }

    .k-bn-badge {
        position: absolute;
        top: -6px;
        left: calc(50% + 6px);
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        font-size: 10px;
        font-weight: 700;
        line-height: 15px;
        text-align: center;
        color: var(--k-text);
    }

    .k-bn-badge.is-info {
        background: var(--k-raised);
        border: 1px solid var(--k-line-hover);
    }

    .k-bn-badge.is-alert {
        background: #452326;
        border: 1px solid var(--k-red);
    }

    .k-bn-dot {
        position: absolute;
        top: 0;
        right: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--k-gold);
    }

    /* „Więcej” – niemodalny arkusz nad dolnym paskiem */
    .k-more-veil:not([hidden]) {
        display: block;
        position: fixed;
        inset: calc(var(--k-top) + env(safe-area-inset-top, 0px)) 0 var(--k-bottom) 0;
        z-index: 1040;
        background: #0009;
    }

    .k-more:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--k-bottom);
        z-index: 1041;
        max-height: min(70dvh, calc(100dvh - var(--k-top) - var(--k-bottom) - 12px));
        padding: 10px 16px 12px;
        background: var(--k-panel);
        border: 1px solid var(--k-brass);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px #0008;
    }

    .k-more-handle {
        width: 40px;
        height: 4px;
        margin: 0 auto 6px;
        border-radius: 4px;
        background: var(--k-brass);
    }

    .k-more header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .k-more h2 {
        font-family: var(--k-serif);
        font-size: 20px;
        margin: 0;
    }

    .k-more ul {
        list-style: none;
        margin: 4px 0;
        padding: 0;
        overflow-y: auto;
    }

    .k-more li a,
    .k-more-soon {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 52px;
        padding: 8px 4px;
        font-size: 17px;
        color: var(--k-text);
        text-decoration: none;
        border-bottom: 1px solid var(--k-line);
    }

    .k-more li a.is-active {
        color: var(--k-gold);
        font-weight: 600;
    }

    .k-more li .icon {
        width: 24px;
        height: 24px;
    }

    .k-more-tag {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--k-gold);
        background: var(--k-line);
    }

    .k-more-soon {
        color: var(--k-muted);
    }

    .k-more-soon small {
        margin-left: auto;
        font-size: 13px;
    }

    .k-more footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 8px;
        color: var(--k-muted);
    }

    .k-more-logout {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 8px 14px;
        font-size: 16px;
        color: var(--k-text);
        background: var(--k-raised);
        border: 1px solid var(--k-line);
        border-radius: 8px;
    }

    .k-more-logout .icon {
        width: 22px;
        height: 22px;
    }

    /* ostrzeżenie o ataku: stały pasek pod surowcami (nie tylko plakietka) */
    .js-attack-warning {
        position: sticky;
        top: calc(var(--k-top) + env(safe-area-inset-top, 0px));
        z-index: 1025;
        min-height: 44px;
        margin: -16px -12px 12px !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Osada: karta z wyglądem zależnym od punktów */
.k-settlement-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--k-line-hover);
    background: url('../images/v3/terrain/grass_01.webp') center / cover;
    flex: none;
}

.k-storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.k-storage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--k-line);
    border-radius: 8px;
    background: rgb(var(--k-bg-header-rgb) / .4);
}

.k-storage-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: none;
}

.k-storage-item > div {
    flex: 1;
    min-width: 0;
}

.k-storage-item strong {
    font-variant-numeric: tabular-nums;
}

.k-inline-icon .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

.k-resource em.k-neg {
    color: #f48780;
}


/* podpowiedź przy ikonach wąskiego menu (partials/shell_nav) */
.k-nav-tip {
    position: fixed;
    z-index: 1080;
    transform: translateY(-50%);
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--k-text);
    background: rgb(var(--k-panel-rgb) / .95);
    border: 1px solid var(--k-brass);
    border-radius: 7px;
    box-shadow: 0 4px 12px #0008;
    pointer-events: none;
}