body {
    margin: 0;

    background-image: url('Assets/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: black;

    color: #00ff99;
    font-family: "Courier New", monospace;

    height:100vh;
    overflow:hidden;
}

#game {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 10px;

    height: calc(100vh - 60px);

    padding: 10px;
    box-sizing: border-box;
}

.panel {
    overflow-y:auto;
    overflow-x:hidden;

    border: 2px solid rgba(0,255,153,0.7);
	   
	border-radius:12px;

    padding: 8px;

    box-shadow:
        0 0 12px rgba(0,255,153,0.5);

    background:
        rgba(0,0,0,0.35);
		
	backdrop-filter: blur(3px);
	
}

.title {
    text-align: center;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
}

.grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 2px;
    aspect-ratio: 1/1;
}

.cell {
    border: 1px solid rgba(0,255,120,0.3);
	border-radius:4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(0,255,120,0.03);
    position: relative;
    overflow: hidden;
}

.selectedWarp {
    background: rgba(0,255,120,0.2) !important;
    box-shadow: 0 0 12px #00ff99 inset;
}

.weaponEffect {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    animation: flashEffect 0.5s ease;
    text-shadow: 0 0 8px #00ff99;
    font-size: 18px;
}

@keyframes flashEffect {
    0% { opacity: 0; transform: scale(0.2); }
    50% { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(2); }
}

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

.readout {
    font-size: 22px;
    margin: 10px 0;
}

.bar {

    position: relative;

    height: 20px;

    border: 1px solid #00ff99;

    margin-top: 4px;
}

.barLabel {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    font-weight: bold;

    color: black;

    z-index: 2;

    pointer-events: none;

    text-transform: uppercase;
}

#phaserPowerMarker {

    position:absolute;

    left:100%;

    top:50%;

    transform:translate(-50%, -50%);

    pointer-events:none;

    z-index:10;
}

.powerArrowTop {

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    color:#00ff99;

    font-size:14px;
}

.powerArrowBottom {

    position:absolute;

    top:10px;

    left:50%;

    transform:translateX(-50%);

    color:#00ff99;

    font-size:14px;
}

.fill {
    height: 100%;
    background: #00ff99;
}

.controls {
    grid-column: span 3;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

button {
    background: black;
    color: #00ff99;
    border: 2px solid #00ff99;
    border-radius:8px;
    transition:all 0.2s ease;
    padding: 10px 16px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 0 8px #00ff99;
}

button:hover {
    background: #00ff99;
    color: black;
	transform:translateY(-1px);
}

.commandBox {
    background: black;
    color: #00ff99;
    border: 2px solid #00ff99;
	border-radius:8px;
    padding: 10px;
    width: 260px;
    font-family: inherit;
    box-shadow: 0 0 8px #00ff99;
}

.log {
    margin-top: 10px;
    height: 80px;
    overflow: auto;
    border-top: 1px solid #00ff99;
    padding-top: 6px;
    font-size: 14px;
}

#topTabs {

    display: flex;
    gap: 8px;

    margin-bottom: 10px;
}

.tabButton {

    background: #001a22;

    border: 1px solid #00ff99;

    color: #00ff99;

    padding: 8px 16px;

    cursor: pointer;

    font-family: inherit;
}

.tabButton:hover {

    background: #003344;
}

.activeTab {

    background: #00ff99;

    color: black;
}

.tabPanel {

    width: 100%;
}

.panelTitle {

    font-size: 20px;

    margin-bottom: 12px;

    color: #00ff99;
}

.commSection {

    margin-bottom: 20px;
}

.commScreen {

    border: 1px solid #00ff99;

    padding: 12px;

    min-height: 80px;

    background: black;

    color: #00ff99;
}

.artifactEntry {

    cursor: pointer;

    padding: 4px;

    margin-bottom: 4px;

    border-bottom:
        1px solid rgba(0,255,153,0.2);
}

.artifactEntry:hover {

    background-color:
        rgba(0,255,153,0.15);
}

.selectedArtifact {

    background-color:
        rgba(0,255,153,0.25);

    box-shadow:
        inset 0 0 8px #00ff99;
}

#scienceDisplay {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 4px;

}

