/* ══════════════════════════════════════════════════════════
GALAXIE — STARGATE COMMAND GALAXY INTERFACE
Refonte 28/04 : Command bar sticky + Sector Intel left + cards rows
══════════════════════════════════════════════════════════ */
.gal-layout {
display:grid; grid-template-rows:auto auto auto 1fr;
grid-template-columns:minmax(0, 1fr);
height:100%;
position:relative; overflow:visible; z-index:1;
}
/* ── Command Bar V1 ─────────────────────────────────────── */
.gal-cmdbar {
display:flex; align-items:center; gap:14px;
padding:6px 18px; min-height:48px;
position:sticky; top:0; z-index:50;
background:linear-gradient(180deg, rgba(8,14,28,0.96), rgba(4,8,18,0.92));
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(var(--accent-rgb),0.30);
box-shadow:0 2px 14px rgba(0,0,0,0.45);
}
.galcb-coords { display:flex; align-items:center; gap:6px; }
.galcb-arrow {
width:34px; height:34px; border-radius:6px;
background:rgba(var(--accent-rgb),0.10);
border:1px solid rgba(var(--accent-rgb),0.35);
color:var(--accent2); font-family:var(--font-display); font-size:var(--fs-md);
cursor:pointer; transition:all 0.18s;
}
.galcb-arrow:hover { background:rgba(var(--accent-rgb),0.22); border-color:rgba(var(--accent-rgb),0.6); color:var(--textbright); }
.galcb-coord-box {
display:flex; align-items:center; gap:4px;
padding:4px 10px;
background:rgba(var(--accent-rgb),0.06);
border:1px solid rgba(var(--accent-rgb),0.30);
border-radius:7px;
font-family:var(--font-display);
}
.galcb-coord-box .galcb-lbl {
font-size:var(--fs-xs); color:var(--accent2); letter-spacing:1.5px; font-weight:700;
}
.galcb-coord-box input {
width:42px; padding:4px 6px;
background:transparent; border:none; outline:none;
color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700;
text-align:center;
}
.galcb-coord-box input::-webkit-outer-spin-button,
.galcb-coord-box input::-webkit-inner-spin-button { -webkit-appearance:none; }
.galcb-coord-box .galcb-sep { color:var(--accent); font-size:var(--fs-md); font-weight:700; }
.galcb-planet-select {
height:32px; padding:0 10px;
background:rgba(var(--accent-rgb),0.06);
border:1px solid rgba(var(--accent-rgb),0.30);
border-radius:6px;
color:var(--textbright); font-family:var(--font-display); font-size:var(--fs-xs);
cursor:pointer;
}
.galcb-galaxy-switch {
display:flex; gap:2px;
background:rgba(var(--accent-rgb),0.05);
border:1px solid rgba(var(--accent-rgb),0.20);
border-radius:var(--radius); padding:3px;
}
.galcb-galswitch {
font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px;
padding:6px 14px; border-radius:5px; cursor:pointer;
background:transparent; border:none; color:var(--textsoft);
transition:all 0.18s;
}
.galcb-galswitch:hover { color:var(--textbright); background:rgba(var(--accent-rgb),0.08); }
.galcb-galswitch.active {
background:linear-gradient(180deg,rgba(var(--accent-rgb),0.30),rgba(var(--accent-rgb),0.12));
color:var(--textbright);
box-shadow:0 0 12px rgba(var(--accent-rgb),0.30) inset;
}
.galcb-galswitch.galcb-locked {
opacity:0.55; cursor:not-allowed; color:var(--textsoft);
position:relative;
}
.galcb-galswitch.galcb-locked::before {
content:"🔒"; margin-right:5px; font-size:10px;
}
.galcb-galswitch.galcb-locked:hover {
background:rgba(255,80,80,0.08); color:var(--textsoft);
}
.galcb-tools {
margin-left:auto; display:flex; align-items:center; gap:8px;
}
.galcb-search {
width:180px; height:34px; padding:0 12px;
background:rgba(var(--accent-rgb),0.06);
border:1px solid rgba(var(--accent-rgb),0.30);
border-radius:18px;
color:var(--textbright); font-family:var(--font-mono); font-size:var(--fs-base);
}
.galcb-search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),0.4); }
.galcb-fav-btn, .galcb-action {
width:34px; height:34px; border-radius:6px;
background:rgba(var(--accent-rgb),0.06);
border:1px solid rgba(var(--accent-rgb),0.30);
color:#ffc266; font-size:16px; cursor:pointer;
transition:all 0.18s;
}
.galcb-fav-btn:hover, .galcb-action:hover {
background:rgba(var(--gold-rgb,212,146,10),0.15);
border-color:rgba(255,200,80,0.55);
transform:scale(1.05);
}
.galcb-view-toggle {
display:flex; gap:2px;
background:rgba(var(--accent-rgb),0.05);
border:1px solid rgba(var(--accent-rgb),0.30);
border-radius:var(--radius); padding:3px;
}
.galcb-view {
font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:1.5px;
padding:6px 12px; border-radius:5px; cursor:pointer;
background:transparent; border:none; color:var(--textsoft);
transition:all 0.18s;
}
.galcb-view:hover { color:var(--textbright); }
.galcb-view.active {
background:linear-gradient(180deg,rgba(140,200,255,0.32),rgba(80,140,240,0.16));
color:var(--textbright);
box-shadow:0 0 10px rgba(140,200,255,0.35) inset;
}
@media (max-width:1024px) {
.gal-cmdbar { flex-wrap:wrap; gap:8px; padding:8px 10px; min-height:auto; }
.galcb-search { width:130px; }
.galcb-galswitch, .galcb-view { padding:5px 9px; font-size:10px; letter-spacing:1px; }
}
/* Sprint G7 (13/05/2026) — cmdbar compact ≤768px : single-row scrollable, ~52px haut
(vs 279px observé). Touch targets ≥44×44, search icon-only par défaut. */
@media (max-width:768px) {
.gal-cmdbar {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 8px;
gap: 8px;
min-height: 52px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
-webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
}
.gal-cmdbar > * { flex-shrink: 0; scroll-snap-align: start; }
.galcb-coords { gap: 4px; }
.galcb-coords .galcb-arrow { width: 44px; height: 44px; font-size: 16px; }
.galcb-coord-box { padding: 6px 10px; min-height: 44px; }
.galcb-coord-box input { width: 44px; font-size:var(--fs-lg); padding: 4px 0; min-height: 44px; }
.galcb-density { min-width: 44px; min-height: 44px; padding: 0 8px; }
.galcb-planet-select { display: none; }
.galcb-galswitch { padding: 8px 12px; min-height: 44px; font-size:var(--fs-xs); letter-spacing: 1px; }
/* Search devient icon-only par défaut, expand au focus */
.galcb-tools { margin-left: 0; gap: 6px; }
.galcb-search {
width: 44px; height: 44px;
padding: 0; text-indent: -9999px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 22px;
border-radius: 50%;
transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.galcb-search:focus,
.galcb-search:not(:placeholder-shown) {
width: 200px;
text-indent: 0;
background-image: none;
border-radius: 22px;
padding: 0 14px;
}
.galcb-fav-btn, .galcb-action {
width: 44px; height: 44px; border-radius: 50%;
font-size: 18px;
}
.galcb-view, .galcb-density {
padding: 8px 12px; min-height: 44px; font-size:var(--fs-xs);
}
/* Filter bar : scroll horizontal momentum + edges fade */
.gal-filter-bar {
flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 6px 12px;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent, black 14px, black calc(100% - 14px), transparent);
mask-image: linear-gradient(90deg, transparent, black 14px, black calc(100% - 14px), transparent);
}
.gal-chip { flex-shrink: 0; min-height: 36px; padding: 7px 14px; }
}
@media (max-width:480px) {
.gal-cmdbar { padding: 3px 6px; gap: 6px; }
.galcb-coords .galcb-arrow { width: 44px; height: 44px; }
.galcb-coord-box input { width: 38px; font-size:var(--fs-md); min-height: 44px; }
.galcb-galswitch { padding: 7px 9px; font-size: 10px; min-height: 44px; }
.galcb-search:focus,
.galcb-search:not(:placeholder-shown) { width: 160px; }
}
/* Sprint G7 fix — appareils tactiles non couverts par max-width:768 (iPad 1366 landscape).
Garantit touch targets ≥44×44 sur toute surface coarse. */
@media (pointer: coarse) {
.galcb-arrow, .galcb-action, .galcb-fav-btn { min-width: 44px; min-height: 44px; }
.galcb-galswitch, .galcb-view, .galcb-density { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.galcb-coord-box { min-height: 44px; padding: 6px 10px; }
.galcb-coord-box input { min-width: 44px; min-height: 36px; }
}
/* Sprint 8 — badge cooldown NPC (visible dans la row) */
.gal-cd-badge {
display:inline-block; margin-left:4px; padding:1px 7px;
font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:700;
border:1px solid rgba(255,180,40,0.5); border-radius:var(--radius-md);
background:rgba(255,180,40,0.12); color:#ffc266;
letter-spacing:0.3px; white-space:nowrap;
}
/* Sprint 8 T10 — Filter chips bar (refonte contraste 28/04) */
.gal-filter-bar {
display:flex; gap:8px; padding:6px 18px; min-height:40px;
background:linear-gradient(180deg, rgba(8,14,26,0.92), rgba(4,8,18,0.92));
backdrop-filter:blur(8px);
border-bottom:1px solid rgba(var(--accent-rgb),0.30);
border-top:1px solid var(--tint-2);
overflow-x:auto; scrollbar-width:thin;
align-items:center; flex-wrap:wrap;
}
.gal-chip {
display:inline-flex; align-items:center; gap:6px;
padding:6px 13px; font-family:var(--font-display); font-size:var(--fs-sm);
font-weight:700; letter-spacing:0.6px;
border:1px solid rgba(120,180,255,0.45); border-radius:14px;
background:rgba(120,180,255,0.10); color:#cfe0ff; cursor:pointer;
white-space:nowrap;
/* Sprint G6 — spring transitions + ripple position */
transition: background 0.18s cubic-bezier(0.4,0,0.2,1),
border-color 0.18s, color 0.18s,
transform 0.16s cubic-bezier(0.32, 0.72, 0, 1),
box-shadow 0.22s cubic-bezier(0.4,0,0.2,1);
box-shadow:0 1px 4px rgba(0,0,0,0.25);
position: relative; overflow: hidden;
min-height: 36px;
}
.gal-chip:active {
transform: scale(0.94);
}
.gal-chip::after {
content:''; position:absolute; inset:0;
pointer-events:none;
background: radial-gradient(circle at center, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%);
opacity: 0;
transform: scale(0);
transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.gal-chip:active::after {
opacity: 1; transform: scale(1.6);
transition: opacity 0.05s, transform 0.05s;
}
/* Sprint G6 — Flash hyperspace au switch galaxie */
.gal-hyper-flash {
position: fixed; inset: 0; z-index: 9999;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95), rgba(140,200,255,0.55) 40%, rgba(20,40,80,0) 75%);
opacity: 0;
transition: opacity 0.08s cubic-bezier(0.4, 0, 0.2, 1);
mix-blend-mode: screen;
}
.gal-hyper-flash.on { opacity: 0.85; }
.gal-chip:hover {
background:rgba(120,180,255,0.22); border-color:rgba(140,200,255,0.7);
color:var(--textbright); transform:translateY(-1px);
box-shadow:0 2px 10px rgba(120,180,255,0.30);
}
.gal-chip.active {
background:linear-gradient(180deg,rgba(120,180,255,0.40),rgba(80,140,240,0.20));
border-color:rgba(160,210,255,0.85);
color:var(--textbright);
box-shadow:0 0 14px rgba(120,180,255,0.50), inset 0 0 8px rgba(180,220,255,0.20);
text-shadow:0 0 6px rgba(180,220,255,0.50);
}
.gal-chip .chip-n {
display:inline-block; min-width:20px; padding:2px 6px;
font-size:var(--fs-xs); font-weight:800;
background:rgba(120,180,255,0.30); border-radius:9px;
color:var(--textbright);
}
.gal-chip.active .chip-n { background:rgba(255,255,255,0.30); color:var(--textbright); }
.gal-chip.empty { opacity:0.4; }
.gal-chip-tier.t4 { border-color:#a855f7; color:#a855f7; }
.gal-chip-tier.t4.active { background:rgba(168,85,247,0.25); border-color:#a855f7; color:var(--textbright); }
.gal-chip-tier.t5 { border-color:#5efff2; color:#5efff2; }
.gal-chip-tier.t5.active { background:rgba(94,255,242,0.22); border-color:#5efff2; color:var(--textbright); }
.gal-chip-tier.t6 { border-color:#ffd700; color:#ffd700; }
.gal-chip-tier.t6.active { background:rgba(255,215,0,0.22); border-color:#ffd700; color:var(--textbright); }
.gal-chip-tier.t7 { border-color:#e8d4ff; color:#fff8dc; }
.gal-chip-tier.t7.active { background:linear-gradient(135deg,rgba(232,212,255,0.28),rgba(255,248,220,0.22)); border-color:#e8d4ff; color:var(--textbright); }
@media (max-width:768px) {
.gal-filter-bar { padding:6px 10px; gap:6px; }
.gal-chip { font-size:10px; padding:4px 9px; }
}
/* ── Topbar ── */
.gal-topbar {
display:flex; align-items:center; gap:10px; padding:10px 18px;
background:linear-gradient(180deg, rgba(6,12,28,0.95), rgba(4,8,18,0.98));
border-bottom:2px solid rgba(var(--accent-rgb),0.20);
backdrop-filter:blur(10px); z-index:2; position:relative;
min-width:0;
box-shadow:0 4px 20px var(--shade-3);
}
/* ── Topbar HUD grid lines ── */
.gal-topbar::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(90deg,
transparent, transparent 120px,
rgba(var(--accent-rgb),0.04) 120px, rgba(var(--accent-rgb),0.04) 121px);
}
.gal-topbar::after {
content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.3), transparent);
}
.gal-coord-label {
font-family:var(--font-display); font-size:var(--fs-md); letter-spacing:2px;
color:var(--accent); text-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
font-weight:700;
}
.gal-coord-sep { color:var(--textsoft); font-size:var(--fs-md); }
.gal-coord-input {
background:rgba(4,8,20,0.8); border:1px solid rgba(var(--accent-rgb),0.25);
border-radius:6px; color:var(--textbright);
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
padding:6px 10px; text-align:center; width:60px;
transition:all 0.2s; outline:none;
}
.gal-coord-input:focus {
border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.3);
}
.gal-nav-btn {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:1.5px;
padding:8px 16px; border:1px solid rgba(var(--accent-rgb),0.35);
border-radius:6px; background:linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04));
color:var(--accent); cursor:pointer; transition:all 0.25s;
text-shadow:0 0 8px rgba(var(--accent-rgb),0.2);
position:relative; overflow:hidden;
}
.gal-nav-btn::after {
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg, transparent, var(--tint-3), transparent);
transition:left 0.5s;
}
.gal-nav-btn:hover::after { left:100%; }
.gal-nav-btn:hover {
background:linear-gradient(135deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.08));
box-shadow:0 0 14px rgba(var(--accent-rgb),0.2); border-color:rgba(var(--accent-rgb),0.5);
transform:translateY(-1px);
}
/* ── Planet/colony select dropdown ── */
.gal-planet-select {
appearance:none; -webkit-appearance:none;
background:rgba(4,8,20,0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(100,200,255,0.6)'/%3E%3C/svg%3E") no-repeat right 10px center;
border:1px solid rgba(var(--accent-rgb),0.35); border-radius:6px;
color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-md);
font-weight:700; padding:8px 28px 8px 12px; cursor:pointer;
min-width:180px; max-width:260px;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
transition:all 0.25s; outline:none;
}
.gal-planet-select:focus,
.gal-planet-select:hover {
border-color:rgba(var(--accent-rgb),0.6);
box-shadow:0 0 12px rgba(var(--accent-rgb),0.2);
}
.gal-planet-select option {
background:#0a1428; color:var(--textbright);
font-family:var(--font-mono); font-size:var(--fs-md);
padding:6px 10px;
}
.gal-coord-display {
font-family:var(--font-mono); font-size:var(--fs-md);
color:var(--textmid); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; min-width:0;
letter-spacing:0.5px; flex:1; text-align:center;
}
/* Sprint 8 T3 — groupes topbar : nav à gauche, actions à droite */
.gal-nav-group { display:flex; align-items:center; gap:8px; flex-shrink:0; min-width:0; flex-wrap:wrap; }
.gal-action-group { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
/* Sprint 8 T4 — search joueur global avec dropdown résultats */
.gal-search-wrap { position:relative; }
.gal-search-input {
background:rgba(4,8,20,0.85); border:1px solid rgba(var(--accent-rgb),0.25);
border-radius:6px; color:var(--textbright);
font-family:var(--font-mono); font-size:var(--fs-base);
padding:7px 12px; width:150px; outline:none; transition:all 0.2s;
}
.gal-search-input:focus { border-color:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),0.25); width:200px; }
.gal-search-results {
position:absolute; top:calc(100% + 4px); left:0; min-width:240px; z-index:20;
background:rgba(6,12,28,0.98); border:1px solid rgba(var(--accent-rgb),0.4);
border-radius:var(--radius); box-shadow:0 8px 24px var(--shade-5);
backdrop-filter:blur(10px); max-height:280px; overflow-y:auto;
padding:4px;
}
.gsr-row {
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:7px 10px; border-radius:6px; cursor:pointer;
font-family:var(--font-mono); font-size:var(--fs-base); color:var(--textbright);
transition:background 0.15s;
}
.gsr-row:hover { background:rgba(var(--accent-rgb),0.12); color:var(--accent); }
.gsr-name { font-weight:700; letter-spacing:0.3px; }
.gsr-coord { color:var(--textsoft); font-size:var(--fs-xs); }
.gsr-empty { padding:10px; color:var(--textsoft); font-size:var(--fs-base); text-align:center; font-style:italic; }
/* ★ Favoris galaxie */
.gal-fav-btn {
background:rgba(4,8,20,0.85); border:1px solid rgba(224,192,64,0.35);
border-radius:6px; color:#e0c040; font-size:var(--fs-md);
padding:6px 10px; cursor:pointer; transition:all 0.2s; line-height:1;
}
.gal-fav-btn:hover { background:rgba(224,192,64,0.12); border-color:#e0c040; box-shadow:0 0 10px rgba(224,192,64,0.25); transform:scale(1.05); }
.gal-fav-results { right:0; left:auto; min-width:280px; }
.gfav-row { padding:6px 8px; gap:6px; }
.gfav-main { display:flex; gap:8px; align-items:center; flex:1; min-width:0; cursor:pointer; }
.gfav-icon { font-size:var(--fs-md); flex-shrink:0; }
.gfav-row .gsr-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gfav-del {
background:transparent; border:1px solid rgba(224,80,80,0.3); color:#e05858;
border-radius:var(--radius-sm); font-size:var(--fs-xs); padding:2px 6px; cursor:pointer; transition:all 0.15s; flex-shrink:0;
}
.gfav-del:hover { background:rgba(224,80,80,0.15); color:#ff8080; border-color:#e05858; }
/* Onglet ★ dans le drawer */
.gal-drawer-tab.fav { border-color:rgba(224,192,64,0.3); color:#c8a830; }
.gal-drawer-tab.fav:hover { border-color:#e0c040; color:#e0c040; }
.gal-drawer-tab.fav-active { border-color:#e0c040; color:#e0c040; background:rgba(224,192,64,0.14); box-shadow:0 0 10px rgba(224,192,64,0.28); }
/* Sprint 8 T5 — badge 🔥 sur ennemi qui m'a attaqué récemment */
.gal-hostile-badge {
display:inline-block; margin-left:4px; font-size:var(--fs-base);
filter:drop-shadow(0 0 4px rgba(255,100,40,0.7));
animation: galHostilePulse 2.2s ease-in-out infinite;
}
@keyframes galHostilePulse {
0%, 100% { transform:scale(1); opacity:0.9; }
50% { transform:scale(1.18); opacity:1; }
}
.gal-arrow-btn {
width:34px; height:34px; font-size:var(--fs-md);
border:1px solid rgba(var(--accent-rgb),0.25); border-radius:6px;
background:linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.03));
color:var(--accent); cursor:pointer; transition:all 0.25s;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gal-arrow-btn:hover {
background:linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.08));
border-color:rgba(var(--accent-rgb),0.5); box-shadow:0 0 10px rgba(var(--accent-rgb),0.15);
}
/* ── Body layout V2 : 3-col grid (Intel | Table | Drawer) ── */
.gal-body { display:grid; grid-template-columns:1fr 380px; overflow:hidden; min-height:0; gap:12px; padding:12px 14px 14px; }
.gal-map-panel { overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; min-width:0; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),0.4) transparent; contain:layout style; }
.gal-map-panel::-webkit-scrollbar { width:8px; }
.gal-map-panel::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),0.35); border-radius:var(--radius-sm); }
.gal-map-panel::-webkit-scrollbar-thumb:hover { background:rgba(var(--accent-rgb),0.6); }
@media (max-width:1280px) {
.gal-body { grid-template-columns:1fr 320px; }
}
@media (max-width:1100px) {
.gal-body { grid-template-columns:1fr 320px; padding:10px; }
}
@media (max-width:768px) {
.gal-body { grid-template-columns:1fr; gap:8px; padding:8px; }
/* Sprint G2 fix : on garde le wrap dans le layout en `display:contents` pour que
le sheet (#galDetail position:fixed) soit positionné par rapport au viewport,
mais sans réserver d'espace dans le grid mobile. L'ancien `display:none` cachait
aussi le sheet enfant — bug constaté 13/05/2026. */
.gal-drawer-wrap { display:contents; }
}
/* ── Scanline radar — static top accent line (no movement = no layout shift) ── */
.gal-map-panel::before {
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent 10%, rgba(var(--accent-rgb),0.4), transparent 90%);
z-index:10; pointer-events:none;
box-shadow:0 0 15px 3px rgba(var(--accent-rgb),0.15);
}
/* ── Detail panel (right) ── */
.gal-detail-panel {
background:linear-gradient(180deg, rgba(4,8,18,0.96), rgba(6,12,28,0.98));
padding:18px;
overflow-y:auto; overflow-x:hidden; z-index:1;
backdrop-filter:blur(10px); min-width:0; position:relative;
box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.20); }
.gal-detail-panel::before {
content:''; position:absolute; top:0; left:0; right:0; bottom:0;
background:repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(var(--accent-rgb),0.012) 3px, rgba(var(--accent-rgb),0.012) 4px);
pointer-events:none; z-index:0;
}
.gal-detail-panel > * { position:relative; z-index:1; }
.gal-detail-panel * { word-break:break-word; overflow-wrap:break-word; }
.gal-det-name {
font-family:var(--font-display); font-size:19px; font-weight:700;
color:var(--textbright); letter-spacing:1px;
text-shadow:0 0 12px rgba(var(--accent-rgb),0.3);
}
.gal-det-type {
font-family:var(--font-mono); font-size:var(--fs-lg);
letter-spacing:2.5px; color:var(--textmid); margin-top:5px;
text-transform:uppercase;
}
.gal-det-desc { font-size:var(--fs-lg); color:var(--textmid); line-height:1.7; }
/* ── Table ── */
.gal-table {
width:100%; border-collapse:separate; border-spacing:0 2px;
table-layout:fixed; /* lock column widths — prevents reflow on row content changes */
}
/* Column width allocation : pos / icon / name / player / distance / threat / actions
Affiné 30/04 : on rogne sur les 3 fixes droite (texte court) pour donner +100px
aux colonnes Nom/Joueur, qui se faisaient tronquer en "NO_" / "JO_". */
.gal-table colgroup col,
.gal-table th:nth-child(1) { width:100px; } /* # coords */
.gal-table th:nth-child(2) { width:48px; } /* icon */
.gal-table th:nth-child(3) { width:auto; } /* nom */
.gal-table th:nth-child(4) { width:auto; } /* joueur */
.gal-table th:nth-child(5) { width:100px; } /* distance */
.gal-table th:nth-child(6) { width:95px; } /* menace */
.gal-table th:nth-child(7) { width:130px; } /* actions */
/* Padding header réduit pour laisser le texte respirer */
.gal-table th.gal-th { padding:8px 6px; }
.gal-table th:nth-child(3),
.gal-table th:nth-child(4) { letter-spacing:0.5px; padding:8px 4px; }
.gal-table th:nth-child(5),
.gal-table th:nth-child(6) { letter-spacing:1px; }
.gal-th {
padding:8px 10px; font-family:var(--font-display); font-size:var(--fs-sm);
letter-spacing:1.5px; color:rgba(var(--accent-rgb),0.7);
border-bottom:1px solid rgba(var(--accent-rgb),0.15);
text-transform:uppercase; position:sticky; top:0; z-index:1;
background:rgba(6,12,28,0.98); backdrop-filter:blur(8px);
text-align:left;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ── Row stagger animation ── */
/* Fix 27/05 (GAL1 audit) : on N'ANIME PLUS opacity du tout — animation paused
frame 0 (DevTools "Force reduced motion") rendait opacity=from=0 →
rangées invisibles malgré .gal-visible{opacity:1}. Cf. lesson
lesson_css_animation_fill_mode_both_opacity_0.md. */
@keyframes galRowEnter {
from { transform:translateX(-12px); }
to { transform:translateX(0); }
}
.gal-tr {
/* Sprint G6 — feel sci-fi : spring iOS-like sur tap, glow tier reactif */
transition: background 0.18s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
outline 0.18s cubic-bezier(0.4,0,0.2,1),
transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
cursor:pointer;
background:rgba(255,255,255,0.015);
opacity:1; position:relative; overflow:hidden;
will-change: transform, box-shadow;
}
.gal-tr:active:not(.empty) {
transform: scale(0.985);
}
.gal-tr.gal-visible { animation:galRowEnter 0.3s ease-out; }
.gal-tr:nth-child(odd) { background:rgba(255,255,255,0.025); }
/* ── Row hover glow + shine sweep ── */
.gal-tr::after {
content:''; position:absolute; top:0; left:-100%; width:60%;
height:100%; pointer-events:none; z-index:1;
background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.07), transparent);
transition:left 0.6s ease;
}
.gal-tr:hover::after { left:120%; }
.gal-tr:hover {
background:rgba(var(--accent-rgb),0.08) !important;
box-shadow:inset 3px 0 12px rgba(var(--accent-rgb),0.15),
0 0 20px rgba(var(--accent-rgb),0.05);
}
.gal-tr.mine { background:rgba(var(--accent-rgb),0.10) !important; }
.gal-tr.mine .gal-pos { box-shadow:inset 3px 0 0 0 var(--accent); }
.gal-tr.mine:hover { background:rgba(var(--accent-rgb),0.15) !important; }
.gal-tr.enemy { background:rgba(224,80,80,0.06) !important; }
.gal-tr.enemy .gal-pos { box-shadow:inset 3px 0 0 0 rgba(224,80,80,0.5); }
.gal-tr.ally { background:rgba(46,204,136,0.06) !important; }
.gal-tr.ally .gal-pos { box-shadow:inset 3px 0 0 0 rgba(46,204,136,0.5); }
.gal-tr.npc { background:rgba(var(--accent-rgb),0.04) !important; }
.gal-tr.npc .gal-pos { box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.3); }
/* Audit Major 27/05 — beacon rows directes dans la table galaxy (vs barre séparée) */
.gal-tr.gal-beacon-row { background: linear-gradient(90deg, rgba(192,132,252,0.10), rgba(192,132,252,0.02)) !important; }
.gal-tr.gal-beacon-row .gal-pos { box-shadow:inset 3px 0 0 0 rgba(192,132,252,0.55); }
.gal-tr.gal-beacon-row.mine { background: linear-gradient(90deg, rgba(120,255,168,0.10), rgba(120,255,168,0.02)) !important; }
.gal-tr.gal-beacon-row.mine .gal-pos { border-left-color:rgba(120,255,168,0.55); }
.gal-tr.gal-beacon-row.enemy { background: linear-gradient(90deg, rgba(255,96,96,0.10), rgba(255,96,96,0.02)) !important; }
.gal-tr.gal-beacon-row.enemy .gal-pos { border-left-color:rgba(255,96,96,0.55); }
.gal-tr.gal-beacon-row .gal-tier-badge { background:rgba(192,132,252,0.18); color:rgba(192,132,252,0.95); padding:1px 8px; border-radius:var(--radius); font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:1px; }
.gal-tr.gal-beacon-row:hover { filter: brightness(1.1); }
/* Sprint G5 (13/05/2026) — tier/faction glow au tap/hover (signal value gaming) */
.gal-tr.mine:active, .gal-tr.mine.gmm-selected { box-shadow: inset 0 0 0 1px rgba(255,216,96,0.55), 0 0 14px rgba(255,216,96,0.28) !important; }
.gal-tr.ally:active, .gal-tr.ally.gmm-selected { box-shadow: inset 0 0 0 1px rgba(120,255,168,0.50), 0 0 14px rgba(120,255,168,0.25) !important; }
.gal-tr.enemy:active, .gal-tr.enemy.gmm-selected { box-shadow: inset 0 0 0 1px rgba(255,96,96,0.55), 0 0 14px rgba(255,96,96,0.30) !important; }
.gal-tr.npc-t1:active { box-shadow: inset 0 0 0 1px rgba(168,255,140,0.50), 0 0 12px rgba(168,255,140,0.24) !important; }
.gal-tr.npc-t2:active { box-shadow: inset 0 0 0 1px rgba(255,184,74,0.55), 0 0 12px rgba(255,184,74,0.28) !important; }
.gal-tr.npc-t3:active { box-shadow: inset 0 0 0 1px rgba(255,84,84,0.55), 0 0 14px rgba(255,84,84,0.32) !important; }
.gal-tr.npc-t4:active, .gal-tr.npc-t4.gmm-selected { box-shadow: inset 0 0 0 1px rgba(197,74,255,0.65), 0 0 18px rgba(197,74,255,0.42), inset 0 0 24px rgba(197,74,255,0.10) !important; }
.gal-tr.empty { opacity:0.35; cursor:default; }
.gal-tr.empty:hover { background:rgba(255,255,255,0.025) !important; opacity:0.5; }
/* ── Selected row — feedback statique (animation pulse retirée) ── */
.gal-tr.selected {
background:rgba(var(--accent-rgb),0.12) !important;
outline:1px solid rgba(var(--accent-rgb),0.5);
opacity:1 !important;
box-shadow:inset 3px 0 14px rgba(var(--accent-rgb),0.18), 0 0 12px rgba(var(--accent-rgb),0.08);
}
.gal-tr.selected .gal-pos { box-shadow:inset 3px 0 0 0 var(--accent); }
.gal-td {
padding:6px 14px; color:var(--text); vertical-align:middle;
font-family:var(--font-mono); font-size:var(--fs-md);
border-bottom:1px solid var(--tint-2);
}
/* ── Coordinates glow ── */
.gal-pos {
font-family:var(--font-mono); font-size:var(--fs-md); font-weight:400;
color:rgba(var(--accent-rgb),0.6); white-space:nowrap; padding-left:14px;
text-shadow:0 0 8px rgba(var(--accent-rgb),0.25);
transition:color 0.2s, text-shadow 0.2s;
}
.gal-tr:hover .gal-pos {
color:var(--accent);
text-shadow:0 0 12px rgba(var(--accent-rgb),0.5);
}
/* ── Planet hover animation ── */
.gal-planet-ico { filter:drop-shadow(0 2px 4px var(--shade-3)); line-height:1; }
.gal-planet-ico svg { transition:transform 0.3s ease, filter 0.3s ease; }
.gal-tr:hover .gal-planet-ico svg {
transform:scale(1.25);
filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),0.5)) brightness(1.15);
}
.gal-orbit-ring { animation:orbitSpin 8s linear infinite; transform-origin:16px 16px; }
.gal-planet-name {
font-family:var(--font-body); font-size:var(--fs-lg); font-weight:700;
color:var(--textbright); letter-spacing:0.3px;
}
.gal-player { font-size:var(--fs-md); }
.gal-player.mine { color:var(--accent); font-weight:700; }
.gal-player.enemy { color:var(--danger); font-weight:600; }
.gal-player.ally { color:var(--success); font-weight:600; }
.gal-player.empty { color:var(--textsoft); font-style:italic; font-size:var(--fs-md); }
.gal-alliance { font-family:var(--font-display); font-size:var(--fs-md); color:var(--textmid); letter-spacing:1px; }
.gal-alliance-tag {
display:inline-block; margin-left:4px; padding:1px 5px;
font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.5px;
color:var(--textmid); background:var(--tint-3);
border:1px solid var(--tint-5); border-radius:3px;
vertical-align:1px; white-space:nowrap;
}
.gal-tr.ally .gal-alliance-tag { color:#5ad88f; border-color:rgba(46,204,113,0.30); background:rgba(46,204,113,0.08); }
.gal-tr.enemy .gal-alliance-tag { color:#ff8080; border-color:rgba(255,80,80,0.30); background:rgba(255,80,80,0.08); }
/* ── Action buttons (table) — neon glow ── */
.gal-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.gal-act-btn {
padding:5px 10px; font-family:var(--font-mono); font-size:var(--fs-md); font-weight:700;
border:1px solid; border-radius:var(--radius-sm); cursor:pointer;
background:transparent; transition:all 0.2s;
white-space:nowrap; letter-spacing:0.5px;
position:relative; overflow:hidden;
text-shadow:0 0 6px currentColor;
}
.gal-act-btn::after {
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg, transparent, var(--tint-5), transparent);
transition:left 0.4s; pointer-events:none;
}
.gal-act-btn:hover::after { left:100%; }
.gal-act-btn:hover { transform:translateY(-1px); filter:brightness(1.2); }
.gal-act-btn.spy {
border-color:rgba(155,89,182,0.4); color:#b39ddb;
background:rgba(155,89,182,0.06);
}
.gal-act-btn.spy:hover { background:rgba(155,89,182,0.15); box-shadow:0 0 8px rgba(155,89,182,0.2); }
.gal-act-btn.attack {
border-color:rgba(224,80,80,0.4); color:#ef9a9a;
background:rgba(224,80,80,0.06);
}
.gal-act-btn.attack:hover { background:rgba(224,80,80,0.15); box-shadow:0 0 8px rgba(224,80,80,0.2); }
.gal-act-btn.colonize {
border-color:rgba(46,204,136,0.4); color:var(--success);
background:rgba(46,204,136,0.06);
}
.gal-act-btn.colonize:hover { background:rgba(46,204,136,0.15); box-shadow:0 0 8px rgba(46,204,136,0.2); }
.gal-act-btn.reinforce {
border-color:rgba(46,204,136,0.4); color:var(--success);
background:rgba(46,204,136,0.06);
}
.gal-act-btn.reinforce:hover { background:rgba(46,204,136,0.15); box-shadow:0 0 8px rgba(46,204,136,0.2); }
/* Sprint 8 T6 — Menu ACTIONS ▾ unifié */
.gal-act-menu-btn {
padding:5px 12px; font-family:var(--font-display); font-size:var(--fs-sm); font-weight:700;
border:1px solid rgba(120,180,255,0.45); border-radius:var(--radius-sm); cursor:pointer;
background:rgba(80,120,200,0.08); color:#9ec5ff; letter-spacing:0.5px;
white-space:nowrap; transition:all 0.2s;
text-shadow:0 0 6px rgba(120,180,255,0.5);
}
.gal-act-menu-btn:hover {
background:rgba(120,180,255,0.18); border-color:rgba(120,180,255,0.8);
box-shadow:0 0 10px rgba(120,180,255,0.35); transform:translateY(-1px);
}
.gal-actions-menu {
position:fixed; z-index:2000; min-width:200px;
background:rgba(8,14,26,0.96); backdrop-filter:blur(10px);
border:1px solid rgba(120,180,255,0.35); border-radius:6px;
box-shadow:0 8px 24px var(--shade-5), 0 0 0 1px rgba(120,180,255,0.1);
padding:4px; display:flex; flex-direction:column; gap:2px;
animation: galMenuIn 0.12s ease-out;
}
@keyframes galMenuIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.gal-menu-item {
display:flex; align-items:center; gap:10px; padding:8px 12px;
font-family:var(--font-mono); font-size:var(--fs-base); font-weight:600;
border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer;
background:transparent; color:var(--text); text-align:left;
transition:all 0.15s; white-space:nowrap;
}
.gal-menu-item:hover:not(:disabled) { background:rgba(120,180,255,0.1); border-color:rgba(120,180,255,0.25); }
.gal-menu-item .gmi-icon { font-size:var(--fs-lg); width:18px; text-align:center; }
.gal-menu-item.spy { color:#b39ddb; }
.gal-menu-item.spy:hover { background:rgba(155,89,182,0.12); border-color:rgba(155,89,182,0.35); }
.gal-menu-item.attack { color:#ef9a9a; }
.gal-menu-item.attack:hover { background:rgba(224,80,80,0.12); border-color:rgba(224,80,80,0.35); }
.gal-menu-item.gold { color:var(--gold); }
.gal-menu-item.gold:hover { background:rgba(255,191,0,0.1); border-color:rgba(255,191,0,0.35); }
.gal-menu-item.colonize, .gal-menu-item.success { color:var(--success); }
.gal-menu-item.colonize:hover, .gal-menu-item.success:hover { background:rgba(46,204,136,0.12); border-color:rgba(46,204,136,0.35); }
.gal-menu-item.disabled { opacity:0.45; cursor:default; font-style:italic; }
/* Sprint 8 T7 — Drawer tabs (barre persistante au-dessus de #galDetail) */
.gal-drawer-wrap {
display:flex; flex-direction:column; min-height:0;
overflow-y:auto; overflow-x:hidden;
box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.20); }
.gal-drawer-wrap > .gal-detail-panel { border-left:none; flex:0 0 auto; }
.gal-detail-tabs {
display:flex; gap:4px; padding:8px 10px 6px;
background:rgba(6,11,22,0.85); backdrop-filter:blur(6px);
border-bottom:1px solid rgba(120,180,255,0.18);
overflow-x:auto; scrollbar-width:thin;
flex-shrink:0;
}
.gal-drawer-tab {
display:flex; align-items:center; gap:6px; padding:8px 14px;
font-family:var(--font-display); font-size:var(--fs-base); font-weight:700; letter-spacing:0.6px;
border:1px solid rgba(120,180,255,0.25); border-radius:4px 4px 0 0;
background:rgba(120,180,255,0.04); color:var(--textmid); cursor:pointer;
white-space:nowrap; transition:all 0.18s;
}
.gal-drawer-tab:hover {
background:rgba(120,180,255,0.12); color:var(--textbright);
border-color:rgba(120,180,255,0.5); transform:translateY(-1px);
}
.gal-drawer-tab.active {
background:rgba(120,180,255,0.2); color:#9ec5ff;
border-color:rgba(120,180,255,0.7); box-shadow:0 0 8px rgba(120,180,255,0.25);
}
.gal-drawer-tab.spy { color:#b39ddb; border-color:rgba(155,89,182,0.25); }
.gal-drawer-tab.spy:hover, .gal-drawer-tab.spy.active { background:rgba(155,89,182,0.18); border-color:rgba(155,89,182,0.6); }
.gal-drawer-tab.gold { color:var(--gold); border-color:rgba(255,191,0,0.25); }
.gal-drawer-tab.gold:hover, .gal-drawer-tab.gold.active { background:rgba(255,191,0,0.15); border-color:rgba(255,191,0,0.55); }
.gal-drawer-tab.success { color:var(--success); border-color:rgba(46,204,136,0.25); }
.gal-drawer-tab.success:hover, .gal-drawer-tab.success.active { background:rgba(46,204,136,0.15); border-color:rgba(46,204,136,0.55); }
.gal-drawer-tab .gdt-icon { font-size:var(--fs-md); }
@media (max-width:768px) {
.gal-detail-tabs { padding:6px 8px 4px; }
.gal-drawer-tab { padding:6px 9px; font-size:10px; }
.gal-drawer-tab .gdt-label { display:none; }
.gal-drawer-tab .gdt-icon { font-size:var(--fs-lg); }
}
/* ── Action buttons (detail panel) ── */
.gal-action-btn {
width:100%; padding:15px; font-family:var(--font-display); font-size:var(--fs-lg);
font-weight:700; letter-spacing:2px; border:2px solid; border-radius:var(--radius);
cursor:pointer; text-transform:uppercase; transition:all 0.25s;
position:relative; overflow:hidden;
background:transparent;
}
.gal-action-btn::after {
content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg, transparent, var(--tint-3), transparent);
transition:left 0.5s;
}
.gal-action-btn:hover:not(:disabled)::after { left:100%; }
.gal-action-btn:hover:not(:disabled) { transform:translateY(-2px); }
.gal-action-btn:disabled { opacity:0.4; cursor:not-allowed; }
.gal-action-btn.colonize {
border-color:rgba(212,146,10,0.5); color:var(--gold);
background:linear-gradient(135deg, rgba(212,146,10,0.08), transparent);
text-shadow:0 0 10px rgba(212,146,10,0.3);
}
.gal-action-btn.colonize:hover:not(:disabled) { box-shadow:0 0 20px rgba(212,146,10,0.2); }
.gal-action-btn.attack {
border-color:rgba(224,80,80,0.5); color:var(--danger);
background:linear-gradient(135deg, rgba(224,80,80,0.08), transparent);
text-shadow:0 0 10px rgba(224,80,80,0.3);
}
.gal-action-btn.attack:hover:not(:disabled) { box-shadow:0 0 20px rgba(224,80,80,0.2); }
.gal-action-btn.reinforce {
border-color:rgba(46,204,136,0.5); color:var(--success);
background:linear-gradient(135deg, rgba(46,204,136,0.08), transparent);
text-shadow:0 0 10px rgba(46,204,136,0.3);
}
.gal-action-btn.reinforce:hover:not(:disabled) { box-shadow:0 0 20px rgba(46,204,136,0.2); }
.gal-action-btn.spy {
border-color:rgba(155,89,182,0.5); color:var(--purple);
background:linear-gradient(135deg, rgba(155,89,182,0.08), transparent);
text-shadow:0 0 10px rgba(155,89,182,0.3);
}
.gal-action-btn.spy:hover:not(:disabled) { box-shadow:0 0 20px rgba(155,89,182,0.2); }
/* ── Detail panel slide-up animation (mobile) ── */
@keyframes galDetailSlide {
from { transform:translateY(100%); opacity:0; }
to { transform:translateY(0); opacity:1; }
}
/* ── Close button (mobile detail overlay) ── */
.gal-detail-close {
display:none; width:100%; padding:12px; margin-bottom:12px;
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
letter-spacing:2px; text-transform:uppercase;
background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.3);
border-radius:var(--radius); color:var(--accent); cursor:pointer;
transition:background 0.2s;
}
.gal-detail-close:active { background:rgba(var(--accent-rgb),0.2); }
/* Prereq + unlock display */
.gs { position:absolute; border-radius:50%; background:white; }
#sf_galaxy { display:none; position:relative; overflow-y:auto; }
#sf_galaxy.active { display:block; }
#sf_galaxy .gal-layout { min-height:0; }
/* ══════════════════════════════════════════════════════════
SYSTEM OVERVIEW (right panel)
══════════════════════════════════════════════════════════ */
.gal-sys-overview {
padding:12px 14px; display:flex; flex-direction:column; gap:12px;
overflow-y:auto; max-height:100%;
}
.gal-sys-header {
font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700;
color:var(--textbright); letter-spacing:1.5px;
border-bottom:2px solid rgba(var(--accent-rgb),0.25); padding-bottom:10px;
text-shadow:0 0 12px rgba(var(--accent-rgb),0.25);
display:flex; align-items:center; gap:8px;
}
.gal-sys-header::before {
content:''; width:4px; height:16px; background:var(--accent);
border-radius:2px; box-shadow:0 0 10px rgba(var(--accent-rgb),0.5);
}
.gal-sys-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.gal-sys-slot {
height:34px; border-radius:5px; display:flex; align-items:center; justify-content:center;
font-size:var(--fs-md); cursor:default;
border:1px solid var(--tint-3); transition:all 0.2s;
}
.gal-sys-slot.clickable { cursor:pointer; }
.gal-sys-slot.clickable:hover { transform:scale(1.12); border-color:rgba(255,255,255,0.30); box-shadow:0 0 8px var(--tint-4); }
.gal-sys-slot.empty { background:var(--tint-2); }
.gal-sys-slot.mine { background:rgba(var(--accent-rgb),0.20); border-color:rgba(var(--accent-rgb),0.45); box-shadow:0 0 8px rgba(var(--accent-rgb),0.15); }
.gal-sys-slot.player { background:rgba(255,60,60,0.16); border-color:rgba(255,80,80,0.40); box-shadow:0 0 6px rgba(255,60,60,0.1); }
.gal-sys-slot.npc1 { background:rgba(46,204,136,0.14); border-color:rgba(46,204,136,0.35); box-shadow:0 0 6px rgba(46,204,136,0.1); }
.gal-sys-slot.npc2 { background:rgba(243,156,18,0.14); border-color:rgba(243,156,18,0.35); box-shadow:0 0 6px rgba(243,156,18,0.1); }
.gal-sys-slot.npc3 { background:rgba(255,60,60,0.20); border-color:rgba(255,80,80,0.45); box-shadow:0 0 8px rgba(255,60,60,0.12); }
.gal-sys-section {
font-family:var(--font-display); font-size:var(--fs-md); letter-spacing:2px;
color:var(--accent); margin-bottom:4px;
display:flex; align-items:center; gap:6px;
text-shadow:0 0 8px rgba(var(--accent-rgb),0.2);
}
.gal-sys-section::before {
content:''; width:3px; height:10px; background:rgba(var(--accent-rgb),0.4);
border-radius:2px;
}
.gal-sys-stats { display:flex; flex-direction:column; gap:3px; }
.gal-sys-stat {
display:flex; justify-content:space-between; align-items:center;
padding:6px 10px; border-radius:5px; transition:all 0.2s;
background:linear-gradient(90deg, var(--tint-2), rgba(255,255,255,0.01));
border-left:2px solid transparent;
}
.gal-sys-stat:hover { background:rgba(var(--accent-rgb),0.06); border-left-color:rgba(var(--accent-rgb),0.3); }
.gal-sys-stat-lbl { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); }
.gal-sys-stat-val { font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--textbright); }
.gal-sys-row {
display:flex; align-items:center; gap:8px;
padding:7px 10px; border-radius:6px; margin-bottom:3px;
background:linear-gradient(90deg, var(--tint-2), transparent);
border:1px solid var(--tint-2); cursor:pointer; transition:all 0.2s;
}
.gal-sys-row:hover {
background:linear-gradient(90deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
border-color:rgba(var(--accent-rgb),0.15); transform:translateX(3px);
}
.gal-sys-row-name { font-family:var(--font-mono); font-size:var(--fs-md); font-weight:600; flex:1; }
.gal-sys-row-action { font-size:var(--fs-md); opacity:0.7; transition:opacity 0.2s; }
.gal-sys-row:hover .gal-sys-row-action { opacity:1; }
/* ══════════════════════════════════════════════════════════
SPY HISTORY
══════════════════════════════════════════════════════════ */
.spy-hist-panel {
padding:14px 16px; display:flex; flex-direction:column; gap:10px;
overflow-y:auto; max-height:100%;
}
.spy-hist-title {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
color:var(--purple,#9b59b6); letter-spacing:2px;
border-bottom:2px solid rgba(155,89,182,0.25); padding-bottom:8px;
display:flex; align-items:center; justify-content:space-between; gap:12px;
text-shadow:0 0 10px rgba(155,89,182,0.3);
}
.spy-hist-title .atk-btn-cancel { flex-shrink:0; white-space:nowrap; }
.spy-hist-item {
background:linear-gradient(135deg, var(--tint-2), rgba(255,255,255,0.01));
border:1px solid var(--tint-4); border-radius:var(--radius);
padding:10px 12px; transition:all 0.2s;
}
.spy-hist-item:hover { background:var(--tint-3); transform:translateY(-1px); }
.spy-hist-item.success { box-shadow:inset 3px 0 0 0 rgba(46,204,136,0.6); }
.spy-hist-item.caught { box-shadow:inset 3px 0 0 0 rgba(255,80,80,0.6); }
.spy-hist-target {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
color:var(--textbright); letter-spacing:0.5px;
}
.spy-hist-meta { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textsoft); margin:3px 0; }
.spy-hist-res {
font-family:var(--font-mono); font-size:var(--fs-md);
color:var(--gold2); font-weight:700;
text-shadow:0 0 6px rgba(212,146,10,0.2);
}
.spy-hist-btns { display:flex; gap:6px; margin-top:8px; }
.spy-hist-btn {
flex:1; padding:7px; font-family:var(--font-display); font-size:var(--fs-md);
font-weight:700; letter-spacing:1.5px; border-radius:6px;
border:1px solid; cursor:pointer; background:transparent;
transition:all 0.2s; text-transform:uppercase;
}
.spy-hist-btn:hover { transform:translateY(-1px); }
.spy-hist-btn.re-spy {
border-color:rgba(46,204,136,0.4); color:var(--success);
background:rgba(46,204,136,0.06);
}
.spy-hist-btn.re-spy:hover { background:rgba(46,204,136,0.12); box-shadow:0 0 10px rgba(46,204,136,0.15); }
.spy-hist-btn.re-atk {
border-color:rgba(255,80,80,0.4); color:var(--danger);
background:rgba(255,80,80,0.06);
}
.spy-hist-btn.re-atk:hover { background:rgba(255,80,80,0.12); box-shadow:0 0 10px rgba(255,80,80,0.15); }
/* ══════════════════════════════════════════════════════════
EVENT BANNER (galaxy view) — redesigned v2
══════════════════════════════════════════════════════════ */
@keyframes evtHpShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes evtStripeScroll { from{background-position:0 0} to{background-position:40px 0} }
@keyframes evtIconPulse {
0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(255,80,0,0.5))}
50%{transform:scale(1.15);filter:drop-shadow(0 0 20px rgba(255,80,0,0.8))}
}
@keyframes evtNameGlow {
0%,100%{text-shadow:0 0 12px rgba(255,140,0,0.4)}
50%{text-shadow:0 0 24px rgba(255,140,0,0.7),0 0 50px rgba(255,100,0,0.3)}
}
@keyframes evtAtkPulse {
0%,100%{box-shadow:0 0 12px rgba(255,120,0,0.2),inset 0 0 12px rgba(255,120,0,0.05)}
50%{box-shadow:0 0 30px rgba(255,120,0,0.5),0 0 60px rgba(255,80,0,0.15),inset 0 0 16px rgba(255,120,0,0.1)}
}
@keyframes evtBannerPulse {
0%,100%{box-shadow:0 4px 24px var(--shade-3),0 0 30px rgba(255,80,0,0.08),inset 0 0 30px rgba(255,80,0,0.03)}
50%{box-shadow:0 4px 30px var(--shade-2),0 0 50px rgba(255,80,0,0.15),inset 0 0 40px rgba(255,80,0,0.06)}
}
@keyframes evtLabelBlink { 0%,100%{opacity:1} 50%{opacity:0.5} }
.gal-evt-banner {
display:flex; align-items:center; gap:16px; margin:10px 12px;
padding:16px 20px; border-radius:14px; cursor:pointer; transition:all 0.3s;
background:linear-gradient(135deg, rgba(180,40,20,0.18), rgba(255,100,0,0.08), rgba(120,30,10,0.12));
border:2px solid rgba(255,120,0,0.5); position:relative; overflow:hidden;
animation:evtBannerPulse 3s ease-in-out infinite;
}
/* animated hazard stripe at top */
.gal-evt-alert-stripe {
position:absolute; top:0; left:0; right:0; height:3px;
background:repeating-linear-gradient(90deg, rgba(255,120,0,0.8) 0px, rgba(255,120,0,0.8) 10px, transparent 10px, transparent 20px);
background-size:40px 3px;
animation:evtStripeScroll 1s linear infinite;
}
.gal-evt-banner:hover {
background:linear-gradient(135deg, rgba(180,40,20,0.28), rgba(255,100,0,0.16));
transform:translateY(-3px);
box-shadow:0 10px 40px var(--shade-2), 0 0 60px rgba(255,100,0,0.2);
border-color:rgba(255,140,0,0.8);
}
.gal-evt-icon {
font-size:36px; flex-shrink:0; position:relative; z-index:1;
animation:evtIconPulse 2s ease-in-out infinite;
}
.gal-evt-info { flex:1; min-width:0; position:relative; z-index:1; }
.gal-evt-label {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
letter-spacing:2px; color:rgba(255,180,100,0.7); margin-bottom:3px;
animation:evtLabelBlink 2s ease-in-out infinite;
}
.gal-evt-name {
font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700;
letter-spacing:2px; color:#ff9900; margin-bottom:10px;
animation:evtNameGlow 3s ease-in-out infinite;
}
.gal-evt-hp-wrap {
height:14px; background:var(--shade-3); border-radius:7px;
overflow:hidden; box-shadow:inset 0 2px 6px var(--shade-2);
border:1px solid rgba(255,120,0,0.2); position:relative;
}
.gal-evt-hp-fill {
height:100%; border-radius:6px;
background:linear-gradient(90deg,#cc0000,#ff4400,#ff8800,#ffaa00);
transition:width 0.5s; position:relative;
box-shadow:0 0 16px rgba(255,80,0,0.6), 0 0 6px rgba(255,80,0,0.9);
}
.gal-evt-hp-fill::after {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
background-size:200% 100%;
animation:evtHpShimmer 1.8s linear infinite;
}
.gal-evt-hp-pct {
position:absolute; right:6px; top:50%; transform:translateY(-50%);
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
color:rgba(255,255,255,0.9); text-shadow:0 1px 3px rgba(0,0,0,0.8);
z-index:1;
}
.gal-evt-stats {
font-family:var(--font-mono); font-size:var(--fs-md);
color:rgba(255,200,150,0.7); margin-top:8px; letter-spacing:0.5px;
position:relative; z-index:1;
}
.gal-evt-atk-btn {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
letter-spacing:2px; padding:12px 24px;
background:linear-gradient(135deg, rgba(255,50,0,0.3), rgba(255,120,0,0.15));
border:2px solid rgba(255,120,0,0.7); border-radius:var(--radius-md);
color:#ffaa00; cursor:pointer; flex-shrink:0;
white-space:nowrap; transition:all 0.25s;
text-shadow:0 0 14px rgba(255,140,0,0.5);
animation:evtAtkPulse 2s ease-in-out infinite;
position:relative; z-index:1;
}
.gal-evt-atk-btn:hover {
background:linear-gradient(135deg, rgba(255,50,0,0.5), rgba(255,120,0,0.3));
transform:translateY(-2px) scale(1.06);
box-shadow:0 0 40px rgba(255,100,0,0.4), 0 0 80px rgba(255,80,0,0.15);
border-color:#ffaa00;
}
/* ══════════════════════════════════════════════════════════
GLOBAL EVENT CARD (overview) — redesigned v2
══════════════════════════════════════════════════════════ */
@keyframes evCardPulse {
0%,100%{box-shadow:0 4px 24px var(--shade-3),0 0 20px rgba(255,100,0,0.08),inset 0 0 30px rgba(255,80,0,0.02)}
50%{box-shadow:0 4px 30px var(--shade-2),0 0 40px rgba(255,100,0,0.15),inset 0 0 40px rgba(255,80,0,0.05)}
}
@keyframes evCardStripe { from{background-position:0 0} to{background-position:40px 0} }
@keyframes evCardAlertBlink { 0%,100%{opacity:0.9} 50%{opacity:0.4} }
.ev-gbl-card {
background:linear-gradient(135deg, rgba(180,40,20,0.16), rgba(255,100,0,0.06), rgba(100,30,10,0.1));
border:2px solid rgba(255,120,0,0.5); border-radius:14px;
padding:0; margin-bottom:14px; cursor:pointer;
animation:evCardPulse 3s ease-in-out infinite;
transition:all 0.3s; position:relative; overflow:hidden;
}
/* animated hazard stripe at top */
.ev-gbl-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:repeating-linear-gradient(90deg, rgba(255,120,0,0.8) 0px, rgba(255,120,0,0.8) 10px, transparent 10px, transparent 20px);
background-size:40px 3px;
animation:evCardStripe 1s linear infinite;
}
.ev-gbl-card:hover {
background:linear-gradient(135deg, rgba(180,40,20,0.25), rgba(255,100,0,0.12));
transform:translateY(-3px);
box-shadow:0 8px 36px var(--shade-2), 0 0 50px rgba(255,100,0,0.18);
border-color:rgba(255,140,0,0.8);
}
.ev-gbl-header {
padding:14px 18px 10px; display:flex; align-items:center; gap:12px;
}
.ev-gbl-alert-tag {
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
letter-spacing:2px; color:rgba(255,180,100,0.8);
animation:evCardAlertBlink 2s ease-in-out infinite;
}
.ev-gbl-icon {
font-size:28px; filter:drop-shadow(0 0 10px rgba(255,100,0,0.6));
animation:evtIconPulse 2s ease-in-out infinite;
}
.ev-gbl-title {
font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700;
letter-spacing:2px; color:#ffaa00; flex:1;
text-shadow:0 0 16px rgba(255,140,0,0.5);
}
.ev-gbl-subtitle {
font-family:var(--font-mono); font-size:var(--fs-md);
letter-spacing:1px; color:rgba(255,180,120,0.5);
}
.ev-gbl-hp-section { padding:4px 18px 14px; }
.ev-gbl-hp-bar {
height:14px; background:var(--shade-3); border-radius:7px;
margin-bottom:8px; overflow:hidden; position:relative;
box-shadow:inset 0 2px 6px var(--shade-2);
border:1px solid rgba(255,120,0,0.15);
}
.ev-gbl-hp-fill {
height:100%; border-radius:6px;
background:linear-gradient(90deg,#cc0000,#ff4400,#ff8800,#ffaa00);
transition:width 0.5s; position:relative;
box-shadow:0 0 14px rgba(255,80,0,0.6), 0 0 6px rgba(255,80,0,0.9);
}
.ev-gbl-hp-fill::after {
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
background-size:200% 100%;
animation:evtHpShimmer 1.8s linear infinite;
}
.ev-gbl-hp-pct {
position:absolute; right:8px; top:50%; transform:translateY(-50%);
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
color:rgba(255,255,255,0.9); text-shadow:0 1px 3px rgba(0,0,0,0.9);
z-index:1;
}
.ev-gbl-stats {
display:flex; justify-content:space-between;
font-family:var(--font-mono); font-size:var(--fs-md); color:rgba(255,200,150,0.6);
}
/* ── Event attack modal rows ── */
.ev-troop-row {
display:flex; align-items:center; gap:10px;
padding:9px 0; border-bottom:1px solid var(--tint-3);
transition:background 0.15s;
}
.ev-troop-row:hover { background:var(--tint-2); }
.ev-troop-name { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textbright); flex:1; }
.ev-troop-have { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--textmid); width:70px; text-align:right; }
.ev-troop-atk { font-family:var(--font-mono); font-size:var(--fs-md); color:var(--danger); width:65px; text-align:right; font-weight:700; }
.ev-troop-input {
width:75px; background:rgba(4,8,20,0.8);
border:1px solid rgba(var(--accent-rgb),0.20); border-radius:6px;
color:var(--textbright); font-family:var(--font-display); font-size:var(--fs-md);
font-weight:700; padding:6px 8px; text-align:center;
transition:all 0.2s; outline:none;
}
.ev-troop-input:focus { border-color:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),0.3); }
/* ── Event Leaderboard ── */
.ev-lb-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--event-orange);text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(255,140,0,0.2); }
.ev-lb-row { display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textmid);transition:background .15s; }
.ev-lb-row:hover { background:var(--tint-2); }
.ev-lb-me { background:rgba(255,140,0,0.08);border:1px solid rgba(255,140,0,0.2);border-radius:6px; }
.ev-lb-rank { min-width:32px;text-align:center;font-weight:700;color:var(--event-orange); }
.ev-lb-name { flex:1;color:var(--textbright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ev-lb-dmg { min-width:80px;text-align:right;font-weight:700;color:var(--danger); }
/* ═══════ GALAXY EXPLORATION ═══════ */
.gex-section { padding:10px 12px 4px;flex-shrink:0; }
.gex-header { display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:6px 10px;border-radius:6px;background:var(--tint-2);margin-bottom:8px;transition:background .2s; }
.gex-header:hover { background:var(--tint-3); }
.gex-header-title { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;min-width:0;flex:1; }
.gex-toggle { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);letter-spacing:1px;white-space:nowrap;flex-shrink:0; }
/* ── Galaxy Cards ── */
.gex-galaxies { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px; }
.gex-gal { position:relative;padding:14px 10px 12px;border-radius:var(--radius-md);text-align:center;cursor:default;transition:all .3s;
background:rgba(10,15,30,0.6);border:1px solid var(--tint-3);overflow:hidden; }
.gex-gal--illu { min-height:160px; padding-top:108px; }
.gex-gal-illu { position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:var(--radius-md); }
.gex-gal-illu img { width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; transition:transform .4s ease, filter .3s; filter:saturate(1.05) contrast(1.03); }
.gex-gal-illu img[src*="pegasus"],
.gex-gal-illu img[src*="distant"] { object-position:center 65%; }
.gex-gal-illu::after {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 0%, transparent 50%, rgba(8,12,22,0.40) 78%, rgba(8,12,22,0.80) 100%);
pointer-events:none;
}
.gex-gal--illu .gex-gal-icon,
.gex-gal--illu .gex-gal-name,
.gex-gal--illu .gex-gal-sub,
.gex-gal--illu .gex-status,
.gex-gal--illu .gex-lock { position:relative; z-index:1; }
.gex-gal--illu.unlocked:hover .gex-gal-illu img { transform:scale(1.05); filter:saturate(1.15) contrast(1.06); }
.gex-gal--illu.locked .gex-gal-illu img { filter:grayscale(0.55) brightness(0.55); }
.gex-gal.unlocked { cursor:pointer;border-color:rgba(var(--accent-rgb),0.35);background:rgba(var(--accent-rgb),0.06); }
.gex-gal.unlocked:hover { border-color:var(--accent);box-shadow:0 0 18px rgba(var(--accent-rgb),0.25);transform:translateY(-2px); }
.gex-gal.active { border-color:var(--accent);box-shadow:0 0 20px rgba(var(--accent-rgb),0.3);animation:gexActivePulse 2.5s ease-in-out infinite; }
.gex-gal.locked { opacity:0.55; }
.gex-gal.locked::after { content:'';position:absolute;inset:0;background:var(--shade-2);backdrop-filter:blur(2px);border-radius:var(--radius-md);pointer-events:none; }
.gex-lock { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;gap:4px;font-size:20px; }
.gex-req { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);text-align:center;max-width:90%; }
.gex-gal-icon { font-size:28px;margin-bottom:4px;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),0.4)); }
.gex-gal-name { font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);letter-spacing:1px; }
.gex-gal-sub { font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);font-style:italic;margin-top:2px; }
.gex-badge { display:inline-block;margin-left:4px;padding:1px 5px;border-radius:var(--radius-sm);background:rgba(var(--accent-rgb),0.2);border:1px solid rgba(var(--accent-rgb),0.3);font-size:var(--fs-md);color:var(--accent);font-weight:700; }
.gex-status { display:inline-block;margin-top:6px;font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:2px;color:var(--accent);padding:2px 8px;border:1px solid rgba(var(--accent-rgb),0.3);border-radius:var(--radius-sm);background:rgba(var(--accent-rgb),0.1); }
@keyframes gexActivePulse { 0%,100%{box-shadow:0 0 15px rgba(var(--accent-rgb),0.2)} 50%{box-shadow:0 0 28px rgba(var(--accent-rgb),0.45)} }
/* ── Expedition Header (now a ) ── */
.gex-expeditions-wrap > .gex-exp-header,
.gex-exp-header {
font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:2px;color:var(--gold);
text-transform:uppercase;margin:20px 0 14px;padding:12px 16px;
border-bottom:2px solid rgba(255,200,50,0.3);border-top:1px solid rgba(255,200,50,0.15);
background:linear-gradient(90deg,rgba(255,180,50,0.1),rgba(255,120,30,0.04),transparent 80%);
text-shadow:0 0 16px rgba(255,200,50,0.4),0 0 40px rgba(255,150,30,0.1);
position:relative;overflow:hidden;cursor:pointer;list-style:none;
display:flex;align-items:center;gap:10px;user-select:none;
}
.gex-expeditions-wrap > .gex-exp-header::-webkit-details-marker { display:none; }
.gex-expeditions-wrap > .gex-exp-header::before {
content:'\25B8';font-size:var(--fs-md);color:var(--gold);transition:transform .25s ease;flex-shrink:0;
}
.gex-expeditions-wrap[open] > .gex-exp-header::before { transform:rotate(90deg); }
.gex-expeditions-wrap > .gex-exp-header:hover { background:linear-gradient(90deg,rgba(255,180,50,0.18),rgba(255,120,30,0.08),transparent 80%); }
.gex-exp-locked-count {
font-size:var(--fs-sm);letter-spacing:1.5px;color:var(--textmid);font-weight:500;
text-transform:none;text-shadow:none;margin-left:auto;
}
.gex-exp-header::after {
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,200,50,0.5),transparent);
}
/* ── Expedition Grid ── */
.gex-expeditions {
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:16px;
}
/* ── Expedition Card ── */
@keyframes gexCardShimmer {
0% { background-position:200% 0; }
100% { background-position:-200% 0; }
}
.gex-exp {
position:relative;padding:20px 14px 14px;border-radius:14px;text-align:center;transition:all .3s;
background:linear-gradient(160deg,rgba(12,18,40,0.85),rgba(18,24,52,0.7));
border:1.5px solid var(--tint-4);animation:gexCardIn .4s ease both;
backdrop-filter:blur(6px);overflow:hidden;
}
/* ── Top accent stripe on every card ── */
.gex-exp::before {
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,rgba(255,150,50,0.4),rgba(255,200,80,0.6),rgba(255,150,50,0.4),transparent);
opacity:0.6;transition:opacity .3s;
}
.gex-exp:hover::before { opacity:1; }
/* ── Locked ── */
.gex-exp.gex-locked {
opacity:0.6;cursor:default;
border-color:var(--tint-4);
background:linear-gradient(160deg,rgba(8,12,28,0.9),rgba(12,16,36,0.8));
}
.gex-exp.gex-locked::before { background:linear-gradient(90deg,transparent,var(--tint-9),transparent);opacity:0.4; }
.gex-exp.gex-locked:hover { opacity:0.75;border-color:var(--tint-5); }
.gex-exp.gex-locked .gex-exp-icon { filter:grayscale(0.7) brightness(0.7); }
/* ── Unlocked ── */
.gex-exp.gex-unlocked {
cursor:pointer;border-color:rgba(255,150,50,0.4);
background:linear-gradient(160deg,rgba(255,120,50,0.1),rgba(12,18,40,0.8),rgba(255,80,20,0.04));
box-shadow:0 4px 20px rgba(255,120,50,0.1),inset 0 0 30px rgba(255,120,50,0.02);
}
.gex-exp.gex-unlocked::before { opacity:1; }
.gex-exp.gex-unlocked:hover {
border-color:rgba(255,170,60,0.8);
box-shadow:0 8px 32px rgba(255,120,50,0.25),0 0 50px rgba(255,120,50,0.08),inset 0 0 30px rgba(255,120,50,0.04);
transform:translateY(-4px);
}
.gex-exp.gex-unlocked:hover::before { height:4px; }
/* ── Active ── */
.gex-exp.gex-active {
border-color:rgba(var(--accent-rgb),0.6);
background:linear-gradient(160deg,rgba(var(--accent-rgb),0.12),rgba(12,18,40,0.8));
box-shadow:0 4px 20px rgba(var(--accent-rgb),0.15),inset 0 0 20px rgba(var(--accent-rgb),0.03);
}
.gex-exp.gex-active::before { background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.6),transparent); }
/* ── Cooldown ── */
.gex-exp.gex-cooldown {
opacity:0.45;border-color:var(--tint-3);
background:linear-gradient(160deg,rgba(8,12,28,0.85),rgba(12,16,36,0.7));
}
.gex-exp.gex-cooldown::before { background:linear-gradient(90deg,transparent,var(--tint-7),transparent);opacity:0.3; }
.gex-exp.gex-cooldown .gex-exp-icon { filter:grayscale(0.4) brightness(0.8); }
/* ── Card content ── */
.gex-exp-icon {
font-size:44px;margin-bottom:8px;
filter:drop-shadow(0 0 12px rgba(255,150,50,0.4)) drop-shadow(0 2px 4px var(--shade-3));
transition:transform .3s,filter .3s;
}
.gex-exp:hover .gex-exp-icon { transform:scale(1.12);filter:drop-shadow(0 0 18px rgba(255,150,50,0.6)) drop-shadow(0 2px 6px var(--shade-3)); }
.gex-exp-name {
font-family:var(--font-display);font-size:var(--fs-md);font-weight:700;color:var(--textbright);
letter-spacing:1px;margin-bottom:6px;line-height:1.3;
text-shadow:0 0 8px var(--tint-4);
}
.gex-exp-desc {
font-family:var(--font-body);font-size:var(--fs-md);color:var(--textmid);line-height:1.5;
margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gex-exp-req {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:6px;
padding:5px 12px;border-radius:6px;background:var(--tint-4);
border:1px solid var(--tint-4);display:inline-block;letter-spacing:0.5px;
}
.gex-exp-rewards {
display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;
padding-top:8px;border-top:1px solid rgba(255,200,50,0.12);
}
.gex-exp-rewards-lbl {
width:100%;font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:2px;
color:var(--gold);margin-bottom:3px;text-transform:uppercase;
text-shadow:0 0 6px rgba(255,200,50,0.2);
}
.gex-exp-rewards span {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textbright);font-weight:600;
padding:3px 8px;border-radius:5px;background:var(--tint-4);
border:1px solid var(--tint-3);transition:all .2s;
}
.gex-exp-rewards span:hover { background:var(--tint-7);border-color:var(--tint-9); }
.gex-exp-cd {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--textsoft);margin-top:8px;
padding:4px 10px;border-radius:5px;background:var(--tint-2);display:inline-block;
}
/* ── Info button ── */
.gex-exp-info {
position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
background:var(--tint-3);border:1.5px solid var(--tint-9);
color:var(--textmid);font-size:var(--fs-md);cursor:pointer;z-index:3;
display:flex;align-items:center;justify-content:center;
transition:all .25s;padding:0;line-height:1;
backdrop-filter:blur(4px);
}
.gex-exp-info:hover {
background:rgba(255,150,50,0.25);border-color:rgba(255,180,60,0.7);
color:var(--gold);box-shadow:0 0 14px rgba(255,150,50,0.3);
transform:scale(1.15);
}
/* ── Level badge ── */
.gex-exp-lvl {
font-size:var(--fs-md);color:var(--accent);font-weight:400;letter-spacing:0;
background:rgba(var(--accent-rgb),0.12);border:1px solid rgba(var(--accent-rgb),0.25);
border-radius:var(--radius-sm);padding:1px 6px;margin-left:4px;
text-shadow:0 0 6px rgba(var(--accent-rgb),0.3);
}
/* ── DEF badge ── */
.gex-exp-def {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--danger);margin-bottom:6px;
text-shadow:0 0 6px rgba(224,80,80,0.25);font-weight:700;letter-spacing:0.5px;
}
/* ── Completions badge ── */
.gex-exp-completions {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--success);
margin-top:8px;letter-spacing:0.5px;
background:rgba(46,204,136,0.1);border:1px solid rgba(46,204,136,0.25);
border-radius:5px;padding:3px 10px;display:inline-block;
text-shadow:0 0 6px rgba(46,204,136,0.2);
}
/* ── Expedition Progress ── */
.gex-progress {
position:relative;height:20px;background:var(--tint-3);border-radius:6px;
overflow:hidden;margin-top:10px;border:1px solid rgba(var(--accent-rgb),0.15);
}
.gex-progress-bar {
height:100%;background:linear-gradient(90deg,rgba(var(--accent-rgb),0.4),rgba(var(--accent-rgb),0.8));
border-radius:5px;transition:width .5s;
box-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.gex-progress-txt {
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;
color:var(--textbright);text-shadow:0 1px 4px var(--shade-5);
}
@keyframes gexCardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* ═══════ EXPEDITION DETAIL PANEL ═══════ */
.exp-close {
position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;
background:var(--tint-3);border:1.5px solid var(--tint-9);
color:var(--textmid);font-size:16px;cursor:pointer;z-index:5;
display:flex;align-items:center;justify-content:center;transition:all .25s;padding:0;line-height:1;
}
.exp-close:hover {
background:rgba(224,80,80,0.2);border-color:rgba(224,80,80,0.6);
color:var(--danger);box-shadow:0 0 12px rgba(224,80,80,0.25);transform:scale(1.1);
}
.exp-panel {
max-width:580px !important;min-width:380px;max-height:90vh;overflow-y:auto;padding:0 !important;
background:linear-gradient(160deg,rgba(8,12,28,0.98),rgba(15,10,5,0.96)) !important;
border:2px solid rgba(255,150,50,0.4) !important;border-radius:16px !important;
box-shadow:0 12px 48px var(--shade-3),0 0 40px rgba(255,120,50,0.08) !important;
}
.exp-title {
font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:2.5px;
color:var(--gold);text-align:center;padding:22px 24px 14px;
text-shadow:0 0 20px rgba(255,200,50,0.4);text-transform:uppercase;
background:linear-gradient(180deg,rgba(255,150,50,0.06),transparent);
}
.exp-tabs-wrap {
display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 14px;justify-content:center;
}
.exp-tab {
padding:8px 16px;border:1px solid var(--tint-7);border-radius:var(--radius);
background:var(--tint-2);color:var(--textsoft);
font-family:var(--font-mono);font-size:var(--fs-md);cursor:pointer;
transition:all .2s;white-space:nowrap;
}
.exp-tab:hover:not(:disabled) { background:rgba(255,150,50,0.1);border-color:rgba(255,150,50,0.3);color:var(--textbright); }
.exp-tab.active {
background:linear-gradient(135deg,rgba(255,150,50,0.2),rgba(255,100,30,0.1));
border-color:rgba(255,150,50,0.6);color:var(--gold);
box-shadow:0 0 12px rgba(255,150,50,0.15);font-weight:700;
}
.exp-tab:disabled { opacity:0.35;cursor:not-allowed; }
.exp-sep { height:1px;background:linear-gradient(90deg,transparent,rgba(255,150,50,0.25),transparent);margin:0 20px; }
.exp-hero-illu {
position:relative; margin:8px 16px 0; height:220px; border-radius:14px;
overflow:hidden; border:1px solid rgba(255,200,110,0.22);
background:#08101e;
box-shadow:0 8px 28px var(--shade-4), inset 0 0 0 1px var(--tint-3);
}
.exp-hero-illu img { width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; filter:saturate(1.08) contrast(1.02); }
.exp-hero-illu::after {
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 0%, transparent 70%, rgba(8,12,22,0.25) 88%, rgba(8,12,22,0.55) 100%);
pointer-events:none;
}
.exp-header { display:flex;align-items:center;gap:16px;padding:16px 24px 10px; }
.exp-header-icon { font-size:48px;filter:drop-shadow(0 0 16px rgba(255,150,50,0.5));flex-shrink:0; }
.exp-header-info { flex:1;min-width:0; }
.exp-header-name {
font-family:var(--font-display);font-size:20px;font-weight:700;
color:var(--textbright);letter-spacing:1.5px;line-height:1.3;
text-shadow:0 0 10px var(--tint-7);
}
.exp-header-lvl {
font-size:var(--fs-lg);color:var(--accent);font-weight:400;letter-spacing:0;
text-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}
.exp-header-sub {
font-family:var(--font-body);font-size:var(--fs-md);color:var(--textmid);margin-top:2px;
letter-spacing:1px;text-transform:uppercase;
}
.exp-record {
font-family:var(--font-mono);font-size:var(--fs-md);color:var(--gold);margin-top:4px;
text-shadow:0 0 8px rgba(255,200,50,0.2);
}
.exp-dg-badge {
background:rgba(255,200,0,0.12);border:1px solid rgba(255,200,0,0.35);border-radius:6px;
padding:4px 12px;font-family:var(--font-display);font-size:var(--fs-md);color:var(--gold);
white-space:nowrap;flex-shrink:0;
}
.exp-desc {
padding:4px 24px 14px;font-family:var(--font-body);font-size:16px;
color:var(--textmid);line-height:1.65;
}
.exp-stats {
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 24px 16px;
}
.exp-stat {
display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-md);
background:var(--tint-2);border:1px solid var(--tint-3);
font-family:var(--font-mono);font-size:var(--fs-lg);transition:all .2s;
}
.exp-stat:hover { background:var(--tint-3);border-color:var(--tint-5); }
.exp-stat-lbl { color:var(--textmid);font-size:var(--fs-md);flex:1; }
.exp-stat-val { font-weight:700;color:var(--textbright);font-size:16px; }
.exp-stat-danger { border-color:rgba(224,80,80,0.2); }
.exp-stat-danger .exp-stat-val { color:var(--danger);text-shadow:0 0 6px rgba(224,80,80,0.3); }
.exp-stat-warn { border-color:rgba(255,180,50,0.2); }
.exp-stat-warn .exp-stat-val { color:var(--warn);text-shadow:0 0 6px rgba(255,180,50,0.3); }
.exp-rewards-section {
padding:14px 24px 16px;margin:0 20px;border-radius:var(--radius-md);
background:linear-gradient(135deg,rgba(255,200,50,0.04),rgba(255,150,50,0.02));
border:1px solid rgba(255,200,50,0.12);
}
.exp-rewards-title {
font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:2.5px;
color:var(--gold);margin-bottom:10px;text-transform:uppercase;
text-shadow:0 0 10px rgba(255,200,50,0.2);
}
.exp-rewards-grid { display:flex;flex-wrap:wrap;gap:10px; }
.exp-reward {
display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius);
background:var(--tint-2);border:1px solid var(--tint-4);
font-family:var(--font-mono);font-size:16px;color:var(--textbright);
transition:all .2s;
}
.exp-reward:hover { background:var(--tint-4);border-color:var(--tint-9);transform:translateY(-1px); }
.exp-reward b { font-weight:700; }
/* ── Expedition Leaderboard ── */
.exp-lb-section {
margin:12px 20px 0;padding:14px 16px;border-radius:var(--radius-md);
border-top:2px solid rgba(255,150,50,0.3);
background:linear-gradient(135deg,rgba(255,150,50,0.03),rgba(255,100,30,0.01));
}
.exp-lb-title {
font-family:var(--font-display);font-size:var(--fs-base);letter-spacing:2px;
color:var(--gold);margin-bottom:8px;text-transform:uppercase;
text-shadow:0 0 8px rgba(255,200,50,0.2);
}
.exp-lb-section table tr { transition:background .15s; }
.exp-lb-section table tr:hover { background:var(--tint-2); }
.exp-lb-section table td { padding:5px 6px; }
.exp-lb-me {
background:rgba(var(--accent-rgb),0.1) !important;
box-shadow:inset 3px 0 0 0 var(--accent); }
.exp-lb-me td { color:var(--accent) !important;font-weight:700; }
.exp-status-wrap { padding:12px 24px; }
.exp-status-label { font-family:var(--font-display);font-size:var(--fs-md);color:var(--warn);margin-bottom:8px;letter-spacing:1px; }
.exp-status-timer {
font-family:var(--font-body);font-size:20px;font-weight:700;color:var(--accent);
text-align:center;margin-bottom:6px;text-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.exp-status-cd { font-family:var(--font-body);font-size:16px;color:var(--warn); }
.exp-actions { display:flex;gap:12px;justify-content:center;padding:18px 24px 22px; }
.exp-btn {
padding:12px 24px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--fs-md);
font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .25s;
border:2px solid;text-transform:uppercase;position:relative;overflow:hidden;
}
.exp-btn::after {
content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,var(--tint-4),transparent);
transition:left .4s;
}
.exp-btn:hover::after { left:100%; }
.exp-btn-cancel {
background:var(--tint-4);border-color:var(--tint-9);color:var(--textsoft);
}
.exp-btn-cancel:hover { background:var(--tint-7);border-color:rgba(255,255,255,0.3);color:var(--textbright); }
.exp-btn-launch {
background:linear-gradient(135deg,rgba(255,100,30,0.2),rgba(255,150,50,0.1));
border-color:rgba(255,150,50,0.6);color:var(--gold);
text-shadow:0 0 10px rgba(255,200,50,0.3);
box-shadow:0 0 16px rgba(255,120,50,0.15);
}
.exp-btn-launch:hover {
background:linear-gradient(135deg,rgba(255,100,30,0.35),rgba(255,150,50,0.2));
border-color:var(--gold);transform:translateY(-2px);
box-shadow:0 4px 24px rgba(255,120,50,0.3);
}
@media(max-width:768px) {
/* width:95vw force le panel a remplir l'espace dispo. Sans cela, le panel est
enfant flex de .conv-overlay (justify-content:center) avec min-width:0 ->
il retrecit a la min-content du texte (~120px) -> chaque mot wrap. */
.exp-panel { width:95vw !important;max-width:95vw !important;min-width:0; }
.exp-desc { overflow-wrap:break-word;word-break:normal; }
.exp-title { font-size:16px;letter-spacing:2px;padding:16px 16px 10px; }
.exp-header { padding:12px 16px 8px; }
.exp-header-icon { font-size:36px; }
.exp-header-name { font-size:16px; }
.exp-stats { grid-template-columns:1fr;padding:0 16px 12px; }
.exp-desc { padding:4px 16px 10px;font-size:var(--fs-md); }
.exp-rewards-section { margin:0 12px;padding:10px 16px; }
.exp-reward { font-size:var(--fs-md);padding:6px 10px; }
}
/* ── Hyperspace Overlay ── */
.gex-hyper-overlay { position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0);pointer-events:all;transition:background .3s,filter .2s;will-change:opacity,filter; }
.gex-hyper-overlay.phase1 { background:rgba(0,2,15,0.95); }
.gex-hyper-overlay.phase2 .gex-star-line { animation:gexStarStretch .6s ease-in forwards; }
.gex-hyper-overlay.phase3 { filter:brightness(3);background:rgba(200,220,255,0.8); }
.gex-hyper-overlay.phase4 { opacity:0;transition:opacity .3s; }
.gex-star-line { position:absolute;width:2px;height:2px;background:var(--textbright);border-radius:1px;opacity:0;will-change:transform,opacity; }
@keyframes gexStarStretch { 0%{opacity:1;transform:scaleY(1)} 100%{opacity:0.7;transform:scaleY(30);filter:blur(1px)} }
/* ── Responsive ── */
@media(max-width:768px) {
.gex-galaxies { grid-template-columns:repeat(3,1fr);gap:6px; }
.gex-gal { padding:10px 6px 8px; }
.gex-gal-icon { font-size:var(--fs-2xl); }
.gex-gal-name { font-size:var(--fs-md); }
.gex-expeditions { grid-template-columns:repeat(2,1fr);gap:10px; }
.gex-exp-header { font-size:var(--fs-md);letter-spacing:2px;padding:8px 12px; }
.gex-exp { padding:16px 10px 12px; }
.gex-exp-icon { font-size:36px; }
.gex-exp-name { font-size:var(--fs-md); }
.gex-exp-info { width:24px;height:24px;font-size:var(--fs-md); }
}
/* Mobile portrait étroit ≤480px : 3 cards galaxie deviennent 1 col empilée */
@media (max-width:480px) {
.gex-galaxies { grid-template-columns:1fr; gap:8px; }
.gex-gal { padding:12px 14px; flex-direction:row; align-items:center; gap:10px; text-align:left; }
.gex-gal-icon { font-size:24px; flex-shrink:0; }
.gex-gal-name { font-size:var(--fs-md); }
.gex-header-title { font-size:var(--fs-sm); letter-spacing:1.5px; }
/* Force 1 col aussi pour les expéditions (déjà 1 col à 480 dans une autre rule mais on s'assure de bien stack) */
.gex-expeditions { grid-template-columns:1fr; }
}
@media(max-width:480px) {
.gex-expeditions { grid-template-columns:1fr;gap:10px; }
}
/* ══════════════════════════════════════════════════════════
GALAXY MOBILE REFONTE — badges, sticky, compact
══════════════════════════════════════════════════════════ */
/* Badge tier NPC */
.gal-tier-badge {
display:inline-flex; align-items:center; justify-content:center;
padding:2px 8px; border-radius:var(--radius-sm);
font-family:var(--font-display); font-size:var(--fs-md); font-weight:700;
letter-spacing:1px; vertical-align:middle;
}
.gal-tier-badge.t1 {
background:rgba(46,204,136,0.2); border:1px solid var(--success); color:var(--success);
}
.gal-tier-badge.t2 {
background:rgba(243,156,18,0.2); border:1px solid var(--warn); color:var(--warn);
}
.gal-tier-badge.t3 {
background:rgba(255,60,60,0.2); border:1px solid var(--danger); color:var(--danger);
box-shadow:0 0 8px rgba(255,60,60,0.3);
}
.gal-tier-badge.t4 {
background:rgba(168,85,247,0.2); border:1px solid #a855f7; color:#a855f7;
box-shadow:0 0 12px rgba(168,85,247,0.4);
animation:nightmarePulse 1.5s ease-in-out 1;
}
.gal-tier-badge.t5 {
background:rgba(94,255,242,0.18); border:1px solid #5efff2; color:#5efff2;
text-shadow:0 0 8px rgba(94,255,242,0.7);
box-shadow:0 0 14px rgba(94,255,242,0.55);
animation:ascendedShimmer 1.3s ease-in-out infinite;
}
.gal-tier-badge.t6 {
background:rgba(255,215,0,0.16); border:1px solid #ffd700; color:#ffd700;
text-shadow:0 0 10px rgba(255,215,0,0.8);
box-shadow:0 0 18px rgba(255,215,0,0.55);
animation:divinePulse 1.4s ease-in-out infinite;
}
.gal-tier-badge.t7 {
background:linear-gradient(135deg,rgba(232,212,255,0.22),rgba(255,248,220,0.18));
border:1px solid #e8d4ff; color:#fff8dc;
text-shadow:0 0 12px rgba(255,248,220,0.9);
box-shadow:0 0 24px rgba(232,212,255,0.7), 0 0 8px rgba(255,255,255,0.4) inset;
animation:grailFlare 1.6s ease-in-out infinite;
}
@keyframes nightmarePulse { 0%,100%{box-shadow:0 0 8px rgba(168,85,247,0.15)} 50%{box-shadow:0 0 24px rgba(168,85,247,0.4), 0 0 6px rgba(168,85,247,0.6) inset} }
@keyframes ascendedShimmer { 0%,100%{box-shadow:0 0 10px rgba(94,255,242,0.35), 0 0 4px var(--tint-10) inset} 50%{box-shadow:0 0 28px rgba(94,255,242,0.75), 0 0 10px rgba(255,255,255,0.55) inset} }
@keyframes divinePulse { 0%,100%{box-shadow:0 0 12px rgba(255,215,0,0.35)} 50%{box-shadow:0 0 28px rgba(255,215,0,0.75), 0 0 8px rgba(255,200,80,0.55) inset} }
@keyframes grailFlare { 0%,100%{box-shadow:0 0 18px rgba(232,212,255,0.45), 0 0 6px rgba(255,255,255,0.3) inset} 50%{box-shadow:0 0 36px rgba(232,212,255,0.9), 0 0 14px rgba(255,255,255,0.65) inset} }
/* Bouton info compact — hidden on desktop, visible on mobile via media query */
.gal-info-btn {
display:none;
width:28px; height:28px; border-radius:50%;
border:1px solid rgba(var(--accent-rgb),0.3);
background:rgba(var(--accent-rgb),0.08);
color:var(--accent); font-size:var(--fs-md);
align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0; transition:all 0.2s;
vertical-align:middle; margin-left:4px;
}
.gal-info-btn:hover {
background:rgba(var(--accent-rgb),0.2);
border-color:rgba(var(--accent-rgb),0.6);
box-shadow:0 0 10px rgba(var(--accent-rgb),0.2);
}
/* Sticky action footer dans les panels d'attaque */
.atk-actions-sticky {
position:sticky; bottom:0;
background:rgba(4,8,18,0.97); backdrop-filter:blur(8px);
padding:10px 0 env(safe-area-inset-bottom, 0px);
border-top:1px solid rgba(var(--accent-rgb),0.2);
z-index:10; margin-top:8px;
}
/* DESKTOP (12/06/2026, bug chrisatlantis) — Le panneau combat de la galaxie
(#galDetail.gal-detail-panel) déborde sous le viewport : la barre sticky
bottom:0 se calait au bas du panneau hors écran et flottait PAR-DESSUS les
unités. Sur desktop on la rend statique : elle se place après la dernière
unité, jamais sur elles. (Mobile garde sa modale plein écran via dev-phone.) */
@media (min-width:769px) {
.gal-detail-panel .atk-actions-sticky {
position:static; bottom:auto; z-index:auto;
margin:10px -18px -18px; padding:12px 18px;
background:rgba(4,8,18,0.97);
border-top:1px solid rgba(var(--accent-rgb),0.25);
}
}
@media(max-width:768px) {
/* On mobile, ensure sticky footer stays visible in bottom sheet */
.atk-panel { display:flex; flex-direction:column; min-height:0; }
.atk-actions-sticky {
position:sticky; bottom:0;
margin:8px -14px -14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
flex-shrink:0;
}
}
/* NPC card border-left par tier + mobile info btn */
@media(max-width:768px) {
.gal-tr.npc.npc-t1 .gal-td:first-child { box-shadow:inset 3px 0 0 0 var(--success) !important; }
.gal-tr.npc.npc-t2 .gal-td:first-child { box-shadow:inset 3px 0 0 0 var(--warn) !important; }
.gal-tr.npc.npc-t3 .gal-td:first-child { box-shadow:inset 3px 0 0 0 var(--danger) !important; }
.gal-tr.npc.npc-t4 .gal-td:first-child { box-shadow:inset 3px 0 0 0 #a855f7 !important; }
.gal-info-btn { display:inline-flex; }
/* Hide HTML5 drag-and-drop zone on touch devices (non-functional) */
.atk-drop-zone { display:none !important; }
/* Bigger touch targets for system overview action icons */
.gal-sys-row-action {
font-size:18px !important; opacity:1 !important;
min-width:36px; min-height:36px;
display:inline-flex; align-items:center; justify-content:center;
}
}
/* Loading skeleton while API calls resolve */
.gal-skeleton-row .gal-td { padding:8px 12px; }
.gal-skeleton-bar {
height:14px; border-radius:var(--radius-sm);
background:linear-gradient(90deg, rgba(var(--accent-rgb),0.06) 25%, rgba(var(--accent-rgb),0.12) 50%, rgba(var(--accent-rgb),0.06) 75%);
background-size:200% 100%;
animation:galSkeletonPulse 1.2s ease-in-out infinite;
}
@keyframes galSkeletonPulse {
0% { background-position:200% 0; }
100% { background-position:-200% 0; }
}
/* F7 — NPC Weekly Incursion badge */
.gal-inc-badge {
display:inline-block; margin-left:4px;
font-size:var(--fs-sm); line-height:1;
animation:galIncPulse 1.6s ease-in-out infinite;
filter:drop-shadow(0 0 4px rgba(255,120,40,0.8));
cursor:help;
}
@keyframes galIncPulse {
0%, 100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(255,120,40,0.8)); }
50% { transform:scale(1.15); filter:drop-shadow(0 0 8px rgba(255,160,60,1)); }
}
/* F7 — Incursion banner dans le panneau d'attaque NPC */
.npc-incursion-banner {
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin:10px 0; padding:10px 14px;
background:linear-gradient(90deg, rgba(255,80,30,0.18), rgba(255,160,60,0.10));
border:1px solid rgba(255,120,40,0.55);
border-radius:var(--radius-md);
box-shadow:0 0 14px rgba(255,120,40,0.25), inset 0 0 12px rgba(255,120,40,0.08);
}
.npc-incursion-banner .inc-badge {
font-family:var(--font-display); font-size:var(--fs-base); font-weight:700;
color:#ffb070; letter-spacing:0.5px;
text-shadow:0 0 6px rgba(255,120,40,0.6);
}
.npc-incursion-banner .inc-detail {
font-family:var(--font-mono); font-size:var(--fs-sm);
color:#ffd7a0; letter-spacing:0.3px;
}
/* ═══ Wave 7 — Table improvements ═══════════════════════════════ */
/* Density toggle in cmdbar */
.galcb-density-toggle {
display:inline-flex; gap:1px;
padding:2px; border-radius:6px;
background:rgba(var(--accent-rgb),0.06);
border:1px solid rgba(var(--accent-rgb),0.20);
}
.galcb-density {
padding:6px 10px; font-size:var(--fs-base);
background:transparent; border:none; color:var(--textsoft);
cursor:pointer; border-radius:var(--radius-sm);
transition:all 0.18s;
font-family:var(--font-display);
}
.galcb-density:hover { color:var(--text); background:rgba(var(--accent-rgb),0.10); }
.galcb-density.active { color:var(--accent2); background:rgba(var(--accent-rgb),0.20); }
/* Density variants : row padding adjustments */
.gal-table.gal-density-compact .gal-td { padding:3px 14px; font-size:var(--fs-base); }
.gal-table.gal-density-compact .gal-planet-name { font-size:var(--fs-base); }
.gal-table.gal-density-comfy .gal-td { padding:11px 14px; font-size:var(--fs-md); }
/* Sortable column headers */
.gal-th-sortable {
cursor:pointer; user-select:none;
transition:color 0.18s, background 0.18s;
}
.gal-th-sortable:hover { color:var(--accent); background:rgba(var(--accent-rgb),0.06); }
.gal-sort-arrow {
display:inline-block; margin-left:6px; opacity:0.40;
font-size:10px; transition:opacity 0.18s;
}
.gal-th-sortable:hover .gal-sort-arrow { opacity:0.85; }
.gal-th-sortable.sort-asc .gal-sort-arrow::before { content:'▲'; color:var(--accent); opacity:1; }
.gal-th-sortable.sort-desc .gal-sort-arrow::before { content:'▼'; color:var(--accent); opacity:1; }
/* Distance column */
.gal-distance { font-family:var(--font-mono); font-size:var(--fs-base); text-align:center; min-width:70px; }
.gal-dist-self { color:var(--gold2); font-weight:700; letter-spacing:1.2px; }
.gal-dist-near { color:var(--success); font-weight:600; }
.gal-dist-mid { color:var(--warn); }
.gal-dist-far { color:var(--danger); opacity:0.85; }
/* Threat badge */
.gal-threat { text-align:center; min-width:80px; }
.gal-threat-none { color:var(--textsoft); opacity:0.4; }
.gal-threat-self { color:var(--gold2); font-size:18px; }
.gal-threat-badge {
display:inline-block; padding:2px 9px;
font-family:var(--font-display); font-size:10px; font-weight:700;
letter-spacing:1px; text-transform:uppercase;
border-radius:var(--radius-md); border:1px solid;
white-space:nowrap;
}
.gal-threat-low { color:#5fcc7a; border-color:rgba(95,204,122,0.45); background:rgba(95,204,122,0.08); }
.gal-threat-med { color:#ffce44; border-color:rgba(255,206,68,0.45); background:rgba(255,206,68,0.08); }
.gal-threat-high { color:#ff8044; border-color:rgba(255,128,68,0.50); background:rgba(255,128,68,0.10); }
.gal-threat-extreme { color:#ff4646; border-color:rgba(255,70,70,0.55); background:rgba(255,70,70,0.12); animation:galThreatExtremePulse 1.5s ease-in-out infinite; }
@keyframes galThreatExtremePulse {
0%,100% { box-shadow:0 0 0 rgba(255,70,70,0); }
50% { box-shadow:0 0 8px rgba(255,70,70,0.45); }
}
/* Inline action icons (replace ACTIONS ▾) */
.gal-act-icon {
width:30px; height:30px;
display:inline-flex; align-items:center; justify-content:center;
font-size:var(--fs-md); border-radius:6px;
background:var(--tint-2);
border:1px solid rgba(var(--accent-rgb),0.25);
color:var(--text); cursor:pointer;
margin-left:3px;
transition:all 0.15s ease;
position:relative;
}
.gal-act-icon:hover:not(:disabled) {
transform:translateY(-1px);
filter:brightness(1.25);
box-shadow:0 4px 10px var(--shade-3);
}
.gal-act-icon:disabled { opacity:0.30; cursor:not-allowed; }
.gal-act-spy { color:#80b0ff; border-color:rgba(128,176,255,0.40); }
.gal-act-spy:hover:not(:disabled) { background:rgba(128,176,255,0.18); border-color:rgba(128,176,255,0.85); }
.gal-act-attack { color:#ff7060; border-color:rgba(255,112,96,0.45); }
.gal-act-attack:hover:not(:disabled) { background:rgba(255,112,96,0.18); border-color:rgba(255,112,96,0.85); }
.gal-act-transport{ color:#60ff90; border-color:rgba(96,255,144,0.40); }
.gal-act-transport:hover:not(:disabled){ background:rgba(96,255,144,0.18); border-color:rgba(96,255,144,0.85); }
.gal-act-colon { color:#a080ff; border-color:rgba(160,128,255,0.40); }
.gal-act-colon:hover:not(:disabled) { background:rgba(160,128,255,0.18); border-color:rgba(160,128,255,0.85); }
.gal-act-fav { color:rgba(255,216,96,0.55); border-color:rgba(255,216,96,0.30); font-size:16px; }
.gal-act-fav:hover { color:#ffd860; border-color:rgba(255,216,96,0.85); background:rgba(255,216,96,0.15); }
.gal-act-fav.on { color:#ffd860; border-color:rgba(255,216,96,0.75); background:rgba(255,216,96,0.18); }
/* Hover row card (floating mini info panel) */
.gal-row-card {
position:fixed; z-index:200;
width:240px; padding:0;
background:rgba(8,14,28,0.96);
border:1px solid rgba(var(--accent-rgb),0.45);
border-radius:var(--radius);
backdrop-filter:blur(10px);
box-shadow:0 8px 28px var(--shade-3), 0 0 16px rgba(var(--accent-rgb),0.2);
pointer-events:none;
font-family:var(--font-mono); font-size:var(--fs-sm);
animation:grcFadeIn 0.18s ease-out;
}
/* Touch devices : la card hover reste collée (mouseleave ne se déclenche
jamais après un tap) et déborde du viewport en n'affichant que les labels
tronqués (COOR/JOUE/ALLI/DIST/MENA). Le bouton ℹ ouvre déjà galShowInfo
en modal — on désactive la version hover sur (hover:none). */
@media (hover:none), (pointer:coarse) {
.gal-row-card { display:none !important; }
}
@keyframes grcFadeIn {
from { opacity:0; transform:translateX(8px); }
to { opacity:1; transform:translateX(0); }
}
.grc-head {
padding:8px 12px;
border-bottom:1px solid var(--tint-4);
font-family:var(--font-display); font-size:var(--fs-base);
letter-spacing:1px;
}
.grc-head strong { color:var(--textbright); }
.grc-cls-mine { background:linear-gradient(90deg, rgba(255,216,96,0.20), transparent); box-shadow:inset 3px 0 0 0 #ffd860; }
.grc-cls-ally { background:linear-gradient(90deg, rgba(96,255,144,0.16), transparent); box-shadow:inset 3px 0 0 0 #60ff90; }
.grc-cls-enemy { background:linear-gradient(90deg, rgba(255,96,96,0.16), transparent); box-shadow:inset 3px 0 0 0 #ff6060; }
.grc-cls-npc { background:linear-gradient(90deg, rgba(160,128,255,0.16), transparent); box-shadow:inset 3px 0 0 0 #a080ff; }
.grc-cls-empty { background:linear-gradient(90deg, rgba(120,140,160,0.10), transparent); box-shadow:inset 3px 0 0 0 #788098; }
.grc-row {
display:flex; justify-content:space-between; gap:14px;
padding:5px 12px;
font-size:var(--fs-xs);
}
.grc-row span { color:rgba(207,224,255,0.50); text-transform:uppercase; letter-spacing:1px; font-size:10px; }
.grc-row strong { color:#ffd860; font-size:var(--fs-sm); }
.grc-desc {
padding:6px 12px 8px;
color:var(--textsoft); font-size:var(--fs-xs); font-style:italic;
border-top:1px solid var(--tint-4);
}
.grc-foot {
padding:6px 12px;
text-align:center; color:#a080ff;
font-family:var(--font-display); font-size:10px; letter-spacing:1.5px;
border-top:1px solid var(--tint-4);
}
/* Right-click context menu */
.gal-context-menu {
position:fixed; z-index:300;
min-width:200px;
background:rgba(8,14,28,0.97);
border:1px solid rgba(var(--accent-rgb),0.45);
border-radius:var(--radius);
backdrop-filter:blur(10px);
box-shadow:0 12px 32px var(--shade-7);
padding:4px;
animation:gcmFadeIn 0.12s ease-out;
}
@keyframes gcmFadeIn {
from { opacity:0; transform:scale(0.95); }
to { opacity:1; transform:scale(1); }
}
.gcm-item {
display:flex; align-items:center; gap:10px;
width:100%; padding:8px 12px;
background:transparent; border:none;
color:var(--text); cursor:pointer;
font-family:var(--font-mono); font-size:var(--fs-base);
text-align:left; border-radius:5px;
transition:background 0.12s;
}
.gcm-item:hover {
background:rgba(var(--accent-rgb),0.18);
color:var(--accent2);
}
.gcm-ico {
display:inline-flex; width:18px; height:18px;
align-items:center; justify-content:center;
font-size:var(--fs-md); flex-shrink:0;
}
/* Animation : row pulse on selection (already had .selected, enhance) */
.gal-tr.selected td {
animation:galRowFlash 0.5s ease-out;
}
@keyframes galRowFlash {
0% { background:rgba(255,216,96,0.35); }
100% { background:transparent; }
}