.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-ingame { background: linear-gradient(180deg, #6DBE4B, #4E9634); color: #0E2408; }
.mc-offgame {
background: linear-gradient(180deg, #6E7378, #55595E);
color: #17191B;
border-color: #2A2C2F;
}
.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;
}
@media (hover: hover) and (pointer: fine) {
.ach-card:hover {
transform: translateY(-2px);
border-color: var(--grass-dark);
box-shadow: 0 0 16px -6px var(--grass);
}
}
.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);
}
@media (hover: hover) and (pointer: fine) {
.ach-card.is-complete:hover {
border-color: var(--gold);
box-shadow: 0 0 18px -6px var(--gold);
}
}
.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-current-wrap {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ach-when {
font-size: 10px;
opacity: 0.55;
overflow-wrap: anywhere;
}
.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
);
}
@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-when {
font-size: 10px;
color: var(--grass);
opacity: 0.8;
overflow-wrap: anywhere;
}
.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-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;
}
@media (hover: hover) and (pointer: fine) {
.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)); }
.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; }