.scienceReportPanel {

    flex: 1;

    height: 300px;

    overflow-y: auto;

    white-space: pre-wrap;

    border: 1px solid #00ff99;
	
	border-radius:8px;

    padding: 10px;

    background: black;
}

#scienceSidePanel {

    width: 200px;

    min-width: 200px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

#scienceImage {

    text-align: center;
}

#scienceImage img {

    width: 100%;

    max-height: 180px;

    object-fit: contain;

    border: 1px solid #00ff99;
	border-radius:8px;

    box-shadow: 0 0 8px #00ff99;
}

#artifactData {

    border: 1px solid #00ff99;
	border-radius:8px;

    padding: 8px;

    font-size: 12px;

    line-height: 1.5;

    min-height: 100px;
}

.tabContent {
    display: none;
}

.activeTabContent {
    display: block;
}



#engineeringGrid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    height: 100%;
}

#mainViewer {

    position: relative;

    background: rgba(0,0,0,0.15);

    border: none;

    box-shadow: 0 0 20px rgba(0,255,153,0.3);

    backdrop-filter: blur(2px);
}

#viewerContent {

    position: relative;

    z-index: 1;

    text-shadow:
        0 0 8px #00ff99,
        0 0 16px #00ff99;
}

.sensorOffline {
    opacity: 0.15;
    pointer-events: none;
}

#startScreen::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.70);

    z-index: 0;
}

#gameTitleImage {

    max-width: 700px;

    width: 80%;

    height: auto;

    display: block;
	
	margin-top: 20px;
	
    filter:
        brightness(1.5)
		saturate(1.3)
        drop-shadow(0 0 10px #00ccff)
        drop-shadow(0 0 20px #00ccff)
        drop-shadow(0 0 40px #00ccff);	
}

#startScreen {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image:
        url('Assets/briefRoom.png');

    background-size: cover;
	background-position: center top;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 99999;

    display: flex;
    flex-direction: column;

    color: #00ff99;
	
	transition: opacity 1.5s ease;
}

#briefingHeader {

    height: 12%;

    display: flex;

    justify-content: center;
    align-items: center;
	position: relative;

    z-index: 1;
}

#briefingContent {

    flex: 1;

    display: flex;

    gap: 20px;

    padding: 20px;
	position: relative;

    z-index: 1;
}

#tutorialTop {

    display:flex;

    gap:12px;

    align-items:flex-start;

}

#tutorialPanel {

    width:45%;

    border:1px solid #00ff99;
	border-radius:12px;

    padding:15px;

    display:flex;

    flex-direction:column;
	
	background:rgba(0,30,40,0.20);

	box-shadow:0 0 15px rgba(0,255,255,0.4);

	backdrop-filter:blur(5px);
}

#missionPanel {

    flex: 1;

    border: 1px solid #00ff99;
	border-radius:12px;

    padding: 15px;
		
	background:rgba(0,30,40,0.20);

	box-shadow:0 0 15px rgba(0,255,255,0.4);

	backdrop-filter:blur(5px);
}

#briefingFooter {

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;
	
	position: relative;

    z-index: 1;
}

#hudPreview {

    position:relative;

    width:75%;

    height:240px;

    flex-shrink:0;

}

#hudImage {

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    border:1px solid #00ff99;

}

.hudMarker {

    position:absolute;

    color:#00ccff;

    font-size:11px;
	
	text-shadow:0 0 5px #00ccff;

    cursor:pointer;

    white-space:nowrap;

    padding-left:28px;

    min-height:16px;

    line-height:16px;
}

.hudMarker::before {

    content:'';

    position:absolute;

    left:0;
    top:0;

    width:14px;
    height:14px;

    border:2px solid #00ccff;

    box-sizing:border-box;

    display:block;
}

.hudMarker:hover::before {

    background:#00ccff;

    box-shadow:
        0 0 10px #00ccff;

}

#tutorialDescription {

    width:40%;

    border:1px solid #00ff99;
	border-radius:12px;

    padding:10px;

    min-height:180px;

	background:rgba(0,30,40,0.20);

	box-shadow:0 0 15px rgba(0,255,255,0.4);

	backdrop-filter:blur(5px);
}

