/* STAR TRADERS 64 — STELLAR/ORBIT map views (starmap.js) C64 palette inherited from style.css. */ /* ----- view switcher in the map panel header ----- */ .map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--c64-border); margin: 0 0 12px; } .map-head h2 { border-bottom: none; margin-bottom: 4px; } .view-switch { display: flex; gap: 4px; } .view-btn { margin-top: 0; padding: 2px 8px; font-size: .72em; letter-spacing: .12em; opacity: .55; } .view-btn.active { opacity: 1; background: var(--c64-cyan); color: var(--c64-bg-dark); } .view-btn:disabled { opacity: .3; } /* ----- canvas wrap ----- */ #starmap-wrap { position: relative; width: 100%; aspect-ratio: 620 / 515; border: 2px solid var(--c64-border); border-radius: 4px; overflow: hidden; background: #05070f; } #starmap-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #starmap-wrap canvas.clickable { cursor: pointer; } /* ----- hover tooltip (follows the cursor over planets) ----- */ #starmap-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--c64-bg-dark); border: 2px solid var(--c64-cyan); border-radius: 6px; color: var(--c64-light); font-size: .8em; line-height: 1.5; padding: 6px 10px; max-width: 240px; white-space: nowrap; box-shadow: 0 0 14px rgba(134, 214, 221, .35); } #starmap-tip b { color: var(--c64-yellow); letter-spacing: .08em; } #starmap-tip .tip-tag { font-weight: bold; } #starmap-tip .tip-tag.produces { color: var(--c64-green); } #starmap-tip .tip-tag.needs { color: var(--c64-red); } #starmap-tip .tip-fuel { color: var(--c64-cyan); } /* ========================================================================== STELLAR THEME — a teljes cockpit átszabva, amikor a térkép-nézet STELLAR vagy ORBIT (a starmap.js a -ra teszi a .stellar classt). Minden szabály body.stellar alatt él: a CLASSIC téma érintetlen. ========================================================================== */ body.stellar { --st-bg0: #04060e; --st-bg1: #0a0e1f; --st-panel: rgba(12, 16, 34, .78); --st-line: rgba(134, 214, 221, .20); --st-line-strong: rgba(134, 214, 221, .45); --st-text: #c3cde6; --st-dim: #6f7ba0; --st-cyan: #86d6dd; --st-gold: #ecd97e; --st-green: #8fd6a0; --st-red: #ef8f8b; background: radial-gradient(120% 90% at 50% 0%, var(--st-bg1) 0%, var(--st-bg0) 70%); color: var(--st-text); font-family: "Share Tech Mono", "Courier New", monospace; } /* ----- keret + cím ----- */ body.stellar .screen { background: rgba(6, 9, 20, .92); border: 1px solid var(--st-line); border-radius: 14px; box-shadow: 0 0 60px rgba(134, 214, 221, .07), 0 0 140px rgba(60, 40, 140, .12); } body.stellar h1 { font-family: Orbitron, "Courier New", monospace; color: #eaf4ff; text-shadow: 0 0 18px rgba(134, 214, 221, .55), 0 0 46px rgba(134, 214, 221, .25); } body.stellar .subtitle { color: var(--st-cyan); opacity: .75; } body.stellar h2 { font-family: Orbitron, "Courier New", monospace; font-size: .82em; letter-spacing: .22em; color: var(--st-cyan); border-bottom: 1px solid var(--st-line); text-shadow: 0 0 10px rgba(134, 214, 221, .3); } body.stellar .dim { color: var(--st-dim); } body.stellar code { background: rgba(134, 214, 221, .08); color: var(--st-green); border: 1px solid var(--st-line); } /* ----- panelek (sötét üveg) ----- */ body.stellar .panel { background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); } /* ----- státuszsor ----- */ body.stellar .status-line { background: var(--st-panel); border: 1px solid var(--st-line); border-radius: 8px; color: var(--st-text); } body.stellar .status-line.ok { border-color: rgba(143, 214, 160, .5); color: var(--st-green); box-shadow: 0 0 14px rgba(143, 214, 160, .12); } body.stellar .status-line.err { border-color: rgba(239, 143, 139, .5); color: var(--st-red); box-shadow: 0 0 14px rgba(239, 143, 139, .12); } /* ----- űrlapok ----- */ body.stellar input[type="text"], body.stellar input[type="password"], body.stellar input[type="number"], body.stellar textarea, body.stellar select.picker { background: rgba(4, 7, 16, .85); color: #dce6f7; border: 1px solid var(--st-line); border-radius: 6px; } body.stellar input:focus, body.stellar textarea:focus, body.stellar select:focus { outline: none; border-color: var(--st-line-strong); box-shadow: 0 0 10px rgba(134, 214, 221, .18); } body.stellar textarea { color: var(--st-green); } body.stellar select.picker { color: var(--st-gold); } /* ----- gombok ----- */ body.stellar button { font-family: Orbitron, "Courier New", monospace; font-size: .72em; letter-spacing: .14em; background: rgba(134, 214, 221, .06); color: var(--st-cyan); border: 1px solid var(--st-line-strong); border-radius: 6px; padding: 7px 14px; transition: box-shadow .15s ease, background .15s ease; } body.stellar button:hover:not(:disabled) { background: rgba(134, 214, 221, .16); color: #eafcff; box-shadow: 0 0 16px rgba(134, 214, 221, .35); } body.stellar button:disabled { opacity: .35; } body.stellar button.primary { color: var(--st-gold); border-color: rgba(236, 217, 126, .5); background: rgba(236, 217, 126, .07); } body.stellar button.primary:hover:not(:disabled) { background: rgba(236, 217, 126, .18); color: #fff7d6; box-shadow: 0 0 16px rgba(236, 217, 126, .35); } body.stellar button.danger { color: var(--st-red); border-color: rgba(239, 143, 139, .5); background: rgba(239, 143, 139, .06); } body.stellar button.danger:hover:not(:disabled) { background: rgba(239, 143, 139, .16); color: #ffe2e0; box-shadow: 0 0 16px rgba(239, 143, 139, .3); } body.stellar button.attention { border-color: var(--st-gold); color: var(--st-gold); } @keyframes attention-pulse-st { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 217, 126, 0); } 50% { box-shadow: 0 0 14px 2px rgba(236, 217, 126, .4); } } body.stellar button.attention { animation: attention-pulse-st 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body.stellar button.attention { animation: none; } } /* ----- token-képernyő ----- */ body.stellar .token-panel { border-color: rgba(236, 217, 126, .45); } body.stellar .warn-text { color: var(--st-red); } body.stellar .token-box { background: rgba(4, 7, 16, .9); color: var(--st-gold); border: 2px dashed rgba(236, 217, 126, .55); border-radius: 8px; box-shadow: 0 0 20px rgba(236, 217, 126, .12); } /* ----- státuszbár ----- */ body.stellar .statusbar { background: linear-gradient(90deg, rgba(143, 214, 160, .05), rgba(134, 214, 221, .06)); border: 1px solid rgba(143, 214, 160, .35); border-radius: 8px; box-shadow: 0 0 18px rgba(143, 214, 160, .08); } body.stellar .statusbar b { color: #eaf4ff; } /* ----- bannerek ----- */ body.stellar .banner { border-radius: 8px; } body.stellar .banner-winner { border: 1px solid rgba(236, 217, 126, .6); color: var(--st-gold); background: rgba(236, 217, 126, .07); box-shadow: 0 0 24px rgba(236, 217, 126, .2); } body.stellar .banner-goal { border: 1px solid rgba(143, 214, 160, .55); color: var(--st-green); background: rgba(143, 214, 160, .06); box-shadow: 0 0 20px rgba(143, 214, 160, .15); } body.stellar .banner-ended { border: 1px solid var(--st-line); color: var(--st-text); } body.stellar .banner-maint { border: 1px solid rgba(239, 143, 139, .6); color: var(--st-red); background: rgba(239, 143, 139, .06); } body.stellar .endgame-actions { border: 1px solid rgba(236, 217, 126, .45); border-radius: 8px; } /* ----- táblák ----- */ body.stellar td, body.stellar th { border: 1px solid rgba(134, 214, 221, .12); } body.stellar th { color: var(--st-cyan); font-family: Orbitron, "Courier New", monospace; font-size: .72em; letter-spacing: .12em; background: rgba(134, 214, 221, .05); } body.stellar tr:hover td { background: rgba(134, 214, 221, .04); } body.stellar .tag.produces { color: var(--st-green); } body.stellar .tag.needs { color: var(--st-red); } /* ----- játékosok, események ----- */ body.stellar .players-table .auto-mark { color: var(--st-cyan); } body.stellar .players-table .you-mark { color: var(--st-gold); } body.stellar .events-list li { border-bottom: 1px dotted rgba(134, 214, 221, .12); } body.stellar .events-list .ev-turn { color: var(--st-cyan); } body.stellar .events-list::-webkit-scrollbar { width: 8px; } body.stellar .events-list::-webkit-scrollbar-thumb { background: var(--st-line); border-radius: 4px; } /* ----- térkép-wrap a témában ----- */ body.stellar #starmap-wrap { border: 1px solid var(--st-line); border-radius: 10px; box-shadow: 0 0 30px rgba(134, 214, 221, .08); } body.stellar #map { background: rgba(4, 7, 16, .6); border: 1px solid var(--st-line); border-radius: 10px; } /* ----- nézetváltó ----- */ body.stellar .map-head { border-bottom: 1px solid var(--st-line); } body.stellar .view-btn { font-size: .62em; } body.stellar .view-btn.active { background: rgba(134, 214, 221, .2); color: #eafcff; box-shadow: 0 0 12px rgba(134, 214, 221, .35); } /* ----- lábléc ----- */ body.stellar footer { color: var(--st-dim); } /* ========================================================================== ORBIT FULLSCREEN HUD — ORBIT nézetben a 3D térkép teljes viewport-háttér, a vezérlők lebegő HUD-panelek körülötte. Nincs oldal-görgetés: ami nem fér el, az a panelen BELÜL görög. Csak asztali (>=1100px) felbontáson; alatta az ORBIT a normál STELLAR-layoutot használja. ========================================================================== */ @media (min-width: 1100px) { body.orbit { overflow: hidden; padding: 0; } body.orbit .screen { max-width: none; background: none; border: none; box-shadow: none; padding: 0; } /* chrome, ami a játéktérben zaj: cím, alcím, galaxis-áttekintő, lábléc */ body.orbit h1, body.orbit .subtitle, body.orbit footer, body.orbit #galaxy { display: none; } /* ----- 3D térkép: teljes viewport háttér ----- */ body.orbit .map-panel { position: fixed; inset: 0; z-index: 0; margin: 0; padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none; } body.orbit #starmap-wrap { position: absolute; inset: 0; aspect-ratio: auto; border: none; border-radius: 0; box-shadow: none; } body.orbit .map-legend { display: none; } /* ----- nézetváltó: lebegő kapszula jobb felül ----- */ body.orbit .map-head { position: fixed; top: 12px; right: 12px; z-index: 30; border: none; margin: 0; } body.orbit .map-panel .map-head h2 { display: none; } body.orbit .map-head .view-switch { background: rgba(6, 10, 22, .72); border: 1px solid var(--st-line); border-radius: 8px; padding: 4px; backdrop-filter: blur(6px); } /* ----- státuszbár: vékony HUD-sáv bal felül ----- */ body.orbit .statusbar { position: fixed; top: 12px; left: 12px; z-index: 20; margin: 0; max-width: calc(100vw - 860px); flex-wrap: wrap; gap: 6px 14px; padding: 6px 12px; font-size: .85em; background: rgba(6, 10, 22, .72); } body.orbit #rules-hint { position: fixed; top: 52px; left: 12px; z-index: 20; margin: 0; font-size: .72em; background: rgba(6, 10, 22, .6); border-radius: 6px; padding: 2px 8px; } /* ----- visszajelzés + bannerek: felül középen ----- */ body.orbit .status-line { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 25; margin: 0; max-width: 440px; min-height: 0; padding: 6px 12px; font-size: .8em; background: rgba(6, 10, 22, .78); text-align: center; } body.orbit .banner, body.orbit .endgame-actions { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 26; margin: 0 0 6px; max-width: 520px; background: rgba(6, 10, 22, .85); font-size: .9em; padding: 8px 14px; } body.orbit .banner ~ .banner { top: 96px; } body.orbit .endgame-actions { top: 96px; } /* ----- piac + akciók: jobb oldali HUD-oszlop ----- */ body.orbit .game-grid { display: block; margin: 0; } body.orbit .market-panel { position: fixed; top: 64px; right: 12px; bottom: 64px; width: 440px; z-index: 20; margin: 0; padding: 10px 12px; overflow-y: auto; overflow-x: hidden; } /* a piactábla férjen el a HUD-oszlopban — kompakt cellák/gombok */ body.orbit .market-table { font-size: .85em; } body.orbit .market-table td, body.orbit .market-table th { padding: 4px 5px; } body.orbit .market-table input { width: 3.4em; } body.orbit .market-table td button { padding: 3px 5px; margin: 1px 0; } /* ----- játékosok + események: bal oldali HUD-oszlop ----- */ body.orbit .game-grid + .game-grid { position: fixed; top: 64px; left: 12px; bottom: 120px; width: 300px; z-index: 20; display: flex; flex-direction: column; gap: 10px; overflow: visible; } body.orbit .game-grid + .game-grid .panel { margin: 0; flex: 0 0 auto; } body.orbit .game-grid + .game-grid .panel:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.orbit .game-grid + .game-grid .events-list { flex: 1 1 auto; max-height: none; overflow-y: auto; } /* bal oszlop táblái (PLAYERS) szintén kompaktak, különben túllóg a 300px-en */ body.orbit .game-grid + .game-grid table { font-size: .85em; } body.orbit .game-grid + .game-grid td, body.orbit .game-grid + .game-grid th { padding: 4px 5px; } /* ----- stratégia: dokkoló balra lent, alapból összecsukva ----- */ body.orbit #strategy-panel { position: fixed; left: 12px; bottom: 12px; width: 420px; max-height: 46vh; overflow-y: auto; z-index: 21; margin: 0; } /* ----- logout-sor: jobbra lent ----- */ body.orbit .footer-row { position: fixed; right: 12px; bottom: 12px; z-index: 20; margin: 0; background: rgba(6, 10, 22, .6); border-radius: 8px; padding: 4px 10px; } /* ----- összecsukható panelek (a h2-re kattintva) ----- */ body.orbit .panel h2 { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: baseline; } body.orbit .panel h2::after { content: "▾"; color: var(--st-dim); font-size: .9em; } body.orbit .panel.collapsed h2::after { content: "▸"; } body.orbit .panel.collapsed { padding-bottom: 8px; } body.orbit .panel.collapsed > *:not(h2) { display: none; } body.orbit .panel.collapsed h2 { border-bottom: none; margin-bottom: 0; } /* a strategy-dock alapból csukva van (HTML-ben .collapsed), de az összecsukott panel ne takarja a logout-sort */ body.orbit #strategy-panel.collapsed { width: auto; max-width: 300px; } /* ----- HUD-panelek közös finomítása ----- */ body.orbit .panel { background: rgba(8, 12, 26, .78); } body.orbit .market-panel::-webkit-scrollbar, body.orbit #strategy-panel::-webkit-scrollbar { width: 8px; } body.orbit .market-panel::-webkit-scrollbar-thumb, body.orbit #strategy-panel::-webkit-scrollbar-thumb { background: var(--st-line); border-radius: 4px; } body.orbit .market-table td button { font-size: .68em; } body.orbit .action-row { gap: 8px; } }