.mhkw-tracker,
.mhkw-compact-progress {
--mhkw-surface: #1c2940;
--mhkw-card: #173047;
--mhkw-card-open: #223148;
--mhkw-border: #31516d;
--mhkw-accent: #ff6b00;
--mhkw-accent-light: #ff9947;
--mhkw-text: #ffffff;
--mhkw-muted: #d3dbe5;
--mhkw-dark: #0c1d2d;
box-sizing: border-box;
color: var(--mhkw-text);
}
.mhkw-tracker *,
.mhkw-compact-progress * {
box-sizing: border-box;
}
.mhkw-tracker .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.mhkw-tracker {
background: var(--mhkw-surface);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
padding: clamp(20px, 4vw, 42px);
}
.mhkw-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
align-items: end;
}
.mhkw-eyebrow {
color: var(--mhkw-accent-light);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.08em;
margin: 0 0 8px;
text-transform: uppercase;
}
.mhkw-tracker h2 {
color: var(--mhkw-text);
font-size: clamp(1.8rem, 4vw, 2.65rem);
line-height: 1.12;
margin: 0 0 12px;
}
.mhkw-intro {
color: var(--mhkw-muted);
font-size: 1rem;
line-height: 1.65;
margin: 0;
max-width: 760px;
}
.mhkw-progress-number {
background: linear-gradient(135deg, var(--mhkw-accent), #bc4824);
border-radius: 16px;
box-shadow: 0 12px 30px rgba(8, 18, 30, 0.25);
min-width: 160px;
padding: 17px 20px;
text-align: center;
}
.mhkw-progress-number strong {
display: block;
font-size: 2.25rem;
line-height: 1;
}
.mhkw-progress-number span {
display: block;
font-size: 0.88rem;
font-weight: 700;
margin-top: 7px;
}
.mhkw-progress {
background: var(--mhkw-dark);
border: 1px solid var(--mhkw-border);
border-radius: 999px;
height: 14px;
margin-top: 28px;
overflow: hidden;
}
.mhkw-progress span {
background: linear-gradient(90deg, var(--mhkw-accent), var(--mhkw-accent-light));
border-radius: inherit;
display: block;
height: 100%;
min-width: 0;
}
.mhkw-progress-text {
color: var(--mhkw-muted);
font-size: 0.86rem;
font-weight: 700;
margin: 7px 0 0;
text-align: right;
}
.mhkw-map-section {
border-top: 1px solid rgba(255, 255, 255, 0.09);
margin-top: 32px;
padding-top: 30px;
}
.mhkw-map-heading {
display: flex;
gap: 24px;
align-items: end;
justify-content: space-between;
margin-bottom: 16px;
}
.mhkw-map-kicker {
color: var(--mhkw-accent-light);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.07em;
margin: 0 0 4px;
text-transform: uppercase;
}
.mhkw-map-heading h3 {
color: var(--mhkw-text);
font-size: clamp(1.35rem, 3vw, 1.85rem);
line-height: 1.25;
margin: 0;
}
.mhkw-map-heading > p {
color: var(--mhkw-muted);
font-size: 0.86rem;
line-height: 1.5;
margin: 0;
max-width: 340px;
text-align: right;
}
.mhkw-map-stage {
background: linear-gradient(160deg, #0d2235, var(--mhkw-dark));
border: 1px solid var(--mhkw-border);
border-radius: 14px;
overflow: hidden;
padding: 10px;
position: relative;
}
.mhkw-world-map {
display: block;
height: auto;
width: 100%;
}
.mhkw-map-sphere {
fill: #0b1a29;
stroke: #3b5870;
stroke-width: 1.2;
}
.mhkw-map-land {
fill: #31465a;
stroke: none;
}
.mhkw-map-region {
--mhkw-region-fill: #50657a;
cursor: pointer;
}
.mhkw-map-region.is-cooked {
--mhkw-region-fill: var(--mhkw-accent);
}
.mhkw-map-region path,
.mhkw-map-region circle {
fill: var(--mhkw-region-fill);
stroke: #122538;
stroke-linejoin: round;
stroke-width: 0.7;
transition: filter 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
vector-effect: non-scaling-stroke;
}
.mhkw-map-region circle {
stroke-width: 1.3;
}
.mhkw-map-region:hover path,
.mhkw-map-region:hover circle,
.mhkw-map-region:focus path,
.mhkw-map-region:focus circle {
filter: brightness(1.24);
stroke: #ffffff;
stroke-width: 2;
}
.mhkw-map-region:focus {
outline: none;
}
.mhkw-map-tooltip {
background: rgba(7, 18, 29, 0.96);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 7px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
color: var(--mhkw-text);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.35;
max-width: 260px;
pointer-events: none;
position: absolute;
padding: 8px 10px;
z-index: 3;
}
.mhkw-map-tooltip[hidden] {
display: none;
}
.mhkw-map-footer {
color: var(--mhkw-muted);
font-size: 0.75rem;
line-height: 1.5;
margin-top: 12px;
}
.mhkw-map-footer p {
margin: 8px 0 0;
}
.mhkw-map-legend {
display: flex;
flex-wrap: wrap;
gap: 9px 18px;
}
.mhkw-map-legend span {
display: inline-flex;
gap: 7px;
align-items: center;
}
.mhkw-map-legend i {
background: #50657a;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
display: inline-block;
height: 13px;
width: 18px;
}
.mhkw-map-legend i.is-cooked {
background: var(--mhkw-accent);
}
.mhkw-map-legend i.is-partial {
background: repeating-linear-gradient(45deg, var(--mhkw-accent) 0, var(--mhkw-accent) 5px, #50657a 5px, #50657a 10px);
}
.mhkw-map-source a {
color: var(--mhkw-accent-light);
}
.mhkw-controls {
display: grid;
grid-template-columns: minmax(190px, 1fr) minmax(145px, 190px) minmax(190px, 240px) auto;
gap: 12px;
align-items: center;
margin: 30px 0 20px;
}
.mhkw-controls input,
.mhkw-controls select {
background: var(--mhkw-dark);
border: 1px solid var(--mhkw-border);
border-radius: 8px;
color: var(--mhkw-text);
font: inherit;
height: 46px;
margin: 0;
padding: 0 14px;
width: 100%;
}
.mhkw-controls input::placeholder {
color: #aeb9c7;
}
.mhkw-controls input:focus,
.mhkw-controls select:focus,
.mhkw-links a:focus {
outline: 3px solid rgba(255, 107, 0, 0.4);
outline-offset: 2px;
}
.mhkw-result-count {
color: var(--mhkw-muted);
font-size: 0.9rem;
font-weight: 700;
margin: 0;
min-width: 76px;
text-align: right;
}
.mhkw-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.mhkw-card {
background: var(--mhkw-card-open);
border: 1px solid var(--mhkw-border);
border-radius: 12px;
display: flex;
flex-direction: column;
min-height: 180px;
padding: 18px;
transition: border-color 160ms ease, transform 160ms ease;
}
.mhkw-card.is-cooked {
background: var(--mhkw-card);
border-color: rgba(255, 107, 0, 0.7);
box-shadow: inset 4px 0 0 var(--mhkw-accent);
}
.mhkw-card:hover {
border-color: var(--mhkw-accent-light);
transform: translateY(-2px);
}
.mhkw-card.is-map-highlight {
border-color: var(--mhkw-accent-light);
box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.28), inset 4px 0 0 var(--mhkw-accent);
transform: translateY(-3px);
}
.mhkw-card[hidden] {
display: none;
}
.mhkw-card-top {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}
.mhkw-status {
color: var(--mhkw-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mhkw-card.is-cooked .mhkw-status,
.mhkw-check {
color: var(--mhkw-accent-light);
}
.mhkw-check {
font-size: 1.15rem;
font-weight: 900;
}
.mhkw-card h3 {
color: var(--mhkw-text);
font-size: 1.13rem;
line-height: 1.3;
margin: 14px 0 7px;
}
.mhkw-dish {
color: var(--mhkw-text);
font-size: 0.94rem;
font-weight: 650;
line-height: 1.45;
margin: 0 0 8px;
}
.mhkw-date,
.mhkw-secret {
color: var(--mhkw-muted);
font-size: 0.8rem;
line-height: 1.45;
margin: 0;
}
.mhkw-secret {
margin-top: auto;
}
.mhkw-links {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: auto;
padding-top: 15px;
}
.mhkw-links a {
background: var(--mhkw-accent);
border-radius: 6px;
color: #101820;
font-size: 0.76rem;
font-weight: 800;
line-height: 1;
padding: 9px 10px;
text-decoration: none;
}
.mhkw-links a:hover {
background: var(--mhkw-accent-light);
color: #101820;
}
.mhkw-no-results {
background: var(--mhkw-dark);
border: 1px solid var(--mhkw-border);
border-radius: 10px;
color: var(--mhkw-muted);
margin: 16px 0 0;
padding: 20px;
text-align: center;
}
.mhkw-compact-progress {
background: var(--mhkw-surface);
border: 1px solid var(--mhkw-border);
border-radius: 12px;
padding: 18px;
}
.mhkw-compact-progress p {
color: var(--mhkw-text);
margin: 0;
}
.mhkw-compact-progress .mhkw-progress {
margin-top: 12px;
}
@media (max-width: 1050px) {
.mhkw-controls {
grid-template-columns: 1fr 1fr;
}
.mhkw-result-count {
grid-column: 1 / -1;
text-align: left;
}
.mhkw-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.mhkw-header {
grid-template-columns: 1fr;
}
.mhkw-progress-number {
justify-self: start;
}
.mhkw-map-heading {
align-items: start;
flex-direction: column;
gap: 7px;
}
.mhkw-map-heading > p {
text-align: left;
}
.mhkw-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.mhkw-tracker {
padding: 18px;
}
.mhkw-map-stage {
padding: 3px;
}
.mhkw-controls,
.mhkw-grid {
grid-template-columns: 1fr;
}
}
@media print {
.mhkw-tracker,
.mhkw-compact-progress,
.mhkw-card,
.mhkw-progress,
.mhkw-progress span {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.mhkw-controls {
display: none;
}
.mhkw-map-tooltip {
display: none;
}
}