@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;
--tap: 44px;
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--topbar-h: 52px;
--tabbar-h: 56px;
}
* { 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;
}
@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;
}
@keyframes drift {
from { translate: 0 0; }
to   { translate: 110vw 0; }
}
.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); }
@media (hover: hover) and (pointer: fine) {
.duck-btn:hover .duck { scale: 1.08; rotate: -4deg; }
}
.duck-btn:active .duck { scale: 0.94; }
.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; }
}
#duckGame {
width: 100%;
height: auto;
image-rendering: pixelated;
touch-action: manipulation;
}
#duckGame:focus-visible {
outline: 3px dashed var(--ink);
outline-offset: 4px;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
.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; }
.btn-ingame { background: var(--grass-dark); justify-content: center; }
.btn-microsoft { background: #107C10; justify-content: center; }
.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; }
@media (hover: hover) and (pointer: fine) {
.server-card:hover {
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 {
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-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; }
}
.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; }
}
@keyframes flowersway {
from { rotate: -4deg; }
to { rotate: 4deg; }
}
.fly {
position: absolute;
pointer-events: none;
z-index: 1;
}
@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; }
}
@keyframes flutter {
0%   { translate: -12vw 30vh; }
25%  { translate: -22vw 22vh; }
50%  { translate: -14vw 38vh; }
75%  { translate: -26vw 28vh; }
100% { translate: -12vw 30vh; }
}
@media (prefers-reduced-motion: reduce) {
.fly { animation: none; }
.fly { display: none; }
}
@keyframes hintbob {
0%, 100% { translate: -50% 0; }
50% { translate: -50% 6px; }
}
.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;
}
.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;
}
.surface-row .online-graph {
flex: 1 1 360px;
min-width: 0;
}
.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 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; }
.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;
}
.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-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: rgba(255, 246, 227, 0.45);
font-size: 12px;
line-height: 1.6;
text-align: center;
}
.page-foot .foot-legal-en { font-size: 10px; }
@media (max-width: 560px) {
.layer { padding: 72px 18px; }
.btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.cloud,
.dot { animation: 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,
.auth-microsoft,
.auth-ingame { width: 100%; }
.auth-sub-phone { margin-top: -6px; }
.auth-back {
margin-top: 4px;
padding: 6px;
border: none;
background: none;
font: inherit;
font-size: 13px;
color: rgba(255, 246, 227, 0.55);
cursor: pointer;
}
.auth-back:hover { color: var(--cream); }
.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;
}
@media (hover: hover) and (pointer: fine) {
.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 > .acc-hero { grid-area: hero; }
.acc-main-cab > .acc-tabs { grid-area: nav; }
.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[hidden] { display: none; }
.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; }
.topup-hint b { color: #A8E85C; }
@keyframes payWatchPulse {
50% { opacity: 0.35; }
}
.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; }
.acc-tx-title {
margin-top: 28px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
}
.tx {
display: flex;
gap: 16px;
align-items: center;
padding: 10px 14px;
background: #2A2C30;
border: 2px solid #1A1006;
font-size: 14px;
}
@media (max-width: 640px) {
.hotbar { grid-template-columns: repeat(2, 1fr); }
.acc-hero { flex-direction: column; text-align: center; }
}
.btn-account { background: var(--gold); color: var(--ink); }
.corner-account {
cursor: pointer;
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;
}
@media (hover: hover) and (pointer: fine) {
.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; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
@media (max-width: 760px) {
.acc-topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
.acc-topbar-right { gap: 8px; }
.acc-topbar-right .acc-logout { font-size: 13px; padding: 7px 10px; }
}
.acc-shop-btn {
border-color: var(--gold);
color: var(--gold);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.acc-shop-btn:hover { background: rgba(247, 195, 37, 0.12); border-color: var(--gold); color: var(--gold); }
}
.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;
}
.adm-case-block > h4 {
margin: 0 0 4px;
font-family: 'Rubik', sans-serif;
font-size: 14px;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
.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);
}
.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 .h-pixel-sm { margin-bottom: 0; white-space: nowrap; }
.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-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;
}
@media (hover: hover) and (pointer: fine) {
.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-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-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-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; }
@keyframes sparkrise {
0% { translate: 0 0; opacity: 0; }
15% { opacity: 0.9; }
70% { opacity: 0.6; }
100% { translate: 2px -56px; opacity: 0; }
}
.shop-grid-item .shop-icon-slot { width: 66px; height: 66px; }
.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; }
@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 { animation: none; }
}
.shop-detail .shop-modal-row { margin-top: 8px; }
.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-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-inline-link {
color: var(--gold);
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.inv-inline-link:hover { text-decoration: underline; }
.inv-slot svg { image-rendering: pixelated; }
.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-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); }
.corner-shop { background: var(--grass); }
.adm-role-tech { color: var(--diamond); }
.adm-role-moder { color: var(--grass); }
.adm-roles-legend b { opacity: 1; }
@keyframes admInboxBlink {
0%, 70% { border-color: rgba(247, 195, 37, 0.55); }
71%, 100% { border-color: var(--accent); }
}
.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 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-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-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-check input { width: 18px; height: 18px; accent-color: var(--grass); }
.adm-icons-cell span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.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) {
undefined {undefined}
.toast-host {
left: 12px;
right: 12px;
bottom: calc(12px + var(--safe-b));
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-list li { font-size: 13px; padding: 0; border: 0; background: none; }
.roster-list .mc-head { width: 24px; height: 24px; }
.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; }
}
.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-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-field .auth-label { margin-top: 0; }
.pw-field .auth-input { width: 100%; font-size: 15px; }
.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-step b { color: var(--gold); margin-right: 4px; }
.tfa-confirm .code-input { flex: 0 1 180px; padding: 11px 12px; }
.tfa-confirm .btn { margin-top: 0; }
.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;
}
.bonus-tier b { color: #A8E85C; margin-right: 4px; }
.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); }
.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;
}
@media (hover: hover) and (pointer: fine) {
.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; }
@media (min-width: 900px) {
.acc-main-cab > .acc-tabs {
flex-direction: column;
gap: 8px;
position: sticky;
top: 24px;
}
.acc-main-cab .acc-tab { width: 100%; text-align: left; }
undefined {undefined}
.acc-main-cab .acc-tab.is-active { box-shadow: none; border-left: 6px solid var(--gold); }
undefined {undefined}
.acc-main-cab > .acc-hero { position: sticky; top: 0; z-index: 5; }
}
@media (min-width: 1080px) {
undefined {undefined}
undefined {undefined}
undefined {undefined}
}
@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; }
#onlineChart { width: 100%; height: auto; display: block; }
.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 span:last-child { font: 700 14px 'Rubik', sans-serif; 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-end { align-self: start; padding: 7px 8px; background: rgba(0,0,0,.2); white-space: nowrap; }
.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; }
@keyframes sale-pulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
.shop-gift-toggle input { width: 16px; height: 16px; accent-color: var(--grass); cursor: pointer; }
.inv-badge-expired { background: var(--stone); color: rgba(255, 246, 227, 0.7); }
.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-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;
}
@media (hover: hover) and (pointer: fine) {
.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-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-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-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(100svh - 380px); min-height: 320px; }
.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-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-pager button[disabled] { opacity: 0.4; cursor: default; }
.adm-tk-item .tk-subject { font-size: 13px; margin-top: 4px; }
.adm-tk-item .tk-preview { margin-top: 2px; }
.px-modal-field textarea {
resize: vertical;
font-family: 'Rubik', sans-serif;
min-height: 90px;
}
@media (max-width: 560px) {
.tk-item { flex-wrap: wrap; gap: 8px; }
.tk-msg { max-width: 100%; }
.tk-msgs { max-height: 60svh; }
.tk-counter { margin-left: 0; }
}
.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-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; }
.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;
}
@media (hover: hover) and (pointer: fine) {
.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;
}
@keyframes ach-stripes {
to { background-position: 16px 0; }
}
.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;
}
@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; }
}
.heat-legend-scale span {
width: 14px;
height: 14px;
border: 1px solid #0D0904;
}
@media (max-width: 560px) {
.ach-grid { grid-template-columns: 1fr; }
.trophy-grid,
.trophy-showcase { grid-template-columns: 1fr; }
}
.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; }
.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-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);
}
@media (hover: hover) and (pointer: fine) {
.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-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;
}
@media (hover: hover) and (pointer: fine) {
.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 li { margin-left: 18px; }
.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;
}
@media (hover: hover) and (pointer: fine) {
.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-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-editor:focus-within { border-color: var(--gold); }
.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 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); }
@media (hover: hover) and (pointer: fine) {
.fr-page:hover { filter: brightness(1.15); }
}
.acc-forum-btn { border-color: var(--diamond); }
.corner-forum { border-color: var(--diamond); }
@media (max-width: 900px) {
undefined {undefined}
}
@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%; }
}
.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;
}
@media (hover: hover) and (pointer: fine) {
.fr-search-btn:hover { filter: brightness(1.1); }
}
.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);
}
@media (hover: hover) and (pointer: fine) {
.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; }
.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(100svh - 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-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; }
}
.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; }
@keyframes mkGlint {
from { background-position: 160% 0; }
to { background-position: -60% 0; }
}
.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-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;
}
.corner-market { border-color: var(--gold); }
.adm-market-settings .px-modal-field { margin: 0; }
.adm-market-settings input,
.adm-market-settings select { width: 150px; }
.tabbar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 150;
grid-template-columns: repeat(5, 1fr);
background: var(--deep-dark);
border-top: 3px solid #1A1006;
padding-bottom: var(--safe-b);
}
.tabbar-tab {
position: relative;
min-height: var(--tabbar-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 2px 6px;
color: var(--cream);
text-decoration: none;
opacity: 0.5;
-webkit-tap-highlight-color: transparent;
}
.tabbar-ico {
width: 22px;
height: 22px;
image-rendering: pixelated;
}
.tabbar-text {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1;
}
.tabbar-tab[aria-current='page'] {
opacity: 1;
color: var(--gold);
}
.tabbar-tab[aria-current='page']::before {
content: '';
position: absolute;
top: -3px;
left: 14%;
right: 14%;
height: 3px;
background: var(--gold);
}
.tabbar-tab:active { opacity: 0.85; background: rgba(255, 246, 227, 0.06); }
.tabbar-tab:focus-visible { outline: 3px dashed var(--gold); outline-offset: -4px; }
.tabbar-badge {
position: absolute;
top: 6px;
right: calc(50% - 18px);
width: 10px;
height: 10px;
min-width: 0;
padding: 0;
font-size: 0;
background: var(--redstone);
border: 2px solid var(--deep-dark);
}
.sheet-scrim {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(10, 11, 13, 0.72);
opacity: 0;
transition: opacity 0.16s ease;
}
.sheet-scrim.is-open { opacity: 1; }
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 301;
max-height: 82svh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 10px 18px calc(20px + var(--safe-b));
background: var(--deep-dark);
border-top: 3px solid #1A1006;
box-shadow: 0 -10px 0 rgba(0, 0, 0, 0.35);
translate: 0 100%;
transition: translate 0.2s ease;
}
.sheet.is-open { translate: 0 0; }
@media (min-width: 721px) {
.sheet {
left: 50%;
right: auto;
bottom: auto;
top: 50%;
width: min(440px, 92vw);
max-height: 80svh;
border: 3px solid #1A1006;
translate: -50% -46%;
opacity: 0;
transition: translate 0.16s ease, opacity 0.16s ease;
}
.sheet.is-open { translate: -50% -50%; opacity: 1; }
.sheet-grab { display: none; }
}
.sheet-grab {
width: 52px;
height: 5px;
margin: 0 auto 14px;
background: #5A5D63;
}
.sheet-head { display: flex; gap: 14px; align-items: center; }
.sheet-ico {
flex: none;
width: 56px;
height: 56px;
display: grid;
place-items: center;
background: #1E2023;
border: 3px solid #1A1006;
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.sheet-ico svg,
.sheet-ico .item-icon-img { image-rendering: pixelated; }
.sheet-name {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
line-height: 1.5;
color: var(--card-accent, var(--gold));
}
.sheet-sub { margin-top: 5px; font-size: 12px; opacity: 0.55; }
.sheet-desc { margin-top: 14px; font-size: 13px; line-height: 1.5; opacity: 0.75; }
.sheet-list { list-style: none; margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: #C6B7F0; }
.sheet-list li { padding-left: 14px; position: relative; }
.sheet-list li::before { content: '▪'; position: absolute; left: 0; color: #6414B4; }
.sheet-lore { margin-top: 8px; font-size: 12px; font-style: italic; color: rgba(255, 246, 227, 0.5); }
.sheet-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.sheet-price { flex: 1; min-width: 0; font-family: 'Press Start 2P', monospace; font-size: 15px; color: #A8E85C; }
.sheet-price s { margin-right: 8px; font-size: 11px; color: #7A7A7A; }
.sheet-note { flex: 1 1 100%; font-size: 12px; opacity: 0.6; }
.sheet-btn {
flex: none;
min-height: 48px;
font-family: 'Press Start 2P', monospace;
font-size: 11px;
color: var(--cream);
background: var(--grass-dark);
border: 3px solid #1A1006;
padding: 14px 18px;
cursor: pointer;
box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}
.sheet-btn-quiet { background: #5A5D63; }
.sheet-btn:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.sheet-btn[disabled] { opacity: 0.5; cursor: default; }
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.is-locked .tabbar { display: none; }
@media (max-width: 720px) {
undefined {undefined}
.tabbar { display: grid; }
undefined {undefined}
.corner-nav .corner-account:not(.nav-exit),
.acc-topbar-right .acc-logout:not(.nav-exit) { display: none; }
undefined {undefined}
.acc-topbar {
position: sticky;
top: 0;
z-index: 40;
flex-wrap: nowrap;
gap: 10px;
min-height: var(--topbar-h);
padding: 0 14px;
padding-left: calc(14px + var(--safe-l));
padding-right: calc(14px + var(--safe-r));
}
.acc-brand { font-size: 11px; gap: 9px; flex: none; }
.acc-topbar-right { flex: 1; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
undefined {undefined}
body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
undefined {undefined}
.toast-host { bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); }
undefined {undefined}
.corner-account,
.acc-topbar-right .acc-logout {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-size: 11px;
}
undefined {undefined}
undefined {undefined}
input,
select,
textarea,
.auth-input { font-size: 16px; }
undefined {undefined}
undefined {undefined}
undefined {undefined}
.shop-card > * { grid-column: 2; }
.shop-card > .shop-icon-slot { grid-column: 1; grid-row: 1 / -1; }
undefined {undefined}
.shop-card-rank::before { top: 0; bottom: 0; right: auto; width: 5px; height: auto; }
.shop-icon-slot { width: 72px; height: 72px; }
undefined {undefined}
undefined {undefined}
.acc-section { padding: 18px 12px; }
undefined {undefined}
undefined {undefined}
.shop-grid-item .shop-icon-slot { width: 44px; height: 44px; }
undefined {undefined}
undefined {undefined}
.mc-tip,
.mk-tip { display: none !important; }
undefined {undefined}
undefined {undefined}
.mk-slot .item-icon-img,
.mk-slot svg { width: 100%; height: 100%; }
undefined {undefined}
undefined {undefined}
.acc-tabs {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
gap: 8px;
margin-inline: -16px;
padding-inline: 16px;
}
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tab { flex: none; scroll-snap-align: start; font-size: 10px; padding: 13px 14px; }
undefined {undefined}
.hotbar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.acc-main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
.tabbar-text { font-size: 9px; }
.acc-brand { font-size: 10px; }
}
@media (max-width: 720px) {
.shop-modal-overlay,
.px-modal-overlay {
align-items: end;
justify-items: stretch;
padding: 0;
overflow-y: auto;
}
.shop-modal,
.px-modal,
.px-modal-wide {
width: 100%;
max-width: none;
max-height: 88svh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 22px 18px calc(20px + var(--safe-b));
border-width: 3px 0 0;
scale: 1;
translate: 0 100%;
transition: translate 0.18s ease;
}
.shop-modal-overlay.is-open .shop-modal,
.px-modal-overlay.is-open .px-modal { translate: 0 0; }
undefined {undefined}
.shop-modal-btn,
.px-modal-btn { min-height: var(--tap); padding: 14px 12px; }
}
.duet-heads > :nth-child(2) { margin-left: -10px; }
@media (max-width: 720px) {
undefined {undefined}
}
.legal { max-width: 760px; }
.legal-head { margin-bottom: -8px; }
.legal-title { margin-bottom: 12px; }
.legal-head .sub { margin-bottom: 0; }
.legal-sec {
font-size: 15px;
line-height: 1.7;
}
.legal-sec h2 { margin-bottom: 16px; }
.legal-sec p { margin-bottom: 12px; }
.legal-sec > :last-child { margin-bottom: 0; }
.legal-h3 {
font-weight: 700;
font-size: 15px;
margin: 20px 0 8px;
color: var(--gold);
}
.legal-list {
list-style: none;
margin-bottom: 12px;
}
.legal-list li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
}
.legal-list li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
background: var(--grass);
}
.legal-sec a {
color: var(--gold);
text-decoration: underline;
overflow-wrap: anywhere;
}
.legal-sec a:hover { color: var(--accent); }
.foot-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 20px;
margin-bottom: 12px;
font-size: 13px;
}
.foot-links a {
color: rgba(255, 246, 227, 0.75);
text-decoration: underline;
}
.foot-links a:hover { color: var(--gold); }