/* |-------------------------------------------------------------------------- | CubaXNova X2 — UX1-B1 Design System |-------------------------------------------------------------------------- | | Fundación visual global. | | No contiene lógica de juego. | No modifica reglas OGameX. | Los componentes UX1-B1 usan prefijo x2ds- para evitar colisiones. | */ :root { /* ======================================================== COLOR — ESPACIO ======================================================== */ --x2ds-bg-0: #020914; --x2ds-bg-1: #04121d; --x2ds-bg-2: #061a27; --x2ds-bg-3: #092333; --x2ds-surface-1: rgba(5, 27, 40, .82); --x2ds-surface-2: rgba(7, 36, 51, .88); --x2ds-surface-3: rgba(10, 44, 61, .92); --x2ds-glass: rgba(8, 34, 48, .72); --x2ds-text: #f3f8fb; --x2ds-text-soft: #c0d1da; --x2ds-muted: #7893a1; --x2ds-muted-2: #597481; --x2ds-cyan: #55dcff; --x2ds-cyan-bright: #7be8ff; --x2ds-blue: #5897fb; --x2ds-violet: #8c79ff; --x2ds-green: #69e6b5; --x2ds-gold: #e7b15a; --x2ds-orange: #ff9d55; --x2ds-red: #ff627f; --x2ds-danger: #ff4f72; /* ======================================================== BORDES ======================================================== */ --x2ds-line: rgba(104, 213, 255, .12); --x2ds-line-soft: rgba(255, 255, 255, .055); --x2ds-line-strong: rgba(91, 220, 255, .28); --x2ds-line-danger: rgba(255, 79, 114, .34); --x2ds-line-success: rgba(105, 230, 181, .30); /* ======================================================== SPACING ======================================================== */ --x2ds-space-1: 4px; --x2ds-space-2: 8px; --x2ds-space-3: 12px; --x2ds-space-4: 16px; --x2ds-space-5: 20px; --x2ds-space-6: 24px; --x2ds-space-7: 32px; --x2ds-space-8: 40px; /* ======================================================== RADIOS ======================================================== */ --x2ds-radius-xs: 8px; --x2ds-radius-sm: 12px; --x2ds-radius-md: 16px; --x2ds-radius-lg: 20px; --x2ds-radius-xl: 26px; --x2ds-radius-pill: 999px; /* ======================================================== TIPOGRAFÍA ======================================================== */ --x2ds-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, system-ui, -apple-system, sans-serif; --x2ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --x2ds-fs-xs: 10px; --x2ds-fs-sm: 12px; --x2ds-fs-md: 14px; --x2ds-fs-lg: 17px; --x2ds-fs-xl: 22px; --x2ds-fs-2xl: 30px; /* ======================================================== PROFUNDIDAD ======================================================== */ --x2ds-shadow-soft: 0 16px 40px rgba(0, 0, 0, .24); --x2ds-shadow-card: 0 20px 60px rgba(0, 0, 0, .30); --x2ds-shadow-float: 0 26px 80px rgba(0, 0, 0, .42); --x2ds-glow-cyan: 0 0 30px rgba(85, 220, 255, .14); --x2ds-glow-danger: 0 0 32px rgba(255, 79, 114, .14); /* ======================================================== MOTION ======================================================== */ --x2ds-fast: 140ms; --x2ds-normal: 220ms; --x2ds-slow: 360ms; --x2ds-ease: cubic-bezier(.2, .8, .2, 1); /* ======================================================== CAPAS ======================================================== */ --x2ds-z-base: 1; --x2ds-z-sticky: 20; --x2ds-z-nav: 50; --x2ds-z-overlay: 80; --x2ds-z-drawer: 90; --x2ds-z-modal: 100; --x2ds-z-toast: 110; } /* ============================================================ FUNDACIÓN ============================================================ */ .x2ds-page { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--x2ds-space-4) var(--x2ds-space-4) calc( 100px + env(safe-area-inset-bottom, 0px) ); color: var(--x2ds-text); font-family: var(--x2ds-font); } .x2ds-stack { display: grid; gap: var(--x2ds-space-4); } .x2ds-section { display: grid; gap: var(--x2ds-space-3); } .x2ds-grid { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: var(--x2ds-space-3); } /* ============================================================ HEADERS ============================================================ */ .x2ds-eyebrow { display: block; color: var(--x2ds-muted); font-size: var(--x2ds-fs-xs); font-weight: 800; letter-spacing: .20em; text-transform: uppercase; } .x2ds-title { margin: 0; color: var(--x2ds-text); font-size: clamp( 22px, 6vw, 30px ); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; } .x2ds-subtitle { margin: 0; color: var(--x2ds-muted); font-size: var(--x2ds-fs-sm); line-height: 1.55; } /* ============================================================ CARDS / PANELS ============================================================ */ .x2ds-card, .x2ds-panel { position: relative; overflow: hidden; border: 1px solid var(--x2ds-line); background: linear-gradient( 145deg, rgba(10, 42, 58, .82), rgba(3, 21, 31, .90) ); box-shadow: var(--x2ds-shadow-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .x2ds-card { padding: var(--x2ds-space-4); border-radius: var(--x2ds-radius-lg); } .x2ds-panel { padding: var(--x2ds-space-5); border-radius: var(--x2ds-radius-xl); } .x2ds-card::before, .x2ds-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(111, 224, 255, .055), transparent 35%, transparent 72%, rgba(88, 151, 251, .025) ); } /* ============================================================ STATS ============================================================ */ .x2ds-stat { padding: 14px; border: 1px solid var(--x2ds-line-soft); border-radius: var(--x2ds-radius-md); background: rgba(0, 13, 22, .46); } .x2ds-stat span { display: block; color: var(--x2ds-muted); font-size: var(--x2ds-fs-xs); letter-spacing: .06em; } .x2ds-stat strong { display: block; margin-top: 5px; color: var(--x2ds-text); font-size: 19px; font-weight: 800; } /* ============================================================ BUTTONS ============================================================ */ .x2ds-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid var(--x2ds-line-strong); border-radius: var(--x2ds-radius-md); background: linear-gradient( 135deg, rgba(38, 171, 217, .17), rgba(18, 67, 90, .30) ); color: var(--x2ds-text); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform var(--x2ds-fast) var(--x2ds-ease), border-color var(--x2ds-normal) var(--x2ds-ease), background var(--x2ds-normal) var(--x2ds-ease), box-shadow var(--x2ds-normal) var(--x2ds-ease); } .x2ds-button:active { transform: scale(.975); } .x2ds-button.is-primary { border-color: rgba(91, 220, 255, .42); background: linear-gradient( 135deg, rgba(31, 180, 225, .32), rgba(32, 112, 165, .34) ); box-shadow: var(--x2ds-glow-cyan); } .x2ds-button.is-danger { border-color: var(--x2ds-line-danger); background: rgba(117, 22, 49, .28); color: #ff9bad; } .x2ds-button:disabled { opacity: .42; cursor: not-allowed; transform: none; } /* ============================================================ BADGES / CHIPS ============================================================ */ .x2ds-badge { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--x2ds-line); border-radius: var(--x2ds-radius-pill); background: rgba(5, 31, 44, .72); color: var(--x2ds-text-soft); font-size: var(--x2ds-fs-xs); font-weight: 800; } .x2ds-badge.is-live, .x2ds-badge.is-success { border-color: var(--x2ds-line-success); color: var(--x2ds-green); } .x2ds-badge.is-danger { border-color: var(--x2ds-line-danger); color: var(--x2ds-red); } /* ============================================================ FORMS ============================================================ */ .x2ds-field { display: grid; gap: 7px; } .x2ds-field > span { color: var(--x2ds-muted); font-size: var(--x2ds-fs-xs); font-weight: 800; letter-spacing: .08em; } .x2ds-input, .x2ds-select, .x2ds-textarea { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid var(--x2ds-line); border-radius: var(--x2ds-radius-md); outline: none; background: rgba(1, 16, 25, .72); color: var(--x2ds-text); font: 600 14px var(--x2ds-font); transition: border-color var(--x2ds-normal) var(--x2ds-ease), box-shadow var(--x2ds-normal) var(--x2ds-ease); } .x2ds-input, .x2ds-select { padding: 0 14px; } .x2ds-textarea { min-height: 110px; padding: 13px 14px; resize: vertical; } .x2ds-input:focus, .x2ds-select:focus, .x2ds-textarea:focus { border-color: rgba(85, 220, 255, .58); box-shadow: 0 0 0 3px rgba(85, 220, 255, .08); } /* ============================================================ PROGRESS ============================================================ */ .x2ds-progress { width: 100%; height: 7px; overflow: hidden; border-radius: var(--x2ds-radius-pill); background: rgba(255, 255, 255, .06); } .x2ds-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, var(--x2ds-cyan), var(--x2ds-blue) ); box-shadow: 0 0 12px rgba(85, 220, 255, .28); } /* ============================================================ STATUS / ALERT ============================================================ */ .x2ds-alert { padding: 13px 14px; border: 1px solid var(--x2ds-line); border-radius: var(--x2ds-radius-md); background: rgba(4, 28, 41, .74); color: var(--x2ds-text-soft); font-size: var(--x2ds-fs-sm); line-height: 1.5; } .x2ds-alert.is-success { border-color: var(--x2ds-line-success); background: rgba(21, 89, 67, .18); color: var(--x2ds-green); } .x2ds-alert.is-danger { border-color: var(--x2ds-line-danger); background: rgba(112, 20, 48, .20); color: #ff8ca1; } /* ============================================================ EMPTY STATE ============================================================ */ .x2ds-empty { padding: 30px 20px; text-align: center; border: 1px dashed var(--x2ds-line); border-radius: var(--x2ds-radius-lg); background: rgba(2, 17, 27, .42); } .x2ds-empty strong { display: block; color: var(--x2ds-text); font-size: 15px; } .x2ds-empty span { display: block; margin-top: 6px; color: var(--x2ds-muted); font-size: 12px; line-height: 1.5; } /* ============================================================ SKELETON ============================================================ */ .x2ds-skeleton { position: relative; overflow: hidden; border-radius: var(--x2ds-radius-sm); background: rgba(255, 255, 255, .045); } .x2ds-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .055), transparent ); animation: x2ds-shimmer 1.6s infinite; } @keyframes x2ds-shimmer { 100% { transform: translateX(100%); } } /* ============================================================ INTERACCIÓN / ACCESIBILIDAD ============================================================ */ .x2ds-button:focus-visible, .x2ds-input:focus-visible, .x2ds-select:focus-visible, .x2ds-textarea:focus-visible { outline: 2px solid var(--x2ds-cyan); outline-offset: 3px; } .x2ds-touch { min-width: 44px; min-height: 44px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 390px) { .x2ds-page { padding-left: 14px; padding-right: 14px; } .x2ds-grid { gap: 9px; } .x2ds-card { padding: 14px; } } @media (min-width: 650px) { .x2ds-page { padding-left: 22px; padding-right: 22px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .x2ds-button, .x2ds-input, .x2ds-select, .x2ds-textarea { transition: none !important; } .x2ds-skeleton::after { animation: none !important; } } /* UX1_B1_DESIGN_SYSTEM_END */ /* ========================================================= UX1-B1.2_OVERVIEW_SHELL_START CUBAXNOVA X2 Overview + Premium Command Shell Esta capa visual no modifica reglas del motor. ========================================================= */ /* --------------------------------------------------------- GLOBAL PLAYER SHELL --------------------------------------------------------- */ .x2-route-player { background: radial-gradient( circle at 15% -10%, rgba(23, 118, 155, .16), transparent 32% ), radial-gradient( circle at 95% 18%, rgba(58, 69, 180, .10), transparent 28% ), #020914; } .x2-route-player .x2-header { position: relative; z-index: 30; border-bottom: 1px solid rgba(120, 220, 255, .08); background: linear-gradient( 180deg, rgba(2, 12, 23, .96), rgba(3, 18, 30, .90) ); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .x2-route-player .x2-avatar { box-shadow: 0 0 0 1px rgba(99, 224, 255, .26), 0 8px 24px rgba(0, 0, 0, .25); } .x2-route-player .x2-menu-button { transition: transform .18s ease, border-color .18s ease, background .18s ease; } .x2-route-player .x2-menu-button:active { transform: scale(.94); } /* --------------------------------------------------------- OVERVIEW PAGE --------------------------------------------------------- */ .x2-route-overview .x2-shell-content { position: relative; overflow: hidden; } .x2-route-overview .x2-shell-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(43, 201, 255, .025), transparent 22%, transparent 78%, rgba(30, 107, 151, .025) ); } .x2-overview-shell { position: relative; z-index: 1; } .x2-overview-main { width: min( 100%, 820px ); margin: 0 auto; padding-left: clamp( 14px, 4vw, 24px ); padding-right: clamp( 14px, 4vw, 24px ); padding-bottom: 30px; } /* --------------------------------------------------------- BRAND / HERO --------------------------------------------------------- */ .x2-route-overview .x2-brand { position: relative; overflow: hidden; margin: 0 auto; border-bottom: 1px solid rgba(91, 213, 255, .08); background: radial-gradient( circle at 50% 30%, rgba(38, 193, 242, .09), transparent 48% ); } .x2-route-overview .x2-brand::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(74, 218, 255, .32), transparent ); } /* --------------------------------------------------------- COMMAND STATUS --------------------------------------------------------- */ .x2-command-status { position: relative; isolation: isolate; overflow: hidden; margin: 18px 0 22px; padding: 19px; border: 1px solid rgba(96, 214, 255, .14); border-radius: 25px; background: linear-gradient( 145deg, rgba(7, 35, 51, .96), rgba(4, 19, 32, .90) ); box-shadow: 0 22px 55px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .035); } .x2-command-status::before { content: ""; position: absolute; z-index: -1; width: 210px; height: 210px; right: -95px; top: -120px; border-radius: 50%; background: rgba(49, 211, 255, .12); filter: blur(38px); } .x2-command-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .x2-command-kicker { display: block; margin-bottom: 7px; color: #67ddff; font-size: 10px; font-weight: 900; letter-spacing: .19em; } .x2-command-status h1 { margin: 0; color: #f4fbff; font-size: clamp( 22px, 6vw, 30px ); line-height: 1.06; letter-spacing: -.035em; } .x2-command-status-head p { margin: 7px 0 0; color: #7894a2; font-size: 12px; } .x2-command-live { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 32px; padding: 0 11px; border: 1px solid rgba(100, 235, 187, .16); border-radius: 999px; background: rgba(55, 204, 153, .07); color: #70e9b9; font-size: 10px; font-weight: 900; letter-spacing: .12em; } .x2-command-live i { width: 7px; height: 7px; border-radius: 50%; background: #69e6b5; box-shadow: 0 0 12px rgba(105, 230, 181, .72); } .x2-command-metrics { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 10px; margin-top: 17px; } .x2-command-metrics article { min-width: 0; padding: 13px 14px; border: 1px solid rgba(98, 205, 239, .07); border-radius: 17px; background: rgba(3, 20, 32, .66); } .x2-command-metrics span { display: block; margin-bottom: 5px; color: #668795; font-size: 9px; font-weight: 800; letter-spacing: .16em; } .x2-command-metrics strong { display: block; overflow: hidden; color: #f4fbff; font-size: 17px; line-height: 1.1; text-overflow: ellipsis; } .x2-command-metrics strong.is-online { color: #72e8ba; font-size: 13px; letter-spacing: .05em; } /* --------------------------------------------------------- UNIFIED SECTION LANGUAGE --------------------------------------------------------- */ .x2-route-overview .x2-section { margin-top: 22px; } .x2-route-overview .x2-section-head { margin-bottom: 13px; padding: 0 2px; } .x2-route-overview .x2-section-head h2 { letter-spacing: -.025em; } .x2-route-overview .x2-eyebrow { letter-spacing: .17em; } /* --------------------------------------------------------- RESOURCE CARDS --------------------------------------------------------- */ .x2-route-overview .x2-resource-grid-a2 { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 10px; } .x2-route-overview .x2-resource-detail { position: relative; overflow: hidden; min-width: 0; border: 1px solid rgba(91, 203, 239, .09); border-radius: 21px; background: linear-gradient( 145deg, rgba(8, 37, 55, .84), rgba(4, 21, 34, .92) ); box-shadow: 0 15px 34px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .025); transition: transform .18s ease, border-color .18s ease; } .x2-route-overview .x2-resource-detail::after { content: ""; position: absolute; width: 110px; height: 110px; top: -65px; right: -55px; border-radius: 50%; background: rgba(65, 210, 255, .055); filter: blur(10px); pointer-events: none; } .x2-route-overview .x2-resource-detail:active { transform: scale(.985); border-color: rgba(91, 219, 255, .19); } .x2-route-overview .x2-resource-orb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), 0 8px 24px rgba(0, 0, 0, .19); } .x2-route-overview .x2-resource-title strong { font-size: clamp( 16px, 4.6vw, 21px ); letter-spacing: -.025em; } /* --------------------------------------------------------- PLANET --------------------------------------------------------- */ .x2-route-overview .x2-planet-card { position: relative; overflow: hidden; border: 1px solid rgba(111, 214, 245, .12); border-radius: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035); } .x2-route-overview .x2-planet-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(1, 9, 17, .02), rgba(1, 9, 17, .26) ); } .x2-route-overview .x2-planet-head, .x2-route-overview .x2-stat-grid { position: relative; z-index: 2; } .x2-route-overview .x2-rank-badge { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .x2-route-overview .x2-stat { border: 1px solid rgba(255, 255, 255, .045); background: rgba(2, 15, 25, .55); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } /* --------------------------------------------------------- QUEUES --------------------------------------------------------- */ .x2-route-overview .x2-queue-list { display: grid; gap: 10px; } .x2-route-overview .x2-queue { border: 1px solid rgba(83, 198, 232, .08); border-radius: 21px; background: linear-gradient( 145deg, rgba(7, 31, 47, .82), rgba(4, 20, 32, .88) ); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); } .x2-route-overview .x2-queue.is-active { border-color: rgba(79, 215, 255, .18); box-shadow: 0 15px 36px rgba(0, 0, 0, .19), inset 3px 0 0 rgba(63, 216, 255, .44); } /* --------------------------------------------------------- FLEETS --------------------------------------------------------- */ .x2-route-overview .x2-fleet-card { border: 1px solid rgba(85, 203, 239, .09); border-radius: 22px; background: linear-gradient( 145deg, rgba(7, 33, 50, .88), rgba(3, 18, 30, .93) ); box-shadow: 0 16px 38px rgba(0, 0, 0, .18); } .x2-route-overview .x2-fleet-card.is-return { border-color: rgba(226, 181, 91, .16); } .x2-route-overview .x2-fleet-countdown { font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* --------------------------------------------------------- EMPTY FLEET --------------------------------------------------------- */ .x2-route-overview .x2-empty-fleet { border: 1px dashed rgba(92, 204, 240, .12); border-radius: 21px; background: rgba(4, 24, 38, .56); } /* --------------------------------------------------------- COMMUNICATION --------------------------------------------------------- */ .x2-route-overview .x2-communication { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 10px; margin-top: 22px; } .x2-route-overview .x2-comm-action { position: relative; overflow: hidden; min-width: 0; border: 1px solid rgba(90, 208, 242, .09); border-radius: 21px; background: linear-gradient( 145deg, rgba(6, 32, 49, .85), rgba(3, 20, 32, .92) ); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); } /* --------------------------------------------------------- ACCESSIBILITY / INTERACTION --------------------------------------------------------- */ .x2-route-overview button:focus-visible, .x2-route-overview a:focus-visible { outline: 2px solid rgba(70, 218, 255, .92); outline-offset: 3px; } /* --------------------------------------------------------- TABLET / DESKTOP --------------------------------------------------------- */ @media (min-width: 720px) { .x2-command-metrics { grid-template-columns: repeat( 4, minmax(0, 1fr) ); } .x2-route-overview .x2-resource-grid-a2 { grid-template-columns: repeat( 4, minmax(0, 1fr) ); } } /* --------------------------------------------------------- SMALL MOBILE --------------------------------------------------------- */ @media (max-width: 370px) { .x2-overview-main { padding-left: 11px; padding-right: 11px; } .x2-command-status { padding: 16px; } .x2-command-status h1 { font-size: 21px; } .x2-command-metrics { gap: 8px; } .x2-command-metrics article { padding: 11px; } .x2-route-overview .x2-resource-grid-a2 { gap: 8px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .x2-route-overview *, .x2-route-player .x2-menu-button { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* UX1-B1.2_OVERVIEW_SHELL_END */ /* ========================================================== CUBAXNOVA X2 UX1-B1.3 — IMPERIO VISUAL SYSTEM ========================================================== */ /* UX1_B13_IMPERIO_START */ /* ---------------------------------------------------------- CONTENEDOR GENERAL ---------------------------------------------------------- */ .x2-b1-page, .x2-c3-page { width: min(100%, 760px); margin: 0 auto; padding: 22px 18px calc(118px + env(safe-area-inset-bottom)); color: #edf8ff; } .x2-b1-page *, .x2-c3-page * { box-sizing: border-box; } /* ---------------------------------------------------------- HERO DE MODULO ---------------------------------------------------------- */ .x2-b1-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 22px; border: 1px solid rgba(86, 215, 255, .17); border-radius: 28px; background: radial-gradient( circle at 85% 12%, rgba(61, 209, 255, .14), transparent 34% ), radial-gradient( circle at 0% 100%, rgba(94, 90, 255, .10), transparent 42% ), linear-gradient( 145deg, rgba(8, 38, 57, .96), rgba(4, 20, 34, .96) ); box-shadow: 0 18px 52px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .025); } .x2-b1-hero::after { content: ""; position: absolute; width: 180px; height: 180px; top: -105px; right: -70px; border-radius: 999px; background: rgba(63, 218, 255, .11); filter: blur(12px); pointer-events: none; } .x2-b1-hero-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .x2-b1-back { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid rgba(86, 215, 255, .18); border-radius: 16px; background: rgba(4, 25, 39, .78); color: #69dcff; font-size: 27px; line-height: 1; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .x2-b1-back:active { transform: scale(.94); background: rgba(16, 62, 81, .88); } .x2-b1-hero h1 { margin: 4px 0 0; color: #f6fbff; font-size: clamp(27px, 7vw, 38px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; } .x2-b1-hero .x2-eyebrow { color: #6fdcff; } /* ---------------------------------------------------------- CAMPOS / ESTADISTICAS DEL HERO ---------------------------------------------------------- */ .x2-b1-fields { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(92, 211, 248, .14); border-radius: 14px; background: rgba(1, 15, 27, .50); color: #a0b6c1; font-size: 11px; white-space: nowrap; } /* ---------------------------------------------------------- STRIP DE RECURSOS ---------------------------------------------------------- */ .x2-b1-resource-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; } .x2-b1-resource-strip > * { min-width: 0; padding: 11px 9px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 15px; background: rgba(2, 17, 29, .55); text-align: center; } .x2-b1-resource-strip small { display: block; overflow: hidden; color: #7894a3; font-size: 9px; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .09em; } .x2-b1-resource-strip strong { display: block; margin-top: 5px; overflow: hidden; color: #f3f9fc; font-size: 13px; text-overflow: ellipsis; } /* ---------------------------------------------------------- ALERTAS ---------------------------------------------------------- */ .x2-b1-warning, .x2-cosmis-native-flash { position: relative; margin: 12px 0; padding: 14px 15px 14px 17px; border-radius: 17px; font-size: 12px; line-height: 1.55; } .x2-b1-warning { border: 1px solid rgba(255, 194, 78, .18); background: linear-gradient( 135deg, rgba(77, 52, 12, .31), rgba(28, 28, 20, .50) ); color: #e9c873; } .x2-b1-warning::before { content: ""; position: absolute; top: 11px; bottom: 11px; left: 5px; width: 3px; border-radius: 999px; background: #f2b94f; } .x2-cosmis-native-flash.is-success { border: 1px solid rgba(80, 232, 172, .18); background: rgba(24, 93, 67, .20); color: #77e9b8; } .x2-cosmis-native-flash.is-error { border: 1px solid rgba(255, 92, 129, .20); background: rgba(113, 25, 49, .20); color: #ff789b; } /* ---------------------------------------------------------- BLOQUES GENERALES ---------------------------------------------------------- */ .x2-b1-queue-card, .x2-b1-section, .x2-c3-section, .x2-cosmis-queue-panel { position: relative; overflow: hidden; margin-bottom: 18px; padding: 20px; border: 1px solid rgba(82, 207, 245, .13); border-radius: 26px; background: linear-gradient( 145deg, rgba(7, 32, 48, .93), rgba(3, 19, 31, .94) ); box-shadow: 0 14px 42px rgba(0, 0, 0, .19), inset 0 1px rgba(255, 255, 255, .018); } .x2-b1-queue-card::before, .x2-b1-section::before, .x2-c3-section::before, .x2-cosmis-queue-panel::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(97, 220, 255, .22), transparent ); } /* ---------------------------------------------------------- CABECERAS DE SECCION ---------------------------------------------------------- */ .x2-b1-section-head, .x2-cosmis-queue-panel-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .x2-b1-section-head h2, .x2-cosmis-queue-panel-head h2 { margin: 4px 0 0; color: #f2f8fb; font-size: 22px; font-weight: 850; letter-spacing: -.025em; } .x2-b1-section-meta, .x2-b1-queue-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(77, 210, 255, .16); border-radius: 999px; background: rgba(5, 27, 41, .78); color: #62d9ff; font-size: 10px; font-weight: 800; letter-spacing: .05em; } /* ---------------------------------------------------------- ESTADO VACIO ---------------------------------------------------------- */ .x2-b1-empty { display: flex; align-items: center; min-height: 88px; padding: 16px; border: 1px dashed rgba(105, 190, 218, .15); border-radius: 19px; background: rgba(1, 14, 24, .33); color: #78929e; font-size: 12px; } /* ---------------------------------------------------------- COLAS ---------------------------------------------------------- */ .x2-b1-queue-list { display: grid; gap: 10px; } .x2-b1-queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 78px; padding: 13px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 19px; background: rgba(2, 18, 30, .58); } .x2-b1-queue-item.is-active { border-color: rgba(72, 215, 255, .18); background: linear-gradient( 135deg, rgba(7, 43, 60, .73), rgba(2, 22, 34, .72) ); } .x2-b1-queue-pulse { width: 10px; height: 10px; border-radius: 999px; background: #415762; } .x2-b1-queue-item.is-active .x2-b1-queue-pulse { background: #4ee4b2; box-shadow: 0 0 0 5px rgba(78, 228, 178, .09), 0 0 18px rgba(78, 228, 178, .26); } .x2-b1-queue-copy { min-width: 0; } .x2-b1-queue-copy strong { display: block; overflow: hidden; color: #f0f7fa; font-size: 13px; text-overflow: ellipsis; } .x2-b1-queue-copy span { color: #7f9ba8; font-size: 11px; } .x2-b1-countdown { display: inline-flex; margin-top: 7px; padding: 5px 8px; border-radius: 9px; background: rgba(48, 198, 242, .08); color: #6bdfff !important; font-variant-numeric: tabular-nums; font-weight: 800; } .x2-b1-cancel { width: 38px; min-width: 38px; height: 38px; border: 1px solid rgba(255, 95, 130, .17); border-radius: 12px; background: rgba(94, 21, 43, .18); color: #ff7597; cursor: pointer; } /* ---------------------------------------------------------- GRID EDIFICIOS / INVESTIGACIONES ---------------------------------------------------------- */ .x2-b1-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .x2-b1-building { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 100%; padding: 15px; border: 1px solid rgba(92, 205, 239, .11); border-radius: 21px; background: linear-gradient( 155deg, rgba(8, 38, 54, .83), rgba(3, 20, 32, .93) ); box-shadow: inset 0 1px rgba(255, 255, 255, .018); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .x2-b1-building:active { transform: scale(.985); } .x2-b1-building-top { display: flex; align-items: flex-start; gap: 11px; } .x2-b1-building-icon { position: relative; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; border: 1px solid rgba(75, 209, 249, .11); border-radius: 17px; background: rgba(6, 28, 43, .9); color: #5ddcff; } .x2-b1-building-icon img { width: 100%; height: 100%; object-fit: cover; } .x2-b1-building-title { min-width: 0; } .x2-b1-building-title small { color: #718e9c; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .x2-b1-building-title h3, .x2-b1-building-title strong { display: block; margin-top: 4px; color: #f2f8fb; font-size: 14px; line-height: 1.2; } .x2-b1-building p { color: #7994a1; font-size: 11px; line-height: 1.45; } .x2-b1-building-footer { margin-top: auto; padding-top: 12px; } /* ---------------------------------------------------------- BOTONES DE EDIFICIOS ---------------------------------------------------------- */ .x2-b1-upgrade, .x2-c3-build { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 43px; padding: 9px 12px; border: 1px solid rgba(64, 216, 255, .22); border-radius: 14px; background: linear-gradient( 135deg, rgba(18, 128, 165, .43), rgba(12, 83, 113, .48) ); color: #9beaff; font-size: 11px; font-weight: 850; cursor: pointer; transition: transform .16s ease, filter .16s ease; } .x2-b1-upgrade:active, .x2-c3-build:active { transform: scale(.975); } .x2-b1-upgrade.is-building, .x2-c3-build.is-disabled { border-color: rgba(115, 142, 154, .12); background: rgba(52, 70, 79, .18); color: #68808a; cursor: default; } /* ---------------------------------------------------------- BONUS ---------------------------------------------------------- */ .x2-research-class-bonus { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 0; padding: 8px 10px; border: 1px solid rgba(139, 102, 255, .16); border-radius: 12px; background: rgba(93, 55, 188, .10); color: #a993ff; } /* ---------------------------------------------------------- HANGAR Y DEFENSA ---------------------------------------------------------- */ .x2-c3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .x2-c3-unit-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 15px; border: 1px solid rgba(91, 207, 241, .11); border-radius: 22px; background: linear-gradient( 155deg, rgba(8, 37, 53, .87), rgba(3, 19, 31, .95) ); } .x2-c3-unit-head { display: flex; align-items: center; gap: 11px; } .x2-c3-unit-image { position: relative; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 62px; border: 1px solid rgba(74, 210, 250, .12); border-radius: 18px; background: rgba(2, 20, 32, .88); } .x2-c3-unit-image img { width: 100%; height: 100%; object-fit: cover; } .x2-c3-unit-title { min-width: 0; } .x2-c3-unit-title strong { color: #f1f8fb; font-size: 14px; } .x2-c3-unit-title small { color: #7794a1; font-size: 10px; } .x2-c3-status { display: inline-flex; margin-top: 6px; padding: 4px 7px; border-radius: 999px; background: rgba(67, 217, 172, .08); color: #61dcb0; font-size: 8px; font-weight: 900; letter-spacing: .07em; } .x2-c3-unit-description { min-height: 44px; margin: 11px 0; color: #78929f; font-size: 10px; line-height: 1.45; } .x2-c3-producing { margin: 8px 0; padding: 8px 9px; border-radius: 11px; background: rgba(74, 211, 255, .07); color: #64dfff; font-size: 10px; } .x2-c3-cost-label { margin-top: 8px; color: #66808d; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .x2-c3-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 7px; } .x2-c3-costs > * { min-width: 0; padding: 7px 5px; border-radius: 9px; background: rgba(1, 14, 23, .58); color: #91a8b2; font-size: 8px; text-align: center; } .x2-c3-limit { margin: 10px 0; color: #6e8995; font-size: 9px; } .x2-c3-order { margin-top: auto; } .x2-c3-stepper { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; margin-bottom: 8px; } .x2-c3-stepper button, .x2-c3-stepper input { min-width: 0; height: 38px; border: 1px solid rgba(87, 208, 244, .14); border-radius: 11px; background: rgba(3, 22, 35, .84); color: #dff8ff; text-align: center; } .x2-c3-stepper button { color: #61dcff; font-size: 18px; cursor: pointer; } .x2-c3-disabled-detail { margin: 8px 0; color: #6e8088; font-size: 9px; } /* ---------------------------------------------------------- COSMIS ---------------------------------------------------------- */ .x2-cosmis-queue-panel { border-color: rgba(169, 94, 255, .17); background: radial-gradient( circle at 90% 0%, rgba(145, 78, 255, .14), transparent 38% ), linear-gradient( 145deg, rgba(24, 21, 48, .88), rgba(6, 21, 35, .95) ); } .x2-cosmis-rate { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(170, 106, 255, .18); border-radius: 13px; background: rgba(85, 43, 143, .15); color: #c5a0ff; font-size: 10px; font-weight: 800; } .x2-cosmis-current-build { padding: 14px; border: 1px solid rgba(166, 102, 255, .11); border-radius: 17px; background: rgba(15, 15, 35, .40); } .x2-cosmis-current-time { margin-top: 8px; color: #ac94d7; } .x2-cosmis-external-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .x2-cosmis-external-actions form { min-width: 0; } .x2-cosmis-external-actions button { width: 100%; min-height: 48px; padding: 9px; border: 1px solid rgba(176, 111, 255, .20); border-radius: 14px; background: linear-gradient( 135deg, rgba(104, 55, 166, .25), rgba(46, 38, 104, .28) ); color: #d1b7ff; font-size: 10px; font-weight: 800; } .x2-cosmis-external-note { margin-top: 11px; color: #766b94; font-size: 9px; line-height: 1.45; } /* ---------------------------------------------------------- TOAST ---------------------------------------------------------- */ .x2-b1-toast { position: fixed; z-index: 1200; left: 50%; bottom: calc( 98px + env(safe-area-inset-bottom) ); width: min( calc(100% - 32px), 470px ); transform: translateX(-50%); padding: 13px 15px; border: 1px solid rgba(78, 211, 250, .17); border-radius: 15px; background: rgba(3, 24, 37, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .42); color: #c9e9f3; font-size: 11px; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 430px) { .x2-b1-page, .x2-c3-page { padding-left: 14px; padding-right: 14px; } .x2-b1-hero, .x2-b1-queue-card, .x2-b1-section, .x2-c3-section, .x2-cosmis-queue-panel { border-radius: 23px; } .x2-b1-hero { padding: 18px; } .x2-b1-grid, .x2-c3-grid { gap: 9px; } .x2-b1-building, .x2-c3-unit-card { padding: 12px; } .x2-b1-building-icon, .x2-c3-unit-image { width: 52px; height: 52px; } .x2-b1-building-title h3, .x2-b1-building-title strong, .x2-c3-unit-title strong { font-size: 12px; } } @media (max-width: 360px) { .x2-b1-resource-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x2-b1-grid, .x2-c3-grid { grid-template-columns: 1fr; } .x2-cosmis-external-actions { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- ACCESIBILIDAD ---------------------------------------------------------- */ .x2-b1-back:focus-visible, .x2-b1-cancel:focus-visible, .x2-b1-upgrade:focus-visible, .x2-c3-build:focus-visible, .x2-c3-stepper button:focus-visible, .x2-c3-stepper input:focus-visible, .x2-cosmis-external-actions button:focus-visible { outline: 2px solid rgba(87, 219, 255, .9); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .x2-b1-back, .x2-b1-building, .x2-b1-upgrade, .x2-c3-build { transition: none !important; } } /* UX1_B13_IMPERIO_END */ /* ========================================================= UX1_B131_CARD_POLISH_START CubaXNova X2 Tarjetas compartidas: - Recursos - Instalaciones - Investigación Objetivos: - conservar 2 columnas; - eliminar cruces entre NIVEL / ESTADO; - dar ancho real a nombres largos; - mantener jerarquía visual uniforme; - mejorar legibilidad móvil. ========================================================= */ @media (max-width: 760px) { /* * GRID PRINCIPAL */ .x2-b1-grid { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 14px !important; align-items: stretch; } /* * TARJETA */ .x2-b1-building { min-width: 0 !important; padding: 16px !important; border-radius: 24px !important; overflow: hidden !important; display: flex; flex-direction: column; } /* * CABECERA DE TARJETA * * Fila 1: * icono | estado * * Fila 2: * nombre / nivel usando todo el ancho */ .x2-b1-building-top { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; grid-template-areas: "icon status" "title title"; column-gap: 12px !important; row-gap: 11px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; } .x2-b1-building-icon { grid-area: icon; width: 64px !important; height: 64px !important; min-width: 64px !important; margin: 0 !important; align-self: start; } .x2-b1-building-icon img { max-width: 100%; max-height: 100%; object-fit: contain; } /* * NOMBRE / NIVEL */ .x2-b1-building-title { grid-area: title; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; position: relative; } .x2-b1-building-title > * { max-width: 100%; } .x2-b1-building-title h2, .x2-b1-building-title h3, .x2-b1-building-title h4 { margin-right: 0 !important; max-width: 100% !important; line-height: 1.08 !important; overflow-wrap: break-word; word-break: normal; hyphens: auto; } /* * Cualquier badge/estado que sea hijo directo * de la cabecera ocupa la esquina superior derecha. */ .x2-b1-building-top > :not(.x2-b1-building-icon) :not(.x2-b1-building-title) { grid-area: status; justify-self: end; align-self: start; position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin: 0 !important; max-width: 100%; } /* * También neutraliza badges absolutos * cuando estén dentro del bloque del título. */ .x2-b1-building-title > [class*="status"], .x2-b1-building-title > [class*="badge"], .x2-b1-building-title > [class*="state"] { position: static !important; inset: auto !important; display: inline-flex !important; width: max-content; max-width: 100%; margin: 0 0 8px 0 !important; } /* * BADGES */ .x2-b1-building [class*="status"], .x2-b1-building [class*="badge"] { font-size: 10px; line-height: 1.05; white-space: nowrap; box-sizing: border-box; } /* * DESCRIPCIÓN */ .x2-b1-building > p, .x2-b1-building-description { font-size: 13px !important; line-height: 1.45 !important; overflow-wrap: break-word; word-break: normal; } /* * BLOQUES INTERNOS */ .x2-b1-building-footer { margin-top: auto; } .x2-b1-building button { max-width: 100%; } } /* * TELÉFONOS ESTRECHOS */ @media (max-width: 390px) { .x2-b1-grid { gap: 10px !important; } .x2-b1-building { padding: 14px 12px !important; border-radius: 21px !important; } .x2-b1-building-top { grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 10px !important; } .x2-b1-building-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; } .x2-b1-building-title h2, .x2-b1-building-title h3, .x2-b1-building-title h4 { font-size: 18px !important; } .x2-b1-building [class*="status"], .x2-b1-building [class*="badge"] { font-size: 9px; } } /* UX1_B131_CARD_POLISH_END */ /* ========================================================== UX1_B132_REQUIREMENTS_UI_START Requisitos reales + corrección responsive de cabecera ========================================================== */ /* * En tarjetas estrechas no intentamos colocar * icono + título + badge en una sola línea. * * El icono ocupa la columna izquierda. * Estado y nombre utilizan la columna derecha. */ .x2-b1-building-top { display: grid !important; grid-template-columns: 84px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 14px !important; row-gap: 7px !important; align-items: start !important; } .x2-b1-building-icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; min-width: 0; } .x2-b1-building-title { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; padding: 0 !important; } .x2-b1-building-title small { display: block; margin-bottom: 3px; } .x2-b1-building-title h3 { max-width: 100%; overflow-wrap: anywhere; word-break: normal; } .x2-b1-status { grid-column: 2 !important; grid-row: 1 !important; position: static !important; justify-self: start !important; align-self: start !important; max-width: 100% !important; margin: 0 !important; white-space: nowrap; } /* * Requisitos pendientes. */ .x2-b1-requirements { margin-top: 16px; padding: 13px; border: 1px solid rgba(65, 198, 255, .16); border-radius: 16px; background: rgba(1, 13, 24, .42); } .x2-b1-requirements-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; } .x2-b1-requirements-head > span { font-size: 10px; font-weight: 800; letter-spacing: .13em; color: rgba(180, 206, 222, .72); } .x2-b1-requirements-head > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid rgba(255, 182, 90, .28); border-radius: 999px; font-size: 11px; color: #ffc078; background: rgba(255, 166, 67, .08); } .x2-b1-requirements-list { display: grid; gap: 11px; } .x2-b1-requirement { min-width: 0; } .x2-b1-requirement-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 6px; } .x2-b1-requirement-copy > span { min-width: 0; font-size: 12px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; color: rgba(220, 235, 245, .84); } .x2-b1-requirement-copy > strong { font-size: 12px; font-weight: 800; color: #ffc078; white-space: nowrap; } .x2-b1-requirement-track { position: relative; width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(90, 125, 145, .14); } .x2-b1-requirement-track > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient( 90deg, #38d4ff, #8e76ff ); } /* * Protección adicional para móviles estrechos. */ @media (max-width: 430px) { .x2-b1-building-top { grid-template-columns: 74px minmax(0, 1fr) !important; column-gap: 12px !important; } .x2-b1-status { font-size: 9px !important; letter-spacing: .04em !important; } .x2-b1-building-title h3 { font-size: clamp( 17px, 4.4vw, 21px ) !important; line-height: 1.08 !important; } } /* UX1_B132_REQUIREMENTS_UI_END */ /* ========================================================== CUBAXNOVA_X2_B133_CARD_ORGANIZATION_START UX1-B1.3.3 Organización responsive de tarjetas de Imperio. ========================================================== */ .x2-b1-building { min-width: 0 !important; overflow: hidden !important; } /* * En móvil la cabecera deja de intentar meter * icono + nombre + badge en una sola línea. * * Cada dato tiene su propio espacio. */ .x2-b1-building-top { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "status" "icon" "title" !important; gap: 10px !important; align-items: start !important; min-width: 0 !important; } .x2-b1-building-top .x2-b1-status { grid-area: status; position: static !important; width: max-content !important; max-width: 100% !important; justify-self: end !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 10px !important; line-height: 1 !important; padding: 7px 9px !important; } .x2-b1-building-top .x2-b1-building-icon { grid-area: icon; position: relative !important; margin: 0 !important; } .x2-b1-building-title { grid-area: title; width: 100% !important; min-width: 0 !important; margin: 0 !important; } .x2-b1-building-title small { display: block !important; margin: 0 0 5px !important; white-space: normal !important; } .x2-b1-building-title h3 { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 20px !important; line-height: 1.12 !important; letter-spacing: -.02em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-wrap: pretty; } /* * Descripciones: * tampoco se parten palabras artificialmente. */ .x2-b1-description { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* * REQUERIMIENTOS */ .x2-b1-requirements { width: 100%; margin: 16px 0 4px; padding: 12px; border: 1px solid rgba(244, 191, 91, .26); border-radius: 14px; background: linear-gradient( 145deg, rgba(244, 191, 91, .075), rgba(244, 191, 91, .025) ); box-sizing: border-box; } .x2-b1-requirements-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .x2-b1-requirements-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid rgba(244, 191, 91, .34); border-radius: 9px; color: #f4c86f; background: rgba(244, 191, 91, .08); font-weight: 800; } .x2-b1-requirements-head div { min-width: 0; } .x2-b1-requirements-head small { display: block; margin-bottom: 2px; color: rgba(244, 200, 111, .64); font-size: 9px; font-weight: 800; letter-spacing: .13em; } .x2-b1-requirements-head strong { display: block; color: #f1d391; font-size: 12px; line-height: 1.2; } .x2-b1-requirements-list { display: grid; gap: 7px; } .x2-b1-requirement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 9px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 10px; background: rgba(1, 12, 23, .42); } .x2-b1-requirement > span { min-width: 0; color: rgba(230, 240, 247, .87); font-size: 12px; font-weight: 650; line-height: 1.3; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .x2-b1-requirement-level { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .x2-b1-requirement-level small { color: rgba(151, 177, 194, .66); font-size: 10px; } .x2-b1-requirement-level strong { color: #f3c76f; font-size: 12px; white-space: nowrap; } /* * Un poco más de anchura en pantallas mayores: * volvemos a composición horizontal. */ @media (min-width: 720px) { .x2-b1-building-top { grid-template-columns: 72px minmax(0, 1fr) auto !important; grid-template-areas: "icon title status" !important; align-items: center !important; } .x2-b1-building-top .x2-b1-status { justify-self: end !important; } } /* CUBAXNOVA_X2_B133_CARD_ORGANIZATION_END */ /* CUBAXNOVA_X2_B134_CARD_HEADER_START */ /* |-------------------------------------------------------------------------- | UX1-B1.3.4 — CARD HEADER |-------------------------------------------------------------------------- | | Icono centrado | Nombre debajo | Nivel debajo del nombre | Badge en esquina superior derecha | */ .x2-b1-building-top { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; padding: 14px 4px 2px; gap: 10px; text-align: center; } .x2-b1-building-top .x2-b1-status { position: absolute; top: 0; right: 0; z-index: 2; width: auto; max-width: calc(100% - 82px); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .x2-b1-building-icon { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 76px; height: 76px; min-width: 76px; min-height: 76px; margin: 8px auto 0; } .x2-b1-building-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .x2-b1-building-heading { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; gap: 5px; text-align: center; } .x2-b1-building-heading h3 { display: block; width: 100%; margin: 0; padding: 0 4px; font-size: 18px; line-height: 1.18; font-weight: 750; text-align: center; word-break: normal; overflow-wrap: normal; hyphens: none; } .x2-b1-building-heading small { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; opacity: .82; } .x2-b1-building-heading small strong { font-size: 12px; color: var( --x2-accent, #57d9ff ); } .x2-b1-description { margin-top: 16px; } /* |-------------------------------------------------------------------------- | REQUISITOS |-------------------------------------------------------------------------- */ .x2-b1-requirements, .x2-b1-missing-requirements { clear: both; width: 100%; margin-top: 16px; } /* |-------------------------------------------------------------------------- | MOVIL |-------------------------------------------------------------------------- */ @media (max-width: 430px) { .x2-b1-building-top { padding-top: 12px; } .x2-b1-building-icon { width: 68px; height: 68px; min-width: 68px; min-height: 68px; } .x2-b1-building-heading h3 { font-size: 17px; line-height: 1.18; } .x2-b1-building-top .x2-b1-status { max-width: calc( 100% - 76px ); font-size: 10px; } } /* CUBAXNOVA_X2_B134_CARD_HEADER_END */ /* CUBAXNOVA_X2_B135_MOBILE_CARD_LAYOUT_START */ /* |-------------------------------------------------------------------------- | UX1-B1.3.5 | Tarjetas de Imperio — composición móvil definitiva |-------------------------------------------------------------------------- */ /* * Ningún contenido de tarjeta debe provocar * desplazamiento horizontal. */ .x2-b1-page, .x2-b1-section, .x2-b1-grid, .x2-b1-building { min-width: 0; } .x2-b1-page { overflow-x: hidden; } /* |-------------------------------------------------------------------------- | CABECERA DE TARJETA |-------------------------------------------------------------------------- | | Orden visual: | | badge | icono | nombre | nivel | */ .x2-b1-building { box-sizing: border-box; overflow: hidden; } .x2-b1-building-top { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100%; min-width: 0; padding: 52px 18px 0 !important; gap: 0 !important; text-align: center; } /* * Estado: DISPONIBLE / BLOQUEADO / SIN RECURSOS. * Se mantiene separado de icono y título. */ .x2-b1-building-top .x2-b1-status { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; transform: none !important; z-index: 5; max-width: calc(100% - 28px); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * Icono principal. */ .x2-b1-building-icon { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 78px !important; height: 78px !important; min-width: 78px !important; min-height: 78px !important; max-width: 78px !important; margin: 0 auto 14px !important; flex: 0 0 78px; } .x2-b1-building-icon img { display: block; max-width: 64px; max-height: 64px; width: auto; height: auto; object-fit: contain; } /* * Nombre y nivel. */ .x2-b1-building-heading { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 !important; text-align: center; } .x2-b1-building-heading h3 { width: 100%; max-width: 100%; margin: 0 !important; padding: 0 4px; box-sizing: border-box; text-align: center; font-size: 21px !important; line-height: 1.16 !important; font-weight: 800; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .x2-b1-building-heading small { display: block; margin: 8px 0 0 !important; padding: 0; text-align: center; font-size: 13px !important; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } /* * La descripción empieza claramente después * de la cabecera. */ .x2-b1-description { position: relative; margin-top: 22px !important; width: 100%; box-sizing: border-box; } /* |-------------------------------------------------------------------------- | HERO / CAMPOS |-------------------------------------------------------------------------- */ .x2-b1-hero, .x2-b1-hero-top { min-width: 0; } .x2-b1-hero-top { box-sizing: border-box; } .x2-b1-fields { min-width: 0; max-width: 46%; box-sizing: border-box; overflow: hidden; } .x2-b1-fields strong { white-space: nowrap; } /* |-------------------------------------------------------------------------- | MÓVIL |-------------------------------------------------------------------------- */ @media (max-width: 640px) { /* * Una tarjeta por fila. * * Ya no comprimimos nombre, descripción, * requisitos, costes y acciones en media pantalla. */ .x2-b1-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .x2-b1-building { width: 100% !important; max-width: none !important; margin: 0 !important; } /* * Cabecera más espaciosa en móvil. */ .x2-b1-building-top { padding: 54px 20px 0 !important; } .x2-b1-building-icon { width: 82px !important; height: 82px !important; min-width: 82px !important; min-height: 82px !important; max-width: 82px !important; flex-basis: 82px; margin-bottom: 15px !important; } .x2-b1-building-heading h3 { max-width: 320px; margin-left: auto !important; margin-right: auto !important; font-size: 22px !important; line-height: 1.15 !important; } .x2-b1-building-heading small { font-size: 13px !important; } /* * Evitar que CAMPOS salga del hero. */ .x2-b1-hero-top { gap: 10px; } .x2-b1-fields { flex: 0 1 auto !important; max-width: 44% !important; padding-left: 12px !important; padding-right: 12px !important; } .x2-b1-fields strong { font-size: 20px !important; } } /* |-------------------------------------------------------------------------- | TELÉFONOS ESTRECHOS |-------------------------------------------------------------------------- */ @media (max-width: 390px) { .x2-b1-building-top { padding-left: 16px !important; padding-right: 16px !important; } .x2-b1-building-heading h3 { font-size: 21px !important; } .x2-b1-building-top .x2-b1-status { top: 12px !important; right: 12px !important; max-width: calc(100% - 24px); font-size: 10px !important; } .x2-b1-fields { max-width: 43% !important; padding-left: 9px !important; padding-right: 9px !important; } .x2-b1-fields strong { font-size: 18px !important; } } /* |-------------------------------------------------------------------------- | TABLET / ESCRITORIO |-------------------------------------------------------------------------- */ @media (min-width: 641px) { .x2-b1-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* CUBAXNOVA_X2_B135_MOBILE_CARD_LAYOUT_END */ /* CUBAXNOVA_X2_B136_NATIVE_CARD_START */ /* * UX1-B1.3.6 * * Cabecera visual utilizando directamente * el catálogo gráfico nativo de OGameX. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; min-height: 218px !important; padding: 20px 18px 22px !important; overflow: hidden !important; border-radius: 22px !important; isolation: isolate; background: #041522 !important; } /* * Fotografía / ilustración real OGameX. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--x2-native-object-image); background-repeat: no-repeat; background-position: center 38%; background-size: cover; opacity: .82; transform: scale(1.025); } /* * Capa que asegura contraste * para nombre y nivel. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(2, 9, 20, .04) 0%, rgba(2, 9, 20, .10) 28%, rgba(2, 9, 20, .52) 64%, rgba(2, 9, 20, .96) 100% ); } /* * Ya no necesitamos el icono pequeño * cuando existe la ilustración principal. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-icon { display: none !important; } /* * Estado separado arriba a la derecha. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top .x2-b1-status { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; z-index: 4 !important; width: auto !important; max-width: calc(100% - 28px) !important; margin: 0 !important; } /* * Nombre + nivel centrados sobre * la zona inferior de la imagen. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-heading { position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 8px !important; text-align: center !important; } .x2-b1-building[data-x2-native-card-image] .x2-b1-building-heading h3 { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: clamp(22px, 5.2vw, 30px) !important; line-height: 1.08 !important; font-weight: 800 !important; text-align: center !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-shadow: 0 3px 12px rgba(0, 0, 0, .95); } .x2-b1-building[data-x2-native-card-image] .x2-b1-building-heading small { display: block !important; margin-top: 9px !important; font-size: 14px !important; line-height: 1 !important; letter-spacing: .12em !important; text-transform: uppercase !important; text-align: center !important; opacity: .94 !important; text-shadow: 0 2px 9px rgba(0, 0, 0, .95); } /* * Separa claramente la descripción * de la cabecera visual. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-description { margin-top: 20px !important; } /* * Móvil: imagen suficientemente grande * sin convertir la tarjeta en un banner gigante. */ @media (max-width: 430px) { .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top { min-height: 205px !important; padding: 18px 16px 20px !important; } .x2-b1-building[data-x2-native-card-image] .x2-b1-building-heading h3 { font-size: 24px !important; } } /* * Tablet / escritorio. */ @media (min-width: 760px) { .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top { min-height: 230px !important; } .x2-b1-building[data-x2-native-card-image] .x2-b1-building-heading h3 { font-size: 28px !important; } } /* CUBAXNOVA_X2_B136_NATIVE_CARD_END */ /* CUBAXNOVA_X2_B136F_REAL_IMG_CSS */ .x2-b1-building-top.x2-has-native-image { position: relative !important; overflow: hidden !important; isolation: isolate !important; min-height: 320px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; padding: 24px !important; background: #03111e !important; } .x2-b1-building-top.x2-has-native-image .x2-native-building-image { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; visibility: visible !important; z-index: 0 !important; pointer-events: none !important; } .x2-b1-building-top.x2-has-native-image .x2-native-building-overlay { display: block !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(2,12,22,.08) 0%, rgba(2,12,22,.18) 38%, rgba(2,12,22,.58) 72%, rgba(2,12,22,.94) 100% ) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-icon { display: none !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-status { position: absolute !important; top: 22px !important; right: 22px !important; z-index: 5 !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading { position: relative !important; z-index: 4 !important; width: 100% !important; text-align: center !important; margin: 0 !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { position: relative !important; z-index: 4 !important; width: 100% !important; margin: 0 0 10px !important; text-align: center !important; font-size: 28px !important; line-height: 1.1 !important; color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.95) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small { position: relative !important; z-index: 4 !important; display: block !important; width: 100% !important; margin: 0 !important; text-align: center !important; color: rgba(255,255,255,.94) !important; font-size: 17px !important; letter-spacing: .15em !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small strong { color: #4bdcff !important; } @media (max-width: 430px) { .x2-b1-building-top.x2-has-native-image { min-height: 300px !important; padding: 20px !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { font-size: 25px !important; } } /* CUBAXNOVA_X2_B136G2_NATIVE_HERO_START */ /* * UX1-B1.36G2 * * Hero gráfico basado exclusivamente * en el catálogo nativo de OGameX. * * Se deshabilita el renderer legacy ::before. */ .x2-b1-building[data-x2-native-card-image] .x2-b1-building-top::before { content: none !important; display: none !important; background-image: none !important; } /* * Contenedor principal de la ilustración. */ .x2-b1-building-top.x2-has-native-image { position: relative !important; isolation: isolate !important; overflow: hidden !important; min-height: 300px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; padding: 24px 20px 26px !important; background: #03111e !important; } /* * Imagen nativa real de OGameX. * * NO usamos cover: * imgSmall/imgMicro son thumbnails. */ .x2-b1-building-top.x2-has-native-image > .x2-native-building-image { display: block !important; position: absolute !important; left: 50% !important; top: 43% !important; transform: translate(-50%, -50%) scale(1) !important; width: 68% !important; height: 68% !important; max-width: 230px !important; max-height: 230px !important; min-width: 170px !important; min-height: 170px !important; object-fit: contain !important; object-position: center !important; opacity: .72 !important; visibility: visible !important; z-index: 1 !important; pointer-events: none !important; filter: brightness(1.12) contrast(1.08) saturate(1.05) !important; } /* * Gradiente solamente para asegurar * legibilidad del nombre. */ .x2-b1-building-top.x2-has-native-image > .x2-native-building-overlay { display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(3,17,30,.03) 0%, rgba(3,17,30,.10) 42%, rgba(3,17,30,.48) 68%, rgba(3,17,30,.94) 100% ) !important; } /* * Ocultar solamente el icono antiguo. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-icon { display: none !important; } /* * Estado superior derecho. */ .x2-b1-building-top.x2-has-native-image .x2-b1-status { position: absolute !important; top: 22px !important; right: 22px !important; z-index: 5 !important; } /* * Nombre + nivel. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading { position: relative !important; width: 100% !important; z-index: 4 !important; text-align: center !important; margin: 0 !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { width: 100% !important; margin: 0 !important; text-align: center !important; font-size: 28px !important; line-height: 1.08 !important; color: #fff !important; text-shadow: 0 3px 12px rgba(0,0,0,.95) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small { display: block !important; width: 100% !important; margin-top: 10px !important; text-align: center !important; font-size: 17px !important; line-height: 1 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.94) !important; text-shadow: 0 2px 9px rgba(0,0,0,.95) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small strong { color: #4bdcff !important; } /* * Móvil. */ @media (max-width: 430px) { .x2-b1-building-top.x2-has-native-image { min-height: 285px !important; padding: 20px 16px 23px !important; } .x2-b1-building-top.x2-has-native-image > .x2-native-building-image { width: 66% !important; height: 66% !important; max-width: 210px !important; max-height: 210px !important; min-width: 155px !important; min-height: 155px !important; top: 42% !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { font-size: 25px !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small { font-size: 15px !important; } } /* CUBAXNOVA_X2_B136G2_NATIVE_HERO_END */ /* CUBAXNOVA_X2_B136G7_NATIVE_ASSET_START */ /* * UX1-B1.36G7 * Imagen oficial pequeña de OGameX presentada como ilustración, * sin estirarla como fotografía de fondo. */ .x2-b1-building-top.x2-has-native-image { position: relative !important; min-height: 300px !important; overflow: hidden !important; isolation: isolate !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; padding: 24px 20px 28px 20px !important; } /* Imagen oficial del catálogo OGameX. */ .x2-b1-building-top.x2-has-native-image .x2-native-building-image { position: absolute !important; inset: auto !important; top: 54px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; width: 112px !important; height: 112px !important; min-width: 112px !important; min-height: 112px !important; max-width: 112px !important; max-height: 112px !important; object-fit: contain !important; opacity: 1 !important; visibility: visible !important; z-index: 3 !important; background: transparent !important; border: 0 !important; outline: 0 !important; pointer-events: none !important; } /* Overlay suave: no debe tapar la imagen. */ .x2-b1-building-top.x2-has-native-image .x2-native-building-overlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; background: linear-gradient( 180deg, rgba(2,12,22,.04) 0%, rgba(2,12,22,.10) 45%, rgba(2,12,22,.82) 100% ) !important; pointer-events: none !important; } /* Estado: esquina superior derecha. */ .x2-b1-building-top.x2-has-native-image .x2-b1-status { position: absolute !important; top: 22px !important; right: 22px !important; z-index: 6 !important; } /* Nombre y nivel, debajo de la ilustración. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading { position: relative !important; width: 100% !important; margin: 0 !important; z-index: 5 !important; text-align: center !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { width: 100% !important; margin: 0 0 10px 0 !important; text-align: center !important; font-size: 28px !important; line-height: 1.08 !important; color: #fff !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small { display: block !important; width: 100% !important; margin: 0 !important; text-align: center !important; font-size: 17px !important; line-height: 1 !important; letter-spacing: .15em !important; color: rgba(255,255,255,.94) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small strong { color: #4bdcff !important; } /* * El icono legacy queda disponible exclusivamente * como fallback cuando NO existe imagen oficial. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-icon { display: none !important; } @media (max-width: 430px) { .x2-b1-building-top.x2-has-native-image { min-height: 285px !important; padding: 20px 18px 24px 18px !important; } .x2-b1-building-top.x2-has-native-image .x2-native-building-image { top: 52px !important; width: 104px !important; height: 104px !important; min-width: 104px !important; min-height: 104px !important; max-width: 104px !important; max-height: 104px !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { font-size: 25px !important; } } /* CUBAXNOVA_X2_B136G7_NATIVE_ASSET_END */ /* CUBAXNOVA_X2_B136J_OGAMEX_SPRITE_START */ /* * CubaXNova X2 * Catálogo gráfico nativo OGameX. * * No utiliza thumbnails *_small.jpg. * Utiliza directamente el sprite principal * que usa el motor original. */ .x2-b1-building-top.x2-has-native-image { position: relative !important; isolation: isolate !important; overflow: hidden !important; min-height: 330px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: center !important; padding: 24px 18px 30px !important; background: #03111e !important; } /* * Pieza real del sprite OGameX. * El frame large original es 200x200. */ .x2-ogamex-native-sprite { position: absolute !important; width: 200px !important; height: 200px !important; left: 50% !important; top: 43% !important; transform: translate(-50%, -50%) scale(1.28) !important; transform-origin: center center !important; background-image: url('/img/x2opt/7a9861be0c38bf7de05a57c56d73cf.webp') !important; background-repeat: no-repeat !important; opacity: .88 !important; z-index: 1 !important; pointer-events: none !important; image-rendering: auto !important; } /* * PRODUCCIÓN */ .machine-metal-mine .x2-ogamex-native-sprite { background-position: 0 0 !important; } .machine-crystal-mine .x2-ogamex-native-sprite { background-position: 5.25% 0 !important; } .machine-deuterium-synthesizer .x2-ogamex-native-sprite { background-position: 10.52% 0 !important; } .machine-solar-plant .x2-ogamex-native-sprite { background-position: 15.78% 0 !important; } .machine-fusion-plant .x2-ogamex-native-sprite { background-position: 21.05% 0 !important; } .machine-solar-satellite .x2-ogamex-native-sprite { background-position: 26.31% 0 !important; } /* * ALMACENES */ .machine-metal-store .x2-ogamex-native-sprite, .machine-metal-storage .x2-ogamex-native-sprite { background-position: 31.57% 0 !important; } .machine-crystal-store .x2-ogamex-native-sprite, .machine-crystal-storage .x2-ogamex-native-sprite { background-position: 36.84% 0 !important; } .machine-deuterium-store .x2-ogamex-native-sprite, .machine-deuterium-storage .x2-ogamex-native-sprite { background-position: 42.1% 0 !important; } /* * INSTALACIONES */ .machine-robot-factory .x2-ogamex-native-sprite { background-position: 0 17.24% !important; } .machine-shipyard .x2-ogamex-native-sprite { background-position: 5.25% 17.24% !important; } .machine-research-lab .x2-ogamex-native-sprite { background-position: 10.52% 17.24% !important; } .machine-alliance-depot .x2-ogamex-native-sprite { background-position: 15.78% 17.24% !important; } .machine-missile-silo .x2-ogamex-native-sprite { background-position: 21.05% 17.24% !important; } .machine-nano-factory .x2-ogamex-native-sprite { background-position: 26.31% 17.24% !important; } .machine-terraformer .x2-ogamex-native-sprite { background-position: 31.57% 17.24% !important; } .machine-lunar-base .x2-ogamex-native-sprite, .machine-moon-base .x2-ogamex-native-sprite { background-position: 36.84% 17.24% !important; } .machine-sensor-phalanx .x2-ogamex-native-sprite { background-position: 42.1% 17.24% !important; } .machine-jump-gate .x2-ogamex-native-sprite { background-position: 47.36% 17.24% !important; } .machine-space-dock .x2-ogamex-native-sprite, .machine-repair-dock .x2-ogamex-native-sprite { background-position: 52.62% 17.24% !important; } /* * Oscurecimiento inferior para que el nombre * y nivel permanezcan perfectamente legibles. */ .x2-b1-building-top.x2-has-native-image .x2-native-building-overlay { display: block !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(2, 12, 22, .02) 0%, rgba(2, 12, 22, .10) 35%, rgba(2, 12, 22, .52) 68%, rgba(2, 12, 22, .94) 100% ) !important; } /* * Estado arriba a la derecha. */ .x2-b1-building-top.x2-has-native-image .x2-b1-status { position: absolute !important; top: 22px !important; right: 22px !important; z-index: 6 !important; } /* * Nombre + nivel delante de la imagen. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading { position: relative !important; width: 100% !important; z-index: 5 !important; margin: 0 !important; text-align: center !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { width: 100% !important; margin: 0 auto 12px !important; text-align: center !important; font-size: 28px !important; line-height: 1.08 !important; color: #fff !important; text-shadow: 0 3px 14px rgba(0,0,0,.98) !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small { display: block !important; width: 100% !important; text-align: center !important; color: rgba(255,255,255,.94) !important; font-size: 17px !important; letter-spacing: .15em !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading small strong { color: #4bdcff !important; } /* * El thumbnail / icono antiguo no debe * compartir espacio con el sprite grande. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-icon { display: none !important; } @media (max-width: 430px) { .x2-b1-building-top.x2-has-native-image { min-height: 310px !important; padding: 20px 16px 26px !important; } .x2-ogamex-native-sprite { transform: translate(-50%, -50%) scale(1.42) !important; top: 43% !important; } .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading h3 { font-size: 25px !important; } } /* CUBAXNOVA_X2_B136J_OGAMEX_SPRITE_END */ /* CUBAXNOVA_X2_B136N3_NATIVE_FIT_START */ /* * Mantener el sprite oficial OGameX dentro * del marco visual de la tarjeta X2. */ .x2-b1-building-top.x2-has-native-image { overflow: hidden !important; } /* * La ampliación se produce desde el centro. */ .x2-b1-building-top.x2-has-native-image .x2-ogamex-native-sprite { transform-origin: center center !important; } /* CUBAXNOVA_X2_B136N3_NATIVE_FIT_END */ /* ========================================================== CUBAXNOVA_X2_B136Q_FLUID_NATIVE_START Sprite oficial OGameX adaptado al viewport X2. Principios: - el HERO es el viewport real; - el border-radius del HERO realiza el clipping; - el sprite deja de depender de escalas fijas por dispositivo; - la celda del sprite conserva proporcion 1:1; - funciona igual en portrait y landscape. ========================================================== */ /* * 1. El propio hero constituye la ventana gráfica. */ .x2-b1-building-top.x2-has-native-image { position: relative !important; overflow: hidden !important; /* * El clipping respeta exactamente el radio que * ya pertenece al diseño de la tarjeta. */ isolation: isolate !important; background: #03111e !important; } /* * 2. Sprite oficial OGameX. * * La hoja original contiene una cuadrícula de * 20 columnas x 30 filas de celdas cuadradas. * * En vez de mantener un elemento físico de 200x200 * y ampliarlo mediante scale(), hacemos que una celda * ocupe dinámicamente el ancho disponible. */ .x2-b1-building-top.x2-has-native-image .x2-ogamex-native-sprite { display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; /* * La celda se vuelve fluida. */ width: 100% !important; height: auto !important; min-width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1 !important; /* * 20 x 30 celdas de la hoja OGameX. * Conserva los background-position específicos * de roboticsFactory, metalMine, etc. */ background-size: 2000% 3000% !important; background-repeat: no-repeat !important; /* * Ya NO ampliamos mediante scale(). */ transform: translate(-50%, -50%) !important; transform-origin: center center !important; z-index: 0 !important; pointer-events: none !important; } /* * 3. Overlay completo. * * Debe cubrir exactamente el mismo marco redondeado, * no una caja independiente. */ .x2-b1-building-top.x2-has-native-image .x2-native-building-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; z-index: 1 !important; pointer-events: none !important; } /* * 4. El estado permanece por encima de la fotografía. */ .x2-b1-building-top.x2-has-native-image .x2-b1-status { position: absolute !important; z-index: 5 !important; } /* * 5. Nombre y nivel permanecen encima del gráfico. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-heading { position: relative !important; z-index: 4 !important; } /* * 6. El thumbnail antiguo nunca comparte espacio * con el hero oficial. */ .x2-b1-building-top.x2-has-native-image .x2-b1-building-icon { display: none !important; } /* * 7. PORTRAIT MOVIL. * * Neutralizamos cualquier escala fija anterior. */ @media (max-width: 430px) { .x2-b1-building-top.x2-has-native-image .x2-ogamex-native-sprite { left: 50% !important; top: 50% !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; background-size: 2000% 3000% !important; transform: translate(-50%, -50%) !important; } } /* * 8. LANDSCAPE / TABLET. * * Usa exactamente el mismo modelo. * No existe otra escala especial para horizontal. */ @media (min-width: 431px) { .x2-b1-building-top.x2-has-native-image .x2-ogamex-native-sprite { left: 50% !important; top: 50% !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; background-size: 2000% 3000% !important; transform: translate(-50%, -50%) !important; } } /* CUBAXNOVA_X2_B136Q_FLUID_NATIVE_END */ /* ========================================================== CUBAXNOVA_X2_B1_RESOURCE_STRIP_PORTRAIT_START Página Recursos / Instalaciones. Corrección exclusiva de la barra superior de recursos. Horizontal: - permanece 4 columnas. Vertical: - 2 columnas x 2 filas. ========================================================== */ @media screen and (max-width: 480px) and (orientation: portrait) { /* * Este es el contenedor REAL mostrado * en el hero B1 de Recursos. */ .x2-b1-resource-strip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; align-items: stretch !important; } /* * Cada recurso dispone ahora de media fila * en lugar de una cuarta parte. */ .x2-b1-resource-strip > * { min-width: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* * Si el strip reutiliza los orbes X2, * les damos un tamaño más cómodo. */ .x2-b1-resource-strip .x2-resource-orb { width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important; flex: 0 0 48px !important; font-size: 16px !important; } /* * Contenedor interno: * icono | nombre + cantidad */ .x2-b1-resource-strip .x2-resource-top { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important; min-width: 0 !important; width: 100% !important; } /* * No permitimos que el nombre robe * el espacio correspondiente al valor. */ .x2-b1-resource-strip .x2-resource-title { min-width: 0 !important; width: 100% !important; } /* * Cantidad. */ .x2-b1-resource-strip [data-x2-resource-amount], .x2-b1-resource-strip strong { max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } } /* CUBAXNOVA_X2_B1_RESOURCE_STRIP_PORTRAIT_END */ /* ========================================================== CUBAXNOVA_X2_RESOURCE_NATIVE_ICONS_START Sustituye M / C / D / E por los iconos oficiales de recursos incluidos en OGameX. Sprite original: /img/icons/7f14c18b15064d2604c5476f5d10b3.png Celda nativa: 48 x 32 px ========================================================== */ /* * El contenedor existente continúa teniendo * exactamente el mismo tamaño. */ .x2-b1-resource-strip .x2-resource-orb { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; /* * Ocultamos únicamente M / C / D / E. */ font-size: 0 !important; color: transparent !important; } /* * Icono oficial OGameX. */ .x2-b1-resource-strip .x2-resource-orb::before { content: !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 48px !important; height: 32px !important; transform: translate(-50%, -50%) !important; background-image: url(/img/icons/7f14c18b15064d2604c5476f5d10b3.png) !important; background-repeat: no-repeat !important; pointer-events: none !important; } /* * METAL * OGameX original: 0 -160px */ .x2-b1-resource-strip .x2-resource-metal .x2-resource-orb::before, .x2-b1-resource-strip .x2-resource-orb.x2-resource-metal::before, .x2-b1-resource-strip > :nth-child(1) .x2-resource-orb::before { background-position: 0 -160px !important; } /* * CRISTAL * OGameX original: -48px -160px */ .x2-b1-resource-strip .x2-resource-crystal .x2-resource-orb::before, .x2-b1-resource-strip .x2-resource-orb.x2-resource-crystal::before, .x2-b1-resource-strip > :nth-child(2) .x2-resource-orb::before { background-position: -48px -160px !important; } /* * DEUTERIO * OGameX original: -96px -160px */ .x2-b1-resource-strip .x2-resource-deut .x2-resource-orb::before, .x2-b1-resource-strip .x2-resource-deuterium .x2-resource-orb::before, .x2-b1-resource-strip .x2-resource-orb.x2-resource-deut::before, .x2-b1-resource-strip > :nth-child(3) .x2-resource-orb::before { background-position: -96px -160px !important; } /* * ENERGÍA * OGameX original: -144px -160px */ .x2-b1-resource-strip .x2-resource-energy .x2-resource-orb::before, .x2-b1-resource-strip .x2-resource-orb.x2-resource-energy::before, .x2-b1-resource-strip > :nth-child(4) .x2-resource-orb::before { background-position: -144px -160px !important; } /* CUBAXNOVA_X2_RESOURCE_NATIVE_ICONS_END */