#shipShowcase {

    margin-top:15px;

    border:1px solid #00ff99;
	border-radius:12px;

    padding:10px;
	
	flex:1;
	
	background:rgba(0,30,40,0.20);

	box-shadow:0 0 15px rgba(0,255,255,0.4);

	backdrop-filter:blur(5px);

}

.shipBriefing {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:15px;
}

.shipBriefing.reverse {

    flex-direction:row-reverse;
}

.shipBriefing img {

    width:220px;

    height:90px;

    object-fit:contain;

    flex-shrink:0;
}

.shipInfo {
	
	font-size:12px;
	
	line-height:1.4;

    flex:1;

    border:1px solid rgba(0,255,153,0.4);

    padding:10px;

    background:rgba(0,0,0,0.25);
}

.shipInfo h3 {

    margin-top:0;

    margin-bottom:10px;

    color:#00ccff;

    text-align:center;

    border-bottom:1px solid rgba(0,204,255,0.4);

    padding-bottom:4px;
}

.shipInfo p {

    margin:4px 0;

    font-size:13px;
}



#tutorialTitle {

    margin-bottom:10px;

    color:#00ff99;

}

#srsHotspot {

    left: 0%;
    top: 0%;

    width: 25%;
    height: 35%;
}

#viewerHotspot {

    left: 30%;
    top: 5%;

    width: 40%;
    height: 40%;
}

#lrsHotspot {

    right: 0%;
    top: 0%;

    width: 25%;
    height: 35%;
}

#commsHotspot {

    left: 0%;
    bottom: 0%;

    width: 33%;
    height: 20%;
}

#scienceHotspot {

    left: 34%;
    bottom: 0%;

    width: 32%;
    height: 20%;
}

#engineeringHotspot {

    right: 0%;
    bottom: 0%;

    width: 33%;
    height: 20%;
}

#startScreen.fadeOut {

    opacity: 0;

    pointer-events: none;
}

#bootScreen {

    display:none;

    position:fixed;

    inset:0;

    background:black;

    color:#00ff99;

    justify-content:center;

    align-items:center;

    font-size:24px;

    z-index:100001;

    text-shadow:
        0 0 10px #00ff99;

    opacity:1;
}

#bootText {

    text-align:center;

    font-size:28px;

    letter-spacing:2px;

    text-shadow:
        0 0 10px #00ff99,
        0 0 20px #00ff99;
}

.screen{
    position:absolute;
    inset:0;
    z-index:1000;
}

.hidden{
    display:none;
}

.gameOverPanel{

    width:700px;
    max-width:90%;

    padding:30px;

    border:2px solid #aa0000;

    background:rgba(0,0,0,0.85);

    box-shadow:
        0 0 30px rgba(255,0,0,0.4);

    color:#ffaaaa;

    text-align:center;
}

.gameOverPanel h1{

    color:#ff4444;

    margin-bottom:25px;

    font-size:42px;

    letter-spacing:4px;
}

.reportText{

    line-height:1.6;

    margin-bottom:30px;
}

.gameStats{

    text-align:left;

    width:300px;

    margin:0 auto 30px auto;
}

.gameStats div{

    margin:8px 0;
}

.buttonRow{

    display:flex;

    justify-content:center;

    gap:20px;
}

.buttonRow button{

    padding:12px 24px;

    cursor:pointer;

    font-size:16px;
}

#gameOverScreen {

    display:none;

    position:fixed;

    inset:0;

    z-index:999999;

    background-image:
        url('Assets/gameOverBriefing.png');

    background-size:cover;

    background-position:center;

    color:#ff5555;

    justify-content:center;

    align-items:center;
}

#gameOverScreen::before {

    content:'';

    position:absolute;

    inset:0;

    background:
        rgba(0,0,0,0.75);
}

#gameOverContent {

    position:relative;

    z-index:2;

    width:700px;

    max-width:90%;

    padding:30px;

    border:2px solid #ff4444;
	border-radius:16px;

    background:
        rgba(20,0,0,0.75);

    text-align:center;

    box-shadow:
        0 0 30px #ff0000;
}

#gameOverContent h1 {

    color:#ff4444;

    font-size:48px;

    margin-bottom:20px;
}

#gameOverReason {

    font-size:24px;

    margin-bottom:25px;
}

