html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
font-family: "MS UI Gothic", "Times New Roman", Times, serif;
font-size: 12px;
text-shadow:
-1px -1px 0 black, 0 -1px 0 black, 1px -1px 0 black,
-1px 0 0 black, 1px 0 0 black, -1px 1px 0 black,
0 1px 0 black, 1px 1px 0 black;
background-image:
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 25px 25px;
}
html {
cursor: url("../img/cursor/curs.png"), auto;
}
a,
a:hover,
a:active {
cursor: url("../img/cursor/pointer.png"), pointer !important;
}
#map-container, #svg-wrapper, #svg-wrapper svg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
}
path {
fill: #000;
stroke: rgba(255,255,255,0.1);
stroke-width: 0.6;
cursor: url("../img/cursor/pointer.png"), pointer;
transition: fill 0.4s, filter 0.4s;
}
#tooltip {
position: fixed;
display: none;
pointer-events: none;
z-index: 9999;
font-size: 13px;
line-height: 16px;
padding: 6px 35px 6px 10px;
white-space: pre;
color: #fff;
background: linear-gradient(to bottom, rgba(0,0,0,0.85), #000);
border: 1px solid black;
outline: 1px solid black;
outline-offset:-3px;
backdrop-filter: blur(1px);
}
.tooltip-flag {
position: absolute;
top: 15px;
right: 8px;
transform: translateY(-50%);
pointer-events: none;
image-rendering: pixelated;
width:20px;
}
#ui-panel {
position: absolute;
top: 50px;
left: 50px;
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: min(90vw, 500px);
color: #fff;
z-index: 1000;
}
#ui-toprow {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.2rem;
}
#ui-title {
padding: 5px 16px;
font-size: clamp(28px, 4vw, 48px);
font-family: "Times New Roman", Times, serif;
font-style: italic;
color: #fff;
background: linear-gradient(to bottom, rgba(0,0,0,0.9), #000);
border: 1px solid rgba(255,255,255,0.5);
outline: 1px solid rgba(255,255,255,0.5);
outline-offset:-4px;
box-shadow: 0 0 10px rgba(255,255,255,0.08), 0 0 25px rgba(255,255,255,0.04);
}
#ui-stats, #ui-desc {
font-size: 12px;
color: #fff;
padding: 14px 16px;
backdrop-filter: blur(1px);
}
#ui-desc {
line-height: 1.5;
background: linear-gradient(to bottom, rgba(0,0,0,0.9), #000);
border: 1px solid rgba(255,255,255,0.5);
outline: 1px solid rgba(255,255,255,0.5);
outline-offset:-4px;
max-width: min(40vw, 255px);
box-shadow: 0 0 10px rgba(255,255,255,0.08), 0 0 25px rgba(255,255,255,0.04);
}
::selection {
background: rgba(0,0,0,0.5);
color: #737373;
}
.zoom, .zoom2 {
position: fixed;
top: 100px;
width: 30px;
height: 30px;
color: #fff;
font-size: 14px;
font-family: "MS UI Gothic";
background: linear-gradient(to bottom, rgba(0,0,0,0.9), #000);
border: 1px solid rgba(255,255,255,0.5);
outline: 1px solid rgba(255,255,255,0.5);
outline-offset:-4px;
box-shadow: 0 0 10px rgba(255,255,255,0.08), 0 0 25px rgba(255,255,255,0.04);
z-index: 1000;
cursor: url("../img/cursor/pointer.png"), pointer;
}
.zoom { right: 3.5vw; }
.zoom2 { right: 1.1vw; }
#corner-art {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 999;
pointer-events: none;
}
#speech-bubble {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 12px;
min-width: 210px;
max-width: 210px;
padding: 14px 18px;
font-size: 12px;
line-height: 1.5;
color: #fff;
background: linear-gradient(to bottom, rgba(0,0,0,0.9), #000);
border: 1px solid rgba(255,255,255,0.5);
outline: 1px solid rgba(255,255,255,0.5);
outline-offset:-4px;
backdrop-filter: blur(1px);
box-shadow: 0 0 10px rgba(255,255,255,0.08), 0 0 25px rgba(255,255,255,0.04);
}
#speech-bubble::before, #speech-bubble::after {
content: "";
position: absolute;
border-style: solid;
}
#speech-bubble::after {
bottom: -14px; right: 150px;
border-width: 14px 12px 0;
border-color: #777 transparent transparent;
z-index: 0;
}
#speech-bubble::before {
bottom: -11px; right: 151px;
border-width: 11px 11px 0;
border-color: #000 transparent transparent;
z-index: 1;
}
.low-spec-btn {
top: 50px;
right:1.1vw;
position:absolute;
font-family: "MS UI Gothic";
font-size: 12px;
padding: 10px 10px;
width: 100px;
cursor: url("../img/cursor/pointer.png"), pointer;
color: #fff;
background: linear-gradient(to bottom, rgba(0,0,0,0.9), #000);
border: 1px solid rgba(255,255,255,0.5);
outline: 1px solid rgba(255,255,255,0.5);
outline-offset:-4px;
backdrop-filter: blur(1px);
display: inline-block;
}
.low-spec-btn.active { }
#mini-globe{
position:fixed;
bottom:40px;
left:60px;
z-index:5;
pointer-events:auto;
max-width: 270px; 
width: 20vw; 
height: auto;
cursor: url("../img/cursor/pointer.png"), pointer;
}
#mini-globe canvas{
width:100%;
height:100%;
display:block;
}
#mini-globe {
width: 270px;
height: 270px;
}
#top-marquee {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 27px;
color:white;
background: black;
border-bottom: 1px solid rgba(255,255,255,0.15);
overflow: hidden;
display: flex;
align-items: center;
z-index: 9999;
}
.top-marquee-track {
white-space: nowrap;
font-size: 12px;
letter-spacing: 1px;
animation: topMarquee 50s linear infinite;
padding-left: 100%;
}
.mayura {
top:-130px;
left:-27px;
position:absolute;
pointer-events:none;
}
@keyframes topMarquee {
from { transform: translateX(0); }
to   { transform: translateX(-100%); }
}
.home {
font-size: 12px;
align-self: flex-start;
line-height:0.7;
filter:opacity(0.95);
text-shadow:
-1px -1px 0 black,
0px -1px 0 black,
1px -1px 0 black,
-1px  0px 0 black,
1px  0px 0 black,
-1px  1px 0 black,
0px  1px 0 black,
1px  1px 0 black;
text-decoration: underline dotted #999;
}
a {
color: #ebebeb;
text-decoration: none;
text-decoration: underline dotted #777;  
font-size:12px;
}
a:hover {
background-color: rgba(90,90,90, 0.3);
text-decoration: underline dotted #999;
}
a:active {
background-color: rgba(0,0,0, 0.6);
color: #e8e8e8;
text-decoration: underline dotted #999;
}