html, body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 6px;
box-sizing: border-box;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #070a10;
color: #e2e8f0;
}
#game-container {
display: flex;
gap: 8px;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
box-sizing: border-box;
}
#sidebar {
width: 325px;
min-width: 325px;
max-width: 325px;
flex-shrink: 0;
height: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(14px);
padding: 10px;
border-radius: 8px;
border: 1px solid rgba(51, 65, 85, 0.7);
box-shadow: 0 8px 30px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
box-sizing: border-box;
}
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: #38bdf8; }
#board-container {
flex: 1;
min-width: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
background: rgba(15, 23, 42, 0.88);
backdrop-filter: blur(12px);
border-radius: 8px;
padding: 8px 10px;
overflow: hidden;
border: 1px solid rgba(51, 65, 85, 0.6);
box-sizing: border-box;
position: relative;
}
.badge-hotseat { background: #f59e0b; color: #000; font-weight: 800; padding: 2px 7px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; display: inline-flex; align-items: center; gap: 4px; }
.faction-tag { padding: 6px 10px; border-radius: 6px; font-weight: 800; font-size: 12px; margin: 6px 0; text-align: center; letter-spacing: 0.8px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.faction-cfc { background: linear-gradient(135deg, #0f274a, #1e3a8a); color: #93c5fd; border: 1px solid #3b82f6; box-shadow: 0 0 14px rgba(59, 130, 246, 0.3); }
.faction-juche { background: linear-gradient(135deg, #450a0a, #7f1d1d); color: #fca5a5; border: 1px solid #ef4444; box-shadow: 0 0 14px rgba(239, 68, 68, 0.3); }
/* Scenario Identifier on Main Dashboard */
.scenario-id-card {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
border: 1px solid #334155;
border-radius: 6px;
padding: 7px 9px;
margin: 5px 0 7px 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.scenario-id-card::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3.5px;
background: #38bdf8;
border-radius: 3px 0 0 3px;
}
.scenario-id-card.era-modern::before { background: linear-gradient(180deg, #38bdf8, #818cf8); }
.scenario-id-card.era-historical::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.scenario-id-card.era-tactical::before { background: linear-gradient(180deg, #10b981, #059669); }
.scenario-id-card.era-breakthrough::before { background: linear-gradient(180deg, #f43f5e, #be123c); }
.scenario-id-card.era-custom::before { background: linear-gradient(180deg, #a855f7, #6366f1); }
.scenario-era-badge {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.scenario-era-badge.era-modern {
background: rgba(56, 189, 248, 0.16);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}
.scenario-era-badge.era-historical {
background: rgba(245, 158, 11, 0.16);
color: #fde047;
border: 1px solid rgba(245, 158, 11, 0.4);
}
.scenario-era-badge.era-tactical {
background: rgba(16, 185, 129, 0.16);
color: #6ee7b7;
border: 1px solid rgba(16, 185, 129, 0.4);
}
.scenario-era-badge.era-breakthrough {
background: rgba(244, 63, 94, 0.16);
color: #fda4af;
border: 1px solid rgba(244, 63, 94, 0.4);
}
.scenario-era-badge.era-custom {
background: rgba(168, 85, 247, 0.16);
color: #d8b4fe;
border: 1px solid rgba(168, 85, 247, 0.4);
}
.scenario-dashboard-title {
font-size: 11.5px;
font-weight: 800;
color: #f8fafc;
margin: 4px 0 3px 0;
line-height: 1.3;
cursor: pointer;
letter-spacing: 0.3px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.scenario-dashboard-title:hover {
color: #38bdf8;
}
.scenario-meta-pill {
background: #0b0f19;
border: 1px solid #1e293b;
border-radius: 3px;
padding: 1px 5px;
font-size: 9.5px;
font-weight: 700;
}
.scenario-quick-select {
background: #0b0f19;
color: #cbd5e1;
border: 1px solid #334155;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
padding: 3px 6px;
outline: none;
cursor: pointer;
width: 100%;
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.scenario-quick-select:hover {
border-color: #38bdf8;
color: #f8fafc;
}
.timeline-scen-pill {
background: rgba(15, 23, 42, 0.9);
border: 1px solid #334155;
border-radius: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 800;
color: #38bdf8;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
letter-spacing: 0.4px;
white-space: nowrap;
transition: all 0.2s;
}
.timeline-scen-pill:hover {
border-color: #38bdf8;
background: rgba(56, 189, 248, 0.15);
color: #bae6fd;
}
/* Turn Progress Track */
.turn-progress-track { width: 100%; height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; margin: 3px 0 8px 0; }
.turn-progress-fill { height: 100%; background: linear-gradient(90deg, #38bdf8, #818cf8); border-radius: 3px; transition: width 0.4s ease; }
/* Tactical 5-Phase Stepper Rail */
.stepper-rail { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px 0; background: #0b0f19; padding: 5px; border-radius: 6px; border: 1px solid #1e293b; }
.stepper-step { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; color: #64748b; transition: all 0.2s; }
.stepper-step.active { background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-weight: 800; border-left: 3px solid #38bdf8; padding-left: 6px; }
.stepper-num { font-size: 9.5px; font-weight: 800; opacity: 0.75; }
/* Modular Collapsible Card & Console Tabs System */
.hud-card { background: #0d121f; border: 1px solid #1e293b; border-radius: 6px; margin-bottom: 6px; overflow: hidden; transition: border-color 0.2s; }
.hud-card:hover { border-color: #334155; }
.hud-card-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 9px; background: #111827; cursor: pointer; user-select: none; border-bottom: 1px solid #1e293b; }
.hud-card-header:hover { background: #1a2234; }
.hud-card-title { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.hud-card-toggle { font-size: 9.5px; color: #64748b; font-weight: 900; }
.hud-card-body { padding: 8px; font-size: 11px; }
/* Tactical Console Tabs System */
.console-tabs-header {
display: flex;
gap: 2px;
background: #090d16;
padding: 3px;
border-bottom: 1px solid #1e293b;
border-radius: 6px 6px 0 0;
}
.console-tab-btn {
flex: 1;
background: transparent;
border: 1px solid transparent;
color: #94a3b8;
font-size: 9.5px;
font-weight: 800;
padding: 6px 4px;
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.15s;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.console-tab-btn:hover {
color: #f1f5f9;
background: rgba(255,255,255,0.04);
}
.console-tab-btn.active {
color: #38bdf8;
background: #111827;
border-color: #1e293b;
box-shadow: inset 0 2px 0 #38bdf8;
}
.tab-badge {
font-size: 8px;
font-weight: 900;
padding: 1px 4px;
border-radius: 6px;
background: #334155;
color: #e2e8f0;
line-height: 1;
}
.console-tab-btn.active .tab-badge {
background: rgba(56, 189, 248, 0.25);
color: #38bdf8;
}
.console-pane {
padding: 8px;
background: #0d121f;
border-radius: 0 0 6px 6px;
font-size: 11px;
}
/* CRT Combat Odds Calculator HUD */
.odds-meter-track { display: flex; width: 100%; height: 16px; border-radius: 4px; overflow: hidden; border: 1px solid #334155; margin: 5px 0; background: #0f172a; }
.odds-seg { display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); transition: width 0.3s; white-space: nowrap; overflow: hidden; }
.seg-de { background: #16a34a; }
.seg-dr { background: #d97706; }
.seg-ee { background: #ca8a04; color: #000; }
.seg-loss { background: #dc2626; }
.seg-disrpt { background: #9333ea; }
.seg-ne { background: #475569; }
.odds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #0b0f19; padding: 5px; border-radius: 4px; border: 1px solid #1e293b; margin-bottom: 5px; }
.odds-stat { display: flex; flex-direction: column; align-items: center; }
.odds-stat-lbl { font-size: 8px; font-weight: 800; color: #64748b; text-transform: uppercase; }
.odds-stat-val { font-size: 11px; font-weight: 900; color: #f8fafc; }
/* Tactical Command Buttons */
.btn { background: #15803d; color: white; border: 1px solid #22c55e; padding: 7px; border-radius: 5px; cursor: pointer; font-weight: 700; width: 100%; margin-bottom: 5px; transition: background 0.15s, transform 0.1s; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.btn:hover { background: #16a34a; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-secondary { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.btn-secondary:hover { background: #334155; border-color: #64748b; color: #fff; }
.btn-danger { background: #7f1d1d; border-color: #ef4444; color: #fca5a5; }
.btn-danger:hover { background: #991b1b; }
/* Tactical Toolstrip Grid */
.toolstrip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 5px; }
.toolstrip-grid .btn { margin-bottom: 0; padding: 5px 6px; font-size: 10.5px; }
/* Unit Health Bar */
.unit-health-bar { display: flex; gap: 4px; margin: 4px 0; }
.health-pip { height: 5px; flex: 1; border-radius: 2px; background: #1e293b; border: 1px solid #334155; }
.health-pip.active-full { background: #22c55e; border-color: #4ade80; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.health-pip.active-sl { background: #f59e0b; border-color: #fbbf24; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.health-pip.dead { background: #ef4444; border-color: #f87171; }
/* Log Filter Buttons */
.log-filter-bar { display: flex; gap: 3px; margin-bottom: 5px; }
.log-filter-btn { flex: 1; background: #111827; border: 1px solid #1e293b; color: #64748b; font-size: 8.5px; font-weight: 800; padding: 3px 0; border-radius: 3px; cursor: pointer; text-align: center; }
.log-filter-btn:hover { background: #1e293b; color: #cbd5e1; }
.log-filter-btn.active { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #38bdf8; }
.log-box { background: #070a10; padding: 6px; height: 130px; overflow-y: scroll; font-family: 'Consolas', 'Courier New', monospace; font-size: 9.5px; border-radius: 4px; border: 1px solid #1e293b; line-height: 1.45; }
.unit-badge { width: 36px; height: 36px; background: #222; border: 1px solid #555; border-radius: 4px; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.unit-badge:hover { transform: scale(1.08); border-color: #ffeb3b; }
.unit-badge.sel { border-color: #00ffcc !important; box-shadow: 0 0 8px #00ffcc; }
/* Notification & Action Banners */
.banner { padding: 6px 12px; border-radius: 5px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 500; flex-shrink: 0; }
#combat-banner { background: #291e0a; border: 1px solid #f59e0b; color: #fef3c7; display: none; }
#retreat-banner { background: #3b0d0c; border: 1px solid #ef4444; color: #fee2e2; display: none; animation: pulse-border 1.5s infinite; }
#advance-banner { background: #064e3b; border: 1px solid #10b981; color: #d1fae5; display: none; }
#victory-banner { background: #1e1b4b; border: 2px solid #818cf8; color: #e0e7ff; display: none; font-size: 14px; padding: 10px; }
#combat-result-card { background: #111827; border: 1px solid #374151; padding: 6px 10px; border-radius: 5px; margin-bottom: 5px; font-size: 11px; display: none; flex-shrink: 0; }
.crt-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-weight: bold; font-size: 10.5px; margin-left: 6px; }
.crt-AE { background: #dc2626; color: #fff; }
.crt-DE { background: #16a34a; color: #fff; }
.crt-EE { background: #eab308; color: #000; }
.crt-DR { background: #f97316; color: #fff; }
.crt-AR { background: #0284c7; color: #fff; }
.crt-Disrpt { background: #a855f7; color: #fff; }
.crt-NE { background: #6b7280; color: #fff; }
/* Board Workspace (Houses Split-View ATO Card and Map Viewport) */
#board-workspace {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
width: 100%;
height: 100%;
position: relative;
gap: 8px;
box-sizing: border-box;
overflow: hidden;
}
/* The Dynamic ATO Card Styling (Split-View or Full Slide-Over) */
#ato-card {
--theme: #082d5a;
background-color: var(--theme);
padding: 8px 12px;
border-radius: 8px;
box-sizing: border-box;
transition: background-color 0.35s, width 0.25s, flex 0.25s;
border: 1.5px solid rgba(56, 189, 248, 0.45);
box-shadow: 0 16px 45px rgba(0,0,0,0.88), 0 0 25px rgba(2, 132, 199, 0.3);
display: flex;
flex-direction: column;
}
#ato-card.minimized {
display: none !important;
}
/* Split View Mode (Side-by-side with map) */
#ato-card.split-view {
position: relative;
top: 0;
left: 0;
right: auto;
width: 48%;
min-width: 420px;
max-width: 600px;
flex-shrink: 0;
height: 100%;
max-height: 100%;
z-index: 20;
overflow: hidden;
}
#ato-card.split-view #ato-card-body {
flex: 1;
overflow-y: auto;
overflow-x: auto;
min-height: 0;
padding-right: 4px;
}
#ato-card.split-view .ato-table {
grid-template-columns: 66px repeat(5, minmax(68px, 1fr));
min-width: 410px;
}
/* Full View Mode (Overlay above map) */
#ato-card.full-view {
position: absolute;
top: 48px;
left: 12px;
right: 12px;
z-index: 120;
max-height: calc(100% - 60px);
overflow-x: auto;
overflow-y: auto;
animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ato-view-toggle-btn {
background: #1e293b;
color: #94a3b8;
border: 1px solid #334155;
border-radius: 4px;
padding: 3px 8px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.ato-view-toggle-btn.active, .ato-view-toggle-btn:hover {
background: #0284c7;
color: #fff;
border-color: #38bdf8;
}
@media (max-width: 900px) {
#board-workspace {
flex-direction: column !important;
}
#ato-card.split-view {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 50% !important;
max-height: 50% !important;
}
}
.ato-title { font-family: 'Impact', 'Arial Black', sans-serif; color: #ffeb3b; text-transform: uppercase; font-size: 15px; margin: 0; letter-spacing: 1.2px; }
.ato-sorties { border: 1.5px solid rgba(255,255,255,0.7); border-radius: 5px; padding: 3px 6px; display: flex; gap: 6px; margin-bottom: 4px; align-items: center; min-height: 38px; }
.ato-sorties-title { color: #ffeb3b; font-weight: bold; width: 68px; text-align: center; line-height: 1.1; font-size: 10.5px; text-transform: uppercase; cursor: help; }
.ato-table { display: grid; grid-template-columns: 75px repeat(5, minmax(95px, 1fr)); gap: 2px; background: #fff; border: 1.5px solid #fff; min-width: 560px; }
.ato-cell { background-color: var(--theme); padding: 4px 2px; text-align: center; display: flex; flex-direction: column; justify-content: center; cursor: help; }
.ato-header { color: #ffeb3b; font-weight: bold; font-size: 10.5px; text-transform: uppercase; }
.ato-dropzone { background-color: var(--theme); min-height: 44px; display: flex; gap: 4px; flex-wrap: wrap; align-content: flex-start; justify-content: center; padding: 4px 2px; cursor: pointer; transition: background-color 0.2s; }
.ato-dropzone:hover { background-color: rgba(255, 235, 59, 0.2); }
/* Option 2 & 3: Viewport Navigation & Dynamic Height Flex */
#map-viewport {
position: relative;
flex: 1;
min-height: 0;
width: 100%;
height: auto;
background: #050811;
border-radius: 6px;
border: 1px solid #1e293b;
overflow: hidden;
cursor: grab;
user-select: none;
box-shadow: inset 0 0 30px rgba(0,0,0,0.85);
transition: all 0.2s ease;
}
#map-viewport.panning {
cursor: grabbing !important;
}
#map-pan-layer {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
will-change: transform;
}
/* Option 3: APP-6D NATO Symbology & Stacking Inspector Styles */
.map-counter svg.nato-counter-svg {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
.unit-badge svg.nato-counter-svg,
.unit-badge-wrapper svg.nato-counter-svg {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
border-radius: 4px;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
/* Dynamic Vector Wargame Counters (Cardboard Chit Style) */
.map-counter svg.dynamic-wargame-counter-svg {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
.unit-badge svg.dynamic-wargame-counter-svg,
.unit-badge-wrapper svg.dynamic-wargame-counter-svg,
#inspect-nato-container svg.dynamic-wargame-counter-svg,
.casualty-badge-wrapper svg.dynamic-wargame-counter-svg {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
border-radius: 4px;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
}
.counter-stack-badge {
position: absolute;
top: -8px;
left: -8px;
background: linear-gradient(135deg, #b45309, #f59e0b);
color: #fff;
font-size: 15px;
font-weight: 900;
padding: 2px 7px;
border-radius: 5px;
border: 2px solid #fde047;
box-shadow: 0 0 10px rgba(245, 158, 11, 0.9);
pointer-events: none;
letter-spacing: 0.5px;
z-index: 100;
white-space: nowrap;
}
.map-counter.stack-fanned {
transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s !important;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.9)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.8)) !important;
}
.map-counter.stack-fanned:hover {
transform: translate(calc(-50% + var(--fan-shift, 0px)), -50%) scale(1.05) !important;
z-index: 2000 !important;
filter: drop-shadow(0 14px 32px rgba(0,0,0,0.98)) drop-shadow(0 0 18px #fde047) !important;
}
.stack-inspector-strip {
background: #090e18;
border: 1px solid #1e293b;
border-radius: 5px;
padding: 6px;
margin-top: 8px;
}
.stack-inspector-header {
font-size: 9px;
font-weight: 800;
color: #f59e0b;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.stack-chip-list {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.stack-unit-chip {
background: #1e293b;
color: #cbd5e1;
border: 1px solid #475569;
padding: 3px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.stack-unit-chip:hover {
background: #334155;
color: #38bdf8;
border-color: #38bdf8;
}
.stack-unit-chip.active {
background: rgba(56, 189, 248, 0.2);
color: #38bdf8;
border-color: #38bdf8;
font-weight: 800;
}
/* Floating Map Controls HUD - Grouped Tactical Pills */
#map-controls-hud {
position: absolute;
top: 10px;
right: 10px;
z-index: 95;
display: flex;
gap: 6px;
align-items: center;
background: transparent;
padding: 0;
border: none;
box-shadow: none;
}
.map-hud-group {
display: flex;
align-items: center;
gap: 3px;
background: rgba(11, 15, 25, 0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(51, 65, 85, 0.85);
border-radius: 6px;
padding: 3px 5px;
box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.map-ctrl-btn {
background: #1e293b;
color: #cbd5e1;
border: 1px solid #475569;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.map-ctrl-btn.map-ctrl-icon {
padding: 4px 6px;
font-size: 10px;
}
.map-ctrl-btn:hover {
background: #334155;
color: #38bdf8;
border-color: #38bdf8;
transform: translateY(-1px);
}
.map-ctrl-btn:active {
transform: translateY(0);
}
/* HQ Tools Dropdown Menu */
.hq-tools-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(16px);
border: 1px solid #eab308;
border-radius: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,0.8), 0 0 15px rgba(234, 179, 8, 0.25);
min-width: 260px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 110;
animation: modalPop 0.18s ease-out;
}
.hq-dropdown-header {
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.8px;
color: #eab308;
padding: 4px 8px 6px 8px;
border-bottom: 1px solid #334155;
margin-bottom: 2px;
text-transform: uppercase;
}
.hq-dropdown-item {
background: #1e293b;
border: 1px solid transparent;
border-radius: 4px;
color: #f1f5f9;
padding: 6px 10px;
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
transition: all 0.15s;
}
.hq-dropdown-item:hover {
background: #334155;
border-color: #38bdf8;
color: #38bdf8;
transform: translateX(2px);
}
.hq-dropdown-item.item-danger:hover {
border-color: #ef4444;
color: #fca5a5;
background: #450a0a;
}
.hq-dropdown-item span:first-child {
font-size: 11px;
font-weight: 800;
}
.hq-item-sub {
font-size: 9px;
color: #94a3b8;
font-weight: normal;
}
.hq-dropdown-divider {
height: 1px;
background: #334155;
margin: 2px 0;
}
/* Floating Radar Minimap HUD */
#radar-minimap-container {
position: absolute;
bottom: 12px;
right: 12px;
z-index: 100;
background: rgba(11, 15, 25, 0.94);
border: 1.5px solid #38bdf8;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 15px rgba(56, 189, 248, 0.25);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: fadeIn 0.25s ease-out;
user-select: none;
}
.minimap-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #0f172a;
padding: 4px 8px;
border-bottom: 1px solid #1e293b;
}
.minimap-title {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.8px;
color: #38bdf8;
}
.minimap-close-btn {
background: transparent;
border: none;
color: #94a3b8;
font-size: 11px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.minimap-close-btn:hover {
color: #fff;
}
#minimap-canvas-wrapper {
position: relative;
width: 160px;
height: 310px;
cursor: crosshair;
background: #020408;
overflow: hidden;
}
#minimap-canvas {
display: block;
width: 160px;
height: 310px;
}
#minimap-viewport-box {
position: absolute;
border: 1.5px solid #38bdf8;
background: rgba(56, 189, 248, 0.25);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
border-radius: 2px;
pointer-events: auto;
cursor: move;
box-sizing: border-box;
transition: opacity 0.15s;
}
.minimap-legend {
display: flex;
justify-content: space-around;
background: #0b0f19;
padding: 3px 6px;
font-size: 9px;
font-weight: bold;
color: #94a3b8;
border-top: 1px solid #1e293b;
}
#map-wrapper { position: relative; display: inline-block; width: 1000px; -webkit-user-drag: none; user-select: none; }
#map-image { display: block; width: 1000px; height: auto; border-radius: 6px; z-index: 1; pointer-events: none; -webkit-user-drag: none; user-select: none; }
#grid-svg, #highlight-layer, #counter-layer { position: absolute; top: 0; left: 0; width: 1000px; height: 100%; pointer-events: none; }
#grid-svg { z-index: 2; }
#highlight-layer { z-index: 3; }
#counter-layer { z-index: 4; }
.map-counter {
position: absolute;
width: 96px;
height: 96px;
border: none;
background: transparent;
transform: translate(-50%, -50%) scale(0.3958);
cursor: pointer;
pointer-events: auto;
z-index: 10;
transition: left 0.55s cubic-bezier(0.25, 1, 0.5, 1), top 0.55s cubic-bezier(0.25, 1, 0.5, 1), transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.18s, z-index 0.1s;
transform-origin: center center;
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75));
}
.map-counter:hover {
transform: translate(-50%, -50%) scale(1.05) !important;
z-index: 1000 !important;
filter: drop-shadow(0 14px 32px rgba(0,0,0,0.95)) drop-shadow(0 0 16px rgba(253, 224, 71, 0.9)) !important;
}
.map-counter.attacker {
filter: drop-shadow(0 0 14px #00ffcc) drop-shadow(0 0 6px #00ffcc) !important;
z-index: 20;
}
.map-counter.retreating {
filter: drop-shadow(0 0 16px #ef4444) !important;
animation: pulse-retreat 1s infinite;
}
.map-counter.valid-target {
filter: drop-shadow(0 0 16px #ef4444) !important;
animation: pulse-target-counter 1.2s infinite;
}
.map-counter.disrupted {
filter: drop-shadow(0 0 14px #ef4444) !important;
}
.map-counter img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.counter-step-badge {
position: absolute;
bottom: -6px;
right: -6px;
background: #000;
color: #fff;
font-size: 16px;
font-weight: 900;
padding: 2px 7px;
border-radius: 4px;
border: 2px solid #777;
pointer-events: none;
white-space: nowrap;
}
.counter-disrupt-badge {
position: absolute;
top: -12px;
right: -12px;
background: #b91c1c;
color: #fff;
font-size: 15px;
font-weight: 900;
padding: 3px 9px;
border-radius: 6px;
border: 2px solid #fca5a5;
box-shadow: 0 3px 8px rgba(0,0,0,0.9);
pointer-events: none;
letter-spacing: 0.5px;
animation: pulse-border 1.5s infinite;
white-space: nowrap;
}
/* Tactical Disruption Glows & Debuff Badges */
@keyframes pulse-debuff-amber {
0%, 100% { box-shadow: 0 0 6px rgba(249, 115, 22, 0.75), inset 0 0 3px rgba(249, 115, 22, 0.4); border-color: #f97316 !important; }
50% { box-shadow: 0 0 16px rgba(251, 146, 60, 1), 0 0 22px rgba(234, 88, 12, 0.6), inset 0 0 5px rgba(251, 146, 60, 0.6); border-color: #fb923c !important; }
}
@keyframes pulse-debuff-purple {
0%, 100% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.75), inset 0 0 3px rgba(168, 85, 247, 0.4); border-color: #a855f7 !important; }
50% { box-shadow: 0 0 16px rgba(192, 132, 252, 1), 0 0 22px rgba(147, 51, 234, 0.6), inset 0 0 5px rgba(192, 132, 252, 0.6); border-color: #c084fc !important; }
}
@keyframes pulse-debuff-multi {
0%, 100% { box-shadow: 0 0 8px #ef4444, inset 0 0 3px #f97316; border-color: #ef4444 !important; }
50% { box-shadow: 0 0 18px #f97316, 0 0 24px #ef4444, inset 0 0 6px #f97316; border-color: #fb923c !important; }
}
.map-counter.debuffed-supply {
animation: pulse-debuff-amber 2s infinite ease-in-out !important;
}
.map-counter.debuffed-c2 {
animation: pulse-debuff-purple 2s infinite ease-in-out !important;
}
.map-counter.debuffed-multi {
animation: pulse-debuff-multi 1.8s infinite ease-in-out !important;
}
.counter-debuff-pill {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
background: rgba(185, 28, 28, 0.96);
color: #fff;
font-size: 14px;
font-weight: 900;
padding: 2px 8px;
border-radius: 5px;
border: 2px solid #f87171;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.9), 0 3px 6px rgba(0,0,0,0.85);
white-space: nowrap;
pointer-events: none;
letter-spacing: 0.4px;
z-index: 15;
text-shadow: 0 1px 3px #000;
animation: pulse-debuff-pill 1.8s infinite ease-in-out;
}
.counter-debuff-pill.amber {
background: rgba(180, 83, 9, 0.96);
color: #fffbeb;
border-color: #f59e0b;
box-shadow: 0 0 14px rgba(245, 158, 11, 0.95), 0 3px 6px rgba(0,0,0,0.85);
}
.counter-debuff-pill.purple {
background: rgba(109, 40, 217, 0.96);
color: #faf5ff;
border-color: #c084fc;
box-shadow: 0 0 14px rgba(168, 85, 247, 0.95), 0 3px 6px rgba(0,0,0,0.85);
}
.counter-debuff-pill.multi {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.96), rgba(180, 83, 9, 0.96));
color: #fff;
border-color: #fca5a5;
box-shadow: 0 0 14px rgba(239, 68, 68, 0.95), 0 3px 6px rgba(0,0,0,0.85);
}
@keyframes pulse-debuff-pill {
0%, 100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
50% { transform: translateX(-50%) scale(1.06); filter: brightness(1.25); }
}
/* 3D Damaged Step-Loss Flip Animation */
@keyframes unit-step-flip {
0% { transform: translate(-50%, -50%) scale(0.3958) rotateY(0deg); }
45% { transform: translate(-50%, -50%) scale(0.75) rotateY(90deg); filter: brightness(2.2) drop-shadow(0 0 30px #ef4444); }
55% { transform: translate(-50%, -50%) scale(0.75) rotateY(90deg); }
100% { transform: translate(-50%, -50%) scale(0.3958) rotateY(0deg); }
}
.counter-step-flipped {
animation: unit-step-flip 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
z-index: 1000 !important;
}
/* Shockwave Detonation Effect */
@keyframes shockwave-expand {
0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 6px; }
100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; border-width: 1px; }
}
.shockwave {
position: absolute;
width: 44px;
height: 44px;
border: 4px solid #ef4444;
border-radius: 50%;
pointer-events: none;
z-index: 80;
animation: shockwave-expand 0.75s ease-out forwards;
box-shadow: 0 0 20px #ef4444, inset 0 0 10px #f97316;
}
/* Flight Corridor and Jet Glider */
@keyframes flight-dash {
to { stroke-dashoffset: -40; }
}
.flight-corridor-line {
animation: flight-dash 0.75s linear infinite;
filter: drop-shadow(0 0 8px currentColor);
}
@keyframes pulse-ada-threat {
0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #ef4444, inset 0 0 8px #ef4444; }
50% { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 24px #dc2626, inset 0 0 14px #f87171; }
100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px #ef4444, inset 0 0 8px #ef4444; }
}
.ada-threat-halo {
position: absolute;
width: 72px;
height: 72px;
border-radius: 50%;
border: 2.5px dashed #ef4444;
background: rgba(239, 68, 68, 0.22);
pointer-events: none;
z-index: 12;
animation: pulse-ada-threat 1.4s ease-in-out infinite;
}
/* Casualty Parking Lot Styling */
.casualty-badge-wrapper {
position: relative;
width: 38px;
height: 38px;
filter: grayscale(100%) contrast(120%);
opacity: 0.65;
border: 1px solid #7f1d1d;
border-radius: 4px;
background: #000;
transition: transform 0.18s, opacity 0.18s;
cursor: pointer;
}
.casualty-badge-wrapper:hover {
filter: grayscale(20%) contrast(130%);
opacity: 1;
transform: scale(2.4);
z-index: 1000;
box-shadow: 0 6px 16px rgba(0,0,0,0.95);
}
.casualty-badge-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.casualty-ribbon {
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
background: #dc2626;
color: #fff;
font-size: 7px;
font-weight: 900;
padding: 0 3px;
border-radius: 2px;
border: 1px solid #7f1d1d;
letter-spacing: 0.5px;
white-space: nowrap;
}
.retreat-highlight { position: absolute; width: 48px; height: 48px; border: 3px dashed #ef4444; background: rgba(239, 68, 68, 0.35); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; z-index: 25; animation: pulse-retreat 1s infinite alternate; }
.move-highlight { position: absolute; width: 48px; height: 48px; border: 2px dashed #00ffcc; background: rgba(0, 255, 204, 0.28); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; z-index: 22; transition: transform 0.15s, background-color 0.15s; }
.move-highlight:hover { transform: translate(-50%, -50%) scale(1.18); background: rgba(0, 255, 204, 0.6); border-color: #fff; box-shadow: 0 0 16px rgba(0, 255, 204, 0.8); }
.target-highlight { position: absolute; width: 48px; height: 48px; border: 2px dashed #f59e0b; background: rgba(245, 158, 11, 0.25); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; z-index: 24; animation: pulse-target 1.2s infinite alternate; }
/* Operational Installations */
.installation-badge { position: absolute; transform: translate(-50%, -50%); padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; cursor: pointer; pointer-events: auto; z-index: 15; display: flex; align-items: center; gap: 4px; white-space: nowrap; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.85); background: #111827; transition: transform 0.15s; }
.installation-badge:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 35; }
.installation-cfc { border-color: #3b82f6; color: #93c5fd; }
.installation-juche { border-color: #ef4444; color: #fca5a5; }
.installation-neutral { border-color: #fbbf24; color: #fde68a; }
.installation-badge.disrupted { background: #450a0a !important; border-color: #ef4444 !important; color: #fca5a5 !important; box-shadow: 0 0 16px #ef4444, inset 0 0 8px #7f1d1d !important; animation: pulse-disrupt 1.5s infinite; }
.installation-badge.targetable { border-color: #f59e0b !important; box-shadow: 0 0 14px #f59e0b !important; animation: pulse-target 1s infinite alternate; }
.map-disruption-tag { position: absolute; transform: translate(-50%, -100%); background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fef2f2; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1.5px solid #f87171; box-shadow: 0 4px 10px rgba(0,0,0,0.9), 0 0 8px #ef4444; white-space: nowrap; z-index: 18; pointer-events: none; animation: pulse-disrupt 1.2s infinite alternate; letter-spacing: 0.5px; }
.map-disruption-tag::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 5px 5px 0 5px; border-style: solid; border-color: #991b1b transparent transparent transparent; }
.disruption-card { background: #261618; border: 1px solid #7f1d1d; border-radius: 4px; padding: 6px 8px; margin-bottom: 8px; }
.disruption-title { color: #f87171; font-weight: bold; font-size: 11px; margin-bottom: 2px; }
.unit-badge-wrapper { position: relative; display: inline-block; cursor: pointer; transition: transform 0.18s, z-index 0.1s; transform-origin: center center; }
.unit-badge-wrapper:hover { transform: scale(2.4) !important; z-index: 500 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.95); }
.unit-badge-wrapper.spent { opacity: 0.4; filter: grayscale(90%); }
.spent-badge { position: absolute; top: -3px; left: -3px; background: #dc2626; color: #fff; font-size: 8px; font-weight: bold; padding: 1px 3px; border-radius: 2px; border: 1px solid #7f1d1d; }
.counter-status-badge {
position: absolute;
top: -8px;
left: -8px;
background: #ea580c;
color: #fff;
font-size: 15px;
font-weight: 900;
padding: 2px 7px;
border-radius: 4px;
border: 2px solid #7c2d12;
white-space: nowrap;
}
@keyframes pulse-retreat { from { transform: translate(-50%, -50%) scale(0.36); opacity: 0.7; } to { transform: translate(-50%, -50%) scale(0.44); opacity: 1; } }
@keyframes pulse-target { from { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; } to { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes pulse-target-counter { 0%, 100% { filter: drop-shadow(0 0 10px #ef4444); } 50% { filter: drop-shadow(0 0 22px #ff7878); } }
@keyframes pulse-disrupt { 0%, 100% { border-color: #ef4444; } 50% { border-color: #7f1d1d; } }
@keyframes pulse-border { 0%, 100% { border-color: #ef4444; } 50% { border-color: #fca5a5; } }
/* Tactical Wiggle Animation for Eligible Units */
@keyframes tactical-wiggle {
0% { transform: translate(-50%, -50%) scale(0.40) rotate(0deg); }
25% { transform: translate(-50%, -50%) scale(0.45) rotate(-3.5deg); }
50% { transform: translate(-50%, -50%) scale(0.40) rotate(0deg); }
75% { transform: translate(-50%, -50%) scale(0.45) rotate(3.5deg); }
100% { transform: translate(-50%, -50%) scale(0.40) rotate(0deg); }
}
@keyframes tactical-wiggle-badge {
0% { transform: scale(1.12) rotate(0deg); }
25% { transform: scale(1.18) rotate(-3.5deg); }
50% { transform: scale(1.12) rotate(0deg); }
75% { transform: scale(1.18) rotate(3.5deg); }
100% { transform: scale(1.12) rotate(0deg); }
}
.map-counter.unit-eligible {
z-index: 45 !important;
animation: tactical-wiggle 1.8s ease-in-out infinite !important;
filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 6px #ffffff) !important;
}
.unit-badge-wrapper.unit-eligible {
animation: tactical-wiggle-badge 1.8s ease-in-out infinite !important;
box-shadow: 0 0 12px 3px rgba(250, 204, 21, 0.9) !important;
border-radius: 4px;
}
.unit-badge-wrapper.selected-sortie {
border: 2px solid #38bdf8 !important;
box-shadow: 0 0 16px 3px #38bdf8 !important;
transform: scale(1.25) !important;
z-index: 50 !important;
}
.ato-dropzone.zone-eligible {
border: 2px dashed #fde047 !important;
background-color: rgba(253, 224, 71, 0.18) !important;
box-shadow: inset 0 0 12px rgba(253, 224, 71, 0.35) !important;
}
/* Fog of War & Reconnaissance Tactical Contact Styles (Option 4) */
@keyframes pulse-unidentified {
0% { transform: scale(0.92); opacity: 0.75; text-shadow: 0 0 4px #94a3b8; }
100% { transform: scale(1.12); opacity: 1; text-shadow: 0 0 10px #38bdf8, 0 0 14px #60a5fa; }
}
.map-counter.contact-unidentified {
background: radial-gradient(circle, #1e293b 0%, #090d16 100%) !important;
border-radius: 8px !important;
border: 3px dashed #94a3b8 !important;
box-shadow: 0 0 14px rgba(148, 163, 184, 0.5), inset 0 0 16px rgba(15, 23, 42, 0.9) !important;
cursor: pointer !important;
}
.map-counter.contact-unidentified:hover {
transform: translate(-50%, -50%) scale(1.05) !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 24px #38bdf8, inset 0 0 16px #0284c7 !important;
z-index: 50 !important;
}
.unidentified-radar-ping {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
pointer-events: none;
}
.unidentified-radar-ping .ping-icon {
font-size: 34px;
animation: pulse-unidentified 1.4s ease-in-out infinite alternate;
}
.unidentified-radar-ping .ping-label {
font-size: 13.5px;
font-weight: 800;
color: #94a3b8;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* Concentric Satellite / UAV ISR Radar Wave */
@keyframes isr-radar-wave {
0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 4px; }
50% { opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; border-width: 1px; }
}
.isr-sweep-wave {
position: absolute;
width: 50px;
height: 50px;
border: 3px solid #38bdf8;
background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(56, 189, 248, 0.05) 60%, transparent 100%);
border-radius: 50%;
pointer-events: none;
z-index: 60;
animation: isr-radar-wave 2s ease-out forwards;
box-shadow: 0 0 25px #0284c7, inset 0 0 15px #38bdf8;
}
.isr-sweep-wave.china {
border-color: #f59e0b;
background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.08) 60%, transparent 100%);
box-shadow: 0 0 25px #d97706, inset 0 0 15px #f59e0b;
}
.isr-sweep-wave.russia {
border-color: #ef4444;
background: radial-gradient(circle, rgba(239, 68, 68, 0.35) 0%, rgba(6, 182, 212, 0.12) 60%, transparent 100%);
box-shadow: 0 0 25px #dc2626, inset 0 0 15px #06b6d4;
}
.armed-isr-cursor {
cursor: crosshair !important;
}
/* Visual Dice Roll Modal & 3D Dice Styling */
#dice-roll-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(10, 14, 23, 0.78);
backdrop-filter: blur(5px);
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.dice-modal-content {
background: #0f172a;
border: 2px solid #38bdf8;
border-radius: 12px;
padding: 22px;
width: 440px;
max-width: 90vw;
box-shadow: 0 20px 45px rgba(0,0,0,0.95), 0 0 25px rgba(56, 189, 248, 0.4);
color: #f8fafc;
text-align: center;
position: relative;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
0% { transform: scale(0.7) translateY(30px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#reinforcements-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(10, 14, 23, 0.85);
backdrop-filter: blur(6px);
z-index: 10001;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.reinforcements-modal-content {
background: #0f172a;
border: 2px solid #38bdf8;
border-radius: 12px;
padding: 22px;
width: 640px;
max-width: 92vw;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 45px rgba(0,0,0,0.95), 0 0 25px rgba(56, 189, 248, 0.4);
color: #f8fafc;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#strike-package-modal, #fighter-sweep-modal, #jfc-apportionment-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(10, 14, 23, 0.85);
backdrop-filter: blur(6px);
z-index: 10002;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.jfc-card {
background: #1e293b;
border: 1.5px solid #334155;
border-radius: 8px;
padding: 10px 14px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.jfc-card:hover {
border-color: #fde047;
background: #23334d;
}
.jfc-card.selected {
border-color: #fde047;
background: rgba(234, 179, 8, 0.12);
box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
}
.jfc-bonus-badge {
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.5px;
}
.strike-modal-content {
background: #0f172a;
border: 2px solid #38bdf8;
border-radius: 12px;
padding: 22px;
width: 580px;
max-width: 92vw;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 45px rgba(0,0,0,0.95), 0 0 25px rgba(56, 189, 248, 0.4);
color: #f8fafc;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.flight-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 8px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.flight-badge-img {
width: 48px;
height: 48px;
border-radius: 6px;
border: 1px solid #475569;
background: #0b1120;
object-fit: cover;
}
.flight-info {
flex: 1;
text-align: left;
}
.flight-title {
font-size: 13px;
font-weight: 700;
color: #f1f5f9;
}
.flight-stats {
display: flex;
gap: 6px;
font-size: 10px;
margin-top: 4px;
flex-wrap: wrap;
}
.flight-stat-pill {
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
font-size: 10px;
display: inline-flex;
align-items: center;
}
.stat-cs { background: #dc2626; color: #fff; }
.stat-a2g { background: #2563eb; color: #fff; }
.stat-sead { background: #d97706; color: #fff; }
.stat-step { background: #059669; color: #fff; }
.escort-radio-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
background: #1e293b;
border: 1px solid #334155;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.escort-radio-row:hover {
border-color: #38bdf8;
background: #24344d;
}
.escort-radio-row.selected {
border-color: #38bdf8;
background: #1e3a5f;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}
.sweep-quick-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.sweep-dest-btn {
background: #1e293b;
border: 1px solid #334155;
color: #f1f5f9;
padding: 8px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
}
.sweep-dest-btn:hover {
border-color: #f59e0b;
background: #292524;
color: #fbbf24;
}
.dice-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #334155;
padding-bottom: 10px;
margin-bottom: 14px;
}
.dice-modal-title {
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
color: #38bdf8;
text-transform: uppercase;
}
.dice-close-btn {
background: transparent;
border: none;
color: #94a3b8;
font-size: 18px;
cursor: pointer;
line-height: 1;
padding: 2px 6px;
border-radius: 4px;
}
.dice-close-btn:hover {
color: #fff;
background: #334155;
}
.dice-combatants-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
background: #1e293b;
border-radius: 8px;
padding: 10px;
border: 1px solid #334155;
}
.combatant-box {
display: flex;
flex-direction: column;
flex: 1;
gap: 2px;
}
.combatant-role {
font-size: 9px;
font-weight: bold;
letter-spacing: 0.8px;
color: #94a3b8;
}
.combatant-name {
font-size: 13px;
font-weight: bold;
color: #f1f5f9;
}
.combatant-stat {
font-size: 11px;
font-weight: 800;
color: #fbbf24;
}
.vs-badge {
padding: 3px 8px;
background: #0f172a;
border-radius: 12px;
font-size: 11px;
font-weight: 900;
color: #ef4444;
border: 1px solid #475569;
margin: 0 8px;
}
.dice-arena {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 16px 0;
min-height: 60px;
}
.die-face-svg {
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
transition: transform 0.2s;
}
.die-face-svg.rolling-die {
animation: die-roll-spin 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes die-roll-spin {
0% { transform: rotate(0deg) scale(0.65) translateY(-25px); opacity: 0.4; }
50% { transform: rotate(380deg) scale(1.25) translateY(10px); opacity: 0.9; }
100% { transform: rotate(720deg) scale(1) translateY(0); opacity: 1; }
}
.dice-breakdown-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
background: #1e293b;
padding: 8px;
border-radius: 6px;
border: 1px solid #334155;
margin-bottom: 14px;
}
.breakdown-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.breakdown-item.highlight {
background: rgba(56, 189, 248, 0.15);
border-radius: 4px;
}
.breakdown-lbl {
font-size: 9px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
}
.breakdown-val {
font-size: 14px;
font-weight: 900;
color: #f8fafc;
}
.dice-result-banner {
padding: 10px;
border-radius: 6px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.5px;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.result-code-tag {
font-size: 18px;
padding: 2px 8px;
border-radius: 4px;
border: 1.5px solid rgba(255,255,255,0.4);
}
/* Option 5: Operational Timeline Scrubber & Combat Replayer HUD */
#timeline-scrubber-hud {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(180deg, #0f172a, #0b0f19);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 6px;
padding: 4px 8px;
margin-bottom: 6px;
flex-shrink: 0;
gap: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
font-size: 11px;
user-select: none;
}
.timeline-left {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
}
.timeline-title {
font-size: 10px;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.8px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.timeline-pills-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.turn-pill {
background: #1e293b;
border: 1px solid #334155;
color: #cbd5e1;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
user-select: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.turn-pill:hover {
border-color: #38bdf8;
color: #fff;
background: #24344d;
}
.turn-pill.active-historical {
background: #78350f;
border-color: #f59e0b;
color: #fef08a;
box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
font-weight: 800;
}
.turn-pill.live-pill {
background: #064e3b;
border-color: #10b981;
color: #a7f3d0;
font-weight: 800;
}
.turn-pill.live-pill.active-live {
background: #047857;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
border-color: #34d399;
}
.turn-combat-badge {
background: rgba(56, 189, 248, 0.25);
color: #38bdf8;
border-radius: 10px;
font-size: 8.5px;
padding: 0 4px;
font-weight: 900;
}
.live-indicator-dot {
width: 6px;
height: 6px;
background: #34d399;
border-radius: 50%;
animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
0% { transform: scale(0.9); opacity: 0.7; }
50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 6px #34d399; }
100% { transform: scale(0.9); opacity: 0.7; }
}
.timeline-nav-btn {
background: #1e293b;
border: 1px solid #475569;
color: #cbd5e1;
padding: 3px 7px;
border-radius: 4px;
cursor: pointer;
font-size: 10px;
font-weight: 800;
}
.timeline-nav-btn:hover:not(:disabled) {
background: #334155;
color: #fff;
}
.timeline-nav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.timeline-actions-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.timeline-action-btn {
background: #1e293b;
border: 1px solid #38bdf8;
color: #38bdf8;
padding: 3px 8px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.timeline-action-btn:hover {
background: #0284c7;
color: #fff;
}
.timeline-action-btn.aar-btn {
border-color: #818cf8;
color: #c7d2fe;
}
.timeline-action-btn.aar-btn:hover {
background: #4f46e5;
color: #fff;
}
/* Historical Replay Viewport Alert Banner */
#historical-replay-banner {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, rgba(146, 64, 14, 0.96), rgba(180, 83, 9, 0.96));
border: 1.5px solid #f59e0b;
border-radius: 6px;
padding: 6px 14px;
color: #fef3c7;
z-index: 100;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 15px rgba(245, 158, 11, 0.4);
animation: fadeInDown 0.25s ease-out;
}
@keyframes fadeInDown {
from { opacity: 0; transform: translate(-50%, -10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.replay-banner-text {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.4px;
display: flex;
align-items: center;
gap: 8px;
}
.replay-btn-live {
background: #10b981;
border: 1px solid #34d399;
color: #fff;
font-weight: 800;
font-size: 10.5px;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.replay-btn-live:hover {
background: #059669;
transform: scale(1.03);
}
/* Modal styling for Replayer and AAR */
#engagement-replayer-modal, #aar-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(10, 14, 23, 0.88);
backdrop-filter: blur(8px);
z-index: 10003;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.engagement-modal-content {
background: #0f172a;
border: 2px solid #38bdf8;
border-radius: 12px;
padding: 20px;
width: 780px;
max-width: 95vw;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 50px rgba(0,0,0,0.95), 0 0 30px rgba(56, 189, 248, 0.35);
color: #f8fafc;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.aar-modal-content {
background: #0c1222;
border: 2px solid #818cf8;
border-radius: 12px;
padding: 22px;
width: 860px;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 50px rgba(0,0,0,0.95), 0 0 35px rgba(129, 140, 248, 0.35);
color: #f8fafc;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Modal styling for Monte Carlo Playtest Simulator & Balance Lab */
#monte-carlo-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(8, 12, 20, 0.90);
backdrop-filter: blur(8px);
z-index: 10005;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.monte-carlo-modal-content {
background: #090e17;
border: 2px solid #10b981;
border-radius: 12px;
padding: 20px;
width: 1000px;
max-width: 96vw;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 50px rgba(0,0,0,0.95), 0 0 35px rgba(16, 185, 129, 0.35);
color: #f8fafc;
animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mc-stat-card {
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mc-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
text-align: center;
}
.mc-table th {
background: #1e293b;
color: #94a3b8;
padding: 6px 8px;
font-weight: 700;
border: 1px solid #334155;
}
.mc-table td {
padding: 5px 6px;
border: 1px solid #1e293b;
background: #090d16;
color: #f1f5f9;
}
.mc-table input, .mc-table select {
background: #0f172a;
color: #38bdf8;
border: 1px solid #334155;
border-radius: 4px;
padding: 2px 4px;
font-size: 11px;
font-family: inherit;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.mc-table input:focus, .mc-table select:focus {
border-color: #10b981;
outline: none;
background: #132033;
}
/* Engagements List Styling */
.filter-tabs-row {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid #1e293b;
}
.filter-tab-pill {
background: #1e293b;
border: 1px solid #334155;
color: #94a3b8;
padding: 3px 9px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.filter-tab-pill:hover {
color: #f8fafc;
border-color: #64748b;
}
.filter-tab-pill.active {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
color: #38bdf8;
font-weight: 800;
}
.engagements-scroll-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
max-height: 56vh;
padding-right: 4px;
}
.engagement-card {
background: #131c31;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.engagement-card:hover {
border-color: #38bdf8;
background: #17233d;
}
.eng-info-col {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.eng-top-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
}
.eng-badge-turn {
background: #0f172a;
border: 1px solid #334155;
padding: 1px 6px;
border-radius: 3px;
color: #94a3b8;
font-weight: 700;
}
.eng-badge-type {
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
}
.eng-type-ground { background: #1e3a8a; color: #93c5fd; border: 1px solid #3b82f6; }
.eng-type-air { background: #075985; color: #7dd3fc; border: 1px solid #0284c7; }
.eng-type-tbm { background: #581c87; color: #d8b4fe; border: 1px solid #9333ea; }
.eng-type-arty { background: #7c2d12; color: #fdba74; border: 1px solid #ea580c; }
.eng-combatants-line {
font-size: 12px;
font-weight: 800;
color: #f1f5f9;
}
.eng-details-line {
font-size: 10px;
color: #94a3b8;
display: flex;
gap: 10px;
}
.eng-replay-btn {
background: #0284c7;
border: 1px solid #38bdf8;
color: #fff;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.15s ease;
white-space: nowrap;
}
.eng-replay-btn:hover {
background: #0369a1;
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
/* AAR Dashboard Grid & Badges */
.aar-hero-card {
background: linear-gradient(135deg, #111827, #1e293b);
border: 1px solid #374151;
border-radius: 10px;
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 12px;
}
.aar-grade-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #090d16;
border: 2px solid #38bdf8;
border-radius: 8px;
padding: 8px 16px;
min-width: 90px;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
}
.aar-grade-letter {
font-size: 32px;
font-weight: 900;
line-height: 1;
}
.aar-grade-label {
font-size: 9px;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
margin-top: 4px;
text-align: center;
}
.aar-grid-4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
overflow-y: auto;
max-height: 52vh;
padding-right: 4px;
}
.aar-panel-card {
background: #111827;
border: 1px solid #1f2937;
border-radius: 8px;
padding: 11px;
display: flex;
flex-direction: column;
}
.aar-panel-title {
font-size: 11px;
font-weight: 800;
color: #cbd5e1;
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid #1f2937;
}
.cer-meter-wrap {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 2px;
}
.cer-ratio-display {
font-size: 20px;
font-weight: 900;
display: flex;
align-items: baseline;
gap: 8px;
}
.cer-progress-bar {
display: flex;
height: 12px;
border-radius: 4px;
overflow: hidden;
background: #1f2937;
border: 1px solid #374151;
}
.cer-cfc-fill {
background: #3b82f6;
transition: width 0.4s ease;
}
.cer-juche-fill {
background: #ef4444;
transition: width 0.4s ease;
}
/* Option 7: Solitaire AI Opponent Styles */
.ai-command-card {
background: rgba(15, 23, 42, 0.92);
border: 1px solid #334155;
border-radius: 6px;
padding: 6px 8px;
display: flex;
flex-direction: column;
gap: 5px;
}
.ai-select {
background: #0f172a;
color: #e2e8f0;
border: 1px solid #475569;
border-radius: 4px;
padding: 3px 6px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
outline: none;
}
.ai-select:focus {
border-color: #38bdf8;
}
#ai-command-banner {
background: linear-gradient(90deg, rgba(17, 24, 39, 0.96) 0%, rgba(30, 27, 75, 0.95) 50%, rgba(17, 24, 39, 0.96) 100%);
border-bottom: 2px solid #6366f1;
color: #e0e7ff;
display: none;
align-items: center;
justify-content: space-between;
padding: 6px 14px;
font-size: 11px;
gap: 12px;
z-index: 45;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
.ai-radar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 8px #38bdf8;
animation: pulse-live 1.1s infinite;
flex-shrink: 0;
}
/* Interactive Walkthrough Coach Styles */
.walkthrough-coach-container {
position: fixed;
bottom: 22px;
right: 22px;
width: 410px;
max-width: calc(100vw - 32px);
background: rgba(15, 23, 42, 0.98);
border: 1.5px solid #38bdf8;
border-radius: 8px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.88), 0 0 20px rgba(56, 189, 248, 0.28);
z-index: 10010;
backdrop-filter: blur(14px);
color: #f8fafc;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
transition: all 0.2s ease-in-out;
}
.walkthrough-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 12px 7px 12px;
border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}
.walkthrough-icon {
font-size: 18px;
filter: drop-shadow(0 0 6px #eab308);
}
.walkthrough-title {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
color: #38bdf8;
text-transform: uppercase;
}
.wt-badge {
font-size: 9px;
font-weight: 800;
padding: 1px 6px;
border-radius: 3px;
background: #0369a1;
color: #f0f9ff;
letter-spacing: 0.5px;
}
.wt-badge-sub {
font-size: 9px;
color: #fde047;
font-weight: 700;
}
.wt-ctrl-btn {
background: transparent;
border: 1px solid #334155;
color: #94a3b8;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.wt-ctrl-btn:hover {
background: #1e293b;
color: #f8fafc;
border-color: #38bdf8;
}
.wt-progress-track {
width: 100%;
height: 3.5px;
background: #1e293b;
overflow: hidden;
}
.wt-progress-fill {
height: 100%;
background: linear-gradient(90deg, #0284c7, #38bdf8, #eab308);
transition: width 0.3s ease;
}
.walkthrough-body {
padding: 11px 14px 13px 14px;
}
.wt-step-heading {
font-size: 13.5px;
font-weight: 800;
color: #f8fafc;
margin-bottom: 6px;
line-height: 1.3;
}
.wt-step-text {
font-size: 11.5px;
color: #cbd5e1;
line-height: 1.48;
margin-bottom: 10px;
}
.wt-action-box {
background: rgba(2, 6, 23, 0.9);
border: 1px dashed #38bdf8;
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 10px;
font-size: 11px;
color: #f0fdf4;
line-height: 1.4;
}
.wt-controls-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.btn-tutorial-pulse {
animation: pulse-tutorial 2s infinite ease-in-out;
}
@keyframes pulse-tutorial {
0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}
@keyframes walkthroughPulse {
0% { transform: scale(0.88); opacity: 0.75; box-shadow: 0 0 10px #38bdf8; }
50% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 24px #38bdf8; }
100% { transform: scale(0.88); opacity: 0.75; box-shadow: 0 0 10px #38bdf8; }
}
.walkthrough-beacon-ring {
position: absolute;
width: 56px;
height: 56px;
border: 2.5px solid #38bdf8;
border-radius: 50%;
pointer-events: none;
z-index: 45;
animation: walkthroughPulse 1.4s infinite ease-in-out;
}
/* Milestone 8: On-Map Floating Combat Badges */
.combat-floater {
position: absolute;
pointer-events: none;
z-index: 120;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
font-size: 12px;
font-weight: 900;
padding: 3px 8px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.85);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
animation: combatFloaterAnim 1.6s ease-out forwards;
}
@keyframes combatFloaterAnim {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
70% { opacity: 1; transform: translate(-50%, -115%) scale(1.0); }
100% { opacity: 0; transform: translate(-50%, -145%) scale(0.9); }
}
.floater-damage { background: rgba(220, 38, 38, 0.95); color: #fff; border: 1.5px solid #f87171; }
.floater-retreat { background: rgba(217, 119, 6, 0.95); color: #fff; border: 1.5px solid #fbbf24; }
.floater-disrupt { background: rgba(147, 51, 234, 0.95); color: #fff; border: 1.5px solid #c084fc; }
.floater-success { background: rgba(22, 163, 74, 0.95); color: #fff; border: 1.5px solid #4ade80; }
.floater-interdict { background: rgba(2, 132, 199, 0.95); color: #fff; border: 1.5px solid #38bdf8; }
/* Counter Step-Loss Pip Overlays */
.counter-step-pips {
position: absolute;
top: 2px;
right: 2px;
display: flex;
gap: 2px;
z-index: 4;
pointer-events: none;
}
.step-pip-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 3px #000;
}
.step-pip-lost {
background: #475569;
border: 1px solid #1e293b;
}
/* ============================================================
MOBILE & FOLDABLE DEVICE RESPONSIVE SYSTEM (Pixel Fold / Phone)
============================================================ */
#mobile-view-bar {
display: none;
}
#mobile-map-quickswitch {
display: none;
}
@media (max-width: 900px) {
html, body {
padding: 0 !important;
margin: 0 !important;
height: 100vh !important;
height: 100dvh !important;
width: 100vw !important;
overflow: hidden !important;
}
#game-container {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
/* Dedicated Mobile Navigation Header */
#mobile-view-bar {
display: flex !important;
align-items: center;
justify-content: space-between;
background: #0b1120;
border-bottom: 2px solid #0284c7;
padding: 5px 8px;
gap: 6px;
z-index: 1000;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
height: 42px;
}
.mobile-nav-tabs {
display: flex;
gap: 5px;
align-items: center;
}
.mobile-tab-btn {
background: #1e293b;
border: 1px solid #475569;
color: #94a3b8;
font-size: 11px;
font-weight: 800;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.15s ease;
}
.mobile-tab-btn.active {
background: #0284c7;
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.mobile-advance-btn {
background: linear-gradient(135deg, #16a34a, #15803d);
border: 1px solid #4ade80;
color: #ffffff;
font-size: 10.5px;
font-weight: 900;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
/* When in MAP VIEW (default on mobile) */
body:not(.mobile-show-console) #sidebar {
display: none !important;
}
body:not(.mobile-show-console) #board-container {
display: flex !important;
width: 100vw !important;
min-width: 0 !important;
max-width: 100vw !important;
height: calc(100vh - 42px) !important;
height: calc(100dvh - 42px) !important;
flex: 1 !important;
border-radius: 0 !important;
border: none !important;
padding: 2px !important;
box-sizing: border-box !important;
}
/* When in CONSOLE VIEW */
body.mobile-show-console #board-container {
display: none !important;
}
body.mobile-show-console #sidebar {
display: block !important;
width: 100vw !important;
min-width: 0 !important;
max-width: 100vw !important;
height: calc(100vh - 42px) !important;
height: calc(100dvh - 42px) !important;
flex: 1 !important;
border-radius: 0 !important;
border: none !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Floating Quick Switch Button on Map */
body:not(.mobile-show-console) #mobile-map-quickswitch {
display: flex !important;
position: absolute;
bottom: 12px;
right: 12px;
z-index: 100;
background: rgba(15, 23, 42, 0.94);
backdrop-filter: blur(10px);
border: 1.5px solid #38bdf8;
border-radius: 24px;
padding: 7px 14px;
font-size: 11px;
font-weight: 800;
color: #f8fafc;
box-shadow: 0 4px 20px rgba(0,0,0,0.7);
align-items: center;
gap: 6px;
cursor: pointer;
}
/* Radar Minimap scaling on compact screens */
#radar-minimap-container {
width: 110px !important;
height: 80px !important;
bottom: 8px !important;
left: 8px !important;
}
/* Compact command ribbon on mobile */
.command-ribbon {
padding: 3px 6px !important;
gap: 4px !important;
}
.timeline-action-btn {
padding: 2px 6px !important;
font-size: 9px !important;
}
.timeline-title {
display: none !important;
}
#map-controls-hud {
top: 6px !important;
right: 6px !important;
gap: 3px !important;
}
.map-ctrl-btn {
padding: 3px 6px !important;
font-size: 9px !important;
}
}
/* =========================================================================
Batch Combat Offensive Declarations & Plan Execution (Phase 3)
========================================================================= */
/* Combat Mode Switcher Pill in Top Banner / Map HUD */
.combat-mode-pill {
display: inline-flex;
align-items: center;
background: rgba(15, 23, 42, 0.9);
border: 1px solid #334155;
border-radius: 20px;
padding: 2px;
gap: 2px;
}
.combat-mode-btn {
padding: 3px 9px;
font-size: 10px;
font-weight: 800;
border-radius: 16px;
border: none;
cursor: pointer;
background: transparent;
color: #94a3b8;
transition: all 0.15s ease;
}
.combat-mode-btn.active {
background: linear-gradient(135deg, #b91c1c, #dc2626);
color: #ffffff;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.combat-mode-btn.active-direct {
background: linear-gradient(135deg, #0369a1, #0284c7);
color: #ffffff;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
/* SVG Assault Vectors & Support Lines */
@keyframes assaultDash {
to {
stroke-dashoffset: -20;
}
}
.assault-vector-line {
stroke: #ef4444;
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 6 4;
animation: assaultDash 0.8s linear infinite;
filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.8));
}
.support-vector-line {
stroke: #fbbf24;
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 4 3;
animation: assaultDash 1.2s linear infinite;
filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.8));
}
.cas-vector-line {
stroke: #38bdf8;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 5 4;
animation: assaultDash 0.9s linear infinite;
filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.8));
}
/* SVG Map Battle Odds Preview Badge */
.odds-badge-bg {
fill: rgba(15, 23, 42, 0.95);
stroke: #ef4444;
stroke-width: 1.5;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.85));
}
.odds-badge-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 10px;
font-weight: 900;
fill: #fde047;
letter-spacing: 0.5px;
}
/* Frontline Offensive Plan Review Drawer / Ribbon */
#combat-plan-drawer {
display: none;
position: absolute;
bottom: 48px;
left: 10px;
right: 10px;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(14px);
border: 1.5px solid #ef4444;
border-radius: 8px;
padding: 8px 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.25);
z-index: 55;
flex-direction: column;
gap: 8px;
animation: slideUpFade 0.2s ease-out;
}
@keyframes slideUpFade {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.plan-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 5px;
}
.plan-drawer-title {
font-size: 12px;
font-weight: 900;
color: #f87171;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 6px;
}
.plan-engagements-list {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.plan-engagements-list::-webkit-scrollbar { height: 4px; }
.plan-engagements-list::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }
.plan-engagement-card {
background: rgba(30, 41, 59, 0.85);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 6px;
padding: 6px 9px;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 220px;
flex-shrink: 0;
position: relative;
}
.plan-engagement-card:hover {
border-color: #ef4444;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}
.plan-card-top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 800;
}
.plan-card-body {
font-size: 10px;
color: #cbd5e1;
line-height: 1.3;
}
.plan-card-odds {
display: flex;
justify-content: space-between;
font-size: 10px;
margin-top: 2px;
padding-top: 2px;
border-top: 1px dashed rgba(255,255,255,0.1);
}
.btn-execute-plan {
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ea580c 100%);
border: 1px solid #f87171;
color: #ffffff;
font-weight: 900;
font-size: 12px;
letter-spacing: 0.5px;
padding: 6px 16px;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-execute-plan:hover {
box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
transform: translateY(-1px);
}