/* MONUMENT — the page's stylesheet: it shares nothing with index.html's module scope. */ /* iOS Safari auto-inflates text it mistakes for body copy, silently overriding font-size — kill it */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --topbar: 45px; } html, body { height: 100%; overflow: hidden; background: #000; } body { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #5ad0ff; } #stage { position: fixed; inset: 0; touch-action: none; } #stage canvas { display: block; } #topBar { position: fixed; left: 0; right: 0; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: calc(var(--topbar) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; background: rgba(2, 6, 16, .55); border-bottom: 1px solid rgba(12,200,255,.25); font-size: 12px; letter-spacing: .18em; color: #2f8fc4; pointer-events: none; } body:not(.topbar) { --topbar: 0px; } body:not(.topbar) #topBar { display: none; } #topBar b { color: #5ad0ff; font-weight: 600; } #topLeft { flex: none; white-space: nowrap; } #topRight { flex: 1 1 auto; min-width: 0; margin-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } #hudKeys { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; } body:not(.desk) #hudKeys { display: none; } @media (max-width: 900px) { #hudKeys { display: none; } } #compass { position: fixed; left: 50%; top: calc(var(--topbar) + 6px + env(safe-area-inset-top, 0px)); z-index: 14; transform: translateX(-50%); width: 320px; height: 20px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); } #compassStrip { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; } #compassStrip span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; line-height: 20px; color: #5ad0ff; text-shadow: 0 0 10px rgba(90,208,255,.8); white-space: nowrap; } #compassStrip span.card { color: #fff; font-weight: 600; } #compassStrip i { position: absolute; top: 15px; width: 1px; height: 4px; background: rgba(90,208,255,.6); } #compass::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); } body.paused #compass { display: none; } body.sp .mp { display: none; } /* the single-player game (net.multiplayer off): every multiplayer element */ body:not(.sp) .spo { display: none; } /* a single-player element's multiplayer side: its .mp twin shows instead */ #marks, #questMarks { position: fixed; inset: 0; pointer-events: none; } /* THE WORLD-PINNED HUD's layers (the marks over the world, the lock ring; the objective's marker under the quest list): clipped to the cockpit's windows in first person (ui/cockpit-clip.js) */ #marks { z-index: 30; } #questMarks { z-index: 9; } /* THE QUESTS' MARKERS (quests.js): a diamond over each selected objective on screen; a main quest's gold (--qHue: anchors.beacon.hue, the beacon's), a death pile's the skull's pink (death-piles.js PILE_PINK), a side quest's and the waypoint's cyan; --objD: hud.objective.size */ :root { --qHue: 45; --objD: 41px; } .objMark, .qlRow { --qc: #0cc8ff; --qg: rgba(12,200,255,.95); --qt: #5ad0ff; } .objMark.main, .qlRow.main { --qc: hsl(var(--qHue) 100% 60%); --qg: hsl(var(--qHue) 100% 60% / .95); --qt: hsl(var(--qHue) 100% 70%); } .objMark.pile, .qlRow.pile { --qc: #ff4fa8; --qg: rgba(255,79,168,.95); --qt: #ff8cc6; } .objMark { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; --d: var(--objD); --w: calc(var(--d) / 12); } .objMark[hidden] { display: none; } .objMark i { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); box-sizing: border-box; transform: translate(-50%, -50%) rotate(45deg); border: var(--w) solid var(--qc); box-shadow: inset 0 0 calc(var(--d) * .22 + 2px) color-mix(in srgb, var(--qc) 40%, transparent); filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 10px var(--qg)); animation: objPulse 1.6s ease-in-out infinite; } .objMark span { position: absolute; left: 0; top: calc(var(--d) * .8 + 4px); transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; color: var(--qt); text-shadow: 0 0 8px var(--qg); white-space: nowrap; } .objMark b { position: absolute; left: 0; top: calc(var(--d) * .8 + 4px); transform: translateX(-50%); font-size: 11px; line-height: 16px; white-space: pre; text-align: center; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px #000, 0 0 10px var(--qg); } .objMark b[hidden] { display: none; } .objMark.named span { top: calc(var(--d) * .8 + 4px + var(--nl, 1) * 16px); } @keyframes objPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } #minimap { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 16px) + 12px); border-radius: 50%; pointer-events: none; filter: drop-shadow(0 0 8px rgba(12,200,255,.35)); } body:not(.desk) #minimap { right: auto; bottom: auto; left: calc(16px + env(safe-area-inset-left, 0px)); top: calc(var(--topbar) + 16px + env(safe-area-inset-top, 0px)); width: 132px !important; height: 132px !important; } body.paused #questMarks, body.cutscene #questMarks, body.dialog #questMarks, body.paused #questList, body.cutscene #questList, body.dialog #questList, body.paused #minimap, body.cutscene #minimap, body.dialog #minimap, body.lobby #minimap:not(.foot) { display: none; } /* (on foot it shows: minimap.js's .foot) */ /* THE COCKPIT VIEW (ships/cockpit-view.js): in first person the cockpit's screens carry the map and the altitude */ body.cockpit-view #minimap { display: none; } body.cockpit-view #hudAlt { visibility: hidden; } body.cockpit-view #aimRing { visibility: hidden; } /* in first person the sight is #ctrRet on the nose (index.html noseHud, THE SIGHT); the aim it steers by is not drawn */ #hudRight { display: flex; flex: none; gap: 14px; align-items: baseline; margin-left: 16px; white-space: nowrap; } #hudCoin { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 16px); width: 76px; height: 76px; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 200, 80, .5)); } #hudCoin svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; } #hudCoin text { font: 700 10px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 2.6px; stroke-linejoin: round; } #hudCoin .starPt { fill: rgba(70, 52, 8, .55); stroke: url(#coinGrad); stroke-width: 1.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; transition: fill .14s ease-out; } #hudCoin .starPt.on { fill: url(#coinGrad); } #hudCoin .starPt.pop { animation: ptPop .42s ease-out; } @keyframes ptPop { 0% { transform: scale(1); } 38% { transform: scale(1.4); filter: brightness(2.2) drop-shadow(0 0 6px rgba(255, 230, 140, 1)); } 100% { transform: scale(1); } } #hudCoin.full { animation: starFull 2.6s ease-in-out infinite; } @keyframes starFull { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 200, 80, .5)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 14px rgba(255, 225, 130, .95)) brightness(1.25); } } #hudCoin.flash svg { animation: starFlash .45s ease-out; } @keyframes starFlash { 0% { transform: scale(1); filter: none; } 28% { transform: scale(1.28); filter: brightness(2.6) drop-shadow(0 0 12px rgba(255, 225, 130, 1)); } 100% { transform: scale(1); filter: none; } } body:not(.desk) #hudCoin { right: calc(16px + 92px + 12px + env(safe-area-inset-right, 0px)); top: 70px; } body:not(.desk).chat #hudCoin { right: calc(16px + 48px + 12px + env(safe-area-inset-right, 0px)); top: calc(40px + env(safe-area-inset-top, 0px)); } #hudXp { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 100px); display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 5px; border-radius: 11px; background: rgba(2, 6, 16, .6); border: 1px solid rgba(12, 200, 255, .35); pointer-events: none; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(12, 200, 255, .3)); } #hudXp .xpRank { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5ad0ff; color: #06202e; font: 700 10px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; } #hudXp .xpN { color: #dffaff; font: 700 12px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; } #hudXp .xpU { color: #4fb6df; font: 700 9px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .14em; } #hudXp.gain { animation: xpGain .7s ease-out; } /* THE XP BAR under the badge (xp.js): the rank's share, a scaleX eased by the module (hud.xp.fillS); a rank up flashes it and the badge in the XP blue (.up) while the rank's number rolls over inside its chip */ #hudXp .xpRank { overflow: hidden; } #hudXp .xpRank b { display: inline-block; font: inherit; } #hudXp .xpBar { position: absolute; left: 9px; right: 9px; bottom: -6px; height: 3px; border-radius: 2px; background: rgba(2, 6, 16, .7); box-shadow: 0 0 0 1px rgba(12, 200, 255, .22); overflow: hidden; } #hudXp .xpBar > i { position: absolute; inset: 0; display: block; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #2aa8e0, #8fe4ff); will-change: transform; } #hudXp.up { animation: xpUp .55s ease-out; } #hudXp.up .xpBar > i { animation: xpBarUp .55s ease-out; } @keyframes xpUp { 0% { border-color: rgba(190, 245, 255, 1); box-shadow: 0 0 22px rgba(90, 208, 255, .95); } 100% { border-color: rgba(12, 200, 255, .35); box-shadow: none; } } @keyframes xpBarUp { 0% { background: #fff; box-shadow: 0 0 10px #8fe4ff; } 100% { background: linear-gradient(90deg, #2aa8e0, #8fe4ff); box-shadow: none; } } /* THE UPPER LEFT (#hudLeft, one column): the quest list. The pilot count and the status line stand under the tallest stack (#pilotCount, #status) */ #hudLeft { position: fixed; z-index: 11; left: calc(16px + env(safe-area-inset-left, 0px)); top: calc(var(--topbar) + 16px); width: 400px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } #questList[hidden] { display: none; } /* THE QUEST LIST (quests.js): the selected quests in the upper left, a row each: its pip in its kind's color, its name, and under it its progress or next step; a row that joins slides in and pulses (--qlSlide, --qlFlash, --qlFlashes: hud.quests.slideS, .flashS, .flashes) */ #questList { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .qlRow { display: grid; grid-template-columns: 14px auto; align-items: baseline; column-gap: 6px; max-width: 100%; padding: 3px 9px 4px 7px; border-radius: 3px; background: rgba(2, 6, 16, .45); text-shadow: 0 0 8px rgba(2, 6, 16, .9); } .qlRow b { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qlRow .qlLine { grid-column: 2; margin-top: 2px; font-size: 11px; line-height: 1.35; letter-spacing: .08em; color: var(--qt); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .qlRow .qlLine[hidden] { display: none; } .qlPip { width: 7px; height: 7px; justify-self: center; align-self: center; box-sizing: border-box; border: 2px solid var(--qc); transform: rotate(45deg); filter: drop-shadow(0 0 4px var(--qg)); } .qlRow.new { animation: qlIn var(--qlSlide) cubic-bezier(.2, .8, .3, 1) both, qlFlash var(--qlFlash) ease-in-out var(--qlSlide) var(--qlFlashes); } @keyframes qlIn { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes qlFlash { 0%, 100% { background: rgba(2, 6, 16, .45); box-shadow: none; } 50% { background: color-mix(in srgb, var(--qc) 38%, rgba(2, 6, 16, .45)); box-shadow: 0 0 14px var(--qg); } } @keyframes xpGain { 0% { border-color: rgba(150, 240, 255, .95); box-shadow: 0 0 18px rgba(90, 208, 255, .8); } 100% { border-color: rgba(12, 200, 255, .35); box-shadow: none; } } body:not(.desk) #hudXp { right: calc(16px + 92px + 12px + env(safe-area-inset-right, 0px)); top: 154px; } body:not(.desk) #hudLeft { left: calc(16px + 132px + 12px + env(safe-area-inset-left, 0px)); width: min(400px, 30vw); } /* (right of the touch screen's minimap) */ body:not(.desk).chat #hudXp { right: calc(16px + 48px + 12px + env(safe-area-inset-right, 0px)); top: calc(124px + env(safe-area-inset-top, 0px)); } #hudStackL, #hudStackR { position: fixed; top: calc(var(--topbar) + 16px); z-index: 14; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } #hudStackL { left: 16px; align-items: flex-start; } #perfHud { position: fixed; right: 16px; top: calc(var(--topbar) + 42px); z-index: 13; pointer-events: auto; cursor: pointer; /* a tap turns the page */ padding: 8px 12px; background: rgba(2, 6, 16, .6); border: 1px solid rgba(12,200,255,.25); border-radius: 8px; font: 12px/1.7 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: #2f8fc4; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; width: calc(46ch + 2.76em + 26px); max-width: calc(100vw - 56px); max-height: calc(100vh - var(--topbar) - 58px); overflow-y: auto; /* a fixed column: 46 columns, their letter spacing, the padding and the border (border-box) */ } #perfHud .pr { padding-left: calc(9ch + .54em); text-indent: calc(-9ch - .54em); } /* a wrapped row continues under its value (the label's 9 columns) */ #perfHud b { color: #5ad0ff; font-weight: 600; } #perfHud b.fR { color: #ff5a7a; } #perfHud b.fY { color: #ffd166; } #perfHud b.fB { color: #5ad0ff; } #perfHud b.fG { color: #6dff9e; } #hudStackR { right: 16px; align-items: flex-end; } .hudMeter { display: flex; gap: 3px; padding: 5px 8px; background: rgba(2, 6, 16, .55); border: 1px solid rgba(12,200,255,.25); border-radius: 10px; transition: opacity .25s ease-out; } .hudMeter.fade { opacity: 0; } .hudMeter[hidden] { display: none; } .hudMeter.deny { animation: denyPulse .18s ease-in-out 3; } @keyframes denyPulse { 50% { border-color: rgba(12,200,255,.95); box-shadow: 0 0 14px rgba(12,200,255,.65); } } .hudBarMeter { width: 340px; padding: 5px 8px; background: rgba(2, 6, 16, .55); border: 1px solid rgba(12,200,255,.25); border-radius: 10px; transition: opacity .25s ease-out; } .hudBarMeter.fade { opacity: 0; } .hudBarMeter[hidden] { display: none; } .hudBarMeter > b { display: block; height: 6px; width: 0%; border-radius: 3px; transition: width .12s linear; background-image: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 70%), linear-gradient(90deg, rgba(12,200,255,.45), #5ad0ff 65%, #c9f2ff); background-size: 200% 100%, 100% 100%; animation: meterSheen 1.9s linear infinite; box-shadow: 0 0 8px rgba(90,208,255,.6); } .hudBarMeter { position: relative; transition: opacity .25s ease-out, width .3s ease; } .hudBarMeter.pill { width: 34px; } .hudBarMeter.pink { border-color: rgba(255,90,160,.45); } .hudBarMeter .lbl b { color: #fff; font-weight: 600; } .hudBarMeter .lbl .chg { color: #5ad0ff; text-shadow: 0 0 10px rgba(90,208,255,.8); } .hudBarMeter .lbl { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 10px; letter-spacing: .2em; color: #ffb3d2; text-shadow: 0 0 10px rgba(255,90,160,.8); } .hudBarMeter > b.pulse { animation: boostPulse .7s ease-in-out infinite; } @keyframes boostPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } } .hudBarMeter > b.burn { background-image: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%), linear-gradient(90deg, rgba(255,90,160,.4), #ff5aa0 60%, #ffd0e4); box-shadow: 0 0 14px rgba(255,90,160,.95), 0 0 30px rgba(255,90,160,.5); animation-direction: reverse; } @keyframes meterSheen { 0% { background-position: 200% 0, 0 0; } 100% { background-position: -100% 0, 0 0; } } .hudMeter i { width: 10px; height: 6px; border-radius: 3px; background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.7); } .hudMeter i.off { background: rgba(12,200,255,.13); box-shadow: none; } .hudMeter i.flash { animation: pillFlash .5s linear infinite; } @keyframes pillFlash { 0%, 100% { background: rgba(12,200,255,.13); box-shadow: none; } 50% { background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.7); } } #topLeft .ttl { height: 26px; margin-right: 12px; vertical-align: middle; } #status { position: fixed; left: 16px; top: calc(var(--topbar) + 126px); z-index: 10; font-size: 11px; letter-spacing: .18em; color: #2f8fc4; text-align: left; line-height: 1.7; } #status b { color: #5ad0ff; font-weight: 600; } #status { overflow-wrap: anywhere; } @media (min-width: 900px) { body:not(.chat) #status { max-width: calc(33.333vw - 16px); } } #pilots { margin-top: 4px; } #pilotCount { position: fixed; left: 16px; top: calc(var(--topbar) + 102px); z-index: 14; font-size: 11px; letter-spacing: .18em; color: #2f8fc4; pointer-events: none; } #pilotCount b { color: #5ad0ff; } #pauseTag { font-size: 11px; letter-spacing: .3em; color: #5ad0ff; text-shadow: 0 0 12px rgba(90,208,255,.8); white-space: nowrap; pointer-events: none; text-indent: 0; } body:not(.desk) #pauseTag { display: none; } #pauseTag b { color: #fff; font-weight: 600; } #pilots.clip { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 96px), transparent 100%); } #hitch { margin: 6px 0 0; font: 10px/1.5 ui-monospace, Menlo, monospace; letter-spacing: 0; color: #ff9ab0; white-space: pre-wrap; max-width: 60vw; text-align: left; } #pilots span { display: block; cursor: pointer; } #pilots span.me::after { content: ' ◀'; } /* THE PAUSE SCREEN (pause.js): full screen, opaque, over every HUD layer; its tab bar, then the shown tab's pane */ #pauseScreen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #02060f; color: #62b8ea; padding: calc(14px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); box-sizing: border-box; font-size: 12px; letter-spacing: .18em; } #pauseScreen[hidden] { display: none; } #pauseScreen .psBar { display: flex; align-items: center; gap: 18px; flex: none; padding-bottom: 12px; border-bottom: 1px solid rgba(12,200,255,.3); margin-bottom: 16px; } #pauseScreen .psTabs { display: flex; gap: 0; } #pauseScreen .psTabs button { padding: 8px 26px; border: 1px solid rgba(12,200,255,.7); background: rgba(2, 6, 16, .6); color: rgba(138,224,255,.75); font: inherit; font-size: 12px; letter-spacing: .34em; text-indent: .34em; cursor: pointer; -webkit-tap-highlight-color: transparent; } #pauseScreen .psTabs button:first-child { border-radius: 18px 0 0 18px; } #pauseScreen .psTabs button:last-child { border-radius: 0 18px 18px 0; } #pauseScreen .psTabs button + button { border-left: none; } #pauseScreen .psTabs button.on { color: #fff; background: rgba(12,200,255,.22); text-shadow: 0 0 10px rgba(90,208,255,.8); } #pauseScreen .psTabs button:not(.on):hover { color: #fff; } #pauseTag { flex: 1; text-align: right; font-size: 11px; color: #62b8ea; } #pauseTag[hidden] { display: block; visibility: hidden; } body:not(.desk) #pauseTag { visibility: hidden; } #pauseScreen .psClose { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(12,200,255,.7); background: rgba(12,200,255,.12); color: #8ae0ff; font: inherit; font-size: 18px; letter-spacing: 0; cursor: pointer; } #pauseScreen .psClose:hover { color: #fff; background: rgba(12,200,255,.25); } #pauseScreen .psPane { display: none; flex: 1; min-height: 0; } body.tab-map #pauseScreen .psPane[data-pane="map"] { display: grid; grid-template-columns: minmax(300px, 30%) 1fr; gap: 24px; } body.tab-inventory #pauseScreen .psPane[data-pane="inventory"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 10px 28px; overflow-y: auto; overscroll-behavior: contain; } body.tab-items #pauseScreen .psPane[data-pane="items"] { display: grid; grid-template-columns: minmax(300px, 36%) 1fr; gap: 28px; } body.tab-settings #pauseScreen .psPane[data-pane="settings"] { display: flex; } #pausePanel { flex-direction: column; align-items: stretch; gap: 14px; overflow-y: auto; overscroll-behavior: contain; max-width: 980px; padding-bottom: 12px; color: #2f8fc4; } #questLog, #invItems, #invShips { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; } #pauseScreen .sub { align-self: flex-start; font-size: 13px; letter-spacing: .34em; color: #fff; text-shadow: 0 0 10px rgba(90,208,255,.6); margin: 18px 0 6px; } #pauseScreen .sub:first-child { margin-top: 2px; } #pauseScreen b { color: #8ae0ff; font-weight: 600; } #pauseScreen .lbl b.hi, #pauseScreen b.hi { color: #fff; } #pauseScreen .srow { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; width: 100%; } #pauseScreen .lbl { color: #62b8ea; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-align: left; } #pauseScreen .pill { height: 32px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.7); border-radius: 16px; font: inherit; font-size: 11px; letter-spacing: .2em; background: rgba(12,200,255,.12); color: #8ae0ff; cursor: pointer; -webkit-tap-highlight-color: transparent; } #pauseScreen .pill:hover { background: rgba(12,200,255,.22); color: #fff; } /* THE MAP (pause-map.js) */ #mapBox { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; } #mapView { flex: 1; position: relative; min-height: 0; border: 1px solid rgba(12,200,255,.4); border-radius: 10px; overflow: hidden; background: #02060f; } #mapView canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #pauseMap { cursor: crosshair; touch-action: none; } #mapGlobe { transition: opacity .6s ease-out; } #mapView.loading #mapGlobe { opacity: 0; transition: none; } #mapInfo { flex: none; font-size: 11px; color: #8ae0ff; min-height: 30px; display: flex; align-items: center; gap: 10px; } #mapInfo .pill { height: 26px; padding: 0 12px; } #teleportAsk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 16, .6); border-radius: 10px; } #teleportAsk[hidden] { display: none; } #teleportAsk .taBox { padding: 22px 28px; border: 1px solid rgba(12,200,255,.7); border-radius: 14px; background: #02060f; box-shadow: 0 0 24px rgba(12,200,255,.35); display: flex; flex-direction: column; gap: 18px; align-items: center; } #teleportAsk .taQ { color: #fff; font-size: 13px; letter-spacing: .14em; } #teleportAsk .taBtns { display: flex; gap: 14px; } /* THE ITEMS (pause-items.js) */ .invGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .invItem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid rgba(12,200,255,.4); border-radius: 10px; background: rgba(12,200,255,.06); color: #8ae0ff; font: inherit; font-size: 11px; letter-spacing: .12em; text-align: left; cursor: pointer; } .invItem .ico { font-size: 22px; letter-spacing: 0; } .invItem .nm { color: #fff; } .invItem .tag { font-size: 10px; color: #62b8ea; letter-spacing: .2em; display: flex; gap: 8px; align-items: baseline; min-height: 12px; } .invItem .tag .md { font-size: 12px; letter-spacing: .1em; color: #8ae0ff; font-variant-emoji: text; } .invItem.on, .invItem:hover { border-color: #0cc8ff; background: rgba(12,200,255,.16); } /* THE INVENTORY (pause-inventory.js): a column a group, the picked line across them */ .invCol { display: flex; flex-direction: column; gap: 10px; min-width: 0; } #invGear .invWhat { grid-column: 1 / -1; } .invItem.eq { border-color: #0cc8ff; box-shadow: 0 0 12px rgba(12,200,255,.35); } .invItem.eq .tag { color: #fff; text-shadow: 0 0 8px rgba(90,208,255,.9); } #invGear .invItem .ico { font-variant-emoji: text; } .invWhat { margin-top: 8px; padding: 12px; border-top: 1px solid rgba(12,200,255,.25); color: #8ae0ff; font-size: 11px; line-height: 1.6; letter-spacing: .08em; } .invShips { display: flex; gap: 12px; flex-wrap: wrap; } .invShip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 200px; padding: 12px 16px; border: 1px solid rgba(12,200,255,.4); border-left: 4px solid var(--c); border-radius: 10px; background: rgba(12,200,255,.06); font: inherit; text-align: left; cursor: pointer; } .invShip.on { border-color: #0cc8ff; border-left-color: var(--c); background: rgba(12,200,255,.14); } .invShip .shNm { color: #fff; font-size: 16px; letter-spacing: .3em; } .invShip .shRole { color: #62b8ea; font-size: 10px; letter-spacing: .1em; } .invShip .shTeam { color: var(--c); font-size: 11px; letter-spacing: .3em; } #invShips .upgHead { display: flex; align-items: baseline; gap: 16px; } #invShips .bal { color: #8ec9e8; } #invShips .bal b { color: #ffd94d; } .upgTree { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; } .upgBranch { flex: 1; min-width: 170px; display: flex; flex-direction: column; align-items: stretch; } .upgCat { color: #5ad0ff; font-size: 11px; letter-spacing: .3em; text-align: center; margin-bottom: 8px; } .upgCat .ico { display: block; font-size: 22px; letter-spacing: 0; margin-bottom: 4px; } .upgLink { align-self: center; width: 2px; height: 14px; background: rgba(90,208,255,.25); } .upgLink.on { background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.8); } .upgNode { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 8px 10px; border: 1px solid rgba(12,200,255,.3); border-radius: 10px; font-size: 11px; letter-spacing: .08em; } .upgNode .lv { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(90,208,255,.5); color: #8ae0ff; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0; } .upgNode .fx { color: #8ec9e8; } .upgNode .cost { color: #ffd94d; font-size: 10px; letter-spacing: .16em; } .upgNode.owned { background: rgba(12,200,255,.12); border-color: rgba(12,200,255,.6); } .upgNode.owned .fx { color: #fff; } .upgNode.owned .cost { color: #5ad0ff; } .upgNode.owned .lv { background: #5ad0ff; color: #02060f; border-color: #5ad0ff; } .upgNode.buyable { border-color: rgba(255,217,77,.6); cursor: pointer; } .upgNode.buyable:hover, .upgNode.buyable.sel { background: rgba(255,217,77,.14); border-color: #ffd94d; } .upgNode.unaffordable, .upgNode.locked { opacity: .4; } #invShips .upgFoot { display: flex; align-items: center; gap: 16px; margin-top: 12px; min-height: 34px; } #invShips .upgFoot .prev { flex: 1; color: #8ec9e8; line-height: 1.5; font-size: 11px; letter-spacing: .08em; } #invShips .upgFoot .prev b { color: #ffd94d; } #invShips .buy { border-color: rgba(255,217,77,.6); color: #ffd94d; } #invShips .buy:disabled { opacity: .35; cursor: default; } /* a narrow screen: each tab's columns stack, the map first */ @media (max-width: 760px) { body.tab-map #pauseScreen .psPane[data-pane="map"], body.tab-inventory #pauseScreen .psPane[data-pane="inventory"], body.tab-items #pauseScreen .psPane[data-pane="items"] { display: flex; flex-direction: column; overflow-y: auto; } #mapBox { order: -1; flex: none; height: 62vh; } #questLog, #invItems, #invShips { overflow: visible; flex: none; } #pauseScreen .psTabs button { padding: 8px 14px; letter-spacing: .2em; text-indent: .2em; } } #pausePanel b { color: #5ad0ff; font-weight: 600; } #pausePanel .lbl b.hi { color: #fff; } #hudHelp { text-align: center; line-height: 1.8; letter-spacing: .12em; } #pausePanel .srow { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; width: 100%; } #pausePanel .srow[hidden] { display: none; } #pausePanel .lbl { color: #2f8fc4; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-align: left; } #pausePanel .grp { display: inline-flex; justify-self: end; border: 1px solid rgba(12,200,255,.5); border-radius: 18px; overflow: hidden; white-space: nowrap; } #pausePanel .grp button { padding: 7px 14px; border: none; background: none; color: rgba(90,208,255,.6); font: inherit; font-size: 11px; letter-spacing: .2em; cursor: pointer; -webkit-tap-highlight-color: transparent; } #pausePanel .grp button + button { border-left: 1px solid rgba(12,200,255,.35); } #pausePanel .grp button.on { color: #fff; background: rgba(12,200,255,.18); } #pausePanel #micBtn { justify-self: end; } #pausePanel .div { width: 100%; height: 1px; background: rgba(12,200,255,.25); margin: 2px 0; } #pausePanel .srow.sl { grid-template-columns: max-content 1fr; } #pausePanel .srow.sl .lbl { text-align: right; min-width: 150px; } #pausePanel input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: none; margin: 0; outline: none; } #pausePanel input[type=range]::-webkit-slider-runnable-track { height: 1px; background: rgba(12,200,255,.5); border: none; } #pausePanel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%; border: none; background: #0cc8ff; box-shadow: 0 0 8px rgba(12,200,255,.9); cursor: pointer; } #pausePanel input[type=range]::-moz-range-track { height: 1px; background: rgba(12,200,255,.5); border: none; } #pausePanel input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: none; background: #0cc8ff; box-shadow: 0 0 8px rgba(12,200,255,.9); cursor: pointer; } #pausePanel .sld::after { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 9px; pointer-events: none; background-image: linear-gradient(to right, rgba(12,200,255,.28) 0, rgba(12,200,255,.28) 3px, transparent 3px), linear-gradient(to right, rgba(12,200,255,.28) 0, rgba(12,200,255,.28) 3px, transparent 3px); background-size: calc((100% - 3px) / 6) 100%, 3px 100%; background-position: 0 0, right 0; background-repeat: repeat-x, no-repeat; } #pausePanel .sld { position: relative; display: block; width: 100%; padding-top: 10px; } #pausePanel .sld::before { content: ''; position: absolute; left: calc(6px + (100% - 12px) * var(--def, 0.5) - 1.5px); top: 0; width: 3px; height: 9px; border-radius: 1.5px; background: #fff; box-shadow: 0 0 8px rgba(90,208,255,1), 0 0 2px #fff; } /* --def is the default detent's fraction, set per slider in the markup */ body.paused #stick, body.paused #walkStick, body.paused #walkJump, body.paused #padBtns, body.paused #btnThrust, body.paused #btnBoost, body.paused #btnBail, body.paused #boostSlot, body.paused #wingfaces, body:not(.desk).chat #stick, body:not(.desk).chat #walkStick, body:not(.desk).chat #walkJump, body:not(.desk).chat #padBtns, body:not(.desk).chat #btnThrust, body:not(.desk).chat #btnBoost, body:not(.desk).chat #boostSlot, body:not(.desk).chat #wingfaces { display: none !important; } body.paused #ctrRet, body.paused #hitX, body.paused #ctrChev, body.paused #aimRing, body.paused #reticle, body.paused #aimReticle, body.paused #objRet, body.paused #lockRing, body.paused .ringRead, body.paused .ringDia, body.paused .retTag { visibility: hidden; } body.chat #status { z-index: 16; top: calc(70px + env(safe-area-inset-top, 0px)); bottom: calc(var(--footer-lift, 0px) + 12px); width: min(30vw, 420px); min-width: 220px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid rgba(12,200,255,.25); padding-right: 12px; box-sizing: border-box; } body.chat #pilots { max-height: none !important; } body.chat #pilots.clip { overflow: visible; -webkit-mask-image: none; mask-image: none; } @media (max-width: 760px) and (pointer: fine) { body.chat #status { width: 34vw; } } #pausePanel .srow .grp { justify-self: start; } #pausePanel .chanBox { display: inline-flex; align-items: center; gap: 14px; justify-self: start; } #pausePanel .chanLbl { transform: translateY(-7px); width: 70px; flex: none; } #pausePanel .srow.chan { padding-top: 5px; } #pausePanel .srow.chan .lbl { transform: translateY(-7px); } #chanRow { display: inline-flex; gap: 7px; align-items: flex-start; margin-left: -3px; } #chanRow .chanDot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 26px; padding: 0; overflow: visible; background: none; border: 0; cursor: pointer; color: #2f8fc4; font: inherit; } #chanRow .chanDot i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.25); box-sizing: border-box; transition: transform .12s, box-shadow .12s; } #chanRow .chanDot:hover i { transform: scale(1.12); } #chanRow .chanDot.neutral { cursor: default; } #chanRow .chanDot.neutral:not(.on) { display: none; } /* (NEUTRAL: shown only while it is mine, never picked) */ #chanRow .chanDot.neutral:hover i { transform: none; } #chanRow .chanDot.on i { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 12px var(--c); transform: scale(1.18); } #chanRow .chanDot b { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; visibility: hidden; height: 11px; line-height: 11px; padding-top: 1px; white-space: nowrap; } #chanRow .chanDot.on b { visibility: visible; } @media (pointer: coarse) and (orientation: portrait) { #chanRow { display: inline-grid; grid-template-columns: repeat(6, 26px); gap: 2px 7px; } } #pausePanel #micBtn { justify-self: start; } #pausePanel .srow.sl { grid-template-columns: minmax(180px, 320px) 1fr; } #pausePanel .srow.sl .lbl { text-align: left; min-width: 0; } #pausePanel .idg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 28px; width: 100%; align-items: center; } #pausePanel .idg .srow { width: auto; } #pausePanel .srow.id { grid-template-columns: 70px 1fr; } #pausePanel .k { color: #2f8fc4; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } #pausePanel .fld, #pausePanel .pill { width: 240px; max-width: 100%; height: 34px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 17px; font: inherit; font-size: 11px; letter-spacing: .2em; } #pausePanel .fld { width: 100%; min-width: 0; background: rgba(2, 6, 16, .5); color: #fff; outline: none; text-transform: uppercase; } #pausePanel .fld:focus { border-color: #0cc8ff; box-shadow: 0 0 10px rgba(12,200,255,.4); } #pausePanel .pill { background: rgba(12,200,255,.12); color: #5ad0ff; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; } #pausePanel .pill:hover { background: rgba(12,200,255,.22); color: #fff; } #pausePanel .adv[hidden], #pausePanel #hudHelp[hidden] { display: none; } #questLog .sub:first-child { margin-top: 4px; } #questLog .qrow { grid-template-columns: 130px 1fr auto; } #questLog .qst { justify-self: start; padding: 5px 12px; border: 1px solid rgba(12,200,255,.35); border-radius: 14px; font-size: 10px; letter-spacing: .2em; color: rgba(90,208,255,.5); white-space: nowrap; } #questLog .qst.open, #questLog .qst.found { color: #5ad0ff; border-color: rgba(12,200,255,.7); } #questLog .qst.in-progress { color: #fff; border-color: #0cc8ff; background: rgba(12,200,255,.18); } #questLog .qst.done, #questLog .qst.delivered { color: #fff36b; border-color: rgba(255,243,107,.6); } #questLog .qecho { width: auto; height: 28px; justify-self: start; } #questLog .qtrack { width: auto; height: 28px; padding: 0 14px; justify-self: end; } #questLog .qtrack.on { color: #fff; border-color: #0cc8ff; background: rgba(12,200,255,.18); } #questLog .qtrack.main.on { border-color: hsl(var(--qHue) 100% 60%); background: hsl(var(--qHue) 100% 60% / .18); } #questLog .qbrief { margin-top: -6px; } #questLog .qfly { grid-column: 1 / -1; letter-spacing: .2em; } #questLog .arow { grid-template-columns: 1fr auto 96px; } #questLog .arow .qst { justify-self: end; } #questLog .qst.st-ally { color: #fff; border-color: #0cc8ff; background: rgba(12,200,255,.18); } #questLog .qst.st-war { color: #ff4f9a; border-color: rgba(255,79,154,.75); background: rgba(255,79,154,.14); } #questLog .stbar { justify-self: end; width: 84px; height: 6px; border: 1px solid rgba(12,200,255,.45); border-radius: 3px; overflow: hidden; } #questLog .stbar i { display: block; height: 100%; background: #0cc8ff; box-shadow: 0 0 6px rgba(12,200,255,.6); } #questLog .stbar.mid i { background: #fff36b; box-shadow: 0 0 6px rgba(255,243,107,.6); } #questLog .stbar.low { border-color: rgba(255,79,154,.6); } #questLog .stbar.low i { background: #ff4f9a; box-shadow: 0 0 6px rgba(255,79,154,.6); } #questLog .qbrief .lbl { color: rgba(90,208,255,.7); } @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) { body.chat #status { top: calc(78px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: auto; min-width: 0; border-right: none; padding-right: 0; } #pausePanel .idg { grid-template-columns: 1fr; } #pausePanel .idg > #micBtn, #pausePanel .idg > .srow:has(#micBtn) { order: -1; } #pausePanel .srow, #pausePanel .srow.sl { grid-template-columns: 1fr; gap: 6px; } #pausePanel .srow.id { grid-template-columns: 70px 1fr; gap: 14px; } #pausePanel .srow.sl .sld { max-width: 320px; } } @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) { body.chat #status { right: calc(min(60vw, 440px) + 16px); bottom: 12px; } } body.chat #status, body.chat #pilotCount, #pausePanel, #pausePanel .lbl, #pausePanel .k { color: #62b8ea; } body.chat #status b, body.chat #pilotCount b, #pausePanel b, #pausePanel .pill { color: #8ae0ff; } #pausePanel .grp button { color: rgba(138,224,255,.75); } #pausePanel .grp, #pausePanel .fld, #pausePanel .pill { border-color: rgba(12,200,255,.7); } #pausePanel .grp button + button { border-left-color: rgba(12,200,255,.45); } #pausePanel .div { background: rgba(12,200,255,.4); } #pausePanel input[type=range]::-webkit-slider-runnable-track { background: rgba(12,200,255,.7); } #pausePanel input[type=range]::-moz-range-track { background: rgba(12,200,255,.7); } #pausePanel .sld::after { background-image: linear-gradient(to right, rgba(12,200,255,.4) 0, rgba(12,200,255,.4) 3px, transparent 3px), linear-gradient(to right, rgba(12,200,255,.4) 0, rgba(12,200,255,.4) 3px, transparent 3px); } body.chat #pilots span i { opacity: .7; } #hudBtns { display: flex; flex: none; gap: 10px; } #micBtn { padding: 7px 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 18px; background: rgba(0, 10, 20, .45); color: #5ad0ff; font: inherit; font-size: 12px; letter-spacing: .3em; text-shadow: 0 0 12px rgba(90,208,255,.8); -webkit-tap-highlight-color: transparent; cursor: pointer; } #micBtn.on { border-color: #ff5a7a; color: #fff; box-shadow: 0 0 18px rgba(255,90,122,.5); } #term { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; transform: translateY(110%); transition: transform .18s ease-out; background: rgba(2, 6, 16, .82); border-top: 1px solid rgba(12,200,255,.4); padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; max-height: 60vh; display: flex; flex-direction: column; } #term > #termHint, #term > #termLine { flex: 0 0 auto; } #term > #termOut { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #termOut::-webkit-scrollbar { width: 8px; } #termOut::-webkit-scrollbar-thumb { background: rgba(12,200,255,.35); border-radius: 4px; } #termOut::-webkit-scrollbar-track { background: transparent; } #term.open { transform: translateY(0); } #termToast { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; pointer-events: none; transform: translateY(110%); transition: transform .18s ease-out; background: rgba(2, 6, 16, .82); border-top: 1px solid rgba(12,200,255,.4); padding: 6px 14px calc(8px + env(safe-area-inset-bottom, 0px)); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #2f8fc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #termToast.show { transform: translateY(0); } #termToast b { color: #5ad0ff; font-weight: 600; } #termOut { color: #2f8fc4; white-space: pre-wrap; min-height: 0; } #termHint { color: #2f8fc4; opacity: .75; margin-bottom: 2px; } #termHint b { color: #5ad0ff; font-weight: 600; } #termOut b { color: #5ad0ff; font-weight: 600; } #termLine { display: flex; gap: 8px; align-items: baseline; } #termLine::before { content: '>'; color: #0cc8ff; } #termIn { flex: 1; background: none; border: none; outline: none; color: #d5f2ff; font: inherit; caret-color: #0cc8ff; min-width: 0; } /* phones: a smaller font makes iOS Safari zoom the page when the field takes focus */ @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) { #termIn { font-size: 16px; } } @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) { #term { left: auto; top: 0; bottom: 0; width: min(60vw, 440px); transform: translateX(110%); border-top: none; border-left: 1px solid rgba(12,200,255,.4); padding: calc(8px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px 14px; display: flex; flex-direction: column; } #term.open { transform: translateX(0); } #termHint { flex: 0 0 auto; } #termOut { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #termLine { flex: 0 0 auto; } } #pilots span i { font-style: normal; opacity: .55; } #pilots span i.say { opacity: 1; color: #d5f2ff; letter-spacing: .04em; text-shadow: 0 0 10px rgba(0,0,0,.9); transition: opacity .45s linear; display: inline; white-space: normal; } #ctrRet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; z-index: 10; pointer-events: none; opacity: 1; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); } body.mousefly, body.mousefly * { cursor: none !important; } #aimRing { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; border: 1.5px solid #0cc8ff; border-radius: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); } #aimRing::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; background: #0cc8ff; border-radius: 50%; } #hitX { position: fixed; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); z-index: 31; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 4px rgba(255,40,80,.9)); } #hitX::before, #hitX::after { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 100%; margin-left: -0.75px; background: #ff2850; } #hitX::before { transform: rotate(45deg); } #hitX::after { transform: rotate(-45deg); } #hitX.on { animation: hitX .35s ease-out forwards; } @keyframes hitX { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } } #ctrRet::before, #ctrRet::after { content: ''; position: absolute; } #ctrRet::after { background: #0cc8ff; } #ctrRet::before { left: 0; top: calc(50% - 8px); width: 100%; height: 8px; background: linear-gradient(#0cc8ff, #0cc8ff) no-repeat 9px 0 / 1.5px 100%, linear-gradient(#0cc8ff, #0cc8ff) no-repeat 19.5px 0 / 1.5px 100%; } #ctrRet::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); -webkit-mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); } #ctrChev { position: fixed; width: 10.5px; height: 5.25px; z-index: 10; pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); } #ctrChev::before, #ctrChev::after { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 7.45px; background: #0cc8ff; transform-origin: top center; margin-left: -0.75px; } #ctrChev::before { transform: rotate(45deg); } #ctrChev::after { transform: rotate(-45deg); } #reticle { position: fixed; width: 26px; height: 26px; z-index: 9; pointer-events: none; border: 2px solid #0cc8ff; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 14px rgba(12,200,255,.8), inset 0 0 10px rgba(12,200,255,.35); } #objRet { position: fixed; width: 30px; height: 30px; z-index: 9; pointer-events: none; border: 2px solid #b46bff; box-shadow: 0 0 14px rgba(180,107,255,.8), inset 0 0 10px rgba(180,107,255,.35); transform: translate(-50%, -50%) rotate(45deg); -webkit-mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg); mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg); } .retTag.obj { color: #b46bff; } /* THE STANCE over the reticle (reticles.js showStance over the aim reticle in flight, index.html pickTag over the aim ring on foot): the faction's name and my stance toward the craft or the NPC, `VOOK · ENEMY`, standing above the mark (its bottom at the mark's top); an ally the HUD's cyan, an enemy the hunt's red (the lock ring's foe), a neutral white */ .retTag.stance { transform: translate(-50%, -100%); font-size: 10px; letter-spacing: .2em; font-weight: 600; color: rgba(255,255,255,.85); } .retTag.stance.st-ally { color: #0cc8ff; } .retTag.stance.st-war { color: #ff2f3d; text-shadow: 0 0 8px rgba(255,47,61,.6), 0 0 8px rgba(0,0,0,.8); } body.paused #aimStance, body.paused #footStance, body.cutscene #aimStance, body.cutscene #footStance, body.dialog #footStance, body.receive #footStance, body.script #footStance, body.dying #footStance, body.booting #footStance { visibility: hidden; } /* THE EJECT METER (index.html bailFill): a small ring under the screen's middle filling over the bail's hold; on foot it stands with its hint while X would collapse or deploy the canopy (THE CHUTE'S KEY) */ #bailMeter { position: fixed; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; } #bailMeter[hidden] { display: none; } #bailMeter svg { width: 34px; height: 34px; transform: rotate(-90deg); overflow: visible; } #bailMeter circle { fill: none; stroke-width: 3; } #bailMeter .bg { stroke: rgba(255,255,255,.22); } #bailMeter .k { stroke: rgba(255,90,176,1); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 0)); filter: drop-shadow(0 0 4px rgba(255,90,176,.9)); } #bailMeter b { font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .22em; color: rgba(255,255,255,.85); } #bailMeter b { white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.7); } #bailMeter b i { font-style: normal; color: #ff5ab0; } /* (THE CHUTE'S KEY: the key named in the hint) */ body.paused #bailMeter, body.cutscene #bailMeter, body.dialog #bailMeter, body.receive #bailMeter, body.script #bailMeter, body.dying #bailMeter { visibility: hidden; } #lockRing { position: fixed; z-index: 8; pointer-events: none; border-radius: 50%; border: 1.5px solid rgba(12,200,255,.3); transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(12,200,255,.16), inset 0 0 10px rgba(12,200,255,.06); opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s; } #lockRing.on { opacity: 1; visibility: visible; transition: opacity .4s ease-out; } #lockRing.foe { border-color: rgba(255,47,61,.3); box-shadow: 0 0 14px rgba(255,47,61,.18), inset 0 0 12px rgba(255,47,61,.07); } #lockRing.tun { border-color: rgba(255,210,63,.3); box-shadow: 0 0 14px rgba(255,210,63,.18), inset 0 0 12px rgba(255,210,63,.07); } #lockRing.bare #infoArcs { opacity: 0; } #lockArcs { position: absolute; left: -25px; top: -25px; width: calc(100% + 50px); height: calc(100% + 50px); overflow: visible; } #infoArcs { opacity: 1; transition: opacity .4s ease-out; } #lockArcs path { fill: none; stroke-width: 2; stroke-linecap: butt; } #arcBg { stroke: rgba(12,200,255,.28); } #arcTicks { stroke: rgba(12,200,255,.85); stroke-width: 1.5; } #arcBoost { stroke: #0cc8ff; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); } #lockRing.boostReady #arcBoost, #lockRing.boostOn #arcBoost { stroke: #ff5ab0; filter: drop-shadow(0 0 4px rgba(255,90,176,.9)); } #lockRing.boostReady #arcBoost { animation: arcReady .5s ease-in-out infinite; } @keyframes arcReady { 50% { stroke: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); } } #arcAmmo { stroke: #0cc8ff; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); } #powerupArcs path { stroke: #32e6c4; filter: drop-shadow(0 0 4px rgba(50,230,196,.8)); } #arcAmmoLow { stroke: #0cc8ff; animation: arcLow .45s ease-in-out infinite; } #arcAmmo path, #arcAmmoLow path { stroke-dasharray: 1 2; transition: stroke-dasharray .35s ease-out; } /* a fill a clip, a dash along it eased to each change, as THE VITALS' */ #arcAmmoDeny { stroke: #ff5ab0; filter: drop-shadow(0 0 4px rgba(255,90,176,.9)); animation: arcDeny .3s ease-in-out infinite; } @keyframes arcDeny { 50% { opacity: .15; } } /* THE VITALS (reticles.js): health red on top, the hull shields blue on the bottom; a track and its end ticks under each fill, the fill a dash along its arc eased to each change, a regeneration's point linearly over its interval (--fillS, --fillEase: health.js pace, landing-pads.js hpPaceS); at full brightness whole or hurt */ #vitHp { --vc: #ff4060; --vg: rgba(255,64,96,.9); } #vitSh { --vc: #3d9bff; --vg: rgba(61,155,255,.9); } #lockArcs .vTrack { stroke: var(--vc); stroke-opacity: .4; stroke-width: 1.5; } #lockArcs .vFills path { stroke: var(--vc); filter: drop-shadow(0 0 4px var(--vg)); stroke-dasharray: 1 2; transition: stroke-dasharray var(--fillS, .35s) var(--fillEase, ease-out); } @keyframes arcLow { 50% { opacity: .15; } } .ringRead { position: fixed; pointer-events: none; font-size: 11px; letter-spacing: .1em; white-space: nowrap; color: #fff; background: rgba(2, 6, 16, .3); padding: 2px 7px 3px; border-radius: 999px; text-shadow: 0 0 6px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s; } #spdRead { transform: translate(-100%, -50%); } #altRead { transform: translate(0, -50%); } #altRead.regen { color: #0cc8ff; text-shadow: 0 0 6px rgba(12,200,255,.8), 0 1px 2px rgba(0,0,0,.7); } /* REGENERATING in the altitude's place (reticles.js): the ammo's hue */ .ringRead.on { opacity: 1; visibility: visible; transition: opacity .4s ease-out; } #hudStackL, #hudStackR { display: none; } /* THE BEARING CHEVRONS (reticles.js): a half diamond, the V of a square's top and right edges clipped to its upper-right triangle, its apex (the square's corner) pointing out from the ring's center along the mark's bearing: --a its angle (degrees, screen y down; the corner lies at -45deg, so the turn is --a + 45deg) and --d its size (px by range, diaSize); the stroke and the glow derive from --d (the glow a drop shadow: it follows the V, not the box) */ .ringDia { position: fixed; --d: 9px; --a: -90deg; --gc: #ffffff; width: var(--d); height: var(--d); border-style: solid; border-color: var(--gc); border-width: calc(var(--d) / 12 + 0.75px) calc(var(--d) / 12 + 0.75px) 0 0; z-index: 9; pointer-events: none; transform: translate(-50%, -50%) rotate(calc(var(--a) + 45deg)); background: none; clip-path: polygon(-30% -30%, 130% -30%, 130% 130%); filter: drop-shadow(0 0 calc(var(--d) * .25 + 2px) color-mix(in srgb, var(--gc) 80%, transparent)); } .ringDia.ship { --gc: #ffffff; } .ringDia.quest { --gc: #0cc8ff; } /* (a quest's objective: reticles.js THE QUESTS' CHEVRONS) */ .ringDia.quest.main { --gc: hsl(var(--qHue) 100% 60%); } .ringDia.quest.pile { --gc: #ff4fa8; } /* (a death pile's: the skull's pink, death-piles.js PILE_PINK) */ .ringDia.foe { --gc: #ff2f3d; background: rgba(255,47,61,.55); animation: foePip .4s steps(1, end) infinite; } /* (the fill is the clipped triangle, the half diamond solid) */ @keyframes foePip { 0%, 100% { background: rgba(255,47,61,.95); } 50% { background: rgba(255,47,61,.1); } } #aimReticle { position: fixed; width: 30px; height: 30px; z-index: 9; pointer-events: none; border: 2px solid #0cc8ff; box-shadow: 0 0 14px rgba(12,200,255,.8), inset 0 0 10px rgba(12,200,255,.35); transform: translate(-50%, -50%) rotate(45deg); -webkit-mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg); mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg); } #aimReticle.link { border-color: #ff3cc8; box-shadow: 0 0 16px rgba(255,60,200,.85), 0 0 34px rgba(12,200,255,.45), inset 0 0 10px rgba(255,60,200,.35); } .retTag.link { color: #ff3cc8; } #aimReticle.relic { border-color: #3cff8c; box-shadow: 0 0 16px rgba(60,255,140,.9), 0 0 34px rgba(60,255,140,.35), inset 0 0 10px rgba(60,255,140,.35); } .retTag.relic { color: #3cff8c; } #towHint { letter-spacing: .14em; } #towHint b { color: #fff; font-weight: 600; } #term b.cur { color: #fff; } #termOut .tree { white-space: normal; } #termOut .tree .kids { padding-left: 1.4em; } #termOut .tree summary { cursor: pointer; } #termOut .tree summary::marker { color: #5ad0ff; } #termOut .opt, #termOut .num { cursor: pointer; text-decoration: underline dotted rgba(90,208,255,.6); text-underline-offset: 2px; } #termOut .opt:hover, #termOut .num:hover { color: #d5f2ff; } #termOut .cmd { color: #9aa4b2; } #pauseNote { position: fixed; left: 50%; top: 18%; z-index: 12; transform: translate(-50%, 0); pointer-events: none; font-size: 13px; letter-spacing: .18em; text-align: center; color: #fff; background: rgba(2, 6, 16, .7); border: 1px solid rgba(255,60,200,.6); border-radius: 10px; padding: 10px 18px; box-shadow: 0 0 24px rgba(255,60,200,.35); } #pauseNote b { color: #ff3cc8; font-weight: 600; display: block; letter-spacing: .08em; margin-bottom: 4px; } #impNote { position: fixed; left: 50%; top: 8%; z-index: 12; transform: translate(-50%, 0); pointer-events: none; font-size: 12px; letter-spacing: .16em; text-align: center; color: #fff; background: rgba(2, 6, 16, .7); border: 1px solid rgba(12,200,255,.6); border-radius: 10px; padding: 8px 16px; box-shadow: 0 0 24px rgba(12,200,255,.3); } #impNote b { color: #0cc8ff; font-weight: 600; } #impNote span { display: block; font-size: 10px; margin-top: 4px; opacity: .75; letter-spacing: .1em; } /* THE SCENE RECORDER's mark (debug/recorder.js): up while a take runs, over glam's veil too */ #recMark { position: fixed; right: 16px; top: 40px; z-index: 12; pointer-events: none; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #ff3cc8; text-shadow: 0 0 8px rgba(255,60,200,.7); } #recMark::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #ff3cc8; box-shadow: 0 0 8px #ff3cc8; vertical-align: 1px; animation: recBlink 1s steps(2, start) infinite; } @keyframes recBlink { to { visibility: hidden; } } #recMark[hidden] { display: none; } /* THE REPLAY (debug/replay.js): no cursor over the picture */ body.replay, body.replay * { cursor: none !important; } #fade { position: fixed; inset: 0; z-index: 58; background: #000; opacity: 0; pointer-events: none; transition: opacity 1s linear; } #fade.on { opacity: 1; } #fade[hidden] { display: none; } /* YOU DIED (player/pilot-death.js): the talk's box (#dlg .dlgBox) centered over the drained picture, CONTINUE the boot's main button; .on fades it in */ #death { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box; background: radial-gradient(ellipse at center, rgba(2,6,16,.2), rgba(2,6,16,.6)); opacity: 0; transition: opacity .9s ease-out; -webkit-user-select: none; user-select: none; touch-action: none; } #death.on { opacity: 1; } #death[hidden] { display: none; } #death .deathBox { display: flex; flex-direction: column; align-items: center; gap: 26px; box-sizing: border-box; width: min(440px, 100%); padding: 34px 24px 30px; background: rgba(2, 6, 16, .9); border: 2px solid #0cc8ff; border-radius: 14px; box-shadow: 0 0 22px rgba(12,200,255,.35), inset 0 0 28px rgba(12,200,255,.08); } #death .deathTitle { font: 700 clamp(26px, 7vw, 40px)/1 -apple-system, system-ui, sans-serif; letter-spacing: .32em; text-indent: .32em; color: #eaf8ff; text-shadow: 0 0 14px rgba(90,208,255,.55); } #death button { box-sizing: border-box; min-width: min(60vw, 230px); height: 56px; padding: 0 28px; border-radius: 28px; border: 1px solid rgba(12,200,255,.5); cursor: pointer; -webkit-tap-highlight-color: transparent; font: 600 clamp(13px, 3.4vw, 17px)/1 -apple-system, system-ui, sans-serif; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #5ad0ff; background: rgba(12,200,255,.12); text-shadow: 0 0 10px rgba(12,200,255,.6); transition: color .15s, border-color .15s, box-shadow .15s; } #death button:hover, #death button:focus-visible { color: #fff; border-color: #0cc8ff; box-shadow: 0 0 14px rgba(12,200,255,.5); outline: none; } /* GLAM (/glam): every overlay transparent but the stage, the terminal, the pause screen, the fade and the boot; opacity, so the touch controls still take a finger */ body.glam > :not(#stage, #term, #pauseScreen, #fade, #bootSky, #boot, #recMark) { opacity: 0 !important; } body.cutscene #stick, body.cutscene #walkStick, body.cutscene #walkJump, body.cutscene #padBtns, body.cutscene #btnThrust, body.cutscene #btnBoost, body.cutscene #btnBail, body.cutscene #boostSlot, body.cutscene #wingfaces, body.cutscene #hudCoin, body.cutscene #hudXp, body.cutscene #compass, body.cutscene #status { display: none !important; } body.cutscene #ctrRet, body.cutscene #hitX, body.cutscene #ctrChev, body.cutscene #reticle, body.cutscene #aimReticle, body.cutscene #aimRing, body.cutscene #objRet, body.cutscene #lockRing, body.cutscene .ringRead, body.cutscene .ringDia, body.cutscene #boostHint, body.cutscene #chaseHint, body.cutscene #towHint, body.cutscene #reticleTag, body.cutscene #aimTag, body.cutscene #objTag, body.cutscene #warn { visibility: hidden; } #lobbyTag { transform: none; z-index: 12; color: #fff; border: 1px solid rgba(12,200,255,.5); } #lobbyTag b { color: #0cc8ff; font-weight: 600; } #lobbyTag b.talkName { display: block; color: #fff; font-size: 14px; letter-spacing: .2em; text-shadow: 0 0 8px rgba(12,200,255,.8); } /* THE TALK'S TAG (index.html talkTag): who, over the verb */ #lobbyTag .talkVerb { display: block; margin-top: 3px; color: #0cc8ff; font-size: 10px; letter-spacing: .16em; } #lobbyTag b.team0 { color: var(--team0); } #lobbyTag b.team1 { color: var(--team1); } #lobbyTag b.team2 { color: var(--team2); } #lobbyTag b.team3 { color: var(--team3); } body.lobby #stick, body.lobby #padBtns, body.lobby #btnThrust, body.lobby #btnBoost, body.lobby #btnBail, body.lobby #boostSlot, body.lobby #wingfaces { display: none !important; } /* (the XP badge stays: always present in play, on foot and seated too) */ body.lobby #ctrRet, body.lobby #ctrChev, body.lobby #reticle, body.lobby #aimReticle, body.lobby #objRet, body.lobby .ringRead, body.lobby .ringDia:not(.quest), body.lobby #boostHint, body.lobby #chaseHint, body.lobby #towHint, body.lobby #reticleTag, body.lobby #aimTag, body.lobby #aimStance, body.lobby #objTag { visibility: hidden; } /* dialog-ui.js writes --dlgW and --dlgText (the hud.dialog leaves) on open */ #echo { position: fixed; inset: 0; z-index: 44; background: #000; animation: echoIn .8s ease-out; } #echo[hidden] { display: none; } #echo img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes echoIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #echo { animation: none; } } /* THE IN-WORLD CURSOR (ui/world-cursor.js): the game's own, drawn inside the surface it uses (a console's page, a talk's box) */ .world-cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 60; } .world-cursor[hidden] { display: none; } .world-cursor::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 8px rgba(170, 225, 255, 0.9), inset 0 0 4px rgba(170, 225, 255, 0.6); } #dlg { position: fixed; inset: 0; z-index: 45; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; background: linear-gradient(to top, rgba(2,6,16,.55), rgba(2,6,16,0) 38%); } #dlg[hidden] { display: none; } #dlg .dlgBox { position: absolute; left: 50%; bottom: calc(var(--footer-h, 16px) + 14px); transform: translateX(-50%); box-sizing: border-box; width: min(var(--dlgW, 760px), calc(100vw - 32px)); min-height: calc(var(--dlgText, 20px) * 4.6); padding: calc(var(--dlgText, 20px) * 1.1) calc(var(--dlgText, 20px) * 1.3) calc(var(--dlgText, 20px) * 1.2); background: rgba(2, 6, 16, .9); border: 2px solid #0cc8ff; border-radius: 14px; box-shadow: 0 0 22px rgba(12,200,255,.35), inset 0 0 28px rgba(12,200,255,.08); color: #eaf8ff; font-size: var(--dlgText, 20px); line-height: 1.5; letter-spacing: .02em; text-shadow: 0 0 6px rgba(90,208,255,.35); animation: dlgIn .22s ease-out; } #dlg .dlgName { position: absolute; left: calc(var(--dlgText, 20px) * 1.1); top: 0; transform: translateY(-60%); padding: .22em .9em .18em; border-radius: 8px; background: #0cc8ff; color: #020610; font-size: calc(var(--dlgText, 20px) * .72); font-weight: 700; letter-spacing: .28em; text-shadow: none; box-shadow: 0 0 14px rgba(12,200,255,.6); } #dlg .dlgBox[data-speaker="pilot"] { border-color: var(--me, #ffffff); box-shadow: 0 0 22px color-mix(in srgb, var(--me, #ffffff) 32%, transparent), inset 0 0 28px color-mix(in srgb, var(--me, #ffffff) 7%, transparent); } #dlg .dlgBox[data-speaker="pilot"] .dlgName { background: var(--me, #ffffff); box-shadow: 0 0 14px color-mix(in srgb, var(--me, #ffffff) 60%, transparent); } #dlg .dlgRest { visibility: hidden; } /* a line's or a choice's marked runs (dialog-ui.js): bold, _emphasis_ in the text's own color, a quest's term in the quest list's hue for its kind (.qlRow's --qt: a main quest's gold, a side quest's cyan) */ #dlg .dlgEm { font-weight: 700; } #dlg .dlgMain { color: hsl(var(--qHue) 100% 70%); } #dlg .dlgSide { color: #5ad0ff; } #dlg .dlgCue { position: absolute; right: calc(var(--dlgText, 20px) * .9); bottom: calc(var(--dlgText, 20px) * .45); color: #0cc8ff; font-size: calc(var(--dlgText, 20px) * .8); animation: dlgCue .9s steps(1) infinite; } #dlg .dlgCue[hidden], #dlg .dlgChoices[hidden] { display: none; } #dlg .dlgChoices { position: absolute; right: 0; bottom: calc(100% + 14px); display: flex; flex-direction: column; gap: 4px; min-width: 9em; padding: .4em; background: rgba(2, 6, 16, .9); border: 2px solid #0cc8ff; border-radius: 14px; box-shadow: 0 0 22px rgba(12,200,255,.35); } #dlg .dlgChoice { position: relative; display: block; min-height: 44px; padding: .3em 1em .3em 1.9em; border: 1px solid transparent; border-radius: 9px; background: none; color: #9fdcf5; font: inherit; font-size: var(--dlgText, 20px); letter-spacing: .14em; text-align: left; text-transform: uppercase; cursor: pointer; } #dlg .dlgChoice.on { color: #fff; border-color: rgba(12,200,255,.75); background: rgba(12,200,255,.16); } #dlg .dlgChoice.team0 { color: var(--team0); } #dlg .dlgChoice.team1 { color: var(--team1); } #dlg .dlgChoice.team2 { color: var(--team2); } #dlg .dlgChoice.team3 { color: var(--team3); } #dlg .dlgChoice[class*=team].on { border-color: currentColor; text-shadow: 0 0 10px currentColor; } #dlg .dlgChoice.on::before { content: '▶'; position: absolute; left: .6em; top: 50%; transform: translateY(-50%); color: var(--me, #ffffff); font-size: .8em; text-shadow: 0 0 8px var(--me, #ffffff); animation: dlgNudge .7s ease-in-out infinite alternate; } /* skip-hold.js writes --k (the hold's share) as the skip hold runs */ body.receive #ctrRet, body.receive #hitX, body.receive #ctrChev, body.receive #reticle, body.receive #aimReticle, body.receive #aimRing, body.receive #objRet, body.receive #lockRing, body.receive .ringRead, body.receive .ringDia, body.receive .retTag { visibility: hidden; } /* THE RECEIVE MOMENT (story/receive.js): the aim's marks hidden while it plays */ body.script #ctrRet, body.script #hitX, body.script #ctrChev, body.script #reticle, body.script #aimReticle, body.script #aimRing, body.script #objRet, body.script #lockRing, body.script .ringRead, body.script .ringDia, body.script .retTag { visibility: hidden; } body.dying #ctrRet, body.dying #hitX, body.dying #ctrChev, body.dying #reticle, body.dying #aimReticle, body.dying #aimRing, body.dying #objRet, body.dying #lockRing, body.dying .ringRead, body.dying .ringDia, body.dying .retTag:not(#sysHint) { visibility: hidden; } /* MY DEATH SHOWN (pilot-death.js): the aim's marks hidden, the hint kept */ #scriptSkip { position: fixed; right: 16px; bottom: calc(var(--footer-h, 16px) + 14px); z-index: 44; padding: 8px 14px; border: 1px solid rgba(12,200,255,.6); border-radius: 10px; background: linear-gradient(to right, rgba(12,200,255,.35) calc(var(--k, 0) * 100%), rgba(2,6,16,.75) calc(var(--k, 0) * 100%)); color: #bfefff; font: 600 12px/1 inherit; letter-spacing: .18em; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } #scriptSkip b { color: #fff; } #scriptSkip[hidden] { display: none; } #scriptSkip.reel { z-index: 62; } /* over the boot reel (ui/boot-reel.js) while it plays */ @keyframes dlgIn { from { opacity: 0; transform: translate(-50%, 14px); } } @keyframes dlgCue { 50% { opacity: 0; } } @keyframes dlgNudge { to { transform: translate(.18em, -50%); } } @media (prefers-reduced-motion: reduce) { #dlg .dlgBox, #dlg .dlgCue, #dlg .dlgChoice.on::before { animation: none; } } body.dialog #stick, body.dialog #walkStick, body.dialog #walkJump, body.dialog #padBtns, body.dialog #btnThrust, body.dialog #btnBoost, body.dialog #btnBail, body.dialog #boostSlot, body.dialog #wingfaces, body.dialog #hudCoin, body.dialog #hudXp, body.dialog #compass { display: none !important; } body.dialog #ctrRet, body.dialog #hitX, body.dialog #ctrChev, body.dialog #reticle, body.dialog #aimReticle, body.dialog #aimRing, body.dialog #objRet, body.dialog #lockRing, body.dialog .ringRead, body.dialog .ringDia, body.dialog .retTag { visibility: hidden; } #pauseNote span { display: block; font-size: 10px; margin-top: 4px; opacity: .8; } #pilots span i.talk { opacity: 1; color: #fff; } .retTag { position: fixed; z-index: 9; pointer-events: none; transform: translate(-50%, 0); font-size: 12px; letter-spacing: .08em; text-shadow: 0 0 8px rgba(0,0,0,.8); color: #0cc8ff; text-align: center; background: rgba(2, 6, 16, .6); border-radius: 8px; padding: 3px 10px 4px; white-space: nowrap; } .retTag .enter { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .18em; color: #fff; } /* THE WARNINGS (ui/warnings.js): red triangles and their words in one pill under the lock ring; --ws the words' size (hud.warn.size) */ .retTag.warn { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--ws, 12px) * .4); padding: 5px 11px 5px 9px; color: #ff3a48; background: rgba(16, 2, 8, .55); } .retTag.warn[hidden], .warnRow[hidden] { display: none; } .warnRow { display: flex; align-items: center; gap: calc(var(--ws, 12px) * .55); font-size: var(--ws, 12px); line-height: 1; letter-spacing: .14em; font-weight: 600; text-shadow: 0 0 6px rgba(255, 47, 61, .85), 0 1px 2px rgba(0, 0, 0, .7); } .warnRow svg { width: calc(var(--ws, 12px) * 1.45); height: calc(var(--ws, 12px) * 1.27); flex: none; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 47, 61, .9)); } .warnRow svg polygon { fill: #ff2f3d; stroke: #ff2f3d; stroke-width: 1.6; stroke-linejoin: round; } .warnRow svg rect, .warnRow svg circle { fill: #1c0207; } .warnRow.missile { animation: warnBlink .4s steps(1, end) infinite; } /* its duration the nearest missile's cadence (warnings.js) */ @keyframes warnBlink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } } .warnRow.heat.pA { animation: warnPulseA .7s ease-out; } .warnRow.heat.pB { animation: warnPulseB .7s ease-out; } /* two names, so each loss restarts the pulse */ @keyframes warnPulseA { 0% { filter: brightness(2.4); transform: scale(1.1); } 100% { filter: none; transform: none; } } @keyframes warnPulseB { 0% { filter: brightness(2.4); transform: scale(1.1); } 100% { filter: none; transform: none; } } .retTag.boost { color: #ff5ab0; transform: translate(-100%, -50%); letter-spacing: .14em; padding: 8px 13px 7px; border-radius: 999px; } .retTag.boost b { color: #fff; font-weight: 600; } #chaseHint { letter-spacing: .14em; } #chaseHint b { color: #fff; font-weight: 600; } #tabHint { transform: translate(-50%, -100%); letter-spacing: .14em; transition: opacity .6s ease-out; font-size: min(21px, 3.4vw); line-height: 1.381em; padding: .381em .952em .286em; border-radius: 999px; max-width: 94vw; white-space: nowrap; } #tabHint.out { opacity: 0; } #tabHint b { color: #fff; font-weight: 600; } #sysHint { left: 50%; bottom: calc(var(--footer-h, 16px) + var(--faces-h) + 12px + var(--footer-lift, 0px)); top: auto; transform: translateX(-50%); font-size: 14px; line-height: 20px; letter-spacing: .14em; padding: 8px 18px 6px; border-radius: 999px; transition: opacity .6s ease-out; max-width: calc(100vw - 32px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; } #sysHint.out { opacity: 0; } #sysHintTop { position: fixed; left: 50%; bottom: calc(var(--footer-h, 16px) + var(--faces-h) + 12px + var(--footer-lift, 0px) + 46px); transform: translateX(-50%); z-index: 35; pointer-events: none; transition: opacity .6s ease-out; } #sysHintTop.out { opacity: 0; } #sysHintTop[hidden], body.paused #sysHintTop, body.script #sysHintTop, body.dialog #sysHintTop, body.booting #sysHintTop { display: none; } /* THE CELEBRATION (ui/celebrate.js): a banner in the upper third by its tier (.main large and gold in the beacon's hue, --qHue; .side smaller and cyan; .small a compact pill), standing --cbS (hud.celebrate..s): its entrance and fade inside it; a soft flare over the screen at --cbFlare (hud.celebrate..flare); never a hard box. Hidden under the pause, a talk, a scene, a script and the boot (the module waits on them to start one) */ #celebrate { position: fixed; inset: 0; z-index: 34; pointer-events: none; --cbC: #5ad0ff; --cbG: rgba(12, 200, 255, .55); --cbT: #e6fbff; } #celebrate.main { --cbC: hsl(var(--qHue) 100% 62%); --cbG: hsl(var(--qHue) 100% 55% / .6); --cbT: hsl(var(--qHue) 100% 82%); } #celebrate[hidden], body.paused #celebrate, body.dialog #celebrate, body.cutscene #celebrate, body.script #celebrate, body.booting #celebrate { display: none; } #celebrate .cbFlare { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 55% at 50% 26%, var(--cbG), rgba(40, 10, 70, .25) 45%, transparent 75%); } #celebrate.on .cbFlare { animation: cbFlare var(--cbS) ease-out both; } #celebrate .cbBox { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 64px 16px; max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; white-space: nowrap; isolation: isolate; } /* its scrim: an oval twice the box, centered on it, darkest at the middle and easing to nothing at its rim ((1 - r^2)^2, so no edge reads as a line) */ #celebrate .cbBox::before { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(14, 6, 34, .62), rgba(14, 6, 34, .57) 20%, rgba(14, 6, 34, .48) 35%, rgba(14, 6, 34, .35) 50%, rgba(14, 6, 34, .21) 65%, rgba(14, 6, 34, .08) 80%, rgba(14, 6, 34, .02) 90%, rgba(14, 6, 34, 0)); } #celebrate.small .cbBox::before { display: none; } #celebrate.on .cbBox { animation: cbLife var(--cbS) linear both; } #celebrate .cbHead { display: flex; align-items: center; gap: 14px; color: var(--cbC); font-size: 13px; font-weight: 600; letter-spacing: .5em; padding-left: .5em; text-shadow: 0 0 10px var(--cbG); } #celebrate .cbHead::before, #celebrate .cbHead::after { content: ''; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--cbC)); box-shadow: 0 0 6px var(--cbG); } #celebrate .cbHead::after { background: linear-gradient(90deg, var(--cbC), transparent); } #celebrate .cbName { color: var(--cbT); font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 0 18px var(--cbG), 0 0 2px rgba(14, 6, 34, .9); } #celebrate.on .cbName { animation: cbName .9s cubic-bezier(.2, .8, .3, 1) both; } #celebrate .cbSub { color: var(--cbT); font-size: 13px; letter-spacing: .16em; opacity: .9; } #celebrate .cbSub b { color: #fff; font-weight: 600; } #celebrate .cbSub b.team0 { color: var(--team0); } #celebrate .cbSub b.team1 { color: var(--team1); } #celebrate .cbSub b.team2 { color: var(--team2); } #celebrate .cbSub b.team3 { color: var(--team3); } #celebrate .cbRew { display: flex; align-items: center; gap: 22px; margin-top: 4px; font-size: 17px; letter-spacing: .1em; } #celebrate .cbRew[hidden], #celebrate .cbRew > [hidden], #celebrate .cbSub[hidden] { display: none; } #celebrate .cbStars { display: inline-flex; align-items: center; gap: 6px; color: #ffe27a; text-shadow: 0 0 10px rgba(255, 200, 80, .7); } #celebrate .cbStars svg, #starBurst .sbStar svg { width: 1.15em; height: 1.15em; fill: url(#coinGrad); filter: drop-shadow(0 0 5px rgba(255, 200, 80, .85)); } #celebrate .cbXp { color: #8fe4ff; text-shadow: 0 0 10px rgba(90, 208, 255, .7); } #celebrate .cbXp i { font-style: normal; font-size: .7em; margin-left: 5px; letter-spacing: .16em; } #celebrate .cbStand { color: #fff; font-size: .8em; letter-spacing: .18em; animation: cbPop .4s ease-out both; } #celebrate b { font-weight: 700; } #celebrate.side .cbBox { top: 23%; padding: 14px 48px 12px; gap: 5px; } #celebrate.side .cbHead { font-size: 11px; } #celebrate.side .cbHead::before, #celebrate.side .cbHead::after { width: 40px; } #celebrate.side .cbName { font-size: 24px; } #celebrate.side .cbRew { font-size: 15px; } #celebrate.small .cbBox { top: 24%; flex-direction: row; flex-wrap: nowrap; gap: 14px; padding: 8px 20px 7px; border-radius: 999px; background: rgba(8, 4, 24, .62); box-shadow: 0 0 18px rgba(12, 200, 255, .22), inset 0 0 0 1px rgba(12, 200, 255, .35); } #celebrate.small .cbHead { font-size: 10px; letter-spacing: .3em; padding-left: 0; } #celebrate.small .cbHead::before, #celebrate.small .cbHead::after { display: none; } #celebrate.small .cbName { font-size: 15px; letter-spacing: .12em; } #celebrate.small .cbSub { display: none; } #celebrate.small .cbRew { margin-top: 0; font-size: 13px; gap: 14px; } @keyframes cbLife { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.94); } 9% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 86% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(1); } } @keyframes cbName { 0% { letter-spacing: .02em; filter: brightness(2.2); } 100% { filter: none; } } @keyframes cbFlare { 0% { opacity: 0; } 10% { opacity: var(--cbFlare); } 100% { opacity: 0; } } @keyframes cbPop { 0% { opacity: 0; transform: scale(1.4); } 100% { opacity: 1; transform: none; } } /* THE STAR BURST (ui/celebrate.js): a star each, placed by its own animation (translate, viewport pixels) from its origin out and up into the star counter */ #starBurst { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 36; pointer-events: none; } #starBurst .sbStar { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; font-size: 19px; will-change: transform, opacity; } #starBurst .sbStar[hidden] { display: none; } #starBurst .sbStar svg { display: block; width: 100%; height: 100%; } body.paused #starBurst, body.booting #starBurst { display: none; } /* THE QUICK SELECT (quick-select.js): I held, a row of squares over the reticle, the highlight pink, the equipped underlined cyan */ #quickSel { position: fixed; left: 50%; top: 50%; z-index: 35; transform: translate(-50%, -50%); display: flex; gap: 14px; pointer-events: none; } #quickSel[hidden], body.paused #quickSel, body.cutscene #quickSel, body.dialog #quickSel { display: none; } .qsSq { position: relative; width: 96px; height: 96px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(12,200,255,.45); border-radius: 12px; background: rgba(2,6,16,.66); box-shadow: inset 0 0 16px rgba(12,200,255,.12); font-size: 10px; letter-spacing: .16em; transition: transform .08s ease-out, border-color .08s, box-shadow .08s; } .qsSq .qsIco { font-size: 30px; line-height: 1; letter-spacing: 0; color: #5ad0ff; text-shadow: 0 0 10px rgba(90,208,255,.7); font-variant-emoji: text; } .qsSq .qsNm { color: #fff; text-indent: .16em; } .qsSq .qsN { position: absolute; top: 6px; left: 8px; color: #62b8ea; letter-spacing: 0; } .qsSq.eq::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 8px; height: 2px; border-radius: 1px; background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.8); } .qsSq.on { transform: scale(1.08); border-color: #ff5aa0; background: rgba(36,4,24,.72); box-shadow: 0 0 22px rgba(255,90,160,.55), inset 0 0 18px rgba(255,90,160,.22); } .qsSq.on .qsIco { color: #ffd0e4; text-shadow: 0 0 12px rgba(255,90,160,.9); } .qsSq.on .qsN { color: #ff5aa0; } #sysHint b { color: #fff; font-weight: 600; } /* --team0..3 are set on the root by index.html from sim.TEAMS, the hues' one owner */ .team0 { color: var(--team0); } .team1 { color: var(--team1); } .team2 { color: var(--team2); } .team3 { color: var(--team3); } #sysHint b.team0 { color: var(--team0); } #sysHint b.team1 { color: var(--team1); } #sysHint b.team2 { color: var(--team2); } #sysHint b.team3 { color: var(--team3); } #sysHint.team0 { color: var(--team0); } #sysHint.team1 { color: var(--team1); } #sysHint.team2 { color: var(--team2); } #sysHint.team3 { color: var(--team3); } #pilots b.chv { animation: chaseMarch .8s linear infinite; font-weight: inherit; } #pilots b.chv:nth-of-type(2) { animation-delay: .13s; } #pilots b.chv:nth-of-type(3) { animation-delay: .26s; } @keyframes chaseMarch { 0%, 100% { opacity: .25; } 30% { opacity: 1; } } /* terminal.js writes --footer-lift (the terminal/toast lift); the on-screen controls ride it */ :root { --footer-h: calc(16px + env(safe-area-inset-bottom, 0px)); } :root { --faces-h: 72px; } #wingfaces { position: fixed; left: 0; right: 0; bottom: var(--footer-h, 16px); display: flex; justify-content: center; align-items: flex-end; gap: 14px; z-index: 12; pointer-events: none; } #wingfaces[hidden] { display: none; } #wingfaces .wf { display: flex; flex-direction: column; align-items: center; width: 84px; animation: wfIn .3s ease-out; } #wingfaces .av { width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--c, #5ad0ff); background: rgba(2, 6, 16, .6) center / cover no-repeat; color: var(--c, #5ad0ff); font: 700 16px/48px -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .04em; text-align: center; overflow: hidden; box-shadow: 0 0 8px var(--c, #5ad0ff), 0 0 12px rgba(0, 0, 0, .6); transition: border-color .25s ease-out, box-shadow .25s ease-out, color .25s ease-out; } #wingfaces .cs { margin-top: 5px; max-width: 84px; font: 700 10px/14px -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .12em; color: var(--c, #5ad0ff); text-shadow: 0 0 8px rgba(0, 0, 0, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes wfIn { from { opacity: 0; transform: translateY(8px) scale(.85); } } @media (max-width: 700px) { #wingfaces { gap: 6px; } #wingfaces .wf { width: 64px; } #wingfaces .cs { max-width: 64px; } } #stick, #walkStick, #walkJump, #padBtns, #wingfaces { transform: translateY(calc(-1 * var(--footer-lift, 0px))); transition: transform .18s ease-out; } #stick, #walkStick { position: fixed; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: var(--footer-h, 46px); width: 150px; height: 150px; border-radius: 50%; z-index: 17; border: 1px solid rgba(255,255,255,0.7); background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.14) 65%, rgba(255,255,255,0.06) 100%); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #stickNub, #walkNub { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.75); pointer-events: none; } #boot { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-bottom: 40vh; box-sizing: border-box; background: rgba(2, 6, 16, .72); -webkit-user-select: none; user-select: none; touch-action: none; transition: opacity .35s ease-out; } body.booting #boot { background: transparent; } /* the boot's dialog over the title's still; the general loading screen in play keeps its veil */ /* THE TITLE'S STILL (assets/title.webp; docs/design/boot.md): under the boot dialog until the boot's go fades it with the dialog (boot-ui.js skyOut); cover, the pilot and the horizon kept on a screen of another shape */ #bootSky { position: fixed; inset: 0; z-index: 59; background: #000 url(assets/title.webp) center 72% / cover no-repeat; transition: opacity 1s ease-out; } /* THE STILL'S PILOT: the top of the pilot's helmet on the window, from the cover above (the still 2000 x 1232, placed at 72% down, the helmet's top 64.9% down the still): the still's full height on a window narrower than the still, else its width's, cropped by the 72% */ #boot { --pilot-head: min(64.9vh, calc(72vh - 4.375vw)); } #bootSky.out { opacity: 0; pointer-events: none; } #bootSky.dark { background: #000; background-image: none; } /* index.html THE OPENING'S FIRST PAINT: ?rise and ?warp */ #bootSky[hidden] { display: none; } /* THE TITLE (ui/boot-opening.js): the wordmark and the choice (or the tester gate and its line in its place); the loading screen is the dialog without .title */ #boot.title > :not(#bootLogo):not(#bootBtns):not(#bootGate) { display: none; } #boot.title:has(#bootGate:not([hidden])) > #bootMsg { display: block; } #boot.title:has(#bootGate:not([hidden])) > #bootBtns, #boot:not(.title) > #bootBtns { display: none; } /* THE HINTS (data/hints.json): centered between the bar's count (--count-y, its bottom: boot-opening.js) and the still's pilot's helmet, once the keys' art has had its time (.hints), one at a time, .on fading each in; out of the column's flow, so a hint never moves it */ #bootHint { position: absolute; left: 0; right: 0; top: calc((var(--count-y, 50vh) + var(--pilot-head)) / 2); transform: translateY(-50%); box-sizing: border-box; padding: 0 max(16px, calc(50% - 400px)); text-align: center; pointer-events: none; font: 500 clamp(13px, 1.7vw, 19px)/1.5 -apple-system, system-ui, sans-serif; letter-spacing: .08em; color: #e6f7ff; text-shadow: 0 0 12px rgba(12,200,255,.55), 0 1px 3px rgba(2,6,16,.8); opacity: 0; transition: opacity .6s ease-out; } #bootHint.on { opacity: 1; } #bootKeys { transition: opacity .6s ease-out; } #boot.hints #bootKeys { opacity: 0; } /* THE SPLASH (index.html THE OPENING'S FIRST PAINT): the studio's card on black over everything: after --wait the anvil slams down from above the window in --slam, the air it shoves out rolls away to both sides (THE AIR), PRESENTS fades in, holds --hold, the card's art fades to black over --dim, and the black fades out over --out to the title. Every move a transform or an opacity, so the compositor plays it while the boot's scripts and builds hold the main thread; .play starts it (the anvil's image decoded). The beats are Fran's (structural). */ #bootSplash { --wait: 1s; --slam: .15s; --in: .6s; --hold: 2s; --dim: .5s; --out: .5s; --land: calc(var(--wait) + var(--slam)); --say: calc(var(--land) + .25s); position: fixed; inset: 0; z-index: 63; display: flex; align-items: center; justify-content: center; background: #000; -webkit-user-select: none; user-select: none; } #bootSplash[hidden] { display: none; } #bootSplash:not(.play) > .card { visibility: hidden; } #bootSplash .card { display: flex; flex-direction: column; align-items: center; gap: 3.2vh; margin-bottom: 4vh; } #bootSplash .anvil { position: relative; width: clamp(180px, 17vw, 380px); translate: -7.3% 0; } /* its lettering (57.3% across the art) over PRESENTS */ #bootSplash .anvil img { position: relative; display: block; width: 100%; height: auto; } /* (over the air) */ #bootSplash .presents { position: relative; z-index: 1; font: 700 clamp(12px, 1.15vw, 22px)/1 -apple-system, system-ui, sans-serif; letter-spacing: .4em; text-indent: .4em; color: #fff; } #bootSplash.play .card { animation: splashOut var(--dim) ease-in-out calc(var(--say) + var(--in) + var(--hold)) both; } /* the card's art to black */ #bootSplash.play { animation: splashOut var(--out) ease-in-out calc(var(--say) + var(--in) + var(--hold) + var(--dim)) both; } /* then the black to the title */ #bootSplash.play .anvil img { animation: splashSlam var(--slam) cubic-bezier(.55, 0, 1, .6) var(--wait) both; } #bootSplash.play .presents { animation: splashIn var(--in) ease-out var(--say) both; } @keyframes splashSlam { from { transform: translateY(-100vh); } to { transform: none; } } @keyframes splashIn { from { opacity: 0; } to { opacity: 1; } } @keyframes splashOut { from { opacity: 1; } to { opacity: 0; } } /* THE AIR (assets/video/splash-wisps.mp4, tools/blender/splash-wisps.py): the air the anvil shoves out as it lands, a clip on the card's black under the anvil's art, its frame the render's (3.2 art widths centered on the art's middle, by 1.2 deep, the floor 1.1 down), so the art's base (its bottom at 97.9% of its height) stands on the clip's floor; its clock the card's (index.html); set 1.1% lower than that, by the smoke's own bottom (2.5 of the clip's 480 rows above its floor), so the smoke's bottom meets the art's; PRESENTS over the clip's black, which reaches below the art */ #bootSplash .anvil .air { position: absolute; left: -110%; top: -88%; width: 320%; aspect-ratio: 1280 / 480; pointer-events: none; } #bootSplash .anvil .air[hidden] { display: none; } /* THE BOOT REEL (ui/boot-reel.js): the opening clips over the dialog, filling the window (cover: a screen not 16:9 crops the edges); the playing clip is .on */ #bootReel { position: fixed; inset: 0; z-index: 61; background: #000; transition: opacity 1.5s ease-out; } #bootReel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; visibility: hidden; } #bootReel video.on { visibility: visible; } #bootReel.out { opacity: 0; pointer-events: none; } #bootReel[hidden] { display: none; } body.booting #ctrRet, body.booting #hitX, body.booting #ctrChev, body.booting #aimRing, body.booting #reticle, body.booting #aimReticle, body.booting #objRet, body.booting #lockRing, body.booting .ringRead, body.booting .ringDia, body.booting .retTag { visibility: hidden; } #boot.out { opacity: 0; pointer-events: none; } #boot[hidden] { display: none; } /* THE BOOT'S STAGES (index.html bootStages): the page shows only the splash, the dialog and the title's still until the relay is up (shell-ui), then the HUD, then the scene (shell-scene) */ body.shell-ui > :not(#boot):not(#bootSky):not(#bootSplash):not(#bootReel):not(#scriptSkip.reel):not(#stage):not(script) { visibility: hidden !important; } body.shell-scene > #stage { visibility: hidden; } body.kill-hud > :not(#boot):not(#bootSky):not(#bootReel):not(#stage):not(script) { visibility: hidden !important; } /* ?k: render.js THE KILL LETTERS */ /* THE WORDMARK (assets/logo.webp): its glow and shadow drawn in the art; its letters span 59% of its width, so 900px wide they stand about 530px across on a desk, and a phone crops its flares at the window's edges */ #bootLogo { width: min(147vw, 900px); height: auto; flex: none; } /* THE KEYS: the keyboard's bindings, centered in a band the height of #boot's padding-bottom under the logo, raised a quarter of its height; a touch screen has no keyboard to show */ #bootKeys { position: absolute; left: 0; right: 0; bottom: 10vh; height: 40vh; width: 100%; box-sizing: border-box; padding: 0 max(16px, calc(50% - 400px)) 4vh; object-fit: contain; pointer-events: none; } @media (pointer: coarse) { #bootKeys { display: none; } } #bootMsg { font: 600 clamp(9px, 2.6vw, 12px)/1 -apple-system, system-ui, sans-serif; letter-spacing: .3em; text-indent: .3em; color: #5ad0ff; text-transform: uppercase; white-space: nowrap; } #boot.ready #bootMsg { color: #fff; animation: bootBlink 1.4s ease-in-out infinite; } /* index.html drives the fill by writing transform + transitionDuration per stage — transforms only, so the compositor animates while a build blocks the main thread */ #bootBar { position: relative; width: min(58vw, 200px); height: 3px; border-radius: 2px; overflow: hidden; background: rgba(12,200,255,.16); box-shadow: 0 0 10px rgba(12,200,255,.25); transition: opacity .5s ease-out; } #bootBar[hidden] { display: none; } #bootFill, #bootSweep { position: absolute; inset: 0; display: block; will-change: transform; } #bootFill { background: #5ad0ff; box-shadow: 0 0 8px rgba(12,200,255,.9); transform-origin: 0 50%; transform: scaleX(.02); transition: transform 3s cubic-bezier(.16, .84, .3, 1); } #bootSweep { background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); width: 45%; animation: bootSweep 1.25s linear infinite; } @keyframes bootSweep { from { transform: translateX(-100%); } to { transform: translateX(322%); } } #boot.ready #bootBar { opacity: 0; } #boot.ready #bootSweep { animation: none; } #bootBar.indet #bootFill { opacity: 0; } /* index.html sets .indet when no shader total is stored yet */ #bootCount { min-height: 1em; margin-top: -8px; font: 500 clamp(9px, 2.4vw, 11px)/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .2em; text-indent: .2em; color: rgba(90,208,255,.7); text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity .5s ease-out; } #boot.ready #bootCount { opacity: 0; } #bootStats { box-sizing: border-box; width: min(94vw, 760px); max-height: 30vh; margin: 0; padding: 8px 10px; overflow: auto; touch-action: pan-x pan-y; pointer-events: auto; font: 400 clamp(8px, 1.9vw, 10px)/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: rgba(190,235,255,.9); text-align: left; white-space: pre-wrap; word-break: break-all; background: rgba(0,10,20,.72); border: 1px solid rgba(12,200,255,.3); border-radius: 4px; -webkit-user-select: text; user-select: text; } #bootStats[hidden] { display: none; } #bootStats.copied { border-color: rgba(120,255,160,.7); } #bootBtns { display: flex; flex-direction: column; gap: 18px; align-items: center; touch-action: auto; margin-top: 14px; } #bootBtns[hidden] { display: none; } #bootMain, #bootQuick { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; } #bootQuick { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px; } /* HANGAR and FLY: dev's (boot-opening.js), in the lower left */ #bootQuick[hidden] { display: none; } #bootBtns button { box-sizing: border-box; border: 1px solid rgba(12,200,255,.5); cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: -apple-system, system-ui, sans-serif; font-weight: 600; text-transform: uppercase; white-space: nowrap; color: #5ad0ff; background: rgba(12,200,255,.12); transition: color .15s, border-color .15s, box-shadow .15s, background .15s; } #bootMain button { min-width: min(40vw, 230px); height: 56px; padding: 0 28px; border-radius: 28px; font-size: clamp(13px, 3.4vw, 17px); letter-spacing: .3em; text-indent: .3em; text-shadow: 0 0 10px rgba(12,200,255,.6); } #bootQuick button { height: 30px; padding: 0 16px; border-radius: 15px; font-size: clamp(9px, 2.2vw, 11px); letter-spacing: .22em; text-indent: .22em; opacity: .7; border-color: rgba(12,200,255,.3); background: transparent; } #bootBtns button:hover, #bootBtns button:focus-visible { color: #fff; border-color: #0cc8ff; box-shadow: 0 0 14px rgba(12,200,255,.5); outline: none; opacity: 1; } #bootBtns button:disabled, #bootBtns button:disabled:hover { opacity: .3; cursor: default; color: #5ad0ff; box-shadow: none; border-color: rgba(12,200,255,.3); } #bootMain button.primary { color: #fff; background: rgba(12,200,255,.3); border-color: #0cc8ff; box-shadow: 0 0 18px rgba(12,200,255,.55), inset 0 0 12px rgba(12,200,255,.35); } #bootGate { display: flex; gap: 10px; align-items: center; touch-action: auto; margin-top: 20px; } #bootGate[hidden] { display: none; } #bootGate input, #bootGate button { height: 34px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 17px; font: 600 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .2em; background: rgba(2,6,16,.5); color: #fff; outline: none; } #bootGate input { width: min(58vw, 200px); text-align: center; -webkit-user-select: text; user-select: text; } #bootGate input:focus { border-color: #0cc8ff; box-shadow: 0 0 10px rgba(12,200,255,.4); } #bootGate button { cursor: pointer; color: #5ad0ff; background: rgba(12,200,255,.12); } #bootGate button:hover { color: #fff; border-color: #0cc8ff; } #boot.denied #bootMsg { color: #ff5a7a; } #boot.denied #bootGate input { border-color: #ff5a7a; } @keyframes bootBlink { 50% { opacity: .35; } } #padBtns { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: var(--footer-h, 46px); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 17; } body:not(.desk) #btnFire { width: 92px; height: 92px; font-size: 12px; letter-spacing: .14em; } #btnThrust { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 46px) + var(--footer-lift, 0px)); z-index: 17; width: 92px; height: 92px; font-size: 12px; transition: transform .22s ease-out, bottom .18s ease-out; } body:not(.desk) #padBtns { bottom: calc(var(--footer-h, 46px) + 104px); } body.noStick #padBtns { bottom: var(--footer-h, 46px); } body.stickRight #btnThrust { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); } #btnThrust.boostOn { border-color: rgba(255,90,176,1); background: rgba(255,90,176,.55); color: #fff; } #btnBoost { position: fixed; left: calc(49px + env(safe-area-inset-left, 0px)); bottom: calc(var(--footer-h, 46px) + 166px); z-index: 17; width: 92px; height: 92px; line-height: 1.5; transition: opacity .4s ease-out; border-color: rgba(255,90,176,1); color: #fff; background: rgba(255,90,176,.36); font-size: 12px; letter-spacing: .18em; animation: boostPulse .5s ease-in-out infinite; } @keyframes boostPulse { 50% { box-shadow: 0 0 28px rgba(255,90,176,1); background: rgba(255,90,176,.85); color: #fff; } } #btnChat { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 46px; z-index: 18; width: 92px; height: 92px; font-size: 11px; line-height: 1.5; letter-spacing: .14em; } #btnPause { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 150px; z-index: 18; width: 92px; height: 48px; font-size: 11px; letter-spacing: .14em; } #btnBail { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 210px; z-index: 18; width: 92px; height: 48px; font-size: 11px; letter-spacing: .14em; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #btnBail { background: linear-gradient(to top, rgba(255,90,176,.75) calc(var(--k, 0) * 100%), rgba(10,6,20,.35) calc(var(--k, 0) * 100%)); } #btnChat[hidden], #btnPause[hidden], #btnBoost[hidden], #btnBail[hidden] { display: none; } body.chat #btnPause { display: none; } body.stickRight #stick, body.stickRight #walkStick { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); } body.stickRight #btnBoost { left: auto; right: calc(49px + env(safe-area-inset-right, 0px)); } #walkJump { position: fixed; right: calc(49px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 46px) + 29px); z-index: 17; width: 92px; height: 92px; border-radius: 50%; font-size: 12px; letter-spacing: .18em; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.75); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #walkJump.on { background: rgba(255,255,255,.42); } body.stickRight #walkJump { right: auto; left: calc(49px + env(safe-area-inset-left, 0px)); } #btnBoost.calm { animation: none; opacity: .75; } body.noStick #btnBoost { bottom: var(--footer-h, 46px); left: calc(20px + env(safe-area-inset-left, 0px)); } body.noStick.stickRight #btnBoost { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); } body.noStick #btnThrust { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); } body.noStick.stickRight #btnThrust { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); } #btnThrust.sliding { transition: none; } #boostSlot { position: fixed; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(var(--footer-h, 46px) + var(--footer-lift, 0px)); z-index: 16; pointer-events: none; width: 92px; height: 196px; border-radius: 46px; box-sizing: border-box; border: 2px solid rgba(255,90,176,1); background: rgba(255,90,176,.22); animation: boostPulse .5s ease-in-out infinite; transition: opacity .4s ease-out; } #boostSlot span { position: absolute; left: 0; right: 0; top: 24px; text-align: center; color: #fff; font: 700 12px/1.5 -apple-system, system-ui, sans-serif; letter-spacing: .18em; text-indent: .18em; } #boostSlot.calm { animation: none; opacity: .5; } #boostSlot[hidden] { display: none; } body.stickRight #boostSlot { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); } body.stickRight #padBtns { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); } #padBtns[hidden], .padBtn[hidden] { display: none; } .padBtn { width: 62px; height: 62px; border-radius: 50%; padding: 0; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.28); color: rgba(255,255,255,0.95); font: 700 10px/1 -apple-system, system-ui, sans-serif; letter-spacing: .12em; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .padBtn:active { background: rgba(255,255,255,0.45); } .padBtn { cursor: pointer; } #btnFire { font-size: 26px; letter-spacing: 0; } @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) { :root { --topbar: 21px; } #topBar { font-size: 9px; } #topLeft .ttl { height: 15px; margin-right: 8px; } #hudRight { font-size: 9px; gap: 8px; } #micBtn { font-size: 9px; padding: 5px 12px; } #hudStackL, #hudStackR { top: calc(32px + env(safe-area-inset-top, 0px)); } #pilotCount { top: calc(32px + env(safe-area-inset-top, 0px)); } #status { top: calc(50px + env(safe-area-inset-top, 0px)); } } @media (pointer: coarse) and (orientation: portrait) and (max-width: 500px) { .hudBarMeter { width: calc(50vw - 24px); } .hudMeter { width: calc(50vw - 24px); box-sizing: border-box; } .hudMeter i { flex: 1 1 0; min-width: 0; } } body.desk #padBtns { left: auto; right: calc(16px + 76px + 12px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 16px + 7px); bottom: auto; transform: none; flex-direction: row; gap: 12px; z-index: 11; } body.desk #hudStackR { right: 16px; top: 68px; } body.chat #btnChat { width: 48px; height: 48px; font-size: 20px; line-height: 1; letter-spacing: 0; top: calc(38px + env(safe-area-inset-top, 0px)); background: #0cc8ff; border-color: #8ae0ff; color: #02060f; box-shadow: 0 0 14px rgba(12,200,255,.8); } body.desk #btnBoost, body.desk #btnChat, body.desk #btnPause { display: none; } #ctrRet, #ctrChev, #aimRing, #reticle, #aimReticle, #objRet, #lockRing, .ringRead, .ringDia, .retTag { z-index: 30; } #hitX { z-index: 31; }