/* ============================================================
   e2.css - shared Era-2 component layer (Era 1.5 F0 lift)
   Source of truth for the live game (index.html). Generated from
   css/screens/era2.css: every rule scoped under `.e2scope` so the
   components never bleed into old-game screens. era2.html keeps its
   frozen copy of era2.css until it is mothballed (plan section 8).
   Excluded on purpose: era2 page-shell rules (resets, .hdr, section
   layouts, #ids) and verbatim old-game ports (.btn-upgrade,
   .progress-bar...) already owned by buttons.css / cards.css.
   ============================================================ */

/* ============================================================
   Era 2 - dark-launch shell (P2 + R0 revamp)
   Surfaces: header ribbon, Imperio (theater + catalog), Infra, Ciencia.
   Uses tokens.css variables; layout: fixed chrome, one scroll region
   per surface, no document scroll (mobile-first).
   ============================================================ */
/* ---- era2 type scale + rarity tokens ---- */
:root {
  --e2-fs-micro: .75rem;
  --e2-fs-meta: .82rem;
  --e2-fs-body: .9rem;
  --e2-fs-title: 1rem;
  --e2-fs-h: 1.1rem;
  --e2-fs-hero: 1.4rem;
  --rarity-comun: #64748b;
  --rarity-rara: #3b82f6;
  --rarity-epica: #a855f7;
  --rarity-legendaria: #f59e0b;
}
/* ---- ambient nebula + scan lines ---- */
/* ---- header: logo + hero + balance pills + stock chips ---- */
.e2scope .pos { color:var(--green) !important; }
.e2scope .neg { color:var(--red) !important; }
.e2scope .ric { width:16px; height:16px; flex:none; }
.e2scope .ri { width:12px; height:12px; display:inline-block; vertical-align:-2px; flex:none; }
/* Stroke-style Lucide glyphs (population, shield) carry no fill of their own. */
.e2scope .ri-stroke { fill:none; stroke:currentColor; stroke-width:2; }
.e2scope .hero { display:flex; align-items:center; gap:6px; padding:5px 48px 3px 10px; }
.e2scope .logo { font-family:var(--font-display); font-weight:900; font-size:.78rem; letter-spacing:.06em; color:var(--cyan); text-shadow:0 0 10px rgba(var(--accent-rgb),.4); flex:none; display:flex; align-items:baseline; gap:3px; }
.e2scope .logo i { font-style:normal; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; color:var(--amber); }
.e2scope .hgrp { display:flex; align-items:center; gap:6px; margin:0 auto; min-width:0; overflow:hidden; }
.e2scope .hero .ric { width:20px; height:20px; color:var(--credits-color); }
.e2scope .hero .hv { font-family:var(--font-mono); font-size:var(--e2-fs-hero); line-height:1.1; }
/* the primary rate is a first-class element: near-hero size, lit, beside the balance */
.e2scope .hero .hr { font-family:var(--font-mono); font-size:1.02rem; line-height:1; color:var(--green); text-shadow:0 0 9px color-mix(in srgb, currentColor 45%, transparent); }
/* 320px: the rate stays; logo and pill numerals yield instead */
@media (max-width:379px) {
  .e2scope .hero .logo { display:none; }
  .e2scope .hero .hv { font-size:1.22rem; }
  .e2scope .hero .hr { font-size:.95rem; }
  .e2scope .epill .ev { display:none; }
}
.e2scope .epill { font-family:var(--font-mono); font-size:var(--e2-fs-meta); padding:2px 8px; border-radius:10px; border:1px solid rgba(16,185,129,.5); color:var(--green); display:flex; align-items:center; gap:4px; white-space:nowrap; flex:none; }
.e2scope .epill.bad { border-color:rgba(239,68,68,.6); color:#fca5a5; }
.e2scope .epill.q { border-color:rgba(139,92,246,.5); color:#c4b5fd; }
.e2scope .epill.q.bad { border-color:rgba(239,68,68,.6); color:#fca5a5; }
.e2scope .epill .ric { width:11px; height:11px; }
.e2scope .chipstrip { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:2px 5px 4px; border-top:1px solid var(--bg-divider); }
.e2scope .rchip { background:linear-gradient(180deg, rgba(20,20,40,.9), rgba(10,10,24,.9)); border:1px solid rgba(var(--accent-rgb),.18); border-radius:4px; box-shadow:inset 0 0 6px rgba(0,0,0,.5); padding:3px 6px; display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; }
.e2scope .rchip .ric { width:13px; height:13px; }
.e2scope .rchip .rv { font-family:var(--font-mono); font-size:var(--e2-fs-micro); white-space:nowrap; }
.e2scope .rchip .rr { font-family:var(--font-mono); font-size:var(--e2-fs-micro); color:var(--text-secondary); margin-left:auto; white-space:nowrap; }
.e2scope .energywarn { display:flex; align-items:center; gap:6px; background:rgba(69,10,10,.94); border-top:1px solid rgba(239,68,68,.35); color:#fca5a5; font-size:var(--e2-fs-meta); padding:3px 10px; cursor:pointer; animation:warnin .3s ease; }
.e2scope .energywarn .wtxt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .energywarn.open .wtxt { white-space:normal; }
.e2scope .energywarn .wcaret { flex:none; color:rgba(252,165,165,.7); font-size:var(--e2-fs-micro); }
@keyframes warnin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (min-width:900px) {
  .e2scope .hband { display:flex; align-items:center; justify-content:center; gap:26px; padding:6px 12px 4px; }
  .e2scope .hband .hero { padding:0; flex:none; }
  .e2scope .hband .hgrp { margin:0; }
}
/* ---- tab ribbon: notched hud chrome (graphic frame + subtle texture, no flat CSS box) ---- */
.e2scope .tab { position:relative; border:none; color:var(--text-dim); font-family:var(--font-display); font-size:var(--e2-fs-micro); font-weight:700; padding:5px 12px; letter-spacing:.04em;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,.14)); }
.e2scope .tab::before { content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(8.3px 0, 100% 0, 100% calc(100% - 8.3px), calc(100% - 8.3px) 100%, 0 100%, 0 8.3px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #12122a, #0a0a1c); }
.e2scope .tab.active { color:var(--cyan); text-shadow:0 0 8px rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.8), rgba(var(--accent-rgb),.2) 45%, rgba(var(--accent-rgb),.55));
  filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.35)); }
.e2scope .tab.active::before { background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.2), rgba(var(--accent-rgb),.04) 55%),
    repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #10182e, #081020); }
.e2scope .tab:disabled { opacity:.4; cursor:default; filter:none; }
.e2scope .tab .badge { display:inline-block; min-width:17px; text-align:center; margin-left:5px; background:var(--amber); color:#000; font-family:var(--font-mono); font-size:var(--e2-fs-micro); border-radius:9px; padding:0 4px; }
/* ---- goal row: objective + lang, own slim line under the tabs ---- */
/* ---- layout: fixed chrome, one scroll region per surface ---- */
.e2scope .e2-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; min-height:0; }
.e2scope .fescroll { flex:1; min-height:0; padding:0 10px calc(24px + env(safe-area-inset-bottom,0px)); }
.e2scope .panel { background:var(--bg-panel); border:1px solid var(--bg-divider); border-radius:var(--panel-radius); padding:12px; margin-bottom:12px; }
.e2scope .ptitle { font-family:var(--font-mono); font-size:var(--e2-fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px; padding-bottom:6px; background:linear-gradient(90deg, rgba(var(--accent-rgb),.4), transparent) bottom left / 100% 1px no-repeat; }
@media (min-width:1024px) {
  .e2scope .panel { backdrop-filter:blur(16px); }
}
/* ---- controls: notched hud chrome, edge gradient as the frame ---- */
.e2scope .btn { --bfr:linear-gradient(180deg, rgba(var(--accent-rgb),.75), rgba(var(--accent-rgb),.18) 45%, rgba(var(--accent-rgb),.5));
  --bfill:linear-gradient(180deg, rgba(var(--accent-rgb),.16), rgba(9,11,24,.94) 62%);
  position:relative; border:none; background:var(--bfr); color:var(--cyan);
  font-family:var(--font-display); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; min-height:44px; padding:8px 14px;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.e2scope .btn::before { content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(7.4px 0, 100% 0, 100% calc(100% - 7.4px), calc(100% - 7.4px) 100%, 0 100%, 0 7.4px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px),
    var(--bfill); }
.e2scope .btn:hover { filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.3)); }
.e2scope .btn:disabled { opacity:.38; cursor:not-allowed; filter:none; }
.e2scope .btn.ghost { --bfr:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08) 45%, rgba(255,255,255,.18)); --bfill:rgba(12,13,26,.92); color:var(--text-secondary); min-height:36px; font-size:var(--e2-fs-micro); padding:6px 10px; }
.e2scope .btn.ghost:hover { filter:drop-shadow(0 0 4px rgba(255,255,255,.12)); }
.e2scope .chip { display:inline-block; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; padding:2px 7px; border-radius:2px; border:1px solid var(--bg-divider); color:var(--text-secondary); text-transform:uppercase; }
/* ---- progress bars (game pattern: 8px track, gradient fill, sheen) ---- */
.e2scope .pbar { width:110px; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; --pb:var(--amber); margin-top:4px; }
.e2scope .pbar.wide { width:auto; margin-top:6px; }
.e2scope .pbar > i { display:block; height:100%; width:0%; border-radius:4px; position:relative; transition:width .5s linear;
  background:linear-gradient(90deg, color-mix(in srgb, var(--pb) 70%, #000), var(--pb)); }
.e2scope .pbar > i::after { content:''; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  background-size:200% 100%; animation:pbsheen 1.8s linear infinite; }
@keyframes pbsheen { from { background-position:180% 0; } to { background-position:-80% 0; } }
.e2scope .pbar.ind > i { width:38%; animation:pbind 1.5s ease-in-out infinite alternate; }
@keyframes pbind { from { margin-left:0; } to { margin-left:62%; } }
.e2scope .pbar.amber { --pb:var(--amber); }
.e2scope .pbar.purple { --pb:var(--purple); }
.e2scope .pbar.blue { --pb:#3b82f6; }
.e2scope .pbar.accent { --pb:var(--cyan); }
.e2scope .cost { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-secondary); }
.e2scope .cost b { font-weight:400; display:inline-flex; align-items:center; gap:3px; }
.e2scope .cost .no { color:var(--red); }
.e2scope .muted { color:var(--text-secondary); font-size:var(--e2-fs-body); }
.e2scope .raritytag { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; color:var(--rarity-color,var(--rarity-comun)); text-transform:uppercase; }
.e2scope .raritytag[data-rarity="comun"] { --rarity-color:var(--rarity-comun); }
.e2scope .raritytag[data-rarity="rara"] { --rarity-color:var(--rarity-rara); }
.e2scope .raritytag[data-rarity="epica"] { --rarity-color:var(--rarity-epica); }
.e2scope .raritytag[data-rarity="legendaria"] { --rarity-color:var(--rarity-legendaria); }
/* ---- imperio: fixed theater zone + bottom-sheet catalog with its own scroll ---- */
.e2scope .clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.e2scope .clamp1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Auto-fit labels (KC.fitText): font-size shrinks to fit one line, no ellipsis.
   Clip (not ellipsis) so any sub-pixel residue after the fit cuts invisibly
   instead of the greedy ellipsis dropping a whole glyph + "…". */
.fit-text { text-overflow:clip; }
.e2scope .fit-text { text-overflow:clip; }
/* Last resort when even the min size overflows: wrap to a 2-line ellipsis clamp. */
.fit-text.fit-min {
  white-space:normal !important; display:-webkit-box !important;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important; text-overflow:ellipsis;
}
/* theater edge overlays: bare columns over the art (no boxes), composition as icon + % */
.e2scope .tovl { position:absolute; bottom:12px; z-index:2; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
.e2scope .tovl-t { top:10px; bottom:auto; left:0; right:22px; z-index:3; align-items:center; text-align:center; gap:8px; }
.e2scope .tovl-t .bn { font-family:var(--font-display); font-size:var(--e2-fs-h); font-weight:700; line-height:1.1; max-width:clamp(70px, calc(100% - 222px), 480px); white-space:nowrap; overflow:hidden; text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.75); }
.e2scope .tovl-t .tchips { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; max-width:88%; }
.e2scope .tovl-t .chip { background:rgba(6,6,15,.6); text-shadow:0 1px 2px rgba(0,0,0,.9); }
.e2scope .tovl-t .raritytag { text-shadow:0 1px 3px rgba(0,0,0,.95); }
@media (max-width: 560px) {
  .e2scope .tovl-t .bn { font-size:var(--e2-fs-title); }
}
/* short theaters (content-box height): the bottom overlays climb, so the chips row
   and the floating megaproject tag yield (the megaline keeps announcing the mega) */
@container viz (max-height: 155px) {
  .e2scope .tovl-t .tchips { display:none; }
}
@container viz (max-height: 190px) {
  .e2scope .theater .megastation { display:none; }
}
.e2scope .tovl-l { left:14px; align-items:flex-start; }
.e2scope .tovl-r { right:14px; max-width:56%; align-items:flex-end; text-align:right; }
.e2scope .cprow { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-primary); text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75); }
.e2scope .cprow .ri { width:13px; height:13px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.e2scope .cprow.more { margin-top:3px; color:var(--cyan); font-size:var(--e2-fs-micro); letter-spacing:.06em; text-transform:uppercase; }
.e2scope .tovl-r .orow { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--green); white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.75); }
.e2scope .tovl-r .orow.muted { color:var(--text-secondary); }
.e2scope .tovl-r .cost { text-shadow:0 1px 3px rgba(0,0,0,.95); }
.e2scope .tovl-r .cost b { justify-content:flex-end; }
.e2scope .tovl-r .megaline { margin-top:4px; justify-content:flex-end; pointer-events:auto; }
.e2scope .tovl-r .megaline .btn { min-height:30px; padding:4px 10px; font-size:var(--e2-fs-micro); }
.e2scope .theater { cursor:pointer; }
/* orbital feed strip: surface-evolution imagery under the theater */
.e2scope .orbfeed { position:relative; height:112px; margin:2px 2px 12px; border-radius:4px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.25); background:rgba(8,10,18,.6); cursor:pointer; }
.e2scope .orbfeed img { width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.05) saturate(.9); }
.e2scope .orbfeed::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.3) 100%),
  linear-gradient(180deg, rgba(6,6,15,.18) 0%, transparent 35%, rgba(6,6,15,.55) 100%); }
