@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/rubik-400.woff2') format('woff2');
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/rubik-500.woff2') format('woff2');
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/rubik-700.woff2') format('woff2');
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/press-start-2p.woff2') format('woff2');
}
:root {
--cream: #FFF6E3;
--ink: #3A2410;
--grass: #6DBE4B;
--grass-dark: #4E9634;
--dirt: #7A4F33;
--dirt-dark: #5C3A24;
--stone: #55595E;
--stone-dark: #43474C;
--deep: #33363B;
--deep-dark: #26292D;
--bedrock: #141519;
--accent: #FF8A00;
--gold: #F7C325;
--diamond: #4FD6E8;
--redstone: #FF7B72;
--u: 24px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
font-family: 'Rubik', sans-serif;
color: var(--cream);
background: var(--bedrock);
overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
.layer {
position: relative;
padding: 96px 24px;
}
.inner {
max-width: 880px;
margin: 0 auto;
}
.layer-dirt::before,
.layer-stone::before,
.layer-deep::before,
.layer-bedrock::before {
content: '';
position: absolute;
top: calc(var(--u) * -1 + 1px);
left: 0;
right: 0;
height: var(--u);
background-image: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%);
background-size: calc(var(--u) * 2) calc(var(--u) * 2);
pointer-events: none;
}
.depth {
position: absolute;
top: 32px;
right: 20px;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
opacity: 0.45;
letter-spacing: 1px;
user-select: none;
}
.reveal {
opacity: 0;
translate: 0 24px;
transition: opacity 0.6s ease, translate 0.6s ease;
}
.reveal.shown {
opacity: 1;
translate: 0 0;
}
.layer-sky {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(
180deg,
#6EA8F0 0%,   #6EA8F0 18%,
#86B8F4 18%,  #86B8F4 36%,
#9EC7F7 36%,  #9EC7F7 54%,
#B5D5FA 54%,  #B5D5FA 72%,
#CCE3FC 72%,  #CCE3FC 88%,
#E3F1FE 88%,  #E3F1FE 100%
);
color: var(--ink);
padding-bottom: 140px;
}
.sun {
position: absolute;
top: 11%;
left: 9%;
width: 56px;
height: 56px;
background: #FFFDF4;
box-shadow:
0 0 0 8px rgba(255, 253, 244, 0.35),
72px 0 0 -20px rgba(255, 253, 244, 0.5),
-72px 0 0 -20px rgba(255, 253, 244, 0.5),
0 72px 0 -20px rgba(255, 253, 244, 0.5),
0 -72px 0 -20px rgba(255, 253, 244, 0.5),
0 0 64px 24px rgba(255, 240, 180, 0.8);
animation: sunspin 24s steps(8) infinite;
}
@keyframes sunspin {
to { rotate: 360deg; }
}
.cloud {
position: absolute;
width: 112px;
height: 24px;
background: var(--cream);
opacity: 0.9;
}
.cloud::before {
content: '';
position: absolute;
top: -16px;
left: 24px;
width: 56px;
height: 16px;
background: var(--cream);
}
.cloud::after {
content: '';
position: absolute;
bottom: -8px;
left: 40px;
width: 40px;
height: 8px;
background: var(--cream);
opacity: 0.7;
}
.cloud-1 { top: 18%; left: -120px; animation: drift 46s linear infinite; }
.cloud-2 { top: 34%; left: -120px; animation: drift 64s linear infinite; animation-delay: -30s; transform: scale(0.7); }
.cloud-3 { top: 8%;  left: -120px; animation: drift 55s linear infinite; animation-delay: -14s; transform: scale(1.25); }
@keyframes drift {
from { translate: 0 0; }
to   { translate: 110vw 0; }
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
z-index: 1;
}
.title {
font-family: 'Press Start 2P', monospace;
font-size: clamp(26px, 6vw, 52px);
line-height: 1.25;
letter-spacing: 2px;
text-shadow:
4px 4px 0 rgba(58, 36, 16, 0.2),
8px 8px 0 rgba(58, 36, 16, 0.08);
}
.title span { color: var(--accent); }
.tagline {
font-size: clamp(15px, 2.4vw, 19px);
font-weight: 500;
max-width: 42ch;
}
.duck-btn {
background: none;
border: none;
padding: 8px;
cursor: pointer;
animation: bob 2.4s steps(3, end) infinite;
}
.duck-btn:hover .duck { scale: 1.08; rotate: -4deg; }
.duck-btn:active .duck { scale: 0.94; }
.duck-btn:focus-visible {
outline: 3px dashed var(--ink);
outline-offset: 6px;
}
.duck {
width: 132px;
height: 110px;
transition: scale 0.1s ease, rotate 0.1s ease;
}
@keyframes bob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
.duck-btn[hidden],
.game-frame[hidden] { display: none; }
.game-frame {
position: relative;
width: min(720px, 92vw);
border: 3px solid var(--ink);
background: rgba(255, 246, 227, 0.35);
box-shadow:
inset 0 0 0 3px rgba(255, 246, 227, 0.5),
0 8px 0 rgba(58, 36, 16, 0.25);
cursor: pointer;
}
#duckGame {
width: 100%;
height: auto;
image-rendering: pixelated;
touch-action: manipulation;
}
#duckGame:focus-visible {
outline: 3px dashed var(--ink);
outline-offset: 4px;
}
.game-hint {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: var(--ink);
pointer-events: none;
animation: blink 1.6s steps(2, end) infinite;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 6px;
}
.btn {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
color: var(--cream);
text-decoration: none;
border: 3px solid #1A1006;
padding: 16px 22px;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: #7A7A7A;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.4),
inset -3px -3px 0 rgba(0, 0, 0, 0.35),
0 6px 0 rgba(26, 16, 6, 0.55);
transition: translate 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active {
translate: 0 4px;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.4),
inset -3px -3px 0 rgba(0, 0, 0, 0.35),
0 2px 0 rgba(26, 16, 6, 0.55);
}
.btn:focus-visible {
outline: 3px dashed var(--ink);
outline-offset: 4px;
}
.btn-ip { background: var(--grass-dark); }
.btn-discord { background: #5865F2; justify-content: center; }
.servers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
margin: 0 auto 26px;
max-width: 760px;
}
.server-card {
--srv: var(--grass);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
border: 3px solid #1A1006;
background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.14)), rgba(58, 36, 16, 0.12);
padding: 16px 14px 13px;
text-align: left;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.22),
inset -3px -3px 0 rgba(0, 0, 0, 0.22),
0 6px 0 rgba(26, 16, 6, 0.45);
transition: translate 0.12s ease, box-shadow 0.12s ease;
}
.server-card[data-icon='sky'] { --srv: var(--diamond); }
.server-card[data-icon='pvp'] { --srv: var(--redstone); }
.server-card[data-icon='creative'] { --srv: var(--gold); }
.server-card[data-icon='nether'] { --srv: var(--accent); }
.server-card[data-icon='block'] { --srv: #A9AEB4; }
.server-card::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
background: var(--srv);
}
.server-card { cursor: pointer; }
.server-card:hover,
.server-card:focus-visible {
translate: 0 -3px;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.22),
inset -3px -3px 0 rgba(0, 0, 0, 0.22),
0 9px 0 rgba(26, 16, 6, 0.5);
}
.server-card:focus-visible { outline: 3px solid var(--srv); outline-offset: 3px; }
.server-top {
display: flex;
align-items: flex-start;
gap: 10px;
}
.server-icon {
flex: none;
width: 42px;
height: 42px;
padding: 5px;
background: rgba(26, 16, 6, 0.32);
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.45), inset -2px -2px 0 rgba(255, 255, 255, 0.16);
}
.server-icon svg { width: 100%; height: 100%; }
.server-titles { min-width: 0; }
.server-name {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
line-height: 1.55;
margin: 0;
}
.server-mode {
display: inline-block;
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3px;
text-transform: lowercase;
margin-top: 6px;
padding: 2px 7px;
color: var(--srv);
border: 2px solid currentColor;
opacity: 0.85;
}
.server-count {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
}
.server-num {
font-family: 'Press Start 2P', monospace;
font-size: 25px;
line-height: 1;
color: var(--srv);
text-shadow: 0 3px 0 rgba(26, 16, 6, 0.5);
}
.server-online {
font-family: 'Rubik', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
opacity: 0.7;
}
.server-slots {
position: relative;
display: flex;
gap: 3px;
overflow: hidden;
}
.server-slots i {
flex: 1 1 0;
height: 10px;
background: rgba(26, 16, 6, 0.4);
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.server-slots i[data-on] {
background: var(--srv);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset -1px -1px 0 rgba(0, 0, 0, 0.25);
}
.server-card[data-state='up'] .server-slots::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 42%, rgba(255, 246, 227, 0.45) 50%, transparent 58%);
translate: -110% 0;
animation: srv-sweep 3.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes srv-sweep {
0%, 55% { translate: -110% 0; }
100% { translate: 110% 0; }
}
.server-heads {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.server-heads .mc-head {
width: 22px;
height: 22px;
border: 2px solid #1A1006;
}
.server-more {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
opacity: 0.7;
}
.server-card[data-state='down'],
.server-card[data-state='wait'] {
--srv: #6B7076;
opacity: 0.72;
}
.server-card[data-state='down']::before {
background: repeating-linear-gradient(45deg, #B9432F 0 6px, #1A1006 6px 12px);
}
.server-card[data-state='down'] .server-online {
color: var(--redstone);
opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
.server-card { transition: none; }
.server-card[data-state='up'] .server-slots::after { animation: none; opacity: 0; }
}
.ip-hint {
font-family: 'Rubik', sans-serif;
font-size: 12px;
font-weight: 500;
opacity: 0.8;
letter-spacing: 0.3px;
text-align: center;
margin-top: 10px;
}
.online-pill {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 15px;
background: rgba(58, 36, 16, 0.12);
border: 2px solid rgba(58, 36, 16, 0.25);
padding: 8px 18px;
}
.dot {
width: 10px;
height: 10px;
background: var(--grass-dark);
animation: blink 2s steps(2, end) infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.meadow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
pointer-events: none;
}
.flower {
position: absolute;
bottom: 0;
width: 21px;
height: auto;
transform-origin: 50% 100%;
animation: flowersway 3.4s ease-in-out infinite alternate;
}
@keyframes flowersway {
from { rotate: -4deg; }
to { rotate: 4deg; }
}
.fly {
position: absolute;
pointer-events: none;
z-index: 1;
}
.fly-bee {
top: 0;
left: 0;
width: 30px;
animation: beetrip 37s linear infinite;
}
@keyframes beetrip {
0%   { translate: -5vw 24vh; scale: 1 1; }
20%  { translate: 20vw 31vh; }
40%  { translate: 45vw 22vh; }
49%  { scale: 1 1; }
50%  { translate: 60vw 28vh; scale: -1 1; }
70%  { translate: 35vw 35vh; }
90%  { translate: 5vw 26vh; }
99%  { scale: -1 1; }
100% { translate: -5vw 24vh; scale: 1 1; }
}
.fly-butterfly {
top: 0;
right: 0;
width: 26px;
animation: flutter 23s ease-in-out infinite;
}
@keyframes flutter {
0%   { translate: -12vw 30vh; }
25%  { translate: -22vw 22vh; }
50%  { translate: -14vw 38vh; }
75%  { translate: -26vw 28vh; }
100% { translate: -12vw 30vh; }
}
@media (max-width: 560px) {
.flower { width: 15px; }
.fly-bee { width: 22px; }
.fly-butterfly { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.flower, .fly { animation: none; }
.fly { display: none; }
}
.scroll-hint {
position: absolute;
bottom: 40px;
left: 50%;
translate: -50% 0;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--ink);
opacity: 0.55;
animation: hintbob 2s steps(2, end) infinite;
}
@keyframes hintbob {
0%, 100% { translate: -50% 0; }
50% { translate: -50% 6px; }
}
.layer-dirt {
background-color: var(--dirt);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='2' y='3' width='2' height='2' fill='%235C3A24'/%3E%3Crect x='11' y='1' width='2' height='2' fill='%238A5E3E'/%3E%3Crect x='6' y='9' width='2' height='2' fill='%235C3A24'/%3E%3Crect x='13' y='12' width='2' height='2' fill='%238A5E3E'/%3E%3Crect x='1' y='13' width='2' height='2' fill='%23684226'/%3E%3C/svg%3E");
background-size: 64px 64px;
color: var(--grass);
padding-top: 72px;
}
.layer-dirt .depth { color: var(--cream); }
.grass-strip {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background-color: var(--grass);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='3' y='2' width='2' height='2' fill='%234E9634'/%3E%3Crect x='10' y='6' width='2' height='2' fill='%238FD867'/%3E%3Crect x='6' y='11' width='2' height='2' fill='%234E9634'/%3E%3C/svg%3E");
background-size: 32px 32px;
box-shadow: 0 6px 0 var(--grass-dark);
}
.layer-stone {
background-color: var(--stone);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='3' y='2' width='3' height='2' fill='%2343474C'/%3E%3Crect x='10' y='6' width='2' height='3' fill='%23636870'/%3E%3Crect x='5' y='11' width='3' height='2' fill='%2343474C'/%3E%3Crect x='13' y='13' width='2' height='2' fill='%23636870'/%3E%3C/svg%3E");
background-size: 64px 64px;
color: var(--stone);
}
.layer-deep {
background-color: var(--deep);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='2' y='4' width='3' height='2' fill='%2326292D'/%3E%3Crect x='11' y='9' width='2' height='3' fill='%233E4248'/%3E%3Crect x='6' y='13' width='3' height='2' fill='%2326292D'/%3E%3C/svg%3E");
background-size: 64px 64px;
color: var(--deep);
}
.layer-dirt .inner,
.layer-stone .inner,
.layer-deep .inner { color: var(--cream); }
.h-pixel {
font-family: 'Press Start 2P', monospace;
font-size: clamp(16px, 3.4vw, 24px);
line-height: 1.5;
margin-bottom: 12px;
}
.sub {
opacity: 0.75;
margin-bottom: 36px;
font-size: 15px;
}
.xp-wrap {
display: flex;
align-items: center;
gap: 16px;
margin: 28px 0 32px;
}
.xp-bar {
flex: 1;
max-width: 420px;
height: 14px;
background: rgba(0, 0, 0, 0.45);
border: 2px solid #1A1006;
padding: 2px;
}
.xp-fill {
height: 100%;
width: 0%;
background: linear-gradient(180deg, #A8E85C 0%, #6DBE4B 60%, #4E9634 100%);
transition: width 0.8s ease;
}
.xp-label {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
white-space: nowrap;
}
.players {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.players li {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--dirt-dark);
border: 2px solid #1A1006;
padding: 8px 14px 8px 8px;
font-weight: 500;
font-size: 14px;
}
.players .mc-head {
width: 28px;
height: 28px;
}
.players-empty {
opacity: 0.8;
font-size: 15px;
}
.sign-wrap {
margin-top: 48px;
display: flex;
flex-direction: column;
align-items: center;
}
.sign-wrap[hidden] { display: none; }
.surface-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 32px;
}
.surface-row .online-graph {
flex: 1 1 360px;
min-width: 0;
}
.surface-row .sign-wrap {
flex: 0 1 auto;
margin-top: 36px;
}
.sign-board {
background: #A9762F;
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.12) 0 2px,
transparent 2px 100%
), repeating-linear-gradient(
0deg,
transparent 0 14px,
rgba(0, 0, 0, 0.12) 14px 15px
);
border: 3px solid #1A1006;
padding: 18px 28px 20px;
max-width: 420px;
text-align: center;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.2),
inset -2px -2px 0 rgba(0, 0, 0, 0.25),
0 6px 0 rgba(0, 0, 0, 0.3);
}
.sign-caption {
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.6;
color: #2B1C08;
margin-bottom: 10px;
font-weight: 700;
}
.sign-timer {
margin-top: 14px;
font-size: 11px;
color: #2B1C08;
opacity: 0.55;
font-variant-numeric: tabular-nums;
}
.sign-timer[hidden] { display: none; }
.sign-text {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
line-height: 2;
color: #2B1C08;
word-break: break-word;
}
.sign-post {
width: 14px;
height: 42px;
background: #8A5A38;
border: 3px solid #1A1006;
border-top: none;
}
.ores {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 720px) {
.ores { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.ores { grid-template-columns: 1fr; }
}
.ore-card {
background: var(--stone-dark);
border: 3px solid #1A1006;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 9px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
transition: translate 0.15s ease, box-shadow 0.15s ease;
}
.ore-card:hover {
translate: 0 -4px;
}
.ore-gold:hover {
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3),
0 0 24px rgba(247, 195, 37, 0.35);
}
.ore-diamond:hover {
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3),
0 0 24px rgba(79, 214, 232, 0.35);
}
.ore-redstone:hover {
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3),
0 0 24px rgba(232, 72, 63, 0.35);
}
.ore { width: 34px; height: 34px; }
.ore-num {
font-family: 'Press Start 2P', monospace;
font-size: clamp(14px, 2.1vw, 19px);
color: var(--gold);
}
.ore-diamond .ore-num { color: var(--diamond); }
.ore-redstone .ore-num { color: var(--redstone); }
.ore-label {
font-size: 12px;
line-height: 1.35;
opacity: 0.75;
}
.ore-iron .ore-num { color: #D8AF93; }
.ore-iron:hover {
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3),
0 0 24px rgba(216, 175, 147, 0.35);
}
.growth { margin-top: 56px; }
.growth[hidden] { display: none; }
.charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 40px;
align-items: start;
width: min(1180px, max(100%, calc(100vw - 64px)));
margin-left: 50%;
translate: -50% 0;
}
.charts .growth { margin-top: 0; }
.charts { margin-top: 56px; }
.h-pixel-sm {
font-family: 'Press Start 2P', monospace;
font-size: clamp(13px, 2.4vw, 17px);
line-height: 1.5;
margin-bottom: 8px;
}
.growth-frame {
border: 3px solid #1A1006;
background: var(--stone-dark);
padding: 16px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.growth-frame canvas {
width: 100%;
height: auto;
max-width: 100%;
}
.boards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
.board .h-pixel-sm { margin-bottom: 16px; }
.top-mob {
margin-top: 36px;
font-size: 15px;
opacity: 0.85;
border-left: 4px solid var(--redstone);
padding-left: 14px;
}
.top-mob[hidden] { display: none; }
.miners {
list-style: none;
counter-reset: rank;
display: flex;
flex-direction: column;
gap: 10px;
}
.miners li {
counter-increment: rank;
display: flex;
align-items: center;
gap: 16px;
background: var(--deep-dark);
border: 2px solid #1A1006;
padding: 12px 18px;
}
.miners li::before {
content: counter(rank);
font-family: 'Press Start 2P', monospace;
font-size: 14px;
color: var(--gold);
min-width: 28px;
}
.miners li:nth-child(2)::before { color: #C9CCD1; }
.miners li:nth-child(3)::before { color: #C77B3F; }
.miners li:nth-child(n+4)::before { color: #6E747C; }
.miners .mc-head {
width: 32px;
height: 32px;
}
.miners .nick { font-weight: 700; flex: 1; }
.miners .count {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
opacity: 0.8;
}
.layer-bedrock {
background-color: var(--bedrock);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='1' y='2' width='4' height='3' fill='%23202127'/%3E%3Crect x='9' y='7' width='4' height='3' fill='%230D0E11'/%3E%3Crect x='4' y='11' width='3' height='3' fill='%23202127'/%3E%3C/svg%3E");
background-size: 48px 48px;
color: var(--bedrock);
padding: 72px 24px 56px;
}
.footer-inner {
color: var(--cream);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.foot-brand {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
}
.footer-inner a {
color: var(--gold);
text-decoration: none;
font-weight: 500;
}
.footer-inner a:hover { text-decoration: underline; }
.footer-inner a:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }
.foot-note {
font-size: 13px;
opacity: 0.4;
}
.foot-legal {
margin-top: 28px;
padding-top: 20px;
border-top: 2px solid rgba(255, 246, 227, 0.1);
color: var(--cream);
font-size: 12px;
line-height: 1.6;
opacity: 0.45;
}
.foot-legal-en {
display: block;
margin-top: 4px;
font-size: 10px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.page-foot {
max-width: 1080px;
margin: 56px auto 0;
padding: 20px 24px 32px;
border-top: 2px solid rgba(255, 246, 227, 0.1);
color: var(--cream);
font-size: 12px;
line-height: 1.6;
text-align: center;
opacity: 0.45;
}
.page-foot .foot-legal-en { font-size: 10px; }
@media (max-width: 560px) {
.layer { padding: 72px 18px; }
.depth { top: 20px; right: 14px; font-size: 8px; }
.sun { width: 40px; height: 40px; }
.btn { width: 100%; }
.hero-actions { width: 100%; flex-direction: column; }
.game-hint { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.cloud, .dot, .sun, .scroll-hint, .game-hint, .duck-btn { animation: none; }
.xp-fill { transition: none; }
.reveal { opacity: 1; translate: 0 0; transition: none; }
}
.auth-page {
min-height: 100svh;
display: grid;
place-items: center;
background-color: var(--dirt);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='2' y='3' width='2' height='2' fill='%235C3A24'/%3E%3Crect x='11' y='1' width='2' height='2' fill='%238A5E3E'/%3E%3Crect x='6' y='9' width='2' height='2' fill='%235C3A24'/%3E%3Crect x='13' y='12' width='2' height='2' fill='%238A5E3E'/%3E%3C/svg%3E");
background-size: 64px 64px;
padding: 24px;
}
.auth-card {
width: min(420px, 94vw);
background: var(--stone-dark);
border: 3px solid #1A1006;
padding: 36px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.08),
inset -2px -2px 0 rgba(0, 0, 0, 0.3),
0 10px 0 rgba(0, 0, 0, 0.35);
color: var(--cream);
position: relative;
}
.auth-home {
position: absolute;
top: 12px;
left: 14px;
color: var(--cream);
opacity: 0.6;
font-size: 13px;
text-decoration: none;
}
.auth-home:hover { opacity: 1; }
.auth-duck { width: 84px; height: 70px; }
.auth-sub { opacity: 0.7; font-size: 14px; }
.auth-note {
background: rgba(109, 190, 75, 0.15);
border: 2px solid var(--grass-dark);
padding: 10px 14px;
font-size: 13px;
}
.auth-error {
background: rgba(232, 72, 63, 0.15);
border: 2px solid #B9432F;
padding: 10px 14px;
font-size: 13px;
}
.auth-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.auth-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
margin-top: 6px;
}
.auth-input {
font-family: 'Rubik', sans-serif;
font-size: 16px;
color: var(--cream);
background: #1E2023;
border: 2px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
padding: 12px 14px;
outline: none;
}
.auth-input:focus-visible { border-color: var(--gold); }
.auth-submit { width: 100%; margin-top: 12px; }
.auth-or {
opacity: 0.5;
font-size: 13px;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.auth-or::before, .auth-or::after {
content: '';
flex: 1;
height: 2px;
background: rgba(255, 246, 227, 0.15);
}
.auth-discord { width: 100%; }
.acc-page {
min-height: 100svh;
background-color: var(--deep);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='2' y='4' width='3' height='2' fill='%2326292D'/%3E%3Crect x='11' y='9' width='2' height='3' fill='%233E4248'/%3E%3Crect x='6' y='13' width='3' height='2' fill='%2326292D'/%3E%3C/svg%3E");
background-size: 64px 64px;
}
.acc-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
background: var(--bedrock);
border-bottom: 3px solid #1A1006;
}
.acc-brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Press Start 2P', monospace;
font-size: 13px;
color: var(--cream);
text-decoration: none;
}
.acc-brand-duck { width: 34px; height: 28px; }
.acc-logout {
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--cream);
background: none;
border: 2px solid rgba(255, 246, 227, 0.3);
padding: 8px 16px;
cursor: pointer;
}
.acc-logout:hover { border-color: var(--grass); color: var(--grass); }
.acc-main {
max-width: 880px;
margin: 0 auto;
padding: 40px 24px 80px;
display: flex;
flex-direction: column;
gap: 32px;
}
.acc-main-cab {
max-width: 1240px;
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "hero" "nav" "pane";
align-items: start;
column-gap: 28px;
row-gap: 32px;
}
.acc-main-cab > .acc-hero { grid-area: hero; }
.acc-main-cab > .acc-tabs { grid-area: nav; }
.acc-main-cab > .acc-pane-wrap { grid-area: pane; min-width: 0; }
.acc-hero {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 28px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.06),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.acc-skin {
width: 120px;
height: 120px;
border: 3px solid #1A1006;
background-color: #1E2023;
}
.acc-who { flex: 1; min-width: 200px; }
.acc-meta {
margin-top: 10px;
font-size: 14px;
opacity: 0.7;
color: var(--cream);
}
.acc-badges { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.acc-badge {
font-size: 12px;
padding: 6px 12px;
border: 2px solid var(--grass-dark);
color: var(--cream);
background: rgba(109, 190, 75, 0.12);
}
.acc-badge-link {
border-color: #5865F2;
background: rgba(88, 101, 242, 0.15);
text-decoration: none;
}
.acc-badge-link:hover { background: rgba(88, 101, 242, 0.3); }
.acc-badge[hidden] { display: none; }
.acc-balance {
text-align: right;
padding: 16px 22px;
border: 3px solid var(--grass-dark);
background: rgba(109, 190, 75, 0.1);
}
.acc-balance-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.6;
color: var(--cream);
}
.acc-balance-num {
font-family: 'Press Start 2P', monospace;
font-size: 22px;
color: #A8E85C;
margin-top: 8px;
}
.acc-section {
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 28px;
color: var(--cream);
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.06),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.hotbar {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 18px;
}
.slot {
background: #2A2C30;
border: 3px solid #1A1006;
box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, 0.5),
inset -2px -2px 0 rgba(255, 255, 255, 0.06);
padding: 16px 10px;
text-align: center;
}
.slot-num {
font-family: 'Press Start 2P', monospace;
font-size: clamp(11px, 1.8vw, 15px);
color: var(--gold);
word-break: break-all;
}
.slot-label {
margin-top: 10px;
font-size: 12px;
opacity: 0.65;
}
.acc-ranks { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.acc-rank { font-size: 14px; opacity: 0.9; }
.acc-rank-medal { margin-right: 6px; }
.topup-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.topup-btn { background: var(--grass-dark); }
.topup-custom { margin-top: 18px; }
.topup-custom-label {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.6;
color: var(--cream);
margin-bottom: 8px;
}
.topup-custom-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.topup-input-wrap { position: relative; flex: 0 1 220px; }
.topup-input {
width: 100%;
height: 100%;
padding-right: 34px;
font-family: 'Press Start 2P', monospace;
font-size: 13px;
}
.topup-input::-webkit-outer-spin-button,
.topup-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup-input { -moz-appearance: textfield; }
.topup-cur {
position: absolute;
top: 50%;
right: 14px;
translate: 0 -50%;
font-family: 'Press Start 2P', monospace;
font-size: 13px;
color: var(--gold);
pointer-events: none;
}
.topup-custom-btn { flex: 0 0 auto; }
@media (max-width: 480px) {
.topup-input-wrap { flex: 1 1 100%; }
.topup-custom-btn { width: 100%; }
}
.topup-hint {
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
opacity: 0.75;
}
.topup-hint.is-bonus { opacity: 1; }
.topup-hint b { color: #A8E85C; }
.topup-hint-next { color: var(--gold); }
.topup-btn.is-loading { opacity: 0.6; cursor: wait; }
.pay-watch {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 22px;
padding: 14px 16px;
border: 3px solid var(--stone);
background: rgba(85, 89, 94, 0.18);
}
.pay-watch.is-ok { border-color: var(--grass-dark); background: rgba(109, 190, 75, 0.14); }
.pay-watch.is-warn { border-color: var(--gold); background: rgba(247, 195, 37, 0.12); }
.pay-watch-ico { font-size: 22px; line-height: 1; }
.pay-watch.is-wait .pay-watch-ico { animation: payWatchPulse 1.4s steps(2) infinite; }
.pay-watch-body { display: flex; flex-direction: column; gap: 3px; }
.pay-watch-title { font-size: 14px; }
.pay-watch-text { font-size: 13px; line-height: 1.5; opacity: 0.8; }
@keyframes payWatchPulse {
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.pay-watch.is-wait .pay-watch-ico { animation: none; }
}
.acc-note {
margin-top: 16px;
background: rgba(247, 195, 37, 0.12);
border: 2px solid var(--gold);
padding: 10px 14px;
font-size: 13px;
}
.acc-note[hidden] { display: none; }
.prof-admin-note {
background: rgba(79, 214, 232, 0.12);
border-color: var(--diamond);
}
.acc-tx-title {
margin-top: 28px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
}
.acc-tx { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tx {
display: flex;
gap: 16px;
align-items: center;
padding: 10px 14px;
background: #2A2C30;
border: 2px solid #1A1006;
font-size: 14px;
}
.tx-amount { font-weight: 700; min-width: 90px; }
.tx-completed .tx-amount { color: #A8E85C; }
.tx-pending .tx-amount { color: var(--gold); }
.tx-canceled .tx-amount { color: var(--redstone); opacity: 0.6; }
.tx-status { flex: 1; opacity: 0.7; }
.tx-date { opacity: 0.5; font-size: 13px; }
@media (max-width: 640px) {
.hotbar { grid-template-columns: repeat(2, 1fr); }
.acc-hero { flex-direction: column; text-align: center; }
.acc-balance { text-align: center; width: 100%; }
}
.btn-account { background: var(--gold); color: var(--ink); }
.corner-nav {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
display: flex;
gap: 10px;
}
.corner-account {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--ink);
text-decoration: none;
background: var(--gold);
border: 3px solid #1A1006;
padding: 10px 16px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.35),
inset -2px -2px 0 rgba(0, 0, 0, 0.25),
0 4px 0 rgba(26, 16, 6, 0.5);
transition: translate 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}
.corner-account:hover { filter: brightness(1.08); }
.corner-account:active {
translate: 0 3px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.35),
inset -2px -2px 0 rgba(0, 0, 0, 0.25),
0 1px 0 rgba(26, 16, 6, 0.5);
}
.corner-account:focus-visible {
outline: 3px dashed var(--cream);
outline-offset: 3px;
}
@media (max-width: 560px) {
.corner-account {
top: 12px;
right: 12px;
font-size: 9px;
padding: 8px 12px;
}
}
.acc-topbar-right { display: flex; align-items: center; gap: 12px; }
.acc-shop-btn {
border-color: var(--gold);
color: var(--gold);
text-decoration: none;
}
.acc-shop-btn:hover { background: rgba(247, 195, 37, 0.12); border-color: var(--gold); color: var(--gold); }
.shop-balance {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: #A8E85C;
border: 2px solid var(--grass-dark);
background: rgba(109, 190, 75, 0.12);
padding: 8px 14px;
}
.shop-balance[hidden] { display: none; }
.shop-main { gap: 40px; max-width: 2000px; }
.shop-head { text-align: center; }
.shop-head .sub { margin-top: 10px; }
.shop-servers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.shop-server-tab {
font-family: 'Rubik', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--ink);
background: rgba(58, 36, 16, 0.08);
border: 2px solid rgba(58, 36, 16, 0.25);
padding: 8px 16px;
cursor: pointer;
letter-spacing: 0.3px;
}
.shop-server-tab:hover { background: rgba(58, 36, 16, 0.16); }
.shop-server-tab[data-active] {
background: var(--grass-dark);
border-color: #1A1006;
color: var(--cream);
}
.shop-server-mark {
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
opacity: 0.75;
margin-top: 2px;
}
.shop-server-mark[data-everywhere] {
font-weight: 500;
opacity: 0.55;
}
.prof-servers {
justify-content: flex-start;
margin: 0 0 14px;
}
.shop-head .h-pixel {
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}
.shop-section-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.shop-section-head .h-pixel-sm { margin-bottom: 0; white-space: nowrap; }
.shop-section-head::after {
content: '';
flex: 1;
height: 3px;
background: repeating-linear-gradient(
90deg,
rgba(255, 246, 227, 0.18) 0 6px,
transparent 6px 12px
);
}
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
}
.shop-grid-item { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.shop-card {
--card-accent: var(--gold);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 26px 18px 18px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--card-accent) 12%, transparent) 0%, transparent 60%),
#2A2C30;
border: 3px solid #1A1006;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.07),
inset -2px -2px 0 rgba(0, 0, 0, 0.4);
transition: translate 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
overflow: hidden;
}
.shop-card:hover {
translate: 0 -5px;
border-color: color-mix(in srgb, var(--card-accent) 55%, #1A1006);
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.07),
inset -2px -2px 0 rgba(0, 0, 0, 0.4),
0 10px 0 rgba(0, 0, 0, 0.35),
0 0 26px color-mix(in srgb, var(--card-accent) 35%, transparent);
}
.shop-card-rank::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: var(--card-accent);
box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.shop-card-owned { opacity: 0.6; }
.shop-card-owned:hover { translate: 0; }
.shop-sale {
position: absolute;
top: 12px;
right: -30px;
z-index: 2;
rotate: 38deg;
width: 108px;
padding: 4px 0;
text-align: center;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: #2B1C08;
background: #E8483F;
color: #FFF6E3;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
.shop-owned-mark {
position: absolute;
top: 10px;
left: 12px;
z-index: 2;
font-size: 16px;
color: #A8E85C;
text-shadow: 0 0 8px rgba(168, 232, 92, 0.6);
}
.shop-icon-slot {
position: relative;
display: grid;
place-items: center;
width: 82px;
height: 82px;
background: #1E2023;
border: 3px solid #1A1006;
box-shadow:
inset 3px 3px 0 rgba(0, 0, 0, 0.55),
inset -3px -3px 0 rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.shop-icon-slot svg,
.shop-icon-slot .item-icon-img {
image-rendering: pixelated;
transition: scale 0.2s ease;
}
.item-icon-img {
image-rendering: pixelated;
object-fit: contain;
}
.shop-card:hover .shop-icon-slot svg,
.shop-card:hover .shop-icon-slot .item-icon-img { scale: 1.12; }
.shop-icon-slot.is-enchanted::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 34%,
rgba(200, 111, 232, 0.4) 45%,
rgba(255, 255, 255, 0.55) 50%,
rgba(200, 111, 232, 0.4) 55%,
transparent 66%
);
background-size: 300% 100%;
mix-blend-mode: screen;
animation: glint 4s linear infinite;
pointer-events: none;
}
@keyframes glint {
from { background-position: 160% 0; }
to   { background-position: -160% 0; }
}
.shop-title {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
line-height: 1.45;
color: var(--card-accent);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.shop-duration {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
opacity: 0.5;
color: var(--cream);
border: 1px solid rgba(255, 246, 227, 0.18);
padding: 3px 10px;
}
.shop-duration-forever {
color: var(--gold);
opacity: 0.85;
border-color: rgba(247, 195, 37, 0.35);
}
.shop-duration-hint {
margin-top: 4px;
font-size: 10px;
letter-spacing: 0.3px;
opacity: 0.42;
color: var(--cream);
}
.shop-duration-note {
margin-top: 10px;
font-size: 12px;
line-height: 1.55;
opacity: 0.62;
color: var(--cream);
border-left: 2px solid rgba(247, 195, 37, 0.35);
padding-left: 10px;
}
.shop-desc {
font-size: 13px;
line-height: 1.55;
opacity: 0.72;
color: var(--cream);
flex: 1;
}
.shop-card:has(.shop-features) .shop-desc { flex: 0 0 auto; }
.shop-features {
list-style: none;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
font-size: 12.5px;
line-height: 1.4;
color: var(--cream);
border-top: 2px solid rgba(255, 246, 227, 0.08);
padding-top: 12px;
}
.shop-features li {
position: relative;
padding-left: 18px;
opacity: 0.85;
}
.shop-features li::before {
content: '';
position: absolute;
left: 2px;
top: 5px;
width: 7px;
height: 7px;
background: color-mix(in srgb, var(--card-accent) 80%, #FFF);
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.shop-badge {
position: absolute;
top: -3px;
left: 50%;
translate: -50% 0;
z-index: 2;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 0.5px;
color: #2B1C08;
background: var(--card-accent);
border: 2px solid #1A1006;
border-top: none;
padding: 5px 10px 4px;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
white-space: nowrap;
}
.shop-stock {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gold);
opacity: 0.8;
}
.shop-stock-low {
color: var(--redstone);
animation: blink 1.6s steps(2, end) infinite;
}
.shop-card { cursor: pointer; }
.shop-hero-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.torch {
position: relative;
width: 10px;
height: 34px;
background: linear-gradient(180deg, #8A5A38 0 60%, #6B4226 60% 100%);
border: 2px solid #1A1006;
}
.torch::before {
content: '';
position: absolute;
top: -14px;
left: 50%;
translate: -50% 0;
width: 12px;
height: 12px;
background: #FF8A00;
box-shadow:
0 -6px 0 -2px #FFD23F,
0 0 18px 4px rgba(255, 138, 0, 0.55);
animation: torchflame 0.9s steps(2, end) infinite;
}
.torch:last-child::before { animation-delay: 0.45s; }
@keyframes torchflame {
0%, 100% { height: 12px; background: #FF8A00; }
50% { height: 9px; background: #FFB23F; }
}
.shop-sec {
display: inline-flex;
align-items: center;
gap: 12px;
}
.shop-sec-ico { display: inline-grid; place-items: center; }
.shop-sec-ico svg { image-rendering: pixelated; }
.shop-sec-count {
font-family: 'Rubik', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--gold);
border: 2px solid rgba(247, 195, 37, 0.4);
padding: 2px 8px;
}
.shop-sec-count[hidden] { display: none; }
.shop-altar {
position: relative;
background:
radial-gradient(90% 60% at 50% 0%, rgba(200, 111, 232, 0.07) 0%, transparent 60%),
var(--deep-dark);
}
.slot-spark {
position: absolute;
bottom: 8px;
width: 3px;
height: 3px;
background: #E8A8F5;
opacity: 0;
pointer-events: none;
animation: sparkrise 2.6s linear infinite;
}
.slot-spark:nth-child(odd) { background: #FFF6E3; }
@keyframes sparkrise {
0% { translate: 0 0; opacity: 0; }
15% { opacity: 0.9; }
70% { opacity: 0.6; }
100% { translate: 2px -56px; opacity: 0; }
}
.shop-card-rank .shop-title::after {
content: '';
display: block;
width: 28px;
height: 4px;
margin: 8px auto 0;
background: var(--card-accent);
box-shadow: 6px 0 0 -1px color-mix(in srgb, var(--card-accent) 45%, transparent),
-6px 0 0 -1px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.shop-chest {
background:
repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 0, 0, 0.14) 22px 24px),
linear-gradient(180deg, #4A3016 0%, #3C2712 100%);
border-color: #1A1006;
}
.shop-chest::before {
content: '';
display: block;
height: 8px;
margin: -28px -28px 20px;
background: #8A5A38;
border-bottom: 3px solid #1A1006;
}
.shop-chest-hint {
font-size: 12px;
opacity: 0.55;
color: var(--cream);
margin: -10px 0 16px;
}
.shop-grid-item { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-grid-item .shop-card {
padding: 18px 12px 12px;
gap: 8px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--card-accent) 10%, transparent) 0%, transparent 60%),
#26221C;
}
.shop-grid-item .shop-icon-slot { width: 66px; height: 66px; }
.shop-grid-item .shop-title { font-size: 10px; }
.shop-grid-item .shop-price-row { padding-top: 8px; margin-top: 0; }
.shop-grid-item .shop-price { font-size: 13px; }
.shop-grid-item .shop-price-old { font-size: 11px; }
.shop-grid-item .shop-buy { font-size: 9px; padding: 11px 8px; }
.shop-grid-item .shop-sale {
top: 8px;
right: -34px;
font-size: 8px;
}
.mc-tip {
position: fixed;
top: 0;
left: 0;
z-index: 400;
max-width: 280px;
padding: 10px 12px;
pointer-events: none;
background: rgba(16, 4, 22, 0.96);
border: 2px solid #6414B4;
box-shadow:
0 0 0 2px #100416,
inset 0 0 12px rgba(100, 20, 180, 0.25);
will-change: translate;
}
.mc-tip[hidden] { display: none; }
.mc-tip-name {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.5;
color: var(--card-accent, var(--gold));
margin-bottom: 6px;
}
.mc-tip-desc {
font-size: 12px;
line-height: 1.5;
color: #A8A8A8;
margin-bottom: 4px;
}
.mc-tip-feat {
font-size: 12px;
line-height: 1.5;
color: #9C8AE0;
}
.mc-tip-feat::before { content: '▪ '; color: #6414B4; }
.mc-tip-price {
margin-top: 6px;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: #A8E85C;
}
.mc-tip-hint {
margin-top: 6px;
font-size: 10px;
color: #6E747C;
}
.xp-orb {
position: fixed;
bottom: -12px;
z-index: 1;
width: 6px;
height: 6px;
background: #A8E85C;
box-shadow: 0 0 8px 2px rgba(168, 232, 92, 0.4);
opacity: 0;
pointer-events: none;
animation: orbrise linear infinite;
}
@keyframes orbrise {
0% { translate: 0 0; opacity: 0; }
8% { opacity: 0.5; }
50% { translate: 10px -55vh; opacity: 0.35; }
92% { opacity: 0.4; }
100% { translate: -6px -108vh; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.torch::before, .slot-spark, .xp-orb { animation: none; }
.xp-orb { display: none; }
.slot-spark { display: none; }
}
.shop-features-more {
opacity: 0.5 !important;
font-style: italic;
}
.shop-features-more::before { background: rgba(255, 246, 227, 0.4) !important; }
.shop-detail {
width: min(440px, 94vw);
max-height: 90svh;
overflow-y: auto;
gap: 12px;
}
.shop-detail-badge {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
letter-spacing: 0.5px;
color: #2B1C08;
background: var(--card-accent);
border: 2px solid #1A1006;
padding: 5px 10px 4px;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.shop-detail-desc {
font-size: 14px;
line-height: 1.6;
opacity: 0.8;
color: var(--cream);
}
.shop-detail-feat-head {
width: 100%;
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.55;
color: var(--cream);
margin-top: 4px;
}
.shop-detail-features {
border-top: none;
padding-top: 0;
flex: 0 0 auto;
}
.shop-detail .shop-price-row { margin-top: 2px; }
.shop-detail .shop-modal-row { margin-top: 8px; }
.shop-detail .shop-buy { font-size: 11px; padding: 14px 12px; }
.shop-price-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 6px;
padding-top: 14px;
width: 100%;
justify-content: center;
border-top: 2px solid rgba(255, 246, 227, 0.08);
}
.shop-price {
font-family: 'Press Start 2P', monospace;
font-size: 16px;
color: #A8E85C;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.shop-price-old {
font-size: 13px;
text-decoration: line-through;
opacity: 0.4;
color: var(--cream);
}
.shop-buy {
width: 100%;
background: var(--grass-dark);
font-size: 11px;
padding: 14px 16px;
}
.shop-buy:disabled {
background: #43464B;
cursor: not-allowed;
filter: none;
opacity: 0.75;
box-shadow:
inset 3px 3px 0 rgba(255, 255, 255, 0.12),
inset -3px -3px 0 rgba(0, 0, 0, 0.3);
}
.shop-buy:disabled:active { translate: 0; }
.shop-buy-poor { background: #8A5A2A; }
.shop-modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: 24px;
background: rgba(10, 11, 13, 0.78);
opacity: 0;
transition: opacity 0.16s ease;
}
.shop-modal-overlay.is-open { opacity: 1; }
.shop-modal {
--card-accent: var(--gold);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: min(380px, 92vw);
padding: 30px 26px 24px;
text-align: center;
background:
radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--card-accent) 14%, transparent) 0%, transparent 60%),
var(--deep-dark);
border: 3px solid #1A1006;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.07),
inset -2px -2px 0 rgba(0, 0, 0, 0.4),
0 14px 0 rgba(0, 0, 0, 0.4);
scale: 0.94;
transition: scale 0.16s ease;
}
.shop-modal-overlay.is-open .shop-modal { scale: 1; }
.shop-modal-title {
font-family: 'Press Start 2P', monospace;
font-size: 14px;
line-height: 1.4;
color: var(--card-accent);
}
.shop-modal-sum {
font-family: 'Press Start 2P', monospace;
font-size: 20px;
color: #A8E85C;
}
.shop-modal-left {
font-size: 13px;
opacity: 0.6;
color: var(--cream);
}
.shop-modal-row {
display: flex;
gap: 12px;
width: 100%;
margin-top: 6px;
}
.shop-modal-btn { flex: 1; font-size: 11px; padding: 14px 12px; }
.shop-modal-no { background: #5A5D63; }
.shop-modal-yes { background: var(--grass-dark); }
.acc-note-error {
background: rgba(232, 72, 63, 0.14);
border-color: #B9432F;
}
.acc-note-error {
background: rgba(232, 72, 63, 0.14);
border-color: #B9432F;
}
.inv-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.inv-shop-link, .inv-inline-link {
color: var(--gold);
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.inv-shop-link:hover, .inv-inline-link:hover { text-decoration: underline; }
.inv-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.inv-slot {
--slot-accent: var(--gold);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-height: 150px;
padding: 14px 10px 12px;
background: #2A2C30;
border: 3px solid #1A1006;
box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, 0.5),
inset -2px -2px 0 rgba(255, 255, 255, 0.06);
text-align: center;
}
.inv-slot svg { image-rendering: pixelated; }
.inv-count {
position: absolute;
top: 44px;
right: 12px;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: #FFF;
text-shadow: 2px 2px 0 #1A1006;
pointer-events: none;
}
.inv-slot-rank { box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, 0.5),
inset -2px -2px 0 rgba(255, 255, 255, 0.06),
inset 0 0 18px color-mix(in srgb, var(--slot-accent) 25%, transparent);
}
.inv-slot-expired { opacity: 0.45; filter: grayscale(0.7); }
.inv-slot-empty {
min-height: 150px;
background: #232529;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.inv-name {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.4;
color: var(--slot-accent);
word-break: break-word;
}
.inv-meta { font-size: 12px; opacity: 0.6; color: var(--cream); }
.inv-badge {
margin-top: auto;
font-size: 10px;
padding: 3px 8px;
border: 1px solid;
}
.inv-badge-paid { color: var(--gold); border-color: rgba(247, 195, 37, 0.5); }
.inv-badge-activated { color: var(--gold); border-color: rgba(247, 195, 37, 0.5); }
.inv-badge-delivered { color: #A8E85C; border-color: rgba(168, 232, 92, 0.5); }
.inv-slot-new {
border-color: var(--grass-dark);
box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, 0.5),
inset -2px -2px 0 rgba(255, 255, 255, 0.06),
0 0 16px rgba(109, 190, 75, 0.25);
}
.inv-activate {
margin-top: auto;
width: 100%;
font-size: 9px;
padding: 9px 6px;
background: var(--grass-dark);
line-height: 1.4;
}
.inv-activate:disabled { background: #43464B; cursor: not-allowed; filter: none; }
@media (max-width: 720px) {
.inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card { padding: 16px 12px; }
.shop-title { font-size: 11px; }
.shop-desc { font-size: 12px; }
}
.corner-shop { background: var(--grass); }
@media (max-width: 560px) {
.corner-nav { top: 12px; right: 12px; gap: 6px; }
}
.adm-main { max-width: 1080px; gap: 24px; }
.adm-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.adm-stat {
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 18px 20px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.06),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.adm-stat-num {
font-family: 'Press Start 2P', monospace;
font-size: 18px;
color: var(--gold);
}
.adm-stat-label {
margin-top: 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.6;
color: var(--cream);
}
.adm-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-tab[hidden] { display: none; }
.adm-role-badge {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
letter-spacing: 0.5px;
color: var(--gold);
border: 2px solid rgba(247, 195, 37, 0.45);
padding: 6px 10px;
}
.adm-role-badge[hidden] { display: none; }
.adm-role { font-weight: 700; font-size: 13px; }
.adm-role-admin { color: var(--gold); }
.adm-role-tech { color: var(--diamond); }
.adm-role-moder { color: var(--grass); }
.adm-roles-legend {
list-style: none;
margin: 8px 0 16px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
opacity: 0.7;
}
.adm-roles-legend b { opacity: 1; }
.adm-tab {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--cream);
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 12px 18px;
cursor: pointer;
opacity: 0.6;
}
.adm-tab:hover { opacity: 0.9; }
.adm-tab.is-active {
opacity: 1;
background: var(--stone-dark);
border-bottom-color: var(--gold);
box-shadow: inset 0 -3px 0 var(--gold);
}
.adm-tab-inbox {
opacity: 1;
color: var(--gold);
border-color: rgba(247, 195, 37, 0.55);
}
.adm-tab-inbox:hover { background: var(--stone-dark); }
.adm-tab-inbox.is-active { color: var(--cream); border-color: #1A1006; }
.adm-tab-inbox.has-unread {
background: rgba(247, 195, 37, 0.14);
box-shadow: inset 0 0 0 2px rgba(247, 195, 37, 0.35);
animation: admInboxBlink 2.4s steps(1, end) infinite;
}
.adm-tab-inbox.has-unread.is-active { animation: none; }
@keyframes admInboxBlink {
0%, 70% { border-color: rgba(247, 195, 37, 0.55); }
71%, 100% { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
.adm-tab-inbox.has-unread { animation: none; }
}
.adm-tabs-sep {
width: 3px;
align-self: stretch;
background: rgba(255, 246, 227, 0.14);
margin: 0 4px;
}
.adm-tab-inbox[hidden] ~ .adm-tabs-sep,
.adm-tabs-sep:last-child { display: none; }
.adm-table-wrap { overflow-x: auto; margin-top: 18px; }
.adm-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--cream);
min-width: 640px;
}
.adm-table th {
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.55;
padding: 8px 10px;
border-bottom: 2px solid rgba(255, 246, 227, 0.12);
}
.adm-table td {
padding: 10px;
border-bottom: 1px solid rgba(255, 246, 227, 0.07);
vertical-align: middle;
}
.adm-table tr:hover td { background: rgba(255, 246, 227, 0.03); }
.adm-row-off td { opacity: 0.45; }
.adm-dim { opacity: 0.55; font-size: 13px; }
.adm-neg { color: var(--redstone); }
.adm-ico {
--card-accent: var(--gold);
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
background: #1E2023;
border: 2px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.adm-actions { display: flex; gap: 6px; justify-content: flex-end; }
.adm-mini {
font-family: 'Rubik', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--cream);
background: #3A3D42;
border: 2px solid #1A1006;
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
}
.adm-mini:hover { filter: brightness(1.2); }
.adm-mini-on { background: var(--grass-dark); }
.adm-mini-off { background: #6E4A1F; }
.adm-mini-danger { background: #7A2E28; }
.adm-btn {
font-size: 10px;
padding: 12px 16px;
background: var(--grass-dark);
}
.adm-search {
width: min(260px, 100%);
padding: 9px 12px;
font-size: 14px;
}
.adm-delivery-note {
margin-top: 14px;
font-size: 13px;
padding: 8px 12px;
border-left: 3px solid;
color: var(--cream);
}
.adm-delivery-note.is-on { border-color: var(--grass-dark); background: rgba(109, 190, 75, 0.1); }
.adm-delivery-note.is-off { border-color: var(--gold); background: rgba(247, 195, 37, 0.1); }
.adm-deliv-err {
margin-top: 4px;
font-size: 12px;
color: var(--redstone);
opacity: 0.85;
}
.adm-status { font-size: 13px; padding: 3px 8px; border: 1px solid; white-space: nowrap; }
.adm-status-paid { color: var(--gold); border-color: rgba(247, 195, 37, 0.5); }
.adm-status-delivered { color: #A8E85C; border-color: rgba(168, 232, 92, 0.5); }
.adm-status-refunded { color: var(--redstone); border-color: rgba(255, 123, 114, 0.5); }
.adm-editor-overlay[hidden] { display: none; }
.adm-editor {
width: min(680px, 94vw);
max-height: 92svh;
overflow-y: auto;
text-align: left;
align-items: stretch;
}
.adm-form-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px 14px;
width: 100%;
}
.adm-form-grid label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.85;
color: var(--cream);
}
.adm-form-grid .auth-input { font-size: 14px; padding: 9px 11px; width: 100%; }
.adm-form-grid textarea.auth-input { resize: vertical; text-transform: none; letter-spacing: normal; }
.adm-wide { grid-column: 1 / -1; }
.adm-check {
flex-direction: row !important;
align-items: center;
gap: 10px !important;
align-self: end;
padding-bottom: 10px;
}
.adm-check input { width: 18px; height: 18px; accent-color: var(--grass); }
.adm-icon-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.85;
color: var(--cream);
}
.adm-icon-pick {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 6px 10px;
min-height: 44px;
background: #26282C;
border: 2px solid #1A1006;
color: var(--cream);
font-family: 'Rubik', sans-serif;
font-size: 13px;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.adm-icon-pick:hover { filter: brightness(1.2); }
.adm-icon-preview {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
background: #1E2023;
border: 2px solid #1A1006;
}
.adm-icon-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-icons { max-width: 620px; }
.adm-icons-tabs { display: flex; gap: 6px; width: 100%; margin-bottom: 10px; }
.adm-icons-tab {
flex: 1;
padding: 8px 6px;
font-family: 'Rubik', sans-serif;
font-size: 12px;
color: var(--cream);
background: #3A3D42;
border: 2px solid #1A1006;
cursor: pointer;
}
.adm-icons-tab:hover { filter: brightness(1.2); }
.adm-icons-tab.is-on { background: var(--grass-dark); }
.adm-icons-pane { width: 100%; }
.adm-icons-search { width: 100%; margin-bottom: 8px; }
.adm-icons-note { margin: 0 0 8px; font-size: 12px; }
.adm-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 6px;
max-height: 46vh;
overflow-y: auto;
padding-right: 4px;
}
.adm-icons-grid-svg { max-height: none; }
.adm-icons-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
background: #26282C;
border: 2px solid #1A1006;
color: var(--cream);
font-family: 'Rubik', sans-serif;
font-size: 11px;
line-height: 1.2;
text-align: center;
cursor: pointer;
}
.adm-icons-cell:hover { filter: brightness(1.25); }
.adm-icons-cell.is-on { border-color: var(--gold); background: #34383D; }
.adm-icons-cell span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.adm-icons-image {
display: grid;
place-items: center;
min-height: 110px;
margin-bottom: 10px;
background: #1E2023;
border: 2px solid #1A1006;
}
.adm-weekly-toggle { display: flex; align-self: start; margin: 12px 0 4px; padding-bottom: 0; font-weight: 700; cursor: pointer; }
.adm-weekly-form .adm-weekly-description { grid-column: 1 / -1; }
.adm-weekly-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-weekly-preview-note { margin-top: 18px; }
.adm-weekly-preview { margin-top: 8px; }
.adm-weekly-preview.is-off { opacity: .45; filter: grayscale(.6); }
@media (max-width: 640px) {
.adm-form-grid { grid-template-columns: 1fr 1fr; }
.adm-stat-num { font-size: 14px; }
}
.toast-host {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 500;
display: flex;
flex-direction: column;
gap: 10px;
width: min(360px, calc(100vw - 36px));
pointer-events: none;
}
.toast {
--toast-accent: var(--gold);
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
overflow: hidden;
pointer-events: auto;
cursor: pointer;
background:
linear-gradient(90deg, color-mix(in srgb, var(--toast-accent) 12%, transparent) 0%, transparent 55%),
var(--deep-dark);
border: 3px solid #1A1006;
border-left-width: 6px;
border-left-color: var(--toast-accent);
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.07),
inset -2px -2px 0 rgba(0, 0, 0, 0.4),
0 6px 0 rgba(0, 0, 0, 0.4);
translate: 24px 0;
opacity: 0;
transition: translate 0.18s steps(4, end), opacity 0.18s ease;
}
.toast.is-in { translate: 0 0; opacity: 1; }
.toast.is-out { translate: 24px 0; opacity: 0; }
.toast-ok { --toast-accent: #A8E85C; }
.toast-error { --toast-accent: #FF7B72; }
.toast-info { --toast-accent: var(--gold); }
.toast-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 46px;
height: 46px;
color: var(--toast-accent);
background: #1E2023;
border: 2px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.toast-img {
width: 38px;
height: 38px;
object-fit: contain;
image-rendering: pixelated;
}
.toast-ico svg { image-rendering: pixelated; }
.toast-body { min-width: 0; }
.toast-title {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.4;
color: var(--toast-accent);
margin-bottom: 6px;
}
.toast-text {
font-size: 13px;
line-height: 1.5;
color: var(--cream);
opacity: 0.85;
overflow-wrap: anywhere;
}
.toast-bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: var(--toast-accent);
opacity: 0.55;
transform-origin: left center;
animation: toastdrain linear forwards;
}
@keyframes toastdrain {
from { scale: 1 1; }
to { scale: 0 1; }
}
@media (max-width: 560px) {
.toast-host { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
.px-modal-overlay {
position: fixed;
inset: 0;
z-index: 600;
display: grid;
place-items: center;
padding: 24px;
background: rgba(10, 11, 13, 0.8);
opacity: 0;
transition: opacity 0.16s ease;
}
.px-modal-overlay.is-open { opacity: 1; }
.px-modal {
--px-accent: var(--gold);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: min(420px, 94vw);
max-height: 92svh;
overflow-y: auto;
padding: 28px 26px 22px;
text-align: center;
background:
radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--px-accent) 13%, transparent) 0%, transparent 60%),
var(--deep-dark);
border: 3px solid #1A1006;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.07),
inset -2px -2px 0 rgba(0, 0, 0, 0.4),
0 14px 0 rgba(0, 0, 0, 0.4);
scale: 0.94;
transition: scale 0.16s ease;
}
.px-modal-overlay.is-open .px-modal { scale: 1; }
.px-modal-wide { width: min(700px, 94vw); }
.roster { width: 100%; }
.roster-list {
justify-content: center;
gap: 8px;
max-height: 56svh;
overflow-y: auto;
padding: 2px;
}
.roster-list li { font-size: 13px; padding: 0; border: 0; background: none; }
.roster-list .mc-head { width: 24px; height: 24px; }
.roster-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px 6px 6px;
background: var(--dirt-dark);
border: 2px solid #1A1006;
color: inherit;
text-decoration: none;
transition: translate 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.roster-link:hover,
.roster-link:focus-visible {
translate: 0 -2px;
color: var(--gold);
border-color: var(--gold);
}
.roster-group {
flex: 1 0 100%;
margin-top: 6px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
line-height: 1.6;
text-align: center;
opacity: 0.65;
}
.roster-group:first-child { margin-top: 0; }
.px-modal-ico {
display: grid;
place-items: center;
width: 72px;
height: 72px;
background: #1E2023;
border: 3px solid #1A1006;
box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.px-modal-ico svg { image-rendering: pixelated; }
.px-modal-title {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
line-height: 1.5;
color: var(--px-accent);
}
.px-modal-text {
font-size: 14px;
line-height: 1.6;
color: var(--cream);
opacity: 0.78;
}
.px-modal-field {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
text-align: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--cream);
opacity: 0.85;
}
.px-modal-field .auth-input { font-size: 15px; padding: 10px 12px; text-transform: none; }
.px-modal-preview {
max-width: 96px;
max-height: 96px;
object-fit: contain;
image-rendering: pixelated;
background: #1E2023;
border: 2px solid #1A1006;
padding: 4px;
}
.px-modal-row { display: flex; gap: 12px; width: 100%; margin-top: 6px; }
.px-modal-btn { flex: 1; font-size: 11px; padding: 14px 12px; }
.px-modal-no { background: #5A5D63; }
.px-modal-yes { background: var(--grass-dark); }
.px-modal-danger { background: #8A2F27; }
@media (prefers-reduced-motion: reduce) {
.toast, .px-modal, .px-modal-overlay { transition: none; }
.toast-bar { animation: none; }
}
.acc-badge-profile { text-decoration: none; border-color: var(--gold); background: rgba(247, 195, 37, 0.12); }
.acc-badge-profile:hover { background: rgba(247, 195, 37, 0.3); }
.acc-badge-toggle {
font-family: 'Rubik', sans-serif;
font-size: 12px;
cursor: pointer;
border-color: rgba(255, 246, 227, 0.35);
background: rgba(255, 246, 227, 0.06);
}
.acc-badge-toggle:hover { border-color: var(--cream); }
.acc-badge-toggle[data-hidden='1'] {
border-color: var(--redstone);
background: rgba(232, 72, 63, 0.12);
}
.prof-rank {
--rank-accent: var(--gold);
display: inline-flex;
align-items: center;
gap: 8px;
border-color: var(--rank-accent);
background: color-mix(in srgb, var(--rank-accent) 14%, transparent);
}
.prof-rank svg { image-rendering: pixelated; }
.prof-rank-left {
font-size: 11px;
opacity: 0.6;
white-space: nowrap;
}
.prof-com-form {
display: flex;
gap: 12px;
align-items: stretch;
margin-top: 16px;
flex-wrap: wrap;
}
.prof-com-input {
flex: 1 1 280px;
resize: vertical;
min-height: 52px;
font-size: 14px;
}
.prof-com-send {
flex: 0 0 auto;
background: var(--grass-dark);
font-size: 10px;
padding: 12px 18px;
}
.prof-comments {
list-style: none;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.prof-com {
background: #2A2C30;
border: 2px solid #1A1006;
padding: 12px 14px;
}
.prof-com-head {
display: flex;
align-items: baseline;
gap: 12px;
}
.prof-com-author {
font-weight: 700;
font-size: 14px;
color: var(--gold);
text-decoration: none;
}
.prof-com-author:hover { text-decoration: underline; }
.prof-com-date { font-size: 12px; opacity: 0.45; color: var(--cream); flex: 1; }
.prof-com-del {
background: none;
border: none;
color: var(--redstone);
opacity: 0.5;
cursor: pointer;
font-size: 14px;
padding: 0 4px;
}
.prof-com-del:hover { opacity: 1; }
.prof-com-body {
margin-top: 6px;
font-size: 14px;
line-height: 1.55;
color: var(--cream);
opacity: 0.9;
overflow-wrap: anywhere;
}
.prof-gone {
text-align: center;
padding: 56px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.prof-gone-ico { font-size: 42px; }
.prof-gone .sub { margin-bottom: 0; }
.prof-gone-btn { margin-top: 10px; }
.pw-form { margin-top: 18px; }
.pw-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.pw-field { display: flex; flex-direction: column; gap: 6px; }
.pw-field .auth-label { margin-top: 0; }
.pw-field .auth-input { width: 100%; font-size: 15px; }
.pw-submit {
margin-top: 16px;
background: var(--grass-dark);
font-size: 11px;
padding: 14px 20px;
}
.pw-submit:disabled { background: #43464B; cursor: not-allowed; filter: none; }
.code-input {
font-family: 'Press Start 2P', monospace;
font-size: 18px;
letter-spacing: 4px;
text-align: center;
}
.auth-hint {
font-size: 12px;
opacity: 0.6;
color: var(--cream);
line-height: 1.5;
}
.tfa-state {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border: 2px solid rgba(255, 246, 227, 0.25);
color: var(--cream);
opacity: 0.7;
}
.tfa-state.is-on {
border-color: var(--grass-dark);
background: rgba(109, 190, 75, 0.12);
opacity: 1;
}
.tfa-btn { background: var(--grass-dark); font-size: 10px; padding: 13px 18px; margin-top: 16px; }
.tfa-btn-off { background: #8A2F27; }
.adm-btn-danger { background: #8A2F27; }
.tfa-setup {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-top: 18px;
align-items: flex-start;
}
.tfa-qr-wrap {
flex: 0 0 auto;
padding: 10px;
background: #FFF6E3;
border: 3px solid #1A1006;
}
.tfa-qr { display: block; width: 240px; height: 240px; image-rendering: pixelated; }
.tfa-steps { flex: 1 1 280px; display: flex; flex-direction: column; gap: 10px; }
.tfa-step { font-size: 14px; line-height: 1.55; color: var(--cream); opacity: 0.85; }
.tfa-step b { color: var(--gold); margin-right: 4px; }
.tfa-secret {
display: block;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
line-height: 1.8;
word-break: break-all;
color: var(--gold);
background: #1E2023;
border: 2px solid #1A1006;
padding: 10px 12px;
user-select: all;
}
.tfa-confirm { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.tfa-confirm .code-input { flex: 0 1 180px; padding: 11px 12px; }
.tfa-confirm .btn { margin-top: 0; }
.tfa-cancel { align-self: flex-start; margin-top: 4px; }
.tfa-note { margin-top: 16px; }
.tfa-left-empty { color: var(--redstone); }
.tfa-codes { margin-top: 18px; }
.tfa-code-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-top: 14px;
}
.tfa-code-list li {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
text-align: center;
color: var(--cream);
background: #2A2C30;
border: 2px solid #1A1006;
padding: 10px 6px;
user-select: all;
}
.tfa-codes-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 560px) {
.tfa-qr-wrap { margin: 0 auto; }
.tfa-qr { width: 200px; height: 200px; }
}
.shop-promo { width: 100%; margin-top: 4px; }
.shop-promo-row { display: flex; gap: 8px; }
.shop-promo-input {
flex: 1;
font-size: 13px;
padding: 9px 11px;
text-transform: uppercase;
}
.shop-promo-btn {
flex: 0 0 auto;
font-family: 'Rubik', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--cream);
background: #3A3D42;
border: 2px solid #1A1006;
padding: 0 14px;
cursor: pointer;
}
.shop-promo-btn:hover { filter: brightness(1.2); }
.shop-promo-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.shop-promo-note { margin-top: 6px; font-size: 12px; line-height: 1.4; }
.shop-promo-note.is-ok { color: #A8E85C; }
.shop-promo-note.is-bad { color: var(--redstone); }
.bonus-tiers {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: -20px 0 20px;
}
.bonus-tier {
font-size: 13px;
color: var(--cream);
border: 2px solid var(--grass-dark);
background: rgba(109, 190, 75, 0.12);
padding: 6px 12px;
}
.bonus-tier b { color: #A8E85C; margin-right: 4px; }
.adm-sub-head { margin-top: 34px; }
.adm-callback {
font-family: 'Rubik', sans-serif;
font-size: 12px;
color: var(--diamond);
background: #1E2023;
border: 1px solid #1A1006;
padding: 4px 8px;
cursor: pointer;
word-break: break-all;
}
.adm-callback:hover { color: var(--gold); }
.adm-console-form { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.adm-console-input {
flex: 1 1 260px;
font-family: 'Rubik', sans-serif;
font-size: 14px;
padding: 11px 13px;
}
.adm-console-server {
flex: 0 0 auto;
font-family: 'Rubik', sans-serif;
font-size: 14px;
padding: 11px 13px;
}
.adm-console-out {
margin-top: 16px;
max-height: 340px;
overflow-y: auto;
padding: 14px;
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
color: #A8E85C;
background: #14161A;
border: 2px solid #1A1006;
}
.adm-log-action {
font-size: 12px;
color: var(--gold);
border: 1px solid rgba(247, 195, 37, 0.4);
padding: 2px 8px;
white-space: nowrap;
}
.acc-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-tab {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--cream);
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 13px 20px;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.1s ease;
}
.acc-tab:hover { opacity: 0.9; }
.acc-tab.is-active {
opacity: 1;
background: var(--stone-dark);
box-shadow: inset 0 -3px 0 var(--gold);
}
.acc-tab:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.acc-pane { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 900px) {
.acc-main-cab {
grid-template-columns: 210px minmax(0, 1fr);
grid-template-areas:
"hero hero"
"nav  pane";
}
.acc-main-cab > .acc-tabs {
flex-direction: column;
gap: 8px;
position: sticky;
top: 24px;
}
.acc-main-cab .acc-tab { width: 100%; text-align: left; }
.acc-main-cab .acc-tab.is-active { box-shadow: none; border-left: 6px solid var(--gold); }
.acc-main-cab > .acc-hero { position: sticky; top: 0; z-index: 5; }
}
@media (min-width: 1080px) {
.acc-pane-balance,
.acc-pane-security {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
align-items: start;
gap: 28px;
}
.acc-pane-security { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.acc-pane-balance .pay-watch { grid-column: 1 / -1; }
.acc-sec-inv { grid-column: 1 / -1; }
.acc-pane-security .pw-row { flex-direction: column; }
}
.acc-scroll {
margin-top: 18px;
max-height: 420px;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: var(--stone) #1E2023;
}
.acc-scroll > .inv-grid,
.acc-scroll > .acc-tx { margin-top: 0; }
.acc-scroll::-webkit-scrollbar { width: 10px; }
.acc-scroll::-webkit-scrollbar-track { background: #1E2023; border: 2px solid #1A1006; }
.acc-scroll::-webkit-scrollbar-thumb { background: var(--stone); border: 2px solid #1A1006; }
.acc-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.acc-sec-inv { border-color: var(--grass-dark); }
.acc-sec-trophy { background: rgba(26, 16, 6, 0.55); }
.acc-balance-topup {
display: block;
width: 100%;
margin-top: 12px;
font-family: 'Rubik', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--cream);
background: var(--grass-dark);
border: 2px solid #1A1006;
padding: 8px 14px;
cursor: pointer;
box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.acc-balance-topup:hover { filter: brightness(1.1); }
@media (max-width: 560px) {
.acc-tabs { gap: 6px; }
.acc-tab { flex: 1; font-size: 9px; padding: 12px 8px; text-align: center; }
.weekly-quest { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.weekly-quest-end { grid-column: 2; justify-self: start; }
}
.online-graph { margin-top: 36px; }
.online-graph .sub { margin-bottom: 12px; }
.online-frame { padding: 12px; }
#onlineChart { width: 100%; height: auto; display: block; }
.news-wrap { margin-top: 36px; }
.weekly-quest {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
margin-top: 36px;
padding: 18px;
background: #263923;
border: 3px solid #1A1006;
box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), inset -3px -3px 0 rgba(0,0,0,.25), 4px 4px 0 rgba(0,0,0,.2);
}
.weekly-quest-icon { font-size: 34px; filter: drop-shadow(2px 2px 0 #1A1006); }
.weekly-quest-kicker { margin: 0 0 7px; font: 9px 'Press Start 2P', monospace; color: var(--gold); }
.weekly-quest .h-pixel-sm { margin: 0; }
.weekly-quest .sub { margin: 8px 0 10px; }
.weekly-quest-bar { height: 16px; padding: 3px; background: #1A1006; border: 2px solid #0D0B08; }
.weekly-quest-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #F7C325 0 12px, #FFD94D 12px 16px); transition: width .5s ease; }
.weekly-quest-progress, .weekly-quest-end { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--cream); }
.acc-quest .acc-quest-value { margin: 4px 0 6px; font: 18px 'Press Start 2P', monospace; color: var(--gold); }
.acc-quest .acc-quest-value span:last-child { font: 700 14px 'Rubik', sans-serif; color: var(--cream); }
.weekly-quest-top { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--cream); }
.weekly-quest-top li { display: flex; align-items: center; gap: 6px; }
.weekly-quest-top a { color: var(--cream); text-decoration: none; border-bottom: 1px dotted rgba(255,246,227,.5); }
.weekly-quest-top a:hover { color: var(--gold); }
.weekly-quest-top-value { font-weight: 700; color: var(--gold); }
.weekly-quest-end { align-self: start; padding: 7px 8px; background: rgba(0,0,0,.2); white-space: nowrap; }
.prof-share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.prof-share-btn { border: 2px solid #1A1006; padding: 8px 11px; background: var(--gold); color: #2B1C08; font: 700 12px 'Rubik', sans-serif; cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), 2px 2px 0 rgba(0,0,0,.25); }
.prof-share-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.prof-share-save { background: #DDEFF5; }
.news-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-top: 16px;
}
.news-card {
position: relative;
background: #F2E4C4;
color: #2B1C08;
border: 3px solid #1A1006;
padding: 20px 18px 18px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.5),
inset -2px -2px 0 rgba(0, 0, 0, 0.15),
4px 4px 0 rgba(0, 0, 0, 0.25);
transition: transform 0.15s;
}
.news-card:nth-child(even) { transform: rotate(-0.6deg); }
.news-card:nth-child(odd) { transform: rotate(0.5deg); }
.news-card:hover { transform: rotate(0) translateY(-2px); }
.news-pin {
position: absolute;
top: -8px;
left: 50%;
translate: -50% 0;
width: 14px;
height: 14px;
background: #E8483F;
border: 2px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4);
}
.news-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.news-title {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
line-height: 1.5;
color: #3A2410;
}
.news-date {
font-size: 11px;
opacity: 0.6;
white-space: nowrap;
}
.news-body {
font-size: 14px;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.top-full-link-wrap { margin-top: 28px; text-align: center; }
.top-full-link {
display: inline-block;
font-size: 12px;
padding: 14px 22px;
background: var(--stone-dark);
color: var(--cream);
}
.top-full-link:hover { filter: brightness(1.15); }
.top-main { gap: 24px; }
.top-tabs { flex-wrap: wrap; }
.top-board { padding-top: 20px; }
.top-list { counter-reset: place; }
.top-nick {
color: var(--cream);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.top-nick:hover { color: var(--gold); border-bottom-color: var(--gold); }
.top-list .top-place-1 { box-shadow: inset 3px 0 0 var(--gold); }
.top-list .top-place-2 { box-shadow: inset 3px 0 0 #C9CCD1; }
.top-list .top-place-3 { box-shadow: inset 3px 0 0 #C77B3F; }
.shop-sale-timer {
margin-top: 8px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
line-height: 1.6;
color: #FFB4AC;
animation: sale-pulse 2.4s ease-in-out infinite;
}
@keyframes sale-pulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.shop-sale-timer { animation: none; }
}
.shop-gift {
margin-top: 14px;
padding: 12px;
border: 2px dashed rgba(255, 246, 227, 0.25);
display: flex;
flex-direction: column;
gap: 10px;
}
.shop-gift-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
cursor: pointer;
user-select: none;
}
.shop-gift-toggle input { width: 16px; height: 16px; accent-color: var(--grass); cursor: pointer; }
.shop-gift-input { width: 100%; }
.inv-gift {
margin-top: 6px;
font-size: 11px;
color: var(--gold);
overflow-wrap: anywhere;
}
.inv-badge-expired { background: var(--stone); color: rgba(255, 246, 227, 0.7); }
.tk-form,
.tk-reply {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
}
.tk-form textarea,
.tk-reply textarea { resize: vertical; font-family: 'Rubik', sans-serif; }
.tk-reply-input { resize: none; overflow-y: auto; }
.tk-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tk-counter { font-size: 11px; opacity: 0.55; margin-left: auto; }
.tk-counter.is-low { color: var(--accent); opacity: 1; }
.tk-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-cat {
font-family: 'Rubik', sans-serif;
font-size: 12px;
padding: 7px 12px;
color: var(--cream);
background: var(--deep-dark);
border: 2px solid #1A1006;
cursor: pointer;
transition: filter 0.12s;
}
.tk-cat:hover { filter: brightness(1.2); }
.tk-cat.is-active { background: var(--accent); color: #2B1C08; font-weight: 700; }
.tk-chip {
font-size: 10px;
padding: 3px 7px;
background: rgba(255, 246, 227, 0.08);
border: 2px solid #1A1006;
white-space: nowrap;
}
.tk-chip.is-link { color: var(--gold); text-decoration: none; }
.tk-chip.is-link:hover { background: rgba(255, 210, 63, 0.15); }
.tk-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tk-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--deep-dark);
border: 2px solid #1A1006;
cursor: pointer;
transition: transform 0.12s, filter 0.12s;
}
.tk-item:hover { filter: brightness(1.15); transform: translateX(3px); }
.tk-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-item.has-unread { box-shadow: inset 4px 0 0 var(--accent); }
.tk-item-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-subject { font-weight: 700; overflow-wrap: anywhere; }
.tk-preview {
font-size: 12px;
opacity: 0.6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tk-item-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tk-date { font-size: 11px; opacity: 0.55; white-space: nowrap; }
.tk-unread {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
padding: 4px 6px;
margin-left: 6px;
background: var(--accent);
color: #2B1C08;
border: 2px solid #1A1006;
}
.tk-status {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
padding: 6px 8px;
border: 2px solid #1A1006;
white-space: nowrap;
}
.tk-status.is-open { background: var(--accent); color: #2B1C08; }
.tk-status.is-answered { background: var(--grass-dark); color: var(--cream); }
.tk-status.is-closed { background: var(--stone); color: rgba(255, 246, 227, 0.75); }
.tk-thread { display: flex; flex-direction: column; gap: 16px; }
.tk-back { align-self: flex-start; }
.tk-thread-head { display: flex; flex-direction: column; gap: 12px; }
.tk-thread-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk-thread-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-closed-note { font-size: 12px; opacity: 0.65; }
.tk-msgs-wrap { position: relative; }
.tk-msgs {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 460px;
overflow-y: auto;
padding: 16px;
background: var(--stone-dark);
border: 3px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3);
scroll-behavior: smooth;
}
.tk-jump {
position: absolute;
right: 18px;
bottom: 14px;
font-family: 'Rubik', sans-serif;
font-size: 12px;
padding: 8px 12px;
color: #2B1C08;
background: var(--accent);
border: 2px solid #1A1006;
cursor: pointer;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.tk-jump:hover { filter: brightness(1.1); }
.tk-sep {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0;
font-size: 10px;
opacity: 0.5;
}
.tk-sep::before,
.tk-sep::after { content: ''; flex: 1; height: 2px; background: rgba(255, 246, 227, 0.12); }
.tk-sep-unread { color: var(--accent); opacity: 1; }
.tk-sep-unread::before,
.tk-sep-unread::after { background: rgba(255, 210, 63, 0.4); }
.tk-msg {
display: flex;
align-items: flex-end;
gap: 8px;
max-width: 85%;
align-self: flex-start;
}
.tk-msg-mine { align-self: flex-end; flex-direction: row-reverse; }
.tk-msg-avatar { flex: 0 0 auto; }
.tk-msg-bubble {
padding: 10px 13px;
background: var(--deep-dark);
border: 2px solid #1A1006;
min-width: 0;
}
.tk-msg-admin .tk-msg-bubble { background: var(--grass-dark); }
.tk-msg.is-grouped { margin-top: -6px; }
.tk-msg.is-grouped .tk-msg-avatar { visibility: hidden; }
.tk-msg.is-grouped .tk-msg-who { display: none; }
.tk-msg.is-pending { opacity: 0.55; }
.tk-msg-who {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 10px;
opacity: 0.75;
margin-bottom: 6px;
}
.tk-msg-nick { font-weight: 700; }
.tk-msg-nick.is-link { color: var(--gold); text-decoration: none; border-bottom: 1px dotted rgba(255, 210, 63, 0.5); }
.tk-msg-nick.is-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tk-msg-tag {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
padding: 3px 5px;
background: var(--accent);
color: #2B1C08;
}
.tk-msg-time { margin-left: auto; opacity: 0.8; white-space: nowrap; }
.tk-msg-body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-link { color: var(--gold); }
.tk-link:hover { color: var(--accent); }
.acc-tab-badge {
display: inline-block;
margin-left: 6px;
min-width: 16px;
padding: 2px 5px;
font-size: 8px;
text-align: center;
background: var(--accent);
color: #2B1C08;
border: 2px solid #1A1006;
}
.adm-tab-badge {
display: inline-block;
margin-left: 6px;
min-width: 16px;
padding: 2px 4px;
font-size: 8px;
text-align: center;
background: var(--accent);
color: #2B1C08;
border: 2px solid #1A1006;
}
.adm-stat-hot { box-shadow: inset 0 -4px 0 var(--accent), inset 2px 2px 0 rgba(255, 255, 255, 0.06); }
.adm-stat-hot .adm-stat-num { color: var(--accent); }
.adm-gift-to { font-size: 11px; color: var(--gold); margin-top: 4px; }
.adm-tk-open { background: var(--accent); color: #2B1C08; }
.adm-tk-answered { background: var(--grass-dark); color: var(--cream); }
.adm-tk-closed { background: var(--stone); color: rgba(255, 246, 227, 0.75); }
.adm-pane .tk-work-main .tk-thread { margin-top: 0; }
.adm-pane .tk-work-main .tk-msgs { max-height: calc(100vh - 380px); min-height: 320px; }
.adm-tk-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tk-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-filter {
font-family: 'Rubik', sans-serif;
font-size: 12px;
padding: 7px 12px;
color: var(--cream);
background: var(--deep-dark);
border: 2px solid #1A1006;
cursor: pointer;
}
.tk-filter:hover { filter: brightness(1.2); }
.tk-filter.is-active { background: var(--accent); color: #2B1C08; font-weight: 700; }
.tk-filter-n { margin-left: 6px; opacity: 0.7; }
.adm-tk-subject { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-nick-link { color: var(--gold); text-decoration: none; font-weight: 700; }
.adm-nick-link:hover { color: var(--accent); }
.adm-row-unread td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.tk-canned { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-canned-btn {
font-family: 'Rubik', sans-serif;
font-size: 11px;
padding: 5px 10px;
color: var(--cream);
background: var(--deep-dark);
border: 2px solid #1A1006;
cursor: pointer;
}
.tk-canned-btn:hover { background: var(--stone); }
.adm-btn-ghost { background: var(--stone); }
.tk-clip { cursor: pointer; }
.tk-attach {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 6px 10px;
font-size: 12px;
background: var(--deep-dark);
border: 2px solid #1A1006;
}
.tk-attach[hidden] { display: none; }
.tk-attach.is-busy { border-color: rgba(247, 195, 37, 0.5); }
.tk-attach.is-ready { border-color: var(--grass-dark); }
.tk-attach.is-error { border-color: var(--redstone); color: var(--redstone); }
.tk-attach-name { overflow-wrap: anywhere; }
.tk-attach-drop {
margin-left: auto;
background: none;
border: none;
color: inherit;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0.7;
}
.tk-attach-drop:hover { opacity: 1; }
.tk-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tk-file { display: inline-flex; text-decoration: none; color: inherit; }
.tk-file-img img {
display: block;
max-width: 260px;
max-height: 220px;
border: 2px solid #1A1006;
object-fit: cover;
}
.tk-file-img:hover img { border-color: var(--gold); }
.tk-file-doc {
align-items: center;
gap: 8px;
padding: 8px 10px;
font-size: 12px;
background: var(--deep-dark);
border: 2px solid #1A1006;
}
.tk-file-doc:hover { border-color: var(--gold); }
.tk-file-ico {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
padding: 4px 5px;
background: var(--redstone);
color: var(--cream);
}
.tk-file-name { overflow-wrap: anywhere; }
.tk-file-size { opacity: 0.6; white-space: nowrap; }
.tk-msg-internal .tk-msg-bubble {
background: repeating-linear-gradient(
135deg,
rgba(255, 246, 227, 0.05) 0 8px,
rgba(255, 246, 227, 0.02) 8px 16px
);
border-color: rgba(255, 246, 227, 0.25);
}
.tk-msg-tag.is-internal { background: var(--stone); color: var(--cream); }
.tk-msg-tag.is-admin { background: var(--gold); color: #2B1C08; }
.tk-msg-tag.is-tech { background: var(--diamond); color: #2B1C08; }
.tk-msg-tag.is-moder { background: var(--grass-dark); color: var(--cream); }
.adm-tk-owner { font-size: 13px; }
.adm-tk-owner.is-mine { color: var(--gold); font-weight: 700; }
.adm-tk-wait { font-size: 13px; }
.adm-tk-wait.is-stale { color: var(--redstone); font-weight: 700; }
.tk-chip-wait { border-color: rgba(255, 210, 63, 0.5); }
.tk-chip-wait.is-stale { color: var(--redstone); border-color: var(--redstone); }
.tk-chip-owner.is-mine { color: var(--gold); }
.tk-chip-files { opacity: 0.8; }
.tk-take { margin-left: 4px; }
.tk-note-btn { border-style: dashed; }
.adm-pager {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
font-size: 13px;
}
.adm-pager[hidden] { display: none; }
.adm-pager button[disabled] { opacity: 0.4; cursor: default; }
.adm-pager-state { opacity: 0.7; }
.adm-tk-cat { max-width: 200px; }
.adm-pane-tickets {
width: min(1680px, calc(100vw - 64px));
margin-left: 50%;
transform: translateX(-50%);
}
.tk-work {
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 320px;
gap: 18px;
align-items: start;
margin-top: 18px;
}
.tk-work-side,
.tk-work-aside {
position: sticky;
top: 16px;
max-height: calc(100vh - 48px);
overflow-y: auto;
min-width: 0;
}
.tk-work-main { min-width: 0; }
.tk-work-empty {
padding: 60px 20px;
text-align: center;
font-size: 13px;
opacity: 0.5;
border: 2px dashed rgba(255, 246, 227, 0.15);
}
.tk-work-empty[hidden] { display: none; }
.adm-tk-list { gap: 8px; }
.adm-tk-item { display: block; padding: 10px 12px; }
.adm-tk-item.is-current { border-color: var(--gold); background: var(--stone-dark); }
.adm-tk-item.is-closed { opacity: 0.55; }
.adm-tk-item:hover { transform: none; }
.adm-tk-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-tk-item-nick { font-size: 12px; color: var(--gold); font-weight: 700; overflow-wrap: anywhere; }
.adm-tk-item .tk-subject { font-size: 13px; margin-top: 4px; }
.adm-tk-item .tk-preview { margin-top: 2px; }
.adm-tk-item-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
margin-top: 6px;
font-size: 11px;
}
@media (max-width: 1400px) {
.tk-work { grid-template-columns: 280px minmax(0, 1fr); }
.tk-work-aside { position: static; grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 900px) {
.adm-pane-tickets { width: auto; margin-left: 0; transform: none; }
.tk-work { grid-template-columns: 1fr; }
.tk-work-side { position: static; max-height: 420px; }
}
.tk-work-aside { border: 2px solid #1A1006; background: var(--deep-dark); }
.tk-work-aside[hidden] { display: none; }
.tk-dossier-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--gold);
background: none;
border: none;
cursor: pointer;
}
.tk-dossier-toggle:hover { background: rgba(247, 195, 37, 0.08); }
.tk-dossier-toggle.is-closed .tk-dossier-caret { transform: rotate(-90deg); }
.tk-dossier-caret { display: inline-block; transition: transform 0.15s steps(2); }
.tk-dossier-body { padding: 0 12px 12px; }
.tk-dossier-body[hidden] { display: none; }
.tk-dossier-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.tk-dossier-grid[hidden] { display: none; }
.tk-dos-card { padding: 10px; background: var(--stone-dark); border: 2px solid #1A1006; }
.tk-dos-title {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--gold);
margin-bottom: 8px;
}
.tk-dos-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 4px 0;
font-size: 12px;
border-bottom: 1px solid rgba(255, 246, 227, 0.07);
}
.tk-dos-row:last-child { border-bottom: none; }
.tk-dos-label { opacity: 0.7; overflow-wrap: anywhere; }
.tk-dos-value { text-align: right; white-space: nowrap; }
.tk-dos-row.is-dim { opacity: 0.6; }
.tk-dos-row.is-warn .tk-dos-value { color: var(--redstone); }
.tk-dos-row.is-ok .tk-dos-value { color: var(--grass); }
.tk-dos-empty { font-size: 12px; opacity: 0.55; }
.adm-canned { margin: 18px 0; }
.adm-canned[hidden] { display: none; }
.adm-inline-input { font-size: 12px; padding: 6px 8px; width: 100%; }
.adm-inline-num { width: 80px; }
.px-modal-field textarea {
resize: vertical;
font-family: 'Rubik', sans-serif;
min-height: 90px;
}
@media (max-width: 560px) {
.news-list { grid-template-columns: 1fr; }
.tk-item { flex-wrap: wrap; gap: 8px; }
.tk-item-side { width: 100%; justify-content: flex-start; }
.tk-msg { max-width: 100%; }
.tk-msgs { max-height: 60vh; }
.tk-counter { margin-left: 0; }
.adm-tk-tools { width: 100%; }
}
.mc-head {
display: inline-block;
flex: none;
position: relative;
overflow: hidden;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%237A4F33'/%3E%3Crect x='1' y='1' width='6' height='4' fill='%23CE9E6B'/%3E%3Crect x='1' y='1' width='6' height='2' fill='%233A2410'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%233A2410'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%233A2410'/%3E%3Crect x='1' y='5' width='6' height='2' fill='%2300A19A'/%3E%3C/svg%3E");
background-size: 100% 100%;
image-rendering: pixelated;
}
.mc-head img {
position: absolute;
left: -100%;
top: -100%;
width: 800%;
height: auto;
max-width: none;
image-rendering: pixelated;
}
.mc-premium {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
padding: 6px 10px;
border: 2px solid #1A1006;
background: linear-gradient(180deg, #F7C325, #D9A017);
color: #2B1C08;
white-space: nowrap;
}
.mc-staff-tech { background: linear-gradient(180deg, #4FD6E8, #2FA6B8); color: #06222A; }
.mc-staff-admin { background: linear-gradient(180deg, #E0664F, #B33F2C); color: #FFF6E3; }
.mc-staff-moder { background: linear-gradient(180deg, #A35CD8, #7A3BAB); color: #FFF6E3; }
.mc-ingame { background: linear-gradient(180deg, #6DBE4B, #4E9634); color: #0E2408; }
.mc-offgame {
background: linear-gradient(180deg, #6E7378, #55595E);
color: #17191B;
border-color: #2A2C2F;
}
.ach-head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.ach-progress {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--gold);
}
.ach-all {
margin-left: auto;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--cream);
background: var(--deep);
border: 2px solid #1A1006;
padding: 8px 12px;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease;
}
.ach-all:hover {
color: var(--gold);
border-color: var(--gold);
}
.ach-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
align-items: start;
}
.ach-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
var(--deep-dark);
border: 2px solid #1A1006;
padding: 12px 14px 14px;
overflow: hidden;
transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.ach-card:hover,
.ach-card:focus-visible {
transform: translateY(-2px);
border-color: var(--grass-dark);
box-shadow: 0 0 16px -6px var(--grass);
}
.ach-card.is-complete {
border-color: var(--gold);
box-shadow: inset 0 0 22px -12px var(--gold);
}
.ach-card.is-complete:hover,
.ach-card.is-complete:focus-visible {
border-color: var(--gold);
box-shadow: 0 0 18px -6px var(--gold);
}
.ach-card.is-fresh .ach-ico { opacity: 0.45; }
.ach-card-top {
display: flex;
align-items: center;
gap: 10px;
}
.ach-ico {
font-size: 24px;
line-height: 1;
flex: none;
}
.ach-headline {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.ach-group {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
line-height: 1.4;
color: var(--cream);
}
.ach-stat {
font-size: 12px;
opacity: 0.6;
}
.ach-count {
flex: none;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--gold);
background: #1A1006;
border: 1px solid #0D0904;
padding: 5px 7px;
}
.ach-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.ach-current {
font-size: 13px;
font-weight: 700;
color: var(--grass);
overflow-wrap: anywhere;
}
.ach-current.is-empty {
color: var(--cream);
font-weight: 400;
opacity: 0.5;
}
.ach-card.is-complete .ach-current { color: var(--gold); }
.ach-pips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.ach-pip {
width: 14px;
height: 8px;
background: #1A1006;
border: 1px solid #0D0904;
}
.ach-pip.is-done { background: var(--grass); border-color: var(--grass-dark); }
.ach-card.is-complete .ach-pip.is-done { background: var(--gold); border-color: #A8850F; }
.ach-pip.is-next {
background: transparent;
border-color: var(--gold);
box-shadow: inset 0 0 0 1px rgba(247, 195, 37, 0.35);
}
.ach-next {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 2px;
border-top: 1px solid #1A1006;
padding-top: 8px;
}
.ach-next-cap {
font-size: 11px;
color: var(--gold);
overflow-wrap: anywhere;
}
.ach-bar {
position: relative;
display: block;
height: 10px;
background: #1A1006;
border: 1px solid #0D0904;
overflow: hidden;
}
.ach-fill {
position: relative;
display: block;
height: 100%;
background: var(--grass);
transition: width 0.6s ease;
}
.ach-fill::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.16) 0 4px,
transparent 4px 8px
);
}
@keyframes ach-stripes {
to { background-position: 16px 0; }
}
@media (prefers-reduced-motion: no-preference) {
.ach-fill::after { animation: ach-stripes 1.1s linear infinite; }
}
.ach-nums {
font-size: 11px;
opacity: 0.6;
}
.ach-done-all {
margin-top: 2px;
border-top: 1px solid #1A1006;
padding-top: 8px;
font-size: 11px;
color: var(--gold);
}
.ach-badge {
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--deep-dark);
border: 2px solid var(--gold);
box-shadow: inset 0 0 18px -10px var(--gold);
padding: 12px 14px;
}
.ach-badge .ach-body { flex: 1; gap: 2px; }
.ach-badge-title {
font-weight: 700;
font-size: 14px;
color: var(--gold);
}
.ach-text {
font-size: 12px;
opacity: 0.7;
}
.achm { width: 100%; text-align: left; }
.achm-hint {
font-size: 12px;
opacity: 0.65;
margin-bottom: 12px;
text-align: center;
}
.achm-scroll {
max-height: 60svh;
overflow-y: auto;
padding-right: 4px;
}
.achm-group + .achm-group { margin-top: 18px; }
.achm-head {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 2px solid #1A1006;
padding-bottom: 6px;
margin-bottom: 8px;
}
.achm-head-ico { font-size: 18px; line-height: 1; }
.achm-head-name {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--gold);
}
.achm-head-stat {
margin-left: auto;
font-size: 11px;
opacity: 0.6;
}
.achm-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.achm-row {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--deep-dark);
border: 1px solid #1A1006;
border-left: 3px solid #1A1006;
padding: 8px 10px;
}
.achm-row.is-done { border-left-color: var(--grass); }
.achm-row.is-next { border-left-color: var(--gold); background: #2E2A1C; }
.achm-row.is-locked { opacity: 0.5; }
.achm-ico { font-size: 16px; line-height: 1.3; flex: none; }
.achm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.achm-title { font-weight: 700; font-size: 13px; }
.achm-desc { font-size: 11px; opacity: 0.65; }
.achm-state {
flex: none;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.55;
padding-top: 2px;
}
.achm-row.is-done .achm-state { color: var(--grass); opacity: 0.9; }
.achm-row.is-next .achm-state { color: var(--gold); opacity: 0.9; }
.trophy-common { --rar: var(--stone); }
.trophy-rare { --rar: var(--diamond); }
.trophy-epic { --rar: #A35CD8; }
.trophy-legendary { --rar: var(--gold); }
.trophy-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.trophy-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.trophy-card {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--deep-dark);
border: 2px solid var(--rar, var(--stone));
padding: 12px 28px 12px 14px;
box-shadow: inset 0 0 12px -6px var(--rar, var(--stone));
background-image: linear-gradient(135deg, color-mix(in srgb, var(--rar, var(--stone)) 14%, transparent), transparent 60%);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.trophy-card:hover {
transform: translateY(-2px);
box-shadow: 0 0 16px -6px var(--rar, var(--stone));
}
.trophy-showcase .trophy-card { box-shadow: 0 0 14px -6px var(--rar, var(--stone)); }
@keyframes trophy-shine {
0%, 100% { box-shadow: 0 0 14px -6px var(--rar); }
50% { box-shadow: 0 0 22px -4px var(--rar); }
}
@media (prefers-reduced-motion: no-preference) {
.trophy-showcase .trophy-legendary { animation: trophy-shine 2.8s ease-in-out infinite; }
}
.trophy-ico {
font-size: 22px;
line-height: 1;
flex: none;
}
.trophy-ico-img {
width: 44px;
height: 44px;
flex: none;
object-fit: contain;
image-rendering: pixelated;
}
.trophy-showcase .trophy-ico-img { width: 56px; height: 56px; }
.trophy-body { flex: 1; min-width: 0; }
.trophy-title {
display: flex;
align-items: baseline;
gap: 8px;
font-weight: 700;
font-size: 14px;
color: var(--rar, var(--stone));
}
.trophy-name { min-width: 0; }
.trophy-rarity {
flex: none;
margin-left: auto;
padding: 1px 6px;
font-size: 10px;
font-weight: 400;
text-transform: lowercase;
white-space: nowrap;
color: var(--cream);
background: color-mix(in srgb, var(--rar, var(--stone)) 35%, transparent);
vertical-align: middle;
}
.trophy-text {
font-size: 12px;
opacity: 0.7;
margin-top: 2px;
}
.trophy-foot {
margin-top: 8px;
font-size: 11px;
opacity: 0.6;
}
.trophy-pin {
position: absolute;
top: 8px;
right: 8px;
padding: 0;
border: 0;
background: none;
color: var(--rar, var(--stone));
font-size: 15px;
line-height: 1;
cursor: pointer;
opacity: 0.6;
}
.trophy-pin:hover { opacity: 1; }
.heat-wrap { margin-top: 32px; }
.heat-frame {
margin-top: 14px;
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 16px;
overflow-x: auto;
}
.heat-grid {
display: grid;
grid-template-columns: 34px repeat(24, minmax(12px, 1fr));
gap: 2px;
min-width: 560px;
}
.heat-day {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: rgba(255, 246, 227, 0.6);
display: flex;
align-items: center;
}
.heat-cell {
aspect-ratio: 1;
background: #1A1D20;
border: 1px solid #0D0904;
}
.heat-hours {
display: grid;
grid-template-columns: 34px repeat(24, minmax(12px, 1fr));
gap: 2px;
margin-top: 6px;
min-width: 560px;
}
.heat-hour {
font-size: 9px;
text-align: center;
color: rgba(255, 246, 227, 0.45);
}
.heat-legend {
margin-top: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
opacity: 0.7;
}
.heat-legend-scale {
display: flex;
gap: 2px;
}
.heat-legend-scale span {
width: 14px;
height: 14px;
border: 1px solid #0D0904;
}
.adm-alts-note {
font-size: 13px;
opacity: 0.75;
margin-bottom: 14px;
}
.adm-alt-nicks {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.adm-alt-nick {
background: var(--deep-dark);
border: 1px solid #1A1006;
padding: 3px 8px;
font-size: 12px;
color: var(--cream);
text-decoration: none;
}
.adm-alt-nick:hover { color: var(--gold); }
.adm-alt-via {
font-size: 11px;
opacity: 0.6;
}
@media (max-width: 560px) {
.ach-grid { grid-template-columns: 1fr; }
.trophy-grid, .trophy-showcase { grid-template-columns: 1fr; }
}
.adm-prem { color: var(--gold); font-weight: 700; }
.adm-ach-ico { font-size: 18px; line-height: 1; }
.adm-troph-img {
width: 28px;
height: 28px;
object-fit: contain;
image-rendering: pixelated;
vertical-align: middle;
}
.fr-crumbs {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
opacity: 0.7;
flex-wrap: wrap;
}
.fr-crumbs a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px dotted rgba(247, 195, 37, 0.5);
}
.fr-crumbs .sep { opacity: 0.5; }
.fr-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
align-items: start;
}
.fr-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.fr-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.btn-new {
background: var(--grass-dark);
font-size: 11px;
padding: 13px 18px;
flex-direction: row;
justify-content: center;
}
.fr-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 18px 0 14px;
}
.fr-filter {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--cream);
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 10px 14px;
cursor: pointer;
opacity: 0.55;
}
.fr-filter.is-on {
opacity: 1;
background: var(--stone-dark);
box-shadow: inset 0 -3px 0 var(--gold);
}
.fr-threads {
display: flex;
flex-direction: column;
gap: 10px;
}
.fr-thread {
display: block;
text-decoration: none;
color: inherit;
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 16px 18px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.05),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.fr-thread:hover { background: var(--deep); }
.fr-thread.is-new { border-left: 6px solid var(--accent); }
.fr-thread.is-pinned { border-left: 6px solid var(--gold); }
.fr-thread-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
}
.fr-thread-title {
font-size: 17px;
font-weight: 500;
line-height: 1.4;
}
.fr-flag {
display: inline-block;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
padding: 4px 6px;
vertical-align: middle;
margin-right: 8px;
border: 2px solid #1A1006;
}
.fr-flag-pin { background: var(--gold); color: #2B1C08; }
.fr-flag-new { background: var(--accent); color: #2B1C08; }
.fr-flag-lock { background: var(--stone-dark); color: var(--cream); }
.fr-thread-sub {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 12px;
opacity: 0.7;
}
.fr-sec-chip {
border: 2px solid var(--grass-dark);
background: rgba(109, 190, 75, 0.12);
padding: 3px 8px;
font-size: 11px;
}
.fr-thread-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
font-size: 12px;
opacity: 0.8;
white-space: nowrap;
}
.fr-count {
font-family: 'Press Start 2P', monospace;
font-size: 13px;
color: var(--gold);
}
.fr-last {
display: flex;
align-items: center;
gap: 6px;
}
.fr-head-img {
width: 28px;
height: 28px;
border: 2px solid #1A1006;
}
.fr-head-img.is-gone { opacity: 0.3; }
.fr-widget {
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 18px;
}
.fr-widget h3 {
font-family: 'Press Start 2P', monospace;
font-size: 11px;
margin-bottom: 12px;
}
.fr-sections {
display: flex;
flex-direction: column;
gap: 8px;
}
.fr-section-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
border: 2px solid rgba(255, 246, 227, 0.15);
padding: 12px 14px;
}
.fr-section-link:hover { border-color: var(--grass); }
.fr-section-link.is-on {
border-color: var(--gold);
background: rgba(247, 195, 37, 0.08);
}
.fr-section-ico { font-size: 20px; }
.fr-section-name { display: block; font-size: 15px; font-weight: 500; }
.fr-section-desc { display: block; font-size: 12px; opacity: 0.6; margin-top: 2px; }
.fr-section-n {
margin-left: auto;
font-family: 'Press Start 2P', monospace;
font-size: 10px;
opacity: 0.6;
}
.fr-rules {
font-size: 13px;
line-height: 1.7;
opacity: 0.75;
}
.fr-rules li { margin-left: 18px; }
.fr-thead {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.fr-thead-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
font-size: 13px;
opacity: 0.7;
margin-top: 8px;
}
.fr-tools {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.fr-tool {
font-size: 12px;
color: var(--cream);
background: none;
border: 2px solid rgba(255, 246, 227, 0.25);
padding: 7px 11px;
cursor: pointer;
}
.fr-tool:hover { border-color: var(--gold); color: var(--gold); }
.fr-posts {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 20px;
}
.fr-post {
display: flex;
gap: 14px;
scroll-margin-top: 24px;
}
.fr-post-side {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 56px;
}
.fr-post-side .fr-head-img { width: 40px; height: 40px; }
.fr-post-body-wrap {
flex: 1;
min-width: 0;
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 14px 16px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.05),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.fr-post.is-first .fr-post-body-wrap {
background: var(--stone-dark);
box-shadow: inset 0 -4px 0 rgba(247, 195, 37, 0.35);
}
.fr-post.is-target .fr-post-body-wrap { border-color: var(--gold); }
.fr-post-who {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
opacity: 0.8;
margin-bottom: 10px;
}
.fr-nick {
font-weight: 700;
color: var(--gold);
text-decoration: none;
border-bottom: 1px dotted rgba(247, 195, 37, 0.5);
}
.fr-tag {
font-family: 'Press Start 2P', monospace;
font-size: 7px;
padding: 3px 5px;
border: 2px solid #1A1006;
}
.fr-tag-admin { background: var(--accent); color: #2B1C08; }
.fr-tag-moder { background: var(--diamond); color: #12333A; }
.fr-tag-rank { background: var(--gold); color: #2B1C08; }
.fr-time { margin-left: auto; opacity: 0.7; }
.fr-anchor {
opacity: 0.5;
text-decoration: none;
color: var(--cream);
font-size: 11px;
}
.fr-post-body {
font-size: 15px;
line-height: 1.7;
overflow-wrap: anywhere;
}
.fr-post-body p + p { margin-top: 10px; }
.fr-post-body a { color: var(--gold); }
.fr-post-body code {
background: #1B1D21;
border: 1px solid rgba(255, 246, 227, 0.15);
padding: 1px 5px;
font-size: 13px;
}
.fr-post-body pre {
background: #1B1D21;
border: 2px solid #1A1006;
padding: 12px;
margin: 10px 0;
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
}
.fr-post-body blockquote {
border-left: 4px solid var(--grass-dark);
padding-left: 12px;
margin: 10px 0;
opacity: 0.8;
}
.fr-post-body ul { margin: 10px 0 10px 20px; }
.fr-edited {
font-size: 11px;
opacity: 0.5;
margin-top: 8px;
}
.fr-quote {
display: block;
text-decoration: none;
color: inherit;
border-left: 4px solid var(--gold);
background: rgba(247, 195, 37, 0.07);
padding: 8px 12px;
margin-bottom: 12px;
font-size: 13px;
opacity: 0.85;
}
.fr-quote b { color: var(--gold); }
.fr-quote-text {
display: block;
opacity: 0.8;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fr-post-foot {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.fr-reacts {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fr-react {
font-size: 13px;
background: none;
color: var(--cream);
border: 2px solid rgba(255, 246, 227, 0.2);
padding: 5px 9px;
cursor: pointer;
}
.fr-react:hover { border-color: var(--gold); }
.fr-react.is-on { border-color: var(--gold); background: rgba(247, 195, 37, 0.15); }
.fr-react-add { opacity: 0.5; }
.fr-react-add:hover { opacity: 1; }
.fr-post-acts {
margin-left: auto;
display: flex;
gap: 10px;
font-size: 12px;
opacity: 0.55;
}
.fr-post-acts button {
font-size: 12px;
background: none;
border: none;
color: var(--cream);
cursor: pointer;
text-decoration: underline dotted;
}
.fr-post-acts button:hover { color: var(--gold); }
.fr-post-acts button.is-danger:hover { color: var(--redstone); }
.fr-deleted {
opacity: 0.45;
font-size: 13px;
font-style: italic;
padding: 6px 0;
}
.fr-sep {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0;
font-size: 10px;
opacity: 0.5;
}
.fr-sep::before,
.fr-sep::after {
content: '';
flex: 1;
height: 2px;
background: rgba(255, 246, 227, 0.12);
}
.fr-sep-unread { color: var(--accent); opacity: 1; }
.fr-sep-unread::before,
.fr-sep-unread::after { background: rgba(255, 138, 0, 0.4); }
.fr-reply { margin-top: 22px; }
.fr-reply-to {
display: flex;
align-items: center;
gap: 10px;
border-left: 4px solid var(--gold);
background: rgba(247, 195, 37, 0.07);
padding: 8px 12px;
margin-bottom: 10px;
font-size: 13px;
}
.fr-reply-drop {
margin-left: auto;
background: none;
border: none;
color: var(--cream);
font-size: 16px;
cursor: pointer;
opacity: 0.6;
}
.fr-reply-drop:hover { opacity: 1; color: var(--redstone); }
.fr-editor {
border: 3px solid #1A1006;
background: var(--stone-dark);
}
.fr-editor-bar {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 8px;
border-bottom: 2px solid #1A1006;
background: #383C41;
}
.fr-fmt {
font-size: 12px;
min-width: 30px;
color: var(--cream);
background: none;
border: 2px solid rgba(255, 246, 227, 0.2);
padding: 5px 8px;
cursor: pointer;
}
.fr-fmt:hover { border-color: var(--gold); color: var(--gold); }
.fr-fmt.is-on { border-color: var(--gold); color: var(--gold); }
.fr-fmt.is-right { margin-left: auto; }
.fr-textarea {
width: 100%;
min-height: 120px;
resize: vertical;
padding: 14px;
font-family: 'Rubik', sans-serif;
font-size: 15px;
line-height: 1.6;
color: var(--cream);
background: transparent;
border: none;
outline: none;
}
.fr-preview { padding: 14px; }
.fr-editor-foot {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 12px;
border-top: 2px solid #1A1006;
font-size: 12px;
opacity: 0.65;
}
.fr-editor-foot .right {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
opacity: 1;
}
.fr-draft-note { opacity: 0.6; font-size: 12px; }
.fr-counter { opacity: 0.5; }
.fr-counter.is-low { opacity: 1; color: var(--accent); }
.fr-input {
width: 100%;
padding: 14px;
font-family: 'Rubik', sans-serif;
font-size: 16px;
color: var(--cream);
background: var(--stone-dark);
border: 3px solid #1A1006;
outline: none;
}
.fr-input:focus,
.fr-editor:focus-within { border-color: var(--gold); }
.fr-label {
display: block;
font-size: 13px;
opacity: 0.7;
margin: 16px 0 6px;
}
.fr-state {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
border: 3px dashed rgba(255, 246, 227, 0.2);
padding: 18px;
font-size: 14px;
line-height: 1.6;
margin-top: 16px;
}
.fr-state-ico { font-size: 26px; }
.fr-state b { display: block; margin-bottom: 3px; }
.fr-state.is-warn { border-color: rgba(255, 138, 0, 0.5); background: rgba(255, 138, 0, 0.06); }
.fr-state.is-stop { border-color: rgba(255, 123, 114, 0.5); background: rgba(255, 123, 114, 0.06); }
.fr-empty {
text-align: center;
padding: 48px 20px;
}
.fr-empty-ico {
font-size: 46px;
margin-bottom: 14px;
opacity: 0.8;
}
.fr-empty p {
opacity: 0.7;
font-size: 14px;
line-height: 1.7;
max-width: 420px;
margin: 0 auto 20px;
}
.fr-pages {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 22px;
flex-wrap: wrap;
}
.fr-page {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--cream);
background: var(--deep-dark);
border: 3px solid #1A1006;
padding: 11px 14px;
cursor: pointer;
text-decoration: none;
}
.fr-page.is-on { background: var(--stone-dark); box-shadow: inset 0 -3px 0 var(--gold); }
.fr-page:hover { filter: brightness(1.15); }
.acc-forum-btn { border-color: var(--diamond); }
.corner-forum { border-color: var(--diamond); }
@media (max-width: 900px) {
.fr-layout { grid-template-columns: 1fr; }
.fr-side { order: -1; }
}
@media (max-width: 560px) {
.fr-thread-row { grid-template-columns: 1fr; gap: 6px; }
.fr-thread-meta { flex-direction: row; align-items: center; gap: 12px; }
.fr-post-side { width: 34px; }
.fr-post-side .fr-head-img { width: 32px; height: 32px; }
.fr-post-acts { margin-left: 0; width: 100%; }
}
.adm-pages {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 12px;
}
.adm-pages .adm-mini.is-on {
border-color: var(--gold);
color: var(--gold);
cursor: default;
}
.news-talk {
display: inline-block;
margin-top: 10px;
font-size: 13px;
color: var(--gold);
text-decoration: none;
border-bottom: 1px dotted rgba(247, 195, 37, 0.5);
}
.news-talk:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fr-search {
display: flex;
gap: 8px;
margin-top: 14px;
max-width: 460px;
}
.fr-search-input {
flex: 1;
min-width: 0;
padding: 11px 14px;
font-family: 'Rubik', sans-serif;
font-size: 15px;
color: var(--cream);
background: var(--stone-dark);
border: 3px solid #1A1006;
outline: none;
}
.fr-search-input:focus { border-color: var(--gold); }
.fr-search-input::placeholder { color: rgba(255, 246, 227, 0.45); }
.fr-search-btn {
font-family: 'Press Start 2P', monospace;
font-size: 10px;
color: var(--cream);
background: var(--grass-dark);
border: 3px solid #1A1006;
padding: 0 16px;
cursor: pointer;
}
.fr-search-btn:hover { filter: brightness(1.1); }
.fr-hit {
margin-top: 10px;
padding-left: 12px;
border-left: 3px solid var(--grass-dark);
font-size: 13px;
line-height: 1.6;
opacity: 0.75;
}
.fr-notices-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.fr-notice-clear {
font-size: 12px;
color: var(--cream);
background: none;
border: none;
opacity: 0.6;
cursor: pointer;
text-decoration: underline dotted;
}
.fr-notice-clear:hover { opacity: 1; color: var(--gold); }
.fr-notice {
display: block;
text-decoration: none;
color: inherit;
padding: 10px 12px;
margin-top: 8px;
border: 2px solid rgba(255, 246, 227, 0.12);
}
.fr-notice:hover { border-color: var(--grass); }
.fr-notice.is-new { border-left: 4px solid var(--accent); }
.fr-notice-top { font-size: 13px; }
.fr-notice-ico { margin-right: 6px; opacity: 0.7; }
.fr-notice-thread { font-size: 12px; color: var(--gold); margin-top: 4px; }
.fr-notice-excerpt {
font-size: 12px;
opacity: 0.6;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fr-notice .fr-ago { display: block; font-size: 11px; opacity: 0.45; margin-top: 6px; }
.fr-mention {
color: var(--diamond);
text-decoration: none;
border-bottom: 1px dotted rgba(79, 214, 232, 0.5);
}
.fr-mention:hover { color: var(--gold); border-bottom-color: var(--gold); }
.fr-img-link { display: inline-block; margin: 10px 0; max-width: 100%; }
.fr-post-img {
max-width: 100%;
max-height: 420px;
border: 3px solid #1A1006;
background: var(--stone-dark);
}
@media (max-width: 560px) {
.fr-search { flex-direction: column; }
.fr-search-btn { padding: 12px; }
.fr-post-img { max-height: 280px; }
}
.acc-main-forum { max-width: 1500px; }
@media (min-width: 1200px) {
.acc-main-forum .fr-layout { grid-template-columns: 1fr 340px; gap: 32px; }
}
.fr-post-body .fr-md-h {
font-family: 'Press Start 2P', monospace;
line-height: 1.5;
color: var(--gold);
margin: 16px 0 8px;
}
.fr-post-body h3.fr-md-h { font-size: 13px; }
.fr-post-body h4.fr-md-h { font-size: 11px; }
.fr-post-body h5.fr-md-h { font-size: 10px; opacity: 0.85; }
.fr-post-body .fr-md-h:first-child { margin-top: 0; }
.fr-post-body hr {
border: 0;
border-top: 2px solid rgba(255, 246, 227, 0.15);
margin: 14px 0;
}
.fr-post-body ol { margin: 10px 0 10px 22px; }
.fr-post-body s { opacity: 0.6; }
.fr-spoiler {
background: #1B1D21;
color: transparent;
border-bottom: 1px dashed rgba(255, 246, 227, 0.25);
cursor: pointer;
border-radius: 2px;
user-select: none;
}
.fr-spoiler * { color: transparent; }
.fr-spoiler:focus-visible { outline: 2px solid var(--gold); }
.fr-spoiler.is-open {
background: rgba(255, 246, 227, 0.08);
color: inherit;
cursor: auto;
user-select: auto;
}
.fr-spoiler.is-open * { color: inherit; }
.fr-spoiler.is-open a { color: var(--gold); }
.fr-picker {
position: fixed;
z-index: 60;
max-width: min(320px, calc(100vw - 16px));
max-height: min(340px, calc(100vh - 16px));
overflow-y: auto;
padding: 10px;
background: var(--deep-dark);
border: 3px solid #1A1006;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
}
.fr-picker-title {
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.5;
margin: 8px 0 6px;
}
.fr-picker-title:first-child { margin-top: 0; }
.fr-picker-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
}
.fr-picker-item {
font-size: 18px;
line-height: 1;
padding: 6px 0;
background: none;
border: 2px solid transparent;
color: inherit;
cursor: pointer;
}
.fr-picker-item:hover { border-color: var(--gold); background: rgba(247, 195, 37, 0.12); }
.fr-picker-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 560px) {
.fr-picker-grid { grid-template-columns: repeat(6, 1fr); }
.fr-picker-item { font-size: 20px; padding: 8px 0; }
}
.adm-health {
border: 3px solid #1A1006;
background: var(--deep-dark);
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.06),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.adm-health.is-bad { box-shadow: inset 0 -4px 0 #E8483F, inset 2px 2px 0 rgba(255, 255, 255, 0.06); }
.adm-health-head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: none;
border: 0;
color: var(--cream);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
.adm-health-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-health.is-bad .adm-health-title { color: #FF9E96; }
.adm-health-toggle { opacity: 0.5; font-size: 11px; }
.adm-health-head[aria-expanded="true"] .adm-health-toggle { transform: rotate(180deg); }
.adm-health-dot {
width: 10px;
height: 10px;
flex: none;
background: var(--grass, #6DBE4B);
}
.adm-health-dot.is-bad { background: #E8483F; }
.adm-health-dot.is-ok { background: #6DBE4B; }
.adm-health-body {
border-top: 3px solid #1A1006;
padding: 12px 16px 16px;
}
.adm-health-group {
margin: 14px 0 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.5;
color: var(--cream);
}
.adm-health-group:first-child { margin-top: 0; }
.adm-health-row {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
font-size: 12px;
color: var(--cream);
}
.adm-health-name { flex: none; min-width: 190px; }
.adm-health-note { flex: 1; min-width: 0; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-health-row.is-ok .adm-health-dot { background: #6DBE4B; }
.adm-health-row.is-warn .adm-health-dot { background: #F7C325; }
.adm-health-row.is-bad .adm-health-dot { background: #E8483F; }
.adm-health-row.is-idle .adm-health-dot { background: #55595E; }
.adm-health-row.is-bad .adm-health-note { opacity: 0.9; color: #FF9E96; }
@media (max-width: 640px) {
.adm-health-row { flex-wrap: wrap; }
.adm-health-name { min-width: 0; }
.adm-health-note { flex-basis: 100%; margin-left: 20px; }
}
.adm-stat-delta {
display: block;
margin-top: 6px;
font-size: 11px;
letter-spacing: 0.3px;
}
.adm-stat-delta.is-up { color: #6DBE4B; }
.adm-stat-delta.is-down { color: #E8483F; }
.adm-stat-delta.is-flat { color: var(--cream); opacity: 0.45; }
.adm-trend {
border: 3px solid #1A1006;
background: var(--deep-dark);
padding: 14px 16px 10px;
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, 0.06),
inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.adm-trend-cap {
margin: 0 0 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.5;
color: var(--cream);
}
.adm-trend-chart {
display: block;
width: 100%;
image-rendering: pixelated;
}
.adm-trend-foot { margin-top: 6px; }
.adm-pane { position: relative; }
.adm-pane.is-busy::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: adm-busy 1.1s linear infinite;
z-index: 2;
}
.adm-pane.is-busy > *:not(.adm-pane-msg) { opacity: 0.55; transition: opacity 0.15s; }
@keyframes adm-busy {
from { background-position: -40% 0; }
to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
.adm-pane.is-busy::before { animation: none; background-size: 100% 100%; opacity: 0.5; }
}
.adm-trunc {
margin: 8px 0 0;
font-size: 12px;
color: var(--cream);
opacity: 0.55;
}
.adm-refresh {
align-self: flex-start;
margin-top: -6px;
padding: 6px 12px;
background: none;
border: 2px solid #1A1006;
color: var(--cream);
font: inherit;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.adm-refresh:hover { opacity: 1; border-color: var(--gold); }
.adm-tab-group {
display: flex;
align-items: center;
gap: 8px;
padding-right: 14px;
border-right: 2px solid rgba(26, 16, 6, 0.6);
}
.adm-tab-group:last-child { border-right: 0; padding-right: 0; }
.adm-tab-group-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
opacity: 0.4;
color: var(--cream);
user-select: none;
}
@media (max-width: 760px) {
.adm-tabs { flex-direction: column; align-items: stretch; }
.adm-tab-group {
flex-wrap: wrap;
padding: 0 0 8px;
border-right: 0;
border-bottom: 2px solid rgba(26, 16, 6, 0.6);
}
.adm-tab-group:last-child { border-bottom: 0; }
.adm-tab-group-label { flex-basis: 100%; }
}
.toast-action {
align-self: center;
margin-left: 10px;
padding: 5px 10px;
background: none;
border: 2px solid currentColor;
color: inherit;
font: inherit;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.8;
cursor: pointer;
}
.toast-action:hover { opacity: 1; }
.toast-action:disabled { opacity: 0.4; cursor: default; }
.adm-row-pending {
opacity: 0.35;
text-decoration: line-through;
pointer-events: none;
}
.adm-check-col { width: 28px; text-align: center; padding-left: 6px; padding-right: 0; }
.adm-bulk {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
padding: 10px 12px;
border: 3px solid #1A1006;
background: var(--deep-dark);
box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.06);
}
.adm-bulk-count {
margin-right: 4px;
font-size: 12px;
color: var(--gold);
}
.adm-bulk-clear {
margin-left: auto;
background: none;
border: 0;
color: var(--cream);
font: inherit;
font-size: 11px;
opacity: 0.5;
text-decoration: underline;
cursor: pointer;
}
.adm-bulk-clear:hover { opacity: 1; }
.adm-btn-danger { border-color: #E8483F; color: #FF9E96; }
.adm-nick-btn {
padding: 0;
background: none;
border: 0;
color: var(--cream);
font: inherit;
font-weight: 700;
text-align: left;
border-bottom: 1px dotted rgba(255, 246, 227, 0.4);
cursor: pointer;
}
.adm-nick-btn:hover { color: var(--gold); border-bottom-color: var(--gold); }
.adm-dossier-modal {
max-height: 60vh;
overflow-y: auto;
}
.mk-title {
font-family: 'Press Start 2P', monospace;
font-size: 20px;
line-height: 1.5;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mk-sub {
margin-top: 10px;
font-size: 15px;
opacity: 0.8;
}
.mk-h2 {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
line-height: 1.6;
}
.mk-btn {
font-size: 10px;
padding: 10px 14px;
background: var(--stone);
}
.mk-btn-danger { background: #8A3A34; }
.mk-item-img {
image-rendering: pixelated;
display: block;
}
.mk-item-unknown {
display: grid;
place-items: center;
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: rgba(255, 246, 227, 0.5);
}
.mk-slot {
position: relative;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: var(--stone-dark);
border: 2px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35), inset -2px -2px 0 rgba(255, 255, 255, 0.12);
}
.mk-slot.is-empty { background: rgba(67, 71, 76, 0.55); }
.mk-slot.is-editable { cursor: pointer; }
.mk-slot.is-editable:hover { border-color: var(--gold); }
.mk-slot.is-magic::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(115deg, transparent 30%, rgba(200, 111, 232, 0.55) 50%, transparent 70%);
background-size: 260% 100%;
animation: mkGlint 3.2s linear infinite;
mix-blend-mode: screen;
}
@keyframes mkGlint {
from { background-position: 160% 0; }
to { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
.mk-slot.is-magic::after { animation: none; background-position: 50% 0; }
}
.mk-slot-count {
position: absolute;
right: 2px;
bottom: 0;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--cream);
text-shadow: 1px 1px 0 #1A1006, -1px 1px 0 #1A1006, 1px -1px 0 #1A1006, -1px -1px 0 #1A1006;
pointer-events: none;
}
.mk-slot-bar {
position: absolute;
left: 4px;
right: 4px;
bottom: 3px;
height: 3px;
background: #1A1006;
pointer-events: none;
}
.mk-slot-bar-fill { display: block; height: 100%; background: var(--grass); }
.mk-tip {
position: absolute;
z-index: 60;
max-width: 280px;
padding: 8px 10px;
background: rgba(20, 21, 25, 0.96);
border: 2px solid #2B1C08;
box-shadow: 0 6px 0 rgba(26, 16, 6, 0.5);
font-size: 13px;
line-height: 1.45;
pointer-events: none;
}
.mk-tip-name { font-weight: 700; }
.mk-tip-name.is-magic { color: var(--diamond); }
.mk-tip-name.is-renamed { font-style: italic; }
.mk-tip-sub { opacity: 0.6; font-size: 12px; }
.mk-tip-ench { color: #C6B7F0; font-size: 12px; }
.mk-tip-lore { color: rgba(255, 246, 227, 0.55); font-style: italic; font-size: 12px; }
.mk-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mk-tag {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--cream);
text-decoration: none;
background: var(--deep-dark);
border: 2px solid #1A1006;
padding: 7px 9px;
opacity: 0.55;
}
.mk-tag.is-on { opacity: 1; background: var(--stone-dark); box-shadow: inset 0 -3px 0 var(--gold); }
.mk-tag.is-static { opacity: 1; background: var(--stone-dark); }
.mk-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
margin-top: 18px;
}
.mk-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
color: var(--cream);
text-decoration: none;
background: var(--deep);
border: 3px solid #1A1006;
box-shadow: 0 5px 0 rgba(26, 16, 6, 0.5);
}
.mk-card:hover { filter: brightness(1.1); }
.mk-card-head { display: flex; align-items: center; gap: 10px; }
.mk-card-who { min-width: 0; }
.mk-card-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-owner { font-size: 13px; opacity: 0.7; }
.mk-card-time { font-size: 12px; opacity: 0.6; }
.mk-card-strip { display: flex; gap: 4px; overflow: hidden; }
.mk-card-empty { font-size: 13px; opacity: 0.5; align-self: center; }
.mk-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.mk-card-foot .mk-tags { margin-top: 0; }
.mk-card-foot .mk-card-time { margin-left: auto; }
.mk-shop {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: start;
margin-top: 18px;
}
.mk-grid {
display: grid;
grid-template-columns: repeat(9, 44px);
grid-template-rows: repeat(var(--mk-rows, 3), 44px);
gap: 3px;
padding: 8px;
background: var(--deep-dark);
border: 3px solid #1A1006;
box-shadow: 0 6px 0 rgba(26, 16, 6, 0.5);
}
.mk-meta { display: flex; flex-direction: column; gap: 14px; }
.mk-meta-owner { display: flex; align-items: center; gap: 10px; }
.mk-meta-facts { display: flex; flex-direction: column; gap: 8px; }
.mk-note { font-size: 15px; }
.mk-warn {
font-size: 13px;
padding: 10px 12px;
background: rgba(247, 195, 37, 0.1);
border-left: 4px solid var(--gold);
}
.mk-own { margin-top: 18px; }
.mk-own-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-own-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mk-own-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
color: var(--cream);
text-decoration: none;
background: var(--stone-dark);
border: 2px solid #1A1006;
}
.mk-own-item:hover { filter: brightness(1.15); }
.mk-own-title { font-weight: 700; font-size: 14px; }
.mk-own-meta { font-size: 12px; opacity: 0.6; }
.mk-owner { margin-top: 20px; }
.mk-owner-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mk-modal-back {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: center;
padding: 16px;
background: rgba(20, 21, 25, 0.8);
}
.mk-modal {
display: flex;
flex-direction: column;
gap: 12px;
width: min(560px, 100%);
max-height: 82vh;
padding: 18px;
background: var(--deep);
border: 3px solid #1A1006;
box-shadow: 0 8px 0 rgba(26, 16, 6, 0.55);
}
.mk-modal-search {
padding: 11px 14px;
font-family: 'Rubik', sans-serif;
font-size: 15px;
color: var(--cream);
background: var(--stone-dark);
border: 3px solid #1A1006;
outline: none;
}
.mk-modal-search:focus { border-color: var(--gold); }
.mk-modal-search::placeholder { color: rgba(255, 246, 227, 0.45); }
.mk-modal-amount { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.mk-modal-amount input {
width: 80px;
padding: 8px 10px;
font-family: 'Rubik', sans-serif;
color: var(--cream);
background: var(--stone-dark);
border: 3px solid #1A1006;
outline: none;
}
.mk-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 6px;
overflow-y: auto;
min-height: 120px;
}
.mk-modal-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
color: var(--cream);
background: var(--stone-dark);
border: 2px solid #1A1006;
cursor: pointer;
font: inherit;
}
.mk-modal-cell:hover { border-color: var(--gold); }
.mk-modal-cell-name {
font-size: 11px;
line-height: 1.25;
text-align: center;
opacity: 0.8;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 720px) {
.mk-shop { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.mk-slot { width: 34px; height: 34px; }
.mk-grid { grid-template-columns: repeat(9, 34px); grid-template-rows: repeat(var(--mk-rows, 3), 34px); }
.mk-title { font-size: 15px; }
}
.corner-market { border-color: var(--gold); }
.mk-chat-area { margin-top: 20px; }
.mk-chat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.mk-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mk-chat-title { font-size: 14px; font-weight: 700; }
.mk-chat-feed {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 340px;
overflow-y: auto;
padding: 12px;
background: var(--deep-dark);
border: 3px solid #1A1006;
}
.mk-msg {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 4px 8px;
align-items: baseline;
padding: 8px 10px;
background: var(--stone-dark);
border-left: 3px solid var(--stone);
font-size: 14px;
line-height: 1.45;
}
.mk-msg.is-mine { border-left-color: var(--grass); }
.mk-msg.is-system {
grid-template-columns: 1fr auto;
border-left-color: var(--gold);
background: rgba(247, 195, 37, 0.08);
font-style: italic;
}
.mk-msg-who { font-weight: 700; font-size: 13px; opacity: 0.75; }
.mk-msg-body { overflow-wrap: anywhere; }
.mk-msg-time { font-size: 11px; opacity: 0.5; white-space: nowrap; }
.mk-chat-form { display: flex; gap: 8px; }
.mk-chat-form .mk-modal-search { flex: 1; min-width: 0; }
.mk-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--ink);
background: var(--gold);
vertical-align: middle;
}
.mk-chat-item-head { display: flex; align-items: center; gap: 4px; }
.mk-chat-item-last {
font-size: 12px;
opacity: 0.55;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 480px) {
.mk-chat-form { flex-direction: column; }
.mk-msg { grid-template-columns: 1fr; }
.mk-msg-time { justify-self: end; }
}
.mk-lots, .mk-lot-list, .mk-deal-list { margin-top: 12px; }
.mk-lot-list, .mk-deal-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mk-lot, .mk-deal {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: var(--stone-dark);
border: 3px solid #1A1006;
border-left-width: 6px;
border-left-color: var(--grass);
}
.mk-lot.is-stale, .mk-deal.is-dispute { border-left-color: var(--redstone); }
.mk-lot.is-reserved, .mk-deal.is-new { border-left-color: var(--gold); }
.mk-lot.is-sold, .mk-deal.is-done { border-left-color: var(--stone); opacity: 0.75; }
.mk-deal.is-accepted { border-left-color: var(--diamond); }
.mk-lot-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mk-lot-title { font-weight: 700; }
.mk-lot-price { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--gold); }
.mk-lot-pay { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.85; }
.mk-lot .mk-warn, .mk-deal .mk-warn { font-size: 12px; }
.mk-slot.is-lot { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.mk-slot.is-picked { border-color: var(--diamond); box-shadow: 0 0 0 2px var(--diamond); }
.mk-rep { display: block; font-size: 12px; opacity: 0.7; }
.mk-rep.is-bad { color: var(--redstone); opacity: 1; }
.adm-market-counts { font-size: 13px; opacity: 0.7; }
.adm-market-settings {
display: flex;
gap: 14px;
align-items: flex-end;
flex-wrap: wrap;
margin-top: 12px;
}
.adm-market-settings .px-modal-field { margin: 0; }
.adm-market-settings input, .adm-market-settings select { width: 150px; }
.mk-report {
align-self: flex-start;
padding: 0;
background: none;
border: 0;
color: rgba(255, 246, 227, 0.5);
font: inherit;
font-size: 12px;
text-decoration: underline dotted;
cursor: pointer;
}
.mk-report:hover { color: var(--redstone); }
.mk-cta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.mk-cta-main { background: var(--grass-dark); }
.mk-cta-note { font-size: 13px; opacity: 0.7; }
.mk-stock { margin-top: 18px; }
.mk-stock-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 6px;
margin-top: 12px;
}
.mk-stock-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--stone-dark);
border: 2px solid #1A1006;
}
.mk-stock-name {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mk-stock-count {
margin-left: auto;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--gold);
white-space: nowrap;
}
.mk-card-more {
align-self: center;
padding: 0 6px;
font-family: 'Press Start 2P', monospace;
font-size: 9px;
opacity: 0.6;
}