:root {
            --box-bg: linear-gradient(180deg, #52514e 0%, #383735 100%);
            --box-bg-dark: linear-gradient(180deg, #3f3e3c 0%, #292826 100%);
            --box-hover: linear-gradient(180deg, #63625e 0%, #454441 100%);
            --green-select-bg: linear-gradient(180deg, #4b6237 0%, #344724 100%);
            --green-border: #87b865;
            --yellow-select-bg: linear-gradient(180deg, #57592d 0%, #3d3f1d 100%);
            --yellow-border: #c5c94b;
            --text-light: #f3f1ed;
            --border-subtle: rgba(255, 255, 255, 0.32);
            --shadow-panel: 0 6px 14px rgba(0, 0, 0, 0.38);

            --bg-dark: #071018;
            --panel-bg: rgba(10, 22, 34, 0.84);
            --gold: #d4af37;
            --gold-dim: rgba(212, 175, 55, 0.55);
            --hull-green: #2ecc71;
            --carpenter-cap: #f39c12;
            --danger-red: #e74c3c;
            --sail-blue: #3498db;
            --crew-purple: #9b59b6;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

        body {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
          
            color: var(--text-light);
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #061524;
        }

        /* =========================================================
           MAR ABIERTO 100% PANTALLA COMPLETA
           ========================================================= */
        .fullscreen-sea-wrapper {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        }

        #navalCanvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1;
        }

        .floating-top-config {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            z-index: 15;
            pointer-events: none;
        }

        .floating-config-cluster {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 9px;
            background: rgba(7, 16, 24, 0.84);
            backdrop-filter: blur(5px);
            border: 1px solid var(--gold-dim);
            padding: 6px 12px;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
            pointer-events: auto;
        }

        .config-mini-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .config-mini-group label {
            font-size: 0.62rem;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .config-mini-group select {
            background: rgba(10, 20, 31, 0.92);
            color: var(--text-light);
            border: 1px solid var(--gold-dim);
            padding: 4px 7px;
            border-radius: 4px;
            font-size: 0.78rem;
            cursor: pointer;
            font-family: 'Georgia', serif;
        }

        .sea-top-btn {
            background: rgba(44, 29, 17, 0.9);
            border: 1px solid var(--gold);
            color: var(--gold);
            font-weight: bold;
            padding: 6px 11px;
            border-radius: 4px;
            font-size: 0.76rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .sea-top-btn:hover {
            background: #472f1c;
            transform: translateY(-1px);
        }

        .sea-top-btn.audio-muted {
            background: rgba(65, 22, 22, 0.9);
            border-color: #e74c3c;
            color: #ff9b9b;
        }

        .currency-sea-pill {
            background: rgba(25, 35, 20, 0.9);
            border: 1px solid var(--green-border);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.74rem;
            color: #e2e8f0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .currency-sea-pill strong {
            color: #f1c40f;
            font-size: 0.9rem;
        }

        .faction-diplomacy-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(7, 16, 24, 0.84);
            backdrop-filter: blur(5px);
            border: 1px solid var(--gold-dim);
            padding: 5px 12px;
            border-radius: 6px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
            pointer-events: auto;
            max-width: 520px;
        }

        .faction-flag-box {
            width: 56px;
            height: 34px;
            border: 1px solid var(--gold);
            border-radius: 3px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .faction-rules-text {
            font-size: 0.71rem;
            line-height: 1.3;
            color: #e2e8f0;
        }

        .combat-banner {
            position: absolute;
            top: 72px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(7, 16, 24, 0.88);
            backdrop-filter: blur(4px);
            border: 1px solid var(--gold);
            padding: 6px 18px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 0.85rem;
            color: #f1c40f;
            pointer-events: none;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.7);
            z-index: 12;
            max-width: 92vw;
        }

        .island-dock-prompt {
            position: absolute;
            top: 112px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 18;
            display: none;
            align-items: center;
            gap: 12px;
            padding: 9px 22px;
            border-radius: 6px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.88rem;
            font-weight: 700;
            letter-spacing: 0.8px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85);
            pointer-events: auto;
            cursor: pointer;
            transition: transform 0.15s ease;
        }

        .island-dock-prompt.allied-port {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
            color: #ffffff;
        }

        .island-dock-prompt.allied-port:hover {
            transform: translateX(-50%) scale(1.03);
            box-shadow: 0 0 18px rgba(135, 184, 101, 0.75);
        }

        .island-dock-prompt.hostile-port {
            background: rgba(78, 22, 22, 0.92);
            border: 2px solid #e74c3c;
            color: #ffdada;
            cursor: default;
        }

        /* HUD Inferior Flotante */
        .floating-bottom-hud {
            position: absolute;
            bottom: 12px;
            left: 12px;
            right: 12px;
            display: grid;
            grid-template-columns: 365px 1fr 365px;
            gap: 12px;
            align-items: end;
            z-index: 15;
            pointer-events: none;
        }

        .ship-card {
            background: rgba(8, 18, 28, 0.84);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(212, 175, 55, 0.45);
            border-radius: 6px;
            padding: 9px 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.75);
            pointer-events: auto;
        }

        .ship-card.enemy-card {
            border-color: rgba(231, 76, 60, 0.6);
        }

        .enemy-fog-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #95a5a6;
            gap: 5px;
            padding: 10px;
            border: 1px dashed rgba(255, 118, 117, 0.3);
            border-radius: 4px;
            background: rgba(7, 16, 24, 0.5);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            padding-bottom: 4px;
        }

        .card-title {
            font-weight: bold;
            font-size: 0.86rem;
            color: var(--gold);
        }

        .enemy-card .card-title {
            color: #ff7675;
        }

        .stat-row {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .stat-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.72rem;
        }

        .bar-outer {
            position: relative;
            width: 100%;
            height: 13px;
            background: rgba(4, 9, 14, 0.85);
            border: 1px solid #334659;
            border-radius: 3px;
            overflow: hidden;
        }

        .bar-inner {
            height: 100%;
            transition: width 0.12s ease-out;
        }

        .hull-fill { background: linear-gradient(90deg, #196f3d, var(--hull-green)); }
        .enemy-hull-fill { background: linear-gradient(90deg, #922b21, #e74c3c); }
        .speed-fill { background: linear-gradient(90deg, #1b4f72, var(--sail-blue)); }
        .crew-fill { background: linear-gradient(90deg, #5b2c6f, var(--crew-purple)); }
        .reload-fill { background: linear-gradient(90deg, #b7950b, #f1c40f); transition: none; }
        .roja-fill { background: linear-gradient(90deg, #d35400, #ff3838); transition: none; }
        .antipersonal-fill { background: linear-gradient(90deg, #6c3483, #e056fd); transition: none; }

        .limit-marker {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--carpenter-cap);
            z-index: 2;
        }

        .center-sea-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            pointer-events: none;
        }

        .sea-telemetry-strip {
            background: rgba(7, 16, 24, 0.82);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(212, 175, 55, 0.4);
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.72rem;
            color: #cbd5e1;
            text-align: center;
            pointer-events: auto;
        }

        .controls-panel {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            pointer-events: auto;
        }

        .special-weapons-panel {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
            pointer-events: auto;
            margin-top: 4px;
        }

        .ammo-btn.special-active {
            background: rgba(120, 40, 10, 0.92);
            border-color: #ff9f1a;
            box-shadow: 0 0 14px rgba(255, 159, 26, 0.65);
        }

        .ammo-btn.special-cooldown {
            opacity: 0.55;
        }

        .side-select-panel {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 6px;
            pointer-events: auto;
            margin-bottom: 2px;
        }

        .side-btn {
            background: rgba(16, 32, 48, 0.85);
            backdrop-filter: blur(5px);
            border: 2px solid rgba(62, 92, 126, 0.85);
            color: var(--text-light);
            padding: 6px 4px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
            transition: all 0.15s;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        }

        .side-btn:hover {
            transform: translateY(-2px);
            border-color: var(--gold);
        }

        .side-btn.active-side-ambos {
            background: rgba(40, 70, 30, 0.92);
            border-color: #2ecc71;
            box-shadow: 0 0 14px rgba(46, 204, 113, 0.55);
            color: #fff;
        }

        .side-btn.active-side-babor {
            background: rgba(20, 50, 90, 0.92);
            border-color: #74b9ff;
            box-shadow: 0 0 14px rgba(116, 185, 255, 0.55);
            color: #fff;
        }

        .side-btn.active-side-estribor {
            background: rgba(90, 30, 30, 0.92);
            border-color: #ff7675;
            box-shadow: 0 0 14px rgba(255, 118, 117, 0.55);
            color: #fff;
        }

        .side-btn .side-title {
            font-weight: bold;
            font-size: 0.78rem;
            letter-spacing: 0.5px;
        }

        .side-btn .side-key {
            font-size: 0.62rem;
            color: #b2bec3;
            font-family: monospace;
        }

        .side-btn.active-side-ambos .side-key,
        .side-btn.active-side-babor .side-key,
        .side-btn.active-side-estribor .side-key {
            color: #f1c40f;
        }

        .ammo-btn {
            background: rgba(16, 32, 48, 0.85);
            backdrop-filter: blur(5px);
            border: 2px solid rgba(62, 92, 126, 0.85);
            color: var(--text-light);
            padding: 7px 5px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
            transition: all 0.15s;
        }

        .ammo-btn:hover:not(:disabled) {
            border-color: var(--gold);
            transform: translateY(-2px);
            background: rgba(24, 46, 68, 0.92);
        }

        .ammo-btn.active-ammo {
            background: rgba(58, 40, 14, 0.9);
            border-color: #f1c40f;
            box-shadow: 0 0 12px rgba(241, 196, 15, 0.45);
        }

        .ammo-btn.roja-active {
            background: rgba(75, 18, 18, 0.92);
            border-color: #ff4d4d;
            box-shadow: 0 0 14px rgba(255, 77, 77, 0.65);
        }

        .ammo-btn.fire-btn {
            background: rgba(82, 20, 20, 0.88);
            border-color: var(--danger-red);
        }

        .ammo-btn.fire-btn:hover:not(:disabled) {
            background: rgba(118, 28, 28, 0.95);
        }

        .ammo-btn:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }

        .key-badge {
            background: rgba(0,0,0,0.6);
            border: 1px solid var(--gold-dim);
            color: var(--gold);
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 0.66rem;
            font-family: monospace;
        }

        .ammo-title { font-weight: bold; font-size: 0.82rem; }
        .ammo-desc { font-size: 0.61rem; color: #b2bec3; text-align: center; line-height: 1.15; }

        .mini-telemetry {
            display: flex;
            justify-content: space-between;
            font-size: 0.68rem;
            color: #aeb6bf;
            padding-top: 3px;
            border-top: 1px dashed rgba(255,255,255,0.1);
        }

        /* =========================================================
           MODAL DE TIENDA DE LA ISLA
           ========================================================= */
        .island-store-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: rgba(5, 10, 16, 0.88);
            backdrop-filter: blur(7px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 14px;
        }

        .island-store-overlay.open {
            display: flex;
            animation: fadeIn 0.25s ease;
        }

        .island-store-window {
            width: 100%;
            max-width: 1280px;
            max-height: 95vh;
            overflow-y: auto;
            border: 3px solid #8a7348;
            border-radius: 6px;
            padding: 16px 20px;
            color: #f0ebe3;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            background-color: #1a1610;
            background-image:
                radial-gradient(ellipse at center, rgba(48, 40, 28, 0.95) 0%, rgba(22, 18, 12, 0.98) 55%, rgba(10, 8, 5, 1) 100%),
                repeating-radial-gradient(circle at 20% 30%, rgba(120, 100, 70, 0.05) 0px, rgba(120, 100, 70, 0.05) 2px, transparent 3px, transparent 14px),
                linear-gradient(145deg, #2a2418 0%, #1c1810 50%, #12100c 100%);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.92), inset 0 0 50px rgba(0, 0, 0, 0.45);
        }

        .store-header-bar {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(60, 45, 25, 0.45);
        }

        .store-island-title {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--box-bg);
            padding: 7px 14px;
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
        }

        .store-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .store-tab-btn {
            background: var(--box-bg);
            color: var(--text-light);
            border: 1px solid var(--border-subtle);
            padding: 8px 12px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.75rem;
            letter-spacing: 0.8px;
            cursor: pointer;
            box-shadow: var(--shadow-panel);
            transition: all 0.2s;
        }

        .store-tab-btn:hover {
            background: var(--box-hover);
        }

        .store-tab-btn.active-tab {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
            box-shadow: 0 0 12px rgba(135, 184, 101, 0.55);
        }

        .close-store-btn {
            background: linear-gradient(180deg, #6e2c2c 0%, #481b1b 100%);
            color: #fff;
            border: 1px solid #e74c3c;
            padding: 8px 14px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.78rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: var(--shadow-panel);
        }

        .close-store-btn:hover {
            filter: brightness(1.18);
        }

        .view-panel {
            display: none;
            opacity: 0;
            transform: translateY(8px);
        }

        .view-panel.active {
            display: block;
            animation: panelFadeIn 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
        }

        @keyframes panelFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .converter-grid {
            display: grid;
            grid-template-columns: 1.35fr 1fr 1fr;
            gap: 35px;
            align-items: start;
        }

        .header-box {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 1.08rem;
            letter-spacing: 1.3px;
            line-height: 1.3;
            margin-bottom: 12px;
            padding: 8px 14px;
        }

        .left-header-wrapper {
            display: grid;
            grid-template-columns: 0.62fr 1fr;
            gap: 8px;
        }

        .left-header-wrapper .header-box {
            grid-column: 2;
        }

        .wallet-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            box-shadow: var(--shadow-panel);
        }

        .wallet-row {
            display: grid;
            grid-template-columns: 0.62fr 1fr;
            gap: 8px;
            cursor: pointer;
            padding: 2px;
            border: 2px solid transparent;
        }

        .wallet-row:hover .cell-box {
            background: var(--box-hover);
        }

        .cell-box {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.12rem;
            letter-spacing: 1px;
            padding: 0 10px;
            overflow: hidden;
            white-space: nowrap;
        }

        .wallet-input {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            color: var(--text-light);
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.48rem;
            font-weight: 700;
            text-align: center;
            outline: none;
            cursor: text;
        }

        .wallet-input:focus {
            background: rgba(0, 0, 0, 0.35);
            color: #f1c40f;
        }

        .wallet-row.selected-green {
            border: 2px solid var(--green-border);
            box-shadow: 0 0 12px rgba(135, 184, 101, 0.55);
            background: rgba(135, 184, 101, 0.25);
        }

        .wallet-row.selected-green .cell-box {
            background: var(--green-select-bg);
            border-color: rgba(135, 184, 101, 0.6);
        }

        .center-column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .value-box {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.6rem;
            font-weight: 600;
        }

        .cantidad-input {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            color: var(--text-light);
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.6rem;
            font-weight: 600;
            text-align: center;
            outline: none;
        }

        .center-actions {
            margin: 14px 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .action-btn {
            background: var(--box-bg);
            color: var(--text-light);
            border: 1px solid var(--border-subtle);
            padding: 10px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.82rem;
            letter-spacing: 1px;
            cursor: pointer;
            box-shadow: var(--shadow-panel);
            transition: all 0.2s;
        }

        .action-btn:hover {
            background: var(--green-select-bg);
            border-color: var(--green-border);
        }

        .action-btn.gold-hover:hover {
            background: var(--yellow-select-bg);
            border-color: var(--yellow-border);
        }

        .convert-list {
            display: flex;
            flex-direction: column;
            gap: 3px;
            box-shadow: var(--shadow-panel);
        }

        .convert-item {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.12rem;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .convert-item:hover {
            background: var(--box-hover);
        }

        .convert-item.selected-yellow {
            background: var(--yellow-select-bg);
            border: 2px solid var(--yellow-border);
            box-shadow: 0 0 12px rgba(197, 201, 75, 0.55);
            z-index: 2;
        }

        .event-banner {
            background: var(--box-bg);
            border: 2px solid var(--yellow-border);
            box-shadow: var(--shadow-panel);
            padding: 12px 20px;
            text-align: center;
            margin-bottom: 14px;
        }

        .event-label {
            font-size: 0.78rem;
            color: #d6da73;
            letter-spacing: 2px;
            margin-bottom: 4px;
        }

        .event-text {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.45rem;
            font-style: italic;
            color: #ffffff;
        }

        .investment-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr 1.15fr;
            gap: 22px;
            align-items: start;
        }

        .option-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .option-item {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            min-height: 45px;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.88rem;
            letter-spacing: 0.7px;
            cursor: pointer;
            box-shadow: var(--shadow-panel);
            transition: all 0.15s;
        }

        .option-item:hover {
            background: var(--box-hover);
        }

        .option-item.selected-green {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
        }

        .option-item.selected-yellow {
            background: var(--yellow-select-bg);
            border: 2px solid var(--yellow-border);
        }

        .result-card {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .stat-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.15);
            padding-bottom: 4px;
            font-size: 0.84rem;
        }

        .stat-val {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.25rem;
            font-weight: 700;
        }

        .positive { color: #9be564; }
        .negative { color: #ff7b7b; }
        .neutral { color: #e0dfd5; }

        .status-toast {
            margin-top: 10px;
            text-align: center;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.15rem;
            color: #e8e2d6;
            font-weight: 700;
            min-height: 24px;
        }

        .shipyard-container {
            background: #2b2a29;
            border: 2px solid var(--border-subtle);
            box-shadow: var(--shadow-panel);
            padding: 12px;
            max-height: 58vh;
            overflow-y: auto;
        }

        .shipyard-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        }

        .shipyard-table th {
            background: linear-gradient(180deg, #4b4a47 0%, #2f2e2c 100%);
            color: var(--text-light);
            padding: 9px 7px;
            border: 1px solid rgba(255, 255, 255, 0.28);
            font-size: 0.78rem;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            position: sticky;
            top: 0;
            z-index: 5;
        }

        .shipyard-table td {
            padding: 6px 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.15rem;
            font-weight: 700;
        }

        .price-col {
            background: var(--box-bg);
            color: var(--text-light);
        }

        .shipyard-table tr:hover .price-col {
            background: var(--box-hover);
        }

        .highlight-col-island {
            background: var(--yellow-select-bg) !important;
            border: 2px solid var(--yellow-border) !important;
            color: #fff !important;
        }

        .ship-class-4 {
            background: linear-gradient(180deg, #2d5a73 0%, #1d3c4e 100%);
            color: #e9f4fa;
            border-left: 3px solid #63b4e0 !important;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.88rem !important;
            text-align: left !important;
        }
        .ship-class-3 {
            background: linear-gradient(180deg, #4b6237 0%, #344724 100%);
            color: #eef5e8;
            border-left: 3px solid #87b865 !important;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.88rem !important;
            text-align: left !important;
        }
        .ship-class-2 {
            background: linear-gradient(180deg, #6e6329 0%, #4b4319 100%);
            color: #f9f6e5;
            border-left: 3px solid #c5c94b !important;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.88rem !important;
            text-align: left !important;
        }
        .ship-class-1 {
            background: linear-gradient(180deg, #6e2c2c 0%, #481b1b 100%);
            color: #faeaea;
            border-left: 3px solid #d46565 !important;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.88rem !important;
            text-align: left !important;
        }

        .ship-action-btn {
            background: var(--green-select-bg);
            color: var(--text-light);
            border: 1px solid var(--green-border);
            padding: 5px 9px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.71rem;
            cursor: pointer;
            margin: 2px;
            transition: all 0.15s;
        }

        .ship-action-btn:hover:not(:disabled) {
            filter: brightness(1.18);
        }

        .ship-action-btn.sell-btn {
            background: linear-gradient(180deg, #633224 0%, #422016 100%);
            border-color: #d97c5f;
        }

        .ship-action-btn.equip-btn {
            background: linear-gradient(180deg, #2d5a73 0%, #1d3c4e 100%);
            border-color: #63b4e0;
        }

        .ship-action-btn.active-ship-badge {
            background: var(--yellow-select-bg);
            color: #fff;
            font-weight: bold;
            border: 1px solid var(--yellow-border);
        }

        .ship-action-btn:disabled {
            background: #333230;
            border-color: #555;
            opacity: 0.45;
            cursor: not-allowed;
        }

        .armory-grid {
            display: grid;
            grid-template-columns: 0.95fr 1.45fr;
            gap: 22px;
            align-items: start;
        }

        .crew-qty-bar {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            padding: 10px 14px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            box-shadow: var(--shadow-panel);
        }

        .goods-restriction-banner {
            background: linear-gradient(180deg, #6e2c2c 0%, #481b1b 100%);
            border: 2px solid #e74c3c;
            color: #fff;
            padding: 10px 16px;
            margin-bottom: 10px;
            text-align: center;
            font-size: 0.86rem;
            display: none;
        }

        .goods-capacity-bar {
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            padding: 8px 16px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.88rem;
            box-shadow: var(--shadow-panel);
        }


        /* Mapa del mundo (todas las islas) */
        .world-map-overlay {
            position: fixed;
            inset: 0;
            z-index: 180;
            background: rgba(5, 12, 20, 0.92);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .world-map-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
        .world-map-window {
            width: min(920px, 96vw);
            background: rgba(8, 18, 28, 0.95);
            border: 2px solid var(--gold);
            border-radius: 8px;
            padding: 14px 16px 18px;
            box-shadow: 0 16px 50px rgba(0,0,0,0.85);
        }
        .world-map-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 10px;
        }
        .world-map-header h2 {
            font-size: 1.05rem;
            color: var(--gold);
            letter-spacing: 1px;
        }
        #worldMapCanvas {
            width: 100%;
            height: auto;
            max-height: 70vh;
            display: block;
            background: #071a2c;
            border: 1px solid rgba(212,175,55,0.35);
            border-radius: 4px;
            cursor: crosshair;
        }
        .world-map-legend {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 0.72rem;
            color: #cbd5e1;
        }
        .world-map-legend span { display: flex; align-items: center; gap: 5px; }
        .world-map-legend i {
            width: 12px; height: 12px; border-radius: 2px; display: inline-block;
            border: 1px solid rgba(255,255,255,0.3);
        }


        /* =========================================================
           MEJORAS DE MENÚS: CARRUSELES, TABS MODERNOS Y SLIDERS
           ========================================================= */
        .store-tabs {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 8px;
            padding: 4px 2px;
            scrollbar-width: thin;
            max-width: 100%;
        }
        .store-tabs::-webkit-scrollbar { height: 6px; }
        .store-tabs::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

        .store-tab-btn {
            flex: 0 0 auto;
            background: var(--box-bg);
            color: var(--text-light);
            border: 1px solid var(--border-subtle);
            padding: 10px 16px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.78rem;
            letter-spacing: 0.6px;
            cursor: pointer;
            box-shadow: var(--shadow-panel);
            transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0.62;
        }
        .store-tab-btn:hover {
            background: var(--box-hover);
            transform: translateY(-1px);
            opacity: 0.9;
        }
        .store-tab-btn.active-tab {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
            box-shadow: 0 0 16px rgba(135, 184, 101, 0.6);
            transform: scale(1.04);
            opacity: 1;
        }


        /* =========================================================
           SISTEMAS DE CONSTRUCCIÓN NAVAL + MUELLES CARRUSEL
           ========================================================= */
        .sys-build-section {
            margin-bottom: 16px;
            padding: 12px 14px;
            background: rgba(8, 18, 28, 0.72);
            border: 1px solid rgba(212, 175, 55, 0.4);
            border-radius: 8px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.55);
        }
        .sys-build-title {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.95rem;
            color: var(--gold);
            letter-spacing: 1px;
            margin-bottom: 8px;
            text-align: center;
        }
        .sys-build-hint {
            font-size: 0.88rem;
            color: #b2bec3;
            text-align: center;
            margin-bottom: 10px;
            line-height: 1.35;
        }
        .sys-cards-track {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 6px 2px 12px;
            scrollbar-width: thin;
        }
        .sys-cards-track::-webkit-scrollbar { height: 7px; }
        .sys-cards-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
        .sys-card {
            scroll-snap-align: center;
            flex: 0 0 auto;
            min-width: 188px;
            max-width: 210px;
            background: var(--box-bg);
            border: 2px solid rgba(255,255,255,0.18);
            border-radius: 8px;
            padding: 10px 11px;
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.72;
        }
        .sys-card:hover {
            transform: translateY(-2px);
            border-color: var(--gold-dim);
            opacity: 0.92;
        }
        .sys-card.sys-selected {
            opacity: 1;
            border-color: var(--green-border);
            background: var(--green-select-bg);
            box-shadow: 0 0 14px rgba(135, 184, 101, 0.55);
        }
        .sys-card-name {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-weight: 700;
            font-size: 0.82rem;
            color: #f1c40f;
            margin-bottom: 6px;
            text-align: center;
            line-height: 1.2;
        }
        .sys-card.sys-selected .sys-card-name { color: #ffffff; }
        .sys-stat-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.88rem;
            padding: 2px 0;
            border-bottom: 1px dashed rgba(255,255,255,0.08);
            gap: 6px;
        }
        .sys-stat-row span:last-child { font-weight: 700; }
        .sys-badge-pos { color: #2ecc71; }
        .sys-badge-neg { color: #e74c3c; }
        .sys-badge-neu { color: #b2bec3; }
        .sys-badge-hi  { color: #3498db; }
        .sys-badge-warn { color: #f39c12; }

        .docks-section {
            margin-bottom: 14px;
            padding: 12px 14px;
            background: rgba(8, 18, 28, 0.72);
            border: 1px solid rgba(116, 185, 255, 0.35);
            border-radius: 8px;
        }
        .docks-title {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.9rem;
            color: #74b9ff;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
            text-align: center;
        }
        .docks-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.74rem;
            color: #cbd5e1;
        }
        .docks-track {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 6px 2px 12px;
            scrollbar-width: thin;
        }
        .docks-track::-webkit-scrollbar { height: 7px; }
        .docks-track::-webkit-scrollbar-thumb { background: #74b9ff; border-radius: 4px; }
        .dock-slot {
            scroll-snap-align: center;
            flex: 0 0 auto;
            min-width: 200px;
            max-width: 240px;
            background: var(--box-bg-dark);
            border: 2px solid rgba(116, 185, 255, 0.35);
            border-radius: 8px;
            padding: 12px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
        .dock-slot:hover { border-color: #74b9ff; transform: translateY(-2px); }
        .dock-slot.dock-active {
            border-color: var(--green-border);
            background: var(--green-select-bg);
            box-shadow: 0 0 14px rgba(135, 184, 101, 0.5);
        }
        .dock-slot.dock-empty {
            border-style: dashed;
            opacity: 0.75;
            cursor: default;
        }
        .dock-slot.dock-locked {
            border-color: rgba(231, 76, 60, 0.45);
            opacity: 0.65;
        }
        .dock-num {
            font-size: 0.68rem;
            color: #74b9ff;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .dock-ship-name {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--gold);
            margin-bottom: 3px;
        }
        .dock-sys-name {
            font-size: 0.72rem;
            color: #e2e8f0;
            margin-bottom: 6px;
        }
        .dock-stats {
            font-size: 0.66rem;
            color: #aeb6bf;
            line-height: 1.3;
        }
        .dock-actions {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .dock-actions .ship-action-btn {
            font-size: 0.7rem;
            padding: 5px 8px;
        }

        /* Carrusel horizontal con snap */
        .carousel-wrapper {
            position: relative;
            max-width: 100%;
            margin: 12px auto;
            padding: 0 42px;
        }
        .carousel-track {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 8px 4px 16px;
            scrollbar-width: thin;
        }
        .carousel-track::-webkit-scrollbar { height: 8px; }
        .carousel-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
        .carousel-item {
            scroll-snap-align: center;
            flex: 0 0 auto;
            min-width: 260px;
            max-width: 320px;
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 14px 12px;
            box-shadow: var(--shadow-panel);
            transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                        background 0.35s ease,
                        border-color 0.35s ease,
                        box-shadow 0.35s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
            opacity: 0.48;
            transform: scale(0.94);
        }
        .carousel-item.is-focused {
            opacity: 1;
            transform: scale(1.04);
            z-index: 2;
        }
        .carousel-item:hover {
            background: var(--box-hover);
            border-color: var(--gold-dim);
            opacity: 0.85;
        }
        .carousel-item.is-focused:hover {
            opacity: 1;
            transform: scale(1.06);
        }
        .carousel-item.selected-green {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
            box-shadow: 0 0 22px rgba(135, 184, 101, 0.65);
            opacity: 1;
            transform: scale(1.05);
        }
        .carousel-item.selected-yellow {
            background: var(--yellow-select-bg);
            border: 2px solid var(--yellow-border);
            box-shadow: 0 0 22px rgba(197, 201, 75, 0.65);
            opacity: 1;
            transform: scale(1.05);
        }
        .carousel-item .item-title {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-weight: 700;
            font-size: 0.95rem;
            color: #f1c40f;
        }
        .carousel-item .item-desc {
            font-size: 0.75rem;
            color: #d5c8b4;
            line-height: 1.3;
        }
        .carousel-item .item-price {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: #9be564;
            margin-top: auto;
        }
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(20, 30, 40, 0.85);
            border: 1px solid var(--gold);
            color: var(--gold);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: all 0.15s;
        }
        .carousel-nav:hover { background: #472f1c; transform: translateY(-50%) scale(1.08); }
        .carousel-nav.prev { left: 4px; }
        .carousel-nav.next { right: 4px; }

        /* Range sliders modernos */
        .range-control {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--box-bg);
            border: 1px solid var(--border-subtle);
            padding: 10px 14px;
            border-radius: 6px;
            box-shadow: var(--shadow-panel);
        }
        .range-control input[type="range"] {
            flex: 1;
            height: 6px;
            accent-color: #87b865;
            cursor: pointer;
        }
        .range-value {
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 1.4rem;
            font-weight: 700;
            color: #f1c40f;
            min-width: 48px;
            text-align: center;
        }

        /* Mejoras generales de paneles */
        .island-store-window {
            border-radius: 10px;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), inset 0 0 80px rgba(45, 35, 22, 0.5);
        }
        .header-box {
            border-radius: 6px;
            font-size: 1rem;
        }
        .status-toast {
            background: rgba(18, 16, 12, 0.92);
            border-radius: 6px;
            padding: 8px;
            border: 1px solid rgba(138, 115, 72, 0.55);
            color: #e8e2d6;
        }

        @media (max-width: 1120px) {
            .floating-bottom-hud {
                grid-template-columns: 1fr;
                max-height: 52vh;
                overflow-y: auto;
            }
            .converter-grid, .investment-grid, .armory-grid {
                grid-template-columns: 1fr;
            }
        }

        /* HUD translucido y replegable */
        .floating-top-config { opacity: 0.92; }
        .floating-config-cluster {
            background: rgba(7, 16, 24, 0.55) !important;
            backdrop-filter: blur(8px) !important;
            transition: opacity 0.2s, max-height 0.25s, padding 0.2s;
        }
        .faction-diplomacy-pill {
            background: rgba(7, 16, 24, 0.55) !important;
            backdrop-filter: blur(8px) !important;
        }
        .ship-card {
            background: rgba(8, 18, 28, 0.52) !important;
            backdrop-filter: blur(10px) !important;
            transition: max-height 0.28s ease, opacity 0.2s, padding 0.2s, border-color 0.2s;
            overflow: hidden;
        }
        .sea-telemetry-strip {
            background: rgba(7, 16, 24, 0.50) !important;
            backdrop-filter: blur(6px) !important;
        }
        .ammo-btn, .side-btn {
            background: rgba(16, 32, 48, 0.58) !important;
            backdrop-filter: blur(6px);
        }
        .combat-banner {
            background: rgba(7, 16, 24, 0.62) !important;
        }
        .hud-panel-collapsed {
            max-height: 36px !important;
            opacity: 0.72 !important;
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }
        .sys-hud-row {
            display: flex;
            flex-wrap: wrap;
            gap: 2px 9px;
            font-size: 0.66rem;
            line-height: 1.3;
            color: #aeb6bf;
            padding: 1px 0 5px;
        }
        .sys-hud-row b { font-weight: 700; }
        .hud-panel-collapsed .sys-hud-row,
        .hud-panel-collapsed .stat-row,
        .hud-panel-collapsed .mini-telemetry,
        .hud-panel-collapsed #enemyFogPlaceholder {
            display: none !important;
        }
        .hud-top-collapsed .floating-config-cluster > .config-mini-group,
        .hud-top-collapsed .currency-sea-pill,
        .hud-top-collapsed .faction-diplomacy-pill {
            display: none !important;
        }
        .hud-controls-collapsed .controls-panel,
        .hud-controls-collapsed .special-weapons-panel,
        .hud-controls-collapsed .side-select-panel {
            display: none !important;
        }
        .hud-toggle-btn {
            pointer-events: auto;
            background: rgba(20, 35, 50, 0.7);
            border: 1px solid rgba(212, 175, 55, 0.5);
            color: #f1c40f;
            font-size: 0.68rem;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            padding: 3px 8px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 4px;
        }
        .hud-toggle-btn:hover { background: rgba(40, 60, 80, 0.85); }
        .hud-collapse-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
            min-height: 22px;
        }
        body.hud-ultra-thin .floating-bottom-hud,
        body.hud-ultra-thin .floating-top-config {
            opacity: 0.38;
        }
        body.hud-ultra-thin .floating-bottom-hud:hover,
        body.hud-ultra-thin .floating-top-config:hover {
            opacity: 0.95;
        }

        /* Guía de Controles */
        .controles-guia-overlay {
            position: fixed;
            inset: 0;
            z-index: 190;
            background: rgba(5, 12, 20, 0.94);
            backdrop-filter: blur(6px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .controles-guia-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
        .controles-guia-window {
            width: min(980px, 96vw);
            max-height: 92vh;
            overflow-y: auto;
            background: rgba(8, 18, 28, 0.96);
            border: 2px solid var(--gold);
            border-radius: 8px;
            padding: 14px 16px 18px;
            box-shadow: 0 16px 50px rgba(0,0,0,0.85);
            color: var(--text-light);
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        }
        .controles-guia-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 10px;
        }
        .controles-guia-header h2 {
            font-size: 1.05rem;
            color: var(--gold);
            letter-spacing: 1px;
        }
        .controles-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        .controles-tab-btn {
            background: var(--box-bg);
            color: var(--text-light);
            border: 1px solid var(--border-subtle);
            padding: 8px 12px;
            font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.15s;
        }
        .controles-tab-btn:hover { background: var(--box-hover); }
        .controles-tab-btn.active-tab {
            background: var(--green-select-bg);
            border: 2px solid var(--green-border);
        }
        .controles-panel { display: none; }
        .controles-panel.active { display: block; }
        .comando-lista {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 10px;
        }
        .comando-item {
            background: rgba(16, 32, 48, 0.7);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 6px;
            padding: 10px 12px;
        }
        .comando-tecla {
            font-family: monospace;
            background: rgba(0,0,0,0.5);
            color: #f1c40f;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: bold;
        }
        .comando-desc { font-size: 0.82rem; color: #e2e8f0; margin-top: 4px; line-height: 1.3; }
    
        .option-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            margin: 6px 0;
            background: rgba(16, 32, 48, 0.75);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 5px;
            font-size: 0.85rem;
        }
        .option-row.selected {
            border-color: #2ecc71;
            background: rgba(46, 204, 113, 0.12);
            box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
        }
        .arsenal-sub-btn.active-tab {
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
            transform: translateY(-1px);
        }

/* --- Bloque de estilo --- */

/* =========================================================
       MENÚ PRINCIPAL SUBMARINO (SIN PEERJS)
       ========================================================= */
    .sea-main-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background:
            radial-gradient(ellipse 85% 42% at 50% -4%, rgba(185, 252, 255, 0.96) 0%, rgba(20, 165, 215, 0.78) 34%, rgba(5, 52, 98, 0.94) 68%, #021326 100%);
        transition: opacity 0.55s ease, visibility 0.55s ease;
    }

    .sea-main-menu-overlay.hidden-menu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Resplandor superior y rayos solares bajo el agua */
    .underwater-surface-glow {
        position: absolute;
        top: -55px;
        left: 18%;
        right: 18%;
        height: 210px;
        background: radial-gradient(ellipse at center, rgba(240, 255, 255, 0.9) 0%, rgba(72, 219, 251, 0.35) 52%, transparent 76%);
        filter: blur(12px);
        pointer-events: none;
    }

    .underwater-rays {
        position: absolute;
        inset: -20%;
        background:
            repeating-conic-gradient(
                from 180deg at 50% -10%,
                rgba(165, 245, 255, 0.14) 0deg,
                rgba(165, 245, 255, 0.0) 6.5deg,
                rgba(110, 225, 250, 0.11) 13deg,
                rgba(165, 245, 255, 0.0) 21deg
            );
        filter: blur(9px);
        animation: swayRays 14s ease-in-out infinite alternate;
        pointer-events: none;
    }

    @keyframes swayRays {
        0%   { transform: rotate(-3deg) scale(1.04); }
        100% { transform: rotate(3deg) scale(1.11); }
    }

    /* Franja horizontal central con bordes oscuros arriba y abajo */
    .menu-center-band {
        position: relative;
        width: 100%;
        min-height: 66vh;
        background: linear-gradient(180deg, rgba(4, 24, 46, 0.76) 0%, rgba(6, 36, 66, 0.82) 50%, rgba(4, 20, 40, 0.80) 100%);
        backdrop-filter: blur(3px);
        border-top: 22px solid rgba(3, 9, 16, 0.76);
        border-bottom: 22px solid rgba(3, 9, 16, 0.76);
        box-shadow:
            inset 0 2px 0 rgba(72, 219, 251, 0.18),
            inset 0 -2px 0 rgba(72, 219, 251, 0.18),
            0 18px 50px rgba(0, 0, 0, 0.65);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 20px;
        z-index: 2;
    }

    .menu-buttons-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
        max-width: 360px;
    }

    /* Botones rectangulares con bordes laterales cian */
    .ocean-menu-btn {
        position: relative;
        width: 300px;
        height: 46px;
        background: linear-gradient(90deg,
            rgba(7, 50, 66, 0.92) 0%,
            rgba(22, 126, 150, 0.92) 50%,
            rgba(7, 50, 66, 0.92) 100%);
        border-top: 1px solid rgba(120, 225, 245, 0.36);
        border-bottom: 1px solid rgba(2, 20, 32, 0.88);
        border-left: 5px solid #3ae3f6;
        border-right: 5px solid #3ae3f6;
        box-shadow:
            0 6px 14px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
        color: #eefcff;
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        font-style: italic;
        font-weight: 600;
        font-size: 1.55rem;
        letter-spacing: 0.7px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0 14px;
    }

    /* Efecto iluminado idéntico al botón "Nombre" de la imagen */
    .ocean-menu-btn:hover,
    .ocean-menu-btn.highlighted-btn {
        background: linear-gradient(90deg,
            rgba(112, 168, 178, 0.94) 0%,
            rgba(168, 218, 226, 0.97) 50%,
            rgba(112, 168, 178, 0.94) 100%);
        border-left-color: #82faff;
        border-right-color: #82faff;
        box-shadow:
            0 0 18px rgba(72, 235, 255, 0.75),
            0 6px 15px rgba(0, 0, 0, 0.45),
            inset 0 0 10px rgba(255, 255, 255, 0.45);
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(10, 75, 95, 0.85);
        transform: scale(1.02);
    }

    /* Campo de texto integrado en el botón "Nombre" */
    .ocean-name-input {
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        color: inherit;
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        font-style: italic;
        font-weight: 600;
        font-size: 1.55rem;
        text-align: center;
        text-shadow: inherit;
        cursor: text;
    }

    .ocean-name-input::placeholder {
        color: #ffffff;
        opacity: 0.95;
    }

    /* Subpanel desplegable para Opciones */
    .menu-subdrawer {
        display: none;
        width: 300px;
        background: rgba(4, 24, 42, 0.92);
        border: 1px solid rgba(58, 227, 246, 0.55);
        border-radius: 4px;
        padding: 10px 12px;
        color: #d8f8ff;
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
        flex-direction: column;
        gap: 8px;
    }

    .menu-subdrawer.open {
        display: flex;
    }

    .menu-opt-row {
        display: flex;
        gap: 6px;
        justify-content: space-between;
    }

    .menu-mini-btn {
        flex: 1;
        background: rgba(14, 72, 96, 0.85);
        border: 1px solid rgba(58, 227, 246, 0.5);
        color: #e2fbff;
        padding: 6px 8px;
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        font-size: 0.68rem;
        cursor: pointer;
        border-radius: 3px;
        transition: all 0.15s;
    }

    .menu-mini-btn:hover {
        background: rgba(42, 158, 188, 0.95);
        border-color: #82faff;
    }

/* --- Bloque de estilo --- */

/* =====================================================================
   CONTROLES TÁCTILES — solo teléfonos (se activan con body.touch-mode)
   Ajustado a Samsung Galaxy A56: 1080×2340 px ≈ 384×832 px CSS
   (en horizontal ≈ 832×384). Mismo lenguaje visual que el HUD:
   oro #d4af37, azul marino translúcido y tipografía Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif.
   En PC / ratón nada de esto se muestra. Para probar en PC: ?touch=1
   ===================================================================== */
html { overscroll-behavior: none; }

.tc-root { display: none; }

body.touch-mode {
    --tc-safe-l: max(10px, env(safe-area-inset-left, 0px));
    --tc-safe-r: max(10px, env(safe-area-inset-right, 0px));
    --tc-safe-b: max(8px, env(safe-area-inset-bottom, 0px));
    --tc-safe-t: max(6px, env(safe-area-inset-top, 0px));
    --tc-pad: 156px;          /* lado del timón */
    --tc-fightw: 164px;       /* lado del bloque de fuego */
    --tc-reserve: 188px;      /* alto que dejan libre las tarjetas para los controles */
    --tc-card-w: min(224px, 30vw);
    -webkit-tap-highlight-color: transparent;
    height: 100vh;
    height: 100dvh;
}
body.touch-mode .fullscreen-sea-wrapper { height: 100vh; height: 100dvh; }
body.touch-mode #navalCanvas { touch-action: none; }

body.touch-mode .tc-root {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 17;
    pointer-events: none;
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
}
.tc-root.tc-off { visibility: hidden; }
.tc-root, .tc-root * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* ---------- Botón base (misma piel que .ammo-btn del HUD) ---------- */
.tc-btn {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    margin: 0;
    background: rgba(16, 32, 48, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(62, 92, 126, 0.85);
    border-radius: 8px;
    color: var(--text-light);
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
    line-height: 1.05;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.12s, opacity 0.2s;
}
.tc-btn .tc-ico { font-size: 1.15rem; line-height: 1; }
.tc-btn .tc-lbl { font-size: 0.54rem; letter-spacing: 0.3px; color: #cbd5e1; white-space: nowrap; }
.tc-btn .tc-key {
    position: absolute;
    top: 2px;
    right: 3px;
    font: bold 0.5rem monospace;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    padding: 0 3px;
}
.tc-btn.tc-press {
    transform: scale(0.93);
    border-color: var(--gold);
    background: rgba(24, 46, 68, 0.94);
}
.tc-btn.tc-dim { opacity: 0.42; }
.tc-btn.tc-on-ammo {
    background: rgba(58, 40, 14, 0.9);
    border-color: #f1c40f;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.45);
}
.tc-btn.tc-on-roja {
    background: rgba(75, 18, 18, 0.92);
    border-color: #ff4d4d;
    box-shadow: 0 0 14px rgba(255, 77, 77, 0.65);
}
.tc-btn.tc-on-special {
    background: rgba(120, 40, 10, 0.92);
    border-color: #ff9f1a;
    box-shadow: 0 0 14px rgba(255, 159, 26, 0.65);
}
.tc-btn.tc-on-mort {
    background: rgba(58, 40, 14, 0.92);
    border-color: #f1c40f;
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.7);
}
.tc-btn.tc-side-ambos   { background: rgba(40, 70, 30, 0.92); border-color: #2ecc71; box-shadow: 0 0 14px rgba(46, 204, 113, 0.55); }
.tc-btn.tc-side-babor   { background: rgba(20, 50, 90, 0.92); border-color: #74b9ff; box-shadow: 0 0 14px rgba(116, 185, 255, 0.55); }
.tc-btn.tc-side-estribor{ background: rgba(90, 30, 30, 0.92); border-color: #ff7675; box-shadow: 0 0 14px rgba(255, 118, 117, 0.55); }
.tc-btn.tc-open-tab { border-color: var(--gold); background: rgba(58, 40, 14, 0.82); }

/* Anillo de recarga (cañones y mortero) */
.tc-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(var(--tc-ring, #f1c40f) calc(var(--rl, 100) * 1%), rgba(255, 255, 255, 0.10) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    pointer-events: none;
}
.tc-ring.tc-ready { --tc-ring: #2ecc71; }

/* ---------- Timón (izquierda): cruceta con arrastre continuo ---------- */
.tc-pad {
    position: absolute;
    left: var(--tc-safe-l);
    bottom: var(--tc-safe-b);
    width: var(--tc-pad);
    height: var(--tc-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    pointer-events: auto;
}
.tc-pad .tc-btn { pointer-events: none; }
.tc-pad .tc-up    { grid-area: 1 / 2; }
.tc-pad .tc-left  { grid-area: 2 / 1; }
.tc-pad .tc-right { grid-area: 2 / 3; }
.tc-pad .tc-dn    { grid-area: 3 / 2; }
.tc-pad .tc-ico { font-size: 1.35rem; }
.tc-thr {
    grid-area: 2 / 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(8, 18, 28, 0.55);
    border: 1px solid var(--gold-dim);
    color: #f1c40f;
    pointer-events: none;
    line-height: 1.05;
}
.tc-thr b { font: bold 0.74rem monospace; }
.tc-thr small { font-size: 0.48rem; color: #aeb6bf; }

/* ---------- Fuego (derecha) ---------- */
.tc-fight {
    position: absolute;
    right: var(--tc-safe-r);
    bottom: var(--tc-safe-b);
    width: var(--tc-fightw);
    height: var(--tc-fightw);
    pointer-events: none;
}
.tc-fight .tc-btn { position: absolute; border-radius: 50%; }
.tc-fire {
    right: 4px; bottom: 4px;
    width: 88px; height: 88px;
    background: rgba(82, 20, 20, 0.82);
    border-color: var(--danger-red);
}
.tc-fire .tc-ico { font-size: 1.7rem; }
.tc-fire .tc-lbl { font-size: 0.62rem; font-weight: bold; color: #ffdada; }
.tc-fire.tc-press { background: rgba(118, 28, 28, 0.95); }
.tc-fire.tc-dim { opacity: 0.6; }
.tc-mort { right: 102px; bottom: 6px; width: 56px; height: 56px; }
.tc-roja { right: 6px; bottom: 102px; width: 56px; height: 56px; }

/* ---------- Dock central + bandejas ocultables ---------- */
.tc-dock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--tc-safe-b);
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.tc-dock .tc-btn { width: 46px; height: 46px; }
.tc-dock .tc-ico { font-size: 1.05rem; }
.tc-tray {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--tc-safe-b) + 54px);
    display: none;
    gap: 6px;
    pointer-events: none;
}
.tc-tray.tc-open { display: flex; }
.tc-tray .tc-btn { width: 52px; height: 52px; }
.tc-root.tc-hidden .tc-pad,
.tc-root.tc-hidden .tc-fight,
.tc-root.tc-hidden .tc-tray,
.tc-root.tc-hidden .tc-dock .tc-btn:not(.tc-master) { display: none; }
.tc-root.tc-hidden .tc-master { opacity: 0.6; }

body.hud-ultra-thin .tc-root .tc-btn { opacity: 0.5; }
body.hud-ultra-thin .tc-root .tc-btn.tc-press { opacity: 1; }

/* ---------- Tarjetas del jugador y del vigía: 3 estados ----------
   completa  →  compacta (solo cabecera + barra de casco)  →  chip mínimo  */
.tc-card-bar { display: none; }
body.touch-mode .ship-card:not(.enemy-card) > .card-header,
body.touch-mode #enemyStatsContent > .card-header { display: none; }
body.touch-mode .tc-card-bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 5px;
}
.tc-bar-ico { font-size: 0.9rem; }
.tc-bar-txt {
    font-weight: bold;
    font-size: 0.72rem;
    color: var(--gold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.enemy-card .tc-bar-txt { color: #ff7675; }
.tc-bar-pct { font: bold 0.68rem monospace; color: #e2e8f0; }
.tc-mini-btn {
    pointer-events: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(20, 35, 50, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #f1c40f;
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
}
.tc-bar-hp {
    grid-column: 1 / -1;
    height: 4px;
    background: rgba(4, 9, 14, 0.85);
    border-radius: 2px;
    overflow: hidden;
}
.tc-bar-hp b {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #196f3d, var(--hull-green));
    transition: width 0.15s;
}
.enemy-card .tc-bar-hp b { background: linear-gradient(90deg, #922b21, #e74c3c); }
.tc-bar-sub { grid-column: 1 / -1; font-size: 0.62rem; color: #aeb6bf; }

body.touch-mode .floating-bottom-hud {
    position: absolute;
    inset: 0;
    display: block;
    max-height: none;
    overflow: visible;
    grid-template-columns: none;
}
body.touch-mode .ship-card {
    position: absolute;
    top: var(--tc-top, 48px);
    width: var(--tc-card-w);
    padding: 6px 8px;
    gap: 4px;
    max-height: calc(100vh - var(--tc-top, 48px) - var(--tc-reserve));
    max-height: calc(100dvh - var(--tc-top, 48px) - var(--tc-reserve));
    overflow-y: auto;
    touch-action: pan-y;
}
body.touch-mode .ship-card:not(.enemy-card) { left: var(--tc-safe-l); }
body.touch-mode .ship-card.enemy-card { right: var(--tc-safe-r); }
body.touch-mode .ship-card .bar-outer { height: 10px; }
body.touch-mode .ship-card .stat-header { font-size: 0.66rem; }
body.touch-mode .ship-card .mini-telemetry { font-size: 0.62rem; flex-direction: column; gap: 1px; }
body.touch-mode .enemy-fog-placeholder { padding: 6px; }
body.touch-mode .ship-card.tc-compact { overflow: hidden; padding: 5px 8px 4px; }
body.touch-mode .ship-card.tc-compact .stat-row,
body.touch-mode .ship-card.tc-compact .mini-telemetry,
body.touch-mode .ship-card.tc-compact #enemyStatsContent,
body.touch-mode .ship-card.tc-compact #enemyFogPlaceholder,
body.touch-mode .ship-card.tc-compact .tc-bar-sub { display: none !important; }
body.touch-mode .ship-card.tc-micro { display: none !important; }

/* Chips mínimos: lo que queda cuando se minimiza una tarjeta */
.tc-chip {
    position: absolute;
    top: var(--tc-top, 48px);
    display: none;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    pointer-events: auto;
    background: rgba(8, 18, 28, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 14px;
    color: var(--text-light);
    font: bold 0.68rem Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}
.tc-chip.tc-show { display: flex; }
#tcChipP { left: var(--tc-safe-l); }
#tcChipE { right: var(--tc-safe-r); border-color: rgba(231, 76, 60, 0.65); max-width: 46vw; overflow: hidden; }
#tcChipE b { overflow: hidden; text-overflow: ellipsis; }
.tc-chip.tc-hp-ok   { border-color: rgba(46, 204, 113, 0.8); }
.tc-chip.tc-hp-mid  { border-color: rgba(243, 156, 18, 0.9); }
.tc-chip.tc-hp-low  { border-color: rgba(231, 76, 60, 1); color: #ffb3ad; }

/* ---------- Barra superior, avisos y estado, compactos ---------- */
body.touch-mode .floating-top-config {
    top: var(--tc-safe-t);
    left: var(--tc-safe-l);
    right: var(--tc-safe-r);
    gap: 6px;
}
body.touch-mode .floating-config-cluster { padding: 4px 6px; gap: 5px; justify-content: flex-start; }
body.touch-mode .sea-top-btn { padding: 5px 8px; font-size: 0.64rem; min-height: 32px; white-space: nowrap; }
body.touch-mode .currency-sea-pill { font-size: 0.66rem; gap: 5px; }
body.touch-mode .faction-diplomacy-pill { max-width: 100%; }

body.touch-mode .center-sea-controls {
    position: absolute;
    top: var(--tc-top, 48px);
    left: 50%;
    transform: translateX(-50%);
}
body.touch-mode .sea-telemetry-strip { padding: 2px 10px; font-size: 0.64rem; white-space: nowrap; }
body.touch-mode .sea-telemetry-strip > span:nth-child(n+2) { display: none; }

body.touch-mode .combat-banner {
    top: calc(var(--tc-top, 48px) + 30px);
    font-size: 0.64rem;
    line-height: 1.2;
    padding: 4px 10px;
    max-width: min(46vw, 420px);
    pointer-events: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
body.touch-mode .combat-banner.tc-open { -webkit-line-clamp: unset; overflow: visible; }
body.touch-mode .island-dock-prompt {
    top: calc(var(--tc-top, 48px) + 96px) !important;
    font-size: 0.66rem;
    padding: 6px 12px;
    gap: 6px;
    letter-spacing: 0.2px;
    max-width: 56vw;
    text-align: center;
}
body.touch-mode #atraparBallenaPrompt { top: calc(var(--tc-top, 48px) + 138px) !important; }

/* Tienda y mapa: algo más holgados en pantalla chica */
body.touch-mode .island-store-overlay { padding: 6px; }
body.touch-mode .island-store-window { padding: 10px; max-height: 100vh; max-height: 100dvh; }
body.touch-mode .store-tab-btn { padding: 7px 9px; font-size: 0.68rem; }

/* ---------- Horizontal bajo (barra del navegador visible) ---------- */
@media (orientation: landscape) and (max-height: 380px) {
    body.touch-mode { --tc-pad: 138px; --tc-fightw: 150px; --tc-reserve: 166px; }
    .tc-fire { width: 80px; height: 80px; }
    .tc-mort { right: 92px; width: 52px; height: 52px; }
    .tc-roja { bottom: 92px; width: 52px; height: 52px; }
    .tc-tray .tc-btn { width: 48px; height: 48px; }
}

/* ---------- Vertical (≈ 384×832): pila de abajo hacia arriba ----------
   controles → dock → bandeja → estado → aviso → prompts de isla */
@media (orientation: portrait) {
    body.touch-mode { --tc-card-w: calc(50vw - 14px); --tc-base: calc(var(--tc-safe-b) + var(--tc-pad)); }
    .tc-dock { bottom: calc(var(--tc-base) + 10px); }
    .tc-tray { bottom: calc(var(--tc-base) + 64px); }
    body.touch-mode .center-sea-controls { top: auto; bottom: calc(var(--tc-base) + 122px); }
    body.touch-mode .combat-banner { top: auto; bottom: calc(var(--tc-base) + 150px); max-width: 82vw; }
    body.touch-mode .island-dock-prompt { top: auto !important; bottom: calc(var(--tc-base) + 214px); max-width: 90vw; }
    body.touch-mode #atraparBallenaPrompt { top: auto !important; bottom: calc(var(--tc-base) + 254px); }
}

/* --- Bloque de estilo --- */

/* =====================================================================
   FORASTEROS · INTERFAZ "BITÁCORA DE CAPITÁN"
   Tinta azul de mar, latón, cardenillo y lacre. Cada estado tiene su FORMA:
   · normal      → tarjeta de tinta con filete tenue
   · enfocado    → retícula de esquinas azul claro (hover / centro del carrusel)
   · seleccionado→ barra gruesa + resplandor + sello ✓ del color del submenú
   · adquirido   → barra de latón + etiqueta "Adquirida" sobre el borde
   ===================================================================== */
:root{
 --ink:#09131d;--ink2:#0f2030;--ink3:#17303f;
 --brass:#c9a24a;--brass-hi:#efd48e;--brass-dim:rgba(201,162,74,.38);
 --verd:#46c9a0;--focus:#9bdcff;--wax:#d5524a;--paper:#efe6d2;--muted:#93a6b4;--accent:#46c9a0;
 --gold:#d9b45a;--gold-dim:rgba(201,162,74,.4);--gold-bright:#efd48e;--panel-bg:rgba(9,19,29,.9);
 --f-title:Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;--f-data:Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
 --hull:#3fcf8e;--speed:#4aa8ef;--crew:#a77bdc;--reload:#f0b13a;--roja:#ee5a3c;--anti:#e06cc4;
}
.island-store-window :focus-visible,.floating-top-config :focus-visible,.floating-bottom-hud :focus-visible,.controles-guia-window :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- TIENDA: MARCO ---------- */
.island-store-overlay{background:radial-gradient(ellipse at 50% 40%,rgba(8,20,32,.9),rgba(2,6,10,.96))!important}
.island-store-window,.world-map-window,.controles-guia-window{background:linear-gradient(160deg,#122434 0%,#0a1520 55%,#070f17 100%)!important;border:1px solid var(--brass)!important;border-radius:10px!important;outline:1px solid var(--brass-dim);outline-offset:-8px;box-shadow:0 24px 70px rgba(0,0,0,.9),inset 0 0 60px rgba(0,0,0,.45)!important;color:var(--paper)}
.store-header-bar{border-bottom:1px solid var(--brass-dim)!important}
.store-island-title{background:linear-gradient(90deg,rgba(201,162,74,.16),rgba(201,162,74,.03))!important;border:1px solid var(--brass-dim)!important;border-left:4px solid var(--brass)!important;border-radius:4px!important;box-shadow:none!important}
#storeIslandName{color:var(--brass-hi)!important}
.close-store-btn{background:linear-gradient(180deg,#8a2f2a,#5a1c19)!important;border:1px solid #e98a80!important;border-radius:6px!important;font-family:var(--f-title)!important;box-shadow:none!important}

/* ---------- NIVEL 1: PESTAÑAS DE LA TIENDA (carpeta de latón) ---------- */
.store-tabs{padding-bottom:10px!important}
.store-tab-btn,.controles-tab-btn{background:var(--ink2)!important;color:#c3cfd8!important;border:1px solid rgba(255,255,255,.1)!important;border-bottom:3px solid transparent!important;border-radius:6px 6px 2px 2px!important;box-shadow:none!important;opacity:1!important;transform:none!important;font-family:var(--f-title)!important;transition:background .15s,border-color .15s,color .15s}
.store-tab-btn:hover,.controles-tab-btn:hover{background:var(--ink3)!important;color:#fff!important;border-bottom-color:var(--brass-dim)!important}
.store-tab-btn.active-tab,.controles-tab-btn.active-tab{background:linear-gradient(180deg,#24465a,#17303f)!important;color:var(--brass-hi)!important;border-color:var(--brass-dim)!important;border-bottom:3px solid var(--brass)!important;position:relative}
.store-tab-btn.active-tab::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--brass)}

/* ---------- NIVEL 2: SUBMENÚS DEL ARSENAL (ficha con punto de color) ---------- */
.arsenal-sub-btn{--c:#888;background:var(--ink2)!important;border:1px solid rgba(255,255,255,.12)!important;border-top:3px solid var(--c)!important;border-radius:4px!important;color:#cfd9e0!important;font-family:var(--f-data)!important;font-size:1rem!important;font-weight:600!important;letter-spacing:.02em}
.arsenal-sub-btn::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:0;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.arsenal-sub-btn[data-sub=artilleria]{--c:#5aa9e6}.arsenal-sub-btn[data-sub=municiones]{--c:#58d68d}.arsenal-sub-btn[data-sub=espolones]{--c:#bb8fce}.arsenal-sub-btn[data-sub=especiales]{--c:#f5b041}.arsenal-sub-btn[data-sub=antipersonal]{--c:#ec7063}
.arsenal-sub-btn:hover{border-color:var(--c)!important;background:var(--ink3)!important}
.arsenal-sub-btn.active-tab{background:rgba(255,255,255,.1)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 32%,var(--ink2)),var(--ink2))!important;border-color:var(--c)!important;border-bottom:1px solid var(--c)!important;color:#fff!important;box-shadow:0 4px 0 var(--c)!important}
.arsenal-sub-btn.active-tab::after{display:none}
#arsenal-sub-artilleria{--accent:#5aa9e6}#arsenal-sub-municiones{--accent:#58d68d}#arsenal-sub-espolones{--accent:#bb8fce}#arsenal-sub-especiales{--accent:#f5b041}#arsenal-sub-antipersonal{--accent:#ec7063}
.arsenal-sub-panel{border-top:2px solid var(--accent);padding-top:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 140px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 140px)}
.arsenal-sub-panel>.header-box{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,var(--ink2)),var(--ink2))!important;border:1px solid var(--accent)!important;border-left-width:6px!important;color:var(--paper)!important}

/* ---------- TÍTULOS DE SECCIÓN ---------- */
.header-box{background:linear-gradient(180deg,var(--ink3),var(--ink2))!important;border:1px solid var(--brass-dim)!important;border-top:2px solid var(--brass)!important;border-radius:4px!important;box-shadow:none!important;font-family:var(--f-title);color:var(--paper);letter-spacing:.06em}

/* ---------- TARJETAS: normal · enfocado · seleccionado · adquirido ---------- */
.option-row,.option-item,.carousel-item{--sel:var(--accent);position:relative;background:linear-gradient(180deg,var(--ink3),var(--ink2))!important;border:1px solid rgba(255,255,255,.12)!important;border-left:4px solid rgba(255,255,255,.12)!important;border-radius:6px!important;box-shadow:0 2px 8px rgba(0,0,0,.4)!important;color:var(--paper);transition:border-color .15s,background .15s,transform .2s,box-shadow .2s,opacity .25s}
.option-item.selected-green{--sel:var(--verd)}.option-item.selected-yellow{--sel:#e6bf45}
.option-row:hover,.option-item:hover,.carousel-item:hover{border-color:var(--focus)!important;background:linear-gradient(180deg,#1f3b4d,#132838)!important}
.carousel-item.is-focused{opacity:1!important;transform:scale(1.04)!important;z-index:3;border-color:var(--focus)!important}
.carousel-item.is-focused::before,.option-row:hover::before,.option-item:hover::before{content:"";position:absolute;inset:-6px;pointer-events:none;background:linear-gradient(var(--focus),var(--focus)) 0 0/14px 2px,linear-gradient(var(--focus),var(--focus)) 0 0/2px 14px,linear-gradient(var(--focus),var(--focus)) 100% 0/14px 2px,linear-gradient(var(--focus),var(--focus)) 100% 0/2px 14px,linear-gradient(var(--focus),var(--focus)) 0 100%/14px 2px,linear-gradient(var(--focus),var(--focus)) 0 100%/2px 14px,linear-gradient(var(--focus),var(--focus)) 100% 100%/14px 2px,linear-gradient(var(--focus),var(--focus)) 100% 100%/2px 14px;background-repeat:no-repeat}
.option-row.selected,.option-item.selected-green,.option-item.selected-yellow,.carousel-item.selected-green,.carousel-item.selected-yellow{background:linear-gradient(180deg,color-mix(in srgb,var(--sel) 26%,var(--ink3)),color-mix(in srgb,var(--sel) 12%,var(--ink2)))!important;border-color:var(--sel)!important;border-left:6px solid var(--sel)!important;box-shadow:0 0 0 1px var(--sel),0 0 18px color-mix(in srgb,var(--sel) 45%,transparent)!important}
.option-row.selected::after,.option-item.selected-green::after,.option-item.selected-yellow::after,.carousel-item.selected-green::after,.carousel-item.selected-yellow::after{content:"✓";position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--sel);color:#06121b;font:700 calc(14px * var(--ui-font-scale))/22px var(--f-data);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.option-row.owned:not(.selected),.carousel-item.owned:not(.selected-green):not(.selected-yellow){border-left:5px solid var(--brass)!important}
.option-row.owned:not(.selected)::after,.carousel-item.owned:not(.selected-green):not(.selected-yellow)::after{content:"Adquirida";position:absolute;top:-9px;right:14px;padding:0 9px;border-radius:9px;background:var(--ink);border:1px solid var(--brass);color:var(--brass-hi);font:600 .74rem/16px var(--f-data);letter-spacing:.05em}
.option-row .badge-equipped{display:inline-block;color:var(--sel)!important;border:1px solid var(--sel);border-radius:3px;padding:1px 9px;font:700 .85rem var(--f-data);letter-spacing:.08em;transform:rotate(-3deg)}
.option-row .badge-price-gold{color:var(--brass-hi)!important;font:700 1.08rem var(--f-data)}
.option-row small{color:var(--muted)}
.carousel-item .item-title{color:var(--brass-hi)!important;font-family:var(--f-title)}
.carousel-item .item-desc{color:var(--muted)!important}
.carousel-item .item-price{color:#d9b45a!important;font-family:var(--f-data)!important;font-size:1.1rem!important}
.carousel-item.selected-green .item-price,.carousel-item.selected-yellow .item-price{color:var(--sel)!important}
.carousel-nav{background:var(--ink)!important;border:1px solid var(--brass)!important;color:var(--brass-hi)!important}
.carousel-track::-webkit-scrollbar-thumb{background:var(--brass)!important}

/* ---------- BOTONES: comprar (latón) · equipar (contorno azul) · vender (lacre) · activo (cardenillo) ---------- */
.ship-action-btn{font-family:var(--f-data)!important;font-size:.92rem!important;font-weight:700!important;letter-spacing:.04em;border-radius:4px!important;padding:6px 12px!important;background:linear-gradient(180deg,#e0bd62,#b08a32)!important;color:#1a1305!important;border:1px solid #f0d58f!important;transition:filter .15s,transform .15s}
.ship-action-btn:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.ship-action-btn.equip-btn{background:transparent!important;color:var(--focus)!important;border:1px solid var(--focus)!important}
.ship-action-btn.equip-btn:hover:not(:disabled){background:rgba(155,220,255,.14)!important}
.ship-action-btn.sell-btn,.ship-action-btn[data-action^="vender"]{background:transparent!important;color:#f08a82!important;border:1px solid var(--wax)!important}
.ship-action-btn[data-action^="comprar"]:not(:disabled){background:linear-gradient(180deg,#e0bd62,#b08a32)!important;color:#1a1305!important;border:1px solid #f0d58f!important}
.ship-action-btn.active-ship-badge{background:var(--verd)!important;color:#05241b!important;border:1px solid #8ee8cb!important;cursor:default;transform:none!important;filter:none!important}
.ship-action-btn:disabled{background:rgba(255,255,255,.04)!important;color:#6f8190!important;border:1px dashed #44566a!important;opacity:1!important;cursor:not-allowed}
.action-btn{background:linear-gradient(180deg,var(--ink3),var(--ink2))!important;border:1px solid var(--brass-dim)!important;border-radius:5px!important;font-family:var(--f-title)!important;color:var(--paper)!important;box-shadow:none!important}
.action-btn:hover{border-color:var(--brass)!important;background:rgba(201,162,74,.18)!important}

/* ---------- TABLAS (astillero, tripulación, mercancías) ---------- */
.shipyard-container,.crew-qty-bar,.goods-capacity-bar,.result-card,.event-banner,.range-control{background:linear-gradient(180deg,rgba(23,48,63,.55),rgba(9,19,29,.7))!important;border:1px solid var(--brass-dim)!important;border-radius:6px!important;box-shadow:none!important}
.event-banner{border-left:4px solid #e6bf45!important}
.shipyard-table th{background:var(--ink3)!important;color:var(--brass-hi)!important;border:0!important;border-bottom:2px solid var(--brass)!important;font-family:var(--f-title)}
.shipyard-table td{border-top:0!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;font-family:var(--f-data)!important;font-size:1.1rem!important;font-weight:600!important}
.price-col{background:transparent!important;color:var(--paper)!important;border-left:0!important}
.ship-class-4{background:linear-gradient(90deg,rgba(74,168,239,.3),transparent)!important}.ship-class-3{background:linear-gradient(90deg,rgba(70,201,160,.3),transparent)!important}.ship-class-2{background:linear-gradient(90deg,rgba(230,191,69,.3),transparent)!important}.ship-class-1{background:linear-gradient(90deg,rgba(213,82,74,.32),transparent)!important}
.shipyard-table tbody tr:hover td{background-color:rgba(155,220,255,.07)!important}
tr.row-owned td{background-color:rgba(201,162,74,.08)!important}
tr.row-owned td:first-child{box-shadow:inset 5px 0 0 var(--brass)}
tr.row-active td{background-color:rgba(70,201,160,.14)!important}
tr.row-active td:first-child{box-shadow:inset 5px 0 0 var(--verd)}
.goods-restriction-banner{background:linear-gradient(180deg,#5a1f1c,#3a1210)!important;border:1px solid var(--wax)!important;border-left:5px solid var(--wax)!important;border-radius:5px!important}
.range-control input[type=range]{accent-color:var(--brass)}
.range-value{color:var(--brass-hi)!important;font-family:var(--f-data)!important}
.stat-val{font-family:var(--f-data)!important}
.status-toast{background:rgba(5,12,19,.7)!important;border:1px solid rgba(255,255,255,.1)!important;border-left:4px solid var(--brass)!important;border-radius:4px!important;color:var(--paper)!important;font-family:var(--f-data)!important;font-size:1.05rem!important;font-weight:500!important;text-align:left!important;padding:8px 12px!important}
#arsenal-sub-municiones .arsenal-box-720{background:rgba(9,19,29,.75)!important;border:1px solid rgba(255,255,255,.12)!important;border-left:4px solid var(--brass)!important}
#arsenal-sub-municiones input{background:#06101a!important;color:var(--paper)!important;border:1px solid var(--brass-dim)!important;font-family:var(--f-data)!important;font-size:1.05rem!important}
#arsenal-sub-municiones input:focus{border-color:var(--focus)!important;outline:none;box-shadow:0 0 0 2px rgba(155,220,255,.3)}

/* ---------- CARTERA Y BOLSA ---------- */
.cell-box,.value-box,.convert-item{background:linear-gradient(180deg,var(--ink3),var(--ink2))!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:5px!important;box-shadow:none!important;font-family:var(--f-data)!important;font-size:1.15rem}
.wallet-input,.cantidad-input{font-family:var(--f-data)!important;font-size:1.6rem!important}
.convert-item:hover,.wallet-row:hover .cell-box{border-color:var(--focus)!important}
.wallet-row{border-radius:7px}
.wallet-row.selected-green{border:2px solid var(--verd)!important;background:rgba(70,201,160,.12)!important;box-shadow:0 0 16px rgba(70,201,160,.35)!important}
.wallet-row.selected-green .cell-box{background:linear-gradient(180deg,#1b5846,#103a2f)!important;border-color:var(--verd)!important}
.convert-item.selected-yellow{background:linear-gradient(180deg,#5a4a17,#3b310f)!important;border:2px solid #e6bf45!important;box-shadow:0 0 16px rgba(230,191,69,.35)!important}

/* ---------- GUÍA DE CONTROLES ---------- */
.comando-item{background:var(--ink2)!important;border:1px solid rgba(255,255,255,.1)!important;border-left:4px solid var(--brass)!important}
.comando-tecla{background:#06101a!important;border:1px solid var(--brass);color:var(--brass-hi)!important;font-family:var(--f-data)!important}

/* ---------- HUD SUPERIOR ---------- */
.floating-config-cluster,.faction-diplomacy-pill,.sea-telemetry-strip,.combat-banner{background:linear-gradient(180deg,rgba(15,32,48,.72),rgba(7,16,25,.78))!important;border:1px solid var(--brass-dim)!important;border-bottom:2px solid var(--brass)!important;border-radius:5px!important;box-shadow:0 6px 18px rgba(0,0,0,.55)!important;backdrop-filter:blur(8px)!important}
.combat-banner{color:var(--brass-hi)!important;font-family:var(--f-data);font-size:1rem!important;letter-spacing:.03em}
.config-mini-group label{color:var(--muted)!important;text-transform:none!important;font-family:var(--f-data);font-size:.76rem!important;letter-spacing:.04em!important}
.config-mini-group select,#worldCoordsText,#nearestIslandCompass{background:#06101a!important;border:1px solid rgba(255,255,255,.14)!important;color:var(--paper)!important;font-family:var(--f-data)!important;font-size:.95rem!important}
.currency-sea-pill{background:transparent!important;border:0!important;padding:0!important;gap:6px!important}
.currency-sea-pill>span:nth-child(even){display:none}
.currency-sea-pill>span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);font:500 .76rem var(--f-data);color:var(--muted);letter-spacing:.03em}
.currency-sea-pill>span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coin);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 0 6px var(--coin)}
.currency-sea-pill>span:nth-child(1){--coin:#f2c744}.currency-sea-pill>span:nth-child(3){--coin:#e89a3c}.currency-sea-pill>span:nth-child(5){--coin:#cfd8dc}.currency-sea-pill>span:nth-child(7){--coin:#c7794a}
.currency-sea-pill strong{color:var(--paper)!important;font-size:1.08rem!important}
.sea-top-btn{background:rgba(255,255,255,.05)!important;border:1px solid var(--brass-dim)!important;color:var(--brass-hi)!important;border-radius:4px!important;font-family:var(--f-data)!important;font-size:.9rem!important;font-weight:600!important;letter-spacing:.03em}
.sea-top-btn:hover{background:rgba(201,162,74,.2)!important;border-color:var(--brass)!important}
.sea-top-btn.audio-muted{background:rgba(213,82,74,.16)!important;border-color:var(--wax)!important;color:#f3a29b!important}
.island-dock-prompt.allied-port{background:linear-gradient(180deg,#1f6b57,#12433a)!important;border:1px solid #8ee8cb!important;border-radius:6px!important;color:#f2fff9!important;box-shadow:0 0 0 3px rgba(70,201,160,.2),0 8px 24px rgba(0,0,0,.8)!important}
.island-dock-prompt.hostile-port{background:linear-gradient(180deg,#6e2420,#451512)!important;border:1px solid var(--wax)!important;color:#ffd9d5!important;border-radius:6px!important}
.hud-top-collapsed .floating-config-cluster{padding:4px 8px!important;gap:5px!important}

/* ---------- HUD INFERIOR: TARJETAS Y BARRAS ---------- */
.ship-card{position:relative;background:linear-gradient(180deg,rgba(15,32,48,.74),rgba(7,16,25,.8))!important;border:1px solid var(--brass-dim)!important;border-top:2px solid var(--brass)!important;border-radius:6px!important;box-shadow:0 8px 24px rgba(0,0,0,.6)!important}
.ship-card.enemy-card{border-color:rgba(213,82,74,.45)!important;border-top-color:var(--wax)!important}
.card-header{border-bottom:1px solid rgba(255,255,255,.1)!important}
.card-title{font-family:var(--f-title)!important;color:var(--brass-hi)!important;letter-spacing:.05em;font-size:.9rem!important}
.enemy-card .card-title{color:#f3a29b!important}
.stat-header{font-family:var(--f-data);font-size:.84rem!important;color:var(--muted)}
.stat-header strong{color:var(--paper);font-size:.98rem;font-weight:700}
.bar-outer{height:12px!important;background:#050c13!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:2px!important}
.bar-outer::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.5) calc(10% - 1px) 10%)}
.bar-inner{box-shadow:inset 0 2px 0 rgba(255,255,255,.28)}
.hull-fill{background:linear-gradient(90deg,#1f8f5f,var(--hull))!important}.enemy-hull-fill{background:linear-gradient(90deg,#8e2a24,#e4584d)!important}.speed-fill{background:linear-gradient(90deg,#1d5f9c,var(--speed))!important}.crew-fill{background:linear-gradient(90deg,#5b3a8c,var(--crew))!important}.reload-fill{background:linear-gradient(90deg,#b07a14,var(--reload))!important}.roja-fill{background:linear-gradient(90deg,#b8321c,var(--roja))!important}.antipersonal-fill{background:linear-gradient(90deg,#8a2f78,var(--anti))!important}
.limit-marker{width:3px!important}
.mini-telemetry{font:500 .82rem var(--f-data)!important;border-top:1px solid rgba(255,255,255,.1)!important}
.enemy-fog-placeholder{border:1px dashed rgba(213,82,74,.4)!important;background:rgba(5,12,19,.5)!important;font-family:var(--f-data)}
.hud-toggle-btn{background:rgba(255,255,255,.06)!important;border:1px solid var(--brass-dim)!important;color:var(--brass-hi)!important;border-radius:3px!important;font-family:var(--f-data)!important;min-width:26px}
.hud-toggle-btn:hover{background:rgba(201,162,74,.22)!important}

/* ---------- HUD MINIMIZADO: título + barra de casco/vida en una línea ---------- */
.ship-card.hud-panel-collapsed{max-height:60px!important;opacity:.92!important;padding:6px 10px!important;gap:4px!important}
.ship-card.hud-panel-collapsed #pCarpStatus{display:none}
.ship-card.hud-panel-collapsed .card-header{border-bottom:0!important;padding-bottom:0}
.ship-card.hud-panel-collapsed .card-header + .stat-row{display:flex!important;flex-direction:row-reverse;align-items:center;gap:8px}
.ship-card.hud-panel-collapsed .card-header + .stat-row .stat-header span{display:none}
.ship-card.hud-panel-collapsed .card-header + .stat-row .bar-outer{flex:1;height:8px!important}
.ship-card.hud-panel-collapsed #enemyFogPlaceholder{display:flex!important;padding:4px 8px}
.ship-card.hud-panel-collapsed #enemyFogPlaceholder>div:nth-child(2){display:none}

/* ---------- BOTONES DE COMBATE: indicador LED en el activo ---------- */
.ammo-btn,.side-btn{--c:var(--brass);position:relative;background:linear-gradient(180deg,rgba(23,48,63,.78),rgba(9,19,29,.82))!important;border:1px solid rgba(255,255,255,.16)!important;border-bottom:3px solid rgba(255,255,255,.16)!important;border-radius:5px!important;color:var(--paper)}
.ammo-btn:hover:not(:disabled),.side-btn:hover{border-color:var(--brass)!important;transform:translateY(-2px)}
.ammo-btn.active-ammo,.ammo-btn.roja-active,.ammo-btn.special-active,.side-btn[class*="active-side"]{border-color:var(--c)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#0b1a26),#0b1a26)!important;box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent)!important}
.ammo-btn.active-ammo::after,.ammo-btn.roja-active::after,.ammo-btn.special-active::after,.side-btn[class*="active-side"]::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.ammo-btn.active-ammo{--c:var(--reload)}.ammo-btn.roja-active{--c:var(--roja)}.ammo-btn.special-active{--c:#ff9f1a}
.side-btn.active-side-ambos{--c:var(--brass)}.side-btn.active-side-babor{--c:#e0605a}.side-btn.active-side-estribor{--c:#46c98a}
.ammo-btn.fire-btn{border-color:var(--wax)!important}
.ammo-btn:disabled{opacity:.4}
.key-badge{background:#06101a!important;border:1px solid var(--brass-dim)!important;color:var(--brass-hi)!important;font-family:var(--f-data)!important}

/* ---------- CONTROLES TÁCTILES (Galaxy A56) ---------- */
body.touch-mode{--tc-pad:148px;--tc-fightw:156px;--tc-reserve:176px;--tc-card-w:min(210px,28vw)}
.tc-btn{background:rgba(15,32,48,.78)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;min-height:48px;transition:all .15s ease!important}
.tc-btn.tc-on-ammo{border-color:var(--reload)!important;background:rgba(80,52,12,.9)!important;box-shadow:0 0 14px rgba(240,177,58,.5)!important}
.tc-btn.tc-on-roja{border-color:var(--roja)!important;background:rgba(88,26,16,.9)!important;box-shadow:0 0 14px rgba(238,90,60,.5)!important}
.tc-btn.tc-side-ambos{border-color:var(--brass)!important;background:rgba(70,55,20,.92)!important}
.tc-btn.tc-side-babor{border-color:#e0605a!important;background:rgba(80,28,26,.92)!important}
.tc-btn.tc-side-estribor{border-color:#46c98a!important;background:rgba(14,60,42,.92)!important}
.tc-fire{width:92px!important;height:92px!important;border-radius:50%!important}
.tc-pad .tc-btn{border-radius:8px!important}
.tc-chip{border-radius:16px!important;background:rgba(9,19,29,.85)!important;border:1px solid var(--brass)!important;font-size:.72rem!important}
.tc-card-bar{background:rgba(0,0,0,.25);border-radius:6px;padding:2px 4px;margin-bottom:4px}
@media (orientation:portrait) and (max-width:420px){
 body.touch-mode{--tc-pad:140px;--tc-fightw:148px}
 .tc-dock .tc-btn{width:50px;height:50px}
 .tc-tray .tc-btn{width:56px;height:56px}
}
@media (orientation:landscape) and (max-height:400px){body.touch-mode{--tc-pad:130px;--tc-fightw:140px}}
@media (prefers-reduced-motion:reduce){.option-row,.option-item,.carousel-item,.ship-action-btn,.tc-btn{transition:none!important}}

/* --- Bloque de estilo --- */

/* =====================================================================
   MÓVIL · mismo lenguaje "bitácora de capitán" ajustado al Galaxy A56
   (≈ 384×832 px CSS en vertical, 832×384 en horizontal). Todo escala con
   clamp()/vw/vh y respeta las zonas seguras. Solo aplica con body.touch-mode
   (y el menú principal, que es común a PC y móvil).
   ===================================================================== */
body.touch-mode{--tc-pad:clamp(124px,36vh,156px);--tc-fightw:calc(var(--tc-pad) + 10px);--tc-reserve:calc(var(--tc-pad) + 26px);--tc-card-w:min(228px,31vw)}
@media (orientation:portrait){body.touch-mode{--tc-pad:clamp(118px,37vw,150px);--tc-card-w:calc(50vw - 14px);--tc-base:calc(var(--tc-safe-b) + var(--tc-pad))}}

/* ---------- Controles táctiles: botones ---------- */
body.touch-mode .tc-btn{background:linear-gradient(180deg,rgba(23,48,63,.84),rgba(9,19,29,.88))!important;border:1px solid rgba(255,255,255,.2)!important;border-bottom:3px solid rgba(255,255,255,.2)!important;border-radius:12px!important;box-shadow:0 4px 12px rgba(0,0,0,.55)!important}
body.touch-mode .tc-fight .tc-btn{border-radius:50%!important}
body.touch-mode .tc-btn .tc-lbl{font:600 .68rem var(--f-data);letter-spacing:.03em;color:var(--paper)}
body.touch-mode .tc-btn .tc-key{font:700 .62rem var(--f-data);color:var(--brass-hi);border-color:var(--brass-dim)}
body.touch-mode .tc-btn.tc-press{transform:scale(.93);border-color:var(--brass)!important;background:rgba(201,162,74,.3)!important}
body.touch-mode .tc-btn.tc-open-tab{border-color:var(--brass)!important;background:rgba(201,162,74,.26)!important}
body.touch-mode .tc-btn[class*="tc-on-"],body.touch-mode .tc-btn[class*="tc-side-"]{border-color:var(--c)!important;border-bottom-color:var(--c)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 32%,#0b1a26),#0b1a26)!important;box-shadow:0 0 14px color-mix(in srgb,var(--c) 50%,transparent)!important}
body.touch-mode .tc-btn[class*="tc-on-"]::after,body.touch-mode .tc-btn[class*="tc-side-"]::after{content:"";position:absolute;top:5px;left:5px;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.tc-btn.tc-on-ammo{--c:var(--reload)}.tc-btn.tc-on-roja{--c:var(--roja)}.tc-btn.tc-on-special{--c:#ff9f1a}.tc-btn.tc-on-mort{--c:#f1c40f}
.tc-btn.tc-side-ambos{--c:var(--brass)}.tc-btn.tc-side-babor{--c:#e0605a}.tc-btn.tc-side-estribor{--c:#46c98a}
body.touch-mode .tc-fire{background:linear-gradient(180deg,#8a2f2a,#5a1c19)!important;border-color:#e98a80!important}
body.touch-mode .tc-fire.tc-press{background:linear-gradient(180deg,#b13b34,#7a2622)!important}
.tc-ring{--tc-ring:var(--reload)}.tc-ring.tc-ready{--tc-ring:var(--verd)}
body.touch-mode .tc-thr{background:radial-gradient(circle,#0f2030,#09131d)!important;border:2px solid var(--brass)!important;color:var(--brass-hi)!important}
body.touch-mode .tc-thr b{font:700 .95rem var(--f-data)}
body.touch-mode .tc-thr small{font:500 .62rem var(--f-data);color:var(--muted)}

/* ---------- Tarjetas del buque y del vigía (completa · compacta · chip) ---------- */
body.touch-mode .ship-card{padding:6px 9px!important;gap:5px!important}
body.touch-mode .ship-card .bar-outer{height:9px!important}
body.touch-mode .ship-card .stat-header{font-size:.74rem!important}
body.touch-mode .ship-card .stat-header strong{font-size:.8rem}
body.touch-mode .ship-card .mini-telemetry{font-size:.7rem!important}
.tc-bar-txt{font:700 .78rem var(--f-title)!important;color:var(--brass-hi)!important}
.enemy-card .tc-bar-txt{color:#f3a29b!important}
.tc-bar-pct{font:700 .82rem var(--f-data)!important;color:var(--paper)!important}
.tc-mini-btn{width:34px!important;height:34px!important;background:rgba(255,255,255,.06)!important;border:1px solid var(--brass-dim)!important;color:var(--brass-hi)!important;border-radius:6px!important}
.tc-bar-hp{height:6px!important;background:#050c13!important;border:1px solid rgba(255,255,255,.12)}
.tc-bar-hp b{background:linear-gradient(90deg,#1f8f5f,var(--hull))!important}
.enemy-card .tc-bar-hp b{background:linear-gradient(90deg,#8e2a24,#e4584d)!important}
.tc-bar-sub{font:500 .72rem var(--f-data)!important;color:var(--muted)!important}
body.touch-mode .tc-chip{height:34px!important;padding:0 12px!important;font:700 .8rem var(--f-data)!important;letter-spacing:.03em;background:linear-gradient(180deg,rgba(15,32,48,.82),rgba(7,16,25,.88))!important;border:1px solid var(--brass-dim)!important;border-bottom:3px solid var(--brass)!important;border-radius:6px!important;color:var(--paper)!important}
body.touch-mode .tc-chip.tc-hp-ok{border-bottom-color:#46c98a!important}
body.touch-mode .tc-chip.tc-hp-mid{border-bottom-color:#f0b13a!important}
body.touch-mode .tc-chip.tc-hp-low{border-bottom-color:#e4584d!important;color:#ffb3ad!important}

/* ---------- Barra superior, avisos y prompts ---------- */
body.touch-mode .sea-top-btn{font-size:.82rem!important;padding:4px 10px!important;min-height:36px!important}
body.touch-mode .currency-sea-pill>span{padding:2px 8px;font-size:.68rem}
body.touch-mode .currency-sea-pill strong{font-size:.92rem!important}
body.touch-mode .combat-banner{font-size:.82rem!important;line-height:1.2}
body.touch-mode .sea-telemetry-strip{font-size:.8rem!important}
body.touch-mode .island-dock-prompt{font-size:.74rem;min-height:42px;padding:8px 14px;border-radius:8px}

/* ---------- Tienda en móvil: pantalla completa, cabecera fija, listas deslizables ---------- */
body.touch-mode .island-store-overlay{padding:0!important}
body.touch-mode .island-store-window{height:100vh;height:100dvh;max-height:100dvh!important;border-radius:0!important;outline-offset:-5px;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))!important}
body.touch-mode .store-header-bar{position:sticky;top:0;z-index:30;background:#0c1a27;margin:-8px -10px 8px!important;padding:8px 10px!important;gap:6px!important;flex-wrap:wrap}
body.touch-mode .store-island-title{flex:1;min-width:0;padding:4px 10px!important}
body.touch-mode #storeIslandCoords{display:none}
body.touch-mode .close-store-btn{order:2;min-height:40px;padding:6px 12px!important;font-size:.7rem!important}
body.touch-mode .store-header-bar .store-tabs{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
body.touch-mode .store-tab-btn{min-height:40px;padding:6px 12px!important;font-size:.7rem!important;scroll-snap-align:start}
body.touch-mode #view-armory .store-tabs{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x proximity}
body.touch-mode .header-box{height:auto!important;min-height:40px;font-size:.78rem!important;padding:8px 10px!important;margin-bottom:8px!important;letter-spacing:.04em}
body.touch-mode .ship-action-btn{min-height:40px;padding:6px 14px!important;font-size:1rem!important}
body.touch-mode .option-row{padding:10px 12px!important;gap:10px;font-size:.85rem!important}
body.touch-mode .carousel-wrapper{padding:0!important}
body.touch-mode .carousel-nav{display:none!important}
body.touch-mode .carousel-item{min-width:min(236px,66vw)!important}
body.touch-mode .shipyard-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.touch-mode .shipyard-table{min-width:640px}
body.touch-mode .status-toast{font-size:.95rem!important}
@media (hover:none){.option-row:hover::before,.option-item:hover::before{display:none}}

/* ---------- Menú principal: mismo lenguaje, ancho fluido ---------- */
.menu-buttons-stack{max-width:min(92vw,380px)!important;gap:12px!important}
.ocean-menu-btn{width:min(86vw,340px)!important;height:54px!important;background:linear-gradient(180deg,#17303f,#0f2030)!important;border:1px solid var(--brass-dim)!important;border-left:5px solid var(--brass)!important;border-right:5px solid var(--brass)!important;border-radius:6px!important;font-family:var(--f-title)!important;font-style:normal!important;font-size:1.05rem!important;letter-spacing:.08em!important;color:var(--paper)!important;text-shadow:none!important;box-shadow:0 6px 14px rgba(0,0,0,.55)!important}
.ocean-menu-btn:hover,.ocean-menu-btn.highlighted-btn{background:linear-gradient(180deg,#24465a,#17303f)!important;border-color:var(--brass-hi)!important;color:var(--brass-hi)!important;transform:none!important;box-shadow:0 0 0 2px rgba(239,212,142,.25),0 6px 14px rgba(0,0,0,.55)!important}
.ocean-menu-btn:active{transform:scale(.98)!important}
.ocean-menu-btn:focus-within{border-color:var(--focus)!important}
.ocean-name-input{font-family:var(--f-title)!important;font-style:normal!important;font-size:1.05rem!important;letter-spacing:.08em}
.menu-subdrawer{width:min(86vw,340px)!important;background:rgba(9,19,29,.94)!important;border:1px solid var(--brass-dim)!important;border-left:4px solid var(--brass)!important}
.menu-mini-btn{background:var(--ink3)!important;border:1px solid var(--brass-dim)!important;color:var(--paper)!important;min-height:40px;font-family:var(--f-data)!important;font-size:.95rem!important}
.menu-mini-btn:hover{border-color:var(--brass)!important}
@media (orientation:landscape) and (max-height:480px){
 .menu-center-band{min-height:0!important;padding:12px 20px!important;border-top-width:10px!important;border-bottom-width:10px!important}
 .menu-buttons-stack{display:grid!important;grid-template-columns:1fr 1fr;max-width:min(92vw,720px)!important;gap:10px!important}
 .ocean-menu-btn{width:100%!important;height:46px!important}
 .menu-subdrawer{grid-column:1/-1;width:100%!important}
}

/* --- Bloque de estilo --- */

/* =====================================================================
   FORASTEROS · PIEL VISUAL “CARTA DE NAVEGACIÓN”
   Inspiración: océano profundo, panel lateral diagonal, latón envejecido.
   Estados consistentes: foco = hielo/cian; selección = cardenillo/ámbar;
   adquirido = latón. Esta capa solo modifica presentación.
   ===================================================================== */
:root {
    --navy-950: #04111f;
    --navy-900: #071a2b;
    --navy-850: #0a2236;
    --navy-800: #103149;
    --navy-700: #17445f;
    --ocean-500: #26718c;
    --ice-100: #e2f2f4;
    --ice-300: #a9d8e3;
    --ice-500: #75b9ce;
    --brass: #c9a45a;
    --brass-light: #f0d99b;
    --brass-soft: rgba(201,164,90,.34);
    --paper: #f0eee5;
    --muted: #aab9c2;
    --selected-green: #55c7a0;
    --selected-amber: #e5bd62;
    --focus-ice: #a9e4f4;
    --danger-wax: #d66b63;
    --f-title: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
    --f-data: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
}

/* Tipografía y legibilidad global de los elementos interactivos */
.island-store-window,
.sea-main-menu-overlay,
.floating-top-config,
.floating-bottom-hud,
.world-map-window,
.controles-guia-window {
    color: var(--paper);
    font-family: var(--f-data);
}
.island-store-window button,
.sea-main-menu-overlay button,
.floating-top-config button,
.floating-bottom-hud button {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.island-store-window :focus-visible,
.sea-main-menu-overlay :focus-visible,
.floating-top-config :focus-visible,
.floating-bottom-hud :focus-visible,
.world-map-window :focus-visible,
.controles-guia-window :focus-visible {
    outline: 2px solid var(--focus-ice) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(105,190,218,.18) !important;
}

/* ---------------------------------------------------------------------
   TIENDA · panel lateral al estilo de la referencia, sobre el océano
   --------------------------------------------------------------------- */
.island-store-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: linear-gradient(90deg, rgba(2,10,20,.24), rgba(2,10,20,.08)) !important;
    backdrop-filter: blur(2px) saturate(1.08) !important;
}
.island-store-window {
    --store-rail: clamp(250px, 23vw, 330px);
    position: relative;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: var(--store-rail) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px clamp(14px, 2vw, 28px);
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: clamp(14px, 2vh, 24px) clamp(14px, 2vw, 30px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: linear-gradient(90deg, rgba(5,20,35,.16), rgba(5,20,35,.28)) !important;
    box-shadow: none !important;
}
.island-store-window::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: var(--store-rail);
    pointer-events: none;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(180deg, rgba(7,35,59,.97) 0%, rgba(4,25,46,.96) 52%, rgba(3,17,33,.98) 100%),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(110,190,210,.025) 19px 20px);
    box-shadow: inset -1px 0 0 rgba(169,216,227,.25), 12px 0 34px rgba(0,0,0,.3);
}
.island-store-window::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(var(--store-rail) - 2px);
    width: 2px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(201,164,90,.58) 18%, rgba(169,216,227,.24) 55%, transparent);
    transform: skewX(8deg);
    transform-origin: top;
}
.store-header-bar { display: contents !important; }
.store-island-title {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    min-height: 74px;
    width: 88%;
    padding: 10px 12px !important;
    gap: 10px !important;
    background: linear-gradient(90deg, rgba(13,53,77,.82), rgba(9,31,50,.58)) !important;
    border: 1px solid rgba(169,216,227,.2) !important;
    border-left: 4px solid var(--brass) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(8px);
}
.store-island-title .faction-flag-box { width: 54px; height: 36px; }
#storeIslandName {
    color: var(--brass-light) !important;
    font: 700 .9rem var(--f-title) !important;
    letter-spacing: .08em;
}
#storeIslandCoords {
    color: #c0d0d6 !important;
    font: 500 .78rem var(--f-data) !important;
    line-height: 1.25;
}
.store-header-bar > .store-tabs {
    grid-column: 1;
    grid-row: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 88%;
    min-height: 0;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 10px 8px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,164,90,.6) transparent;
}
.store-header-bar > .store-tabs::-webkit-scrollbar { width: 5px; }
.store-header-bar > .store-tabs::-webkit-scrollbar-thumb { background: rgba(201,164,90,.55); border-radius: 5px; }
.store-header-bar > .store-tabs .store-tab-btn {
    position: relative;
    flex: 0 0 51px !important;
    width: 100% !important;
    min-height: 49px;
    padding: 7px 22px 7px 17px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
    background: linear-gradient(90deg, rgba(4,20,36,.94), rgba(9,38,58,.82)) !important;
    color: #e2e9e9 !important;
    border: 1px solid rgba(157,193,205,.16) !important;
    border-left: 4px solid rgba(169,216,227,.22) !important;
    border-bottom: 1px solid rgba(0,0,0,.42) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.28) !important;
    opacity: .94 !important;
    transform: none !important;
    font: 600 clamp(.72rem, .9vw, .88rem) var(--f-title) !important;
    letter-spacing: .045em !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
.store-header-bar > .store-tabs .store-tab-btn:hover:not(.active-tab) {
    background: linear-gradient(90deg, rgba(122,154,166,.42), rgba(42,83,105,.72)) !important;
    color: #fff !important;
    border-left-color: var(--focus-ice) !important;
    border-color: rgba(169,228,244,.55) !important;
    transform: translateX(3px) !important;
}
.store-header-bar > .store-tabs .store-tab-btn.active-tab {
    background: linear-gradient(100deg, rgba(164,180,184,.94), rgba(83,116,132,.93)) !important;
    color: #071a28 !important;
    border: 1px solid rgba(224,242,244,.7) !important;
    border-left: 5px solid var(--brass-light) !important;
    border-bottom: 1px solid rgba(224,242,244,.5) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.3) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
.store-header-bar > .store-tabs .store-tab-btn.active-tab::after { content: none !important; }
.store-header-bar > .close-store-btn {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    align-self: end;
    width: 88%;
    min-height: 46px;
    padding: 9px 12px !important;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
    background: linear-gradient(90deg, rgba(13,48,69,.94), rgba(6,25,43,.96)) !important;
    border: 1px solid var(--brass-soft) !important;
    border-left: 4px solid var(--brass) !important;
    border-radius: 0 !important;
    color: var(--brass-light) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.32) !important;
    font: 600 .76rem var(--f-title) !important;
    letter-spacing: .06em;
    text-align: left;
}
.store-header-bar > .close-store-btn:hover {
    background: linear-gradient(90deg, rgba(116,147,159,.65), rgba(21,64,85,.94)) !important;
    border-color: var(--focus-ice) !important;
    color: #fff !important;
}
.island-store-window > .view-panel.active {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(10px, 1.4vw, 20px) clamp(10px, 1.5vw, 22px) 24px !important;
    background: linear-gradient(145deg, rgba(5,22,37,.82), rgba(5,17,30,.76)) !important;
    border: 1px solid rgba(169,216,227,.22);
    border-top: 2px solid rgba(201,164,90,.62);
    border-radius: 5px;
    box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 0 36px rgba(0,0,0,.18);
    backdrop-filter: blur(9px) saturate(1.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(201,164,90,.58) rgba(4,13,23,.3);
}
.island-store-window > .view-panel.active::-webkit-scrollbar { width: 8px; }
.island-store-window > .view-panel.active::-webkit-scrollbar-thumb { background: rgba(201,164,90,.56); border: 2px solid rgba(5,17,30,.7); border-radius: 8px; }
.island-store-window .header-box {
    min-height: 54px;
    height: auto;
    padding: 11px 16px !important;
    margin-bottom: 14px !important;
    background: linear-gradient(90deg, rgba(26,75,99,.9), rgba(8,34,54,.94)) !important;
    border: 1px solid rgba(169,216,227,.2) !important;
    border-left: 4px solid var(--brass) !important;
    border-top: 1px solid rgba(201,164,90,.45) !important;
    border-radius: 2px !important;
    color: var(--paper) !important;
    font: 600 .92rem/1.35 var(--f-title) !important;
    letter-spacing: .07em !important;
}

/* Submenús del Arsenal: color de categoría, pero con jerarquía coherente */
#view-armory > .store-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 0 0 10px !important;
    overflow: visible !important;
    background: transparent !important;
}
.arsenal-sub-btn {
    min-height: 42px;
    padding: 8px 13px !important;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent) !important;
    border-top: 3px solid var(--c) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, rgba(16,45,64,.95), rgba(6,24,40,.96)) !important;
    color: #dfe9eb !important;
    font: 600 .88rem var(--f-data) !important;
    letter-spacing: .035em;
    box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;
}
.arsenal-sub-btn::before { width: 8px !important; height: 8px !important; box-shadow: 0 0 8px var(--c) !important; }
.arsenal-sub-btn:hover:not(.active-tab) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, #0c2437), #071a2b) !important;
    border-color: var(--focus-ice) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.arsenal-sub-btn.active-tab {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 36%, #15334a), #0a2032) !important;
    color: #fff !important;
    border-color: var(--c) !important;
    border-bottom: 3px solid var(--c) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), 0 5px 14px rgba(0,0,0,.35) !important;
}
.arsenal-sub-panel { padding: 12px 2px 4px !important; border-top-width: 2px !important; }
.arsenal-sub-panel > .header-box { border-left-color: var(--accent) !important; }

/* ---------------------------------------------------------------------
   ESTADOS UNIVERSALES · normal / enfocado / seleccionado / adquirido
   --------------------------------------------------------------------- */
.option-row,
.option-item,
.carousel-item,
.sys-card,
.dock-slot,
.convert-item {
    color: var(--paper);
    background: linear-gradient(180deg, rgba(18,48,67,.94), rgba(7,27,43,.96)) !important;
    border: 1px solid rgba(169,216,227,.16) !important;
    border-left: 4px solid rgba(169,216,227,.2) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.27) !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .2s ease !important;
}
.option-row:hover,
.option-item:hover,
.carousel-item:hover,
.sys-card:hover,
.dock-slot:hover,
.convert-item:hover {
    background: linear-gradient(180deg, rgba(65,103,121,.78), rgba(15,48,68,.97)) !important;
    border-color: var(--focus-ice) !important;
    box-shadow: 0 0 0 1px rgba(169,228,244,.2), 0 7px 18px rgba(0,0,0,.36) !important;
    transform: translateY(-2px);
}
.carousel-item.is-focused,
.option-row:focus-within,
.option-item:focus-within,
.sys-card:focus-within,
.dock-slot:focus-within {
    opacity: 1 !important;
    border-color: var(--focus-ice) !important;
    outline: 1px solid rgba(169,228,244,.8) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(105,190,218,.16), 0 8px 20px rgba(0,0,0,.4) !important;
}
.carousel-item.is-focused { transform: scale(1.025) !important; z-index: 4; }
.option-row.selected,
.option-item.selected-green,
.carousel-item.selected-green,
.dock-slot.dock-active,
.sys-card.sys-selected,
.wallet-row.selected-green {
    background: linear-gradient(145deg, rgba(35,111,91,.88), rgba(8,54,47,.96)) !important;
    border-color: var(--selected-green) !important;
    border-left: 5px solid var(--selected-green) !important;
    color: #f0fff8 !important;
    box-shadow: 0 0 0 1px rgba(85,199,160,.45), 0 7px 18px rgba(0,0,0,.38) !important;
}
.option-item.selected-yellow,
.carousel-item.selected-yellow,
.convert-item.selected-yellow {
    background: linear-gradient(145deg, rgba(119,95,37,.9), rgba(55,44,16,.97)) !important;
    border-color: var(--selected-amber) !important;
    border-left: 5px solid var(--selected-amber) !important;
    color: #fff8e4 !important;
    box-shadow: 0 0 0 1px rgba(229,189,98,.4), 0 7px 18px rgba(0,0,0,.38) !important;
}
.option-row.selected::after,
.option-item.selected-green::after,
.option-item.selected-yellow::after,
.carousel-item.selected-green::after,
.carousel-item.selected-yellow::after {
    top: -7px !important;
    right: -7px !important;
    width: 21px !important;
    height: 21px !important;
    border: 2px solid rgba(4,17,31,.9);
    line-height: 17px !important;
    font-size: calc(12px * var(--ui-font-scale)) !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.6) !important;
}
.option-row.owned:not(.selected),
.carousel-item.owned:not(.selected-green):not(.selected-yellow) {
    border-left: 5px solid var(--brass) !important;
    box-shadow: inset 0 0 0 1px rgba(201,164,90,.16), 0 4px 12px rgba(0,0,0,.27) !important;
}
.option-row.owned:not(.selected)::after,
.carousel-item.owned:not(.selected-green):not(.selected-yellow)::after {
    content: "ADQUIRIDA" !important;
    top: -8px !important;
    right: 10px !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #6d592c, #3d3119) !important;
    border: 1px solid var(--brass-light) !important;
    color: #fff0c4 !important;
    font: 700 .7rem var(--f-data) !important;
    letter-spacing: .08em !important;
}
.option-row.owned.selected,
.carousel-item.owned.selected-green,
.carousel-item.owned.selected-yellow {
    box-shadow: inset 0 0 0 1px rgba(201,164,90,.55), 0 0 0 1px var(--selected-green), 0 7px 18px rgba(0,0,0,.38) !important;
}
.option-row small,
.carousel-item .item-desc,
.sys-stat-row,
.dock-stats { color: #b4c4cb !important; }
.option-row strong,
.carousel-item .item-title,
.sys-card-name,
.dock-ship-name { color: var(--brass-light) !important; font-family: var(--f-title) !important; }
.carousel-item .item-price { color: #e6c777 !important; font: 700 1.06rem var(--f-data) !important; letter-spacing: .025em; }
.carousel-item.selected-green .item-price { color: #a5f0d3 !important; }
.carousel-item.selected-yellow .item-price { color: #ffe4a0 !important; }
.option-row .badge-equipped { color: #a5f0d3 !important; }
.option-row .badge-price-gold { color: var(--brass-light) !important; }

/* Astillero: buque insignia frente a buques ya guardados en muelle */
.shipyard-table { border-collapse: separate !important; border-spacing: 0 4px !important; }
.shipyard-table th {
    background: linear-gradient(180deg, #1d465d, #0b2539) !important;
    color: var(--brass-light) !important;
    border-color: rgba(169,216,227,.2) !important;
    font: 600 .76rem var(--f-title) !important;
}
.shipyard-table td { border-color: rgba(169,216,227,.12) !important; }
.shipyard-table tr.row-owned td {
    background: rgba(201,164,90,.11) !important;
    border-top: 1px solid rgba(201,164,90,.24) !important;
    border-bottom: 1px solid rgba(201,164,90,.24) !important;
}
.shipyard-table tr.row-owned td:first-child { box-shadow: inset 4px 0 0 var(--brass) !important; }
.shipyard-table tr.row-active td {
    background: rgba(55,151,122,.2) !important;
    border-top: 1px solid rgba(85,199,160,.42) !important;
    border-bottom: 1px solid rgba(85,199,160,.42) !important;
}
.shipyard-table tr.row-active td:first-child { box-shadow: inset 4px 0 0 var(--selected-green) !important; }
.shipyard-table tr:hover td { filter: brightness(1.15); }

/* Botones de acción: comprar / equipar / vender / bloqueado */
.ship-action-btn {
    min-height: 34px;
    padding: 6px 12px !important;
    border-radius: 3px !important;
    font: 700 .88rem var(--f-data) !important;
    letter-spacing: .055em;
    box-shadow: 0 3px 8px rgba(0,0,0,.24) !important;
}
.ship-action-btn:not(.equip-btn):not(.sell-btn):not(.active-ship-badge):not(:disabled) {
    background: linear-gradient(180deg, #e4c777, #b58b3d) !important;
    border: 1px solid #f2dda0 !important;
    color: #15202a !important;
}
.ship-action-btn.equip-btn {
    background: linear-gradient(180deg, #225a78, #11364f) !important;
    border: 1px solid #78c6e2 !important;
    color: #effbff !important;
}
.ship-action-btn.sell-btn {
    background: linear-gradient(180deg, #71352f, #451c1a) !important;
    border: 1px solid #d88679 !important;
    color: #fff0ec !important;
}
.ship-action-btn.active-ship-badge {
    background: linear-gradient(180deg, #26765f, #124737) !important;
    border: 1px solid #76dfb7 !important;
    color: #effff8 !important;
}
.ship-action-btn:disabled {
    background: rgba(8,20,32,.68) !important;
    border: 1px dashed rgba(169,193,202,.24) !important;
    color: #718592 !important;
    opacity: .78 !important;
    box-shadow: none !important;
}
.ship-action-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.status-toast {
    background: linear-gradient(90deg, rgba(14,42,58,.94), rgba(6,22,36,.94)) !important;
    border: 1px solid rgba(201,164,90,.36) !important;
    border-left: 3px solid var(--brass) !important;
    border-radius: 3px !important;
    color: #e1e9e9 !important;
    font: 500 .92rem/1.4 var(--f-data) !important;
}

/* ---------------------------------------------------------------------
   MENÚ PRINCIPAL · panel diagonal y botones de carta náutica
   --------------------------------------------------------------------- */
.sea-main-menu-overlay {
    justify-content: flex-start !important;
    background:
        radial-gradient(ellipse 58% 80% at 76% 48%, rgba(25,139,174,.38), transparent 72%),
        radial-gradient(ellipse 100% 56% at 74% 100%, rgba(37,112,139,.34), transparent 72%),
        linear-gradient(115deg, #03152a 0%, #06314f 46%, #07516d 74%, #03233e 100%) !important;
}
.sea-main-menu-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background:
        repeating-radial-gradient(ellipse at 72% 56%, transparent 0 32px, rgba(164,225,235,.1) 33px 34px, transparent 35px 74px),
        linear-gradient(155deg, transparent 40%, rgba(128,221,237,.11) 51%, transparent 60%);
    mix-blend-mode: screen;
}
.underwater-surface-glow { opacity: .42; filter: blur(18px); }
.underwater-rays { opacity: .34; filter: blur(14px); }
.menu-center-band {
    position: relative;
    z-index: 2;
    width: min(470px, 40vw) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 auto 0 0;
    padding: clamp(54px, 7vh, 82px) clamp(50px, 5vw, 76px) clamp(26px, 4vh, 44px) clamp(22px, 2.4vw, 38px) !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(5,29,51,.94), rgba(4,22,42,.95) 55%, rgba(3,16,33,.97)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    box-shadow: 12px 0 38px rgba(0,0,0,.42), inset -1px 0 rgba(169,216,227,.24) !important;
    backdrop-filter: blur(10px) saturate(1.12) !important;
}
.menu-center-band::before {
    content: "FORASTEROS · CARTA DE NAVEGACIÓN";
    position: absolute;
    top: 24px;
    left: clamp(22px, 2.4vw, 38px);
    color: rgba(222,239,240,.72);
    font: 600 .64rem var(--f-title);
    letter-spacing: .14em;
    white-space: nowrap;
}
.menu-buttons-stack {
    width: 100% !important;
    max-width: 340px !important;
    align-items: stretch !important;
    gap: 9px !important;
}
.ocean-menu-btn {
    position: relative;
    width: 100% !important;
    height: 53px !important;
    min-height: 48px;
    justify-content: flex-start !important;
    padding: 0 25px 0 18px !important;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
    background: linear-gradient(90deg, rgba(3,19,35,.96), rgba(13,55,77,.88)) !important;
    border: 1px solid rgba(169,216,227,.17) !important;
    border-left: 4px solid rgba(201,164,90,.72) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    color: #e7eeee !important;
    text-align: left;
    text-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
    box-shadow: 0 5px 13px rgba(0,0,0,.32) !important;
    font: 600 .98rem var(--f-title) !important;
    font-style: normal !important;
    letter-spacing: .075em !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
.ocean-menu-btn:hover:not(.highlighted-btn) {
    background: linear-gradient(90deg, rgba(131,158,168,.62), rgba(38,87,109,.92)) !important;
    border-color: rgba(169,228,244,.65) !important;
    border-left-color: var(--focus-ice) !important;
    color: #fff !important;
    transform: translateX(3px) !important;
    box-shadow: 0 0 0 1px rgba(169,228,244,.16), 0 7px 16px rgba(0,0,0,.38) !important;
}
.ocean-menu-btn.highlighted-btn {
    background: linear-gradient(90deg, rgba(142,161,163,.74), rgba(35,83,101,.94)) !important;
    border: 1px solid rgba(222,239,232,.62) !important;
    border-left: 5px solid var(--brass-light) !important;
    color: #fff !important;
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 7px 17px rgba(0,0,0,.36) !important;
}
.ocean-name-input {
    width: 100%;
    color: #fff !important;
    text-align: left !important;
    padding-left: 0;
    font: 600 .98rem var(--f-title) !important;
    font-style: normal !important;
    letter-spacing: .075em !important;
}
.ocean-name-input::placeholder { color: rgba(255,255,255,.88) !important; }
.ocean-name-input:focus { outline: 0 !important; text-shadow: 0 0 10px rgba(169,228,244,.48); }
.menu-subdrawer {
    width: 100% !important;
    margin: 1px 0 4px;
    padding: 10px !important;
    background: linear-gradient(180deg, rgba(3,17,31,.98), rgba(7,31,48,.98)) !important;
    border: 1px solid rgba(201,164,90,.4) !important;
    border-left: 3px solid var(--brass) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.4) !important;
}
.menu-mini-btn {
    min-height: 38px;
    background: rgba(18,58,79,.82) !important;
    border: 1px solid rgba(169,216,227,.2) !important;
    border-radius: 2px !important;
    color: #e5eeee !important;
    font: 600 .86rem var(--f-data) !important;
}
.menu-mini-btn:hover {
    background: rgba(73,119,137,.82) !important;
    border-color: var(--focus-ice) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------
   HUD · vidrio marino, tipografía jerárquica y estados compactos
   --------------------------------------------------------------------- */
.floating-top-config { top: 10px; left: 10px; right: 10px; gap: 8px; }
.floating-config-cluster,
.faction-diplomacy-pill,
.sea-telemetry-strip,
.combat-banner,
.ship-card {
    background: linear-gradient(180deg, rgba(5,24,41,.82), rgba(3,15,29,.88)) !important;
    border: 1px solid rgba(169,216,227,.22) !important;
    border-bottom: 2px solid rgba(201,164,90,.68) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.46) !important;
    backdrop-filter: blur(9px) saturate(1.08) !important;
}
.floating-config-cluster { padding: 6px 9px; gap: 7px; }
.faction-diplomacy-pill { padding: 5px 9px; }
.config-mini-group label { color: #a9c0ca !important; font: 600 .72rem var(--f-data) !important; letter-spacing: .06em !important; }
.config-mini-group select,
#worldCoordsText,
#nearestIslandCompass {
    background: rgba(3,15,27,.92) !important;
    border: 1px solid rgba(169,216,227,.22) !important;
    border-radius: 2px !important;
    color: #ecf3f0 !important;
    font: 500 .9rem var(--f-data) !important;
}
.currency-sea-pill > span {
    background: rgba(3,14,25,.55) !important;
    border: 1px solid rgba(169,216,227,.16) !important;
    color: #c4d0d3 !important;
    font: 500 .78rem var(--f-data) !important;
}
.currency-sea-pill strong { color: var(--brass-light) !important; font: 700 1.04rem var(--f-data) !important; }
.sea-top-btn,
.hud-toggle-btn {
    background: linear-gradient(180deg, rgba(23,59,79,.82), rgba(6,25,42,.92)) !important;
    border: 1px solid rgba(201,164,90,.45) !important;
    border-radius: 3px !important;
    color: var(--brass-light) !important;
    font: 600 .83rem var(--f-data) !important;
    letter-spacing: .04em;
    box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.sea-top-btn:hover,
.hud-toggle-btn:hover {
    background: linear-gradient(180deg, rgba(101,139,153,.62), rgba(15,55,76,.95)) !important;
    border-color: var(--focus-ice) !important;
    color: #fff !important;
}
.sea-top-btn.audio-muted { background: rgba(95,32,32,.72) !important; border-color: var(--danger-wax) !important; color: #ffd0ca !important; }
.combat-banner { color: var(--brass-light) !important; font: 600 .9rem/1.3 var(--f-data) !important; letter-spacing: .025em; }
.sea-telemetry-strip { color: #c2d2d7 !important; font: 500 .78rem var(--f-data) !important; }
.faction-rules-text { color: #d6e1e3 !important; font: 500 .76rem/1.3 var(--f-data) !important; }

.floating-bottom-hud {
    grid-template-columns: minmax(230px, 26vw) minmax(300px, 1fr) minmax(230px, 26vw) !important;
    gap: 10px !important;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
.ship-card {
    padding: 9px 11px !important;
    gap: 6px !important;
    border-top: 2px solid rgba(201,164,90,.72) !important;
}
.ship-card.enemy-card { border-color: rgba(214,107,99,.46) !important; border-top-color: var(--danger-wax) !important; }
.card-header { border-bottom: 1px solid rgba(169,216,227,.15) !important; padding-bottom: 5px !important; }
.card-title { color: var(--brass-light) !important; font: 700 .84rem var(--f-title) !important; letter-spacing: .055em; }
.enemy-card .card-title { color: #f1aaa2 !important; }
.stat-header { color: #a9bdc5 !important; font: 500 .78rem var(--f-data) !important; }
.stat-header strong { color: #f0f2ed !important; font: 700 .92rem var(--f-data) !important; }
.mini-telemetry { color: #aabdc5 !important; font: 500 .74rem var(--f-data) !important; }
.bar-outer { height: 10px !important; border: 1px solid rgba(169,216,227,.18) !important; background: rgba(1,9,17,.9) !important; border-radius: 2px !important; }
.bar-outer::after { opacity: .55; }
.hull-fill { background: linear-gradient(90deg, #176247, #56d49b) !important; }
.enemy-hull-fill { background: linear-gradient(90deg, #812b2a, #df6259) !important; }
.speed-fill { background: linear-gradient(90deg, #16567e, #64bce6) !important; }
.crew-fill { background: linear-gradient(90deg, #51407e, #a78ddb) !important; }
.reload-fill { background: linear-gradient(90deg, #916d25, #e7c260) !important; }
.roja-fill { background: linear-gradient(90deg, #8f2b20, #ee694c) !important; }
.antipersonal-fill { background: linear-gradient(90deg, #733e75, #d57bd0) !important; }
.ammo-btn,
.side-btn {
    background: linear-gradient(180deg, rgba(18,53,73,.9), rgba(5,24,40,.94)) !important;
    border: 1px solid rgba(169,216,227,.2) !important;
    border-bottom: 3px solid rgba(169,216,227,.22) !important;
    border-radius: 4px !important;
    color: #eaf0ed !important;
    font-family: var(--f-data) !important;
}
.ammo-btn:hover:not(:disabled), .side-btn:hover {
    border-color: var(--focus-ice) !important;
    background: linear-gradient(180deg, rgba(65,105,124,.85), rgba(10,39,58,.96)) !important;
}
.ammo-btn.active-ammo,
.ammo-btn.roja-active,
.ammo-btn.special-active,
.side-btn[class*="active-side"] {
    border-color: var(--c) !important;
    border-bottom-color: var(--c) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 28%, #0b2336), #061827) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 0 12px color-mix(in srgb, var(--c) 30%, transparent) !important;
}
.ammo-btn:disabled { opacity: .38 !important; filter: grayscale(.45); }
.ammo-title { font: 700 .82rem var(--f-title) !important; }
.ammo-desc { color: #a9bbc2 !important; font: 500 .68rem/1.15 var(--f-data) !important; }
.key-badge { background: rgba(1,10,18,.82) !important; border: 1px solid var(--brass-soft) !important; color: var(--brass-light) !important; font: 700 .7rem var(--f-data) !important; }

/* Estado minimizado: conserva identificación y una lectura mínima del casco */
.ship-card.hud-panel-collapsed {
    max-height: 54px !important;
    min-height: 48px;
    padding: 5px 9px !important;
    gap: 3px !important;
    opacity: .97 !important;
    background: linear-gradient(90deg, rgba(5,24,41,.94), rgba(5,28,44,.86)) !important;
    border-left: 4px solid var(--brass) !important;
    border-bottom-color: rgba(201,164,90,.65) !important;
}
.ship-card.hud-panel-collapsed .card-header { min-height: 20px; padding-bottom: 0 !important; border-bottom: 0 !important; }
.ship-card.hud-panel-collapsed .card-title { font-size: .76rem !important; }
.ship-card.hud-panel-collapsed .card-header + .stat-row { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 8px !important; }
.ship-card.hud-panel-collapsed .card-header + .stat-row .stat-header { min-width: 62px; }
.ship-card.hud-panel-collapsed .card-header + .stat-row .stat-header span { display: none !important; }
.ship-card.hud-panel-collapsed .card-header + .stat-row .bar-outer { flex: 1; height: 6px !important; }
.ship-card.hud-panel-collapsed .card-header + .stat-row .stat-header strong { font: 700 .76rem var(--f-data) !important; }
.ship-card.hud-panel-collapsed #pCarpStatus { display: none !important; }
.ship-card.hud-panel-collapsed .sys-hud-row,
.ship-card.hud-panel-collapsed .mini-telemetry { display: none !important; }
.hud-top-collapsed .floating-config-cluster { min-height: 34px; padding: 4px 8px !important; border-bottom-color: var(--brass) !important; }
.hud-top-collapsed .sea-top-btn { min-height: 28px; padding: 3px 8px !important; font-size: .72rem !important; }
body.hud-ultra-thin .floating-bottom-hud,
body.hud-ultra-thin .floating-top-config { opacity: .42 !important; filter: saturate(.72); transition: opacity .2s ease, filter .2s ease; }
body.hud-ultra-thin .floating-bottom-hud:hover,
body.hud-ultra-thin .floating-bottom-hud:focus-within,
body.hud-ultra-thin .floating-top-config:hover,
body.hud-ultra-thin .floating-top-config:focus-within { opacity: 1 !important; filter: none; }

/* ---------------------------------------------------------------------
   MAPA Y GUÍA: misma familia cromática
   --------------------------------------------------------------------- */
.world-map-window,
.controles-guia-window {
    background: linear-gradient(155deg, rgba(12,39,57,.98), rgba(4,17,31,.98)) !important;
    border: 1px solid var(--brass) !important;
    border-radius: 5px !important;
    box-shadow: 0 18px 54px rgba(0,0,0,.72) !important;
}
.world-map-header h2,
.controles-guia-header h2 { color: var(--brass-light) !important; font-family: var(--f-title) !important; }
.controles-tab-btn { font-family: var(--f-title) !important; }
.controles-tab-btn.active-tab { background: linear-gradient(180deg,#536f7e,#263f51) !important; color: #fff !important; border-color: var(--focus-ice) !important; }

/* Pantallas medias y móviles: navegación horizontal para no sacrificar espacio */
@media (max-width: 900px), (max-height: 620px) {
    .island-store-overlay { padding: 0 !important; background: rgba(2,10,19,.86) !important; backdrop-filter: blur(6px) !important; }
    .island-store-window {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom,0px)) !important;
        overflow-y: auto !important;
        background: linear-gradient(160deg, rgba(11,34,51,.98), rgba(3,15,27,.99)) !important;
    }
    .island-store-window::before,
    .island-store-window::after { display: none !important; }
    .store-header-bar {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 30;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 7px !important;
        margin: -8px -10px 2px !important;
        padding: 8px 10px !important;
        background: rgba(5,20,34,.98) !important;
        border-bottom: 1px solid var(--brass-soft) !important;
    }
    .store-island-title { width: auto; flex: 1 1 190px; min-height: 48px; padding: 5px 8px !important; }
    .store-header-bar > .close-store-btn { order: 2; width: auto; min-height: 40px; justify-self: auto; align-self: auto; padding: 7px 10px !important; }
    .store-header-bar > .store-tabs {
        order: 3;
        width: 100%;
        max-height: 54px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 3px 2px 7px !important;
    }
    .store-header-bar > .store-tabs .store-tab-btn { flex: 0 0 auto !important; width: auto !important; min-width: 132px; min-height: 40px; padding: 6px 12px !important; clip-path: none; font-size: .68rem !important; }
    .island-store-window > .view-panel.active {
        flex: 1 0 auto;
        width: 100%;
        max-height: none !important;
        overflow: visible;
        padding: 8px 2px 18px !important;
        background: transparent !important;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
    #view-armory > .store-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; }
    .floating-bottom-hud { grid-template-columns: minmax(190px,1fr) minmax(250px,1.2fr) minmax(190px,1fr) !important; }
    .menu-center-band { width: min(430px, 54vw) !important; padding-right: 60px !important; }
}
@media (max-width: 600px) {
    .menu-center-band {
        width: 100vw !important;
        min-height: 100dvh !important;
        padding: 58px 24px 28px !important;
        clip-path: none;
        background: linear-gradient(180deg, rgba(5,29,51,.96), rgba(4,18,34,.97)) !important;
    }
    .menu-center-band::before { left: 24px; }
    .menu-buttons-stack { max-width: 390px !important; margin: 0 auto; }
    .ocean-menu-btn { height: 49px !important; font-size: .88rem !important; }
    .menu-subdrawer { max-width: 390px; }
    .floating-bottom-hud { grid-template-columns: 1fr !important; max-height: 48vh; overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 480px) {
    .menu-center-band { min-height: 100dvh !important; padding: 42px 54px 14px 22px !important; }
    .menu-buttons-stack { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: 720px !important; gap: 7px !important; }
    .ocean-menu-btn { width: 100% !important; height: 42px !important; min-height: 40px; font-size: .82rem !important; }
    .menu-subdrawer { grid-column: 1 / -1; width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ocean-menu-btn,
    .menu-mini-btn,
    .store-tab-btn,
    .option-row,
    .option-item,
    .carousel-item,
    .ship-action-btn,
    .ammo-btn,
    .side-btn { transition: none !important; }
}

/* --- Bloque de estilo --- */

:root {
        --ui-font-scale: 0.95;
        --f-title: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
        --f-data: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif;
    }
    html {
        font-size: calc(100% * var(--ui-font-scale));
    }
    body,
    body * {
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif !important;
    }
    body *::before,
    body *::after {
        font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif !important;
    }

/* =====================================================================
   CLASES EXTRAÍDAS DE AUTH-SYSTEM Y ATRIBUTOS INLINE (CSP STRICT)
   ===================================================================== */
.carousel-header-box { margin-bottom: 8px; font-size: 0.92rem; height: auto; padding: 10px; }
.sim-badge-pos { color: #9be564; font-size: 0.85rem; }
.sim-badge-neg { color: #ff7b7b; font-size: 0.85rem; }
.sim-badge-neu { color: #cccccc; font-size: 0.85rem; }
.sim-badge-gold { color: #f1c40f; font-size: 0.85rem; }
.badge-free { color: #58d68d; }
.text-center { text-align: center; }
.flex-1 { flex: 1; }
.auth-verify-info { text-align: center; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 1.05rem; color: #d8f8ff; line-height: 1.35; }
.auth-verify-target { color: #82faff; }
.auth-verify-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; }
.auth-room-selection-panel { margin-top: 18px; padding: 12px; background: rgba(0,20,40,0.7); border: 1px solid #3ae3f6; border-radius: 6px; }
.auth-room-selection-title { text-align: center; color: #82faff; margin-bottom: 8px; font-weight: bold; }
.auth-room-btn { width: 100%; margin: 4px 0; text-align: left; }
.auth-forgot-btn { margin-top: 10px; width: 100%; }
.auth-ui-hidden { display: none !important; }

.auth-gate-overlay {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
  background: radial-gradient(ellipse 85% 42% at 50% -4%, rgba(185, 252, 255, 0.96) 0%, rgba(20, 165, 215, 0.78) 34%, rgba(5, 52, 98, 0.94) 68%, #021326 100%);
  font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; transition: opacity 0.45s ease, visibility 0.45s ease;
}
.auth-gate-overlay.auth-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-card {
  position: relative; width: 100%; max-width: 430px;
  background: linear-gradient(180deg, rgba(4, 24, 46, 0.92) 0%, rgba(6, 36, 66, 0.95) 50%, rgba(4, 20, 40, 0.94) 100%);
  border-top: 14px solid rgba(3, 9, 16, 0.85); border-bottom: 14px solid rgba(3, 9, 16, 0.85);
  border-left: 3px solid #3ae3f6; border-right: 3px solid #3ae3f6; border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(58, 227, 246, 0.22);
  padding: 26px 28px; color: #eefcff; z-index: 2;
}
.auth-title { text-align: center; font-size: 1.55rem; font-weight: 700; color: #82faff; letter-spacing: 1.5px; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.auth-subtitle { text-align: center; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 1.02rem; color: #b8e8f5; margin-bottom: 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.auth-tab-btn { background: rgba(7, 42, 62, 0.85); border: 1px solid rgba(58, 227, 246, 0.4); color: #b8e8f5; padding: 9px 10px; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; }
.auth-tab-btn.active { background: linear-gradient(90deg, rgba(16, 95, 118, 0.95) 0%, rgba(34, 150, 178, 0.95) 50%, rgba(16, 95, 118, 0.95) 100%); border-color: #82faff; color: #ffffff; box-shadow: 0 0 12px rgba(72, 235, 255, 0.45); }
.auth-form { display: none; flex-direction: column; gap: 13px; }
.auth-form.active { display: flex; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field label { font-size: 0.72rem; color: #82faff; letter-spacing: 0.7px; text-transform: uppercase; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input { width: 100%; background: rgba(3, 16, 30, 0.9); border: 1px solid rgba(58, 227, 246, 0.5); border-radius: 4px; padding: 10px 12px; color: #ffffff; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 1.12rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.auth-input:focus { border-color: #82faff; box-shadow: 0 0 10px rgba(130, 250, 255, 0.4); }
.auth-eye-btn { position: absolute; right: 8px; background: transparent; border: none; color: #82faff; cursor: pointer; font-size: 1rem; padding: 4px 6px; opacity: 0.8; }
.auth-eye-btn:hover { opacity: 1; }
.auth-checkbox-row { display: flex; align-items: flex-start; gap: 9px; background: rgba(5, 28, 48, 0.75); border: 1px solid rgba(58, 227, 246, 0.3); padding: 9px 11px; border-radius: 4px; cursor: pointer; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.98rem; color: #d8f8ff; line-height: 1.25; }
.auth-checkbox-row input[type="checkbox"] { margin-top: 2px; accent-color: #3ae3f6; width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.auth-submit-btn { width: 100%; height: 44px; margin-top: 4px; background: linear-gradient(90deg, rgba(7, 50, 66, 0.95) 0%, rgba(22, 126, 150, 0.95) 50%, rgba(7, 50, 66, 0.95) 100%); border-top: 1px solid rgba(120, 225, 245, 0.4); border-bottom: 1px solid rgba(2, 20, 32, 0.9); border-left: 5px solid #3ae3f6; border-right: 5px solid #3ae3f6; color: #ffffff; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 1.35rem; letter-spacing: 0.6px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55); }
.auth-submit-btn:hover:not(:disabled) { background: linear-gradient(90deg, rgba(112, 168, 178, 0.94) 0%, rgba(168, 218, 226, 0.97) 50%, rgba(112, 168, 178, 0.94) 100%); border-left-color: #82faff; border-right-color: #82faff; box-shadow: 0 0 16px rgba(72, 235, 255, 0.7); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-secondary-btn { background: rgba(14, 62, 84, 0.75); border: 1px solid rgba(58, 227, 246, 0.45); color: #d8f8ff; padding: 8px 12px; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.72rem; cursor: pointer; border-radius: 4px; transition: all 0.15s; }
.auth-secondary-btn:hover:not(:disabled) { background: rgba(32, 118, 148, 0.9); border-color: #82faff; }
.auth-secondary-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-guest-btn { width: 100%; margin-top: 14px; background: rgba(40, 70, 90, 0.8); border: 1px solid rgba(130, 250, 255, 0.6); color: #82faff; padding: 10px; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.auth-guest-btn:hover { background: rgba(60, 100, 130, 0.9); box-shadow: 0 0 12px rgba(130, 250, 255, 0.4); }
.auth-msg { min-height: 20px; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.98rem; text-align: center; padding: 6px 8px; border-radius: 4px; display: none; }
.auth-msg.error { display: block; background: rgba(120, 22, 22, 0.8); border: 1px solid #ff7675; color: #ffdede; }
.auth-msg.success { display: block; background: rgba(20, 95, 50, 0.8); border: 1px solid #55efc4; color: #e8fff5; }
.auth-msg.info { display: block; background: rgba(15, 65, 95, 0.8); border: 1px solid #74b9ff; color: #e3f2fd; }
.auth-code-input { letter-spacing: 8px; font-size: 1.55rem !important; font-weight: 700; text-align: center; font-family: monospace !important; }
.auth-session-badge { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 300px; max-width: calc(100% - 32px); box-sizing: border-box; background: rgba(4, 24, 42, 0.9); border: 1px solid rgba(58, 227, 246, 0.55); border-radius: 4px; padding: 6px 10px; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.95rem; color: #d8f8ff; margin: 0; }
.auth-logout-btn { background: rgba(110, 30, 30, 0.85); border: 1px solid #ff7675; color: #fff; font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', 'Times New Roman', serif; font-size: 0.65rem; padding: 4px 8px; border-radius: 3px; cursor: pointer; }
.auth-logout-btn:hover { background: rgba(150, 40, 40, 0.95); }
.csp-st-1 { background:#0a141f; border:1px solid var(--gold-dim); padding:4px 8px; border-radius:4px; font-size:0.74rem; color:#74b9ff; font-family:monospace; }
.csp-st-2 { background:#0a141f; border:1px solid var(--gold-dim); padding:4px 8px; border-radius:4px; font-size:0.74rem; color:#f1c40f; font-family:monospace; }
.csp-st-3 { display:none; top:158px; }
.csp-st-4 { font-size:0.71rem; color:#2ecc71; }
.csp-st-5 { left: 90%; }
.csp-st-6 { width: 100%; }
.csp-st-7 { width: 0%; }
.csp-st-8 { left: 30%; background:#e74c3c; }
.csp-st-9 { color:#f1c40f; }
.csp-st-10 { color:#ff7675; }
.csp-st-11 { color:#63b4e0; font-weight:bold; }
.csp-st-12 { font-size: 0.88rem; color: #ff7675; font-weight: bold; }
.csp-st-13 { font-size: 0.72rem; line-height: 1.3; }
.csp-st-14 { display: none; flex-direction: column; gap: 6px; }
.csp-st-15 { font-size:0.75rem; color:#f1c40f; font-weight:bold; }
.csp-st-16 { margin-top:4px; }
.csp-st-17 { font-size:0.68rem; font-weight:normal; text-align:right; max-width:220px; }
.csp-st-18 { background:#f1c40f; }
.csp-st-19 { background:#c0392b; }
.csp-st-20 { background:#8e44ad; }
.csp-st-21 { background:#27ae60; }
.csp-st-22 { background:#2ecc71; border-radius:50%; }
.csp-st-23 { background:#a8d8ea; }
.csp-st-24 { opacity:0.85; }
.csp-st-25 { flex-wrap:wrap; }
.csp-st-26 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.csp-st-27 { margin-top:12px; font-size:0.8rem; color:#b2bec3; }
.csp-st-28 { display:none; }
.csp-st-29 { font-size: 0.98rem; font-weight: 700; color: #f1c40f; }
.csp-st-30 { font-size: 0.72rem; color: #d5c8b4; }
.csp-st-31 { margin: 10px 0 14px; justify-content: center; flex-wrap: wrap; gap: 8px; }
.csp-st-32 { background:linear-gradient(180deg,#1a3a5c 0%,#0d2238 100%); border-color:#5dade2; }
.csp-st-33 { background:linear-gradient(180deg,#1e8449 0%,#145a32 100%); border-color:#58d68d; }
.csp-st-34 { background:linear-gradient(180deg,#6c3483 0%,#4a235a 100%); border-color:#bb8fce; }
.csp-st-35 { background:linear-gradient(180deg,#d35400 0%,#a04000 100%); border-color:#f5b041; }
.csp-st-36 { background:linear-gradient(180deg,#922b21 0%,#641e16 100%); border-color:#ec7063; }
.csp-st-37 { background:#1a3a5c; border-color:#5dade2; }
.csp-st-38 { text-align:center; margin:8px 0; font-size:0.85rem; color:#d4af37; }
.csp-st-39 { max-width:920px; margin:0 auto; }
.csp-st-40 { background:linear-gradient(180deg,#145a32 0%,#0b2e1a 100%); border:2px solid #27ae60; color:#e8f8f0; }
.csp-st-41 { text-align:center; margin:10px 0; font-size:0.95rem; color:#d5e8dc; }
.csp-st-42 { max-width:720px; margin:0 auto 18px; padding:14px 16px; background:linear-gradient(180deg,#122018 0%,#0a1510 100%); border:1px solid #1e8449; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,0.55); }
.csp-st-43 { font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.6px; color:#58d68d; margin-bottom:10px; border-bottom:1px solid rgba(88,214,141,0.25); padding-bottom:6px; }
.csp-st-44 { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:flex-end; }
.csp-st-45 { font-size:0.72rem; color:#a8c5b5; text-transform:uppercase; letter-spacing:0.4px; }
.csp-st-46 { width:120px; padding:7px 8px; background:#0a120e; color:#f0f7f3; border:1px solid #27ae60; border-radius:4px; font-size:0.95rem; }
.csp-st-47 { display:flex; gap:8px; }
.csp-st-48 { background:linear-gradient(180deg,#1e8449 0%,#145a32 100%); border:1px solid #58d68d; color:#fff; font-weight:700; }
.csp-st-49 { background:linear-gradient(180deg,#6e2c2c 0%,#481b1b 100%); border:1px solid #e74c3c; color:#fff; font-weight:700; }
.csp-st-50 { margin-top:10px; font-size:0.72rem; color:#8fafa0; line-height:1.35; }
.csp-st-51 { max-width:720px; margin:0 auto 12px; padding:14px 16px; background:linear-gradient(180deg,#2a1a0c 0%,#1a1008 100%); border:1px solid #c47a1a; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,0.55); }
.csp-st-52 { font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.6px; color:#f0b429; margin-bottom:10px; border-bottom:1px solid rgba(240,180,41,0.28); padding-bottom:6px; }
.csp-st-53 { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.csp-st-54 { text-align:center; min-width:140px; padding:8px 12px; background:rgba(0,0,0,0.35); border:1px solid #8a5a18; border-radius:4px; }
.csp-st-55 { font-size:0.68rem; color:#c9a66b; text-transform:uppercase; }
.csp-st-56 { font-size:1.45rem; color:#f1c40f; }
.csp-st-57 { font-size:0.68rem; color:#b8955a; }
.csp-st-58 { text-align:center; min-width:150px; padding:8px 12px; background:rgba(0,0,0,0.35); border:1px solid #8a5a18; border-radius:4px; }
.csp-st-59 { font-size:1.15rem; color:#e8d48b; }
.csp-st-60 { font-size:0.72rem; color:#c9a66b; text-transform:uppercase; letter-spacing:0.4px; }
.csp-st-61 { width:120px; padding:7px 8px; background:#120c06; color:#f7ecd8; border:1px solid #c47a1a; border-radius:4px; font-size:0.95rem; }
.csp-st-62 { background:linear-gradient(180deg,#b77712 0%,#7a4e0a 100%); border:1px solid #f0b429; color:#1a1008; font-weight:700; }
.csp-st-63 { margin-top:10px; font-size:0.72rem; color:#a8895c; line-height:1.35; }
.csp-st-64 { color:#f0b429; }
.csp-st-65 { background:rgba(12,20,16,0.92); border:1px solid #2d5a40; color:#c8e0d2; }
.csp-st-66 { background:#6c3483; border-color:#bb8fce; }
.csp-st-67 { background:linear-gradient(180deg,#a04000 0%,#5c2500 100%); border:2px solid #e67e22; color:#fdebd0; }
.csp-st-68 { background:rgba(28,14,6,0.92); border:1px solid #a04000; color:#f5d0a9; }
.csp-st-69 { background:#922b21; border-color:#ec7063; }
.csp-st-70 { font-size:0.8rem; }
.csp-st-71 { color:#c5c94b; }
.csp-st-72 { flex:1; max-width:480px; }
.csp-st-73 { font-size:0.75rem; }
.csp-st-74 { display:flex; gap:4px; margin-left:8px; }
.csp-st-75 { padding:4px 8px; font-size:0.65rem; }
.csp-st-76 { max-height: 48vh; }
.csp-st-77 { color:#87b865; }
.csp-st-78 { color:#f1c40f; font-size:1.15rem; }
.csp-st-79 { color:#9be564; font-size:1.15rem; }
.csp-st-80 { max-height: 54vh; }
.csp-st-81 { background:#2b2a28; color:#fff; border:1px solid #87b865; padding:4px 8px; font-family:'Cinzel',serif; }
.csp-st-82 { width:140px; height:32px; border:1px solid rgba(255,255,255,0.3); font-size:1.3rem; }
.csp-st-83 { width:140px; height:32px; border:1px solid #c5c94b; font-size:1.3rem; }
.csp-st-84 { max-width:720px; margin:12px auto; }
.csp-st-85 { font-size:0.85rem; }
.csp-st-86 { color:#f1c40f; font-size:1.4rem; }
.csp-st-87 { color:#c5c94b; font-size:0.8rem; }
.csp-st-88 { color:#9be564; font-size:1.3rem; }
.csp-st-89 { max-width:480px; margin:0 auto; }
.csp-st-90 { margin-bottom:8px; }
.csp-st-91 { border:none; justify-content:center; gap:12px; }
.csp-st-92 { max-width:720px; margin:22px auto 8px; }
.csp-st-93 { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-top:8px; }
.csp-st-94 { font-size:0.92rem; color:#e2e8f0; min-width:180px; text-align:center; }
.csp-st-95 { font-size:0.65rem;color:#b2bec3;margin-top:3px; }
.csp-st-96 { font-size:0.65rem;color:#58d68d;margin-top:3px; }
.csp-st-97 { display:flex; align-items:center; gap:10px; }
.csp-st-98 { background:rgba(6,21,36,0.75); border:1px solid rgba(212,175,55,0.45); border-radius:4px; flex-shrink:0; }
.csp-st-99 { font-size:0.95rem; }
.csp-st-100 { font-size:0.68rem;color:#d4af37; }
.csp-st-101 { color:var(--gold);font-weight:700; }
.csp-st-102 { color:#95a5a6; }
.csp-st-103 { color:#2ecc71;font-size:0.72rem;font-weight:bold; }
.csp-st-104 { flex:1; }
.csp-st-105 { text-align:right; }
.csp-st-106 { font-size:0.78rem;color:#ff7675;font-weight:bold; }
.csp-st-107 { font-size:0.64rem;line-height:1.25; }

/* ================================================================
   FORASTEROS · 2026-11-02 / UI COMPACTA, SIN ESTILOS INLINE
   Prioridad: HUD levemente menor, paneles no superpuestos y bajo coste.
   Conserva deliberadamente la familia tipográfica original (Georgia).
   ================================================================ */
:root { --ui-font-scale: .95; --ui-safe-edge: 9px; --ui-focus: #a7e6ed; --tc-base: calc(env(safe-area-inset-bottom, 0px) + 38px); }
html.ui-font-small { --ui-font-scale: .95; }
.ui-hidden { display: none !important; }
.ui-visible-flex { display: flex !important; }
.ui-touch-manipulate { touch-action: manipulation !important; }
.ui-tone-warn { color: #f1c40f !important; }
.ui-tone-info { color: #63b4e0 !important; }
.ui-tone-ok, .ui-tone-ambos { color: #2ecc71 !important; }
.ui-tone-muted { color: #b2bec3 !important; }
.ui-tone-babor { color: #74b9ff !important; }
.ui-tone-estribor { color: #ff7675 !important; }
.ui-banner-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.ui-banner-visible { opacity: 1 !important; visibility: visible !important; display: block !important; }
.ui-banner-warn { color: #f1c40f !important; border-color: #d4af37 !important; }
.ui-banner-danger { color: #ff9b94 !important; border-color: #e74c3c !important; }
.ui-banner-info { color: #a2e7ff !important; border-color: #63b4e0 !important; }
.ui-banner-ok { color: #92efc3 !important; border-color: #2ecc71 !important; }
.ui-status-owned { color: #2ecc71 !important; }
.ui-status-available { color: #f1c40f !important; }
.ui-status-unavailable { color: #aab7c0 !important; }
.arsenal-sub-panel:not(.ui-sub-active) { display: none !important; }
.arsenal-sub-panel.ui-sub-active { display: block !important; }
.controles-modo-vista:not(.ui-view-active) { display: none !important; }
.controles-modo-vista.ui-view-active { display: block !important; }
/* Navegación, jerarquía y mayor superficie marítima libre */
.floating-top-config {
    top: var(--ui-safe-edge) !important;
    left: var(--ui-safe-edge) !important;
    right: var(--ui-safe-edge) !important;
    gap: 5px !important;
    align-items: flex-start !important;
}
.floating-config-cluster {
    padding: 4px 7px !important;
    gap: 5px !important;
    max-width: 100% !important;
    min-width: 0;
}
.faction-diplomacy-pill { max-width: min(420px, 36vw) !important; padding: 4px 7px !important; }
.faction-flag-box { width: 40px; height: 26px; }
.faction-rules-text { font-size: .68rem !important; line-height: 1.2 !important; }
.currency-sea-pill { gap: 4px !important; padding: 2px 5px !important; }
.currency-sea-pill > span { padding: 1px 3px !important; font-size: .69rem !important; }
.currency-sea-pill strong { font-size: .84rem !important; }
.sea-top-btn { font-size: .74rem !important; padding: 4px 7px !important; min-height: 28px !important; }
.config-mini-group label { font-size: .64rem !important; }
.config-mini-group select, #worldCoordsText, #nearestIslandCompass { font-size: .75rem !important; }
.floating-bottom-hud {
    left: var(--ui-safe-edge) !important;
    right: var(--ui-safe-edge) !important;
    bottom: max(var(--ui-safe-edge), env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: minmax(205px, 22vw) minmax(0, 1fr) minmax(205px, 22vw) !important;
    gap: 7px !important;
    align-items: end !important;
}
.ship-card { min-width:0; padding: 6px 8px !important; gap: 4px !important; }
.ship-card .card-header { gap: 5px !important; padding-bottom: 3px !important; min-width:0; }
.ship-card .card-title { font-size: .77rem !important; line-height: 1.1 !important; }
.ship-card .card-header > span { min-width: 0; overflow-wrap: anywhere; }
.ship-card .stat-header { gap: 5px !important; font-size: .68rem !important; line-height: 1.16 !important; }
.ship-card .stat-header span { min-width:0; }
.ship-card .stat-header strong { font-size: .75rem !important; white-space: normal; text-align:right; max-width: 52%; }
.ship-card .stat-row { gap: 1px !important; }
.ship-card .bar-outer { height: 7px !important; }
.ship-card .mini-telemetry { font-size: .64rem !important; padding-top: 2px !important; gap: 4px; flex-wrap: wrap; }
.ship-card .sys-hud-row { font-size: .62rem !important; padding: 0 0 2px !important; }
.hud-toggle-btn { min-width: 26px; min-height: 24px; font-size: .72rem !important; padding: 2px 5px !important; }
.ship-card.hud-panel-collapsed { max-height: 43px !important; min-height: 39px !important; padding: 4px 7px !important; }
.ship-card.hud-panel-collapsed .card-title { font-size: .72rem !important; }
.center-sea-controls { min-width: 0; gap: 4px !important; }
.sea-telemetry-strip {
    max-width: min(100%, 670px);
    padding: 4px 8px !important;
    font-size: .69rem !important;
    line-height: 1.25 !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Avisos: una misma columna con espacio reservado entre alerta y puerto. */
.combat-banner {
    top: clamp(85px, 13vh, 138px) !important;
    max-width: min(630px, 65vw) !important;
    padding: 5px 11px !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
    transition: opacity .22s ease, visibility .22s ease;
}
.island-dock-prompt {
    top: clamp(136px, 21vh, 215px) !important;
    max-width: min(650px, 68vw) !important;
    padding: 6px 12px !important;
    text-align: center;
    font-size: .77rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}
#atraparBallenaPrompt { top: clamp(185px, 29vh, 285px) !important; }
/* Señales y foco: selección, equipado, no disponible y respuesta breve */
button, [role="button"], input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--ui-focus) !important;
    outline-offset: 2px;
}
button:disabled, .ship-action-btn:disabled, .option-item[aria-disabled="true"] {
    opacity: .47 !important; filter: grayscale(.36); cursor: not-allowed !important;
}
.ship-action-btn.equip-btn:not(:disabled), .badge-equipped, .active-ship-badge {
    border-color: #61d6ad !important;
}
.ship-action-btn.sell-btn:not(:disabled) { border-color: rgba(246, 166, 113, .5) !important; }
.store-tab-btn:focus-visible, .arsenal-sub-btn:focus-visible, .controles-tab-btn:focus-visible { z-index: 2; }
.store-tab-btn.active-tab, .arsenal-sub-btn.active-tab, .controles-tab-btn.active-tab {
    box-shadow: inset 0 -3px 0 #9de6c4, 0 3px 10px rgba(0,0,0,.22) !important;
}
.island-store-window, .world-map-window, .controles-guia-window {
    overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #8caaad rgba(4,17,27,.7);
}
.store-tabs, .carousel-track, .carousel-wrapper { scrollbar-width: thin; scrollbar-color: #a8becc transparent; }
.island-store-overlay.open, .world-map-overlay.open, .controles-guia-overlay.open {
    isolation: isolate;
}
/* 900px: no apilar las tarjetas sobre las acciones ni ocultar la telemetría */
@media (max-width: 1100px) and (min-width: 701px) {
    body:not(.touch-mode) .floating-bottom-hud { grid-template-columns: minmax(175px, 25%) minmax(0,1fr) minmax(175px,25%) !important; }
    body:not(.touch-mode) .ship-card .stat-header { flex-wrap: wrap; }
    body:not(.touch-mode) .ship-card .stat-header strong { max-width:100%; }
    .faction-diplomacy-pill { max-width: 32vw !important; }
}
@media (max-width: 700px) {
    body:not(.touch-mode) .floating-bottom-hud {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        max-height: min(38vh, 275px) !important;
        overflow: visible !important;
        gap: 5px !important;
    }
    body:not(.touch-mode) .center-sea-controls { grid-column: 1 / -1; grid-row: 1; }
    body:not(.touch-mode) .ship-card { max-height: min(30vh,210px); overflow-y:auto; }
    .faction-diplomacy-pill { display:none; }
    .combat-banner { max-width: 90vw !important; top: clamp(70px, 17vh, 115px) !important; }
    .island-dock-prompt { max-width: 90vw !important; top: clamp(122px, 26vh, 180px) !important; }
    #atraparBallenaPrompt { top: clamp(172px, 35vh, 220px) !important; }
}
@media (max-height: 630px) and (min-width: 701px) {
    .floating-top-config { max-height: 92px; overflow-y: auto; pointer-events: auto; }
    .combat-banner { top: 105px !important; }
    .island-dock-prompt { top: 150px !important; }
    #atraparBallenaPrompt { top: 198px !important; }
    body:not(.touch-mode) .ship-card { max-height: 29vh; overflow-y: auto; }
}
/* Móvil táctil: conserva timón, botones y chips sin invertir su jerarquía. */
body.touch-mode { --tc-top: inherit; }
body.touch-mode .floating-bottom-hud { inset: 0 !important; grid-template-columns: none !important; max-height:none !important; }
body.touch-mode .ship-card { padding:5px 6px !important; gap:3px !important; }
body.touch-mode .ship-card .stat-header { font-size: .63rem !important; }
body.touch-mode .ship-card .stat-header strong { font-size:.67rem !important; }
body.touch-mode .tc-bar-txt { font-size:.67rem !important; }
body.touch-mode .tc-btn, body.touch-mode .tc-mini-btn { transition: background-color .12s linear, border-color .12s linear, transform .12s ease; }
body.touch-mode .combat-banner { max-width: 52vw !important; top: auto !important; bottom: calc(var(--tc-base) + 148px) !important; font-size: .69rem !important; }
body.touch-mode .island-dock-prompt { max-width: 58vw !important; top: auto !important; bottom: calc(var(--tc-base) + 105px) !important; font-size: .66rem !important; }
body.touch-mode #atraparBallenaPrompt { top: auto !important; bottom: calc(var(--tc-base) + 62px) !important; }
@media (prefers-reduced-motion: reduce) {
    .combat-banner, .ship-card, .tc-btn, .sea-top-btn, .ocean-menu-btn { animation: none !important; transition: none !important; }
}

/* External-CSS-only discrete 1% fill values and tactile reload circles. */
.ui-pct-0 { width: 0% !important; } .ui-ring-0 { --rl: 0; }
.ui-pct-1 { width: 1% !important; } .ui-ring-1 { --rl: 1; }
.ui-pct-2 { width: 2% !important; } .ui-ring-2 { --rl: 2; }
.ui-pct-3 { width: 3% !important; } .ui-ring-3 { --rl: 3; }
.ui-pct-4 { width: 4% !important; } .ui-ring-4 { --rl: 4; }
.ui-pct-5 { width: 5% !important; } .ui-ring-5 { --rl: 5; }
.ui-pct-6 { width: 6% !important; } .ui-ring-6 { --rl: 6; }
.ui-pct-7 { width: 7% !important; } .ui-ring-7 { --rl: 7; }
.ui-pct-8 { width: 8% !important; } .ui-ring-8 { --rl: 8; }
.ui-pct-9 { width: 9% !important; } .ui-ring-9 { --rl: 9; }
.ui-pct-10 { width: 10% !important; } .ui-ring-10 { --rl: 10; }
.ui-pct-11 { width: 11% !important; } .ui-ring-11 { --rl: 11; }
.ui-pct-12 { width: 12% !important; } .ui-ring-12 { --rl: 12; }
.ui-pct-13 { width: 13% !important; } .ui-ring-13 { --rl: 13; }
.ui-pct-14 { width: 14% !important; } .ui-ring-14 { --rl: 14; }
.ui-pct-15 { width: 15% !important; } .ui-ring-15 { --rl: 15; }
.ui-pct-16 { width: 16% !important; } .ui-ring-16 { --rl: 16; }
.ui-pct-17 { width: 17% !important; } .ui-ring-17 { --rl: 17; }
.ui-pct-18 { width: 18% !important; } .ui-ring-18 { --rl: 18; }
.ui-pct-19 { width: 19% !important; } .ui-ring-19 { --rl: 19; }
.ui-pct-20 { width: 20% !important; } .ui-ring-20 { --rl: 20; }
.ui-pct-21 { width: 21% !important; } .ui-ring-21 { --rl: 21; }
.ui-pct-22 { width: 22% !important; } .ui-ring-22 { --rl: 22; }
.ui-pct-23 { width: 23% !important; } .ui-ring-23 { --rl: 23; }
.ui-pct-24 { width: 24% !important; } .ui-ring-24 { --rl: 24; }
.ui-pct-25 { width: 25% !important; } .ui-ring-25 { --rl: 25; }
.ui-pct-26 { width: 26% !important; } .ui-ring-26 { --rl: 26; }
.ui-pct-27 { width: 27% !important; } .ui-ring-27 { --rl: 27; }
.ui-pct-28 { width: 28% !important; } .ui-ring-28 { --rl: 28; }
.ui-pct-29 { width: 29% !important; } .ui-ring-29 { --rl: 29; }
.ui-pct-30 { width: 30% !important; } .ui-ring-30 { --rl: 30; }
.ui-pct-31 { width: 31% !important; } .ui-ring-31 { --rl: 31; }
.ui-pct-32 { width: 32% !important; } .ui-ring-32 { --rl: 32; }
.ui-pct-33 { width: 33% !important; } .ui-ring-33 { --rl: 33; }
.ui-pct-34 { width: 34% !important; } .ui-ring-34 { --rl: 34; }
.ui-pct-35 { width: 35% !important; } .ui-ring-35 { --rl: 35; }
.ui-pct-36 { width: 36% !important; } .ui-ring-36 { --rl: 36; }
.ui-pct-37 { width: 37% !important; } .ui-ring-37 { --rl: 37; }
.ui-pct-38 { width: 38% !important; } .ui-ring-38 { --rl: 38; }
.ui-pct-39 { width: 39% !important; } .ui-ring-39 { --rl: 39; }
.ui-pct-40 { width: 40% !important; } .ui-ring-40 { --rl: 40; }
.ui-pct-41 { width: 41% !important; } .ui-ring-41 { --rl: 41; }
.ui-pct-42 { width: 42% !important; } .ui-ring-42 { --rl: 42; }
.ui-pct-43 { width: 43% !important; } .ui-ring-43 { --rl: 43; }
.ui-pct-44 { width: 44% !important; } .ui-ring-44 { --rl: 44; }
.ui-pct-45 { width: 45% !important; } .ui-ring-45 { --rl: 45; }
.ui-pct-46 { width: 46% !important; } .ui-ring-46 { --rl: 46; }
.ui-pct-47 { width: 47% !important; } .ui-ring-47 { --rl: 47; }
.ui-pct-48 { width: 48% !important; } .ui-ring-48 { --rl: 48; }
.ui-pct-49 { width: 49% !important; } .ui-ring-49 { --rl: 49; }
.ui-pct-50 { width: 50% !important; } .ui-ring-50 { --rl: 50; }
.ui-pct-51 { width: 51% !important; } .ui-ring-51 { --rl: 51; }
.ui-pct-52 { width: 52% !important; } .ui-ring-52 { --rl: 52; }
.ui-pct-53 { width: 53% !important; } .ui-ring-53 { --rl: 53; }
.ui-pct-54 { width: 54% !important; } .ui-ring-54 { --rl: 54; }
.ui-pct-55 { width: 55% !important; } .ui-ring-55 { --rl: 55; }
.ui-pct-56 { width: 56% !important; } .ui-ring-56 { --rl: 56; }
.ui-pct-57 { width: 57% !important; } .ui-ring-57 { --rl: 57; }
.ui-pct-58 { width: 58% !important; } .ui-ring-58 { --rl: 58; }
.ui-pct-59 { width: 59% !important; } .ui-ring-59 { --rl: 59; }
.ui-pct-60 { width: 60% !important; } .ui-ring-60 { --rl: 60; }
.ui-pct-61 { width: 61% !important; } .ui-ring-61 { --rl: 61; }
.ui-pct-62 { width: 62% !important; } .ui-ring-62 { --rl: 62; }
.ui-pct-63 { width: 63% !important; } .ui-ring-63 { --rl: 63; }
.ui-pct-64 { width: 64% !important; } .ui-ring-64 { --rl: 64; }
.ui-pct-65 { width: 65% !important; } .ui-ring-65 { --rl: 65; }
.ui-pct-66 { width: 66% !important; } .ui-ring-66 { --rl: 66; }
.ui-pct-67 { width: 67% !important; } .ui-ring-67 { --rl: 67; }
.ui-pct-68 { width: 68% !important; } .ui-ring-68 { --rl: 68; }
.ui-pct-69 { width: 69% !important; } .ui-ring-69 { --rl: 69; }
.ui-pct-70 { width: 70% !important; } .ui-ring-70 { --rl: 70; }
.ui-pct-71 { width: 71% !important; } .ui-ring-71 { --rl: 71; }
.ui-pct-72 { width: 72% !important; } .ui-ring-72 { --rl: 72; }
.ui-pct-73 { width: 73% !important; } .ui-ring-73 { --rl: 73; }
.ui-pct-74 { width: 74% !important; } .ui-ring-74 { --rl: 74; }
.ui-pct-75 { width: 75% !important; } .ui-ring-75 { --rl: 75; }
.ui-pct-76 { width: 76% !important; } .ui-ring-76 { --rl: 76; }
.ui-pct-77 { width: 77% !important; } .ui-ring-77 { --rl: 77; }
.ui-pct-78 { width: 78% !important; } .ui-ring-78 { --rl: 78; }
.ui-pct-79 { width: 79% !important; } .ui-ring-79 { --rl: 79; }
.ui-pct-80 { width: 80% !important; } .ui-ring-80 { --rl: 80; }
.ui-pct-81 { width: 81% !important; } .ui-ring-81 { --rl: 81; }
.ui-pct-82 { width: 82% !important; } .ui-ring-82 { --rl: 82; }
.ui-pct-83 { width: 83% !important; } .ui-ring-83 { --rl: 83; }
.ui-pct-84 { width: 84% !important; } .ui-ring-84 { --rl: 84; }
.ui-pct-85 { width: 85% !important; } .ui-ring-85 { --rl: 85; }
.ui-pct-86 { width: 86% !important; } .ui-ring-86 { --rl: 86; }
.ui-pct-87 { width: 87% !important; } .ui-ring-87 { --rl: 87; }
.ui-pct-88 { width: 88% !important; } .ui-ring-88 { --rl: 88; }
.ui-pct-89 { width: 89% !important; } .ui-ring-89 { --rl: 89; }
.ui-pct-90 { width: 90% !important; } .ui-ring-90 { --rl: 90; }
.ui-pct-91 { width: 91% !important; } .ui-ring-91 { --rl: 91; }
.ui-pct-92 { width: 92% !important; } .ui-ring-92 { --rl: 92; }
.ui-pct-93 { width: 93% !important; } .ui-ring-93 { --rl: 93; }
.ui-pct-94 { width: 94% !important; } .ui-ring-94 { --rl: 94; }
.ui-pct-95 { width: 95% !important; } .ui-ring-95 { --rl: 95; }
.ui-pct-96 { width: 96% !important; } .ui-ring-96 { --rl: 96; }
.ui-pct-97 { width: 97% !important; } .ui-ring-97 { --rl: 97; }
.ui-pct-98 { width: 98% !important; } .ui-ring-98 { --rl: 98; }
.ui-pct-99 { width: 99% !important; } .ui-ring-99 { --rl: 99; }
.ui-pct-100 { width: 100% !important; } .ui-ring-100 { --rl: 100; }
html.tc-top-40 { --tc-top: 40px; }
html.tc-top-48 { --tc-top: 48px; }
html.tc-top-56 { --tc-top: 56px; }
html.tc-top-64 { --tc-top: 64px; }
html.tc-top-72 { --tc-top: 72px; }
html.tc-top-80 { --tc-top: 80px; }
html.tc-top-88 { --tc-top: 88px; }
html.tc-top-96 { --tc-top: 96px; }
html.tc-top-104 { --tc-top: 104px; }
html.tc-top-112 { --tc-top: 112px; }
html.tc-top-120 { --tc-top: 120px; }
html.tc-top-128 { --tc-top: 128px; }
html.tc-top-136 { --tc-top: 136px; }
html.tc-top-144 { --tc-top: 144px; }
html.tc-top-152 { --tc-top: 152px; }
html.tc-top-160 { --tc-top: 160px; }
html.tc-top-168 { --tc-top: 168px; }
html.tc-top-176 { --tc-top: 176px; }
html.tc-top-184 { --tc-top: 184px; }
html.tc-top-192 { --tc-top: 192px; }
html.tc-top-200 { --tc-top: 200px; }
html.tc-top-208 { --tc-top: 208px; }
html.tc-top-216 { --tc-top: 216px; }
html.tc-top-224 { --tc-top: 224px; }
html.tc-top-232 { --tc-top: 232px; }
html.tc-top-240 { --tc-top: 240px; }
html.tc-top-248 { --tc-top: 248px; }
html.tc-top-256 { --tc-top: 256px; }
html.tc-top-264 { --tc-top: 264px; }
html.tc-top-272 { --tc-top: 272px; }
html.tc-top-280 { --tc-top: 280px; }
html.tc-top-288 { --tc-top: 288px; }
html.tc-top-296 { --tc-top: 296px; }
html.tc-top-304 { --tc-top: 304px; }
html.tc-top-312 { --tc-top: 312px; }
html.tc-top-320 { --tc-top: 320px; }
html.tc-top-328 { --tc-top: 328px; }