/* Retro scientific instruments. All overrides belong to a station session. */ body.station-open { --science-line:#637a7e; --science-ink:#e0e8e5; --science-accent:#9ce0dc; } body.station-open #criticalDamageCanvas { visibility:hidden; } .station-open #hud,.station-open #backButton,.station-open #gsOpenBtn,.station-open #combatModes,.station-open #actionDock, .station-open #spOpenInventoryBtn,.station-open #spOpenMissionsBtn,.station-open #mmOpenMenuBtn,.station-open .toggle-ui-btn { visibility:hidden; } .station-open #dockingBackdrop { z-index:89; background-color:#0b1419; background-size:cover; background-position:center; backdrop-filter:none; } .station-open #inventoryBackdrop { z-index:90; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console,.station-open #sidePanel.port-hangar { position:fixed; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:calc(100vw - 48px); max-width:1600px; height:calc(100dvh - 48px); max-height:calc(100dvh - 48px); z-index:92; display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; color:var(--science-ink); border:1px solid var(--science-line); border-radius:4px; background:#182327; box-shadow:0 20px 80px #000a,inset 0 0 0 4px #0c161a; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console[data-science-screen=hub] { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .panel-header,.station-open #sidePanel.port-hangar>.panel-header { flex:none; min-height:62px; padding:12px 18px; box-sizing:border-box; background:linear-gradient(#d3d8d2,#a8b5b2); border-bottom:3px solid #718b8d; color:#18272b; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-heading > span:last-child { font:600 21px/1.3 sans-serif; letter-spacing:.08em; color:#15282d; overflow-wrap:anywhere; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-kicker { color:#354e52; font:10px/1.5 monospace; letter-spacing:.14em; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .panel-header button { flex:none; } .station-open .science-console .panel-header button { min-width:44px; } .science-readout { flex:none; padding:10px 18px; background:#111e23; border-bottom:1px solid var(--science-line); color:#afdbd7; font:12px/1.7 monospace; word-spacing:3px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.station-scene { display:none; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console[data-science-screen=hub]>.station-scene { display:block; grid-column:1; grid-row:3; width:100%; height:100%; min-height:0; margin:0; object-fit:cover; filter:none; border:0; aspect-ratio:auto; } .science-summary { display:none; } .station-open [data-science-screen=hub]>.science-summary { display:block; grid-column:1; grid-row:3; align-self:end; z-index:1; width:min(410px,calc(100% - 32px)); margin:16px; padding:18px; box-sizing:border-box; background:#101c22e8; border:1px solid #839b98; border-left:3px solid #9ce0dc; } .science-eyebrow { font:11px/1.5 monospace; letter-spacing:.12em; color:#9ce0dc; } .science-summary p { margin:10px 0 0; color:#e0e8e5; font:14px/1.6 sans-serif; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.station-resource-bar,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.station-tabs,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.panel-footer { display:none; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console[data-science-screen=hub]>.panel-body,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console[data-science-screen=hub]>.science-service-heading { display:none; } .science-service-heading { flex:none; padding:14px 20px; border-bottom:1px solid #637a7e; color:#bfe6e2; font:600 16px/1.3 monospace; letter-spacing:.12em; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.panel-body { flex:1; min-height:0; max-height:none; width:auto; padding:24px; overflow:auto; overscroll-behavior:contain; background:linear-gradient(#122027dd,#122027ee),var(--science-scene) center/cover; } .science-navigation { display:flex; flex:none; gap:10px; padding:14px; border-top:1px solid #637a7e; background:#1c2a2e; } .science-navigation button { flex:1; min-width:0; text-align:left; padding:14px; } .science-navigation button strong { display:block; font:600 14px/1.3 monospace; letter-spacing:.06em; } .science-navigation button small { display:block; margin-top:7px; font:12px/1.4 sans-serif; color:#b8cdcc; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console button,.station-open #sidePanel.port-hangar button { min-height:44px; border:1px solid #6d8b8e; border-radius:3px; background:linear-gradient(#35474c,#23353a); color:#e2eeeb; box-shadow:inset 0 1px #ffffff18; white-space:normal; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console button:hover:not(:disabled),.station-open #sidePanel.port-hangar button:hover:not(:disabled) { border-color:#acece6; background:#39565b; transform:none; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console button:focus-visible,.station-open #sidePanel.port-hangar :is(button,input,[tabindex]):focus-visible { outline:2px solid #b2fff0; outline-offset:2px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console button:disabled { opacity:.6; cursor:not-allowed; } .science-console:not([data-science-screen=hub]) .science-navigation [data-station-service], .science-console:not([data-science-screen=hub]) .science-navigation [data-station-leave], .science-console[data-science-screen=hub] .science-navigation [data-station-back] { display:none; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console [data-station-leave] { flex:0 1 135px; background:linear-gradient(#65453a,#3c302b); border-color:#c19c77; color:#f2ddc4; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .section-title { color:#a6deda; border-color:#526d73; font:12px/1.5 monospace; letter-spacing:.1em; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-table-wrap,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-weapon-card, .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .row,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .trader-row,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .mission-item { background:#172b32ed; border:1px solid #526d73; border-radius:3px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-pane { animation:none; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-table-wrap { margin-bottom:16px; padding:18px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-table td:first-child { color:#a4bcbf; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-table td:last-child { color:#e0e8e5; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .build-desc { color:#b8cdcf; line-height:1.6; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-weapons-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-weapon-card { padding:18px; min-width:0; min-height:180px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console :is(.swc-desc,.swc-stats,.trader-row,.mission-item) { overflow-wrap:anywhere; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console :is(.trader-row-top,.mission-meta) { flex-wrap:wrap; gap:8px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console #stPaneRefinery,.station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console #stPaneBuild { max-width:780px; margin:0 auto; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .trade-qty-row { display:flex; flex-wrap:wrap; gap:12px; padding:14px; background:#152a30; border:1px solid #637a7e; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console input[type=range] { min-width:80px; flex:1; accent-color:#9ce0dc; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console #exchangeRelicBtn { width:100%; margin-top:18px; } .station-open #sidePanel.port-hangar .port-hangar-title { color:#203c43; } .station-open #sidePanel.port-hangar .port-hangar-scene { --hangar-meter:#9fe0d4; background:linear-gradient(#13222822,#13222800 50%,#132228ee),url('assets/scenes/station-science-hangar.webp') center/cover; border-color:#718f92; color:#bce7e0; } .station-open #sidePanel.port-hangar .hud-module { border-color:#587980; background:#152b33; } .station-open #sidePanel.port-hangar .port-hangar-footer { color:#b6cecd; border-color:#587980; } .station-open #sidePanel.port-hangar .port-service-status { color:#a3ded1; } @media(max-width:1100px) { .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-weapons-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .science-navigation button { padding:10px; } .science-navigation button strong { font-size:12px; } } @media(max-width:700px) { .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console,.station-open #sidePanel.port-hangar { width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .panel-header { min-height:54px; padding:8px 12px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-heading > span:last-child { font-size:16px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-kicker { font-size:9px; } .science-readout { padding:8px 12px; font-size:11px; word-spacing:0; } .science-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:8px; } .science-navigation [data-station-leave],.science-navigation [data-station-back] { grid-column:1/-1; } .science-navigation button small { font-size:11px; margin-top:4px; } .station-open [data-science-screen=hub]>.science-summary { margin:10px; padding:12px; width:calc(100% - 20px); } .science-summary p { font-size:12px; line-height:1.4; } .science-service-heading { padding:10px 12px; font-size:13px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console>.panel-body { padding:12px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-weapon-card { padding:10px; } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .station-table-wrap { padding:12px; } } @media(max-height:650px) { .science-summary p { display:none; } .science-navigation button small { display:none; } } @media(max-height:500px) { .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console,.station-open #sidePanel.port-hangar { height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); } .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console .panel-header { min-height:48px; padding-block:5px; } .science-readout { padding-block:4px; } .science-navigation { padding:8px; gap:8px; } .station-open [data-science-screen=hub]>.science-summary { margin:10px; padding:8px; } } @media(prefers-reduced-motion:reduce) { .station-open :is(#stationPanel,#explorerPanel,#tradeStationPanel,#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel,#coinBasePanel).science-console * { animation:none!important; transition:none!important; } } /* Corporate bank and military patrol variants share the scenic station shell. */ .station-open[data-station-theme=bank] { --science-line:#8e8064; --science-accent:#e4bd76; } .station-open[data-station-theme=ranger] { --science-line:#7c8168; --science-accent:#d5bd79; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console { background:#232724; } .station-open #bankPanel.science-console .panel-header { background:linear-gradient(#ded6bf,#bfb298); border-color:#998565; } .station-open #rangerBasePanel.science-console .panel-header,.station-open[data-station-theme=ranger] #sidePanel.port-hangar>.panel-header { background:linear-gradient(#bbc0a6,#868d78); border-color:#a7a181; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console .science-readout { color:#e4c58e; background:#1d2423; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console .science-summary { border-color:#a89a77; background:#1b211ee8; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console .science-eyebrow, .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console .science-service-heading { color:#e5c38b; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console .science-navigation { background:#292e29; border-color:#8d866f; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console button { background:linear-gradient(#485044,#30392f); border-color:#8d937c; color:#f0e6ce; } .station-open #bankPanel.science-console button { background:linear-gradient(#514b3e,#39382f); border-color:#9b8d6b; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console button:hover:not(:disabled) { background:#5a5a46; border-color:#edce92; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console button:focus-visible, .station-open #bankPanel.science-console input:focus-visible { outline:2px solid #f6d58e; outline-offset:2px; } .station-open :is(#bankPanel,#rangerBasePanel,#pirateBasePanel,#factoryPanel).science-console>.panel-body { background:linear-gradient(#1c231cdd,#191f1ded),var(--science-scene) center/cover; } .station-open #bankPanel.science-console>.bank-tabs,.station-open #bankPanel #bankPaneAccount, .station-open #rangerBasePanel .ranger-legacy-service { display:none; } .station-open #bankPanel #bankPaneOverview { width:min(100%,1000px); margin:auto; } .station-open #bankPanel .bank-table-wrap { background:#202821e8; border:1px solid #8e8064; border-radius:3px; padding:16px; } .station-open #bankPanel .bank-table { width:100%; font-size:14px; } .station-open #bankPanel .bank-table td { padding:10px 8px; color:#ddd7c5; overflow-wrap:anywhere; } .station-open #bankPanel .bank-table td:last-child { color:#efd299; } .station-open #bankPanel .bank-table-note { white-space:normal; } .station-open #bankPanel .bank-sparkline { display:block; width:100%; height:100px; margin:16px 0; background:#19221d; border:1px solid #8e8064; box-sizing:border-box; } .station-open #bankPanel .bank-visitor-row,.station-open #bankPanel .bank-log-row { padding:12px; border-bottom:1px solid #5e6552; color:#d9dfcf; overflow-wrap:anywhere; } .station-open #bankPanel .bank-visitor-row { display:flex; flex-wrap:wrap; gap:8px; } .station-open #bankPanel .bank-visitors-list,.station-open #bankPanel .bank-log-list { max-height:240px; overflow:auto; } .bank-console-form { width:min(100%,760px); margin:0 auto; display:grid; gap:18px; padding:24px; background:#1c241eed; border:1px solid #8e8064; border-radius:3px; box-sizing:border-box; } .bank-account-readout { font:13px/1.8 monospace; color:#edd29b; padding:12px; border:1px solid #7c765e; background:#151d18; } .bank-action-select { display:flex; gap:10px; } .bank-action-select button { flex:1; min-width:0; padding:10px; } .station-open #bankPanel.science-console [data-bank-action][aria-pressed=true] { color:#ffe3a2; border:2px solid #e1b76d; background:#534b32; } .bank-rates { color:#cdd3c1; font:14px/1.7 sans-serif; } .bank-console-form label { font:12px/1.4 monospace; color:#dfc389; letter-spacing:.12em; } .bank-amount-entry { display:flex; gap:10px; min-width:0; } .station-open #bankPanel #bankAmount { flex:1; min-width:0; width:100%; height:48px; padding:10px 14px; box-sizing:border-box; border:1px solid #a09270; background:#111b17; color:#f2dfba; font:20px/1.2 monospace; border-radius:3px; } .bank-amount-entry button { min-width:65px; } .station-open #bankPanel #bankAmountRange { width:100%; min-width:0; min-height:44px; accent-color:#d7b26d; } .bank-preview { padding:16px; min-height:60px; border:1px solid #789077; background:#16231a; color:#c6e1b8; font:14px/1.8 monospace; white-space:pre-line; overflow-wrap:anywhere; } .bank-preview.bank-error { border-color:#ae9769; color:#eed19d; background:#29271d; } .station-open #bankPanel #bankSubmit { min-height:48px; padding:12px; font:600 14px monospace; } .station-open #rangerBasePanel .ranger-bounty-board { max-width:780px; margin:auto; padding:24px; background:#1c281fee; border:1px solid #899373; border-radius:3px; } .station-open #rangerBasePanel .ranger-bounty-board .section-title { color:#dbc28c; } .station-open #rangerBasePanel #rbBountyDesc { font:16px/1.8 sans-serif; color:#e0e4d1; } .station-open #rangerBasePanel #rbBountyAcceptBtn { width:100%; margin-top:18px; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar .port-hangar-scene { --hangar-meter:#e0c894; background:linear-gradient(#111b1744,#111b1700 50%,#111b17ee),url('assets/scenes/ranger-hangar.webp') center/cover; color:#edce90; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar .hud-module { background:#202d24; border-color:#7c896a; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar button { background:linear-gradient(#485044,#30392f); border-color:#8d937c; color:#eee6cf; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar .port-ship-status { padding:10px; background:#152119dc; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar #hangarBackToPortButton { background:#354031; border-color:#8d937c; color:#eee6cf; } .station-open[data-station-theme=ranger] #sidePanel.port-hangar :is(.section-title,.inventory-summary,.port-service-status) { color:#e0c894; } @media(max-width:1100px) { .station-open[data-station-theme=ranger] #sidePanel.port-hangar .port-hangar-scene { min-height:190px; } } @media(max-width:700px) { .bank-console-form { padding:14px; gap:12px; } .bank-account-readout { padding:8px; font-size:12px; } .bank-rates { font-size:13px; } .station-open #rangerBasePanel .ranger-bounty-board { padding:14px; } .station-open #bankPanel .bank-table-wrap { padding:8px; } .station-open #bankPanel .bank-table { table-layout:fixed; font-size:12px; } } /* Pirate industrial hideout: scoped to the active base visit. */ .station-open[data-station-theme=pirate] { --science-line:#90634f; --science-accent:#e9b977; --science-ink:#e5d5bd; } .station-open #pirateBasePanel.science-console .panel-header, .station-open[data-station-theme=pirate] #sidePanel.port-hangar>.panel-header { background:linear-gradient(#62574b,#393631); border-color:#a26346; color:#ead6ae; } .station-open #pirateBasePanel.science-console .station-heading>span:last-child, .station-open[data-station-theme=pirate] #sidePanel.port-hangar .port-hangar-title { color:#f0d4a1; } .station-open #pirateBasePanel.science-console .station-kicker { color:#c99b7c; } .station-open #pirateBasePanel.science-console>.pirate-base-tabs { display:none; } .station-open #pirateBasePanel.science-console>.panel-body { background:linear-gradient(#1d1814cc,#171717e8),var(--science-scene) center/cover; } .station-open #pirateBasePanel.science-console :is(.science-navigation,.science-readout) { background:#27231f; border-color:#946a50; color:#eac28a; } .station-open #pirateBasePanel.science-console .science-summary { background:#231c17e8; border-color:#aa7b50; } .station-open #pirateBasePanel.science-console :is(.station-weapon-card,.row), .station-open[data-station-theme=pirate] #sidePanel.port-hangar .hud-module { background:#282420ee; border-color:#85654e; } .station-open #pirateBasePanel.science-console :is(.section-title,.swc-name,.science-service-heading), .station-open[data-station-theme=pirate] #sidePanel.port-hangar :is(.section-title,.inventory-summary,.port-service-status) { color:#e9bf82; } .station-open #pirateBasePanel.science-console :is(.swc-status,.swc-desc,.swc-stats,.build-desc,.pirate-market-note) { color:#cdbcaa; } .station-open #pirateBasePanel.science-console button, .station-open[data-station-theme=pirate] #sidePanel.port-hangar button, .station-open[data-station-theme=pirate] #sidePanel.port-hangar #hangarBackToPortButton { background:linear-gradient(#554338,#322923); border-color:#a87b54; color:#efd6af; } .station-open #pirateBasePanel.science-console button:hover:not(:disabled), .station-open[data-station-theme=pirate] #sidePanel.port-hangar button:hover:not(:disabled) { background:#624b37; border-color:#e4b879; } .station-open #pirateBasePanel.science-console button:focus-visible, .station-open[data-station-theme=pirate] #sidePanel.port-hangar :is(button,input,[tabindex]):focus-visible { outline:2px solid #f4c680; outline-offset:2px; } .station-open #pirateBasePanel.science-console [data-station-leave] { background:#613c31; border-color:#b87855; } .station-open #pirateBasePanel #pbPaneCrew { max-width:780px; margin:auto; padding:24px; border:1px solid #967456; background:#241f1be8; box-sizing:border-box; } .station-open #pirateBasePanel #pbSpawnBtn { width:100%; margin-block:18px; white-space:normal; } .station-open #pirateBasePanel .pirate-market-note { padding:14px; border:1px solid #967456; background:#241f1b; line-height:1.6; } .station-open[data-station-theme=pirate] #sidePanel.port-hangar .port-hangar-scene { --hangar-meter:#e9bf82; background:linear-gradient(#1e171022,#1e171000 50%,#1e1710ee),url('assets/scenes/pirate-hangar.webp') center/cover; border-color:#85654e; color:#e9bf82; } .station-open[data-station-theme=pirate] #sidePanel.port-hangar .port-ship-status { background:#211a14dd; padding:10px; } @media(max-width:1100px) { .station-open[data-station-theme=pirate] #sidePanel.port-hangar .port-hangar-scene { min-height:190px; } } @media(max-width:700px) { .station-open #pirateBasePanel #pbPaneCrew { padding:14px; } } /* Refinery: прогрес обробки (fill через clip-path — без reflow і без спотворення смуг) */ .station-open #stationPanel .refine-progress { position:relative; height:22px; margin:12px 0; overflow:hidden; background:#0b161a; border:1px solid var(--science-line); border-radius:3px; } .station-open #stationPanel .refine-progress.hidden { display:none; } .station-open #stationPanel .refine-progress-fill { position:absolute; inset:0; clip-path:inset(0 100% 0 0); background:linear-gradient(90deg,#3d7f7c,var(--science-accent)); opacity:.75; transition:clip-path .1s linear; } .station-open #stationPanel .refine-progress-label { position:relative; display:block; text-align:center; font:12px/22px monospace; color:var(--science-ink); text-shadow:0 1px 2px #000; } /* Refinery: анімація обробки — смуги на заливці, пульс шматків, потік униз, спалах руди */ .station-open #stationPanel .refine-progress-fill::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,#ffffff2e 0 8px,transparent 8px 16px); background-size:22.63px 22px; animation:refine-stripes .6s linear infinite; } @keyframes refine-stripes { to { background-position:22.63px 0; } } .station-open #stationPanel .refine-cubes { display:flex; align-items:center; justify-content:center; gap:18px; margin:14px 0; } .station-open #stationPanel .refine-cube { position:relative; width:104px; height:104px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; background:#05070f; border:1px solid #3a5a9a; border-radius:6px; box-shadow:inset 0 0 14px #6f9dff22; } .station-open #stationPanel .refine-cube-out { border-color:var(--science-accent); } .station-open #stationPanel .refine-cube-slot { --item-icon-size:64px; display:flex; } .station-open #stationPanel .refine-cube-count { position:absolute; right:6px; bottom:4px; font:bold 14px/1 monospace; color:#e4ecff; text-shadow:0 1px 2px #000; } .station-open #stationPanel .refine-cube-name { position:absolute; left:6px; top:4px; font:10px/1 monospace; color:#b9c8ef; text-transform:uppercase; } .station-open #stationPanel .refine-arrow { font-size:28px; color:#6f9dff; padding:2px 6px; } @media(max-width:520px) { .station-open #stationPanel .refine-cubes { gap:8px; } .station-open #stationPanel .refine-cube { width:84px; height:84px; } .station-open #stationPanel .refine-cube-slot { --item-icon-size:48px; } } .station-open #stPaneRefinery.refining .refine-cube-in .refine-cube-slot, .station-open #stPaneRefinery.refining #stationChunks { animation:refine-pulse 1s ease-in-out infinite; } @keyframes refine-pulse { 50% { opacity:.45; } } .station-open #stPaneRefinery.refining .refine-arrow { background:linear-gradient(90deg,transparent 0 35%,#9ce0dc66 50%,transparent 65%) 0 0/200% 100%; animation:refine-flow 1s linear infinite; } @keyframes refine-flow { from { background-position:100% 0; } to { background-position:-100% 0; } } .station-open #stationOre.refine-flash { animation:refine-flash .6s ease-out; } @keyframes refine-flash { 0% { color:#fff; text-shadow:0 0 8px var(--science-accent); } 100% { color:inherit; text-shadow:none; } } /* Сцена ще вантажиться (SceneLoading.js): панель уже працює, картинка проявиться сама. Індикатор — лише на хабі, по центру порожньої області сцени; на екранах сервісів поверх фону лежить контент, тож там досить градієнта. */ .station-open .science-console>.scene-uplink { display:none; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:5; padding:4px 10px; background:#111e23e6; border:1px solid var(--science-line); color:var(--science-accent); font:11px/1.5 monospace; letter-spacing:.12em; pointer-events:none; } .station-open .science-console.scene-loading[data-science-screen=hub]>.scene-uplink { display:block; animation:scene-uplink-pulse 1.2s ease-in-out infinite alternate; } .station-open .science-console>.station-scene { transition:opacity .35s ease; } .station-open .science-console.scene-loading>.station-scene { opacity:0; } @keyframes scene-uplink-pulse { from { opacity:.45; } to { opacity:1; } } /* Trade Station: комісія Outpost і Trade Intel (сервіси TRAFFIC / TRADE INTEL) */ #tradeStationPanel .trade-income { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 12px; padding:10px 12px; background:#172b32ed; border:1px solid #526d73; border-left:3px solid #9ce0dc; border-radius:3px; } #tradeStationPanel .trade-income-info { display:flex; flex-direction:column; gap:2px; min-width:0; } #tradeStationPanel .trade-income-info .label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8fb3b0; } #tradeStationPanel #tradeStationIncomeInfo { color:#e4ecff; font-weight:600; } #tradeStationPanel .trade-intel { display:flex; flex-direction:column; gap:10px; } #tradeStationPanel .trade-intel-routes { display:flex; flex-direction:column; gap:6px; } #tradeStationPanel .trade-intel-route { display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:#172b32ed; border:1px solid #526d73; border-radius:3px; overflow-wrap:anywhere; } #tradeStationPanel .trade-intel-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; } #tradeStationPanel .trade-intel-good { color:#e4ecff; font-weight:700; letter-spacing:.08em; } #tradeStationPanel :is(#tradeStationCollectBtn,#tradeIntelBuyBtn) { min-height:40px; padding:8px 16px; } #tradeStationPanel #tradeIntelBuyBtn { align-self:flex-start; } #tradeStationPanel .mission-item .mission-accept-btn { margin-top:8px; min-height:36px; } /* Colony Registry (ColonyRegistryUI.js): смуга колоній, SVG-дерево хартій і дозволів, деталі вузла. Латунь — підписане, бірюза — доступне, графіт — закрите. */ #tradeStationPanel .colony-registry { --cr-brass:#d9b46a; --cr-brass-hi:#ffe2a0; --cr-teal:#9ce0dc; --cr-ink:#e4ecff; --cr-dim:#5f7476; display:flex; flex-direction:column; gap:14px; margin-bottom:12px; } #tradeStationPanel .colony-registry.hidden { display:none; } #tradeStationPanel .cr-eyebrow { color:#8fb3b0; font:10px/1.5 monospace; letter-spacing:.14em; } #tradeStationPanel .cr-colonies { padding:12px 14px; background:#172b32ed; border:1px solid #526d73; border-left:3px solid var(--cr-brass); border-radius:3px; } #tradeStationPanel .cr-colonies-head { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; } #tradeStationPanel .cr-count { color:var(--cr-brass-hi); font:700 18px/1 monospace; letter-spacing:.06em; } #tradeStationPanel .cr-cap { margin-left:auto; color:#8fb3b0; font:11px/1 monospace; letter-spacing:.12em; } #tradeStationPanel .cr-slots { display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; } #tradeStationPanel .cr-slot { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; } #tradeStationPanel .cr-slot-orb { width:26px; height:26px; border-radius:50%; border:2px solid var(--cr-dim); box-sizing:border-box; } #tradeStationPanel .cr-slot-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8fb3b0; font:9px/1.2 monospace; letter-spacing:.04em; } #tradeStationPanel .cr-slot[data-state=built] .cr-slot-orb { border-color:var(--cr-brass-hi); background:radial-gradient(circle at 35% 30%,#fff1c8,#d9b46a 45%,#6b5428); box-shadow:0 0 8px #d9b46a88; } #tradeStationPanel .cr-slot[data-state=built] .cr-slot-label { color:var(--cr-ink); } #tradeStationPanel .cr-slot[data-state=open] .cr-slot-orb { border-color:var(--cr-teal); background:#9ce0dc1a; } #tradeStationPanel .cr-slot[data-state=open] .cr-slot-label { color:var(--cr-teal); } #tradeStationPanel .cr-slot[data-state=locked] .cr-slot-orb { border-style:dashed; opacity:.7; } #tradeStationPanel .cr-slot.cr-slot-new .cr-slot-orb { animation:cr-slot-light .9s ease-out; } @keyframes cr-slot-light { 0% { box-shadow:0 0 0 0 #9ce0dc00; transform:scale(.6); } 40% { box-shadow:0 0 18px 6px #9ce0dccc; transform:scale(1.25); } 100% { box-shadow:0 0 0 0 #9ce0dc00; transform:scale(1); } } #tradeStationPanel .cr-main { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:14px; align-items:start; } #tradeStationPanel .cr-tree-wrap { position:relative; min-width:0; overflow:auto; padding:6px; background:radial-gradient(ellipse at 50% 100%,#1d3a40,#0f1d22 70%); border:1px solid #526d73; border-radius:3px; } #tradeStationPanel .cr-tree { display:block; width:100%; min-width:420px; height:auto; max-height:max(260px,min(calc(100dvh - 420px),560px)); } #tradeStationPanel .cr-legend { padding:4px 6px 2px; color:#8fb3b0; font:10px/1.4 monospace; letter-spacing:.1em; white-space:pre-wrap; } #tradeStationPanel .cr-edge { fill:none; stroke:#3a5257; stroke-width:3; stroke-dasharray:6 6; } #tradeStationPanel .cr-edge[data-state=ready] { stroke:#5fa8a3; stroke-dasharray:none; } #tradeStationPanel .cr-edge[data-state=on] { stroke:var(--cr-brass); stroke-dasharray:none; filter:drop-shadow(0 0 3px #d9b46a99); } #tradeStationPanel .cr-edge.cr-flow { stroke:var(--cr-brass-hi); stroke-dasharray:24 400; animation:cr-flow .5s ease-out; } @keyframes cr-flow { from { stroke-dashoffset:424; } to { stroke-dashoffset:0; } } #tradeStationPanel .cr-branch-label { fill:#8fb3b0; font:11px monospace; letter-spacing:.14em; } #tradeStationPanel .cr-trunk-label { fill:var(--cr-brass); } #tradeStationPanel .cr-node { cursor:pointer; outline:none; } #tradeStationPanel .cr-node-halo { fill:none; stroke:transparent; stroke-width:2; } #tradeStationPanel .cr-node-shape { fill:#1b2a2e; stroke:#4a5f63; stroke-width:2; } #tradeStationPanel .cr-node-glyph { fill:#6f8588; font:700 16px sans-serif; pointer-events:none; } #tradeStationPanel .cr-charter .cr-node-glyph { font:700 15px serif; letter-spacing:.04em; } #tradeStationPanel .cr-node-tier { fill:#6f8588; font:9px monospace; pointer-events:none; } #tradeStationPanel .cr-node-lock { font-size:10px; pointer-events:none; } #tradeStationPanel .cr-node:not([data-state=locked]) .cr-node-lock { display:none; } #tradeStationPanel .cr-node[data-state=available] .cr-node-shape { fill:#173439; stroke:var(--cr-teal); } #tradeStationPanel .cr-node[data-state=available] :is(.cr-node-glyph,.cr-node-tier) { fill:var(--cr-teal); } #tradeStationPanel .cr-node[data-state=available] .cr-node-halo { stroke:#9ce0dc66; animation:cr-pulse 1.6s ease-in-out infinite; } #tradeStationPanel .cr-node[data-state=owned] .cr-node-shape { fill:#8a6a32; stroke:var(--cr-brass-hi); } #tradeStationPanel .cr-node[data-state=owned] :is(.cr-node-glyph,.cr-node-tier) { fill:#fff1c8; } #tradeStationPanel .cr-root .cr-node-shape { fill:#2b3d33; stroke:var(--cr-brass); } #tradeStationPanel .cr-node.selected .cr-node-halo,#tradeStationPanel .cr-node:focus-visible .cr-node-halo { stroke:#ffffff; stroke-width:2.5; animation:none; } #tradeStationPanel .cr-node:hover .cr-node-shape { stroke-width:3; } #tradeStationPanel .cr-node.cr-just-signed .cr-node-shape { animation:cr-sign .6s ease-out; transform-box:fill-box; transform-origin:center; } @keyframes cr-pulse { 0%,100% { stroke-opacity:.25; } 50% { stroke-opacity:1; } } @keyframes cr-sign { 0% { transform:scale(1.6); filter:brightness(2.2); } 60% { transform:scale(.92); } 100% { transform:scale(1); filter:none; } } #tradeStationPanel .cr-details { display:flex; flex-direction:column; gap:8px; min-width:0; padding:14px 16px; background:linear-gradient(#1b2f35f2,#14252af2); border:1px solid #526d73; border-top:3px solid var(--cr-brass); border-radius:3px; } #tradeStationPanel .cr-name { margin:0; color:var(--cr-ink); font:600 18px/1.3 sans-serif; letter-spacing:.04em; } #tradeStationPanel .cr-desc { margin:0; color:#b8cdcf; font-size:13px; line-height:1.5; } #tradeStationPanel .cr-effects,#tradeStationPanel .cr-checks { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; } #tradeStationPanel .cr-effects.hidden,#tradeStationPanel .cr-checks.hidden { display:none; } #tradeStationPanel .cr-effect { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; background:#0f1d22cc; border:1px solid #3a5257; border-radius:3px; } #tradeStationPanel .cr-effect-img { width:28px; height:28px; object-fit:cover; border-radius:2px; } #tradeStationPanel .cr-effect-img.hidden { visibility:hidden; } #tradeStationPanel .cr-effect-name { color:#c7d2d5; font-size:12px; overflow-wrap:anywhere; } #tradeStationPanel .cr-effect-value { color:var(--cr-ink); font:700 13px monospace; } #tradeStationPanel .cr-effect-value.up { color:var(--cr-brass-hi); } #tradeStationPanel .cr-checks li { font:12px/1.4 monospace; } #tradeStationPanel .cr-checks li.ok { color:#8fdca0; } #tradeStationPanel .cr-checks li.miss { color:#e7a29a; } #tradeStationPanel .cr-sign { min-height:44px; margin-top:4px; font-weight:700; letter-spacing:.12em; } #tradeStationPanel .cr-sign.hidden { display:none; } #tradeStationPanel .cr-sign:not(:disabled) { border-color:var(--cr-brass-hi); background:linear-gradient(#7a5d2b,#4f3d1f); color:#fff1c8; } #tradeStationPanel .cr-feedback { margin:0; min-height:1.2em; color:#a6deda; font-size:12px; } /* Планшети й телефони: дерево на всю ширину, деталі під ним; слоти 5×3 */ @media (max-width:900px) { #tradeStationPanel .cr-main { grid-template-columns:minmax(0,1fr); } } @media (max-width:620px) { #tradeStationPanel .cr-slots { grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:8px; } #tradeStationPanel .cr-slot-orb { width:28px; height:28px; } #tradeStationPanel .cr-colonies-head { flex-wrap:wrap; } } @media (max-height:500px) { #tradeStationPanel .cr-slot-label { display:none; } #tradeStationPanel .cr-slot-orb { width:18px; height:18px; } } @media (prefers-reduced-motion:reduce) { #tradeStationPanel :is(.cr-node-halo,.cr-node-shape,.cr-edge,.cr-slot-orb) { animation:none !important; } } /* Mining factory: worn graphite, copper and amber instrument lighting. */ body[data-station-theme=factory] { --science-line:#82735a; --science-ink:#eee4cc; --science-accent:#efbc70; } .station-open #factoryPanel.science-console .panel-header { background:linear-gradient(#9eaa99,#6d796e); border-color:#b89660; } .station-open #factoryPanel.science-console .panel-body { background:linear-gradient(#1c211de8,#161b18f2),var(--science-scene) center/cover; } .station-open #factoryPanel.science-console .row { padding:14px; margin-bottom:10px; gap:16px; background:#242923e8; border-color:#6e715e; } .station-open #factoryPanel.science-console .row span:last-child { text-align:right; overflow-wrap:anywhere; } .station-open #factoryPanel.science-console .section-title,.station-open #factoryPanel .science-eyebrow { color:#efbc70; } .station-open #factoryPanel .science-summary { border-color:#b89660; } .station-open #factoryPanel .science-navigation { background:#20271f; } .station-open #factoryPanel .science-navigation button { background:linear-gradient(#424a3b,#2b3329); border-color:#8d805e; } .station-open #factoryPanel [data-factory-pane] { max-width:820px; margin:auto; } .station-open #factoryPanel [data-factory-pane]>button { width:100%; margin-top:16px; } .station-open #factoryPanel progress { display:block; width:100%; height:18px; accent-color:#eeb86b; margin:12px 0; } .station-open #factoryPanel .factory-note { font:13px/1.6 sans-serif; color:#d0c6ac; } .station-open #factoryPanel.science-console .row .label { color:#c5c3a7; } .station-open #factoryPanel.science-console .row span:last-child { color:#eee4cc; } /* Coin Base: graphite, gold and emerald. Gradient backs the loading scene. */ .station-open[data-station-theme=casino] { --science-line:#4f7a66; --science-accent:#46e0a0; --science-ink:#e8f3ea; } .station-open #coinBasePanel.science-console { background:#141a19; } .station-open #coinBasePanel.science-console[data-science-screen=hub] { background: radial-gradient(ellipse 60% 45% at 50% 38%,#46e0a033,#46e0a000 70%), radial-gradient(circle at 22% 70%,#f0c06026,#f0c06000 35%), radial-gradient(circle at 80% 62%,#f0c0601f,#f0c06000 30%), repeating-linear-gradient(90deg,#46e0a00d 0 1px,transparent 1px 64px), repeating-linear-gradient(0deg,#46e0a00d 0 1px,transparent 1px 64px), linear-gradient(#10181a,#0b1011); } .station-open #coinBasePanel.science-console .panel-header { background:linear-gradient(#2c3a35,#1a2421); border-color:#4f7a66; } .station-open #coinBasePanel.science-console .station-heading > span:last-child { color:#f3d58a; } .station-open #coinBasePanel.science-console .station-kicker { color:#7fd9b0; } .station-open #coinBasePanel.science-console .panel-header button { color:#e8f3ea; } .station-open #coinBasePanel.science-console .science-readout { color:#f0c060; background:#101716; } .station-open #coinBasePanel.science-console .science-summary { border-color:#4f7a66; border-left-color:#46e0a0; background:#0f1716e8; } .station-open #coinBasePanel.science-console .science-eyebrow, .station-open #coinBasePanel.science-console .science-service-heading { color:#46e0a0; } .station-open #coinBasePanel.science-console .science-navigation { background:#18201e; border-color:#4f7a66; } .station-open #coinBasePanel.science-console button { background:linear-gradient(#26352f,#1a2521); border-color:#4f7a66; color:#e8f3ea; } .station-open #coinBasePanel.science-console button:hover:not(:disabled) { background:#2f4a3f; border-color:#46e0a0; } .station-open #coinBasePanel.science-console button:focus-visible { outline:2px solid #f0c060; outline-offset:2px; } .station-open #coinBasePanel.science-console>.panel-body { background:linear-gradient(#10181588,#0c1211b8),var(--science-scene) center/cover; } .coin-base-game { width:min(100%,640px); margin:0 auto; display:grid; gap:14px; padding:20px; box-sizing:border-box; background:#121b19ee; border:1px solid #4f7a66; border-radius:3px; } /* Широкий екран: налаштування ліворуч, дошка праворуч — усе видно без прокрутки */ @media(min-width:900px) { .coin-base-game { width:min(100%,940px); grid-template-columns:minmax(0,1fr) minmax(260px,340px); align-items:center; gap:18px 28px; } .coin-base-board { grid-column:2; grid-row:1; } .coin-base-status { grid-column:1/-1; } } .coin-base-setup { display:grid; gap:10px; } .coin-base-label { font:12px/1.4 monospace; color:#7fd9b0; letter-spacing:.12em; } .coin-base-options { display:flex; flex-wrap:wrap; gap:8px; } .coin-base-options button { flex:1 1 90px; min-width:0; min-height:44px; padding:8px; font:600 13px monospace; } .station-open #coinBasePanel.science-console .coin-base-options [aria-pressed=true] { color:#ffe3a2; border:2px solid #f0c060; background:#3d3a22; } .coin-base-preview { padding:12px; min-height:24px; border:1px solid #3d6e56; background:#0f1d17; color:#bfe8cf; font:13px/1.6 monospace; overflow-wrap:anywhere; } .coin-base-preview.coin-base-error { border-color:#9a7d4a; color:#f0cf8f; background:#211d12; } .station-open #coinBasePanel .coin-base-start { min-height:48px; font:600 14px monospace; letter-spacing:.08em; } .coin-base-board { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(100%,330px); margin:0 auto; aspect-ratio:1; } .station-open #coinBasePanel .coin-base-board button { min-width:44px; min-height:44px; padding:0; aspect-ratio:1; font:700 clamp(28px,8vw,56px)/1 monospace; background:#0e1614; border:1px solid #3d5e50; } .station-open #coinBasePanel .coin-base-board button:disabled { opacity:1; cursor:default; } .station-open #coinBasePanel .coin-base-board button[data-mark=X] { color:#46e0a0; text-shadow:0 0 12px #46e0a088; } .station-open #coinBasePanel .coin-base-board button[data-mark=O] { color:#f0c060; text-shadow:0 0 12px #f0c06088; } .station-open #coinBasePanel .coin-base-board button.coin-base-win { background:#243a2f; border-color:#f0c060; } .coin-base-game[data-phase=setup] .coin-base-board { opacity:.45; } .coin-base-status { text-align:center; font:600 15px/1.5 monospace; color:#e8f3ea; min-height:22px; } @media(max-width:700px) { .coin-base-game { padding:12px; gap:10px; } } @media(max-height:500px) { .coin-base-game { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } .coin-base-status { grid-column:1/-1; } .coin-base-board { width:min(100%,220px); } } /* Coin Base table: static WebP art, transient CSS effects only. */ .coin-base-game { border-color:#8b7950; border-radius:14px; background:linear-gradient(135deg,#22342eef,#101b19f5 65%); box-shadow:0 18px 48px #0008,inset 0 1px #e6cb8840; } .coin-base-board { box-sizing:border-box; padding:12px; border:2px solid #a18b57; border-radius:14px; background:linear-gradient(145deg,#39443d,#131d1c 55%,#33362b); box-shadow:0 12px 24px #0008,inset 0 0 0 3px #101a17; } .station-open #coinBasePanel .coin-base-board button { position:relative; border-radius:8px; background:linear-gradient(145deg,#0b1514,#20312c); box-shadow:inset 2px 3px 7px #0009,inset 0 -1px #a4dab319; overflow:visible; } .coin-base-token { display:block; width:100%; height:100%; align-content:center; background-size:200% 100%; background-repeat:no-repeat; } .coin-tokens-ready [data-mark=X] .coin-base-token,.coin-tokens-ready [data-mark=O] .coin-base-token { color:transparent; text-shadow:none; background-image:url('assets/portraits/coin-tokens.webp'); } [data-mark=O] .coin-base-token { background-position:100% 0; } .coin-token-placed { animation:coin-token-place 180ms ease-out; } .station-open #coinBasePanel .coin-base-board button.coin-base-win { animation:coin-line-glow 250ms ease-out var(--win-delay) both; } .station-open #coinBasePanel .coin-base-options :is([data-cb-bet],[data-cu-bet]) { flex:1 1 48px; border:2px dashed #bba36b; border-radius:24px; background:radial-gradient(ellipse,#263c32 45%,#111e18 48%,#7e7048 51%,#18281f 56%); box-shadow:0 3px 0 #080f0c; } .coin-base-dealer { display:flex; align-items:center; gap:14px; min-width:0; padding:10px; border:1px solid #8e80544d; border-radius:10px; background:linear-gradient(100deg,#b8954520,#08130fcc); } .coin-base-portrait { flex:0 0 88px; width:88px; height:88px; border-radius:50%; background:#14261e url('assets/portraits/coin-dealer.webp') 0 0/300% 200%; box-shadow:0 0 0 1px #a48d58,0 0 18px #42d69a13; } [data-dealer=thinking] .coin-base-portrait { background-position:50% 0; } [data-dealer=win] .coin-base-portrait { background-position:100% 0; } [data-dealer=loss] .coin-base-portrait { background-position:0 100%; } [data-dealer=draw] .coin-base-portrait { background-position:50% 100%; } .coin-base-dealer-copy { min-width:0; } .coin-base-status { text-align:left; margin-top:5px; overflow-wrap:anywhere; } [data-phase=over] .coin-base-dealer { animation:coin-result-in 220ms ease-out; border-color:#c1a263; } [data-result=win] .coin-base-status { color:#83f6bf; } [data-result=loss] .coin-base-status { color:#f0bc92; } [data-result=draw] .coin-base-status { color:#efdcaa; } @media(min-width:900px) { .coin-base-setup { grid-column:1; grid-row:2; } .coin-base-dealer { grid-column:1; grid-row:1; } .coin-base-board { grid-column:2; grid-row:1/3; } } @media(max-width:899px) { .coin-base-dealer { grid-row:1; padding:8px; gap:10px; } .coin-base-portrait { flex-basis:56px; width:56px; height:56px; } .coin-base-status { font-size:13px; } } @media(max-height:500px) { .coin-base-dealer { grid-column:1; grid-row:1; } .coin-base-setup { grid-column:1; grid-row:2; } .coin-base-board { grid-column:2; grid-row:1/3; padding:8px; } } @keyframes coin-token-place { from { transform:translateY(-8px) scale(1.12); opacity:.25; } to { transform:none; opacity:1; } } @keyframes coin-line-glow { from { box-shadow:inset 0 0 4px #0009; } to { box-shadow:inset 0 0 18px #46e0a044,0 0 8px #f0c06055; } } @keyframes coin-result-in { from { transform:translateY(5px); opacity:.5; } to { transform:none; opacity:1; } } @media(prefers-reduced-motion:reduce) { .coin-base-game *, .station-open #coinBasePanel .coin-base-board button.coin-base-win { animation:none!important; transition:none!important; } } /* Coin Base — Ultimate Tic-Tac-Toe (CoinBaseUltimateUI.js). Reuses setup/dealer/token classes; the 9×9 board has its own layout. data-compact (JS, max-width 520px or max-height 500px) turns the board into an overview and plays on an enlarged board. */ .coin-ultimate-game { width:min(100%,1040px); } .coin-ultimate-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:min(100%,480px); margin:0 auto; box-sizing:border-box; padding:10px; aspect-ratio:1; border:2px solid #a18b57; border-radius:14px; background:linear-gradient(145deg,#39443d,#131d1c 55%,#33362b); box-shadow:0 12px 24px #0008,inset 0 0 0 3px #101a17; } .coin-ultimate-sub { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:4px; min-width:0; border:1px solid #3d5e50; border-radius:8px; background:#0b1413; transition:box-shadow 160ms,border-color 160ms; } .coin-ultimate-sub[data-active] { border-color:#46e0a0; box-shadow:0 0 0 1px #46e0a0,0 0 14px #46e0a055; } .station-open #coinBasePanel .coin-ultimate-sub > button[data-cu-cell],.station-open #coinBasePanel .coin-ultimate-zoom-grid > button { position:relative; min-width:0; min-height:0; padding:0; aspect-ratio:1; border-radius:4px; font:700 clamp(12px,2.6vw,22px)/1 monospace; background:linear-gradient(145deg,#0b1514,#1d2d29); border:1px solid #2c4439; box-shadow:inset 1px 2px 4px #0009; } .station-open #coinBasePanel .coin-ultimate-game button[data-cu-cell]:disabled,.station-open #coinBasePanel .coin-ultimate-zoom-grid > button:disabled { opacity:1; cursor:default; } .station-open #coinBasePanel .coin-ultimate-game button[data-mark=X] { color:#46e0a0; } .station-open #coinBasePanel .coin-ultimate-game button[data-mark=O] { color:#f0c060; } .station-open #coinBasePanel .coin-ultimate-game button.coin-ultimate-last { border-color:#f0c060; box-shadow:inset 0 0 0 1px #f0c06088; } .coin-ultimate-sub:is([data-owner=X],[data-owner=O],[data-owner=draw]) > button { opacity:.35; } .coin-ultimate-sub[data-owner=draw] { border-style:dashed; } .coin-ultimate-owner { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font:800 clamp(40px,11vw,110px)/1 monospace; } .coin-ultimate-sub[data-owner=X] .coin-ultimate-owner { color:#46e0a0; text-shadow:0 0 18px #46e0a0aa; background:#0b1a14aa; border-radius:8px; } .coin-ultimate-sub[data-owner=O] .coin-ultimate-owner { color:#f0c060; text-shadow:0 0 18px #f0c060aa; background:#1c170aaa; border-radius:8px; } .coin-ultimate-sub.coin-base-win { border-color:#f0c060; animation:coin-line-glow 250ms ease-out var(--win-delay) both; } .coin-ultimate-game[data-phase=setup] .coin-ultimate-board { opacity:.45; } .coin-ultimate-pick,.coin-ultimate-zoom { display:none; } @media(min-width:900px) { .coin-ultimate-game { grid-template-columns:minmax(0,1fr) minmax(360px,480px); } .coin-ultimate-game .coin-base-dealer { grid-column:1; grid-row:1; } .coin-ultimate-game .coin-base-setup { grid-column:1; grid-row:2; } .coin-ultimate-board { grid-column:2; grid-row:1/3; } } /* Компактний режим: огляд (мініатюри, тап = вибір поля) + збільшене поле ≥44px */ .coin-ultimate-game[data-compact="1"] { grid-template-columns:minmax(72px,120px) minmax(158px,1fr); column-gap:8px; align-items:start; } /* Під час партії на малому екрані ставки заблоковані — ховаємо їх, щоб поле було видно без прокрутки */ .coin-ultimate-game[data-compact="1"]:is([data-phase=player],[data-phase=ai]) .coin-base-setup { display:none; } .coin-ultimate-game[data-compact="1"] .coin-base-dealer,.coin-ultimate-game[data-compact="1"] .coin-base-setup { grid-column:1/-1; grid-row:auto; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-board { grid-column:1; grid-row:auto; width:100%; gap:4px; padding:4px; border-radius:8px; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-sub { gap:1px; padding:2px; border-radius:4px; } .station-open #coinBasePanel .coin-ultimate-game[data-compact="1"] .coin-ultimate-sub > button[data-cu-cell] { font-size:7px; border-radius:1px; box-shadow:none; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-owner { font-size:28px; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-sub[data-focus] { border-color:#f0c060; box-shadow:0 0 0 2px #f0c060; } .station-open #coinBasePanel .coin-ultimate-game[data-compact="1"] .coin-ultimate-pick { display:block; position:absolute; inset:0; min-width:0; min-height:0; padding:0; background:transparent; border:0; border-radius:4px; box-shadow:none; } .station-open #coinBasePanel .coin-ultimate-game[data-compact="1"] .coin-ultimate-pick:disabled { cursor:default; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-zoom { display:grid; gap:6px; grid-column:2; min-width:0; } .coin-ultimate-zoom-grid { display:grid; grid-template-columns:repeat(3,minmax(44px,1fr)); gap:5px; padding:6px; border:2px solid #a18b57; border-radius:10px; background:linear-gradient(145deg,#39443d,#131d1c 55%,#33362b); } .station-open #coinBasePanel .coin-ultimate-zoom-grid > button { min-height:44px; font-size:26px; border-radius:6px; } @media(max-height:500px) { .coin-ultimate-game[data-compact="1"] { grid-template-columns:minmax(0,1fr) 120px 164px; padding:8px; } .coin-ultimate-zoom-grid { gap:4px; padding:4px; } .coin-ultimate-game[data-compact="1"] .coin-base-dealer { grid-column:1; grid-row:1; } .coin-ultimate-game[data-compact="1"] .coin-base-setup { grid-column:1; grid-row:2; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-board { grid-column:2; grid-row:1/3; } .coin-ultimate-game[data-compact="1"] .coin-ultimate-zoom { grid-column:3; grid-row:1/3; } } @media(prefers-reduced-motion:reduce) { .coin-ultimate-sub,.coin-ultimate-sub.coin-base-win { animation:none!important; transition:none!important; } } /* Coin Base — режим «2 гравці» (data-mode=pvp): без ставок, лише дошка й рахунок */ .coin-base-game[data-mode=pvp] :is(.cb-stake-label,.coin-base-options[aria-label=Bet],.coin-base-options[aria-label=Difficulty],.coin-base-preview) { display:none; } .station-open #coinBasePanel.science-console .coin-base-mode [aria-pressed=true] { color:#e8fff3; border:2px solid #46e0a0; background:#1f4034; } /* Coin Base — шашки (CoinBaseCheckersUI.js). Setup/дилер спільні з іншими іграми; CSS-диски — fallback до декодування WebP; дамка — з кільцем і короною. */ .coin-checkers-game { width:min(100%,1040px); } .coin-checkers-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); width:min(100%,440px); margin:0 auto; box-sizing:border-box; padding:8px; aspect-ratio:1; border:2px solid #b19a62; border-radius:10px; background:linear-gradient(145deg,#51554a,#18221f 45%,#393d32); box-shadow:0 12px 24px #0008,inset 0 0 0 2px #111b17,inset 0 0 0 3px #887345; } .coin-checkers-light { aspect-ratio:1; background:linear-gradient(135deg,#536258,#49574e); } .station-open #coinBasePanel .coin-checkers-board > button { position:relative; display:grid; place-items:center; min-width:0; min-height:0; padding:0; aspect-ratio:1; border:0; border-radius:0; background:linear-gradient(135deg,#192b24,#11201b); box-shadow:inset 0 0 0 1px #26372e; } .station-open #coinBasePanel .coin-checkers-board > button:disabled { opacity:1; cursor:default; } .station-open #coinBasePanel .coin-checkers-board > button:focus-visible { outline:2px solid #f0c060; outline-offset:-2px; } .coin-checkers-piece { display:block; width:78%; height:78%; border-radius:50%; pointer-events:none; } [data-piece=green] > .coin-checkers-piece { background:radial-gradient(circle at 35% 30%,#b8ffd9,#46e0a0 38%,#18704c 72%,#0b3a27); box-shadow:0 3px 0 #06221a,inset 0 0 0 3px #1b8a5c,0 0 10px #46e0a044; } [data-piece=gold] > .coin-checkers-piece { background:radial-gradient(circle at 35% 30%,#fff3c8,#f0c060 38%,#9a6b22 72%,#4a3210); box-shadow:0 3px 0 #2a1c08,inset 0 0 0 3px #b58432,0 0 10px #f0c06044; } [data-king] > .coin-checkers-piece { outline:2px solid #fff0b8; outline-offset:-5px; } [data-king] > .coin-checkers-piece::after { content:'♛'; display:grid; place-items:center; height:100%; font:700 clamp(12px,3.4vw,22px)/1 serif; color:#fff8de; text-shadow:0 1px 2px #000a; } .station-open #coinBasePanel .coin-checkers-board > button[data-must] { box-shadow:inset 0 0 0 2px #f0c060; } .station-open #coinBasePanel .coin-checkers-board > button[data-selected] { background:#1f4034; box-shadow:inset 0 0 0 2px #46e0a0; } .station-open #coinBasePanel .coin-checkers-board > button[data-target] { cursor:pointer; } .coin-checkers-board > [data-target]::before { content:''; position:absolute; width:30%; height:30%; border-radius:50%; background:#46e0a0aa; box-shadow:0 0 10px #46e0a0; } .station-open #coinBasePanel .coin-checkers-board > button[data-path] { box-shadow:inset 0 0 0 2px #46e0a088; } [data-taken] > .coin-checkers-piece { opacity:.35; } .station-open #coinBasePanel .coin-checkers-board > button[data-last] { background:#23332a; } .coin-checkers-placed { animation:coin-token-place 150ms ease-out; } .coin-checkers-game[data-phase=setup] .coin-checkers-board { opacity:.55; } @media(min-width:900px) { .coin-checkers-game { grid-template-columns:minmax(0,1fr) minmax(360px,460px); } .coin-checkers-game .coin-base-dealer { grid-column:1; grid-row:1; } .coin-checkers-game .coin-base-setup { grid-column:1; grid-row:2; } .coin-checkers-board { grid-column:2; grid-row:1/3; } } /* Компактний режим: під час партії ставки заблоковані — ховаємо, дошка на всю ширину */ .coin-checkers-game[data-compact="1"] { padding:8px; } .coin-checkers-game[data-compact="1"]:is([data-phase=player],[data-phase=ai]) .coin-base-setup { display:none; } .coin-checkers-game[data-compact="1"] .coin-checkers-board { width:100%; padding:4px; } @media(max-height:500px) { /* Низький екран: під час партії заголовок сервісу зайвий — віддаємо висоту дошці */ .station-open #coinBasePanel.science-console:has(.coin-base-game:not(.hidden):is([data-phase=player],[data-phase=ai])) > .science-service-heading { display:none; } .coin-checkers-game[data-compact="1"] { grid-template-columns:minmax(0,1fr) max(200px,calc(100dvh - 182px)); align-items:start; } .coin-checkers-game[data-compact="1"] .coin-base-dealer { grid-column:1; grid-row:1; } .coin-checkers-game[data-compact="1"] .coin-base-setup { grid-column:1; grid-row:2; } .coin-checkers-game[data-compact="1"] .coin-checkers-board { grid-column:2; grid-row:1/3; } } @media(prefers-reduced-motion:reduce) { .coin-checkers-placed { animation:none!important; } } /* Coin Base — довгі нарди (CoinBaseNardyUI.js). Пункти — кнопки з трикутником через clip-path; позиція кожного пункту — CSS-змінні: --hc/--hr (горизонтальна дошка 13×2, 7-ма колонка — бар) і --vc/--vr (вертикальна дошка 2×13 на вузькому портреті). Шашки — CSS-диски. */ .coin-nardy-game { width:min(100%,1080px); } .coin-nardy-table { display:grid; gap:10px; min-width:0; } .coin-nardy-board { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) 12px repeat(6,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:0 3px; width:min(100%,560px); aspect-ratio:13/10; margin:0 auto; box-sizing:border-box; padding:8px; border:2px solid #a18b57; border-radius:12px; background:linear-gradient(145deg,#2b3a32,#131d1c 55%,#2c3027); box-shadow:0 12px 24px #0008,inset 0 0 0 3px #101a17; } .coin-nardy-bar { grid-column:7; grid-row:1/3; background:linear-gradient(90deg,#5b4a2a,#a18b57,#5b4a2a); border-radius:3px; } .station-open #coinBasePanel.science-console .coin-nardy-point { position:relative; grid-column:var(--hc); grid-row:var(--hr); min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; } .station-open #coinBasePanel.science-console .coin-nardy-point:disabled { opacity:1; cursor:default; } /* Загальне правило кнопок станції (min-height 44px, фон, hover, opacity .6) має вищу специфічність — перебиваємо через .science-console */ .station-open #coinBasePanel.science-console .coin-nardy-point:hover:not(:disabled) { background:transparent; border:0; } .coin-nardy-point::before { content:''; position:absolute; inset:0; background:#1d4a39; clip-path:polygon(0 0,100% 0,50% 90%); } .coin-nardy-point[data-parity="1"]::before { background:#6b5629; } .coin-nardy-point[data-row="2"]::before { clip-path:polygon(50% 10%,100% 100%,0 100%); } .coin-nardy-stack { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:1px; pointer-events:none; } .coin-nardy-point[data-row="2"] .coin-nardy-stack { flex-direction:column-reverse; } .coin-nardy-chk { flex:none; display:grid; place-items:center; width:86%; aspect-ratio:1; border-radius:50%; font:700 11px/1 monospace; color:#fff8de; text-shadow:0 1px 2px #000; } [data-side=green] .coin-nardy-chk { background:radial-gradient(circle at 35% 30%,#b8ffd9,#46e0a0 38%,#18704c 72%,#0b3a27); box-shadow:0 1px 0 #06221a,inset 0 0 0 2px #1b8a5c; } [data-side=gold] .coin-nardy-chk { background:radial-gradient(circle at 35% 30%,#fff3c8,#f0c060 38%,#9a6b22 72%,#4a3210); box-shadow:0 1px 0 #2a1c08,inset 0 0 0 2px #b58432; } .coin-nardy-point[data-movable]::before { filter:brightness(1.35); } .station-open #coinBasePanel.science-console .coin-nardy-point[data-movable] { outline:1px solid #f0c06088; outline-offset:-1px; } .station-open #coinBasePanel.science-console .coin-nardy-point[data-selected] { outline:2px solid #46e0a0; outline-offset:-2px; } .coin-nardy-point[data-target]::after { content:''; position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#46e0a0aa; box-shadow:0 0 12px #46e0a0; pointer-events:none; } .coin-nardy-point[data-last]::before { filter:brightness(1.2) saturate(1.2); } .station-open #coinBasePanel.science-console .coin-nardy-point:focus-visible { outline:2px solid #f0c060; outline-offset:-2px; } .coin-nardy-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; } .station-open #coinBasePanel.science-console .coin-nardy-off,.coin-nardy-off-gold { display:grid; justify-items:center; min-width:78px; min-height:44px; padding:4px 8px; box-sizing:border-box; border:1px solid #4f7a66; border-radius:8px; background:#101816; color:#bfe8cf; font:600 10px/1.3 monospace; letter-spacing:.08em; } .coin-nardy-off strong,.coin-nardy-off-gold strong { font:700 16px/1.1 monospace; } .coin-nardy-off-gold { border-color:#8a6a2c; color:#f0cf8f; } .station-open #coinBasePanel.science-console .coin-nardy-off[data-target] { border:2px solid #46e0a0; box-shadow:0 0 12px #46e0a066; background:#173427; } .station-open #coinBasePanel.science-console .coin-nardy-off:disabled { opacity:1; cursor:default; } .coin-nardy-dice { display:flex; gap:6px; min-height:44px; align-items:center; } .coin-nardy-die { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; background:#f4ecd6; color:#141a19; font:44px/1 serif; box-shadow:0 3px 0 #6b5629,inset 0 0 0 2px #c9b27a; } .coin-nardy-die[data-who=green] { box-shadow:0 3px 0 #0b3a27,inset 0 0 0 3px #46e0a0; } .coin-nardy-die[data-who=gold] { box-shadow:0 3px 0 #4a3210,inset 0 0 0 3px #f0c060; } .coin-nardy-die[data-used] { opacity:.35; } .station-open #coinBasePanel :is(.coin-nardy-roll,.coin-nardy-undo) { min-height:44px; min-width:84px; font:600 13px monospace; letter-spacing:.08em; } .coin-nardy-game[data-phase=setup] .coin-nardy-table { opacity:.55; } @media(min-width:900px) { .coin-nardy-game { grid-template-columns:minmax(0,1fr) minmax(420px,560px); } .coin-nardy-game .coin-base-dealer { grid-column:1; grid-row:1; } .coin-nardy-game .coin-base-setup { grid-column:1; grid-row:2; } .coin-nardy-table { grid-column:2; grid-row:1/3; } } /* Вузький портрет: дошка вертикальна (2 колонки × 12 пунктів), пункт — горизонтальна смуга */ @media(max-width:520px) { .coin-nardy-board { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(6,34px) 10px repeat(6,34px); gap:3px 10px; aspect-ratio:auto; width:100%; } .coin-nardy-bar { grid-column:1/3; grid-row:7; background:linear-gradient(#5b4a2a,#a18b57,#5b4a2a); } .station-open #coinBasePanel.science-console .coin-nardy-point { grid-column:var(--vc); grid-row:var(--vr); } .coin-nardy-point::before,.coin-nardy-point[data-row="2"]::before { clip-path:polygon(0 0,90% 50%,0 100%); } .coin-nardy-point[data-row="1"]::before { clip-path:polygon(100% 0,100% 100%,10% 50%); } .coin-nardy-stack,.coin-nardy-point[data-row="2"] .coin-nardy-stack { flex-direction:row; } .coin-nardy-point[data-row="1"] .coin-nardy-stack { flex-direction:row-reverse; } /* 5 шашок мусять вміститися в пів-ширини дошки навіть на 320 px */ .coin-nardy-chk { width:auto; height:min(88%,19cqw); max-height:22px; } .coin-nardy-point { container-type:inline-size; } /* Маркер цілі: розмір від висоти низької смуги, інакше 34% ширини (~58 px) налазить на сусідні ряди */ .coin-nardy-point[data-target]::after { width:auto; height:62%; box-shadow:0 0 6px #46e0a0; } } /* Компактний режим: під час партії ставки заблоковані — ховаємо */ .coin-nardy-game[data-compact="1"] { padding:8px; } .coin-nardy-game[data-compact="1"]:is([data-phase=player],[data-phase=ai]) .coin-base-setup { display:none; } /* Вузький портрет під час партії: статус дилера над дошкою, нижчі ряди, компактні кнопки */ @media(max-width:520px) { .coin-nardy-game[data-compact="1"] .coin-base-dealer { order:-1; } .coin-nardy-game[data-compact="1"] .coin-nardy-board { grid-template-rows:repeat(6,28px) 8px repeat(6,28px); padding:6px; } .coin-nardy-game[data-compact="1"] .coin-nardy-controls { gap:6px; } .station-open #coinBasePanel.science-console .coin-nardy-game[data-compact="1"] :is(.coin-nardy-off,.coin-nardy-roll,.coin-nardy-undo),.coin-nardy-game[data-compact="1"] .coin-nardy-off-gold { min-width:60px; padding:4px 6px; } .coin-nardy-game[data-compact="1"] .coin-nardy-die { width:34px; height:34px; font-size:36px; } } /* Низький ландшафт: кнопки й кубики — у лівій колонці під дилером, дошка займає праву на всю висоту */ @media(max-height:500px) { .coin-nardy-game[data-compact="1"] { grid-template-columns:minmax(0,1fr) min(440px,54vw); align-items:start; } .coin-nardy-game[data-compact="1"] .coin-nardy-table { display:contents; } .coin-nardy-game[data-compact="1"] .coin-base-dealer { grid-column:1; grid-row:1; } .coin-nardy-game[data-compact="1"] .coin-base-setup { grid-column:1; grid-row:2; } .coin-nardy-game[data-compact="1"] .coin-nardy-controls { grid-column:1; grid-row:3; justify-content:flex-start; gap:4px; } .coin-nardy-game[data-compact="1"] .coin-nardy-board { grid-column:2; grid-row:1/4; width:100%; height:max(190px,calc(100dvh - 178px)); aspect-ratio:auto; padding:4px; } .coin-nardy-game[data-compact="1"] .coin-nardy-chk { width:72%; font-size:9px; } .coin-nardy-die { width:32px; height:32px; font-size:34px; } } .coin-result { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:2px solid #b79a58; border-radius:16px; background:radial-gradient(ellipse at 50% 25%,#29443466,transparent 65%),#101715; color:#eee4cf; text-align:center; box-shadow:0 0 35px #d4ac4933,inset 0 0 0 3px #635333; font-family:inherit; } .coin-result[open] { animation:coin-splash-in 220ms ease-out; } .coin-result::backdrop { background:#030908b8; } .coin-result[data-result=loss] { border-color:#a86656; background:radial-gradient(ellipse at 50% 25%,#602e3066,transparent 65%),#171415; box-shadow:0 0 30px #bf4b3830; } .coin-result[data-result=draw] { box-shadow:0 0 24px #d3c7a520; } .coin-result[data-mars=true] { border-color:#ffe3a0; box-shadow:0 0 48px #e3ba4d55,inset 0 0 0 3px #a58542; } .coin-result-brand { color:#e9c978; letter-spacing:.22em; font-size:18px; } .coin-result-game { font-size:11px; letter-spacing:.14em; margin:8px 20px 20px; } .coin-result .coin-base-portrait { width:88px; height:88px; margin:0 auto 18px; } .coin-result .coin-base-portrait[hidden] { display:none; } .coin-result h2 { margin:12px 0; font-size:clamp(24px,6vw,36px); letter-spacing:.06em; color:#dce7b6; } .coin-result h2:focus { outline:none; } .coin-result-amount { font-size:clamp(30px,8vw,48px); font-weight:700; color:#f2cf79; overflow-wrap:anywhere; } .coin-result[data-result=loss] .coin-result-amount { color:#f28b7f; } .coin-result[data-result=loss] h2,.coin-result[data-result=draw] h2 { color:#ece2cf; } .coin-result-label { letter-spacing:.15em; font-size:11px; margin:6px 0 18px; } .coin-result p { font-size:12px; line-height:1.6; overflow-wrap:anywhere; } .coin-result button { display:block; box-sizing:border-box; width:100%; min-height:44px; margin-top:10px; padding:10px; border:1px solid #b6a786; border-radius:6px; color:#eee4cf; background:#131a18; font:inherit; cursor:pointer; } .coin-result button:focus-visible { outline:2px solid #fff0b8; outline-offset:3px; } .coin-result .coin-result-replay { background:linear-gradient(#ead294,#b79548); color:#191c15; font-weight:700; border-color:#f0dca4; } .coin-result button:disabled { opacity:.45; cursor:default; } .coin-result .coin-result-board { border-color:transparent; background:transparent; font-size:12px; text-decoration:underline; } .coin-result .coin-result-close { position:absolute; top:4px; right:4px; width:44px; margin:0; border:0; background:transparent; font-size:26px; color:#d9bd79; } .coin-result-error:empty { display:none; } .coin-result-error { color:#f2b0a0; } @keyframes coin-splash-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @media (max-height:600px) { .coin-result { padding:18px; } .coin-result .coin-base-portrait { width:56px; height:56px; margin-bottom:8px; } .coin-result-game { margin-bottom:10px; } } @media (prefers-reduced-motion:reduce) { .coin-result[open] { animation:none; } } @media (min-width:600px) and (max-height:450px) { .coin-result { padding:12px 20px; } .coin-result-brand,.coin-result-game { display:inline-block; font-size:12px; margin:0 6px 8px; } .coin-result .coin-base-portrait { position:absolute; top:58px; left:24px; width:48px; height:48px; margin:0; } .coin-result h2 { font-size:24px; line-height:1.15; margin:4px 0; } .coin-result-amount { font-size:32px; line-height:1.1; } .coin-result-label { font-size:10px; margin:4px 0; } .coin-result p { margin:8px 0; } .coin-result button { margin-top:6px; } .coin-result .coin-result-replay,.coin-result .coin-result-floor { display:inline-block; width:calc(50% - 4px); font-size:12px; vertical-align:top; } .coin-result-error:not(:empty) { margin:4px; } } /* Optimized checker art: four 256px cells in a single 512px WebP. */ .coin-checkers-art-ready :where([data-piece]:not([data-piece=""])) > .coin-checkers-piece { width:85%; height:85%; border-radius:0; outline:0; box-shadow:none; background:transparent url('assets/portraits/coin-checkers.webp') 0% 0%/200% 200% no-repeat; } .coin-checkers-art-ready [data-piece=gold] > .coin-checkers-piece { background-position:100% 0%; } .coin-checkers-art-ready [data-piece=green][data-king] > .coin-checkers-piece { background-position:0% 100%; } .coin-checkers-art-ready [data-piece=gold][data-king] > .coin-checkers-piece { background-position:100% 100%; } .coin-checkers-art-ready [data-king] > .coin-checkers-piece::after { content:none; } .station-open #coinBasePanel .coin-checkers-board > button[data-must] { box-shadow:inset 0 0 0 1px #51472d; } .coin-checkers-board > [data-must]::after { content:''; position:absolute; inset:3px; pointer-events:none; background:linear-gradient(#edcc80,#edcc80) left top/7px 2px,linear-gradient(#edcc80,#edcc80) left top/2px 7px, linear-gradient(#edcc80,#edcc80) right top/7px 2px,linear-gradient(#edcc80,#edcc80) right top/2px 7px, linear-gradient(#edcc80,#edcc80) left bottom/7px 2px,linear-gradient(#edcc80,#edcc80) left bottom/2px 7px, linear-gradient(#edcc80,#edcc80) right bottom/7px 2px,linear-gradient(#edcc80,#edcc80) right bottom/2px 7px; background-repeat:no-repeat; } .station-open #coinBasePanel .coin-checkers-board > button[data-selected] { background:#284236; box-shadow:inset 0 0 0 1px #97d3ad; } .coin-checkers-board > [data-selected]::after { content:''; position:absolute; inset:8%; border:2px solid #dcf9de; border-radius:50%; pointer-events:none; box-shadow:0 0 5px #b9efcb55; } .coin-checkers-board > [data-target]::before { width:23%; height:23%; background:#d9e7bb; box-shadow:0 0 0 2px #0a1d15,0 0 6px #d8e9b33d; pointer-events:none; } .coin-checkers-board .coin-checkers-promoted { animation:coin-checkers-crown 250ms ease-out; } @keyframes coin-checkers-crown { from { filter:brightness(1.65) drop-shadow(0 0 4px #ffe3a0); } to { filter:none; } } @media(prefers-reduced-motion:reduce) { .coin-checkers-board .coin-checkers-promoted { animation:none!important; } } /* Nardy table materials and shared checker atlas. Geometry/hit targets stay DOM-native. */ .coin-nardy-board { border-color:#b19a62; border-radius:10px; background:linear-gradient(135deg,#26372f,#121f1a 60%,#2b352b); box-shadow:0 12px 24px #0008,inset 0 0 0 2px #111b17,inset 0 0 0 3px #887345; } .coin-nardy-bar { background:linear-gradient(90deg,#51452e,#a18b59,#51452e); } .coin-nardy-point::before { background:linear-gradient(#39614c,#203e30); } .coin-nardy-point[data-parity="1"]::before { background:linear-gradient(#827047,#4c412b); } .coin-nardy-stack { container-type:size; } .coin-nardy-chk { position:relative; width:min(86cqw,calc((100cqh - 4px)/5)); height:auto; } .coin-nardy-count { position:relative; z-index:3; padding:1px 2px; border:1px solid #dac890; border-radius:4px; background:#0c1715; color:#fff5db; font:700 10px/1 monospace; text-shadow:none; } .coin-nardy-art-ready .coin-nardy-chk,.coin-nardy-art-ready .coin-nardy-off-icon { background:none; box-shadow:none; } .coin-nardy-art-ready :is(.coin-nardy-chk,.coin-nardy-off-icon)::before { content:''; position:absolute; inset:-4.25%; background:transparent url('assets/portraits/coin-checkers.webp') 0% 0%/200% 200% no-repeat; pointer-events:none; } .coin-nardy-art-ready [data-side=gold] :is(.coin-nardy-chk,.coin-nardy-off-icon)::before { background-position:100% 0%; } .station-open #coinBasePanel.science-console .coin-nardy-point[data-movable] { outline-color:#c3a563; } .station-open #coinBasePanel.science-console .coin-nardy-point[data-selected] { outline-color:#daefcf; } .coin-nardy-point[data-selected] .coin-nardy-chk:last-child::after { content:''; position:absolute; inset:-1px; border:1px solid #edffdc; border-radius:50%; pointer-events:none; } .coin-nardy-point[data-target]::after { width:30%; height:auto; background:#e5edc8; box-shadow:0 0 0 2px #102319; z-index:2; } /* On occupied points the destination dot sits over the first disk, away from the count on the last. */ .coin-nardy-point[data-target][data-side=green]::after,.coin-nardy-point[data-target][data-side=gold]::after { top:8%; } .coin-nardy-point[data-row="2"][data-target][data-side=green]::after,.coin-nardy-point[data-row="2"][data-target][data-side=gold]::after { top:92%; } .station-open #coinBasePanel.science-console .coin-nardy-point:focus-visible { outline:2px solid #fff0b8; outline-offset:-2px; } .coin-nardy-point[data-last]::before { filter:brightness(1.18); } .coin-nardy-off-icon { position:relative; display:block; width:18px; height:18px; border-radius:50%; background:radial-gradient(#76dfae,#176142); } [data-side=gold] .coin-nardy-off-icon { background:radial-gradient(#f1d78d,#896023); } .station-open #coinBasePanel.science-console .coin-nardy-off,.coin-nardy-off-gold { grid-template-columns:18px auto; gap:2px 6px; align-items:center; background:linear-gradient(#26342b,#101b16); border-color:#9d8958; } .coin-nardy-off-icon { grid-column:1; grid-row:1/3; } .coin-nardy-off-label,.coin-nardy-off strong { grid-column:2; } .coin-nardy-off strong { font-size:13px; white-space:nowrap; } .coin-nardy-die { position:relative; box-sizing:border-box; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:2px; padding:7px; background:linear-gradient(135deg,#fff7df,#dfd0ab); border:1px solid #c1a56d; font-size:0; } .coin-nardy-pip { width:100%; height:100%; border-radius:50%; background:#1b231e; box-shadow:inset 0 1px 1px #0005; } .coin-nardy-die[data-used] { opacity:.55; } .coin-nardy-die[data-used]::after { content:''; position:absolute; right:1px; bottom:2px; width:7px; height:4px; border-left:2px solid #123f27; border-bottom:2px solid #123f27; transform:rotate(-45deg); } .coin-nardy-arrived { animation:coin-nardy-arrive 150ms ease-out; } @keyframes coin-nardy-arrive { from { opacity:.45; } to { opacity:1; } } @media(max-width:520px) { .coin-nardy-bar { background:linear-gradient(#51452e,#a18b59,#51452e); } .coin-nardy-game .coin-nardy-chk { width:auto; height:min(88cqh,calc((100cqw - 4px)/5),22px); } .coin-nardy-point[data-target]::after { width:auto; height:40%; } .coin-nardy-point[data-target][data-side=green]::after,.coin-nardy-point[data-target][data-side=gold]::after { top:50%; left:8%; } .coin-nardy-point[data-row="1"][data-target][data-side=green]::after,.coin-nardy-point[data-row="1"][data-target][data-side=gold]::after { left:92%; } .coin-nardy-game[data-compact="1"] .coin-nardy-off { min-width:78px; } } @media(max-height:500px) and (min-width:521px) { .coin-nardy-game[data-compact="1"] .coin-nardy-chk { width:min(72cqw,calc((100cqh - 4px)/5)); } } @media(prefers-reduced-motion:reduce) { .coin-nardy-arrived { animation:none!important; } } /* EQUIPMENT terminal: the border is a deferred nine-slice; all content stays live. */ .station-open #stationPanel.science-console[data-science-screen=shop] { border:26px solid #34373a; border-image:url('assets/portraits/equipment-bezel.webp') 100 / 26px stretch; border-radius:0; background:#071321; box-shadow:0 14px 48px #000a; } .station-open #stationPanel.science-console[data-science-screen=shop] > .panel-header { background:linear-gradient(#1b2b35,#101e28); color:#e1eced; border-bottom:1px solid #48606b; min-height:52px; padding:6px 12px; } .station-open #stationPanel.science-console[data-science-screen=shop] .station-heading > span:last-child { color:#e1eced; font-size:16px; } .station-open #stationPanel.science-console[data-science-screen=shop] .station-kicker { color:#9fbdc9; } .station-open #stationPanel.science-console[data-science-screen=shop] > .science-readout { font-size:12px; padding:6px 12px; background:#0c1b25; } .station-open #stationPanel.science-console[data-science-screen=shop] > .science-service-heading { padding:7px 12px; color:#e1eced; background:#14242e; } .station-open #stationPanel.science-console[data-science-screen=shop] > .panel-body { padding:0; background:#071321; } .station-open #stationPanel.science-console[data-science-screen=shop] .science-navigation { padding:6px 10px; background:#101e28; } .station-open #stationPanel.science-console[data-science-screen=shop] .science-navigation button { min-height:44px; } .station-open #stationPanel.science-console #stPaneShop { --eq-edge:#36576a; --eq-muted:#9cbaca; color:#e1eced; font:12px/1.45 ui-monospace,Consolas,monospace; } .station-open #stationPanel.science-console #stPaneShop * { box-sizing:border-box; } .station-open #stationPanel.science-console #stPaneShop [hidden] { display:none!important; } .station-open #stationPanel.science-console #stPaneShop .eq-workspace { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); grid-template-rows:minmax(0,3fr) minmax(0,2fr); height:100%; min-height:0; } .station-open #stationPanel.science-console #stPaneShop :is(.eq-catalog,.eq-hold,.eq-details) { min-width:0; min-height:0; padding:14px; overflow:auto; scrollbar-width:thin; scrollbar-color:#496b7d #0b1823; overscroll-behavior:contain; } .station-open #stationPanel.science-console #stPaneShop .eq-catalog { grid-column:1; grid-row:1; } .station-open #stationPanel.science-console #stPaneShop .eq-hold { grid-column:1; grid-row:2; border-top:1px solid var(--eq-edge); } .station-open #stationPanel.science-console #stPaneShop .eq-details { grid-column:2; grid-row:1/3; border-left:1px solid var(--eq-edge); } .station-open #stationPanel.science-console #stPaneShop :is(h3,p) { margin:0; } .station-open #stationPanel.science-console #stPaneShop .eq-category { font-size:14px; letter-spacing:.1em; margin:0 0 9px; } .station-open #stationPanel.science-console #stPaneShop .eq-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:20px; } .station-open #stationPanel.science-console #stPaneShop .eq-cell { display:flex; flex-direction:column; align-items:stretch; min-width:0; min-height:44px; padding:8px; color:#e0edf1; text-align:left; font:inherit; background:linear-gradient(145deg,#112938,#091822); border:1px solid var(--eq-edge); border-radius:3px; cursor:pointer; } .station-open #stationPanel.science-console #stPaneShop .eq-cell:hover { border-color:#85bacb; background:#173345; } .station-open #stationPanel.science-console #stPaneShop .eq-cell[aria-pressed=true] { border-color:#efbc63; box-shadow:inset 0 0 0 1px #efbc63; } .station-open #stationPanel.science-console #stPaneShop .eq-cell-art { position:relative; display:flex; align-items:center; justify-content:center; min-height:96px; margin-bottom:5px; --item-icon-size:96px; } .station-open #stationPanel.science-console #stPaneShop .item-icon { max-width:100%; } .station-open #stationPanel.science-console #stPaneShop .eq-tier { position:absolute; right:0; top:0; width:6px; height:6px; border-radius:50%; } .station-open #stationPanel.science-console #stPaneShop .eq-cell-name { overflow-wrap:anywhere; font-size:12px; line-height:1.35; } .station-open #stationPanel.science-console #stPaneShop .eq-cell-status { margin-top:auto; padding-top:5px; color:#9cd6e7; font-size:12px; overflow-wrap:anywhere; } .station-open #stationPanel.science-console #stPaneShop .eq-cell[aria-pressed=true] .eq-cell-status { color:#efbc63; } .station-open #stationPanel.science-console #stPaneShop .eq-hold header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; margin-bottom:10px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold h3 { font-size:14px; letter-spacing:.07em; } .station-open #stationPanel.science-console #stPaneShop .eq-capacity { color:var(--eq-muted); font-size:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold .eq-cell { position:relative; padding:5px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold .eq-cell-art { --item-icon-size:64px; min-height:64px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold .eq-cell-name { font-size:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-empty-slot { display:grid; place-items:center; min-height:96px; color:#547184; background:repeating-linear-gradient(135deg,#0a1b27 0 4px,#0c1e29 4px 5px); border:1px solid #263f50; border-radius:3px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold-empty { color:var(--eq-muted); padding-top:8px; } .station-open #stationPanel.science-console #stPaneShop .eq-eyebrow { color:var(--eq-muted); letter-spacing:.12em; margin-bottom:5px; } .station-open #stationPanel.science-console #stPaneShop .eq-title { font-size:20px; line-height:1.3; overflow-wrap:anywhere; margin-bottom:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-hero { height:224px; display:flex; align-items:center; justify-content:center; --item-icon-size:192px; background:radial-gradient(ellipse,#18364b,#081722 75%); border:1px solid var(--eq-edge); border-radius:3px; margin-bottom:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-description { font-size:13px; line-height:1.55; color:#b4cbd7; overflow-wrap:anywhere; } .station-open #stationPanel.science-console #stPaneShop .eq-stats { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:12px 0; border:1px solid var(--eq-edge); } .station-open #stationPanel.science-console #stPaneShop .eq-stats:empty { display:none; } .station-open #stationPanel.science-console #stPaneShop .eq-stats :is(dt,dd) { padding:6px 8px; margin:0; border-bottom:1px solid #203b4b; overflow-wrap:anywhere; } .station-open #stationPanel.science-console #stPaneShop .eq-stats dt { color:var(--eq-muted); } .station-open #stationPanel.science-console #stPaneShop .eq-stats dd { text-align:right; } .station-open #stationPanel.science-console #stPaneShop .eq-purchase { border-top:1px solid var(--eq-edge); padding-top:12px; margin-top:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-status { color:var(--eq-muted); margin-bottom:10px; overflow-wrap:anywhere; } .station-open #stationPanel.science-console #stPaneShop .eq-buy { width:100%; min-height:48px; padding:10px; color:#e0f7ff; background:#173e50; border:1px solid #67bdcc; font:600 14px/1.4 ui-monospace,Consolas,monospace; white-space:normal; } .station-open #stationPanel.science-console #stPaneShop .eq-buy:disabled { opacity:.65; cursor:default; } /* Продаж із трюму: степер кількості та бурштинова кнопка, щоб не сплутати з BUY. */ .station-open #stationPanel.science-console #stPaneShop .eq-sell { display:grid; gap:8px; } .station-open #stationPanel.science-console #stPaneShop .eq-qty { display:grid; grid-template-columns:44px minmax(44px,1fr) 44px auto; gap:6px; align-items:stretch; } .station-open #stationPanel.science-console #stPaneShop .eq-qty button { min-height:44px; padding:0 10px; color:#e0f7ff; background:#132a38; border:1px solid #3d6f80; font:600 15px/1 ui-monospace,Consolas,monospace; } .station-open #stationPanel.science-console #stPaneShop .eq-qty button:disabled { opacity:.45; cursor:default; } .station-open #stationPanel.science-console #stPaneShop .eq-qty-value { display:grid; place-items:center; border:1px solid var(--eq-edge); color:#e0f7ff; font:600 15px/1 ui-monospace,Consolas,monospace; } .station-open #stationPanel.science-console #stPaneShop .eq-sell-btn { width:100%; min-height:48px; padding:10px; color:#fff1d6; background:#4a3014; border:1px solid #d79a3c; font:600 14px/1.4 ui-monospace,Consolas,monospace; white-space:normal; } .station-open #stationPanel.science-console #stPaneShop .eq-sell-btn.eq-sell-armed { color:#1d1204; background:#e0a440; border-color:#ffc266; box-shadow:0 0 0 2px rgba(255,194,102,.35); } .station-open #stationPanel.science-console #stPaneShop button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .station-open #stationPanel.science-console #stPaneShop .eq-cell:active { border-color:#85bacb; background:#173345; } .station-open #stationPanel.science-console #stPaneShop button:focus-visible { outline:2px solid #ffe0a0; outline-offset:2px; } .station-open #stationPanel.science-console #stPaneShop :is(.eq-tabs,.eq-details-close) { display:none; } @media(min-width:1100px) and (min-height:601px) { .station-open #stationPanel.science-console[data-science-screen=shop] > .panel-body { overflow:hidden; display:flex; } .station-open #stationPanel.science-console #stPaneShop { flex:1; min-height:0; } } @media(min-width:600px) and (max-width:1099px) and (min-height:601px) { .station-open #stationPanel.science-console #stPaneShop .eq-workspace { grid-template-columns:minmax(0,55fr) minmax(0,45fr); grid-template-rows:auto auto; height:auto; } .station-open #stationPanel.science-console #stPaneShop .eq-hold { grid-column:1/-1; grid-row:2; } .station-open #stationPanel.science-console #stPaneShop .eq-details { grid-row:1; } .station-open #stationPanel.science-console #stPaneShop :is(.eq-catalog,.eq-hold,.eq-details) { overflow:visible; } .station-open #stationPanel.science-console #stPaneShop .eq-grid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); } .station-open #stationPanel.science-console #stPaneShop .eq-hero { height:170px; --item-icon-size:144px; } } @media(max-width:599px),(max-height:600px) { .station-open #stationPanel.science-console[data-science-screen=shop] { border-width:8px; border-image-width:8px; width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); } .station-open #stationPanel.science-console[data-science-screen=shop] > .panel-header { padding:4px 8px; min-height:44px; } .station-open #stationPanel.science-console[data-science-screen=shop] .station-heading > span:last-child { font-size:13px; } .station-open #stationPanel.science-console[data-science-screen=shop] > .science-readout { font-size:12px; padding:4px 8px; } .station-open #stationPanel.science-console[data-science-screen=shop] > .science-service-heading { padding:4px 8px; font-size:13px; } .station-open #stationPanel.science-console #stPaneShop .eq-tabs { position:sticky; top:0; z-index:2; display:flex; gap:6px; padding:6px 8px; background:#0c1b25; border-bottom:1px solid var(--eq-edge); } .station-open #stationPanel.science-console #stPaneShop .eq-tabs button { flex:1; min-height:44px; font:600 13px monospace; color:#b6d5df; background:#112a39; border:1px solid var(--eq-edge); } .station-open #stationPanel.science-console #stPaneShop .eq-tabs [aria-pressed=true] { border-color:#efbc63; color:#ffe0a0; } .station-open #stationPanel.science-console #stPaneShop .eq-workspace { display:block; height:auto; } .station-open #stationPanel.science-console #stPaneShop :is(.eq-catalog,.eq-hold) { padding:10px 8px; overflow:visible; } .station-open #stationPanel.science-console #stPaneShop[data-eq-tab=shop] .eq-hold,.station-open #stationPanel.science-console #stPaneShop[data-eq-tab=hold] .eq-catalog { display:none; } .station-open #stationPanel.science-console #stPaneShop .eq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .station-open #stationPanel.science-console #stPaneShop .eq-hold-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .station-open #stationPanel.science-console #stPaneShop .eq-details { display:none; } /* Картка товару — у потоці панелі замість каталогу (fixed-шар у скролері ламає тапи в iOS Safari); шапка станції з ✕ лишається доступною, прокручується лише тіло картки. */ .station-open #stationPanel.science-console[data-science-screen=shop].eq-sheet-open > .panel-body { display:flex; flex-direction:column; overflow:hidden; } .station-open #stationPanel.science-console[data-science-screen=shop].eq-sheet-open > .science-navigation { display:none; } .station-open #stationPanel.science-console #stPaneShop.eq-detail-open { flex:1; min-height:0; display:flex; flex-direction:column; } .station-open #stationPanel.science-console #stPaneShop.eq-detail-open :is(.eq-tabs,.eq-catalog,.eq-hold) { display:none; } .station-open #stationPanel.science-console #stPaneShop.eq-detail-open .eq-workspace { flex:1; min-height:0; display:flex; flex-direction:column; } .station-open #stationPanel.science-console #stPaneShop.eq-detail-open .eq-details { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 10px; padding-bottom:max(8px,env(safe-area-inset-bottom)); background:#091a27; border:0; overflow:hidden; } .station-open #stationPanel.science-console #stPaneShop .eq-details-close { display:block; flex:none; align-self:flex-start; min-height:44px; padding:8px 12px; margin-bottom:8px; color:#e0edf1; background:#122d3e; border:1px solid var(--eq-edge); font:12px monospace; } .station-open #stationPanel.science-console #stPaneShop .eq-detail-body { flex:1; min-height:0; overflow:auto; padding:2px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; } .station-open #stationPanel.science-console #stPaneShop .eq-title { font-size:18px; } .station-open #stationPanel.science-console #stPaneShop .eq-hero { height:160px; --item-icon-size:144px; } .station-open #stationPanel.science-console #stPaneShop .eq-purchase { flex:none; margin-top:8px; padding-top:8px; } .station-open #stationPanel.science-console #stPaneShop .eq-status { margin-bottom:6px; } } @media(min-width:360px) and (max-width:599px) { .station-open #stationPanel.science-console #stPaneShop .eq-hold-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(min-width:480px) and (max-width:599px), (min-width:600px) and (max-height:600px) { .station-open #stationPanel.science-console #stPaneShop .eq-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(min-width:600px) and (max-height:600px) { .station-open #stationPanel.science-console #stPaneShop .eq-hold-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } } @media(max-height:450px) { .station-open #stationPanel.science-console #stPaneShop .eq-detail-body { display:grid; grid-template-columns:112px minmax(0,1fr); align-content:start; column-gap:12px; } .station-open #stationPanel.science-console #stPaneShop .eq-hero { grid-column:1; grid-row:1/5; height:112px; --item-icon-size:96px; margin:0; } .station-open #stationPanel.science-console #stPaneShop :is(.eq-eyebrow,.eq-title,.eq-description,.eq-stats) { grid-column:2; } .station-open #stationPanel.science-console[data-science-screen=shop] > .science-readout { display:none; } .station-open #stationPanel.science-console[data-science-screen=shop].eq-sheet-open > .science-service-heading { display:none; } /* Низький ландшафт: степер і SELL в один рядок, щоб футер не з'їдав картку. */ .station-open #stationPanel.science-console #stPaneShop .eq-sell { grid-template-columns:auto minmax(0,1fr); } .station-open #stationPanel.science-console #stPaneShop .eq-qty { grid-template-columns:44px 40px 44px auto; } .station-open #stationPanel.science-console #stPaneShop .eq-sell-btn { min-height:44px; padding:6px 10px; } .station-open #stationPanel.science-console #stPaneShop .eq-status { margin-bottom:6px; } } @media(prefers-reduced-motion:reduce) { .station-open #stationPanel.science-console #stPaneShop * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } } #tradeStationPanel .cr-checks li.cr-rep-hint { padding:6px 8px; color:#b8cdcf; font:12px/1.45 sans-serif; background:#0f1d22cc; border-left:2px solid var(--cr-teal); }