@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@500;700&display=swap');

/* ============================================================
   TOKENY: paleta "kuźnia o zmierzchu" - obsydian + żar węgli
   ============================================================ */
:root{
    --bg: #15110c;
    --bg-panel: #1f1811;
    --bg-panel-2: #271e15;
    --stone: #40342420;
    --stone-line: #47392766;
    --ember: #e2a13d;
    --ember-bright: #f6c66c;
    --ember-deep: #a85f22;
    --moss: #7a9a5f;
    --moss-deep: #4f6b3c;
    --blood: #b5493a;
    --parchment: #ecdfc2;
    --parchment-dim: #b3a487;
    --font-display: 'Cinzel', serif;
    --font-body: 'Spectral', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 10px;
    --shadow-deep: 0 10px 30px rgba(0,0,0,0.45);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
    background: radial-gradient(ellipse at top, #241a10 0%, var(--bg) 55%);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
}
h1,h2,h3{ font-family: var(--font-display); letter-spacing: 0.03em; color: var(--ember-bright); font-weight: 700; margin: 0 0 0.6em; }
h2{ font-size: 1.25rem; border-bottom: 1px solid var(--stone-line); padding-bottom: 0.5rem; }
p{ margin: 0 0 0.8em; }
code{ font-family: var(--font-mono); background: #00000040; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: var(--ember-bright); }
a{ color: var(--ember); }
.hidden{ display:none !important; }
.lead{ color: var(--parchment-dim); max-width: 60ch; }
.hint{ color: var(--parchment-dim); font-size: 0.85rem; }

/* ---------- przyciski ---------- */
.btn{
    font-family: var(--font-body); font-weight: 600; cursor:pointer;
    border-radius: 8px; border: 1px solid var(--stone-line); padding: 0.55rem 1.1rem;
    background: var(--bg-panel-2); color: var(--parchment); transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    font-size: 0.95rem;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: linear-gradient(180deg, var(--ember-bright), var(--ember-deep)); color:#241505; border-color: var(--ember-deep); box-shadow: 0 0 18px #e2a13d33; }
.btn-primary:hover{ box-shadow: 0 0 22px #e2a13d55; }
.btn-primary:disabled{ opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{ background: transparent; }
.btn-danger{ background: #331512; border-color: var(--blood); color: #ffb3a3; }
.btn-small{ padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.inline-form{ display:inline-block; }

/* ============================================================
   EKRAN LOGOWANIA (gra)
   ============================================================ */
.auth-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 2rem; }
.auth-card{
    width: 100%; max-width: 380px; background: var(--bg-panel); border: 1px solid var(--stone-line);
    border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-deep);
}
.brand{ font-family: var(--font-display); font-size: 1.6rem; color: var(--ember-bright); text-align:center; margin-bottom:0.2rem; }
.subtitle{ text-align:center; color: var(--parchment-dim); font-style: italic; }
.auth-tabs{ display:flex; gap: 0.4rem; margin: 1.2rem 0; }
.auth-tab{ flex:1; padding: 0.5rem; background: var(--bg-panel-2); border:1px solid var(--stone-line); color: var(--parchment-dim); border-radius: 8px; cursor:pointer; font-family: var(--font-body); }
.auth-tab.active{ background: var(--ember-deep); color: var(--parchment); border-color: var(--ember); }
.auth-form label{ display:block; margin-bottom: 0.9rem; font-size: 0.9rem; color: var(--parchment-dim); }
.auth-form input{ display:block; width:100%; margin-top: 0.3rem; }
.auth-form button{ width:100%; margin-top: 0.4rem; }

input[type=text], input[type=password], input[type=number], textarea, select{
    background: #0f0b07; border: 1px solid var(--stone-line); color: var(--parchment);
    padding: 0.5rem 0.6rem; border-radius: 6px; font-family: var(--font-body); font-size: 0.95rem;
}
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--ember); outline-offset: 1px; }

.flash{ padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.flash-error{ background: #3a1512; border: 1px solid var(--blood); color: #ffb3a3; }
.flash-success{ background: #1c2c14; border: 1px solid var(--moss); color: #cbe3b4; }

/* ============================================================
   GRA - layout główny
   ============================================================ */
.game-header{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding: 0.8rem 1.5rem; background: linear-gradient(180deg, #241b12, #1a140d);
    border-bottom: 2px solid var(--ember-deep); position:sticky; top:0; z-index:10;
}
.header-stats{ display:flex; gap: 0.6rem; flex-wrap:wrap; }
.stat-pill{
    background: var(--bg-panel-2); border: 1px solid var(--stone-line); border-radius: 999px;
    padding: 0.3rem 0.9rem; font-family: var(--font-mono); font-size: 0.85rem;
}
.tab-nav{ display:flex; gap:0.3rem; padding: 0.6rem 1.5rem 0; background: #1a140d; flex-wrap:wrap; }
.tab-btn{
    background: none; border: none; color: var(--parchment-dim); padding: 0.7rem 1.1rem;
    cursor:pointer; font-family: var(--font-display); font-size: 0.95rem; border-bottom: 3px solid transparent;
}
.tab-btn.active{ color: var(--ember-bright); border-bottom-color: var(--ember); }
.game-main{ padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.card{
    background: var(--bg-panel); border: 1px solid var(--stone-line); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow-deep); position:relative; overflow:hidden;
}
.card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background: linear-gradient(90deg, transparent, var(--ember), transparent);
    opacity:0.6;
}
.card-icon{ font-size: 1.8rem; }
.card-title{ font-family: var(--font-display); font-size: 1.05rem; color: var(--ember-bright); margin: 0.3rem 0; }
.card-qty{ font-family: var(--font-mono); font-size: 1.4rem; color: var(--parchment); }
.card-sub{ color: var(--parchment-dim); font-size: 0.82rem; margin-bottom: 0.5rem; }
.ingredient-list{ list-style:none; padding:0; margin: 0.4rem 0; font-size: 0.85rem; color: var(--parchment-dim); }
.ingredient-list li{ display:flex; justify-content:space-between; padding: 2px 0; }
.ingredient-list li.insufficient{ color: var(--blood); }

.workers-list{ display:flex; flex-direction:column; gap: 0.7rem; margin-bottom: 1.5rem; }
.worker-row{
    display:flex; align-items:center; gap:1rem; background: var(--bg-panel); border:1px solid var(--stone-line);
    border-radius: var(--radius); padding: 0.8rem 1rem; flex-wrap:wrap;
}
.worker-role-icon{ font-size: 1.5rem; }
.worker-meta{ flex:1; min-width: 160px; }
.worker-meta strong{ color: var(--ember-bright); }
.worker-status{ font-size: 0.82rem; color: var(--parchment-dim); }
.worker-assign{ display:flex; flex-direction:column; gap:0.4rem; align-items:stretch; }
.worker-assign select{ min-width: 180px; }

.progress-bar{ height: 8px; background:#00000055; border-radius: 999px; overflow:hidden; margin-top:0.3rem; }
.progress-bar-fill{ height:100%; background: linear-gradient(90deg, var(--moss-deep), var(--moss)); transition: width .3s linear; }
.progress-bar-fill.adventure{ background: linear-gradient(90deg, var(--ember-deep), var(--ember)); }

.badge{ padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-family: var(--font-mono); }
.badge-gatherer{ background:#2c3a20; color:#c6dba8; border:1px solid var(--moss-deep); }
.badge-crafter{ background:#3a2a14; color:#f0cf9a; border:1px solid var(--ember-deep); }
.badge-explorer{ background:#2a1c3a; color:#d8bdf0; border:1px solid #6b4a94; }
.badge-guard{ background:#3a1414; color:#f0a8a8; border:1px solid var(--blood); }
.badge-strike{ background:#3a1512; color:#ffb3a3; border:1px solid var(--blood); }
.badge-hungry{ background:#3a2612; color:#ffcf9e; border:1px solid #a85f22; }

.hunger-row{ display:flex; align-items:center; gap:0.5rem; font-size: 0.78rem; color: var(--parchment-dim); margin-top:0.15rem; }
.hunger-bar{ flex:1; height:5px; background:#00000055; border-radius:999px; overflow:hidden; }
.hunger-bar-fill{ height:100%; background: linear-gradient(90deg, #a85f22, #e2a13d); }
.hunger-bar-fill.critical{ background: linear-gradient(90deg, #6b1f14, #b5493a); }

/* ---------- Osada / mapa kafelkowa ---------- */
.settlement-map-wrap{ overflow: auto; border: 1px solid var(--stone-line); border-radius: var(--radius); background: var(--bg-panel); padding: 0.6rem; max-width: 100%; }
.settlement-map{ display: grid; gap: 2px; width: max-content; }
.map-tile{
    width: 30px; height: 30px; display:flex; align-items:center; justify-content:center;
    font-size: 1rem; border-radius: 4px; cursor: pointer; background: #241d15; border: 1px solid transparent;
    transition: transform .1s ease;
}
.map-tile:hover{ transform: scale(1.12); z-index: 2; position:relative; }
.map-tile.fog{ background: #100c08; color: transparent; }
.map-tile.selected{ border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.map-tile.has-building{ background: #2a2011; }
.map-tile.under-construction{ background: #2a2011; opacity: 0.65; }
.map-tile.damaged-building{ background: #3a1512; border-color: var(--blood); }
.panel-inline{ margin-top: 1rem; }
.panel-inline:empty{ display:none; }
.tile-detail-card{ background: var(--bg-panel); border:1px solid var(--stone-line); border-radius: var(--radius); padding: 1rem; }
.building-option{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--stone-line); }
.building-option:last-child{ border-bottom:none; }
.building-option-info{ font-size: 0.85rem; color: var(--parchment-dim); }
.building-cost-list{ font-size:0.78rem; color: var(--parchment-dim); }

/* ---------- Postac / walka ---------- */
.stat-block{ display:grid; grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap:0.8rem; margin-bottom:0.8rem; }
.stat-block-item{ background: var(--bg-panel-2); border:1px solid var(--stone-line); border-radius: 8px; padding: 0.6rem; text-align:center; }
.stat-block-value{ display:block; font-family: var(--font-mono); font-size:1.3rem; color: var(--ember-bright); }
.stat-block-label{ font-size:0.72rem; color: var(--parchment-dim); text-transform:uppercase; letter-spacing:0.04em; }
.hp-bar{ height:8px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.4rem; }
.hp-bar-fill{ height:100%; background: linear-gradient(90deg, #7a1f1f, #c94a3a); }
.hp-bar-fill.healthy{ background: linear-gradient(90deg, var(--moss-deep), var(--moss)); }
.combat-log{ max-height:220px; overflow-y:auto; font-size:0.82rem; color: var(--parchment-dim); background:#00000030; border-radius:6px; padding:0.6rem 0.8rem; margin-top:0.6rem; }
.combat-log div{ padding:2px 0; }
.combat-log .win-line{ color: var(--moss); font-weight:600; }
.combat-log .lose-line{ color: var(--blood); font-weight:600; }

/* ---------- Straz / formacja / najazdy ---------- */
.attack-banner{ background: linear-gradient(90deg, #3a1512, #241005); border:1px solid var(--blood); border-radius: var(--radius); padding: 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.attack-banner-title{ font-family: var(--font-display); color:#ffb3a3; }
.formation-slot-empty{ color: var(--parchment-dim); font-style: italic; font-size: 0.85rem; }
.durability-bar{ height:6px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.3rem; }
.durability-bar-fill{ height:100%; background: linear-gradient(90deg, var(--moss-deep), var(--moss)); }
.durability-bar-fill.low{ background: linear-gradient(90deg, #6b1f14, #b5493a); }

.level-row{ display:flex; align-items:center; gap:0.5rem; font-size: 0.78rem; color: var(--parchment-dim); margin-top:0.15rem; }
.level-bar{ flex:1; height:5px; background:#00000055; border-radius:999px; overflow:hidden; }
.level-bar-fill{ height:100%; background: linear-gradient(90deg, #6b4a94, #9a6fce); }

.manual-btn{ margin-top: 0.5rem; width:100%; }
.equip-slots{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.equip-slot{ background: var(--bg-panel); border:1px dashed var(--stone-line); border-radius: var(--radius); padding:1rem; text-align:center; }
.equip-slot.filled{ border-style:solid; border-color: var(--ember-deep); }
.equip-slot-label{ font-size:0.75rem; color: var(--parchment-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.4rem; }
.equip-slot-empty{ color: var(--parchment-dim); font-style: italic; font-size:0.85rem; }
.sell-row{ display:flex; align-items:center; gap:0.4rem; margin-top:0.5rem; }
.sell-row input{ width: 4.5rem; }

.event-log{ display:flex; flex-direction:column-reverse; gap:0.3rem; max-height: 260px; overflow-y:auto; background: var(--bg-panel); border:1px solid var(--stone-line); border-radius: var(--radius); padding: 0.8rem 1rem; }
.event-log-entry{ font-size:0.85rem; color: var(--parchment-dim); padding: 0.25rem 0; border-bottom: 1px solid var(--stone-line); }
.event-log-entry:first-child{ border-bottom:none; }
.event-log-time{ font-family: var(--font-mono); color: var(--ember); margin-right: 0.5rem; font-size:0.78rem; }
.event-log-empty{ color: var(--parchment-dim); font-style: italic; }

.auto-sell-label{ display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; color: var(--parchment-dim); margin-top:0.3rem; }
.auto-sell-label input{ width:auto; }

.btn.on-cooldown{ opacity:0.5; cursor:not-allowed; }
.worker-slots-buy{ display:flex; align-items:center; gap:0.6rem; margin: 0.5rem 0 1rem; }

.toast-container{ position:fixed; bottom: 1rem; right: 1rem; display:flex; flex-direction:column; gap: 0.5rem; z-index: 999; }
.toast{ background: var(--bg-panel-2); border:1px solid var(--stone-line); border-left: 4px solid var(--ember); padding: 0.7rem 1rem; border-radius: 8px; box-shadow: var(--shadow-deep); max-width: 320px; animation: slideIn .2s ease; font-size: 0.9rem; }
.toast.toast-error{ border-left-color: var(--blood); }
.toast.toast-success{ border-left-color: var(--moss); }
@keyframes slideIn{ from{ transform: translateX(20px); opacity:0;} to{ transform:none; opacity:1;} }

/* ============================================================
   PANEL ADMINISTRATORA
   ============================================================ */
.admin-body{ background: var(--bg); }
.admin-login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.admin-login-card{ width:100%; max-width: 360px; background: var(--bg-panel); border:1px solid var(--stone-line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-deep); }
.admin-login-card form label{ display:block; margin-bottom: 0.9rem; font-size: 0.9rem; color: var(--parchment-dim); }
.admin-login-card input{ display:block; width:100%; margin-top:0.3rem; }
.admin-login-card button{ width:100%; }

.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
    width: 230px; background: linear-gradient(180deg, #1d160e, #150f0a); border-right: 2px solid var(--ember-deep);
    padding: 1.2rem 1rem; display:flex; flex-direction:column; gap: 1.2rem; position:sticky; top:0; height:100vh;
}
.admin-sidebar nav{ display:flex; flex-direction:column; gap: 0.2rem; flex:1; }
.admin-sidebar nav a{ text-decoration:none; color: var(--parchment-dim); padding: 0.6rem 0.7rem; border-radius: 8px; font-family: var(--font-body); font-size:0.95rem; }
.admin-sidebar nav a:hover{ background: var(--bg-panel-2); }
.admin-sidebar nav a.active{ background: var(--ember-deep); color: var(--parchment); }
.nav-icon{ margin-right: 0.4rem; }
.sidebar-footer{ font-size: 0.8rem; color: var(--parchment-dim); display:flex; flex-direction:column; gap:0.5rem; }
.admin-main{ flex:1; padding: 2rem; max-width: 1000px; }
.page-title{ margin-bottom: 1.2rem; }

.stat-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:1rem; margin-bottom: 1.5rem; }
.stat-card{ background: var(--bg-panel); border:1px solid var(--stone-line); border-radius: var(--radius); padding: 1rem; text-align:center; }
.stat-value{ display:block; font-family: var(--font-mono); font-size: 1.8rem; color: var(--ember-bright); }
.stat-label{ font-size: 0.78rem; color: var(--parchment-dim); }

.panel{ background: var(--bg-panel); border: 1px solid var(--stone-line); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.5rem; }
.quickstart{ color: var(--parchment-dim); padding-left: 1.2rem; }
.quickstart li{ margin-bottom: 0.4rem; }

.form-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-grid-compact{ grid-template-columns: repeat(4, 1fr); align-items:end; margin-top: 1rem; }
.form-grid label{ display:block; font-size: 0.85rem; color: var(--parchment-dim); }
.form-grid input, .form-grid select, .form-grid textarea{ width:100%; margin-top: 0.3rem; }
.col-span-2{ grid-column: span 2; }
.form-actions{ display:flex; gap:0.6rem; }
.checkbox-label{ display:flex; align-items:center; gap:0.4rem; }
.checkbox-label input{ width:auto; }

.data-table{ width:100%; border-collapse: collapse; margin-top: 0.5rem; }
.data-table th, .data-table td{ text-align:left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--stone-line); font-size:0.9rem; }
.data-table th{ color: var(--parchment-dim); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.icon-cell{ font-size: 1.3rem; width: 2rem; }
.actions-cell{ display:flex; gap:0.4rem; white-space:nowrap; }
.empty-row{ text-align:center; color: var(--parchment-dim); font-style: italic; }

@media (max-width: 800px){
    .admin-shell{ flex-direction:column; }
    .admin-sidebar{ width:auto; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; }
    .admin-sidebar nav{ flex-direction:row; flex-wrap:wrap; }
    .form-grid, .form-grid-compact{ grid-template-columns: 1fr; }
    .col-span-2{ grid-column: span 1; }
}

/* ---------- Zakłady / hazard ---------- */
.betting-event{ background: var(--bg-panel); border:1px solid var(--stone-line); border-radius: var(--radius); padding:1rem; margin-bottom:1.2rem; }
.betting-event-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.betting-timer{ font-family: var(--font-mono); color: var(--ember-bright); }
.odds-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:0.6rem; }
.odds-option{ background: var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem; cursor:pointer; transition: border-color .12s ease, transform .1s ease; }
.odds-option:hover{ transform: translateY(-1px); border-color: var(--ember); }
.odds-option.selected{ border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.odds-value{ font-family: var(--font-mono); font-size:1.2rem; color: var(--ember-bright); }
.odds-stats{ font-size:0.75rem; color: var(--parchment-dim); margin-top:0.25rem; }
.bet-form{ display:flex; gap:0.5rem; align-items:center; margin-top:0.8rem; flex-wrap:wrap; }
.bet-form input{ width:7rem; }
.my-bet-badge{ background:#2c3a20; color:#c6dba8; border:1px solid var(--moss-deep); border-radius:999px; padding:0.25rem 0.8rem; font-size:0.82rem; }

/* Tor wyścigowy */
.race-track{ background:#140f0a; border:1px solid var(--stone-line); border-radius: var(--radius); padding:0.8rem; position:relative; overflow:hidden; }
.race-lane{ position:relative; height:34px; margin-bottom:4px; background: linear-gradient(90deg, #1c1611, #241d15); border-radius:6px; }
.race-lane-name{ position:absolute; left:6px; top:50%; transform:translateY(-50%); font-size:0.72rem; color:var(--parchment-dim); z-index:1; pointer-events:none; }
.race-runner{ position:absolute; top:50%; transform:translate(-50%,-50%); font-size:1.3rem; transition: left .18s linear; z-index:2; }
.race-runner.stumbling{ filter: saturate(0.4); transform: translate(-50%,-50%) rotate(-18deg); }
.race-runner img{ width:26px; height:26px; object-fit:contain; }
.race-obstacle{ position:absolute; top:0; bottom:0; width:3px; background: repeating-linear-gradient(180deg, #b5493a 0 6px, transparent 6px 12px); opacity:0.7; }
.race-finish{ position:absolute; top:0; bottom:0; right:0; width:5px; background: repeating-linear-gradient(180deg, #fff 0 5px, #000 5px 10px); opacity:0.55; }
.duel-arena{ display:flex; align-items:center; justify-content:space-around; gap:1rem; padding:1rem; background:#140f0a; border:1px solid var(--stone-line); border-radius: var(--radius); flex-wrap:wrap; }
.duel-fighter{ text-align:center; min-width:130px; }
.duel-fighter-icon{ font-size:2.2rem; }
.duel-fighter-icon img{ width:48px; height:48px; object-fit:contain; }
.duel-hp-bar{ height:8px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.35rem; }
.duel-hp-fill{ height:100%; background: linear-gradient(90deg, #7a1f1f, #c94a3a); transition: width .25s ease; }
.duel-vs{ font-family: var(--font-display); color: var(--ember); font-size:1.3rem; }
.kobold-team{ flex:1; min-width:220px; }
.kobold-unit{ display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0; font-size:0.85rem; }
.kobold-unit.dead{ opacity:0.35; text-decoration: line-through; }
.kobold-unit .duel-hp-bar{ flex:1; margin-top:0; }
.playback-controls{ display:flex; gap:0.6rem; align-items:center; margin-top:0.8rem; flex-wrap:wrap; }
.playback-log{ max-height:140px; overflow-y:auto; font-size:0.8rem; color:var(--parchment-dim); background:#00000030; border-radius:6px; padding:0.5rem 0.7rem; margin-top:0.6rem; }
.card-icon img{ width:32px; height:32px; object-fit:contain; }
.equip-slot .card-icon img{ width:40px; height:40px; }

/* ---------- Podziemia ---------- */
.dungeon-map{ display:flex; flex-direction:column; gap:0.8rem; background:#140f0a; border:1px solid var(--stone-line); border-radius:var(--radius); padding:1rem; overflow-x:auto; }
.dungeon-layer{ display:flex; gap:0.8rem; justify-content:center; }
.dungeon-node{ min-width:88px; padding:0.5rem; border-radius:8px; text-align:center; border:1px solid var(--stone-line); background:var(--bg-panel-2); cursor:default; font-size:0.8rem; }
.dungeon-node.available{ cursor:pointer; border-color:var(--ember); box-shadow:0 0 10px #e2a13d33; }
.dungeon-node.available:hover{ transform:translateY(-2px); }
.dungeon-node.current{ border-color:var(--moss); box-shadow:0 0 0 2px var(--moss); }
.dungeon-node.visited{ opacity:0.45; }
.dungeon-node.unknown{ color:var(--parchment-dim); }
.dungeon-node-icon{ font-size:1.4rem; display:block; }
.dungeon-linear{ display:flex; gap:0.5rem; align-items:center; overflow-x:auto; padding:0.5rem 0; }
.dungeon-linear .dungeon-node{ min-width:78px; flex-shrink:0; }
.dungeon-connector{ color:var(--parchment-dim); }
.dungeon-log{ max-height:180px; overflow-y:auto; font-size:0.83rem; color:var(--parchment-dim); background:#00000030; border-radius:6px; padding:0.6rem 0.8rem; margin-top:0.6rem; }
.dungeon-loot{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.5rem; }
.dungeon-loot span{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:999px; padding:0.2rem 0.7rem; font-size:0.78rem; }
.node-actions{ display:flex; gap:0.4rem; justify-content:center; margin-top:0.4rem; flex-wrap:wrap; }
.node-actions .btn{ font-size:0.72rem; padding:0.2rem 0.5rem; }

/* ---------- Ogłoszenia / aktualności ---------- */
.news-badge{ display:inline-block; background:var(--blood); color:#fff; border-radius:999px; font-size:0.68rem; padding:1px 6px; margin-left:2px; font-family:var(--font-mono); }
.news-item{ background:var(--bg-panel); border:1px solid var(--stone-line); border-left-width:4px; border-radius:var(--radius); padding:1rem; }
.news-item.unread{ border-left-color:var(--ember); background:linear-gradient(90deg,#241b12,var(--bg-panel)); }
.news-item.type-warning{ border-left-color:#c9a54a; }
.news-item.type-maintenance{ border-left-color:var(--blood); }
.news-item.type-update{ border-left-color:var(--moss); }
.news-item.type-event{ border-left-color:#6b4a94; }
.news-head{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; }
.news-title{ font-family:var(--font-display); color:var(--ember-bright); font-size:1.05rem; }
.news-meta{ font-size:0.75rem; color:var(--parchment-dim); font-family:var(--font-mono); }
.news-body{ margin-top:0.5rem; font-size:0.9rem; line-height:1.55; }
.news-body ul{ margin:0.4rem 0; padding-left:1.2rem; }
.news-body p{ margin:0 0 0.5rem; }

/* ---------- Chwała / prestiż ---------- */
.glory-header{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.glory-points{ font-family:var(--font-mono); font-size:2rem; color:var(--ember-bright); }
.sacrifice-card{ cursor:pointer; transition:border-color .12s ease, transform .1s ease; position:relative; }
.sacrifice-card:hover{ transform:translateY(-2px); }
.sacrifice-card.selected{ border-color:var(--blood); box-shadow:0 0 0 1px var(--blood); background:linear-gradient(180deg,#2a1512,var(--bg-panel)); }
.sacrifice-card.unavailable{ opacity:0.4; cursor:not-allowed; }
.sacrifice-points{ font-family:var(--font-mono); color:var(--ember-bright); font-size:1.2rem; }
.sacrifice-check{ position:absolute; top:0.5rem; right:0.6rem; font-size:1.1rem; }
.multiplier-badge{ font-family:var(--font-mono); font-size:1.3rem; color:var(--moss); }
.upgrade-card .card-sub{ min-height:2.4em; }
.upgrade-level{ font-family:var(--font-mono); color:var(--parchment-dim); font-size:0.8rem; }
.upgrade-bar{ height:5px; background:#00000055; border-radius:999px; overflow:hidden; margin:0.35rem 0; }
.upgrade-bar-fill{ height:100%; background:linear-gradient(90deg,var(--ember-deep),var(--ember-bright)); }

/* ---------- Osiągnięcia / wyzwania / eventy ---------- */
.challenge-card{ position:relative; }
.challenge-card.done{ border-color:var(--moss-deep); background:linear-gradient(180deg,#1c2416,var(--bg-panel)); }
.challenge-card.claimable{ border-color:var(--ember); box-shadow:0 0 12px #e2a13d44; }
.challenge-card.claimed{ opacity:0.55; }
.challenge-progress{ height:7px; background:#00000055; border-radius:999px; overflow:hidden; margin:0.45rem 0 0.3rem; }
.challenge-progress-fill{ height:100%; background:linear-gradient(90deg,var(--ember-deep),var(--ember-bright)); transition:width .3s ease; }
.challenge-progress-fill.done{ background:linear-gradient(90deg,var(--moss-deep),var(--moss)); }
.challenge-numbers{ font-family:var(--font-mono); font-size:0.78rem; color:var(--parchment-dim); }
.challenge-reward{ font-size:0.8rem; color:var(--ember-bright); margin-top:0.3rem; }
.challenge-tier{ position:absolute; top:0.5rem; right:0.6rem; font-size:0.7rem; font-family:var(--font-mono); color:var(--parchment-dim); }
.event-banner{ background:linear-gradient(90deg,#2a1a3a,var(--bg-panel)); border:1px solid #6b4a94; border-radius:var(--radius); padding:1rem; margin-bottom:0.8rem; }
.event-title{ font-family:var(--font-display); color:#d8bdf0; font-size:1.1rem; }
.metric-tile{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem; text-align:center; }
.metric-tile .stat-value{ font-size:1.2rem; }

/* ---------- Turnieje PvP ---------- */
.tournament-block{ background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:var(--radius); padding:1rem; margin-bottom:1.2rem; }
.tournament-head{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:0.6rem; }
.tournament-timer{ font-family:var(--font-mono); color:var(--ember-bright); }
.bracket{ display:flex; gap:1.4rem; overflow-x:auto; padding:0.8rem 0; align-items:stretch; }
.bracket-round{ display:flex; flex-direction:column; justify-content:space-around; gap:0.6rem; min-width:190px; }
.bracket-round-title{ font-size:0.72rem; color:var(--parchment-dim); text-transform:uppercase; letter-spacing:0.05em; text-align:center; margin-bottom:0.2rem; }
.bracket-match{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:8px; overflow:hidden; }
.bracket-side{ display:flex; justify-content:space-between; align-items:center; gap:0.4rem; padding:0.35rem 0.55rem; font-size:0.82rem; border-bottom:1px solid var(--stone-line); }
.bracket-side:last-child{ border-bottom:none; }
.bracket-side.winner{ background:#1c2416; color:#c6dba8; font-weight:600; }
.bracket-side.loser{ opacity:0.45; }
.bracket-side.me{ box-shadow:inset 3px 0 0 var(--ember); }
.bracket-side.pending{ color:var(--parchment-dim); font-style:italic; }
.bracket-power{ font-family:var(--font-mono); font-size:0.72rem; color:var(--parchment-dim); }
.bot-mark{ font-size:0.68rem; color:var(--parchment-dim); border:1px solid var(--stone-line); border-radius:999px; padding:0 4px; }
.match-log{ font-size:0.78rem; color:var(--parchment-dim); background:#00000030; border-radius:6px; padding:0.5rem 0.7rem; margin-top:0.5rem; max-height:170px; overflow-y:auto; }
.prize-row{ display:flex; gap:0.5rem; flex-wrap:wrap; font-size:0.8rem; color:var(--parchment-dim); }
.prize-row span{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:999px; padding:0.15rem 0.6rem; }
.my-place-banner{ background:linear-gradient(90deg,#2a2416,var(--bg-panel)); border:1px solid var(--ember-deep); border-radius:var(--radius); padding:0.7rem 1rem; margin-top:0.6rem; }

/* ---------- Umiejętności ---------- */
.skill-category{ margin-bottom:1.2rem; }
.skill-category-title{ font-family:var(--font-display); color:var(--ember); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.skill-row{ display:flex; align-items:center; gap:0.8rem; background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem 0.9rem; margin-bottom:0.45rem; }
.skill-icon{ font-size:1.5rem; min-width:2rem; text-align:center; }
.skill-icon img{ width:28px; height:28px; object-fit:contain; }
.skill-main{ flex:1; min-width:0; }
.skill-name{ font-weight:600; }
.skill-effect{ font-size:0.78rem; color:var(--moss); }
.skill-desc{ font-size:0.75rem; color:var(--parchment-dim); }
.skill-level{ font-family:var(--font-mono); font-size:1.1rem; color:var(--ember-bright); min-width:3rem; text-align:right; }
.skill-xp-bar{ height:6px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.3rem; }
.skill-xp-fill{ height:100%; background:linear-gradient(90deg,var(--ember-deep),var(--ember-bright)); transition:width .3s ease; }
.skill-xp-text{ font-family:var(--font-mono); font-size:0.68rem; color:var(--parchment-dim); }
.skill-max{ color:var(--moss); font-size:0.72rem; }
.unlock-locked{ opacity:0.55; }
.locked-badge{ background:#3a2416; color:#e0b070; border:1px solid var(--ember-deep); border-radius:999px; padding:0.1rem 0.55rem; font-size:0.7rem; }
.card.locked{ opacity:0.5; }

/* ---------- Magia ---------- */
.mana-bar{ height:8px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.4rem; }
.mana-bar-fill{ height:100%; background:linear-gradient(90deg,#2a4a94,#5a8fd8); transition:width .3s ease; }
.spell-card{ position:relative; }
.spell-card.locked{ opacity:0.45; }
.spell-card.prepared{ border-color:#5a8fd8; box-shadow:0 0 10px #5a8fd844; }
.spell-cost{ font-family:var(--font-mono); color:#8fb8e8; font-size:0.82rem; }
.spell-school{ font-size:0.72rem; color:var(--parchment-dim); }
.spell-tag{ display:inline-block; font-size:0.68rem; background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:999px; padding:0 6px; margin-right:3px; }
.school-group{ margin-bottom:1.2rem; }
.school-title{ font-family:var(--font-display); color:var(--ember); font-size:0.95rem; margin-bottom:0.5rem; }
.active-effect{ display:inline-flex; align-items:center; gap:0.4rem; background:#1a2436; border:1px solid #3a5a8c; border-radius:999px; padding:0.2rem 0.7rem; font-size:0.8rem; margin-right:0.4rem; }

/* ---------- Gospodarstwo: wioski i zwierzęta ---------- */
.village-row{ background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:var(--radius); padding:0.9rem; margin-bottom:0.7rem; }
.village-head{ display:flex; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; align-items:center; }
.village-name{ font-family:var(--font-display); color:var(--ember-bright); }
.village-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:0.5rem; margin:0.6rem 0; }
.village-stat{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:6px; padding:0.4rem; text-align:center; }
.village-stat .v{ font-family:var(--font-mono); font-size:1.1rem; color:var(--ember-bright); display:block; }
.village-stat .l{ font-size:0.68rem; color:var(--parchment-dim); }
.morale-bar{ height:6px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.3rem; }
.morale-fill{ height:100%; background:linear-gradient(90deg,var(--moss-deep),var(--moss)); }
.morale-fill.low{ background:linear-gradient(90deg,#7a1f1f,#c94a3a); }
.food-warning{ color:var(--blood); font-size:0.8rem; }
.animal-row{ display:flex; align-items:center; gap:0.8rem; background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem 0.9rem; margin-bottom:0.45rem; }
.animal-icon{ font-size:1.6rem; }
.animal-icon img{ width:30px; height:30px; object-fit:contain; }
.satiety-bar{ height:6px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.25rem; width:120px; }
.satiety-fill{ height:100%; background:linear-gradient(90deg,#8a6a2a,#e2b04d); }
.satiety-fill.low{ background:linear-gradient(90deg,#7a1f1f,#c94a3a); }
.role-badge{ font-size:0.68rem; border-radius:999px; padding:0.05rem 0.5rem; border:1px solid var(--stone-line); }
.role-production{ background:#2c3a20; color:#c6dba8; }
.role-work{ background:#3a2a14; color:#f0cf9a; }
.role-companion{ background:#2a1c3a; color:#d8bdf0; }

/* ---------- Budynki wiosek ---------- */
.village-buildings{ margin:0.6rem 0; border:1px solid var(--stone-line); border-radius:8px; padding:0.5rem 0.7rem; background:var(--bg-panel-2); }
.village-buildings summary{ cursor:pointer; font-size:0.85rem; color:var(--ember); }
.vb-list{ margin-top:0.6rem; }
.vb-row{ display:flex; align-items:center; gap:0.7rem; padding:0.45rem 0; border-top:1px solid var(--stone-line); }
.vb-row:first-child{ border-top:none; }
.vb-icon{ font-size:1.3rem; min-width:1.8rem; text-align:center; }
.vb-icon img{ width:26px; height:26px; object-fit:contain; }
.vb-main{ flex:1; min-width:0; }
.vb-level{ font-family:var(--font-mono); font-size:0.72rem; color:var(--parchment-dim); margin-left:0.4rem; }

/* ---------- Odtwarzacz walk formacji ---------- */
.battle-overlay{ position:fixed; inset:0; background:#000000cc; display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.battle-modal{ background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:var(--radius); width:min(760px,100%); max-height:90vh; overflow-y:auto; padding:1rem; }
.battle-head{ display:flex; justify-content:space-between; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.battle-controls{ display:flex; gap:0.3rem; }
.battle-controls .btn.active{ border-color:var(--ember); color:var(--ember-bright); }
.battle-round{ text-align:center; font-family:var(--font-display); color:var(--ember); margin-bottom:0.6rem; }
.battle-sides{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.battle-side{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem; }
.battle-side-title{ font-size:0.75rem; color:var(--parchment-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; text-align:center; }
.battle-unit{ display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.2rem; border-radius:6px; transition:background .15s ease, opacity .3s ease; }
.battle-unit.down{ opacity:0.35; }
.battle-unit.hurt{ background:#4a191933; }
.battle-unit.healed{ background:#1e3a1e44; }
.bu-icon{ font-size:1.1rem; }
.bu-main{ flex:1; min-width:0; }
.bu-name{ font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bu-bar{ height:5px; background:#00000066; border-radius:999px; overflow:hidden; margin-top:2px; }
.bu-fill{ height:100%; background:linear-gradient(90deg,var(--moss-deep),var(--moss)); transition:width .25s ease; }
.bu-fill.low{ background:linear-gradient(90deg,#7a1f1f,#c94a3a); }
.bu-hp{ font-family:var(--font-mono); font-size:0.72rem; color:var(--parchment-dim); min-width:2rem; text-align:right; }
.battle-log{ margin-top:0.7rem; max-height:150px; overflow-y:auto; font-size:0.78rem; color:var(--parchment-dim); background:#00000030; border-radius:6px; padding:0.5rem 0.7rem; }
.bl-line{ padding:1px 0; }
.bl-down{ color:#e08a7a; }
.bl-heal{ color:#a8d68a; }
.battle-result{ text-align:center; margin-top:0.7rem; font-family:var(--font-display); font-size:1.2rem; }
.br-win{ color:var(--moss); }
.br-lose{ color:var(--blood); }

/* ---------- Raport i narzędzia ---------- */
.report-headline{ background:linear-gradient(90deg,#241b12,var(--bg-panel)); border:1px solid var(--ember-deep); border-radius:var(--radius); padding:0.9rem 1rem; font-size:0.95rem; margin-bottom:0.9rem; }
.report-section{ background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:var(--radius); padding:0.8rem 1rem; margin-bottom:0.7rem; }
.report-section-title{ font-family:var(--font-display); color:var(--ember); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.report-line{ display:flex; justify-content:space-between; gap:0.6rem; padding:0.25rem 0; border-top:1px solid var(--stone-line); font-size:0.86rem; }
.report-line:first-of-type{ border-top:none; }
.report-empty{ color:var(--parchment-dim); font-style:italic; }
.tool-row{ display:flex; align-items:center; gap:0.8rem; background:var(--bg-panel); border:1px solid var(--stone-line); border-radius:8px; padding:0.6rem 0.9rem; margin-bottom:0.45rem; }
.tool-row.active{ border-color:var(--ember); }
.tool-icon{ font-size:1.5rem; }
.dur-bar{ height:6px; background:#00000055; border-radius:999px; overflow:hidden; margin-top:0.3rem; width:150px; }
.dur-fill{ height:100%; background:linear-gradient(90deg,var(--moss-deep),var(--moss)); }
.dur-fill.low{ background:linear-gradient(90deg,#7a1f1f,#c94a3a); }
.dur-fill.mid{ background:linear-gradient(90deg,#8a6a2a,#e2b04d); }

/* ---------- Tytuły pracowników ---------- */
.worker-title-mark{ font-size:0.9rem; filter:drop-shadow(0 0 3px #e2a13d55); cursor:help; }

/* ============================================================
   ŻYCIE OSADY - animacje czysto wizualne (zero logiki gry)
   Wszystko na CSS: dym z kominów, ruch mieszkańców, zwierzęta
   w zagrodzie. Respektuje ustawienie "ogranicz animacje".
   ============================================================ */
.tile.has-building{ position:relative; overflow:hidden; }

/* Dym unoszący się z budynków produkcyjnych */
.tile.has-building::after{
    content:'';
    position:absolute; top:4px; left:50%;
    width:5px; height:5px; border-radius:50%;
    background:rgba(220,215,205,0.35);
    animation: smokeRise 4.5s ease-out infinite;
    pointer-events:none;
}
.tile.has-building:nth-child(3n)::after{ animation-delay:1.2s; left:42%; }
.tile.has-building:nth-child(4n)::after{ animation-delay:2.4s; left:58%; }
@keyframes smokeRise{
    0%   { transform:translateY(6px) scale(0.6); opacity:0; }
    25%  { opacity:0.5; }
    100% { transform:translateY(-16px) scale(1.6); opacity:0; }
}

/* Mieszkańcy przechadzający się po kafelku */
.tile-life{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.tile-walker{
    position:absolute; bottom:5px; font-size:0.6rem; opacity:0.55;
    animation: walkAcross 9s linear infinite;
}
.tile-walker.slow{ animation-duration:14s; animation-delay:3s; }
.tile-walker.rev{ animation-name: walkBack; animation-duration:11s; animation-delay:1.5s; }
@keyframes walkAcross{
    0%   { left:-12%; transform:scaleX(1); }
    49%  { left:88%;  transform:scaleX(1); }
    50%  { left:88%;  transform:scaleX(-1); }
    99%  { left:-12%; transform:scaleX(-1); }
    100% { left:-12%; transform:scaleX(1); }
}
@keyframes walkBack{
    0%   { right:-12%; transform:scaleX(-1); }
    50%  { right:85%;  transform:scaleX(1); }
    100% { right:-12%; transform:scaleX(-1); }
}

/* Zwierzęta skubiące trawę w zagrodzie */
.animal-row .animal-icon{ display:inline-block; animation: graze 3.4s ease-in-out infinite; }
.animal-row:nth-child(2n) .animal-icon{ animation-delay:0.8s; }
.animal-row:nth-child(3n) .animal-icon{ animation-delay:1.7s; }
.animal-row.hungry .animal-icon{ animation: fidget 1.6s ease-in-out infinite; }
@keyframes graze{
    0%,100% { transform:translateY(0) rotate(0deg); }
    45%     { transform:translateY(2px) rotate(-7deg); }
    60%     { transform:translateY(2px) rotate(-7deg); }
}
@keyframes fidget{
    0%,100% { transform:translateX(0); }
    30%     { transform:translateX(-2px); }
    70%     { transform:translateX(2px); }
}

/* Wózek jadący przez wioskę - sygnał, że produkcja idzie */
.village-row{ position:relative; overflow:hidden; }
.village-cart{
    position:absolute; bottom:6px; font-size:0.7rem; opacity:0.45;
    animation: cartRoll 16s linear infinite; pointer-events:none;
}
@keyframes cartRoll{
    0%   { left:-8%; opacity:0; }
    8%   { opacity:0.45; }
    92%  { opacity:0.45; }
    100% { left:100%; opacity:0; }
}

/* Kto woli spokój - pełne wyłączenie ruchu */
@media (prefers-reduced-motion: reduce){
    .tile.has-building::after, .tile-walker, .animal-row .animal-icon, .village-cart{
        animation:none !important;
    }
    .tile.has-building::after, .tile-walker, .village-cart{ opacity:0; }
}
body.no-motion .tile.has-building::after,
body.no-motion .tile-walker,
body.no-motion .village-cart{ display:none; }
body.no-motion .animal-row .animal-icon{ animation:none; }

/* ---------- Mapa handlowa (ilustracja, nie logika) ---------- */
.trade-map{ position:relative; width:100%; aspect-ratio:16/9; max-height:340px;
    background:radial-gradient(circle at 30% 30%, #2a3a2a, #1a2418 60%, #14200f);
    border:1px solid var(--stone-line); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; }
.trade-sea{ position:absolute; inset:0; background:linear-gradient(160deg,#16283c 0%,#16283c 34%,transparent 34.5%); }
.trade-home{ position:absolute; left:44%; top:52%; transform:translate(-50%,-50%); text-align:center; }
.trade-home .th-icon{ font-size:1.5rem; }
.trade-home .th-name{ font-size:0.7rem; color:var(--ember-bright); white-space:nowrap; }
.trade-node{ position:absolute; transform:translate(-50%,-50%); text-align:center; cursor:pointer; transition:transform .12s ease; }
.trade-node:hover{ transform:translate(-50%,-50%) scale(1.12); }
.trade-node.locked{ opacity:0.35; cursor:not-allowed; }
.trade-node.selected .tn-icon{ filter:drop-shadow(0 0 6px var(--ember)); }
.tn-icon{ font-size:1.3rem; }
.tn-name{ font-size:0.65rem; color:var(--parchment-dim); white-space:nowrap; }
.trade-route{ position:absolute; height:2px; transform-origin:0 50%; opacity:0.25;
    background:repeating-linear-gradient(90deg,var(--parchment-dim) 0 6px,transparent 6px 12px); pointer-events:none; }
.trade-route.sea{ background:repeating-linear-gradient(90deg,#5a8fd8 0 4px,transparent 4px 10px); opacity:0.35; }
.trade-mover{ position:absolute; transform:translate(-50%,-50%); font-size:1.1rem; pointer-events:none;
    transition:left 1s linear, top 1s linear; filter:drop-shadow(0 0 4px #000); }
.trade-progress{ font-family:var(--font-mono); font-size:0.7rem; color:var(--ember-bright); }
.cargo-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0.5rem; margin:0.6rem 0; }
.cargo-item{ display:flex; align-items:center; gap:0.5rem; background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:6px; padding:0.4rem 0.6rem; font-size:0.82rem; }
.cargo-item input{ width:4.5rem; }
.escort-picker{ display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.5rem 0; }
.escort-chip{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:999px; padding:0.2rem 0.7rem; font-size:0.78rem; cursor:pointer; }
.escort-chip.on{ border-color:var(--ember); color:var(--ember-bright); }
.load-counter{ font-family:var(--font-mono); font-size:0.8rem; }
.load-counter.over{ color:var(--blood); }

/* ---------- Karczma: plotki ---------- */
.tavern-bar{ background:linear-gradient(90deg,#2a1f14,var(--bg-panel)); border:1px solid var(--stone-line);
    border-radius:var(--radius); padding:0.9rem 1rem; margin-bottom:1rem; display:flex;
    justify-content:space-between; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.rumor{ background:var(--bg-panel); border:1px solid var(--stone-line); border-left-width:4px;
    border-radius:var(--radius); padding:0.9rem 1rem; margin-bottom:0.7rem; position:relative; }
.rumor.lore{ border-left-color:var(--stone-line); }
.rumor.mechanic{ border-left-color:var(--ember); }
.rumor.adventure{ border-left-color:#8a5ac4; }
.rumor.acted{ opacity:0.6; }
.rumor-head{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.rumor-title{ font-family:var(--font-display); color:var(--ember-bright); font-size:1rem; }
.rumor-cat{ font-size:0.66rem; border-radius:999px; padding:0.05rem 0.5rem; border:1px solid var(--stone-line); color:var(--parchment-dim); }
.rumor-cat.adventure{ color:#d8bdf0; border-color:#6b4a94; }
.rumor-cat.mechanic{ color:#f0cf9a; border-color:var(--ember-deep); }
.rumor-text{ font-size:0.9rem; line-height:1.6; margin:0.5rem 0; font-style:italic; color:var(--parchment); }
.rumor-foot{ display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.rumor-expiry{ font-family:var(--font-mono); font-size:0.7rem; color:var(--parchment-dim); }

/* ---------- Alerty wąskich gardeł ---------- */
.alerts{ max-width:1100px; margin:0 auto 0.8rem; padding:0 1rem; }
.alert{ display:flex; gap:0.6rem; align-items:flex-start; padding:0.55rem 0.8rem; margin-bottom:0.35rem;
    border-radius:8px; border:1px solid var(--stone-line); background:var(--bg-panel); font-size:0.86rem; }
.alert.danger{ border-color:#8a2f24; background:linear-gradient(90deg,#2e1512,var(--bg-panel)); }
.alert.warning{ border-color:var(--ember-deep); background:linear-gradient(90deg,#2a2214,var(--bg-panel)); }
.alert.info{ opacity:0.85; }
.alert-icon{ font-size:1.05rem; line-height:1.4; }
.alert-body{ flex:1; min-width:0; }
.alert-hint{ color:var(--parchment-dim); font-size:0.78rem; }
.alert-go{ align-self:center; white-space:nowrap; }
.alerts-toggle{ display:flex; justify-content:space-between; align-items:center; gap:0.5rem;
    font-size:0.8rem; color:var(--parchment-dim); cursor:pointer; padding:0.2rem 0; }

/* ---------- Kronika ---------- */
.chron-entry{ display:flex; gap:0.6rem; align-items:flex-start; padding:0.4rem 0; border-top:1px solid var(--stone-line); font-size:0.86rem; }
.chron-entry:first-child{ border-top:none; }
.chron-date{ font-family:var(--font-mono); font-size:0.7rem; color:var(--parchment-dim); min-width:5.5rem; }
.chron-pin{ background:var(--bg-panel-2); border:1px solid var(--ember-deep); border-radius:8px;
    padding:0.5rem 0.8rem; margin-bottom:0.4rem; font-size:0.88rem; display:flex; justify-content:space-between; gap:0.6rem; }

/* ---------- Kolejka receptur ---------- */
.queue-box{ margin-top:0.4rem; padding:0.4rem 0.6rem; background:var(--bg-panel-2);
    border:1px solid var(--stone-line); border-radius:6px; }
.queue-box select{ margin:0.15rem 0; font-size:0.8rem; }

/* ---------- Nagrody w ogłoszeniach ---------- */
.news-reward{ margin-top:0.6rem; padding:0.5rem 0.7rem; background:var(--bg-panel-2);
    border:1px solid var(--ember-deep); border-radius:6px; font-size:0.85rem;
    display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }

/* ============================================================
   TELEFON — tryb aplikacji (PWA)
   Gra ma kilkanaście zakładek i gęste tabele; na wąskim ekranie
   trzeba je przewijać poziomo zamiast ściskać do nieczytelności.
   ============================================================ */
@media (max-width: 720px) {
    body { padding: 0; }

    /* Pasek zakładek przewijany palcem, bez zawijania do kilku rzędów */
    .tabs, .tab-bar {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        gap: 0.25rem; padding: 0.35rem 0.5rem;
        position: sticky; top: 0; z-index: 50; background: var(--bg);
    }
    .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; flex: 0 0 auto; font-size: 0.82rem; padding: 0.45rem 0.7rem; }

    /* Cele dotyku nie mniejsze niż ~44 px */
    .btn, .btn-small { min-height: 40px; padding: 0.5rem 0.8rem; }
    select, input[type="number"], input[type="text"] { min-height: 40px; font-size: 16px; }

    .card-grid { grid-template-columns: 1fr !important; }
    .row { grid-template-columns: 1fr !important; }
    .village-stats { grid-template-columns: repeat(2, 1fr); }
    .cargo-picker { grid-template-columns: 1fr; }

    /* Tabele: przewijanie poziome zamiast zgniatania kolumn */
    .data-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Odtwarzacz walk mieści się na wąskim ekranie */
    .battle-sides { grid-template-columns: 1fr; }
    .battle-modal { max-height: 88vh; }

    /* Mapa handlowa niższa, żeby zostało miejsce na treść */
    .trade-map { aspect-ratio: 4/3; max-height: 260px; }

    /* Wcięcia pod pasek systemowy telefonu */
    main { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
    .village-stats { grid-template-columns: 1fr 1fr; }
    .tab-btn { font-size: 0.76rem; padding: 0.4rem 0.55rem; }
}

/* Tryb zainstalowany: ukryj elementy typowe dla przeglądarki */
@media (display-mode: standalone) {
    body { user-select: none; -webkit-touch-callout: none; }
    input, textarea { user-select: text; }
}

/* Zakładki kategorii w odtwarzaniu zakładów */
.playback-tab.active { border-color: var(--ember); color: var(--ember-bright); }

.playback-stage{ margin:0.6rem 0; }

/* Szybkie jedzenie przy pasku głodu */
#quick-eat { padding: 0.15rem 0.5rem; min-height: 0; font-size: 0.8rem; margin-left: 0.2rem; }

/* ---------- Drabinka pojedynków goblinów ---------- */
.duel-bracket{ display:flex; gap:0.8rem; overflow-x:auto; padding:0.4rem 0; }
.duel-stage{ flex:0 0 auto; min-width:170px; }
.duel-stage-title{ font-size:0.72rem; color:var(--parchment-dim); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom:0.35rem; text-align:center; }
.duel-match{ background:var(--bg-panel-2); border:1px solid var(--stone-line); border-radius:6px;
    padding:0.35rem 0.5rem; margin-bottom:0.35rem; font-size:0.78rem;
    display:flex; align-items:center; justify-content:space-between; gap:0.3rem; }
.duel-match.current{ border-color:var(--ember); box-shadow:0 0 6px #e2a13d33; }
.duel-match.done{ opacity:0.85; }
.duel-vs{ color:var(--parchment-dim); font-size:0.7rem; }
.duel-win{ color:var(--moss); font-weight:600; }
.duel-lose{ color:var(--parchment-dim); text-decoration:line-through; opacity:0.6; }

/* Ekwipunek strażników */
.weq-row{ display:flex; align-items:center; gap:0.4rem; padding:0.2rem 0; font-size:0.8rem; }
.weq-label{ color:var(--parchment-dim); min-width:3.6rem; }
.weq-item{ color:var(--ember-bright); flex:1; }
.weq-row select{ flex:1; font-size:0.78rem; }

/* Przełącznik kategorii pracy */
.cat-switch{ display:flex; align-items:center; gap:0.4rem; margin:0.35rem 0; }
.cat-switch select{ flex:1; font-size:0.8rem; }

/* Przełącznik języka */
.lang-picker{ display:inline-flex; gap:0.15rem; margin-left:0.4rem; }
.lang-btn{ padding:0.1rem 0.35rem; min-height:0; font-size:0.9rem; line-height:1.2; }
.lang-btn.active{ border-color:var(--ember); }

/* Czas akcji z uwzględnieniem umiejętności */
.speed-info{ font-size:0.78rem; color:var(--parchment-dim); }
.speed-better{ color:var(--moss); }
.speed-better s{ opacity:0.5; margin:0 0.15rem; }

/* ---------- Przewodnik pierwszych kroków ---------- */
.guide-box{ background:linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--ember-deep); border-left:3px solid var(--ember);
    border-radius:8px; padding:0.7rem 0.85rem; margin:0 0 0.9rem; }
.guide-head{ display:flex; align-items:flex-start; gap:0.6rem; }
.guide-icon{ font-size:1.5rem; line-height:1; }
.guide-titles{ flex:1; }
.guide-title{ font-weight:600; color:var(--ember-bright); font-size:0.98rem; }
.guide-progress-text{ font-size:0.75rem; color:var(--parchment-dim); }
.guide-body{ font-size:0.86rem; color:var(--parchment); margin:0.45rem 0 0.55rem; line-height:1.45; }
.guide-bar{ height:4px; background:var(--bg-deep); border-radius:2px; overflow:hidden; }
.guide-bar-fill{ height:100%; background:var(--ember); transition:width 0.4s ease; }
.guide-actions{ display:flex; align-items:center; gap:0.6rem; margin-top:0.55rem; }
.guide-reward{ font-size:0.78rem; color:var(--moss); }
@media (max-width:720px){ .guide-body{ font-size:0.82rem; } }

/* ---------- Szczegółowy dziennik pojedynku ---------- */
.duel-match.clickable{ cursor:pointer; }
.duel-match.clickable:hover{ border-color:var(--ember); }
.duel-more{ opacity:0.45; font-size:0.7rem; }

#duel-detail .battle-modal{ max-width:620px; }
.dd-summary{ background:var(--bg-panel-2); border-radius:6px; padding:0.45rem 0.6rem;
    margin:0.5rem 0; font-size:0.84rem; }
.dd-log{ max-height:52vh; overflow-y:auto; }
.dd-row{ display:flex; align-items:center; gap:0.5rem; padding:0.22rem 0.35rem;
    border-bottom:1px solid var(--stone-line); font-size:0.8rem; }
.dd-row:nth-child(odd){ background:rgba(255,255,255,0.02); }
.dd-crit{ background:rgba(226,161,61,0.10); }
.dd-crit .dd-text strong{ color:var(--ember-bright); }
.dd-round{ color:var(--parchment-dim); font-size:0.7rem; min-width:2rem; }
.dd-text{ flex:1; }
.dd-hp{ width:52px; height:5px; background:var(--bg-deep); border-radius:3px; overflow:hidden; }
.dd-hp-fill{ display:block; height:100%; background:var(--moss); }

/* Dziennik turniejowy pogrupowany po rundach */
.mt-summary{ background:var(--bg-panel-2); border-radius:6px; padding:0.4rem 0.6rem;
    margin:0.4rem 0; font-size:0.8rem; color:var(--parchment); }
.mt-timeline{ max-height:44vh; overflow-y:auto; }
.mt-round{ display:flex; gap:0.55rem; padding:0.25rem 0; border-bottom:1px solid var(--stone-line); }
.mt-round-no{ color:var(--parchment-dim); font-size:0.7rem; min-width:4.2rem; padding-top:0.1rem; }
.mt-entries{ flex:1; }
.mt-entry{ font-size:0.79rem; padding:0.08rem 0; }
.mt-crit{ color:var(--ember-bright); font-weight:600; }

/* ---------- Wyszukiwarka receptur ---------- */
.recipe-search{ display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; margin-bottom:0.7rem; }
.recipe-search input[type="search"]{ flex:1; min-width:180px; }
.rs-toggle{ display:flex; align-items:center; gap:0.35rem; font-size:0.82rem; color:var(--parchment-dim); }

/* ---------- Planer produkcji ---------- */
#plan-modal .battle-modal{ max-width:560px; }
.pp-qty{ display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; margin:0.5rem 0; font-size:0.82rem; }
.pp-q.active{ border-color:var(--ember); color:var(--ember-bright); }
.pp-time{ margin-left:auto; color:var(--parchment-dim); font-size:0.78rem; }
.pp-verdict{ padding:0.4rem 0.6rem; border-radius:6px; font-size:0.85rem; margin:0.4rem 0 0.6rem; }
.pp-good{ background:rgba(122,158,86,0.14); color:var(--moss); }
.pp-bad{ background:rgba(176,74,52,0.14); color:var(--rust); }
.pp-section{ font-size:0.78rem; color:var(--parchment-dim); text-transform:uppercase;
    letter-spacing:0.04em; margin:0.7rem 0 0.3rem; }
.pp-row{ display:flex; align-items:center; gap:0.5rem; padding:0.22rem 0.4rem;
    border-bottom:1px solid var(--stone-line); font-size:0.83rem; }
.pp-name{ flex:1; }
.pp-nums{ color:var(--parchment-dim); font-size:0.78rem; }
.pp-flag{ min-width:5.5rem; text-align:right; font-size:0.76rem; }
.pp-missing .pp-flag{ color:var(--rust); }
.pp-ok .pp-flag{ color:var(--moss); }
.pp-steps{ margin:0.2rem 0 0 1.1rem; font-size:0.84rem; }
.pp-steps li{ padding:0.12rem 0; }

/* ---------- Kroniki Sławy ---------- */
.rank-summary{ display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap;
    background:var(--bg-panel-2); border:1px solid var(--ember-deep); border-radius:8px;
    padding:0.6rem 0.8rem; margin-bottom:0.9rem; font-size:0.86rem; }
.rank-big{ font-size:1.3rem; font-weight:700; color:var(--ember-bright); line-height:1; }
.rank-sep{ opacity:0.4; }
.rank-best{ margin-left:auto; color:var(--moss); font-size:0.82rem; }
.rank-card{ cursor:pointer; transition:border-color 0.15s ease; }
.rank-card:hover{ border-color:var(--ember-deep); }
.rank-card.active{ border-color:var(--ember); }
.rank-mine{ margin-top:0.35rem; font-size:0.83rem; }
.rank-list{ margin:0.5rem 0; }
.rank-row{ display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0.55rem;
    border-bottom:1px solid var(--stone-line); font-size:0.88rem; }
.rank-row:nth-child(odd){ background:rgba(255,255,255,0.02); }
.rank-me{ background:rgba(226,161,61,0.12) !important; border-radius:5px; }
.rank-detached{ margin-top:0.5rem; border:1px dashed var(--ember-deep); }
.rank-place{ min-width:2rem; color:var(--parchment-dim); }
.rank-medal{ font-size:1.05rem; }
.rank-name{ flex:1; }
.rank-value{ font-variant-numeric:tabular-nums; color:var(--ember-bright); }
.rank-goal{ margin-top:0.6rem; font-size:0.85rem; color:var(--parchment-dim); }
@media (max-width:720px){ .rank-best{ margin-left:0; width:100%; } }