1748 lines
30 KiB
CSS
1748 lines
30 KiB
CSS
@import "tailwindcss" source(none);
|
|
@source ".";
|
|
@source "../components";
|
|
.metrics-steps {
|
|
list-style: decimal;
|
|
padding-left: 24px;
|
|
margin: 20px 0;
|
|
}
|
|
.metrics-steps li { margin: 12px 0; }
|
|
.metrics-config { font-family: monospace; font-size: 12px; overflow-wrap: normal; white-space: pre; }
|
|
:root {
|
|
--bg: #0b100f;
|
|
--panel: #121b17;
|
|
--panel2: #17211b;
|
|
--line: #29352c;
|
|
--green: #a3e271;
|
|
--muted: #8e9d92;
|
|
--text: #eff3e8;
|
|
--sand: #d6c096;
|
|
color-scheme: dark;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
button,
|
|
a,
|
|
input,
|
|
textarea {
|
|
outline-offset: 5px;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.6;
|
|
}
|
|
::selection {
|
|
background: #a3e271;
|
|
color: #101510;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.15;
|
|
letter-spacing: -1px;
|
|
}
|
|
h1 {
|
|
font-size: clamp(38px, 5vw, 68px);
|
|
}
|
|
h2 {
|
|
font-size: 34px;
|
|
}
|
|
h3 {
|
|
font-size: 22px;
|
|
}
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
.green {
|
|
color: var(--green);
|
|
}
|
|
.eyebrow {
|
|
display: block;
|
|
color: var(--green);
|
|
font:
|
|
11px/1.5 "Courier New",
|
|
monospace;
|
|
letter-spacing: 1.4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.section {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 70px 36px;
|
|
}
|
|
.page-content {
|
|
min-height: 70vh;
|
|
padding-top: 64px;
|
|
}
|
|
.lead {
|
|
font-size: 17px;
|
|
max-width: 620px;
|
|
color: var(--muted);
|
|
line-height: 1.8;
|
|
}
|
|
.site-header {
|
|
height: 88px;
|
|
border-bottom: 1px solid #ffffff0a;
|
|
background: #0b100fee;
|
|
}
|
|
.header-inner {
|
|
height: 100%;
|
|
max-width: 1240px;
|
|
padding: 0 36px;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
}
|
|
.brand {
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
letter-spacing: -1.2px;
|
|
display: flex;
|
|
gap: 0;
|
|
align-items: center;
|
|
line-height: 1;
|
|
}
|
|
.brand > span:not(.brand-cube) {
|
|
color: var(--green);
|
|
}
|
|
.brand sup {
|
|
font: 9px monospace;
|
|
margin: -15px 0 0 9px;
|
|
color: #8b9b8b;
|
|
border: 1px solid #314033;
|
|
padding: 3px 4px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.brand-cube {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: linear-gradient(135deg, #abdc65 50%, #699c3d 50%);
|
|
border-bottom: 9px solid #796044;
|
|
margin-right: 9px;
|
|
box-shadow: 3px 3px 0 #070a07;
|
|
transform: rotate(-8deg);
|
|
}
|
|
nav {
|
|
display: flex;
|
|
gap: 34px;
|
|
font-size: 13px;
|
|
color: #b2bdb2;
|
|
}
|
|
nav a:hover,
|
|
.text-link:hover {
|
|
color: var(--green);
|
|
}
|
|
.header-account {
|
|
border: 1px solid #3a483c;
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
}
|
|
.button {
|
|
border: 1px solid #3d4c40;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 13px 21px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
background: #172218;
|
|
box-shadow: 3px 3px 0 #050905;
|
|
transition:
|
|
transform 0.15s,
|
|
background 0.15s;
|
|
}
|
|
.button:hover {
|
|
transform: translate(-1px, -1px);
|
|
background: #273828;
|
|
}
|
|
.button.primary {
|
|
background: var(--green);
|
|
border-color: #bfeaa0;
|
|
color: #152210;
|
|
border-bottom: 3px solid #6caa45;
|
|
}
|
|
.button.primary:hover {
|
|
background: #bbec91;
|
|
}
|
|
.button.secondary {
|
|
background: #18241b;
|
|
}
|
|
.full {
|
|
width: 100%;
|
|
}
|
|
.text-link {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
}
|
|
.hero {
|
|
max-width: 1240px;
|
|
margin: auto;
|
|
position: relative;
|
|
min-height: 548px;
|
|
padding: 78px 36px 65px;
|
|
display: grid;
|
|
grid-template-columns: 1.12fr 1fr;
|
|
gap: 25px;
|
|
overflow: hidden;
|
|
}
|
|
.hero-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(#52734a44 1px, transparent 1px);
|
|
background-size: 31px 31px;
|
|
mask-image: linear-gradient(90deg, transparent, #000);
|
|
}
|
|
.hero-copy {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.status-label {
|
|
font: 10px monospace;
|
|
letter-spacing: 1.3px;
|
|
color: #b0bcb0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 26px;
|
|
}
|
|
.live-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--green);
|
|
display: inline-block;
|
|
box-shadow: 0 0 10px #a3e27155;
|
|
}
|
|
.hero h1 {
|
|
font-size: clamp(40px, 4.7vw, 64px);
|
|
font-weight: 900;
|
|
line-height: 1.08;
|
|
letter-spacing: -2.5px;
|
|
text-shadow: 3px 3px 0 #040805;
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero h1 span {
|
|
color: var(--green);
|
|
}
|
|
.hero p {
|
|
color: #94a393;
|
|
font-size: 15px;
|
|
line-height: 1.9;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 26px;
|
|
margin-top: 30px;
|
|
}
|
|
.hero-notes {
|
|
display: flex;
|
|
gap: 19px;
|
|
flex-wrap: wrap;
|
|
margin-top: 29px;
|
|
color: #758474;
|
|
font-size: 10px;
|
|
}
|
|
.hero-notes span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.hero-art {
|
|
position: relative;
|
|
min-height: 330px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.artifact-caption {
|
|
position: absolute;
|
|
top: -15px;
|
|
right: 44px;
|
|
color: #53674f;
|
|
font: 9px monospace;
|
|
letter-spacing: 2px;
|
|
}
|
|
.map-art-frame {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 315px;
|
|
transform: rotate(9deg);
|
|
border: 14px solid var(--sand);
|
|
box-shadow:
|
|
0 0 0 3px #715c3c,
|
|
6px 6px 0 3px #362e20,
|
|
22px 22px 40px #0009;
|
|
clip-path: polygon(
|
|
0 0,
|
|
30% 0,
|
|
30% 2%,
|
|
70% 2%,
|
|
70% 0,
|
|
100% 0,
|
|
100% 30%,
|
|
98% 30%,
|
|
98% 70%,
|
|
100% 70%,
|
|
100% 100%,
|
|
72% 100%,
|
|
72% 98%,
|
|
30% 98%,
|
|
30% 100%,
|
|
0 100%,
|
|
0 70%,
|
|
2% 70%,
|
|
2% 30%,
|
|
0 30%
|
|
);
|
|
}
|
|
.map-art-frame img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
}
|
|
.map-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 39px,
|
|
#ddd7aa22 39px,
|
|
#ddd7aa22 40px
|
|
),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 39px,
|
|
#ddd7aa22 39px,
|
|
#ddd7aa22 40px
|
|
);
|
|
}
|
|
.map-pin {
|
|
position: absolute;
|
|
top: 41%;
|
|
left: 44%;
|
|
color: #da6948;
|
|
filter: drop-shadow(4px 5px 1px #0008);
|
|
transform: rotate(-9deg);
|
|
}
|
|
.map-corner {
|
|
position: absolute;
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 2px solid #deddad77;
|
|
}
|
|
.top-left {
|
|
top: 7px;
|
|
left: 7px;
|
|
}
|
|
.bottom-right {
|
|
bottom: 7px;
|
|
right: 7px;
|
|
}
|
|
.floating-coord {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 18px;
|
|
left: 12%;
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: center;
|
|
font: 10px monospace;
|
|
letter-spacing: 1px;
|
|
padding: 12px 15px;
|
|
background: #15221b;
|
|
border: 1px solid #375135;
|
|
box-shadow: 5px 5px 0 #070d0988;
|
|
transform: rotate(-3deg);
|
|
}
|
|
.square-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--green);
|
|
}
|
|
.coord-muted {
|
|
color: #839680;
|
|
margin-left: 20px;
|
|
}
|
|
.compass-art {
|
|
position: absolute;
|
|
right: 3%;
|
|
top: 18%;
|
|
padding: 15px;
|
|
background: #1b261e;
|
|
border: 2px solid #4a5941;
|
|
box-shadow: 5px 5px 0 #070d07;
|
|
transform: rotate(-13deg);
|
|
color: #d6c096;
|
|
}
|
|
.compass-art small {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 35px;
|
|
font: 9px monospace;
|
|
}
|
|
.floating-tag {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 4%;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: #a9b79d;
|
|
font: 9px monospace;
|
|
letter-spacing: 1px;
|
|
background: #101a13;
|
|
border: 1px solid #32432d;
|
|
padding: 12px 16px;
|
|
transform: rotate(-3deg);
|
|
}
|
|
.grass-divider {
|
|
height: 18px;
|
|
background: repeating-linear-gradient(
|
|
90deg,
|
|
#527c38 0,
|
|
#527c38 18px,
|
|
#476e2f 18px,
|
|
#476e2f 34px,
|
|
#6a9148 34px,
|
|
#6a9148 50px
|
|
);
|
|
border-top: 3px solid #84b955;
|
|
border-bottom: 4px solid #26391c;
|
|
box-shadow:
|
|
0 7px 0 #211d14,
|
|
0 10px 0 #34281a;
|
|
}
|
|
.world-stats {
|
|
max-width: 1168px;
|
|
margin: 38px auto 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr) 1fr;
|
|
gap: 24px;
|
|
padding: 22px 32px;
|
|
border: 1px solid #263426;
|
|
background: #101812;
|
|
}
|
|
.world-stats > div {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
border-right: 1px solid #2a3628;
|
|
}
|
|
.world-stats strong {
|
|
font:
|
|
28px/1.1 "Courier New",
|
|
monospace;
|
|
color: #dfead5;
|
|
}
|
|
.world-stats span:not(.live-dot) {
|
|
font: 9px/1.7 monospace;
|
|
color: #8b9c84;
|
|
letter-spacing: 1px;
|
|
max-width: 100px;
|
|
}
|
|
.world-stats .stat-note {
|
|
border: 0;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: #8c9d86;
|
|
}
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
margin-bottom: 30px;
|
|
}
|
|
.section-heading h2 {
|
|
margin: 0;
|
|
}
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 23px;
|
|
}
|
|
.map-card {
|
|
display: block;
|
|
border: 1px solid #2e3d2d;
|
|
background: #141d16;
|
|
transition:
|
|
transform 0.2s,
|
|
border-color 0.2s;
|
|
overflow: hidden;
|
|
}
|
|
.map-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: #719857;
|
|
}
|
|
.card-image {
|
|
height: 210px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.card-image img {
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
transition: transform 0.35s;
|
|
}
|
|
.map-card:hover .card-image img {
|
|
transform: scale(1.04);
|
|
}
|
|
.card-type {
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 14px;
|
|
padding: 5px 8px;
|
|
background: #0a130de6;
|
|
border: 1px solid #879b6b33;
|
|
color: #c5d6b1;
|
|
font: 9px monospace;
|
|
letter-spacing: 1px;
|
|
}
|
|
.card-number {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
right: 12px;
|
|
font: 38px monospace;
|
|
color: #ffffff60;
|
|
}
|
|
.card-body {
|
|
padding: 24px 20px 18px;
|
|
}
|
|
.card-body .eyebrow {
|
|
font-size: 9px;
|
|
margin-bottom: 9px;
|
|
color: #92a583;
|
|
}
|
|
.card-body h3 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 22px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.card-body h3 svg {
|
|
color: #758970;
|
|
}
|
|
.card-body p {
|
|
color: #91a08b;
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
min-height: 42px;
|
|
}
|
|
.card-meta {
|
|
padding-top: 14px;
|
|
border-top: 1px solid #2b3729;
|
|
color: #83947c;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font: 10px monospace;
|
|
flex-wrap: wrap;
|
|
}
|
|
.card-meta span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.journey {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.9fr;
|
|
gap: 70px;
|
|
border-top: 1px solid #233121;
|
|
padding-top: 55px;
|
|
padding-bottom: 55px;
|
|
}
|
|
.journey-intro h2 {
|
|
font-size: 38px;
|
|
line-height: 1.15;
|
|
}
|
|
.journey-intro p {
|
|
color: #8a9b84;
|
|
font-size: 13px;
|
|
}
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
padding-top: 22px;
|
|
}
|
|
.steps article {
|
|
position: relative;
|
|
border-top: 2px solid #395332;
|
|
padding: 22px 10px 10px 0;
|
|
}
|
|
.steps article > span {
|
|
position: absolute;
|
|
top: -12px;
|
|
right: 5px;
|
|
font: 12px monospace;
|
|
background: var(--bg);
|
|
padding: 0 6px;
|
|
color: #719659;
|
|
}
|
|
.steps svg {
|
|
color: #a2b994;
|
|
margin-bottom: 22px;
|
|
width: 27px;
|
|
height: 27px;
|
|
}
|
|
.steps h3 {
|
|
font-size: 17px;
|
|
letter-spacing: -0.4px;
|
|
}
|
|
.steps p {
|
|
font-size: 12px;
|
|
color: #8a9b84;
|
|
line-height: 1.9;
|
|
}
|
|
.contribute-banner {
|
|
background: linear-gradient(100deg, #1c2a19, #111b12);
|
|
border: 1px solid #3b5230;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 35px;
|
|
padding: 38px 45px;
|
|
margin-bottom: 70px;
|
|
position: relative;
|
|
box-shadow: 5px 5px 0 #050805;
|
|
}
|
|
.contribute-banner h2 {
|
|
font-size: 31px;
|
|
margin-bottom: 13px;
|
|
}
|
|
.contribute-banner p {
|
|
font-size: 13px;
|
|
color: #94a28b;
|
|
margin: 0;
|
|
}
|
|
.site-footer {
|
|
max-width: 1240px;
|
|
margin: auto;
|
|
border-top: 1px solid #233121;
|
|
padding: 36px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 25px;
|
|
}
|
|
.site-footer .brand {
|
|
font-size: 21px;
|
|
}
|
|
.site-footer p {
|
|
font-size: 11px;
|
|
color: #6f816a;
|
|
margin: 16px 0 0;
|
|
}
|
|
.site-footer > div:nth-child(2) {
|
|
display: flex;
|
|
gap: 25px;
|
|
font-size: 11px;
|
|
color: #8e9f87;
|
|
}
|
|
.site-footer span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.site-footer .disclaimer {
|
|
width: 100%;
|
|
border-top: 1px solid #233121;
|
|
padding-top: 18px;
|
|
margin-top: 0;
|
|
font-size: 10px;
|
|
color: #576b53;
|
|
}
|
|
.empty-state {
|
|
padding: 45px 30px;
|
|
border: 1px dashed #3d4c36;
|
|
text-align: center;
|
|
background: #101811;
|
|
}
|
|
.empty-state > svg {
|
|
color: var(--green);
|
|
margin-bottom: 18px;
|
|
}
|
|
.empty-state p {
|
|
max-width: 490px;
|
|
margin: 0 auto 25px;
|
|
color: var(--muted);
|
|
}
|
|
.catalog-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
justify-content: space-between;
|
|
margin: 35px 0;
|
|
}
|
|
.map-import-dialog {
|
|
margin: auto;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
width: min(540px, calc(100vw - 32px));
|
|
max-height: calc(100dvh - 32px);
|
|
overflow: auto;
|
|
}
|
|
.map-import-dialog::backdrop { background: rgb(0 0 0 / 65%); }
|
|
.map-import-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.map-import-heading h2 { margin: 0; }
|
|
.map-import-dialog .field input { max-width: 100%; }
|
|
.map-export { margin: 16px 0; }
|
|
.catalog-search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
|
|
.catalog-search .search-field { flex: 1; min-width: 0; }
|
|
.catalog-search .search-field input { min-width: 0; }
|
|
.catalog-search > .button { flex-shrink: 0; }
|
|
.search-field {
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
min-width: 260px;
|
|
}
|
|
.search-field input {
|
|
border: 0;
|
|
background: none;
|
|
color: var(--text);
|
|
outline: none;
|
|
width: 100%;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tabs button {
|
|
border: 1px solid transparent;
|
|
background: none;
|
|
color: var(--muted);
|
|
padding: 9px 14px;
|
|
font-size: 12px;
|
|
}
|
|
.tabs button.active {
|
|
background: #24351e;
|
|
border-color: #55743c;
|
|
color: #c1e69d;
|
|
}
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: 40px;
|
|
align-items: start;
|
|
margin-top: 40px;
|
|
}
|
|
.detail-map {
|
|
border: 10px solid #d6c096;
|
|
box-shadow: 4px 4px 0 #564326;
|
|
margin-bottom: 25px;
|
|
}
|
|
.detail-map img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
image-rendering: pixelated;
|
|
}
|
|
.start-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
padding: 30px;
|
|
}
|
|
.start-panel h2 {
|
|
font-size: 27px;
|
|
}
|
|
.difficulty-options {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
margin: 25px 0;
|
|
}
|
|
.difficulty-options button {
|
|
background: #0d160f;
|
|
border: 1px solid #34452e;
|
|
color: #b5c2aa;
|
|
padding: 17px 10px;
|
|
text-align: left;
|
|
}
|
|
.difficulty-options button.selected {
|
|
background: #273b1d;
|
|
border-color: var(--green);
|
|
box-shadow: inset 0 3px var(--green);
|
|
}
|
|
.difficulty-options strong {
|
|
display: block;
|
|
font-size: 15px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.difficulty-options span {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
.difficulty-library {
|
|
margin: -12px 0 24px;
|
|
}
|
|
.difficulty-builder {
|
|
display: grid;
|
|
gap: 10px;
|
|
max-width: 430px;
|
|
margin-top: 12px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
background: #0d160f;
|
|
}
|
|
.difficulty-builder label {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.difficulty-builder > input,
|
|
.difficulty-builder-time input {
|
|
min-height: 42px;
|
|
padding: 9px 11px;
|
|
border: 1px solid #34452e;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
font: inherit;
|
|
}
|
|
.difficulty-builder-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
.difficulty-builder-time input {
|
|
width: 120px;
|
|
}
|
|
.difficulty-builder-time span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.difficulty-builder .difficulty-builder-zoom {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
}
|
|
.difficulty-builder-zoom input {
|
|
accent-color: var(--green);
|
|
}
|
|
.prose {
|
|
max-width: 850px;
|
|
}
|
|
.prose p {
|
|
color: var(--muted);
|
|
}
|
|
.prose h2 {
|
|
margin-top: 38px;
|
|
font-size: 25px;
|
|
}
|
|
.tool-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 25px;
|
|
margin: 40px 0;
|
|
}
|
|
.tool-card {
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
padding: 32px;
|
|
}
|
|
.tool-card > svg {
|
|
color: var(--green);
|
|
margin-bottom: 20px;
|
|
}
|
|
.tool-card ul {
|
|
padding-left: 19px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.tool-card li {
|
|
margin-bottom: 9px;
|
|
}
|
|
.tool-card .button {
|
|
margin-top: 16px;
|
|
}
|
|
code,
|
|
pre {
|
|
font-family: "Courier New", monospace;
|
|
}
|
|
pre {
|
|
background: #070d09;
|
|
border: 1px solid #2d3c2a;
|
|
padding: 18px;
|
|
color: #b7d79a;
|
|
overflow: auto;
|
|
font-size: 12px;
|
|
}
|
|
.auth-card {
|
|
max-width: 460px;
|
|
margin: 20px auto;
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
padding: 35px;
|
|
}
|
|
.field {
|
|
display: block;
|
|
margin: 20px 0;
|
|
color: #a7b49e;
|
|
font-size: 12px;
|
|
}
|
|
.field input,
|
|
.field textarea {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
margin-top: 7px;
|
|
background: #0b130d;
|
|
border: 1px solid #34432e;
|
|
color: var(--text);
|
|
}
|
|
.field textarea {
|
|
min-height: 90px;
|
|
}
|
|
.error-message {
|
|
background: #572b2333;
|
|
color: #ecad96;
|
|
border-left: 2px solid #bd6a50;
|
|
padding: 10px 14px;
|
|
font-size: 12px;
|
|
margin: 18px 0;
|
|
}
|
|
.success-message {
|
|
color: var(--green);
|
|
border-left: 2px solid var(--green);
|
|
padding: 10px 14px;
|
|
background: #a3e2710b;
|
|
}
|
|
.dashboard-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.draft-row {
|
|
border: 1px solid var(--line);
|
|
padding: 22px;
|
|
background: var(--panel);
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
.draft-row h3 {
|
|
margin-bottom: 9px;
|
|
}
|
|
.badge {
|
|
font: 10px monospace;
|
|
border: 1px solid #42583b;
|
|
color: #b3c99d;
|
|
padding: 4px 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.preview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
margin: 25px 0;
|
|
}
|
|
.preview-grid label {
|
|
display: block;
|
|
position: relative;
|
|
border: 1px solid #3e5335;
|
|
cursor: pointer;
|
|
}
|
|
.preview-grid img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.preview-grid input {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
accent-color: var(--green);
|
|
}
|
|
.preview-grid span {
|
|
display: block;
|
|
font: 10px monospace;
|
|
padding: 6px 10px;
|
|
}
|
|
.token-box {
|
|
padding: 25px;
|
|
border: 1px solid var(--line);
|
|
background: var(--panel);
|
|
margin-top: 30px;
|
|
}
|
|
.token-box code {
|
|
display: block;
|
|
word-break: break-all;
|
|
padding: 15px;
|
|
background: #061008;
|
|
color: var(--green);
|
|
margin-top: 15px;
|
|
}
|
|
.history-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 25px;
|
|
}
|
|
.history-table td,
|
|
.history-table th {
|
|
text-align: left;
|
|
padding: 12px;
|
|
border-bottom: 1px solid #2c3b26;
|
|
font-size: 12px;
|
|
}
|
|
.history-table th {
|
|
color: #8fba72;
|
|
font: 11px monospace;
|
|
}
|
|
.game-page {
|
|
height: 100dvh;
|
|
min-height: 500px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #0d1710;
|
|
}
|
|
.panorama {
|
|
position: absolute;
|
|
inset: 0;
|
|
touch-action: none;
|
|
cursor: grab;
|
|
}
|
|
.panorama:active { cursor: grabbing; }
|
|
.panorama canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.game-header {
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
background: linear-gradient(#000a, transparent);
|
|
pointer-events: none;
|
|
}
|
|
.game-header > * {
|
|
pointer-events: auto;
|
|
}
|
|
.report-dialog {
|
|
width: min(540px, calc(100vw - 32px));
|
|
max-height: calc(100dvh - 40px);
|
|
overflow-y: auto;
|
|
margin: auto;
|
|
padding: 28px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 0;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
}
|
|
.report-dialog .field select {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 6px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
}
|
|
.report-dialog::backdrop {
|
|
background: #0009;
|
|
}
|
|
.game-header .report-dialog {
|
|
pointer-events: auto;
|
|
}
|
|
.game-header .brand {
|
|
font-size: 24px;
|
|
filter: drop-shadow(0 2px 2px #000);
|
|
}
|
|
.game-info {
|
|
display: flex;
|
|
gap: 27px;
|
|
padding: 10px 22px;
|
|
border: 1px solid #b4d68e33;
|
|
background: #111a14d9;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.game-info > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.game-info small {
|
|
font: 9px monospace;
|
|
color: #8c9f83;
|
|
letter-spacing: 1px;
|
|
}
|
|
.game-info strong {
|
|
font: 19px monospace;
|
|
color: #d9edc6;
|
|
}
|
|
.game-info .urgent {
|
|
color: #ef987d;
|
|
}
|
|
.game-map {
|
|
position: absolute;
|
|
z-index: 10;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
width: 320px;
|
|
box-shadow: 5px 5px 0 #0008;
|
|
border: 1px solid #506041;
|
|
background: #132015;
|
|
transition: width 0.2s;
|
|
}
|
|
.game-map.expanded {
|
|
width: min(650px, calc(100vw - 48px));
|
|
}
|
|
.map-topline {
|
|
padding: 8px 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font: 10px monospace;
|
|
color: #b6c6a6;
|
|
letter-spacing: 1px;
|
|
}
|
|
.map-topline button {
|
|
border: 0;
|
|
background: none;
|
|
color: #b6c6a6;
|
|
}
|
|
.map-surface {
|
|
height: 210px;
|
|
width: 100%;
|
|
position: relative;
|
|
background: #c8bd91;
|
|
}
|
|
.expanded .map-surface {
|
|
height: min(430px, 52vh);
|
|
}
|
|
.map-surface .leaflet-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #162119;
|
|
}
|
|
.map-surface .leaflet-control-attribution {
|
|
display: none;
|
|
}
|
|
.map-surface .leaflet-bar a {
|
|
background: #132315;
|
|
color: #d6eabd;
|
|
border-color: #4c6440;
|
|
}
|
|
.pin-marker {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: #e68559;
|
|
border: 2px solid #ffe7af;
|
|
box-shadow: 2px 2px #0008;
|
|
transform: rotate(45deg);
|
|
}
|
|
.actual-marker {
|
|
background: #a2db64;
|
|
}
|
|
.map-actions {
|
|
padding: 10px 12px;
|
|
}
|
|
.map-actions small {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
font: 10px monospace;
|
|
color: #84977b;
|
|
text-align: center;
|
|
}
|
|
.look-help {
|
|
position: absolute;
|
|
z-index: 5;
|
|
bottom: 28px;
|
|
left: 28px;
|
|
color: #e7efddc0;
|
|
font: 10px monospace;
|
|
display: flex;
|
|
gap: 20px;
|
|
background: #101a12aa;
|
|
padding: 10px 13px;
|
|
border: 1px solid #b9d18b33;
|
|
}
|
|
.panorama-controls {
|
|
position: absolute;
|
|
z-index: 6;
|
|
left: 28px;
|
|
top: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.panorama-controls button {
|
|
border: 1px solid #adc78e55;
|
|
background: #112016cc;
|
|
color: #e4efdb;
|
|
padding: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.game-loading {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background: #0b100fee;
|
|
z-index: 25;
|
|
color: #bad5a5;
|
|
}
|
|
.loading-cube {
|
|
width: 45px;
|
|
height: 45px;
|
|
background: var(--green);
|
|
border-bottom: 15px solid #705236;
|
|
box-shadow: 7px 7px 0 #263b20;
|
|
margin-bottom: 25px;
|
|
animation: pulse 1s infinite alternate;
|
|
}
|
|
@keyframes pulse {
|
|
to {
|
|
transform: translateY(-7px);
|
|
}
|
|
}
|
|
.round-result {
|
|
position: absolute;
|
|
z-index: 30;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: min(440px, calc(100vw - 32px));
|
|
background: #111c13f5;
|
|
border: 1px solid #577544;
|
|
box-shadow: 8px 8px 0 #0008;
|
|
text-align: center;
|
|
padding: 32px;
|
|
backdrop-filter: blur(15px);
|
|
}
|
|
.round-result h2 {
|
|
font-size: 33px;
|
|
margin: 15px 0;
|
|
}
|
|
.round-result .score {
|
|
font:
|
|
56px "Courier New",
|
|
monospace;
|
|
color: var(--green);
|
|
line-height: 1.1;
|
|
}
|
|
.round-result .score small {
|
|
font-size: 17px;
|
|
color: #83957b;
|
|
}
|
|
.round-result p {
|
|
color: #a2b197;
|
|
}
|
|
.results-total {
|
|
font:
|
|
70px "Courier New",
|
|
monospace;
|
|
color: var(--green);
|
|
margin: 25px 0;
|
|
}
|
|
.results-total small {
|
|
font-size: 22px;
|
|
color: #75866a;
|
|
}
|
|
.results-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 35px;
|
|
}
|
|
.result-map {
|
|
height: 420px;
|
|
border: 8px solid #d1bd8e;
|
|
}
|
|
.result-map .map-surface {
|
|
height: 100%;
|
|
}
|
|
.result-summary {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
padding: 30px;
|
|
}
|
|
.result-summary h2 {
|
|
font-size: 24px;
|
|
}
|
|
.inline-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.hero {
|
|
gap: 0;
|
|
}
|
|
.hero h1 {
|
|
font-size: 49px;
|
|
}
|
|
.map-art-frame {
|
|
width: 250px;
|
|
height: 270px;
|
|
}
|
|
.hero-notes {
|
|
gap: 10px;
|
|
}
|
|
.hero-art .floating-coord {
|
|
left: 3%;
|
|
}
|
|
.cards-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.world-stats {
|
|
margin-left: 36px;
|
|
margin-right: 36px;
|
|
}
|
|
.world-stats > div {
|
|
gap: 8px;
|
|
}
|
|
.journey {
|
|
gap: 35px;
|
|
}
|
|
.site-header nav {
|
|
gap: 17px;
|
|
}
|
|
.steps h3 {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
@media (max-width: 700px) {
|
|
.site-header {
|
|
height: 70px;
|
|
}
|
|
.header-inner {
|
|
padding: 0 20px;
|
|
gap: 15px;
|
|
}
|
|
.header-inner nav {
|
|
display: none;
|
|
}
|
|
.header-account {
|
|
font-size: 10px;
|
|
padding: 9px;
|
|
}
|
|
.brand {
|
|
font-size: 23px;
|
|
}
|
|
.hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 45px 24px 30px;
|
|
}
|
|
.hero h1 {
|
|
font-size: 49px;
|
|
}
|
|
.hero-art {
|
|
min-height: 340px;
|
|
margin-top: 55px;
|
|
}
|
|
.hero-art .artifact-caption {
|
|
top: -15px;
|
|
right: 25px;
|
|
}
|
|
.floating-tag {
|
|
right: 7%;
|
|
bottom: 0;
|
|
}
|
|
.hero-actions {
|
|
gap: 18px;
|
|
}
|
|
.hero-notes {
|
|
gap: 15px;
|
|
}
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
.section {
|
|
padding: 45px 24px;
|
|
}
|
|
.world-stats {
|
|
margin: 30px 24px 0;
|
|
padding: 20px;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.world-stats > div:nth-child(2) {
|
|
border: 0;
|
|
}
|
|
.world-stats strong {
|
|
font-size: 24px;
|
|
}
|
|
.world-stats span:not(.live-dot) {
|
|
font-size: 8px;
|
|
}
|
|
.cards-grid,
|
|
.tool-grid,
|
|
.detail-grid,
|
|
.results-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.card-image {
|
|
height: 240px;
|
|
}
|
|
.section-heading {
|
|
gap: 15px;
|
|
align-items: center;
|
|
}
|
|
.section-heading h2 {
|
|
font-size: 30px;
|
|
}
|
|
.journey {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.steps {
|
|
gap: 18px;
|
|
}
|
|
.steps h3 {
|
|
font-size: 14px;
|
|
}
|
|
.contribute-banner {
|
|
margin: 0 24px 45px;
|
|
padding: 28px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.contribute-banner h2 {
|
|
font-size: 27px;
|
|
}
|
|
.site-footer {
|
|
padding: 28px 24px;
|
|
}
|
|
.catalog-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.difficulty-options {
|
|
gap: 8px;
|
|
}
|
|
.start-panel {
|
|
padding: 22px;
|
|
}
|
|
.preview-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.draft-row {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.game-header {
|
|
padding: 15px;
|
|
}
|
|
.game-header .brand {
|
|
font-size: 19px;
|
|
}
|
|
.game-header .brand sup {
|
|
display: none;
|
|
}
|
|
.game-header .brand-cube {
|
|
width: 20px;
|
|
height: 22px;
|
|
}
|
|
.game-info {
|
|
padding: 8px 12px;
|
|
gap: 15px;
|
|
}
|
|
.game-info strong {
|
|
font-size: 15px;
|
|
}
|
|
.game-info small {
|
|
font-size: 7px;
|
|
}
|
|
.game-map {
|
|
right: 14px;
|
|
bottom: 14px;
|
|
width: 240px;
|
|
}
|
|
.game-map.expanded {
|
|
width: calc(100vw - 28px);
|
|
}
|
|
.game-map .map-surface {
|
|
height: 155px;
|
|
}
|
|
.game-map.expanded .map-surface {
|
|
height: min(350px, 45vh);
|
|
}
|
|
.look-help {
|
|
left: 14px;
|
|
bottom: 300px;
|
|
font-size: 8px;
|
|
gap: 12px;
|
|
}
|
|
.panorama-controls {
|
|
left: 15px;
|
|
top: 90px;
|
|
}
|
|
.round-result {
|
|
top: 38%;
|
|
padding: 23px;
|
|
}
|
|
.round-result h2 {
|
|
font-size: 26px;
|
|
}
|
|
.round-result .score {
|
|
font-size: 42px;
|
|
}
|
|
.results-total {
|
|
font-size: 52px;
|
|
}
|
|
.result-map {
|
|
height: 300px;
|
|
}
|
|
.auth-card {
|
|
padding: 26px;
|
|
}
|
|
.page-content h1 {
|
|
font-size: 42px;
|
|
}
|
|
}
|
|
/* Contributor and moderator previews use the same projection as the game. */
|
|
.panorama-preview {
|
|
position: fixed;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: min(1180px, calc(100vw - 64px));
|
|
height: min(820px, calc(100dvh - 64px));
|
|
max-width: none;
|
|
max-height: calc(100dvh - 32px);
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
border: 1px solid #455663;
|
|
box-shadow: 0 30px 100px #0009;
|
|
}
|
|
.panorama-preview[open] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.panorama-preview.is-expanded {
|
|
width: calc(100vw - 24px);
|
|
height: calc(100dvh - 24px);
|
|
max-height: none;
|
|
}
|
|
.panorama-preview::backdrop {
|
|
background: #03070edb;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
flex: none;
|
|
}
|
|
.preview-header h2 {
|
|
font-size: 34px;
|
|
line-height: 1;
|
|
margin: 5px 0 0;
|
|
}
|
|
.preview-header .eyebrow {
|
|
font-size: 10px;
|
|
}
|
|
.preview-header-actions,
|
|
.preview-navigation {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
flex: none;
|
|
border: 1px solid #40505d;
|
|
background: #1b2834;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
.icon-button:hover {
|
|
background: #2b3d4a;
|
|
}
|
|
.icon-button:disabled {
|
|
opacity: 0.35;
|
|
cursor: default;
|
|
}
|
|
:where(button, a, input, textarea, select):focus-visible {
|
|
outline: 2px solid var(--green);
|
|
outline-offset: 4px;
|
|
}
|
|
.preview-location {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.preview-counter {
|
|
margin-left: auto;
|
|
color: var(--muted);
|
|
font: 12px monospace;
|
|
white-space: nowrap;
|
|
}
|
|
.preview-footer {
|
|
padding: 15px 24px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
display: flex;
|
|
gap: 18px;
|
|
justify-content: space-between;
|
|
flex: none;
|
|
}
|
|
.preview-footer span:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.preview-viewport .panorama-controls {
|
|
right: 18px;
|
|
bottom: 18px;
|
|
}
|
|
.preview-viewport .panorama-controls button {
|
|
width: 42px;
|
|
height: 42px;
|
|
background: #0d1724e8;
|
|
}
|
|
.preview-viewport .panorama {
|
|
cursor: grab;
|
|
}
|
|
.preview-viewport .panorama:active {
|
|
cursor: grabbing;
|
|
}
|
|
.preview-status {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
@media (max-width: 700px) {
|
|
.panorama-preview {
|
|
width: calc(100vw - 20px);
|
|
height: calc(100dvh - 20px);
|
|
max-height: none;
|
|
}
|
|
.preview-header {
|
|
padding: 16px;
|
|
}
|
|
.preview-header h2 {
|
|
font-size: 28px;
|
|
}
|
|
.preview-footer {
|
|
padding: 12px 16px;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
}
|
|
.preview-location {
|
|
flex: 1;
|
|
}
|
|
.preview-location > span {
|
|
display: none;
|
|
}
|
|
}
|
|
.preview-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 12px 24px;
|
|
flex: none;
|
|
}
|
|
.preview-toolbar select {
|
|
background: #141e27;
|
|
color: var(--text);
|
|
border: 1px solid #40505d;
|
|
border-radius: 4px;
|
|
padding: 10px 12px;
|
|
max-width: 300px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
.preview-viewport {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 140px;
|
|
overflow: hidden;
|
|
background: #080f18;
|
|
}
|
|
.preview-status {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-content: center;
|
|
background: #0b1119e8;
|
|
z-index: 5;
|
|
padding: 20px;
|
|
}
|
|
.preview-tile {
|
|
min-width: 0;
|
|
}
|
|
.preview-tile > label {
|
|
display: block;
|
|
position: relative;
|
|
}
|