/* Clash of Farming 3.7.1 – Interactive Command Map
   Eigenständige mobile Command-Center-Oberfläche. */
:root {
    --command-bg:#070c10;
    --command-panel:rgba(10,20,25,.94);
    --command-panel-2:rgba(18,31,36,.94);
    --command-line:rgba(127,236,197,.22);
    --command-accent:#73e5bd;
    --command-accent-strong:#b7ffe7;
    --command-gold:#f4c86c;
    --command-danger:#ff6e64;
    --command-muted:#91a5a6;
    --command-shadow:0 18px 50px rgba(0,0,0,.42);
}

.frontier-ui.page-map,
.frontier-ui.page-world {
    background:
        radial-gradient(circle at 50% -20%, rgba(43,122,98,.22), transparent 42rem),
        linear-gradient(180deg,#06100f 0,#091413 35%,#05090c 100%);
}

.frontier-command-ticker {
    position:sticky;
    top:0;
    z-index:105;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.8rem;
    min-height:68px;
    margin:0;
    padding:.55rem clamp(.75rem,2vw,1.4rem);
    color:#effff8;
    border-block:1px solid rgba(115,229,189,.16);
    background:
        linear-gradient(90deg,rgba(5,13,17,.98),rgba(12,30,31,.96) 47%,rgba(5,13,17,.98)),
        repeating-linear-gradient(90deg,transparent 0 58px,rgba(115,229,189,.035) 59px 60px);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    overflow:hidden;
}
.frontier-command-ticker::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0 42%,rgba(115,229,189,.08) 48%,transparent 54% 100%);
    transform:translateX(-100%);
    animation:commandTickerSweep 8s linear infinite;
}
.command-avatar {
    position:relative;
    width:48px;
    height:48px;
    border:1px solid rgba(244,200,108,.48);
    border-radius:6px 18px 6px 18px;
    background:linear-gradient(145deg,#263d3f,#101b21 65%,#05090d);
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.28),0 0 22px rgba(115,229,189,.12);
    overflow:hidden;
}
.command-avatar::before {
    content:"";
    position:absolute;
    width:25px;
    height:25px;
    left:11px;
    top:14px;
    border-radius:45% 45% 36% 36%;
    background:linear-gradient(#d6b490,#8e694e);
    box-shadow:0 16px 0 8px #15252a;
}
.command-avatar-helmet {
    position:absolute;
    z-index:2;
    left:8px;
    top:6px;
    width:31px;
    height:18px;
    border-radius:18px 18px 5px 5px;
    background:linear-gradient(155deg,#5c7a68,#263b35 70%);
    box-shadow:0 3px 0 #101818;
}
.command-avatar-helmet::after {
    content:"";
    position:absolute;
    left:3px;
    right:-5px;
    bottom:-4px;
    height:5px;
    border-radius:4px;
    background:#172522;
}
.command-avatar i {
    position:absolute;
    z-index:4;
    right:3px;
    bottom:3px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#67f3b9;
    box-shadow:0 0 10px #67f3b9;
}
.command-ticker-copy { min-width:0; display:grid; gap:.08rem; }
.command-ticker-copy small { color:var(--command-accent); font-size:.58rem; font-weight:900; letter-spacing:.15em; }
.command-ticker-copy strong { overflow:hidden; color:#fff; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.command-ticker-copy span { overflow:hidden; color:#a9bdbb; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; transition:opacity .18s ease,transform .18s ease; }
.command-ticker-copy span.is-changing { opacity:0; transform:translateY(4px); }
.command-ticker-stats { display:flex; gap:.35rem; }
.command-ticker-stats>span {
    position:relative;
    display:grid;
    min-width:72px;
    padding:.35rem .48rem;
    text-align:center;
    border:1px solid rgba(255,255,255,.07);
    border-radius:3px 11px 3px 11px;
    background:rgba(255,255,255,.035);
}
.command-ticker-stats b { color:#fff; font-size:.86rem; }
.command-ticker-stats small { color:#819796; font-size:.52rem; text-transform:uppercase; letter-spacing:.06em; }
.signal-dot { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#65edaf; box-shadow:0 0 9px #65edaf; animation:commandPulse 1.8s ease-in-out infinite; }

.page-map .content { display:flex; flex-direction:column; }
.page-map .frontier-map-heading { order:-40; }
.page-map .world-console { order:-30; }
.page-map .dominion-command-deck { order:-20; }
.page-map .settlement-progression { order:-19; }
.page-map .frontier-live-event { order:-10; }
.page-map .daily-operations { order:-9; }
.page-map .map-bottom-grid { order:20; }

.page-map .frontier-map-heading,
.page-world .world-page-heading {
    position:relative;
    margin-bottom:.65rem;
    border:1px solid rgba(115,229,189,.15);
    border-radius:4px 18px 4px 18px;
    background:linear-gradient(130deg,rgba(10,29,29,.96),rgba(8,15,20,.96));
    box-shadow:var(--command-shadow);
    overflow:hidden;
}
.page-map .frontier-map-heading::after,
.page-world .world-page-heading::after {
    content:"";
    position:absolute;
    right:-45px;
    top:-70px;
    width:220px;
    height:220px;
    border:1px solid rgba(115,229,189,.12);
    border-radius:50%;
    box-shadow:inset 0 0 0 20px rgba(115,229,189,.025),inset 0 0 0 42px rgba(115,229,189,.018);
    pointer-events:none;
}

.world-console,
.global-world-shell {
    position:relative;
    isolation:isolate;
    border:1px solid rgba(115,229,189,.22)!important;
    border-radius:4px 24px 4px 24px!important;
    background:#07100f!important;
    box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.025)!important;
    overflow:hidden;
}
.world-console::before,
.global-world-shell::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
    background:
        linear-gradient(90deg,var(--command-accent) 0 32px,transparent 32px) top left/70px 2px no-repeat,
        linear-gradient(180deg,var(--command-accent) 0 32px,transparent 32px) top left/2px 70px no-repeat,
        linear-gradient(270deg,var(--command-gold) 0 32px,transparent 32px) top right/70px 2px no-repeat,
        linear-gradient(180deg,var(--command-gold) 0 32px,transparent 32px) top right/2px 70px no-repeat,
        linear-gradient(90deg,var(--command-gold) 0 32px,transparent 32px) bottom left/70px 2px no-repeat,
        linear-gradient(0deg,var(--command-gold) 0 32px,transparent 32px) bottom left/2px 70px no-repeat,
        linear-gradient(270deg,var(--command-accent) 0 32px,transparent 32px) bottom right/70px 2px no-repeat,
        linear-gradient(0deg,var(--command-accent) 0 32px,transparent 32px) bottom right/2px 70px no-repeat;
    opacity:.52;
}
.world-toolbar,
.global-world-toolbar {
    position:relative;
    z-index:25;
    border-bottom-color:rgba(115,229,189,.14)!important;
    background:linear-gradient(180deg,rgba(16,34,35,.98),rgba(7,17,20,.98))!important;
}
.world-toolbar .map-tool,
.global-world-toolbar .map-tool {
    color:#b6c7c7!important;
    border-color:rgba(255,255,255,.07)!important;
    background:rgba(255,255,255,.035)!important;
}
.world-toolbar .map-tool.active,
.global-world-toolbar .map-tool.active,
.world-toolbar .map-tool:hover,
.global-world-toolbar .map-tool:hover {
    color:#07110e!important;
    background:linear-gradient(135deg,var(--command-accent-strong),var(--command-accent))!important;
    box-shadow:0 0 18px rgba(115,229,189,.22)!important;
}

.world-viewport,
.global-world-viewport {
    position:relative;
    min-height:clamp(570px,72vh,900px);
    background:
        linear-gradient(rgba(115,229,189,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(115,229,189,.035) 1px,transparent 1px),
        #06100f!important;
    background-size:32px 32px!important;
}
.world-viewport::after,
.global-world-viewport::after {
    content:"";
    position:absolute;
    z-index:16;
    left:0;
    right:0;
    top:-5%;
    height:24%;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(115,229,189,.07),transparent);
    mix-blend-mode:screen;
    animation:commandScan 8s linear infinite;
}
.world-map,
.global-world-map { filter:saturate(.92) contrast(1.04); }

.siege-task-rail,
.siege-action-rail {
    position:absolute;
    z-index:80;
    top:50%;
    display:grid;
    gap:.48rem;
    transform:translateY(-50%);
    pointer-events:none;
}
.siege-task-rail { left:.7rem; }
.siege-action-rail { right:.7rem; }
.siege-task-rail>* ,
.siege-action-rail>* {
    pointer-events:auto;
    display:grid;
    place-items:center;
    width:62px;
    min-height:61px;
    padding:.32rem;
    color:#dfeeed;
    text-decoration:none;
    border:1px solid rgba(115,229,189,.24);
    border-radius:5px 17px 5px 17px;
    background:linear-gradient(145deg,rgba(18,38,41,.96),rgba(5,13,17,.96));
    box-shadow:0 8px 18px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.025);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.siege-task-rail>*:hover,
.siege-action-rail>*:hover {
    color:#fff;
    transform:translateY(-2px) scale(1.035);
    border-color:rgba(244,200,108,.55);
    background:linear-gradient(145deg,rgba(38,74,68,.98),rgba(11,23,27,.98));
}
.siege-task-rail span,
.siege-action-rail span { font-size:1.35rem; line-height:1; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.siege-task-rail b { margin-top:.12rem; color:var(--command-gold); font-size:.68rem; }
.siege-task-rail small,
.siege-action-rail small { color:#9db0ae; font-size:.51rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.siege-action-rail>* { border-color:rgba(244,200,108,.22); }

.siege-alert-strip {
    position:absolute;
    z-index:78;
    left:50%;
    bottom:.75rem;
    display:flex;
    align-items:center;
    gap:.45rem;
    max-width:calc(100% - 170px);
    padding:.42rem .72rem;
    color:#d9e8e6;
    border:1px solid rgba(115,229,189,.2);
    border-radius:3px 12px 3px 12px;
    background:rgba(5,14,17,.88);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    transform:translateX(-50%);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.siege-alert-strip strong { color:var(--command-accent-strong); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.siege-alert-strip em { overflow:hidden; color:#a7b8b6; font-size:.65rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.alert-beacon { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:var(--command-danger); box-shadow:0 0 12px var(--command-danger); animation:commandPulse 1.45s ease-in-out infinite; }

.map-command-dock { position:relative; z-index:30; }
.page-map .builder-roster { position:relative; z-index:30; }
.page-map .world-grid-layout { position:relative; z-index:10; }

.world-building {
    transition:filter .18s ease,transform .18s ease!important;
}
.world-building:hover,
.world-building.selected {
    filter:brightness(1.12) saturate(1.12) drop-shadow(0 0 13px rgba(115,229,189,.58))!important;
}
.world-building.selected::after {
    content:"";
    position:absolute;
    inset:-8px;
    z-index:9;
    border:1px solid rgba(115,229,189,.8);
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(115,229,189,.08),0 0 24px rgba(115,229,189,.34);
    animation:commandTarget 1.7s ease-in-out infinite;
}

.world-farm-marker,
.world-pest-marker,
.world-operation-marker {
    border-radius:4px 13px 4px 13px!important;
    box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 1px rgba(115,229,189,.12)!important;
}
.world-operation-marker:not(.is-locked) { animation:operationBeacon 2.8s ease-in-out infinite; }

.command-map-ping {
    position:absolute;
    z-index:120;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:2px solid var(--command-accent);
    border-radius:50%;
    pointer-events:none;
    animation:commandMapPing .72s ease-out forwards;
}
.command-map-ping::before,
.command-map-ping::after { content:""; position:absolute; background:var(--command-accent); }
.command-map-ping::before { left:50%; top:-9px; bottom:-9px; width:1px; }
.command-map-ping::after { top:50%; left:-9px; right:-9px; height:1px; }

/* Mobile command navigation */
.siege-mobile-nav,
.siege-more-drawer { display:none; }

.siege-more-drawer[hidden] { display:none!important; }

@media (max-width: 900px) {
    body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
    .frontier-ui .sidebar { display:none!important; }
    .app-shell { grid-template-columns:1fr!important; }
    .content { padding-bottom:1rem!important; }
    .siege-mobile-nav {
        position:fixed;
        z-index:6200;
        left:0;
        right:0;
        bottom:0;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        min-height:66px;
        padding:.28rem max(.35rem,env(safe-area-inset-right)) calc(.28rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left));
        border-top:1px solid rgba(115,229,189,.2);
        background:linear-gradient(180deg,rgba(13,28,31,.98),rgba(4,10,14,.99));
        box-shadow:0 -12px 28px rgba(0,0,0,.42);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }
    .siege-mobile-nav>* {
        position:relative;
        display:grid;
        place-items:center;
        align-content:center;
        gap:.18rem;
        min-width:0;
        color:#8fa3a2;
        text-decoration:none;
        border:0;
        border-radius:4px 13px 4px 13px;
        background:transparent;
    }
    .siege-mobile-nav>*::before { content:""; position:absolute; left:22%; right:22%; top:0; height:2px; background:transparent; box-shadow:none; }
    .siege-mobile-nav>*.active { color:#fff; background:linear-gradient(180deg,rgba(115,229,189,.12),transparent); }
    .siege-mobile-nav>*.active::before { background:var(--command-accent); box-shadow:0 0 12px var(--command-accent); }
    .siege-mobile-nav span { font-size:1.32rem; line-height:1; }
    .siege-mobile-nav small { font-size:.54rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
    .siege-mobile-nav b { position:absolute; right:16%; top:5px; min-width:17px; height:17px; padding:0 4px; color:#fff; font-size:.56rem; line-height:17px; border-radius:9px; background:#d95049; box-shadow:0 2px 8px rgba(0,0,0,.35); }

    .siege-more-drawer.is-open { position:fixed; z-index:7000; inset:0; display:grid; align-items:end; }
    .siege-more-backdrop { position:absolute; inset:0; border:0; background:rgba(1,6,9,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .siege-more-panel {
        position:relative;
        width:100%;
        max-height:min(82dvh,760px);
        padding:1rem max(1rem,env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
        color:#eafff7;
        border:1px solid rgba(115,229,189,.22);
        border-bottom:0;
        border-radius:26px 26px 0 0;
        background:linear-gradient(155deg,#112526,#050c11 64%);
        box-shadow:0 -24px 50px rgba(0,0,0,.5);
        overflow:auto;
    }
    .siege-more-panel header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
    .siege-more-panel header small { color:var(--command-accent); font-size:.6rem; letter-spacing:.13em; }
    .siege-more-panel header h2 { margin:.05rem 0 0; font-size:1.2rem; }
    .siege-more-panel header button { width:42px; height:42px; color:#fff; font-size:1.6rem; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.04); }
    .siege-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
    .siege-more-grid>* { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:0 .6rem; min-height:74px; padding:.65rem; color:#eaf9f5; text-align:left; text-decoration:none; border:1px solid rgba(115,229,189,.13); border-radius:5px 16px 5px 16px; background:rgba(255,255,255,.035); }
    .siege-more-grid span { grid-row:1/3; font-size:1.55rem; }
    .siege-more-grid strong { align-self:end; font-size:.78rem; }
    .siege-more-grid small { align-self:start; color:#829795; font-size:.6rem; }
    .siege-more-logout { margin-top:.75rem; }
    .siege-more-logout button { width:100%; padding:.7rem; color:#ffaaa4; border:1px solid rgba(255,110,100,.2); border-radius:4px 14px 4px 14px; background:rgba(255,110,100,.06); }

    .frontier-command-ticker { top:0; min-height:58px; padding:.4rem .55rem; }
    .command-avatar { width:42px; height:42px; }
    .command-avatar::before { left:9px; top:12px; transform:scale(.88); transform-origin:top left; }
    .command-avatar-helmet { left:6px; top:4px; transform:scale(.88); transform-origin:top left; }
    .command-ticker-stats>span:not(:first-child) { display:none; }
    .command-ticker-stats>span { min-width:52px; padding:.28rem .35rem; }
    .command-ticker-copy strong { font-size:.78rem; }
    .command-ticker-copy span { font-size:.63rem; }

    .page-map .content,
    .page-world .content { padding-inline:.4rem!important; }
    .page-map .frontier-map-heading,
    .page-world .world-page-heading { padding:.7rem!important; }
    .page-map .frontier-map-heading p:not(.eyebrow),
    .page-world .world-page-heading p:not(.eyebrow) { display:none; }
    .page-map .frontier-map-heading h1,
    .page-world .world-page-heading h1 { font-size:1.25rem!important; }
    .frontier-command-panel { display:none!important; }

    .world-console,
    .global-world-shell { border-radius:3px 18px 3px 18px!important; }
    .world-viewport,
    .global-world-viewport { min-height:68svh!important; height:68svh!important; }
    .world-inspector { max-height:34svh; overflow:auto; }

    .siege-task-rail,
    .siege-action-rail { top:50%; gap:.35rem; }
    .siege-task-rail { left:.35rem; }
    .siege-action-rail { right:.35rem; }
    .siege-task-rail>* ,
    .siege-action-rail>* { width:52px; min-height:52px; padding:.23rem; border-radius:4px 14px 4px 14px; }
    .siege-task-rail span,
    .siege-action-rail span { font-size:1.13rem; }
    .siege-task-rail small,
    .siege-action-rail small { font-size:.44rem; }
    .siege-task-rail b { font-size:.58rem; }
    .siege-alert-strip { bottom:.42rem; max-width:calc(100% - 128px); padding:.32rem .5rem; }
    .siege-alert-strip strong { display:none; }
    .siege-alert-strip em { font-size:.56rem; }

    .map-command-dock { display:none!important; }
    .page-map .builder-roster { margin:.35rem!important; }
    .page-map .dominion-command-deck,
    .page-map .settlement-progression,
    .page-map .frontier-live-event,
    .page-map .daily-operations { scroll-margin-top:74px; }
    .page-world .world-event-ribbon,
    .page-world .world-operation-deck { margin-inline:0!important; }
}

@media (max-width: 560px) {
    .resource-bar { position:relative!important; top:auto!important; z-index:80!important; padding:.35rem!important; gap:.3rem!important; background:#081211!important; }
    .resource-chip { flex-basis:103px!important; min-height:48px!important; padding:.34rem .42rem!important; }
    .resource-chip small { font-size:.5rem!important; }
    .resource-chip strong { font-size:.72rem!important; }
    .frontier-command-ticker { grid-template-columns:auto minmax(0,1fr); }
    .command-ticker-stats { display:none; }
    .world-toolbar,
    .global-world-toolbar { padding:.36rem!important; gap:.3rem!important; }
    .world-toolbar .map-tool,
    .global-world-toolbar .map-tool { min-height:39px; padding:.36rem .5rem!important; font-size:.61rem!important; }
    .world-viewport,
    .global-world-viewport { min-height:64svh!important; height:64svh!important; }
    .siege-task-rail>* ,
    .siege-action-rail>* { width:47px; min-height:48px; }
    .siege-task-rail small,
    .siege-action-rail small { display:none; }
    .siege-more-grid { gap:.5rem; }
    .siege-more-grid>* { min-height:67px; padding:.55rem; }
    .daily-operations-head,
    .frontier-event-head { align-items:flex-start!important; }
}

@media (prefers-reduced-motion: reduce) {
    .frontier-command-ticker::before,
    .world-viewport::after,
    .global-world-viewport::after,
    .signal-dot,
    .alert-beacon,
    .world-operation-marker:not(.is-locked) { animation:none!important; }
}
.performance-lite .frontier-command-ticker::before,
.performance-lite .world-viewport::after,
.performance-lite .global-world-viewport::after { display:none; }

@keyframes commandTickerSweep { to { transform:translateX(100%); } }
@keyframes commandPulse { 50% { opacity:.45; transform:scale(.78); } }
@keyframes commandScan { from { transform:translateY(-110%); } to { transform:translateY(520%); } }
@keyframes commandTarget { 50% { opacity:.45; transform:scale(1.06); } }
@keyframes operationBeacon { 50% { filter:brightness(1.18) drop-shadow(0 0 11px rgba(244,200,108,.52)); } }
@keyframes commandMapPing { from { opacity:1; transform:scale(.35); } to { opacity:0; transform:scale(3.6); } }

/* Prevent legacy negative card margins from widening mobile command pages. */
@media (max-width:900px) {
    html, body { max-width:100%; overflow-x:clip; }
    .page-map .app-shell,
    .page-world .app-shell,
    .page-map .content,
    .page-world .content,
    .page-map .world-console,
    .page-world .global-world-shell { min-width:0!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin-inline:0!important; }
    .page-map .world-grid-layout,
    .page-map .world-viewport,
    .page-world .global-world-viewport { min-width:0!important; max-width:100%!important; overflow:hidden!important; }
}