:root { --research-cyan: #78e5e7; --research-gold: #e4c875; --research-green: #8fdfaa; --research-ink: #090b18; --research-panel: rgba(13, 25, 47, .88); }
.research-body { min-height: 100vh; color: #d9e7ef; background: radial-gradient(circle at 84% 6%, rgba(73, 47, 126, .2), transparent 27%), linear-gradient(150deg, #070a16 0%, #111025 46%, #080914 100%); }
.research-page { overflow: hidden; }
.research-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 290px; display: flex; align-items: end; border-bottom: 1px solid rgba(104, 207, 220, .32); background: linear-gradient(95deg, rgba(8, 12, 24, .98) 0%, rgba(8, 15, 31, .88) 46%, rgba(27, 17, 54, .72)); }
.research-hero::before { content: ''; position: absolute; z-index: -2; inset: 0; opacity: .82; background: radial-gradient(circle at 74% 42%, rgba(95, 222, 226, .23) 0 2px, transparent 3px), radial-gradient(circle at 81% 28%, rgba(230, 201, 118, .35) 0 3px, transparent 4px), radial-gradient(circle at 88% 70%, rgba(108, 84, 211, .38) 0 2px, transparent 3px), linear-gradient(115deg, transparent 10%, rgba(99, 209, 220, .05) 10.2%, transparent 10.7%, transparent 48%, rgba(229, 200, 117, .1) 48.2%, transparent 48.7%); background-size: 130px 120px, 210px 190px, 160px 155px, auto; }
.research-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(transparent 46%, rgba(7, 8, 19, .94)); }
.research-hero-grid { position: absolute; z-index: -1; inset: -30% -5% 0 42%; opacity: .38; background: linear-gradient(rgba(119, 221, 227, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 221, 227, .16) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(460px) rotateX(59deg) translateY(20%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000, transparent 88%); }
.research-hero-content { width: 100%; padding-bottom: 38px; }
.research-hero .eyebrow, .research-section-head .eyebrow { color: #8bdce3; }
.research-hero h1 { margin: 5px 0 8px; color: #f0edf4; font: 700 clamp(1.9rem, 4vw, 3.1rem)/1.05 'Cinzel', serif; letter-spacing: .02em; }
.research-hero p { max-width: 610px; margin: 0; color: #b8cbd7; font-size: .92rem; line-height: 1.65; }
.research-main { padding: 34px 0 72px; }
.research-gate { max-width: 560px; margin: 24px auto; padding: 32px; border: 1px solid rgba(100, 214, 222, .44); background: rgba(10, 19, 37, .82); text-align: center; }
.research-gate h2 { margin: 6px 0; font: 700 1.35rem 'Cinzel', serif; color: #f0edf4; }.research-gate p { color: #9eb8c8; }.research-gate .btn { margin-top: 10px; }
.research-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 22px; align-items: start; }
.research-sidebar { display: grid; gap: 14px; position: sticky; top: 84px; }
.research-missions-link, .research-command-card, .research-effects-card { display: block; border: 1px solid rgba(83, 143, 180, .38); background: linear-gradient(145deg, rgba(12, 27, 48, .94), rgba(18, 13, 39, .9)); box-shadow: inset 0 0 24px rgba(74, 202, 215, .035); }
.research-missions-link { padding: 17px; color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease, background .2s ease; }.research-missions-link:hover, .research-missions-link:focus-visible { border-color: rgba(126, 227, 232, .8); background: linear-gradient(145deg, rgba(16, 42, 66, .98), rgba(26, 17, 54, .95)); outline: none; transform: translateY(-2px); }.research-missions-link strong { display: block; margin: 6px 0 7px; color: #e9edf4; font: 700 .82rem 'Cinzel', serif; }.research-missions-link p { margin: 0; color: #9ab2c1; font-size: .68rem; line-height: 1.55; }.research-missions-link > span:last-child { display: block; margin-top: 13px; color: #8ce3e6; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.research-missions-link b { font-size: .84rem; }
.research-command-card, .research-effects-card { padding: 17px; }.research-command-card h2, .research-effects-card h2 { margin: 5px 0 10px; color: #e9edf4; font: 700 .98rem 'Cinzel', serif; }.research-command-card p { margin: 12px 0 0; color: #91abbc; font-size: .66rem; line-height: 1.55; }
.research-command-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(94, 166, 194, .23); border-bottom: 1px solid rgba(94, 166, 194, .23); }.research-command-metrics span { padding: 10px 6px; }.research-command-metrics span + span { border-left: 1px solid rgba(94, 166, 194, .23); }.research-command-metrics small { display: block; color: #7894a9; font-size: .53rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.research-command-metrics strong { display: block; margin-top: 2px; color: #ebd48d; font: 700 1rem 'Cinzel', serif; }
.research-effects-card > div:first-child { display: flex; align-items: start; justify-content: space-between; gap: 8px; }.research-effects-card h2 { text-align: right; font-size: .78rem; }.research-effects-card ul { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; }.research-effects-card li { padding: 8px 9px; border-left: 2px solid #79dce2; background: rgba(5, 13, 26, .48); color: #c5dae4; font-size: .63rem; line-height: 1.35; }.research-effects-card li b { display: block; color: #9be4ab; font-size: .67rem; }.research-effects-card p { margin: 9px 0 0; color: #839eaf; font-size: .65rem; line-height: 1.5; }
.research-content-main { min-width: 0; }.research-command { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 6px 0 18px; border-bottom: 1px solid rgba(78, 138, 174, .3); }.research-command h2 { margin: 5px 0; color: #f0edf4; font: 700 clamp(1.18rem, 2.2vw, 1.55rem) 'Cinzel', serif; }.research-command p { max-width: 690px; margin: 0; color: #9db5c4; font-size: .75rem; line-height: 1.55; }.research-unlocked-readout { min-width: 126px; padding: 10px 13px; border: 1px solid rgba(96, 190, 199, .37); background: rgba(8, 25, 42, .62); text-align: right; }.research-unlocked-readout span, .research-unlocked-readout small { display: block; color: #86a2b4; font-size: .57rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.research-unlocked-readout strong { display: block; color: #8fe1a8; font: 700 1.4rem 'Cinzel', serif; line-height: 1.05; }.research-unlocked-readout small { color: #b4cad7; letter-spacing: .03em; text-transform: none; }
.research-status { min-height: 18px; margin: 9px 0 0; color: #8de1e4; font-size: .69rem; }.research-status.is-error { color: #eda49f; }
.research-tree-section { margin-top: 23px; }.research-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 11px; }.research-section-head h2 { margin: 4px 0; color: #e9edf4; font: 700 1.1rem 'Cinzel', serif; }.research-section-head p { margin: 0; color: #90aaba; font-size: .68rem; line-height: 1.45; }.research-tree-key { display: flex; align-items: center; gap: 6px; color: #869eae; font-size: .57rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }.research-tree-key i { width: 8px; height: 8px; border: 1px solid #697d91; border-radius: 50%; background: #121b2e; }.research-tree-key i.is-active { border-color: #a5e7b0; background: #79dba0; box-shadow: 0 0 8px rgba(121, 219, 160, .8); }.research-tree-key i.is-available { border-color: #8ce5e8; background: #3f8995; }
.research-tree-scroll { overflow: auto; padding: 12px; border: 1px solid rgba(83, 149, 183, .42); background: linear-gradient(145deg, rgba(7, 17, 31, .92), rgba(18, 12, 39, .9)); box-shadow: inset 0 0 38px rgba(23, 181, 196, .05); }.research-tree-scroll:focus-visible { outline: 2px solid #7ee3e8; outline-offset: 3px; }.research-tree-board { position: relative; width: 2040px; min-height: 1440px; overflow: hidden; background-image: linear-gradient(rgba(116, 214, 221, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 214, 221, .07) 1px, transparent 1px), radial-gradient(circle at 52% 42%, rgba(66, 132, 178, .15), transparent 38%); background-size: 30px 30px, 30px 30px, auto; }.research-tree-board::before { content: 'NEOH // RESEARCH RELAY'; position: absolute; top: 20px; left: 24px; color: rgba(126, 211, 222, .32); font: 700 .57rem 'Jost', sans-serif; letter-spacing: .16em; }.research-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }.research-tree-lines path { fill: none; stroke: rgba(105, 145, 170, .38); stroke-width: 2; }.research-tree-lines path.is-available { stroke: rgba(115, 222, 227, .75); }.research-tree-lines path.is-active { stroke: rgba(139, 224, 166, .82); filter: drop-shadow(0 0 3px rgba(139, 224, 166, .45)); }
.research-node { position: absolute; z-index: 1; width: 196px; min-height: 126px; padding: 10px; border: 1px solid rgba(93, 130, 160, .46); background: linear-gradient(145deg, rgba(13, 28, 49, .96), rgba(19, 13, 42, .95)); color: #d9e7ef; text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.research-node:hover, .research-node:focus-visible, .research-node.is-selected { z-index: 2; border-color: #8de6e9; outline: none; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, .32), 0 0 0 1px rgba(121, 223, 229, .2); }.research-node.is-unlocked { border-color: rgba(143, 223, 170, .82); background: linear-gradient(145deg, rgba(15, 52, 55, .98), rgba(17, 45, 47, .97)); }.research-node.is-unlocked::after { content: 'ONLINE'; position: absolute; top: 8px; right: 8px; color: #9ae5af; font-size: .48rem; font-weight: 700; letter-spacing: .1em; }.research-node.is-available { border-color: rgba(117, 223, 228, .72); }.research-node.is-retired { filter: grayscale(.65); opacity: .7; }.research-node-top { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; align-items: center; }.research-node-art { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid rgba(110, 210, 219, .4); background: #11253b; color: #8ddce3; font: 700 1rem 'Cinzel', serif; }.research-node-art img { width: 100%; height: 100%; object-fit: cover; }.research-node small { display: block; color: #83bfc9; font-size: .52rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.research-node strong { display: block; overflow: hidden; margin-top: 2px; color: #edf0f4; font: 700 .69rem/1.25 'Cinzel', serif; text-overflow: ellipsis; white-space: nowrap; }.research-node p { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: #a9c0cb; font-size: .59rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.research-node-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; color: #829bab; font-size: .53rem; }.research-node-foot b { color: #e6cd84; font-size: .56rem; }.research-node.is-unlocked .research-node-foot b { color: #9ae5af; }
.research-empty { position: absolute; top: 50%; left: 50%; width: 320px; margin: 0; color: #8ea9ba; font-size: .76rem; text-align: center; transform: translate(-50%, -50%); }
.research-tree-meta { display: grid; justify-items: end; gap: 6px; }.research-category-filter { display: inline-flex; align-items: center; gap: 7px; color: #8fcdd4; font-size: .55rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }.research-category-filter select { min-width: 142px; min-height: 28px; padding: 4px 23px 4px 8px; border: 1px solid rgba(111, 207, 213, .46); border-radius: 0; background: rgba(7, 21, 36, .86); color: #d9e8ed; font: 600 .61rem 'Jost', sans-serif; letter-spacing: .02em; text-transform: none; }.research-tree-pan-hint { display: inline-flex; align-items: center; gap: 5px; color: #78b6c1; font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.research-tree-pan-hint span { color: #8ee7e9; font-size: .72rem; }.research-tree-scroll { cursor: grab; overscroll-behavior: contain; }.research-tree-scroll.is-panning { cursor: grabbing; user-select: none; }.research-tree-scroll.is-panning .research-tree-board, .research-tree-scroll.is-panning .research-node { cursor: grabbing; }
.research-content-main { display: flex; min-width: 0; flex-direction: column; align-items: stretch; }.research-command { padding-bottom: 9px; }.research-status { order: 2; }.research-status:empty { display: none; }.research-status:not(:empty) { min-height: 18px; margin: 10px 0 0; }.research-tree-section { order: 1; margin-top: 8px; }.research-detail-card { order: 3; }.research-tree-key { flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; }.research-tree-key i.is-online { border-color: #9be8b1; background: #6edb97; box-shadow: 0 0 8px rgba(110, 219, 151, .74); }.research-tree-key i.is-ready { border-color: #8de8ee; background: #4baec4; box-shadow: 0 0 8px rgba(75, 174, 196, .58); }.research-tree-key i.is-funds-missing { border-color: #d39bff; background: #9250c7; box-shadow: 0 0 8px rgba(176, 103, 231, .56); }.research-tree-key i.is-rank-locked { border-color: #f18c8e; background: #bd515e; box-shadow: 0 0 8px rgba(210, 84, 95, .48); }
.research-tree-lines path.is-online { stroke: rgba(130, 230, 165, .88); filter: drop-shadow(0 0 3px rgba(130, 230, 165, .45)); }.research-tree-lines path.is-ready { stroke: rgba(104, 222, 234, .8); }.research-tree-lines path.is-funds-missing { stroke: rgba(188, 126, 239, .7); }.research-tree-lines path.is-rank-locked, .research-tree-lines path.is-path-locked { stroke: rgba(230, 103, 111, .55); }
.research-node.is-online { border-color: rgba(143, 230, 171, .9); background: linear-gradient(145deg, rgba(12, 73, 61, .98), rgba(16, 47, 48, .98)); }.research-node.is-online::after { content: 'ONLINE'; position: absolute; top: 8px; right: 8px; color: #a7edb6; font-size: .48rem; font-weight: 700; letter-spacing: .1em; }.research-node.is-ready { border-color: rgba(106, 220, 234, .9); background: linear-gradient(145deg, rgba(13, 58, 80, .98), rgba(17, 37, 65, .98)); box-shadow: 0 0 0 1px rgba(82, 212, 230, .12), 0 8px 24px rgba(0, 0, 0, .22); }.research-node.is-funds-missing { border-color: rgba(192, 128, 244, .88); background: linear-gradient(145deg, rgba(57, 31, 93, .98), rgba(34, 22, 66, .98)); }.research-node.is-rank-locked, .research-node.is-path-locked { border-color: rgba(230, 108, 116, .82); background: linear-gradient(145deg, rgba(75, 29, 46, .97), rgba(43, 20, 43, .97)); }.research-node.is-path-locked { border-color: rgba(222, 120, 113, .65); }.research-node.is-retired { border-color: rgba(126, 137, 157, .5); }.research-node.is-online:hover, .research-node.is-online:focus-visible, .research-node.is-online.is-selected { border-color: #b1f1c0; }.research-node.is-ready:hover, .research-node.is-ready:focus-visible, .research-node.is-ready.is-selected { border-color: #a6f0f4; }.research-node.is-funds-missing:hover, .research-node.is-funds-missing:focus-visible, .research-node.is-funds-missing.is-selected { border-color: #e0b8ff; }.research-node.is-rank-locked:hover, .research-node.is-rank-locked:focus-visible, .research-node.is-rank-locked.is-selected, .research-node.is-path-locked:hover, .research-node.is-path-locked:focus-visible, .research-node.is-path-locked.is-selected { border-color: #ffaaa8; }.research-node-state.is-online, .research-node.is-online .research-node-foot b { color: #a7edb6; }.research-node-state.is-ready, .research-node.is-ready .research-node-foot b { color: #9fe9ef; }.research-node-state.is-funds-missing, .research-node.is-funds-missing .research-node-foot b { color: #d8a8ff; }.research-node-state.is-rank-locked, .research-node-state.is-path-locked, .research-node.is-rank-locked .research-node-foot b, .research-node.is-path-locked .research-node-foot b { color: #ffaaa8; }
.research-node { padding: 0; cursor: default; }.research-node-select { display: block; width: 100%; min-height: 126px; padding: 10px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }.research-node-select:focus-visible { outline: 2px solid #b7f3f4; outline-offset: -4px; }.research-node:hover, .research-node:focus-within { z-index: 5; transform: translateY(-3px); }.research-node:hover::after, .research-node:focus-within::after { display: none; }.research-node-hover { position: absolute; z-index: 6; top: -1px; left: -1px; width: calc(100% + 2px); min-height: 158px; padding: 12px; border: 1px solid rgba(121, 224, 229, .88); background: linear-gradient(145deg, rgba(8, 28, 48, .985), rgba(26, 16, 56, .985)); box-shadow: 0 14px 30px rgba(0, 0, 0, .42), 0 0 0 1px rgba(105, 223, 231, .14); opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; }.research-node:hover .research-node-hover, .research-node:focus-within .research-node-hover { opacity: 1; pointer-events: auto; transform: translateY(0); }.research-node-hover-effect { display: block; color: #9de7ea; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }.research-node-hover p { display: -webkit-box; overflow: hidden; margin: 7px 0 9px; color: #bfd0d9; font-size: .59rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.research-node-costs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; }.research-node-costs span { padding: 3px 5px; border: 1px solid rgba(118, 206, 215, .34); background: rgba(6, 14, 30, .54); color: #b5e6e6; font-size: .5rem; font-weight: 700; line-height: 1.25; }.research-node-costs span.is-missing { border-color: rgba(241, 139, 147, .55); color: #ffb5b5; }.research-node-unlock { width: 100%; min-height: 29px; border: 1px solid #8be5e9; background: linear-gradient(135deg, #307a98, #7047b9); color: #f3fbfc; font: 700 .58rem 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.research-node-unlock:hover:not(:disabled), .research-node-unlock:focus-visible { border-color: #d2f8f8; background: linear-gradient(135deg, #439ab7, #8958d5); outline: none; }.research-node-unlock:disabled { border-color: rgba(132, 144, 163, .58); background: rgba(68, 74, 94, .72); color: #a1aaba; cursor: not-allowed; }.research-node-hover-reason { display: block; margin-top: 6px; color: #f0aaaa; font-size: .5rem; font-weight: 700; line-height: 1.3; }.research-node-hover-reason.is-ready { color: #a6ebba; }
.research-detail-card { position: relative; min-height: 160px; margin-top: 18px; padding: 20px; border: 1px solid rgba(91, 155, 187, .42); background: linear-gradient(120deg, rgba(14, 31, 54, .94), rgba(22, 14, 46, .9)); }.research-detail-card h2 { margin: 5px 0 7px; color: #f0edf4; font: 700 1.26rem 'Cinzel', serif; }.research-detail-card > p { max-width: 740px; margin: 0; color: #a4bdca; font-size: .73rem; line-height: 1.6; }.research-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 22px; align-items: start; }.research-detail-effect { margin-top: 13px; color: #92e2e5; font-size: .71rem; font-weight: 700; }.research-detail-meta { display: grid; gap: 8px; }.research-detail-meta > span { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border-left: 2px solid rgba(128, 206, 215, .56); background: rgba(6, 14, 28, .48); color: #a7bec9; font-size: .63rem; }.research-detail-meta strong { color: #ead694; text-align: right; }.research-detail-meta .is-ready strong { color: #9be5af; }.research-detail-meta .is-missing strong { color: #eea8a3; }.research-detail-prereqs { margin-top: 13px; color: #91acbd; font-size: .64rem; }.research-detail-prereqs b { color: #d7e5ec; }.research-unlock-btn { margin-top: 15px; }.research-detail-state { margin-top: 14px; color: #98dfad; font-size: .7rem; font-weight: 700; }.research-detail-state.is-locked { color: #d0bd86; }.research-detail-state.is-retired { color: #a8a1c1; }
@media (max-width: 1060px) { .research-layout { grid-template-columns: 1fr; }.research-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }.research-command-card, .research-effects-card { min-height: 0; }.research-command { align-items: start; }.research-missions-link { min-height: 100%; } }
@media (max-width: 700px) { .research-hero { min-height: 230px; }.research-main { padding-top: 24px; }.research-sidebar { grid-template-columns: 1fr; }.research-command { flex-direction: column; }.research-unlocked-readout { align-self: stretch; text-align: left; }.research-section-head { align-items: start; flex-direction: column; }.research-tree-key { white-space: normal; }.research-detail-grid { grid-template-columns: 1fr; }.research-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .research-tree-meta { justify-items: start; } }
.research-tree-map { position: relative; }.research-map-controls { position: absolute; z-index: 8; top: 20px; right: 20px; display: inline-flex; align-items: stretch; border: 1px solid rgba(109, 206, 214, .58); background: rgba(5, 16, 31, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }.research-map-controls button, .research-map-controls output { min-width: 30px; min-height: 29px; margin: 0; padding: 0 8px; border: 0; border-right: 1px solid rgba(109, 206, 214, .36); background: transparent; color: #bdecef; font: 700 .67rem 'Jost', sans-serif; line-height: 29px; text-align: center; }.research-map-controls button { cursor: pointer; }.research-map-controls button:hover:not(:disabled), .research-map-controls button:focus-visible { background: rgba(69, 152, 172, .34); color: #f0fdff; outline: none; }.research-map-controls button:disabled { color: #607687; cursor: not-allowed; }.research-map-controls output { min-width: 47px; color: #e4ce8a; }.research-map-controls .research-fullscreen-button { border-right: 0; font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }.research-tree-zoom { position: relative; transform-origin: top left; }.research-tree-board { transform-origin: top left; will-change: transform; }.research-tree-map:fullscreen { box-sizing: border-box; display: flex; width: 100vw; height: 100vh; padding: 14px; background: #080d1c; }.research-tree-map:fullscreen .research-tree-scroll { flex: 1 1 auto; min-height: 0; }.research-tree-map:fullscreen .research-map-controls { top: 26px; right: 26px; }.research-tree-map:-webkit-full-screen { box-sizing: border-box; display: flex; width: 100vw; height: 100vh; padding: 14px; background: #080d1c; }.research-tree-map:-webkit-full-screen .research-tree-scroll { flex: 1 1 auto; min-height: 0; }.research-tree-map:-webkit-full-screen .research-map-controls { top: 26px; right: 26px; }
@media (max-width: 700px) { .research-map-controls { top: 18px; right: 18px; }.research-map-controls .research-fullscreen-button { position: absolute; top: 34px; right: 0; border: 1px solid rgba(109, 206, 214, .58); background: rgba(5, 16, 31, .94); } }
.research-queue-card, .research-transmissions-card { padding: 17px; border: 1px solid rgba(83, 143, 180, .38); background: linear-gradient(145deg, rgba(12, 27, 48, .94), rgba(18, 13, 39, .9)); box-shadow: inset 0 0 24px rgba(74, 202, 215, .035); }.research-queue-card h2, .research-transmissions-card h2 { margin: 5px 0 10px; color: #e9edf4; font: 700 .98rem 'Cinzel', serif; }.research-queue-card p, .research-transmissions-card > div:last-child > p { margin: 8px 0 0; color: #91abbc; font-size: .65rem; line-height: 1.5; }.research-queue-card strong { display: block; color: #e8edf2; font: 700 .76rem 'Cinzel', serif; }.research-queue-card strong + span { display: block; margin-top: 3px; color: #8ee1e5; font-size: .6rem; font-weight: 700; }.research-queue-card ul { display: grid; gap: 4px; margin: 10px 0; padding: 0; list-style: none; }.research-queue-card li { color: #d7bd89; font-size: .61rem; line-height: 1.35; }.research-queue-card li::before { content: '◇'; margin-right: 5px; color: #e7c978; }.research-queue-ready { color: #9be6b0 !important; font-weight: 700; }.research-queue-clear { padding: 0; border: 0; background: transparent; color: #8edee4; font: 700 .57rem 'Jost', sans-serif; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }.research-queue-clear:hover, .research-queue-clear:focus-visible { color: #effcff; outline: none; text-decoration: underline; }.research-transmissions-card ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }.research-transmissions-card li { padding: 8px 9px; border-left: 2px solid rgba(132, 219, 224, .67); background: rgba(5, 13, 26, .48); }.research-transmissions-card strong, .research-transmissions-card small { display: block; }.research-transmissions-card strong { color: #bcebee; font-size: .63rem; }.research-transmissions-card p { display: -webkit-box; overflow: hidden; margin: 4px 0; color: #b8cad3; font-size: .59rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.research-transmissions-card small { color: #7794a6; font-size: .49rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.research-node-hover { min-height: 187px; }.research-node-queue { width: 100%; min-height: 26px; margin-top: 5px; border: 1px solid rgba(145, 211, 224, .58); background: rgba(27, 56, 82, .7); color: #bceef0; font: 700 .54rem 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.research-node-queue:hover:not(:disabled), .research-node-queue:focus-visible { border-color: #bff6f7; background: rgba(43, 94, 116, .86); outline: none; }.research-node-queue:disabled { border-color: rgba(124, 146, 159, .46); color: #91a1ad; cursor: default; }.research-node.is-queued { border-style: dashed; box-shadow: 0 0 0 1px rgba(228, 201, 117, .36), 0 0 16px rgba(228, 201, 117, .15); }.research-node.is-queued::before { content: 'QUEUED'; position: absolute; top: 8px; right: 8px; color: #e9cf85; font-size: .48rem; font-weight: 700; letter-spacing: .08em; }.research-node.is-just-activated { animation: research-protocol-online 1.8s ease-out; }.research-tree-lines path.is-just-activated { stroke-dasharray: 7 6; animation: research-signal-trace 1.8s linear; }@keyframes research-protocol-online { 0% { box-shadow: 0 0 0 0 rgba(121, 238, 177, .95), 0 0 38px rgba(87, 224, 218, .8); transform: scale(.96); } 45% { box-shadow: 0 0 0 12px rgba(121, 238, 177, 0), 0 0 32px rgba(87, 224, 218, .5); transform: scale(1.03); } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transform: scale(1); } }@keyframes research-signal-trace { from { stroke-dashoffset: 78; stroke-width: 4; filter: drop-shadow(0 0 7px rgba(116, 235, 218, .95)); } to { stroke-dashoffset: 0; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(139, 224, 166, .45)); } }
.research-transmission-modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(3, 7, 18, .78); backdrop-filter: blur(4px); }.research-transmission-modal[hidden] { display: none; }.research-transmission-dialog { position: relative; width: min(520px, 100%); overflow: hidden; padding: 29px; border: 1px solid rgba(119, 230, 224, .78); background: linear-gradient(135deg, rgba(9, 36, 54, .99), rgba(29, 16, 58, .99)); box-shadow: 0 0 0 1px rgba(117, 226, 225, .13), 0 20px 70px rgba(0, 0, 0, .62); animation: research-transmission-arrival .34s ease-out; }.research-transmission-dialog::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .32; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(131, 240, 231, .09) 4px); }.research-transmission-dialog > * { position: relative; }.research-transmission-dialog h2 { margin: 6px 0 12px; color: #f0edf4; font: 700 1.3rem 'Cinzel', serif; }.research-transmission-dialog p { margin: 0 0 19px; color: #c3d8df; font-size: .78rem; line-height: 1.65; white-space: pre-wrap; }.research-transmission-close { position: absolute; z-index: 1; top: 10px; right: 10px; width: 29px; height: 29px; border: 1px solid rgba(137, 221, 226, .55); background: rgba(5, 17, 32, .58); color: #cceff1; font-size: 1.12rem; cursor: pointer; }.research-transmission-close:hover, .research-transmission-close:focus-visible { border-color: #d2fcfb; color: #fff; outline: none; }@keyframes research-transmission-arrival { from { opacity: 0; transform: translateY(13px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }


/* ===========================================================================
 * Board tabs: the ordinary lattice and the sealed legendary branch.
 * ========================================================================= */

.research-board-tabs { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 -1px; }
.research-board-tab-wrap { position: relative; display: inline-flex; }
/* min-height, not padding: at the narrow breakpoint the smaller font and
 * padding put the tab at 25px, a pixel over the 24px minimum target size and
 * therefore a pixel of tuning away from being under it. */
.research-board-tab { min-height: 30px; padding: 8px 16px; border: 1px solid rgba(83, 149, 183, .42); border-bottom: 0; background: rgba(7, 17, 31, .62); color: #9fc4d6; font: 700 .62rem 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.research-board-tab:hover, .research-board-tab:focus-visible { background: rgba(23, 60, 88, .7); color: #e8f9fb; outline: none; }
.research-board-tab.is-active { border-color: rgba(126, 227, 232, .7); background: linear-gradient(180deg, rgba(23, 71, 96, .9), rgba(7, 17, 31, .92)); color: #f0fdff; box-shadow: inset 0 2px rgba(126, 227, 232, .8); }
/* The legendary tab carries the gold the rarest tier uses everywhere else on
 * the site, so what it leads to is legible before it is readable. */
.research-board-tab.is-legendary { border-color: rgba(236, 201, 135, .46); color: #e4ce8a; }
.research-board-tab.is-legendary.is-active { border-color: rgba(236, 201, 135, .82); background: linear-gradient(180deg, rgba(92, 68, 24, .82), rgba(24, 18, 8, .92)); color: #ffeec2; box-shadow: inset 0 2px rgba(236, 201, 135, .9); }
/* Sealed reads as a locked plaque rather than a faded copy of the open tab:
 * a colour step and a padlock, never opacity, which a contrast check cannot
 * see and which would dim the explanation along with the label. */
.research-board-tab.is-sealed { border-color: rgba(140, 132, 112, .4); background: rgba(16, 16, 22, .72); color: #b0a68d; cursor: not-allowed; }
.research-board-tab.is-sealed::before { content: '\1F512'; margin-right: 7px; font-size: .78em; }
.research-board-tab.is-sealed:hover, .research-board-tab.is-sealed:focus-visible { background: rgba(30, 27, 18, .8); color: #d8cba6; }

.research-board-tab-note { position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; width: max-content; max-width: 290px; padding: 9px 12px; border: 1px solid rgba(236, 201, 135, .48); background: #10131f; color: #e6ddc6; font: 400 .72rem/1.45 'Jost', sans-serif; letter-spacing: .01em; text-transform: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .16s ease; pointer-events: none; }
.research-board-tab-note[hidden] { display: none; }
.research-board-tab-wrap:hover .research-board-tab-note, .research-board-tab-wrap:focus-within .research-board-tab-note { opacity: 1; visibility: visible; }

/* The legendary board is a fifth the area of the main lattice, so it gets its
 * own warmer grid rather than the teal relay wash, and its own stamp. */
.research-tree-board.is-legendary { width: 1200px; min-height: 540px; background-image: linear-gradient(rgba(236, 201, 135, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 201, 135, .07) 1px, transparent 1px), radial-gradient(circle at 50% 44%, rgba(178, 132, 52, .16), transparent 42%); }
.research-tree-board.is-legendary::before { content: 'NEOH // LEGENDARY RELAY'; color: rgba(236, 201, 135, .38); }
.research-tree-board.is-legendary .research-tree-lines path { stroke: rgba(170, 140, 88, .44); }
.research-tree-board.is-legendary .research-tree-lines path.is-available { stroke: rgba(236, 201, 135, .78); }
.research-tree-board.is-legendary .research-node { border-color: rgba(236, 201, 135, .42); }

@media (max-width: 700px) {
  .research-board-tabs { flex-wrap: wrap; }
  .research-board-tab { padding: 7px 11px; font-size: .58rem; }
  .research-board-tab-note { left: auto; right: 0; max-width: min(290px, 78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .research-board-tab-note { transition: none; }
}