#gameOverReport {

    text-align:left;

    width:350px;

    margin:0 auto 25px auto;

    line-height:2;
}

#victoryScreen {

    display:none;

    position:fixed;

    inset:0;

    z-index:999999;

    background-image:url('Assets/briefRoom.png');

    background-size:cover;

    background-position:center;
	
    justify-content:center;

    align-items:center;

    color:#ffdd88;
	
}

#victoryScreen::before {

    content:'';

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.70);
}

#victoryContent {

    position:relative;

    z-index:2;

    width:1200px;

    max-width:95vw;

    padding:30px;

    border:2px solid #ffcc44;
	border-radius:16px;

    background:rgba(20,20,0,0.45);

    text-align:center;

    box-shadow:0 0 30px rgba(255,220,100,0.7);
}

#victoryContent h1 {

    color:#ffdd66;

    font-size:48px;

    margin-bottom:20px;
}

#victoryCitation {

    flex:1;

    text-align:left;

}

#victoryReport {

    width:350px;

    margin:0 auto;

    text-align:left;

    line-height:2;
}

.victorySubtitle {

    color:#ffdd66;

    letter-spacing:4px;

    margin-bottom:25px;
}

#victoryLayout {

    display:flex;

    gap:25px;

    align-items:flex-start;
}  

#victoryLeft {

    flex:1;

    min-width:0;
}

#victoryRight {

    width:500px;

    border-left:1px solid #ffcc44;

    padding-left:20px;

    text-align:left;

    min-height:500px;
}

#rankDisplay {

    flex:0 0 120px;

    margin:0;
	
	background:transparent;
	
}

#rankInsignia {

    width:120px;

    height:auto;

    display:block;
	
	background:transparent;
	
    border:2px solid #d4af37;

    border-radius:8px;

    padding:4px;

    box-shadow:
        0 0 10px rgba(212,175,55,0.5);
}

#promotionSection {

    display:flex;

    flex-direction:row;

    align-items:flex-start;

    gap:20px;

    margin:20px 0;
}

.historyEntry {

    padding:8px;

    margin-bottom:6px;

    border-bottom:
        1px solid rgba(255,204,68,0.25);

    cursor:pointer;

    transition:all 0.2s ease;
}

.historyEntry:hover {

    background:
        rgba(255,204,68,0.1);

    border-radius:6px;
}

.historySection {

    margin-top:12px;

    margin-bottom:8px;

    color:#ffcc44;

    font-weight:bold;

    border-bottom:
        1px solid rgba(
            255,
            204,
            68,
            0.3
        );

    padding-bottom:4px;
}

#archiveModal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.7);

    z-index:1000000;

    justify-content:center;

    align-items:center;
}

#archiveWindow {

    width:900px;

    max-width:90vw;

    height:700px;

    max-height:80vh;

    overflow-y:auto;

    background:rgba(20,20,0,0.85);

    border:2px solid #ffcc44;

    border-radius:12px;

    padding:20px;

    color:#ffdd88;
	
	    box-shadow:
        0 0 25px rgba(255,204,68,0.5);

    backdrop-filter: blur(4px);
}

#archiveTitle {

    color:#ffdd66;

    text-align:center;

    font-size:28px;

    margin-bottom:20px;

    border-bottom:
        1px solid rgba(255,204,68,0.4);

    padding-bottom:10px;
}

#archiveReport {

    text-align:left;

    line-height:1.6;

    white-space:normal;

    color:#ddddcc;
}

#archiveClose {

    float:right;

    margin-bottom:10px;
}

#archiveImage {

    text-align:center;

    margin-bottom:20px;
}

#archiveImage img {

    max-width:300px;

    max-height:250px;

    border:2px solid #ffcc44;

    border-radius:8px;

    box-shadow:
        0 0 15px rgba(
            255,
            204,
            68,
            0.5
        );
}

#warpEffect {

    display:none;

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;
	
	opacity:0;

    transition:opacity 0.5s ease;
}

#warpVideo {

    width:100%;

    height:100%;

    object-fit:cover;
	
	display:block;
}

#weaponCanvas {

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:5;
}

#communicationsLayout {

    display:flex;

    gap:10px;

    height:350px;
}