.e2scope .orbfeed .orec { position:absolute; top:6px; right:9px; z-index:2; display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:var(--e2-fs-micro); font-weight:700; letter-spacing:.16em; color:#ff6b6b; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.e2scope .orbfeed .orec i { width:7px; height:7px; border-radius:50%; background:#ff3a3a; box-shadow:0 0 8px rgba(255,58,58,.85); animation:orecblink 1.1s steps(2,end) infinite; }
@keyframes orecblink { 0%,49% { opacity:1; } 50%,100% { opacity:.25; } }
.e2scope .orbfeed .otag { position:absolute; bottom:6px; left:10px; right:9px; z-index:2; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; color:rgba(255,255,255,.85); text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- imperio: teatro ---- */
.e2scope .theater { position:relative; container:viz / size; height:var(--vizh, clamp(180px, 27dvh, 290px)); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:10px;
  border:7px solid transparent;
  border-image-source:url('../../assets/ui/hud-frame.webp');
  border-image-slice:94;
  border-image-width:7px;
  border-image-repeat:stretch;
  background:
   radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.7) 50%, transparent 51%),
   radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.5) 50%, transparent 51%),
   radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
   radial-gradient(1px 1px at 35% 78%, rgba(255,255,255,.4) 50%, transparent 51%),
   radial-gradient(1px 1px at 55% 42%, rgba(255,255,255,.5) 50%, transparent 51%),
   radial-gradient(ellipse at 50% 130%, #10102c 0%, var(--bg-void) 60%); }
.e2scope .planet { position:relative; width:clamp(104px, 17dvh, 165px); height:clamp(104px, 17dvh, 165px); border-radius:50%; transform:translateY(-9%); }
.e2scope .p-planeta { background:
   radial-gradient(circle at 62% 38%, rgba(52,211,153,.55) 0 7%, transparent 11%),
   radial-gradient(circle at 42% 60%, rgba(52,211,153,.45) 0 9%, transparent 14%),
   radial-gradient(circle at 56% 72%, rgba(52,211,153,.35) 0 5%, transparent 9%),
   radial-gradient(circle at 35% 30%, #7dd3fc 0%, #2563eb 42%, #0c4a6e 72%, #041e33 100%);
  box-shadow:inset -30px -22px 55px rgba(0,0,0,.8), 0 0 45px rgba(56,189,248,.22); }
.e2scope .p-luna { background:
   radial-gradient(circle at 60% 35%, rgba(0,0,0,.28) 0 6%, transparent 9%),
   radial-gradient(circle at 40% 55%, rgba(0,0,0,.32) 0 4%, transparent 7%),
   radial-gradient(circle at 66% 66%, rgba(0,0,0,.22) 0 5%, transparent 8%),
   radial-gradient(circle at 35% 30%, #cbd5e1 0%, #64748b 55%, #1e293b 100%);
  box-shadow:inset -30px -22px 55px rgba(0,0,0,.8), 0 0 30px rgba(148,163,184,.15); }
.e2scope .p-volcanico { background:
   radial-gradient(circle at 55% 62%, rgba(249,115,22,.85) 0 4%, transparent 8%),
   radial-gradient(circle at 40% 42%, rgba(251,146,60,.7) 0 3%, transparent 6%),
   radial-gradient(circle at 66% 32%, rgba(249,115,22,.6) 0 5%, transparent 9%),
   radial-gradient(circle at 35% 30%, #7f1d1d 0%, #450a0a 55%, #1c0505 100%);
  box-shadow:inset -30px -22px 55px rgba(0,0,0,.85), 0 0 50px rgba(249,115,22,.25); }
.e2scope .p-anomalia { background:radial-gradient(circle at 40% 35%, #e9d5ff 0%, #a855f7 35%, #4c1d95 70%, #1e1b4b 100%);
  box-shadow:inset -25px -18px 50px rgba(0,0,0,.6), 0 0 60px rgba(168,85,247,.45); animation:anompulse 3.5s ease-in-out infinite; }
@keyframes anompulse { 0%,100%{ box-shadow:inset -25px -18px 50px rgba(0,0,0,.6), 0 0 45px rgba(168,85,247,.35); } 50%{ box-shadow:inset -25px -18px 50px rgba(0,0,0,.6), 0 0 75px rgba(168,85,247,.6); } }
.e2scope .planet .lights { position:absolute; inset:0; border-radius:50%; background:
   radial-gradient(1.5px 1.5px at 68% 58%, rgba(253,224,71,.9) 50%, transparent 51%),
   radial-gradient(1.5px 1.5px at 72% 48%, rgba(253,224,71,.8) 50%, transparent 51%),
   radial-gradient(1.5px 1.5px at 62% 68%, rgba(253,224,71,.7) 50%, transparent 51%),
   radial-gradient(1.5px 1.5px at 76% 62%, rgba(253,224,71,.75) 50%, transparent 51%); }
.e2scope .orbit { position:absolute; inset:-16%; border-radius:50%; border:1px dashed rgba(var(--accent-rgb),.25); transform:rotateX(68deg); animation:orbitspin 26s linear infinite; }
@keyframes orbitspin { from{ transform:rotateX(68deg) rotateZ(0); } to{ transform:rotateX(68deg) rotateZ(360deg); } }
.e2scope .orbit i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px rgba(var(--accent-rgb),.8); }
.e2scope .orbit i:nth-child(1) { top:-3px; left:50%; }
.e2scope .orbit i:nth-child(2) { bottom:8%; left:6%; }
.e2scope .orbit i:nth-child(3) { top:20%; right:2%; }
.e2scope .rockfield { position:relative; width:220px; height:150px; }
@media (max-height:700px) {
  .e2scope .rockfield { transform:scale(.72); }
}
.e2scope .rock { position:absolute; background:radial-gradient(circle at 35% 30%, #94a3b8 0%, #475569 55%, #1e293b 100%); box-shadow:inset -8px -6px 14px rgba(0,0,0,.7); }
.e2scope .rock.r0 { width:84px; height:70px; left:62px; top:36px; border-radius:46% 54% 48% 52% / 55% 45% 55% 45%; }
.e2scope .rock.r1 { width:44px; height:38px; left:10px; top:22px; border-radius:55% 45% 50% 50% / 45% 55% 45% 55%; }
.e2scope .rock.r2 { width:34px; height:30px; right:18px; top:14px; border-radius:50% 50% 45% 55% / 55% 45% 55% 45%; }
.e2scope .rock.r3 { width:28px; height:24px; left:36px; bottom:8px; border-radius:48% 52% 55% 45%; }
.e2scope .rock.r4 { width:20px; height:18px; right:42px; bottom:18px; border-radius:52% 48% 45% 55%; }
.e2scope .megastation { position:absolute; top:72px; right:14px; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--cyan); text-shadow:0 0 8px rgba(var(--accent-rgb),.5); animation:floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* viewport camera toggle: orbit / surface corner buttons */
.e2scope .theater .vbtn { position:absolute; top:10px; z-index:3; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); background:rgba(6,6,15,.68); border:1px solid rgba(255,255,255,.2); border-radius:3px; padding:4px 9px; min-height:26px; cursor:pointer; }
.e2scope .theater .vbtn.vl { left:12px; }
.e2scope .theater .vbtn.vr { right:12px; }
.e2scope .theater .vbtn.on { color:var(--cyan); border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.16); }
/* development tier bar: one diegetic line (chip in orbit, in-legend on the feed) */
.e2scope .cth-dev { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:6px; padding:3px 9px; border-radius:3px; background:rgba(6,6,15,.68); border:1px solid rgba(255,255,255,.14); font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); white-space:nowrap; pointer-events:none; }
.e2scope .cth-dev-ico { width:10px; height:10px; flex:none; fill:rgba(var(--accent-rgb),.8); }
.e2scope .cth-dev-label { color:rgba(var(--accent-rgb),.75); }
.e2scope .cth-dev-tier { font-weight:700; color:#e2f6ff; }
.e2scope .cth-dev-next { color:rgba(255,255,255,.55); }
.e2scope .cth-dev-segs { display:flex; align-items:center; gap:2px; }
.e2scope .cth-dev-segs i { width:7px; height:8px; border:1px solid rgba(var(--accent-rgb),.45); background:transparent; transform:skewX(-12deg); }
.e2scope .cth-dev-segs i.on { background:rgba(var(--accent-rgb),.85); box-shadow:0 0 5px rgba(var(--accent-rgb),.5); }
.e2scope .cth-dev.near .cth-dev-segs i.on { animation:cthDevNear 1.6s ease-in-out infinite; }
@keyframes cthDevNear { 0%,100% { box-shadow:0 0 4px rgba(var(--accent-rgb),.45); } 50% { box-shadow:0 0 10px rgba(var(--accent-rgb),.85); } }
@media (max-width:560px) { .e2scope .cth-dev { gap:5px; padding:3px 7px; } .e2scope .cth-dev-label { display:none; } }
/* in-legend variant: the DEV-Tx tag rides the CAM/FEED line with its segments */
.e2scope .cth-dev.cth-dev-in { position:static; transform:none; background:none; border:none; padding:0; flex:none; display:inline-flex; gap:5px; letter-spacing:.08em; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.e2scope .cth-dev.cth-dev-in .cth-dev-sep { color:rgba(255,255,255,.85); }
.e2scope .cth-dev.cth-dev-in .cth-dev-segs i { width:5px; height:7px; }
@media (max-width:560px) { .e2scope .cth-dev.cth-dev-in { gap:4px; } .e2scope .cth-dev.cth-dev-in .cth-dev-ico { display:none; } .e2scope .cth-dev.cth-dev-in .cth-dev-segs i { width:4px; } }
/* surface view: orbital-feed art fills the theater frame */
.e2scope .theater .orbfeed.infeed { position:absolute; inset:0; height:auto; margin:0; border:none; border-radius:0; }
.e2scope .theater .orbfeed.infeed .otag { bottom:9px; left:12px; right:70px; display:flex; align-items:center; gap:6px; overflow:hidden; }
.e2scope .theater .orbfeed.infeed .otag .otag-txt { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e2scope .orbfeed .otag .otag-bal { margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
.e2scope .orbfeed .otag .otag-bal-chip { display:inline-flex; align-items:center; gap:3px; font-weight:700; }
.e2scope .orbfeed .otag .otag-bal-chip svg { width:12px; height:12px; flex:none; }
.e2scope .theater .orbfeed.infeed .orec { top:auto; bottom:9px; right:12px; }
/* Phones: the legend runs out of width and clips the feed label, so it
   reflows to two tight lines (label + tier, then the balance chips). */
@media (max-width:560px) {
  .e2scope .theater .orbfeed.infeed .otag { right:12px; flex-wrap:wrap; row-gap:2px; }
  .e2scope .theater .orbfeed.infeed .otag .otag-txt { flex:none; overflow:visible; }
  .e2scope .theater .orbfeed.infeed .otag .otag-bal { flex-basis:100%; margin-left:0; padding-right:58px; }
}
/* 3D theater canvas overlays the CSS fallback once live */
.e2scope .theater canvas.theater3d { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.e2scope .theater.live3d .planet, .e2scope .theater.live3d .rockfield { display:none; }
.e2scope .theater .theater-diorama-overlay {
  position:absolute; inset:0; pointer-events:none; z-index:2;
}
.e2scope .theater .theater-diorama-overlay .hangar3d-label {
  pointer-events:auto;
}
.e2scope .theater .megastation { z-index:2; }
/* ---- imperio: ficha + catalogo ---- */
.e2scope .comprow { display:flex; align-items:center; gap:7px; margin:4px 0; }
.e2scope .comprow .ci { width:16px; text-align:center; flex:none; }
.e2scope .comprow .cb { flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:2px; overflow:hidden; }
.e2scope .comprow .cb i { display:block; height:100%; }
.e2scope .comprow .cv { font-family:var(--font-mono); font-size:var(--e2-fs-meta); width:30px; text-align:right; color:var(--text-secondary); }
.e2scope .outrow { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--green); margin-top:8px; }
.e2scope .megaline { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:var(--e2-fs-meta); flex-wrap:wrap; }
.e2scope .megaline .mn { font-family:var(--font-display); font-size:var(--e2-fs-meta); color:var(--cyan); }
.e2scope .megaline .mb { font-size:var(--e2-fs-meta); color:var(--text-secondary); }
.e2scope .bdivider { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.12em; color:var(--text-dim); text-transform:uppercase; margin:14px 2px 4px; display:flex; align-items:center; gap:8px; }
.e2scope .bdivider::after { content:''; flex:1; height:1px; background:var(--bg-divider); }
.e2scope .blist { display:flex; flex-direction:column; }
.e2scope .brow { display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.1); cursor:pointer; --rarity-color:var(--rarity-comun); }
.e2scope .blist .brow:last-child, .e2scope .flist .brow:last-child { border-bottom:none; }
.e2scope .brow[data-rarity="rara"] { --rarity-color:var(--rarity-rara); }
.e2scope .brow[data-rarity="epica"] { --rarity-color:var(--rarity-epica); }
.e2scope .brow[data-rarity="legendaria"] { --rarity-color:var(--rarity-legendaria); }
.e2scope .brow.avail { background:rgba(var(--accent-rgb),.04); }
.e2scope .brow.locked { opacity:.5; }
.e2scope .brow.sel { background:rgba(var(--accent-rgb),.1); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.4); }
.e2scope .bwrap { position:relative; width:30px; height:30px; flex:none; }
.e2scope .bwrap .bdot { position:absolute; inset:2px; width:auto; height:auto; }
.e2scope .bwrap .bthumb { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 6px rgba(0,0,0,.5); }
.e2scope .bdot { width:26px; height:26px; border-radius:50%; flex:none; }
.e2scope .bdot.t-planeta { background:radial-gradient(circle at 35% 30%, #7dd3fc, #2563eb 60%, #0c4a6e); }
.e2scope .bdot.t-luna { background:radial-gradient(circle at 35% 30%, #cbd5e1, #64748b 60%, #1e293b); }
.e2scope .bdot.t-volcanico { background:radial-gradient(circle at 35% 30%, #fb923c, #7f1d1d 60%, #1c0505); }
.e2scope .bdot.t-anomalia { background:radial-gradient(circle at 40% 35%, #e9d5ff, #a855f7 45%, #4c1d95); box-shadow:0 0 8px rgba(168,85,247,.5); }
.e2scope .bdot.t-asteroide { border-radius:46% 54% 48% 52% / 55% 45% 55% 45%; background:radial-gradient(circle at 35% 30%, #94a3b8, #475569 55%, #1e293b); }
.e2scope .binfo { flex:1; min-width:0; }
.e2scope .binfo .n { display:block; font-family:var(--font-display); font-size:var(--e2-fs-title); font-weight:700; }
.e2scope .binfo .m { display:block; font-family:var(--font-mono); font-size:var(--e2-fs-micro); color:var(--text-secondary); text-transform:uppercase; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .binfo .m .ri { width:10px; height:10px; vertical-align:-1px; }
/* decision rows (C2S anatomy): big rarity-ringed thumb, consequence line, one action */
.e2scope .brow.bd { padding:10px 6px; }
.e2scope .brow.bd .bwrap { width:46px; height:46px; border-radius:50%; box-shadow:0 0 0 2px color-mix(in srgb, var(--rarity-color) 65%, transparent); }
.e2scope .brow.bd .bwrap .bdot { inset:3px; }
.e2scope .brow.bd > .bdot { width:40px; height:40px; box-shadow:0 0 0 2px color-mix(in srgb, var(--rarity-color) 65%, transparent); }
.e2scope .brow.bd .binfo .n { display:flex; align-items:center; gap:7px; min-width:0; }
.e2scope .brow.bd .binfo .n .clamp1 { flex:0 1 auto; min-width:0; }
.e2scope .btag { flex:0 30 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono); font-size:var(--e2-fs-micro); font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); padding:1px 6px; border:1px solid color-mix(in srgb, var(--rarity-color, var(--bg-divider)) 55%, transparent); border-radius:3px; white-space:nowrap; }
.e2scope .btag-system { color:#67e8f9; border-color:rgba(34,211,238,.42); background:rgba(8,47,73,.34); }
/* narrow phones: in detected rows the claim block leaves no room, the name wins */
@media (max-width: 479px) {
  .e2scope .brow.det .btag { display:none; }
}
.e2scope .binfo .big { display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; margin-top:3px; font-family:var(--font-mono); font-size:var(--e2-fs-body); color:var(--green); }
.e2scope .binfo .big .rt { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.e2scope .binfo .big .ri { width:14px; height:14px; }
.e2scope .binfo .big .wp, .e2scope .outrow .wp { font-family:var(--font-body); font-size:var(--e2-fs-meta); color:var(--text-secondary); }
.e2scope .btn.cta .ce { font-family:var(--font-mono); font-size:var(--e2-fs-micro); font-weight:400; color:var(--text-dim); text-transform:none; letter-spacing:0; }
.e2scope .btn.cta .ce.hot { color:var(--red); }
.e2scope .btn .cc .no { text-decoration:underline dotted; text-underline-offset:2px; }
.e2scope .bact { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; max-width:52%; }
.e2scope .bact .o { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--green); text-align:right; }
.e2scope .bact .mega { font-family:var(--font-mono); font-size:var(--e2-fs-micro); color:var(--cyan); }
.e2scope .bact .exp { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-dim); }
.e2scope .bact .exp.hot { color:var(--red); }
.e2scope .bact .lock { font-family:var(--font-mono); font-size:var(--e2-fs-micro); color:var(--text-dim); text-align:right; white-space:normal; }
.e2scope .btn.cta.claimbtn { min-width:110px; padding:5px 10px; }
.e2scope .scanline { display:flex; align-items:flex-end; gap:8px 12px; margin:4px 2px 8px; flex-wrap:wrap; }
.e2scope .scangauge { flex:1; min-width:150px; }
.e2scope .scangauge .sg { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-secondary); }
.e2scope .empstats { display:flex; flex-wrap:wrap; gap:14px; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-secondary); margin:6px 2px; }
.e2scope .empstats b { color:var(--text-primary); font-weight:400; }
/* ---- row-with-thumb (infra tracks, research, fleets) ---- */
.e2scope .rthumb { width:64px; height:64px; flex:none; object-fit:cover; border-radius:6px; background:rgba(var(--accent-rgb),.08); cursor:pointer; }
.e2scope .rthumb.r48 { width:48px; height:48px; object-fit:contain; cursor:default; padding:4px;
  background:color-mix(in srgb, var(--bc,#34d399) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bc,#34d399) 25%, transparent); }
.e2scope .binfo .m2 { display:block; font-size:var(--e2-fs-body); color:var(--text-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .brow.irow, .e2scope .brow.rrow { cursor:default; }
.e2scope .irow .binfo .m { white-space:normal; }
.e2scope .brow.done { opacity:.55; }
/* ---- classic cards: grid + era2 adapter bits over css/components/cards.css ---- */
.e2scope .cardgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:6px; }
@media (min-width:640px) {
  .e2scope .cardgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1000px) {
  .e2scope .cardgrid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
}
.e2scope .font-mono { font-family:var(--font-mono); }
.e2scope .building-card { cursor:pointer; }
.e2scope .building-card.done .card-art img { opacity:.5; filter:grayscale(.35) brightness(.75); }
.e2scope .building-card .bld-cost .ri { width:14px; height:14px; vertical-align:-3px; }
.e2scope .modal .runlock { font-weight:700; font-size:var(--e2-fs-body); line-height:1.3; margin:4px 0 2px; }
.e2scope .modal .rlore { font-style:italic; font-size:var(--e2-fs-meta); color:var(--text-dim); line-height:1.35; }
.e2scope .dact { margin-top:12px; }
.e2scope .dact .btn.cta { width:100%; }
/* ---- verbatim ports from the old game (buttons.css + base.css), untouched anatomy ---- */
/* upgrade CTA: cost rides inside the button */
.e2scope .btn.cta { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 12px; min-width:132px; }
.e2scope .btn.cta .cl { font-size:.8rem; }
.e2scope .btn.cta .cc { font-family:var(--font-mono); font-size:var(--e2-fs-meta); font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-secondary); }
.e2scope .btn.cta.ok { --bfr:linear-gradient(180deg, rgba(16,185,129,.75), rgba(16,185,129,.2) 45%, rgba(16,185,129,.5)); --bfill:linear-gradient(180deg, rgba(16,185,129,.2), rgba(6,10,18,.94) 62%); color:#6ee7b7; animation:e2pulse 2s infinite; }
.e2scope .btn.cta.ok .cc { color:#a7f3d0; }
.e2scope .btn.cta.dim { --bfr:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07) 45%, rgba(255,255,255,.14)); --bfill:rgba(12,13,26,.92); color:var(--text-secondary); }
@keyframes e2pulse { 0%,100% { filter:drop-shadow(0 0 3px rgba(16,185,129,.2)); } 50% { filter:drop-shadow(0 0 9px rgba(16,185,129,.5)); } }
/* ---- infra: master-detail (fixed hero + dense scrollable list) ---- */
.e2scope .infhero { position:relative; min-height:176px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:10px 12px; cursor:pointer;
  border:7px solid transparent;
  border-image-source:url('../../assets/ui/hud-frame.webp');
  border-image-slice:94; border-image-width:7px; border-image-repeat:stretch;
  background:rgba(8,10,18,.6); }
.e2scope .infhero .ihbg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.e2scope .infhero::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,6,15,.28) 0%, rgba(6,6,15,.64) 42%, rgba(6,6,15,.94) 100%); }
.e2scope .infhero > *:not(.ihbg) { position:relative; z-index:2; }
.e2scope .infhero .ihmore { position:absolute; top:6px; right:9px; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); background:rgba(6,6,15,.68); border-radius:3px; padding:2px 7px; }
.e2scope .infhero .ihk { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); }
.e2scope .infhero .iht { display:flex; align-items:center; gap:8px; min-width:0; font-family:var(--font-display); font-size:var(--e2-fs-h); font-weight:700; line-height:1.15; margin:2px 0; text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8); }
.e2scope .infhero .iht .clamp1 { min-width:0; }
.e2scope .ihlvl { flex:none; font-family:var(--font-mono); font-size:var(--e2-fs-meta); font-weight:400; color:var(--amber); border:1px solid rgba(245,158,11,.45); border-radius:2px; padding:0 6px; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.e2scope .infhero .ihstats { display:flex; flex-wrap:wrap; gap:2px 14px; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:#aeb9c9; text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); }
.e2scope .ihstat { white-space:nowrap; }
.e2scope .ihstat.wrap { white-space:normal; }
.e2scope .ihstat b { color:var(--green); font-weight:400; }
.e2scope .ihstat.cons b { color:var(--energy-color); }
.e2scope .ihstat.next b { color:var(--cyan); }
.e2scope .infhero .ihact { margin-top:8px; }
.e2scope .infhero .ihact .btn.cta { width:100%; }
.e2scope .ihtimer { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--amber); margin-top:5px; }
.e2scope .ichip { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--bg-divider); border-radius:2px; padding:2px 7px; white-space:nowrap; }
.e2scope .ichip.amber { color:var(--amber); border-color:rgba(245,158,11,.4); }
.e2scope .ichip.cyan { color:var(--cyan); border-color:rgba(var(--accent-rgb),.4); }
.e2scope .ichip.big { font-size:var(--e2-fs-meta); padding:6px 14px; background:rgba(12,13,26,.7); }
.e2scope .ihreq { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-height:44px; padding:6px 10px; border:1px solid rgba(245,158,11,.45); background:rgba(45,26,3,.72); border-radius:3px; cursor:pointer; }
.e2scope .ihreq .reqk { width:100%; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.e2scope .ihreq .reqn { flex:1; min-width:0; font-family:var(--font-display); font-size:var(--e2-fs-meta); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .reqgo { flex:none; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--cyan); white-space:nowrap; }
.e2scope .brow.irow2 { gap:10px; padding:8px 6px; min-height:64px; }
.e2scope .ithumb { position:relative; width:64px; height:64px; flex:none; border-radius:6px; overflow:hidden; background:rgba(var(--accent-rgb),.08); }
.e2scope .ithumb img { width:100%; height:100%; object-fit:cover; display:block; }
.e2scope .irow2 .binfo .n, .e2scope .drow .binfo .n { display:flex; align-items:center; gap:7px; min-width:0; }
.e2scope .irow2 .binfo .n .clamp1, .e2scope .drow .binfo .n .clamp1 { min-width:0; }
.e2scope .irow2 .irate { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--green); margin-top:3px; white-space:nowrap; }
.e2scope .irow2 .iact, .e2scope .drow .iact { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; max-width:52%; }
.e2scope .idelta { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--cyan); white-space:nowrap; }
.e2scope .btn.cta.ibtn { min-width:0; min-height:38px; padding:6px 14px; }
.e2scope .icost { font-family:var(--font-mono); font-size:var(--e2-fs-body); color:var(--text-secondary); white-space:nowrap; }
.e2scope .icost b { display:inline-flex; align-items:center; gap:2px; font-weight:400; }
.e2scope .icost .no, .e2scope .cost .no, .e2scope .btn .cc .no { color:#f87171; font-weight:700; }
.e2scope .brow.drow { cursor:pointer; }
.e2scope .drow .binfo .m2 { white-space:normal; }
.e2scope .drow .dstate { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; }
.e2scope .drow .dstate .ichip { white-space:normal; }
/* recommended: diagonal thumb ribbon (rows) + vertical edge band (hero), old-card look */
.e2scope .recdiag { position:absolute; left:-26%; top:50%; width:152%; margin-top:-9px; z-index:2; transform:rotate(-45deg); text-align:center;
  font-size:11.6px; font-weight:800; letter-spacing:0; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg, #059669, #10b981, #34d399, #10b981, #059669); background-size:300% 100%;
  padding:1px 0; text-shadow:0 1px 2px rgba(0,0,0,.55); box-shadow:0 0 8px rgba(16,185,129,.45);
  animation:rec-shimmer 3s ease-in-out infinite; }
.e2scope .infhero .recband { position:absolute; left:auto; right:0; top:30px; bottom:auto; z-index:2; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-size:var(--e2-fs-micro); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg, #059669, #10b981, #34d399, #10b981, #059669); background-size:300% 100%;
  border:1px solid rgba(52,211,153,.6); border-right:none; border-radius:4px 0 0 4px; padding:6px 4px;
  text-shadow:0 1px 2px rgba(0,0,0,.5); box-shadow:0 0 8px rgba(16,185,129,.4); animation:rec-shimmer 3s ease-in-out infinite; }
/* detail modal: chips + requisitos + per-level progression */
.e2scope .dchips { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 2px; }
.e2scope .dchip { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; text-transform:uppercase; padding:2px 9px; border-radius:10px; border:1px solid rgba(245,158,11,.55); color:var(--amber); background:rgba(6,6,15,.55); }
.e2scope .dchip.lvl { border-color:rgba(255,255,255,.3); color:var(--text-primary); }
.e2scope .dchip.rec { border-color:rgba(16,185,129,.6); color:#34d399; }
.e2scope .modal .rlore { margin-top:8px; }
.e2scope .reqrow { display:flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; padding:6px 10px; border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.07); border-radius:3px; cursor:pointer; }
.e2scope .reqrow.ok { border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.06); cursor:default; }
.e2scope .reqrow .reqn { flex:1; min-width:0; font-family:var(--font-display); font-size:var(--e2-fs-meta); font-weight:700; }
.e2scope .ptable { margin-top:6px; border:1px solid var(--bg-divider); border-radius:3px; overflow-x:auto; }
.e2scope .pt-r { display:grid; grid-template-columns:28px minmax(96px,1.15fr) minmax(66px,.85fr) minmax(78px,1fr); gap:5px; align-items:center; min-width:284px; padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.05); font-size:var(--e2-fs-micro); white-space:nowrap; }
.e2scope .pt-r .pt-cons { white-space:normal; }
.e2scope .pt-r:last-child { border-bottom:none; }
.e2scope .pt-head { color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.e2scope .pt-r .pt-lvl { color:var(--text-secondary); }
.e2scope .pt-r .pt-cost { color:var(--text-secondary); }
.e2scope .pt-r .pt-cons { color:var(--energy-color); }
.e2scope .pt-r .pt-rate { color:var(--green); text-align:right; }
.e2scope .pt-r.cur { background:rgba(var(--accent-rgb),.14); box-shadow:inset 2px 0 0 var(--cyan); }
.e2scope .pt-r.cur .pt-lvl { color:var(--cyan); }
.e2scope .pt-r.nxt { background:rgba(16,185,129,.09); box-shadow:inset 2px 0 0 #10b981; }
.e2scope .pt-r.lkd { opacity:.45; }
.e2scope .t2tag { font-style:normal; color:var(--amber); margin-left:3px; }
/* research progression variant: step | cost | unlocks */
.e2scope .pt-r.rt3 { grid-template-columns:24px 88px 1fr; min-width:0; white-space:normal; }
.e2scope .pt-r.rt3 .pt-lvl { text-align:center; }
.e2scope .pt-r.rt3 .pt-cost { white-space:nowrap; }
.e2scope .pt-r.rt3 .pt-un { color:var(--text-secondary); line-height:1.35; }
.e2scope .pt-r.rt3 .pt-un b { color:var(--text-primary); font-weight:700; }
.e2scope .pt-r.rt3.dn { opacity:.55; }
.e2scope .pt-r.rt3.dn .pt-lvl { color:var(--green); }
@media (min-width:900px) {
  .e2scope .infhero { min-height:340px; }
}
/* ---- ciencia: fixed active banner + scroll ---- */
.e2scope .ribanner { display:flex; align-items:center; gap:10px; min-height:64px; background:var(--bg-panel); border:1px solid color-mix(in srgb, var(--bc,#8b5cf6) 30%, var(--bg-divider)); border-radius:6px; padding:8px 10px; }
.e2scope .ribanner.empty { justify-content:center; }
.e2scope .upkeep { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--energy-color); }
/* ---- user menu dropdown ---- */
.e2scope .umenu-wrap { position:fixed; inset:0; z-index:94; background:rgba(3,3,10,.45); }
.e2scope .umenu { position:absolute; top:8px; right:8px; width:min(272px, calc(100vw - 16px)); max-height:calc(100dvh - 24px); overflow-y:auto; background:var(--bg-panel); border:1px solid rgba(var(--accent-rgb),.35); border-radius:6px; padding:14px; box-shadow:0 10px 40px rgba(0,0,0,.6); animation:tin .2s ease; }
.e2scope .umenu .uname { font-family:var(--font-display); font-size:var(--e2-fs-h); font-weight:700; color:var(--cyan); margin-bottom:10px; }
.e2scope .umenu .mrowbtn { display:flex; align-items:center; gap:8px; width:100%; margin-top:6px; background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.3); color:var(--cyan); font-family:var(--font-display); font-size:var(--e2-fs-meta); font-weight:600; letter-spacing:.08em; text-transform:uppercase; min-height:42px; padding:8px 12px; border-radius:4px; }
.e2scope .umenu .mrowbtn .tic { width:15px; height:15px; }
.e2scope .umenu .unote { font-size:var(--e2-fs-micro); color:var(--text-dim); margin:5px 2px 2px; }
.e2scope .umenu .usep { height:1px; background:var(--bg-divider); margin:12px 0 4px; }
.e2scope .umenu .urow { display:flex; align-items:center; gap:10px; margin-top:10px; }
.e2scope .umenu .ulabel { flex:none; width:64px; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); }
.e2scope .umenu .thset { display:flex; gap:10px; align-items:center; }
.e2scope .thdot { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.e2scope .thdot.th-void { background:#00f0ff; }
.e2scope .thdot.th-nebula { background:#8b5cf6; }
.e2scope .thdot.th-solar { background:#f59e0b; }
.e2scope .thdot.active { box-shadow:0 0 0 2px var(--bg-panel), 0 0 0 4px currentColor; border-color:var(--bg-panel); }
.e2scope .thdot.th-void.active { color:#00f0ff; }
.e2scope .thdot.th-nebula.active { color:#8b5cf6; }
.e2scope .thdot.th-solar.active { color:#f59e0b; }
.e2scope .umenu .mutebtn { flex:none; background:none; border:1px solid var(--bg-divider); border-radius:3px; min-width:34px; min-height:30px; font-size:.85rem; cursor:pointer; opacity:.55; }
.e2scope .umenu .mutebtn.on { opacity:1; border-color:rgba(var(--accent-rgb),.35); }
.e2scope .umenu .uslider { flex:1; min-width:0; accent-color:var(--cyan); }
.e2scope .umenu .langbtn { background:none; border:1px solid transparent; border-radius:4px; font-size:1.15rem; padding:2px 7px; cursor:pointer; opacity:.55; }
.e2scope .umenu .langbtn.active { opacity:1; border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.1); }
.e2scope .umenu .ulogout { display:block; margin-top:10px; background:none; border:none; color:#f87171; font-size:var(--e2-fs-body); padding:6px 2px; cursor:pointer; }
.e2scope .umenu .uver { margin-top:8px; text-align:center; font-family:var(--font-mono); font-size:var(--e2-fs-micro); color:var(--text-dim); opacity:.7; }
/* ---- commander report overlay ---- */
.e2scope.cmdrep { position:fixed; inset:0; z-index:96; background:rgba(3,3,10,.95); display:flex; align-items:center; justify-content:center; padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom)); animation:tin .3s ease; }
.e2scope .repbox { width:min(430px,100%); max-height:88vh; overflow-y:auto; text-align:center; }
/* offline recap: cap height to the viewport, scroll the middle, pin CONTINUAR */
.e2scope .repbox.repbox-scroll { display:flex; flex-direction:column; max-height:min(88vh,calc(100dvh - 40px)); overflow:hidden; }
.e2scope .repbox.repbox-scroll > .rept, .e2scope .repbox.repbox-scroll > .reps, .e2scope .repbox.repbox-scroll > .repgo { flex:none; }
.e2scope .repscroll { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.e2scope .repbox.repbox-scroll .btn.repgo { margin-top:14px; }
.e2scope .rept { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--cyan); text-shadow:0 0 18px rgba(var(--accent-rgb),.6); }
.e2scope .reps { margin-top:6px; color:var(--text-secondary); font-size:var(--e2-fs-body); }
.e2scope .repsec { margin:18px 0 4px; text-align:left; font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--bg-divider); padding-bottom:5px; }
.e2scope .reprow { display:flex; align-items:center; gap:10px; background:var(--bg-panel); border:1px solid var(--bg-divider); border-radius:4px; padding:7px 10px; margin-top:6px; }
.e2scope .repimg { width:40px; height:40px; border-radius:4px; object-fit:cover; flex:none; }
.e2scope .replabel { flex:1; min-width:0; text-align:left; font-size:var(--e2-fs-body); }
.e2scope .repval { font-family:var(--font-mono); font-size:var(--e2-fs-title); white-space:nowrap; }
.e2scope .reprow.evt .repval { font-size:var(--e2-fs-meta); }
.e2scope .btn.repgo { margin-top:20px; min-width:180px; }
.e2scope .repfooter { margin-top:16px; display:flex; flex-direction:column; gap:8px; text-align:left; }
@media (max-width:560px){
  .e2scope .repbox.repbox-scroll .rept { font-size:1.2rem; }
  .e2scope .repbox.repbox-scroll .repsec { margin:12px 0 4px; }
  .e2scope .repbox.repbox-scroll .reprow { padding:6px 9px; margin-top:5px; }
  .e2scope .repbox.repbox-scroll .repimg { width:34px; height:34px; }
  .e2scope .repbox.repbox-scroll .btn.repgo { margin-top:10px; }
}
.e2scope .reprow.rep-link { cursor:pointer; }
.e2scope .reprow.rep-link:hover { border-color:rgba(var(--accent-rgb),.35); }
.e2scope .repact { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); white-space:nowrap; }
.e2scope .reprow.rep-daily { border-color:rgba(251,191,36,.55); background:rgba(69,55,10,.35); }
.e2scope .rep-daily-cta { color:#fcd34d; }
.e2scope .rep-empty { margin:16px 0; color:var(--text-dim); font-size:var(--e2-fs-body); }
/* Season end (Gran Ciclo): Ocaso cinematic + persistent bar + Legacy claim. */
.e2scope.kc-ocaso-modal { position:fixed; inset:0; z-index:97; background:#020208; display:flex; align-items:center; justify-content:center; animation:tin .4s ease;
  padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
/* The hero never joins the flow, so it can never push the button off-screen. */
.kc-ocaso-modal .ocaso-hero { position:absolute; inset:0; background-size:cover; background-position:center; }
.kc-ocaso-modal .ocaso-hero[data-vc="domination"] { background-image:url(../../assets/backgrounds/hero_victory_domination.webp); }
.kc-ocaso-modal .ocaso-hero[data-vc="economic"]   { background-image:url(../../assets/backgrounds/hero_victory_economic.webp); }
.kc-ocaso-modal .ocaso-hero[data-vc="scientist"]  { background-image:url(../../assets/backgrounds/hero_victory_scientist.webp); }
@media (orientation:portrait) {
  .kc-ocaso-modal .ocaso-hero[data-vc="domination"] { background-image:url(../../assets/backgrounds/hero_victory_domination_portrait.webp); }
  .kc-ocaso-modal .ocaso-hero[data-vc="economic"]   { background-image:url(../../assets/backgrounds/hero_victory_economic_portrait.webp); }
  .kc-ocaso-modal .ocaso-hero[data-vc="scientist"]  { background-image:url(../../assets/backgrounds/hero_victory_scientist_portrait.webp); }
}
/* Readability panel behind the copy, not a flat wash over the whole hero. */
.kc-ocaso-modal .ocaso-veil { position:absolute; inset:0;
  background:radial-gradient(ellipse 78% 46% at 50% 52%, rgba(2,2,8,.93) 0%, rgba(2,2,8,.80) 55%, rgba(2,2,8,.30) 100%); }
.kc-ocaso-modal .ocaso-box { position:relative; width:min(440px,100%); max-height:100%; text-align:center;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; }
.kc-ocaso-modal .ocaso-copy { min-height:0; overflow-y:auto; overscroll-behavior:contain; align-self:center; }
.kc-ocaso-modal .ocaso-kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-secondary); }
.kc-ocaso-modal .ocaso-title { margin-top:10px; font-family:var(--font-display); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:700; color:var(--cyan); text-shadow:0 2px 18px #000, 0 0 22px rgba(var(--accent-rgb),.55); }
.kc-ocaso-modal.is-winner .ocaso-title { color:#fcd34d; text-shadow:0 2px 18px #000, 0 0 22px rgba(252,211,77,.5); }
.kc-ocaso-modal .ocaso-medal { margin-bottom:10px; }
/* The badge art ships on its own dark plate; feather it so it does not read
   as a pasted square over the hero. */
.kc-ocaso-modal .ocaso-medal img { width:clamp(96px,26vw,148px); height:auto;
  -webkit-mask-image:radial-gradient(circle at 50% 48%, #000 54%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 48%, #000 54%, transparent 72%);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.85)); }
.kc-ocaso-modal .ocaso-medal-label { margin-top:4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#fcd34d; text-shadow:0 1px 8px #000; }
.kc-ocaso-modal .ocaso-line { margin-top:12px; color:#e6edf7; font-size:15px; line-height:1.5; text-shadow:0 1px 10px #000; }
.kc-ocaso-modal .ocaso-count { font-size:14px; color:var(--cyan); text-shadow:0 1px 10px #000; }
.kc-ocaso-modal .ocaso-sub { margin-top:10px; color:var(--text-secondary); font-size:12.5px; text-shadow:0 1px 10px #000; }
.kc-ocaso-modal .ocaso-foot { display:flex; flex-direction:column; gap:10px; align-items:center; }
.kc-ocaso-modal .ocaso-nav { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; flex-wrap:wrap; }
.kc-ocaso-modal .ocaso-dots { display:flex; gap:6px; align-items:center; flex:1 0 100%; justify-content:center; }
.kc-ocaso-modal .ocaso-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); }
.kc-ocaso-modal .ocaso-dot.on { background:var(--cyan); }
.kc-ocaso-modal.is-winner .ocaso-dot.on { background:#fcd34d; }
.kc-ocaso-modal .ocaso-next { flex:1 1 auto; max-width:220px; min-height:44px; }
.kc-ocaso-modal .ocaso-skip { flex:0 0 auto; min-height:44px; padding:6px 14px; font-size:12px; opacity:.75; }
.kc-ocaso-modal .ocaso-chart { width:100%; margin-top:12px; }
.kc-ocaso-modal .ocaso-chart canvas { display:block; width:100%; height:150px; }
.kc-ocaso-modal .ocaso-keys { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:6px;
  font-size:11.5px; color:var(--text-secondary); }
.kc-ocaso-modal .ocaso-key { display:inline-flex; align-items:center; gap:5px; }
.kc-ocaso-modal .ocaso-swatch { flex:none; }
.kc-ocaso-modal .ocaso-key-gap { flex-basis:100%; justify-content:center; align-items:flex-start; margin-top:2px; color:var(--text-dim); }
.kc-ocaso-modal .ocaso-stats { margin-top:10px; font-size:12px; color:var(--text-secondary); text-shadow:0 1px 10px #000; }
.kc-ocaso-modal .ocaso-legacy { margin:12px auto 0; padding:0; list-style:none; text-align:left; max-width:340px;
  display:flex; flex-direction:column; gap:7px; }
.kc-ocaso-modal .ocaso-legacy li { position:relative; padding-left:16px; font-size:13px; line-height:1.4; color:#e6edf7; text-shadow:0 1px 10px #000; }
.kc-ocaso-modal .ocaso-legacy li::before { content:'+'; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700; }
.kc-ocaso-modal.is-winner .ocaso-legacy li::before { color:#fcd34d; }
.kc-ocaso-modal .ocaso-legacy li.gone { color:var(--text-secondary); }
.kc-ocaso-modal .ocaso-legacy li.gone::before { content:'\2212'; color:var(--text-dim); font-weight:400; }
@media (max-height:620px) {
  .kc-ocaso-modal .ocaso-title { font-size:1.5rem; margin-top:4px; }
  .kc-ocaso-modal .ocaso-medal img { width:72px; }
  .kc-ocaso-modal .ocaso-chart canvas { height:110px; }
}
@media (prefers-reduced-motion: reduce) {
  .e2scope.kc-ocaso-modal { animation:none; }
}
.e2scope.kc-ocaso-bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 8px; width:100%; flex:none; min-height:36px; padding:8px 12px; background:rgba(50,18,8,.92); border:none; border-bottom:1px solid rgba(255,140,80,.4); color:#ffd9b5; font-size:12.5px; line-height:1.35; text-align:center; cursor:pointer; }
.kc-ocaso-bar .ob-count { color:#ffb277; white-space:nowrap; font-variant-numeric:tabular-nums; }
.e2scope.kc-victory-bar { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; flex:none; min-height:36px; padding:8px 34px 8px 12px; position:relative; contain:layout; background:rgba(8,26,48,.92); border-bottom:1px solid rgba(120,190,255,.45); color:#cfe8ff; font-size:12.5px; line-height:1.35; cursor:pointer; }
.e2scope.kc-victory-bar::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 30%, rgba(255,209,102,.16)); opacity:.2; animation:kcVbGlow 2.6s ease-in-out infinite; }
.kc-victory-bar .vb-pulse { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#ffd166; animation:kcVbPulse 1.6s ease-in-out infinite; }
.kc-victory-bar .vb-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kc-victory-bar .vb-count { color:#ffd166; min-width:8ch; text-align:right; font-variant-numeric:tabular-nums; }
.kc-victory-bar .vb-close { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; color:#9fc5e8; font-size:17px; line-height:1; padding:2px 8px; cursor:pointer; }
@keyframes kcVbPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.6); opacity:.45; } }
@keyframes kcVbGlow { 0%,100% { opacity:.2; } 50% { opacity:1; } }
.e2scope.kc-legacy-modal { position:fixed; inset:0; z-index:97; background:rgba(2,2,8,.94); display:flex; align-items:center; justify-content:center; padding:20px; animation:tin .3s ease; }
.kc-legacy-modal .legacy-box { width:min(420px,100%); text-align:center; }
.kc-legacy-modal .legacy-title { margin-top:8px; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:#fcd34d; }
.kc-legacy-modal .legacy-sub { margin-top:8px; color:var(--text-secondary); font-size:13.5px; }
.kc-legacy-modal .legacy-grid { margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.kc-legacy-modal .legacy-branch.sel { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 10px rgba(var(--accent-rgb),.3) inset; }
.kc-legacy-modal .legacy-branch.sel::before { content:'\2713 '; font-weight:700; }
.kc-legacy-modal .legacy-apply { margin-top:18px; min-width:200px; }

/* ---- header daily claim chip ---- */
.e2scope.kc-ehdr .epill.bonuspill { border-color:rgba(251,191,36,.65); color:#fcd34d; background:rgba(69,55,10,.45); cursor:pointer; position:relative;
  min-height:44px; padding:4px 10px; font-size:max(11.5px, var(--e2-fs-meta)); font-weight:600; letter-spacing:.06em; }
.e2scope.kc-ehdr .epill.bonuspill[hidden] { display:none; }
.e2scope.kc-ehdr .epill.bonuspill .bic { font-size:1rem; line-height:1; }
.e2scope.kc-ehdr .epill.bonuspill::after { content:''; position:absolute; inset:-6px -4px; }
.e2scope.kc-ehdr .epill.warpill { border-color:rgba(239,68,68,.7); color:#fca5a5; background:rgba(69,10,10,.5); cursor:pointer; position:relative; }
.e2scope.kc-ehdr .epill.warpill[hidden] { display:none; }
.e2scope.kc-ehdr .epill.warpill .wic { font-size:0.95rem; line-height:1; }
/* ---- toasts / gate ---- */
@keyframes tin { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
/* ---- feed: fixed subtabs + pinned incoming, cards scroll ---- */
.e2scope .subtabs { display:flex; gap:6px; margin-bottom:8px; }
.e2scope .subtabs .tab { min-height:32px; position:relative; }
/* Invisible hit-area extension: >=44px touch target without visual change */
.e2scope .subtabs .tab::after { content:''; position:absolute; inset:-6px 0; }
.subtabs.surface-switch { width:100%; }
.subtabs.surface-switch .tab { flex:1 1 0; min-height:36px; min-width:0; padding:5px 6px; position:relative; display:flex; align-items:center; justify-content:center; }
.subtabs.surface-switch .tab:has(.badge:not([hidden])) { padding-right:22px; }
/* Ahora categories: 2px slack so the fitted label never paints on the clip edge */
#feed-cat-tabs .tab span.fit-text { max-width:calc(100% - 2px); }
.subtabs.surface-switch .tab span.fit-text { text-transform:none; font-family:var(--font-body); font-weight:600; font-size:var(--e2-fs-micro); max-width:100%; white-space:nowrap; overflow:hidden; }
.subtabs.surface-switch .tab .badge { position:absolute; top:3px; right:3px; min-width:15px; height:15px; padding:0 4px; font-size:10px; line-height:15px; border-radius:8px; margin:0; }
.subtabs.surface-switch .tab .badge.threat { background:var(--red); color:#fff; }
.subtabs.surface-switch .tab .badge[hidden] { display:none; }
.e2scope .feed-subpane[hidden] { display:none; }
/* Ahora v2: transit strip + category tabs pinned, one scroll region */
body.kc-shell #screen-feed.active {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding:0;
}
body.kc-shell #screen-feed .feed-shell {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
body.kc-shell #screen-feed .feed-empty {
  text-align:center;
  padding:28px 12px 12px;
  font-size:var(--e2-fs-body);
}
/* Propuestas: compact actionable rows; the hero art lives on the band */
.e2scope .frowlist { display:flex; flex-direction:column; gap:8px; }
.e2scope .frow2 { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:4px; min-height:64px;
  background:var(--bg-surface); border:1px solid rgba(255,255,255,.1); cursor:pointer; }
.e2scope .frow2.sel { border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3) inset; }
.e2scope .frow2-sub .ftype { display:inline-flex; align-items:center; gap:3px; vertical-align:-2px; min-width:0;
  font-size:9.5px; letter-spacing:.06em; padding:1px 5px; }
.e2scope .frow2-sub .ftype svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; flex:none; }
.e2scope .frow2-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.e2scope .frow2-title { font-size:15px; line-height:1.25; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .frow2-sub { font-size:12.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:clip; }
.e2scope .frow2-sub .fres { display:inline-flex; align-items:center; gap:2px; vertical-align:-2px; color:var(--text-primary); }
.e2scope .frow2-sub .fres .cost-icon { width:11px; height:11px; flex:none; }
.e2scope .frow2-sub .fres-charge { color:#fbbf24; font-weight:700; }
.e2scope .frow2-actions { flex:none; display:flex; gap:6px; }
.e2scope .frow2-btn { min-height:32px; padding:4px 10px; font-size:11.5px; }
.e2scope .frow2-btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; vertical-align:-2px; margin-right:4px; }
.e2scope .frow2-btn-x { min-width:32px; padding:4px 8px; font-size:16px; line-height:1; }
/* Phones: wrap Propuestas action buttons to their own line so full labels fit */
@media (max-width:560px) {
  .e2scope .frow2 { flex-wrap:wrap; }
  .e2scope .frow2-actions { flex:1 0 100%; justify-content:flex-end; }
}
/* Ahora registry: compact rows (icon + line + time), title up to 2 lines */
.e2scope .frow3 { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:4px; min-height:40px;
  background:var(--bg-surface); border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.e2scope .frow3:focus-visible { outline:2px solid rgba(var(--accent-rgb),.55); outline-offset:1px; }
.e2scope .feed-reg-list { gap:5px; }
.e2scope .frow3-ico { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:4px; border:1px solid; background:rgba(255,255,255,.03); }
.e2scope .frow3-ico svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.e2scope .frow3-ico.exped { color:#7dd3fc; border-color:rgba(125,211,252,.4); }
.e2scope .frow3-ico.deal { color:#86efac; border-color:rgba(134,239,172,.4); }
.e2scope .frow3-ico.threat { color:#fca5a5; border-color:rgba(252,165,165,.4); }
.e2scope .frow3-ico.contested { color:#d8b4fe; border-color:rgba(216,180,254,.45); }
/* Image thumb variant: related art (colony/fleet/report) fills the tint ring;
   the glyph stays as the fallback if the image fails to load. */
.e2scope .frow3-ico--img { overflow:hidden; background:rgba(0,0,0,.25); }
.e2scope .frow3-ico-img { width:100%; height:100%; object-fit:cover; border-radius:3px; display:block; }
.e2scope .frow3-ico-img + svg { display:none; }
.e2scope .frow3-title { flex:1; min-width:0; font-size:13.5px; line-height:1.25; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.e2scope .frow3-when { flex:none; font-size:11px; color:var(--text-dim); white-space:nowrap; }
.e2scope .frow3-eta { flex:none; font-size:13px; font-weight:700; color:var(--text-secondary);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.e2scope .frow3-seal { flex:none; display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 5px; border-radius:2px; border:1px solid; }
.e2scope .frow3-seal i { font-style:normal; font-weight:700; }
.e2scope .frow3-seal.ok { color:#86efac; border-color:rgba(134,239,172,.4); }
.e2scope .frow3-seal.fail { color:#fca5a5; border-color:rgba(252,165,165,.4); }
.e2scope .frow3-seal.dim { color:var(--text-dim); border-color:rgba(255,255,255,.18); }
.e2scope .frow3-x { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px; padding:0 6px; line-height:1;
  color:var(--text-dim); background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:4px; cursor:pointer; }
.e2scope .frow3-x svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.e2scope .frow3-x:hover { color:var(--text-primary); border-color:rgba(255,255,255,.35); }
.e2scope .frow3-act { flex:none; padding:3px 8px; font-size:11px; font-weight:600; white-space:nowrap;
  color:var(--cyan); background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.40);
  border-radius:4px; cursor:pointer; }
.e2scope .frow3-act:hover { background:rgba(var(--accent-rgb),.22); border-color:rgba(var(--accent-rgb),.6); }
/* Novelty rows (new since the category was last opened): subtle tint plus
   a dot marker before the icon - shape + tint, never color alone */
.e2scope .frow3-new { border-color:rgba(var(--accent-rgb),.30);
  background:linear-gradient(150deg, rgba(var(--accent-rgb),.09), var(--bg-surface) 60%); }
.e2scope .frow3-new::before { content:''; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px rgba(var(--accent-rgb),.75); }
/* Upcoming rows: slightly lifted so the "about to happen" block reads live */
.e2scope .frow3-up { border-color:rgba(var(--accent-rgb),.28); }
.e2scope .frow3-up .frow3-eta { color:var(--cyan); }
.e2scope .frow3-imminent { flex:none; font-family:var(--font-mono); font-size:9px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:1px 6px; border-radius:3px;
  background:rgba(255,58,58,.92); box-shadow:0 0 8px 1px rgba(255,58,58,.6);
  animation:kc-threat-tag-blink .9s steps(1) infinite; }
@keyframes kc-threat-tag-blink { 50% { opacity:.4; } }
/* Threat severity: urgency carried by the IMMINENT tag + pulse speed, not hue alone */
.e2scope .frow3-threat { border-color:rgba(255,58,58,.35); background:linear-gradient(150deg, rgba(46,14,18,.5), var(--bg-surface)); }
.e2scope .frow3-threat .frow3-eta { color:#ffd98a; }
.e2scope .frow3-sev-approaching { animation:kc-threat-row-med 2.2s ease-in-out infinite; }
.e2scope .frow3-sev-approaching .frow3-eta { color:#ffab5e; }
.e2scope .frow3-sev-imminent { border-color:rgba(255,58,58,.85); animation:kc-threat-row-fast .85s ease-in-out infinite; }
.e2scope .frow3-sev-imminent .frow3-eta, .e2scope .frow3-impact .frow3-eta { color:#ff5a5a; }
@keyframes kc-threat-row-med {
  0%, 100% { box-shadow:0 0 0 0 rgba(251,146,60,0); }
  50%      { box-shadow:0 0 10px 1px rgba(251,146,60,.3); }
}
@keyframes kc-threat-row-fast {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,58,58,0); }
  50%      { box-shadow:0 0 14px 2px rgba(255,58,58,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .e2scope .frow3-imminent,
  .e2scope .frow3-sev-approaching,
  .e2scope .frow3-sev-imminent { animation:none !important; }
}
.e2scope .ftype { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; padding:2px 7px; border-radius:2px; text-transform:uppercase; border:1px solid; }
.e2scope .ftype.exped { color:#7dd3fc; border-color:rgba(125,211,252,.4); }
.e2scope .ftype.deal { color:#86efac; border-color:rgba(134,239,172,.4); }
.e2scope .ftype.threat { color:#fca5a5; border-color:rgba(252,165,165,.4); }
.e2scope .ftype.inc { color:#fecaca; border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.12); }
.e2scope .ftype.contested { color:#d8b4fe; border-color:rgba(216,180,254,.45); }
.e2scope .btn.warn { --bfr:linear-gradient(180deg, rgba(245,158,11,.7), rgba(245,158,11,.18) 45%, rgba(245,158,11,.48)); --bfill:linear-gradient(180deg, rgba(245,158,11,.14), rgba(9,11,24,.94) 62%); color:var(--amber); }
.e2scope .roster { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.e2scope .postures { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.e2scope .postures .btn.sel2 { --bfill:rgba(var(--accent-rgb),.26); color:var(--cyan); }
/* ---- flotas rows ---- */
.e2scope .rthumb.r40 { width:40px; height:40px; cursor:default; }
.e2scope .frow { align-items:flex-start; cursor:default; }
.e2scope .frow .rthumb { margin-top:2px; cursor:default; }
.e2scope .frow .flvl { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--cyan); font-weight:400; margin-left:6px; white-space:nowrap; }
.e2scope .dim2 { color:var(--text-dim); }
.e2scope .frow .fstatus { display:block; margin-top:6px; }
.e2scope .frow .iup { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.e2scope .mrow.withart { display:flex; gap:10px; align-items:center; }
.e2scope .mrow.withart .mgrow { flex:1; min-width:0; }
.e2scope .mrow.withart .md { margin-bottom:0; }
.e2scope .fexp { font-family:var(--font-mono); font-size:var(--e2-fs-meta); color:var(--text-dim); white-space:nowrap; }
.e2scope .fexp.hot { color:var(--red); }
.e2scope .freq { font-size:var(--e2-fs-body); margin:2px 0; }
.e2scope .frew { font-size:var(--e2-fs-body); color:var(--text-secondary); margin:6px 0 8px; }
.e2scope .factions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.e2scope .factions .btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; vertical-align:-2px; margin-right:4px; }
/* ---- modal ---- */
.e2scope .modal { width:min(460px,100%); max-height:82vh; overflow:auto; background:var(--bg-panel); border:1px solid rgba(var(--accent-rgb),.35); border-radius:3px; padding:14px; }
.e2scope .modal h3 { font-family:var(--font-display); font-size:var(--e2-fs-h); letter-spacing:.08em; margin-bottom:10px; color:var(--cyan); }
.e2scope .mrow { background:var(--bg-surface); border:1px solid var(--bg-divider); border-radius:3px; padding:10px; margin-bottom:8px; }
.e2scope .mrow .mn { font-family:var(--font-display); font-size:var(--e2-fs-title); font-weight:700; }
.e2scope .mrow .md { font-size:var(--e2-fs-body); color:var(--text-secondary); margin:4px 0 8px; }
/* ---- hero-detail modal (signature frame + scrimmed art) ---- */
.e2scope .modal.framed { border:7px solid transparent;
  border-image-source:url('../../assets/ui/hud-frame.webp');
  border-image-slice:94;
  border-image-width:7px;
  border-image-repeat:stretch;
  background-color:var(--bg-panel); }
.e2scope .herod { position:relative; overflow:hidden; border-radius:2px; margin:-4px -4px 0; padding:12px; }
.e2scope .herod .hbg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.e2scope .herod::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,6,15,.25) 0%, rgba(6,6,15,.72) 46%, rgba(6,6,15,.94) 100%); }
.e2scope .herod > *:not(.hbg) { position:relative; z-index:2; }
.e2scope .herod .hk { font-family:var(--font-mono); font-size:var(--e2-fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
.e2scope .herod .ht { font-family:var(--font-display); font-size:1.3rem; font-weight:700; line-height:1.12; margin:4px 0 6px; }
.e2scope .herod .hcopy { font-size:var(--e2-fs-body); color:var(--text-secondary); line-height:1.5; margin:4px 0; }
.e2scope .herod.tall { min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; }

/* ============================================================
   Era 1.5 F0 glue (live game only, not part of the era2 lift):
   empire header container, breakdown popover, command-tab badges,
   topbar KC wordmark.
   ============================================================ */
.e2scope.kc-ehdr { display:block; position:relative; background:var(--bg-void); border-bottom:1px solid rgba(var(--accent-rgb),.14); }
.e2scope.kc-ehdr[hidden] { display:none; }
.e2scope.kc-ehdr .hero { padding:3px 10px 2px; }
.e2scope.kc-ehdr .hgrp { cursor:pointer; }
/* pool strip: its own row under the main ribbon, Imperio surface only */
.e2scope.kc-poolstrip { display:block; position:relative; background:var(--bg-void); border-bottom:1px solid rgba(var(--accent-rgb),.14); }
.e2scope.kc-poolstrip[hidden] { display:none; }
.e2scope.kc-poolstrip .rchip { cursor:pointer; font:inherit; color:inherit; text-align:left; }
/* F2a: warnings are a compact chip on the hero row; full text in the popover */
.e2scope.kc-ehdr .epill.warnpill { border-color:rgba(239,68,68,.6); color:#fca5a5; background:rgba(69,10,10,.5);
  cursor:pointer; font-family:var(--font-mono); font-size:var(--e2-fs-meta); position:relative; }
.e2scope.kc-ehdr .epill.warnpill[hidden] { display:none; }
.e2scope.kc-ehdr .epill.warnpill .wic { font-size:.8rem; line-height:1; }
.e2scope.kc-ehdr .epill.warnpill::after { content:''; position:absolute; inset:-8px -4px; }
.e2scope .ehdr-pop .prow.warn .pn { white-space:normal; color:#fca5a5; }
/* per-colony breakdown popover */
.e2scope .ehdr-pop { position:absolute; top:calc(100% + 2px); left:8px; right:8px; z-index:120; max-width:430px; margin:0 auto;
  background:var(--bg-panel); border:1px solid rgba(var(--accent-rgb),.35); border-radius:6px; padding:10px 12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6); max-height:min(340px, 50vh); overflow-y:auto; animation:tin .2s ease; }
.e2scope .ehdr-pop[hidden] { display:none; }
.e2scope .ehdr-pop .pt { font-family:var(--font-mono); font-size:var(--e2-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:4px; }
.e2scope .ehdr-pop .prow { display:flex; align-items:center; gap:8px; padding:4px 0; border-top:1px solid rgba(255,255,255,.06); font-size:var(--e2-fs-meta); }
.e2scope .ehdr-pop .prow .pn { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2scope .ehdr-pop .prow .pv { font-family:var(--font-mono); }
.e2scope .ehdr-pop .prow .pr { font-family:var(--font-mono); font-size:var(--e2-fs-micro); min-width:64px; text-align:right; }
.e2scope .ehdr-pop .pnote { margin-top:6px; font-size:var(--e2-fs-micro); color:var(--text-dim); }
/* command-tab count badge (replaces the science dot; plan 2.3 semantics) */
.cmd-tab { position:relative; }
.cmd-tab .cmd-tab-badge { position:absolute; top:-2px; right:2px; min-width:14px; height:14px; padding:0 3px; border-radius:7px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:14px; text-align:center; pointer-events:none;
  box-shadow:0 0 0 1px var(--scrim-50, rgba(0,0,0,.5)); }
.cmd-tab .cmd-tab-badge[hidden] { display:none; }
.cmd-tab .cmd-tab-badge.hidden { display:none; }
/* Estado colony subtab: active construction-queue count. Mirrors .cmd-tab-badge
   geometry/type exactly for crisp painting; only the hue differs - purple
   (construction) rather than the red alert badge, and the number carries the
   meaning so it stays readable without relying on colour. Double-id beats
   #colony-subtabs .tab span (which would force var(--font-body)/600/overflow).
   top is a positive inset (not -2px like .cmd-tab-badge): the subtab chip has a
   clip-path, so the badge must sit fully inside the corner or its top gets cut. */
#colony-subtabs #estado-queue-badge { position:absolute; top:3px; right:2px; min-width:14px; height:14px;
  padding:0 3px; border-radius:7px; background:#8b5cf6; color:#fff; font-family:var(--font-body);
  font-size:10px; font-weight:700; line-height:14px; text-align:center; overflow:visible;
  box-shadow:0 0 0 1px var(--scrim-50, rgba(0,0,0,.5)); pointer-events:none; }
#colony-subtabs #estado-queue-badge[hidden] { display:none; }
/* topbar wordmark: the Era 2 "KC" mark, sized for the topbar */
.topbar-title.e2scope .logo { font-size:1.05rem; cursor:pointer; }
/* 320px: tighter chips so stock + rate never clip */
@media (max-width:379px) {
  .e2scope.kc-poolstrip .chipstrip { gap:3px; padding:2px 4px 4px; }
  .e2scope.kc-poolstrip .rchip { padding:3px 4px; gap:3px; }
  .e2scope.kc-poolstrip .rchip .ric { width:11px; height:11px; }
}

/* ============================================================
   Era 1.5 F1 (live game only): colonies master-detail shell.
   Active only while body carries .kc-colony-md (planet sub-tabs
   of screen-empire, set by kc-empire.js). Fixed zone = theater
   + ficha; #colony-scroll is the single scroll region below.
   ============================================================ */
body.kc-colony-md #screen-empire.screen.active { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
body.kc-colony-md #screen-empire > .main-content { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-width:none;
  padding-bottom:0; }
body.kc-colony-md #empire-dashboard-content { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
body.kc-colony-md #empire-dashboard-content.hidden { display:none; }
body.kc-colony-md #colony-scroll { flex:1 1 auto; min-height:0; min-width:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-height, 48px) + var(--bottom-sai, 0px) + 24px); }
/* the reparented resource strip scrolls with the content (tap-mining stays reachable) */
body.kc-colony-md #colony-scroll .section.full-width { width:100%; margin-left:0; margin-top:6px; transform:none; }
body.kc-colony-md #colony-scroll .section.full-width:has(.resource-compact) { position:static; }
/* sub-tab toggle sticks to the top of the scroll region, not the old header offset */
body.kc-colony-md #colony-scroll .consolidated-toggle { top:0; margin-right:0; }
body.kc-colony-md #colony-scroll .building-grid,
body.kc-colony-md #colony-scroll .planet-tasks-row { min-width:0; }
/* the theater's surface view replaces the old orbital feed + rotating planet */
body.kc-colony-md #planet-surface-view { display:none; }
body.kc-colony-md .planet-info-row .planet-visual { display:none; }
/* F2a: the telemetry key-value panel moves into the theater's "+ Detalle"
   modal; the colony screen keeps theater vitals overlay + compact strip */
body.kc-colony-md .dashboard-section-planet { display:none; }
/* one scroll region: the desktop task-list must not scroll on its own */
body.kc-colony-md .planet-tasks-row .task-list { max-height:none; overflow-y:visible; }
/* type floor (11.5px) for the legacy labels riding the new colony screen */
body.kc-colony-md .planet-stat .stat-label { font-size:11.5px; }
body.kc-colony-md .resource-grid .res-combined-row .res-label-text { font-size:11.5px; }
body.kc-colony-md .resource-grid.resource-pop-only .resource-card:not([data-resource="population"]) { display:none; }
body.kc-colony-md .resource-grid.resource-pop-only { display:block; }
body.kc-colony-md .resource-grid.resource-pop-only .resource-card[data-resource="population"] { width:100%; max-width:none; }

/* fixed zone: theater viewport */
.e2scope.colony-theater.hidden { display:none; }
/* Session-collapsed hero: compact strip, id row + CTA visible, tap expands */
.e2scope.colony-theater.cth-collapsed .theater { height:56px !important; cursor:pointer; }
.e2scope.colony-theater.cth-collapsed .cth-handle { display:none; }
.e2scope.colony-theater.cth-collapsed .lab-vp-rec,
.e2scope.colony-theater.cth-collapsed .lab-vp-tag { display:none; }
.e2scope.colony-theater .cth-frame { flex:none; }
.e2scope.colony-theater .theater { --vizh:clamp(150px, 24dvh, 270px); height:var(--kc-theater-h, var(--vizh)); margin-bottom:0; }
.e2scope.colony-theater .cth-handle { flex:none; display:flex; align-items:center; justify-content:center; height:20px; margin-bottom:2px; cursor:ns-resize; touch-action:none; position:relative; }
.e2scope.colony-theater .cth-handle::before { content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; }
.e2scope.colony-theater .cth-handle i { position:relative; z-index:1; width:52px; height:5px; border-radius:3px; background:rgba(var(--accent-rgb),.6); box-shadow:0 0 8px rgba(var(--accent-rgb),.4); pointer-events:none; }
.e2scope.colony-theater .cth-handle:active i { background:rgba(var(--accent-rgb),.95); box-shadow:0 0 12px rgba(var(--accent-rgb),.6); }
.e2scope.colony-theater .theater.cth-collapsed .planet,
.e2scope.colony-theater .theater.cth-collapsed canvas.theater3d,
.e2scope.colony-theater .theater.cth-collapsed .theater-diorama-overlay,
.e2scope.colony-theater .theater.cth-collapsed .orbfeed,
.e2scope.colony-theater .theater.cth-collapsed .vbtn { display:none; }
.e2scope.colony-theater .theater.cth-collapsed .tovl-t { top:auto; bottom:8px; }
/* 44px effective touch targets without changing the approved 26px chrome */
.e2scope.colony-theater .theater .vbtn::after { content:''; position:absolute; inset:-9px; }
/* short frames: keep the contribution column (impviz theater) clear of the camera toggle */
@container viz (max-height: 200px) {
  .e2scope .tovl-r .orow:nth-child(n+4) { display:none; }
}

/* ============================================================
   Living World band (kc-lw): ONE permanent viewport right below
   the sticky header, a sibling of the screens - like the ribbon,
   it never moves or resizes across tabs. Only the camera content
   changes (colony scene, lab feed); the list below is the part
   that grows or shrinks via the drag handle, on every width.
   Map and codex stay fullscreen takeovers (kc-lw off there).
   ============================================================ */
body.kc-lw #game-ui:not(.hidden) { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
body.kc-lw .sticky-header { flex:none; }
body.kc-lw .colony-theater { flex:none; padding:6px var(--panel-padding, 12px) 0; }
/* The shared colony viewport belongs exclusively to the Living World shell.
   A late theater render must never reserve space above fullscreen takeovers
   such as the map (or Codex/profile) after their tab has become active. */
body:not(.kc-lw) #colony-theater { display:none !important; }
body.kc-lw .kc-d3-center { overflow:hidden; }
/* empire screen: one scroll region under the band on every sub-tab
   (empire-wide tabs scroll #empire-content; colony tabs #colony-scroll) */
body.kc-lw #screen-empire.screen.active { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
body.kc-lw #screen-empire > .main-content { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-width:none;
  overflow:hidden; padding-bottom:0; }
body.kc-lw #screen-empire #empire-content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-height, 48px) + var(--bottom-sai, 0px) + 12px); }
body.kc-lw #screen-empire #empire-content.hidden { display:none; }
body.kc-lw #empire-content .empire-research-ciencia-layout { flex:1 1 auto; min-height:0; max-height:none; }
/* the resource strip sits outside this scroller; subtabs stick to its top */
body.kc-lw #empire-content .empire-research-subtabs { top:0; }
/* generic shell for band tabs at >=1440 (desktop3): the center column
   stops scrolling as a whole; each screen's .main-content scrolls under
   the band instead. Empire and community keep their own scroll chains. */
body.kc-lw.kc-layout-desktop3 .kc-d3-center > .screen.active:not(#screen-community):not(#screen-empire) { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
body.kc-lw.kc-layout-desktop3 .kc-d3-center > .screen.active:not(#screen-community):not(#screen-empire) > .main-content { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
/* desktop default frame height - identical on every tab; the saved
   --kc-theater-h from the handle still overrides it uniformly */
@media (min-width:900px) {
  .e2scope.colony-theater .theater { --vizh:clamp(220px, 30vh, 360px); }
}
/* lab scene fills the theater box; the cth-frame provides the chrome */
.e2scope .theater.cth-lab { cursor:default; }
.e2scope .theater .lab-vp { position:absolute; inset:0; height:auto; margin:0; border-radius:0; box-shadow:none; }
/* Band content swap: Star Wars-style wipes between scenes */
.e2scope .theater .cth-swap { position:absolute; inset:0; overflow:hidden; z-index:6; pointer-events:none; }
.e2scope .theater .cth-swap .cth-swap-snap { position:absolute; inset:0; }
.e2scope .theater .cth-swap-fade { animation:cthSwapFade .4s ease both; }
@keyframes cthSwapFade { to { opacity:0; } }
.e2scope .theater .cth-swap-wipe-l, .e2scope .theater .cth-swap-wipe-r {
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.e2scope .theater .cth-swap-wipe-l {
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  animation:cthSwapWipeL .5s ease-in-out both;
}
@keyframes cthSwapWipeL {
  from { -webkit-mask-position:0% 0; mask-position:0% 0; }
  to { -webkit-mask-position:100% 0; mask-position:100% 0; }
}
.e2scope .theater .cth-swap-wipe-r {
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 40%, #000 60%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 40%, #000 60%, #000 100%);
  animation:cthSwapWipeR .5s ease-in-out both;
}
@keyframes cthSwapWipeR {
  from { -webkit-mask-position:100% 0; mask-position:100% 0; }
  to { -webkit-mask-position:0% 0; mask-position:0% 0; }
}
.e2scope .theater .cth-swap-iris {
  -webkit-mask-image:radial-gradient(circle, #000 0%, #000 55%, transparent 72%);
  mask-image:radial-gradient(circle, #000 0%, #000 55%, transparent 72%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  animation:cthSwapIris .5s ease-in both;
}
@keyframes cthSwapIris {
  from { -webkit-mask-size:340% 340%; mask-size:340% 340%; }
  to { -webkit-mask-size:0% 0%; mask-size:0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .e2scope .theater .cth-swap { animation:none !important; display:none; }
}

/* ============================================================
   Era 1.5 F2c glue (live game only): header band actions, main
   segmented ribbon, colony sub-tab strip.
   ============================================================ */
.e2scope.kc-hdrband { display:block; position:relative; background:var(--bg-void);
  /* iOS notch: the band absorbs the top inset, content starts below it */
  padding-top:env(safe-area-inset-top, 0px); }
.sticky-header:has(.top-banner:not(.hidden)) .e2scope.kc-hdrband { padding-top:0; }
.e2scope .kc-hdr-actions { position:absolute; top:calc(env(safe-area-inset-top, 0px) + 4px); right:calc(8px + env(safe-area-inset-right, 0px)); z-index:46; display:flex; gap:6px; }
.sticky-header:has(.top-banner:not(.hidden)) .e2scope .kc-hdr-actions { top:4px; }
.e2scope .kc-hdr-actions[hidden] { display:none; }
.e2scope .kc-hdr-actions .avbtn { position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:30px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.35); border-radius:3px; color:var(--cyan); cursor:pointer; padding:0; }
.e2scope .kc-hdr-actions .avbtn .tic { width:16px; height:16px; }
.e2scope .kc-hdr-actions .avbtn::after { content:''; position:absolute; inset:-7px -4px; }
.e2scope .kc-hdr-actions .avbtn.active { background:rgba(var(--accent-rgb),.22); }
.e2scope.kc-ehdr .hero { padding-right:92px; }
.e2scope.kc-ehdr .hero .logo { cursor:pointer; }
/* Native-app shell: header content never clips mid-glyph. On narrow
   screens the pool chips drop their /h rate (detail lives in the tap
   popover) so icon + value always fit whole. */
@media (max-width:480px) {
  .e2scope.kc-poolstrip .rchip .rr { display:none; }
}
/* Desktop: actions get their own flex column, so a long resource readout
   can never grow underneath the bell/avatar controls. */
@media (min-width:900px) {
  .e2scope.kc-hdrband { display:flex; align-items:flex-start; }
  .e2scope.kc-hdrband > .kc-ehdr { flex:1 1 auto; min-width:0; }
  .e2scope.kc-hdrband > .kc-hdr-actions {
    position:relative;
    top:auto;
    right:auto;
    flex:0 0 auto;
    margin:4px calc(8px + env(safe-area-inset-right, 0px)) 0 6px;
  }
  .e2scope.kc-ehdr .hband { padding-right:12px; }
}
/* bell count bubble */
.e2scope .kc-hdr-actions .avbtn .badge { position:absolute; top:-6px; right:-5px; min-width:16px; border-radius:8px;
  background:var(--red); color:#fff; font-family:var(--font-mono); font-size:10px; line-height:16px; padding:0 4px; text-align:center; }
.e2scope .kc-hdr-actions .avbtn .badge[hidden], .e2scope .kc-hdr-actions .avbtn .badge.hidden { display:none; }
/* main ribbon: the era2 #tabs container layout, ported */
.e2scope.kc-ribbon { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; border-top:1px solid var(--bg-divider); background:var(--bg-void);
  padding:5px calc(6px + env(safe-area-inset-right, 0px)) 4px calc(6px + env(safe-area-inset-left, 0px)); }
.e2scope.kc-ribbon .tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:44px; padding:4px 2px; letter-spacing:0; cursor:pointer; }
.e2scope.kc-ribbon .tab .tic { width:16px; height:16px; flex:none; }
.e2scope.kc-ribbon .tab .tlabel { font-family:var(--font-body); font-size:var(--e2-fs-micro); font-weight:600; text-transform:none; line-height:1.2; max-width:100%; white-space:nowrap; overflow:hidden; }
.e2scope.kc-ribbon .tab .badge { position:absolute; top:2px; right:5px; margin:0; line-height:1.3; }
.e2scope.kc-ribbon .tab .badge[hidden], .e2scope.kc-ribbon .tab .badge.hidden { display:none; }
.e2scope.kc-ribbon .tab .badge.nav-badge-threat { background:var(--red); color:#fff; }
/* Log tab: novelty dot, presence only (no count) */
.e2scope.kc-ribbon .tab .badge.badge-dot { min-width:8px; width:8px; height:8px; padding:0; border-radius:50%;
  background:var(--amber); box-shadow:0 0 6px rgba(245,158,11,.7); }
@media (min-width:900px) {
  .e2scope.kc-ribbon { padding:5px 10px 4px; }
  .e2scope.kc-ribbon .tab { flex-direction:row; gap:6px; min-height:38px; padding:4px 16px; }
}
/* F2c: the avatar menu adopts the era2 user-menu anatomy (the live game's
   controls keep their ids/handlers; the umenu wrapper brings the look) */
.topbar-dd.e2scope { padding:0; border:1px solid rgba(var(--accent-rgb),.35); border-radius:6px;
  /* the container owns the clamp: the inner umenu fills it, so nothing can
     poke past the right edge on narrow phones */
  width:min(272px, calc(100vw - var(--panel-padding) - 8px - env(safe-area-inset-right, 0px)));
  max-width:none; }
.topbar-dd.e2scope .umenu { position:static; top:auto; right:auto; width:100%; max-height:none;
  border:none; box-shadow:none; animation:none; overflow:visible; }
.topbar-dd.e2scope .dd-reputation-val { min-width:0; text-align:right; overflow-wrap:anywhere; }
.topbar-dd.e2scope .dd-header { border-bottom:none; box-shadow:none; padding:0; }
.topbar-dd.e2scope .dd-section { border-bottom:none; padding:0; }
.topbar-dd.e2scope .umenu .usep { margin:12px 0 4px; }
.topbar-dd.e2scope .umenu .dd-volume { flex:1; display:flex; align-items:center; gap:10px; min-width:0; margin-left:10px; }
.topbar-dd.e2scope .umenu .dd-vol-btn { flex:none; background:none; border:1px solid var(--bg-divider); border-radius:3px;
  min-width:34px; min-height:30px; color:var(--cyan); cursor:pointer; }
.topbar-dd.e2scope .umenu .dd-vol-btn.muted { opacity:.45; }
.topbar-dd.e2scope .umenu .thdot { display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.topbar-dd.e2scope .umenu .thdot .theme-swatch { display:none; }
.topbar-dd.e2scope .umenu .langbtn { text-decoration:none; }
.topbar-dd.e2scope .umenu .ulogout { text-align:left; }

/* F2c: bottom bar retired - kill the stub and release its reserved space */
#bottom-nav { display:none !important; }
:root { --nav-height: 0px; }
/* Imperio access chips (relocated bottom-bar destinations) + colony rows host */
#colony-switch-list .empire-stat-chips { margin:0 0 10px; }
#colony-switch-list .estat-chip .ec-v[hidden] { display:none; }
/* Estado sub-tab: header naming which colony the detail below is about */
.estado-planet-header { display:none; }
body.kc-colony-md .estado-planet-header { display:flex; align-items:center; gap:8px; flex:none; margin:0 6px 8px; padding:2px 2px 8px; border-bottom:1px solid rgba(194,246,255,0.10); }
.estado-planet-name { font-family:var(--font-display, var(--font-body)); font-weight:700; font-size:1rem; color:var(--text); min-width:0; }
.estado-planet-crown { width:16px; height:16px; stroke:#f59e0b; fill:none; flex:none; }
.estado-planet-coords { font-size:0.72rem; color:rgba(194,246,255,0.6); }
.estado-planet-tag { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; padding:2px 6px; border-radius:6px; background:rgba(148,163,184,0.16); color:rgba(226,232,240,0.85); }
/* colony sub-tab strip: era2 subtab anatomy under the theater/ficha */
#colony-subtabs { display:none; }
body.kc-colony-md #colony-subtabs { display:flex; flex:none; gap:4px; margin:0; padding:2px 6px 8px; }
#colony-subtabs .tab { flex:1 1 0; min-height:36px; min-width:0; padding:5px 3px; position:relative; }
#colony-subtabs .tab::after { content:''; position:absolute; inset:-6px 0; }
#colony-subtabs .tab span { text-transform:none; font-family:var(--font-body); font-weight:600; font-size:var(--e2-fs-micro); max-width:100%; white-space:nowrap; overflow:hidden; }
@media (max-width:379px) {
  #colony-subtabs .tab span { font-size:11.5px; letter-spacing:0; }
}
/* Colony restructure: Imperio landing (colonies list) vs colony detail.
   The landing hides the subtab strip and back bar; the viewport theater
   stays mounted (governor scene) so entering/leaving a colony only swaps
   the band content. */
body.kc-colony-landing #colony-subtabs,
body.kc-colony-landing #colony-back-bar { display:none !important; }
/* Single colony: no list to return to, so the back button goes; the bar
   survives only while it carries aux content (Naves spaceport capacity). */
body.kc-colony-solo .colony-back-btn { display:none !important; }
body.kc-colony-solo #colony-back-bar:not(:has(#colony-back-aux *)) { display:none !important; }
/* Back-to-list bar (colony detail only): back button left, per-tab aux
   content (Naves: spaceport capacity) right-aligned */
#colony-back-bar { display:none; }
body.kc-colony-md #colony-back-bar { display:flex; align-items:center; gap:8px; flex:none; padding:2px 6px 2px; }
#colony-back-aux { margin-left:auto; min-width:0; display:flex; align-items:center; }
#colony-back-aux:empty { display:none; }
/* colony detail: trim the main-content top padding so the back bar sits just
   under the theater drag-handle instead of a tall empty band */
body.kc-lw.kc-colony-md #screen-empire > .main-content { padding-top:2px; }
.colony-back-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(var(--accent-rgb),0.35); background:rgba(var(--accent-rgb),0.07); color:var(--accent);
  font-family:var(--font-mono); font-size:12px; line-height:1; }
.colony-back-btn:active { background:rgba(var(--accent-rgb),0.14); }
/* Flotas subtab strip: same anatomy as the colony strip */
.subtabs.fleets-subtabs { display:flex; gap:4px; margin:0 0 8px; padding:2px 0; }
.subtabs.fleets-subtabs .tab { flex:1 1 0; min-height:36px; min-width:0; padding:5px 3px; position:relative; }
.subtabs.fleets-subtabs .tab span { text-transform:none; font-family:var(--font-body); font-weight:600; font-size:var(--e2-fs-micro); max-width:100%; white-space:nowrap; overflow:hidden; }
@media (max-width:379px) {
  .subtabs.fleets-subtabs .tab span { font-size:11.5px; letter-spacing:0; }
}
/* Estado technical sheet: read-only production/population/infra breakdown */
.estado-tech-sheet { margin:0 6px 10px; }
.estado-tech-sheet.hidden { display:none; }
.est-sheet { padding:10px 12px; }
.est-title { margin:8px 0 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.est-title:first-child { margin-top:0; }
/* Autofarm control at the top of the Colonia sheet */
.est-autofarm-row { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.06); }
.est-autofarm-row + .est-title { margin-top:0; }
.est-title-prod { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.est-title-desig { display:inline-flex; flex:none; }
.est-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:var(--e2-fs-meta); }
.est-row:last-child { border-bottom:none; }
.est-label { flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; gap:6px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.est-val { flex:none; color:var(--text-primary); }
.est-kc { flex:none; min-width:92px; text-align:right; color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:flex-end; gap:2px; }
.est-note { margin:4px 0 2px; font-size:11px; line-height:1.4; color:var(--text-dim); }
.est-row-link { cursor:pointer; }
.est-row-link:hover { background:rgba(255,255,255,.04); }
.est-row-link:focus-visible { outline:1px solid var(--cyan); outline-offset:-1px; }
.est-caret { color:var(--text-dim); font-weight:700; }
/* Infra balance breakdown modal */
.ib-title { margin:0 0 2px; font-size:1rem; display:flex; align-items:center; gap:6px; color:var(--text); }
.ib-sub { font-size:.78rem; color:var(--text-dim); margin-bottom:12px; }
.ib-list { display:flex; flex-direction:column; gap:2px; }
.ib-section-head { margin:10px 0 2px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.ib-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.85rem; }
.ib-row:last-child { border-bottom:none; }
.ib-name { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ib-bld-icon { width:15px; height:15px; flex:none; opacity:.85; }
.ib-bld-icon--stroke { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ib-val { flex:none; color:var(--text); font-variant-numeric:tabular-nums; }
.ib-empty { color:var(--text-dim); font-style:italic; }
.ib-totals { margin-top:12px; padding-top:8px; border-top:1px solid rgba(255,255,255,.12); }
.ib-total-row { display:flex; align-items:center; justify-content:space-between; padding:2px 0; font-size:.85rem; color:var(--text-secondary); }
.ib-total-row.ib-net { margin-top:2px; font-weight:700; color:var(--text); }
/* Fit to viewport: cap the panel to the visible area (safe-area aware) and scroll
   only the list, so the close button and totals stay on-screen on any phone. */
#infra-breakdown-modal > .panel {
  display:flex; flex-direction:column;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow:hidden;
}
#infra-breakdown-modal .ib-title,
#infra-breakdown-modal .ib-sub,
#infra-breakdown-modal .ib-totals { flex:none; }
#infra-breakdown-modal .ib-list {
  flex:1 1 auto; min-height:0; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
/* F2c: colony switcher rows on the Planeta sub-tab (dropdown replacement) */
#colony-switch-list { margin:2px 4px 10px; }
#colony-switch-list .brow { min-height:44px; }
#colony-switch-list .binfo .n { display:flex; align-items:center; gap:6px; min-width:0; font-family:var(--font-display); font-size:var(--e2-fs-title); font-weight:700; }
#colony-switch-list .binfo .n .clamp1 { flex:0 1 auto; min-width:0; }
/* Short badge (AF/Luna) never shrinks: the name auto-fits (KC.fitText) around it. */
#colony-switch-list .binfo .n .btag { flex:none; overflow:visible; text-overflow:clip; }
#colony-switch-list .binfo .big { margin-top:2px; font-size:var(--e2-fs-meta); min-height:24px; display:flex; align-items:center; }
#colony-switch-list .bact { gap:4px; flex-direction:column; align-items:flex-end; flex-shrink:0; }
#colony-switch-list .bact-c2s { display:flex; flex-direction:column; align-items:flex-end; max-width:min(52vw, 210px); }
#colony-switch-list .col-c2s-btn {
  display:flex; flex-direction:row; align-items:center; gap:6px;
  min-height:44px; min-width:0; max-width:100%; padding:4px 8px;
  text-align:left;
}
#colony-switch-list .col-c2s-btn .col-c2s-text {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; flex:1;
}
#colony-switch-list .col-c2s-btn .col-c2s-name {
  width:100%; min-width:0; white-space:nowrap; overflow:hidden;
  font-size:11.5px; line-height:1.2;
}
#colony-switch-list .col-c2s-btn .col-c2s-figs {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  width:100%; min-width:0; font-size:11.5px; line-height:1.2;
}
#colony-switch-list .col-c2s-btn .col-c2s-gain {
  flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#colony-switch-list .col-c2s-btn .cc {
  flex:0 0 auto; font-size:11.5px; line-height:1.2; white-space:nowrap;
}
/* Unaffordable recommendation: clearly faded (luminance cue, colorblind-safe) */
#colony-switch-list .col-c2s-btn.dim { opacity:.45; filter:saturate(.55); }
/* KC/h wealth gain (green = decoration only; sign+icon+/h carry meaning) */
.rec-gain-kc { color:#34d399; display:inline-flex; align-items:center; gap:1px; }
.rec-gain-fn { color:var(--text-dim); font-family:var(--font-body); }
#colony-switch-list .col-c2s-thumb {
  width:28px; height:28px; flex-shrink:0;
  background-size:cover; background-position:center; border-radius:4px;
  border:1px solid rgba(255,255,255,.12);
}
#colony-switch-list .col-c2s-note {
  display:flex; align-items:center; justify-content:flex-end;
  min-height:38px; max-width:min(52vw, 210px);
  font-size:11.5px; line-height:1.2; text-align:right; color:var(--text-dim);
}
#colony-switch-list .col-c2s-build {
  display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:100px; max-width:min(52vw, 210px);
}
#colony-switch-list .col-bldname {
  display:block; max-width:100%; font-size:11.5px; line-height:1.2; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#colony-switch-list .col-c2s-prog, .lw-list .col-c2s-prog { display:flex; align-items:center; gap:6px; width:100%; }
#colony-switch-list .col-c2s-prog .progress-bar, .lw-list .col-c2s-prog .progress-bar { flex:1 1 auto; min-width:40px; }
#colony-switch-list .col-c2s-prog .progress-bar, .lw-list .col-c2s-prog .progress-bar {
  height:7px; border-radius:4px; background:rgba(255,255,255,.14); box-shadow:inset 0 1px 1px rgba(0,0,0,.45); overflow:hidden;
}
#colony-switch-list .col-c2s-prog .progress-fill, .lw-list .col-c2s-prog .progress-fill { display:block; height:100%; }
#colony-switch-list .col-c2s-timer, .lw-list .col-c2s-timer { font-size:11.5px; color:var(--text-secondary); text-align:right; flex:none; }
/* Rush CTA sits in the right build cell as a single 24px line: the row never grows */
#colony-switch-list .col-c2s-rush, .lw-list .col-c2s-rush {
  flex-direction:row; align-items:center; justify-content:center; gap:6px;
  height:24px; min-height:0; min-width:0; box-sizing:border-box;
  font-size:11.5px; padding:0 8px; max-width:100%; align-self:flex-end;
  white-space:nowrap; overflow:hidden;
}
#colony-switch-list .col-c2s-rush .cl, .lw-list .col-c2s-rush .cl { font-size:11.5px; line-height:1; overflow:hidden; text-overflow:ellipsis; }
#colony-switch-list .col-c2s-rush .cc, .lw-list .col-c2s-rush .cc { font-size:11.5px; line-height:1; flex:none; }
#colony-switch-list .col-c2s-build, .lw-list .col-c2s-build { justify-content:center; min-height:44px; }
.lw-list .col-c2s-build { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:100px; max-width:min(52vw, 210px); }
/* Work shift chip: same 24px line as the rush CTA so the row never grows.
   Dashed frame + wrench glyph separate the free offer from the paid rush
   without relying on colour. */
#colony-switch-list .col-c2s-shift, .lw-list .col-c2s-shift {
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px;
  height:24px; min-height:0; min-width:0; box-sizing:border-box; align-self:flex-end;
  font-size:11.5px; line-height:1; padding:0 8px; max-width:100%;
  white-space:nowrap; overflow:hidden;
  border:1px dashed rgba(var(--accent-rgb), .75); border-radius:999px;
  background:rgba(var(--accent-rgb), .1); color:var(--text-primary); cursor:pointer;
}
#colony-switch-list .col-c2s-shift svg, .lw-list .col-c2s-shift svg { width:13px; height:13px; flex:none; }
#colony-switch-list .col-c2s-shift b, .lw-list .col-c2s-shift b { font-family:var(--font-mono); flex:none; }
#colony-switch-list .col-c2s-shift span, .lw-list .col-c2s-shift span { overflow:hidden; text-overflow:ellipsis; }
#colony-switch-list .col-c2s-shift:hover, .lw-list .col-c2s-shift:hover { border-style:solid; background:rgba(var(--accent-rgb), .2); }

#colony-switch-list .binfo { flex:1; min-width:0; }

/* Living World item rows (Edificios/Defensa/Naves) */
#building-grid > .lw-list { grid-column:1 / -1; display:flex; flex-direction:column; }
#building-grid > .lw-detail { grid-column:1 / -1; margin-top:10px; }
.lw-list .lw-row { min-height:44px; }
/* Naves rows: bigger ship art (rounded square, cover) */
.lw-list--ships .lw-row .bwrap { width:56px; height:56px; }
.lw-list--ships .lw-row .bwrap .bthumb { border-radius:8px; }
/* Naves class filters pinned above the scroll region (always visible) */
body.kc-colony-md #colony-fixed-filters { flex:none; padding:0 6px 6px; }
#colony-fixed-filters.hidden { display:none; }
#colony-fixed-filters .ships-class-subtabs { margin:0; }
.lw-list .lw-row.locked { opacity:.62; }
/* Not buildable right now (locked/capped/damaged/unaffordable): dimmed name,
   complements the lock label and dimmed button (never the only cue). */
.lw-list .lw-row.lw-nobuild .n .fit-text { color:var(--text-dim); }
/* Long names never ride over the qty stepper: the name is a shrinkable flex
   item (ellipsis / auto-fit inside its own box), badges keep their width.
   Full name lives in the title tooltip. */
.lw-list .lw-row .binfo .n { display:flex; align-items:center; gap:7px; min-width:0; }
.lw-list .lw-row .binfo .n .clamp1 { flex:0 1 auto; min-width:0; }
.lw-list .binfo { flex:1; min-width:0; }
.lw-list .binfo .big, .ribanner .binfo .big { margin-top:2px; font-size:var(--e2-fs-meta); min-height:24px; display:flex; align-items:center; gap:10px; color:var(--text-secondary); overflow:hidden; }
.lw-list .lw-stat { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.lw-list .lw-dim, .ribanner .lw-dim { color:var(--text-dim); }
.lw-list .bact { gap:4px; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.lw-list .lw-act, .ribanner .lw-act { display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:100px; max-width:min(52vw, 210px); }
/* Narrow widths: the action column (stepper + button + cost) must never
   outgrow its .bact cell and slide under the name column; the build button
   ellipsizes instead. */
.lw-list .bact .lw-act, .lw-list .bact .lw-cost, .lw-list .bact .lw-lock { max-width:100%; }
.lw-list .lw-btn, .ribanner .lw-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:24px; min-height:0; box-sizing:border-box; padding:0 10px;
  font-size:11.5px; line-height:1; white-space:nowrap; max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
  background:rgba(0,240,255,.1); border:1px solid rgba(0,240,255,.3); border-radius:4px;
  color:var(--cyan); cursor:pointer;
}
.lw-list .lw-btn:hover, .ribanner .lw-btn:hover { background:rgba(0,240,255,.2); }
.lw-list .lw-btn.dim, .ribanner .lw-btn.dim { opacity:.55; }
/* Wrap instead of clip: 4-ingredient recipes (alloy ship gate) take a second line. */
.lw-list .lw-cost, .ribanner .lw-cost { font-size:11.5px; display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:2px 6px; white-space:nowrap; max-width:min(52vw,210px); }
.lw-list .lw-lock {
  display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(52vw,210px);
}
/* Shipyard list rows: inline quantity stepper so N units queue in one build.
   Rides beside the build button on one line at the button's height, so the row
   never grows when a build starts. */
.lw-list .lw-buildrow { display:flex; align-items:center; justify-content:flex-end; gap:6px; max-width:100%; }
.lw-list .lw-buildrow .lw-btn { flex:0 1 auto; min-width:0; }
.lw-list .ship-qty-control.lw-qty {
  height:24px; flex:none; display:flex; align-items:center; overflow:hidden;
  border:1px solid rgba(0,240,255,.3); border-radius:4px; background:var(--scrim-40, rgba(0,0,0,.4));
}
.lw-list .ship-qty-control.lw-qty .ship-qty-btn {
  width:20px; min-width:20px; height:22px; padding:0; border:none; border-radius:0;
  background:rgba(0,240,255,.1); color:var(--cyan, #00f0ff); font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1; touch-action:manipulation;
}
.lw-list .ship-qty-control.lw-qty .ship-qty-btn:active { background:rgba(0,240,255,.25); }
.lw-list .ship-qty-control.lw-qty .ship-qty-input {
  width:26px; height:22px; text-align:center; background:transparent; border:none;
  border-left:1px solid rgba(0,240,255,.15); border-right:1px solid rgba(0,240,255,.15);
  color:#fff; font-size:11px; font-family:inherit; padding:0; -moz-appearance:textfield;
}
.lw-list .ship-qty-control.lw-qty .ship-qty-input::-webkit-outer-spin-button,
.lw-list .ship-qty-control.lw-qty .ship-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.e2scope .ichip.red { color:#fca5a5; border-color:rgba(239,68,68,.5); }

/* colony switcher: the planet dropdown adopts the e2 framed-capsule look */
.topbar-planet.e2scope .planet-dropdown-trigger { background:rgba(8,10,18,.6); border:1px solid rgba(var(--accent-rgb),.3); border-radius:3px; }
.topbar-planet.e2scope .planet-dropdown-trigger:hover { border-color:rgba(var(--accent-rgb),.55); }
.topbar-planet.e2scope .planet-dropdown-coords { font-family:var(--font-mono); }
.topbar-planet.e2scope .planet-dropdown-list { border:1px solid rgba(var(--accent-rgb),.35); background:var(--bg-panel); box-shadow:0 10px 40px rgba(0,0,0,.6); }

/* ── Colony designation: theater chip + specialization modal ── */
.cth-desig-chip {
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
  color:rgba(194,246,255,0.95); border:1px solid rgba(var(--accent-rgb),0.55);
  transition:border-color .15s, background .15s, transform .1s;
}
.cth-desig-chip:hover { border-color:rgba(var(--accent-rgb),0.9); background:rgba(var(--accent-rgb),0.16); }
.cth-desig-chip:active { transform:scale(0.96); }
.cth-desig-chip .cth-desig-ic { width:12px; height:12px; flex:none; }
.cth-desig-chip.is-unset { border-style:dashed; color:rgba(226,232,240,0.82); }
.cth-desig-chip.is-unset:hover { color:rgba(194,246,255,0.95); }

.desig-modal-hd { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.desig-modal-hd h3 { margin:0; font-size:1.05rem; color:var(--text); }
.desig-modal-sub { font-size:0.8rem; color:var(--text-dim); }
.desig-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; }
.desig-card {
  display:block; text-align:left; width:100%; cursor:pointer;
  padding:13px 14px 14px; border-radius:10px; color:var(--text);
  background:rgba(8,12,22,0.55); border:1px solid rgba(var(--accent-rgb),0.16);
  transition:border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.desig-card:hover { border-color:rgba(var(--accent-rgb),0.55); background:rgba(var(--accent-rgb),0.07); transform:translateY(-2px); }
.desig-card.is-selected { border-color:rgba(var(--accent-rgb),0.85); background:rgba(var(--accent-rgb),0.12); box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.4) inset; cursor:default; }
.desig-card.is-locked, .desig-card[disabled] { cursor:not-allowed; }
.desig-card.is-locked { opacity:0.5; }
.desig-card.is-locked:hover { transform:none; border-color:rgba(226,232,240,0.16); background:rgba(8,12,22,0.55); }
.desig-card.is-busy { opacity:0.6; pointer-events:none; }
.desig-card-hd { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.desig-card-ic { width:20px; height:20px; flex:none; color:rgba(194,246,255,0.95); }
.desig-card-name { font-weight:700; font-size:0.95rem; flex:1; min-width:0; }
.desig-card-cur { flex:none; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:2px 7px; border-radius:999px; color:#05221f; background:rgba(194,246,255,0.92); }
.desig-card-desc { font-size:0.76rem; color:var(--text-dim); line-height:1.4; margin-bottom:10px; }
.desig-eff-row { display:flex; gap:6px; }
.desig-eff { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:6px; background:rgba(15,23,42,0.45); }
.desig-eff svg { width:15px; height:15px; opacity:0.75; }
.desig-eff span { font-size:0.68rem; font-weight:700; white-space:nowrap; }
.desig-eff.up span { color:#8fd3ff; }
.desig-eff.up svg { color:#8fd3ff; opacity:0.9; }
.desig-eff.down span { color:#f2c14e; }
.desig-eff.down svg { color:#f2c14e; opacity:0.9; }
.desig-eff.flat span { color:var(--text-dim); }
.desig-lock { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:0.7rem; color:#f2c14e; }
.desig-lock svg { width:13px; height:13px; flex:none; }
.desig-foot { margin:14px 0 0; font-size:0.72rem; color:var(--text-dim); line-height:1.45; }
@media (max-width:520px) { .desig-grid { grid-template-columns:1fr; } }