#messageList {

    width:450px;
	
	min-width:450px;

    border:1px solid #00ff99;
	
	border-radius:8px;

    overflow-y:auto;
}

#messageViewer {

    flex:1;

    border:1px solid #00ff99;

    padding:10px;
	
	border-radius:8px;

    overflow-y:auto;
}

.messageItem {

    padding:8px;

    border-bottom:
        1px solid #004433;

    cursor:pointer;
}

.messageItem:hover {

    background:
        rgba(
            0,
            255,
            153,
            0.15
        );
}

.selectedMessage {

    background:
        rgba(
            0,
            255,
            153,
            0.30
        );

    font-weight:bold;
}

.activeFolder {

    background:#00ff99;

    color:#001100;

    font-weight:bold;
}

#targetMenu {

    position:absolute;

    display:none;

    background:#001122;

    border:1px solid #00ff99;

    border-radius:8px;

    overflow:hidden;

    z-index:9999;
}

#targetMenu div {

    padding:8px 12px;

    cursor:pointer;
}

#targetMenu div:hover {

    background:#003344;
}

.messageTime {

    font-size: 10px;

    opacity: 0.7;
}

.messageSubject {

    font-weight: bold;
}

#sectorMenu {

    position:absolute;

    display:none;

    background:#001122;

    border:1px solid #00ff99;

    border-radius:8px;

    overflow:hidden;

    z-index:9999;
}

#sectorMenu div {

    padding:8px 12px;

    cursor:pointer;
}

#sectorMenu div:hover {

    background:#003344;
}

#planetMenu {

    position:absolute;

    display:none;

    background:#001122;

    border:1px solid #00ff99;

    border-radius:8px;

    overflow:hidden;

    z-index:9999;
}

#planetMenu div {

    padding:8px 12px;

    cursor:pointer;
}

#planetMenu div:hover {

    background:#003344;
}

#starbaseMenu {

    position:absolute;

    display:none;

    background:#001122;

    border:1px solid #00ff99;

    border-radius:8px;

    overflow:hidden;

    z-index:9999;
}

#starbaseMenu div {

    padding:8px 12px;

    cursor:pointer;
}

#starbaseMenu div:hover {

    background:#003344;
}

#sectorAnalysisMenu {

    position:absolute;

    display:none;

    background:#001122;

    border:1px solid #00ff99;

    border-radius:8px;

    overflow:hidden;

    z-index:9999;

    min-width:180px;

    padding:10px;

    color:#00ff99;

    box-shadow:
        0 0 12px rgba(
            0,
            255,
            153,
            0.4
        );

    pointer-events:none;
}

.menuHeader {

    padding:8px;

    text-align:center;

    font-weight:bold;

    border-bottom:
        1px solid #00ff99;

    cursor:default;
}

.menuInfo {

    padding:6px 8px;

    font-size:12px;

    cursor:default;
}

.menuDivider {

    border-top:
        1px solid rgba(
            0,
            255,
            153,
            0.3
        );

    margin:4px 0;
}

::-webkit-scrollbar {

    width: 12px;
}

::-webkit-scrollbar-track {

    background: #001a12;

    border-radius: 6px;
}

::-webkit-scrollbar-thumb {

    background: #00ff99;

    border-radius: 6px;

    border: 2px solid #001a12;
}

::-webkit-scrollbar-thumb:hover {

    background: #33ffad;
}

::-webkit-scrollbar-corner {

    background: #001a12;
}

#tacticalContacts {

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:5px;

    height:100%;
}

.enemyCard {

    min-width:140px;

    border:1px solid #00ff99;

    border-radius:8px;

    padding:6px;

    flex-shrink:0;

    background:#001a12;
}

.enemyCard img {

    width:100%;

    max-height:50px;

    object-fit:contain;

    display:block;

    margin:0 auto 6px auto;

    filter:
        drop-shadow(0 0 4px #00ff99);
}

#enemyList {

    display:flex;

    gap:10px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:5px;

    height:100%;
}

.enemyContactTitle {

    text-align:center;

    font-weight:bold;

    color:#00ff99;

    margin-bottom:4px;

    border-bottom:
        1px solid rgba(0,255,153,0.3);
}

#viewerEffects{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:10;
}

#menuButton{

    position:fixed;

	padding-top:8px;

    top:10px;
    right:10px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #00ff99;
    border-radius:8px;

    background:
        rgba(0,0,0,0.8);

    color:#00ff99;

    font-size:24px;

    line-height:1;

    padding:0;

    cursor:pointer;

    z-index:9999;
}

#menuButton:hover{

    box-shadow:
        0 0 12px #00ff99;

    transform:
        scale(1.05);
}

#systemMenu{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,0.8);

    z-index:10000;
}

#systemMenuPanel{

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%, -50%);

    width:320px;

    padding:20px;

    border:2px solid #00ff99;

    border-radius:10px;

    background:black;

    box-shadow:
        0 0 20px #00ff99;

    text-align:center;
}

#systemMenuPanel h2{

    margin-bottom:20px;

    color:#00ff99;
}

#systemMenuPanel button{

    display:block;

    width:100%;

    margin-bottom:10px;

    padding:10px;

    background:black;

    color:#00ff99;

    border:1px solid #00ff99;

    cursor:pointer;
}

#systemMenuPanel button:hover{

    background:
        rgba(0,255,153,0.1);
}

#aboutPanel{

    display:none;

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%, -50%);

    width:500px;

    max-width:90%;

    padding:20px;

    border:2px solid #00ff99;

    border-radius:10px;

    background:black;

    color:#00ff99;

    box-shadow:
        0 0 20px #00ff99;

    text-align:center;

    z-index:10001;
}

#aboutContent{

    margin:20px 0;

    line-height:1.6;
}

#helpViewer{

    flex:1;

    position:relative;

    overflow:auto;

    padding:10px;
}

#helpImage{

    max-width:90vw;

    max-height:80vh;

    border:2px solid #00ff99;

    border-radius:8px;
}

#helpPanel{

    display:none;
	
	border-radius:12px;

    flex-direction:column;

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%, -50%);

    width:95vw;
    height:90vh;

    background:black;

    border:2px solid #00ff99;

    z-index:10001;
	
	Overflow:hidden;
}

#helpTabs{

    display:flex;

    gap:10px;

    padding:10px;

    border-bottom:
        1px solid #00ff99;
}

#closeHelpButton{

    margin-left:auto;
}

#helpLayout{

    display:flex;

    gap:20px;

    height:100%;
}

#helpImage{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;
}

#helpInfoPanel{

    width:350px;

    border:1px solid #00ff99;

    padding:15px;

    background:rgba(0,0,0,0.35);

    overflow:auto;
}

#helpTitle{

    margin-bottom:15px;

    color:#00ccff;
}

.helpMarker{

    position:absolute;

    width:16px;

    height:16px;

    border:2px solid #00ccff;

    transform:translate(-50%, -50%);

    cursor:pointer;

    box-sizing:border-box;
}

.helpMarker:hover{

    background:#00ccff;

    box-shadow:
        0 0 10px #00ccff,
        0 0 20px #00ccff;
}

#helpTooltip {

    display:none;

    position:absolute;

    max-width:300px;

    padding:12px;

    background:
        rgba(0,0,0,0.95);

    border:1px solid #00ccff;

    border-radius:8px;

    color:#00ff99;

    font-size:14px;

    pointer-events:none;

    z-index:100;
}

.alertActive {

    font-weight: bold;

    box-shadow:
        0 0 10px currentColor;

}

#greenAlertButton.alertActive {

    background:#00ff99;

    color:black;

    border-color:#00ff99;
	
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.25),
        0 0 10px #00ff99,
        0 0 20px #00ff99;
}

#yellowAlertButton.alertActive {

    background:#ffaa00;

    color:black;

    border-color:#ffaa00;
	
	box-shadow:
        0 0 10px #ffaa00,
        0 0 20px #ffaa00;

}

#redAlertButton.alertActive {

    background:#ff4444;

    color:white;

    border-color:#ff4444;
	
    box-shadow:
        0 0 10px #ff4444,
        0 0 20px #ff4444;

}

#greenAlertButton {

	width: 100px;

}

#yellowAlertButton {

	width: 100px;

}

#redAlertButton {

	width: 100px;

}