/* lunch.quest v2 - tabletop quest log over parchment */

:root {
    --vellum: #EFE3C2;
    --ink: #2A1F12;
    --moss: #3D5A40;
    --amber: #D9933A;
    --vermilion: #B6401E;
    --lichen: #8AA17F;
    --stone: #C7B98A;
    --quill: #14110A;
    --vellum-warm: #E8DAB3;
    --vellum-shadow: rgba(42, 31, 18, 0.08);

    --font-serif: 'IM Fell English', 'Lora', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-pixel: 'VT323', 'Courier New', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--vellum);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(217,147,58,0.06) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(182,64,30,0.05) 0%, transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(61,90,64,0.04) 0%, transparent 40%);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.75;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* paper noise overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(42,31,18,0.012) 2px 3px),
        repeating-linear-gradient(90deg, transparent 0 2px, rgba(42,31,18,0.012) 2px 3px);
    mix-blend-mode: multiply;
}

/* coffee stain blot */
body::after {
    content: '';
    position: fixed;
    top: 12vh;
    right: -4vw;
    width: 32vw;
    height: 32vw;
    background: radial-gradient(circle, rgba(139,77,40,0.08) 0%, rgba(139,77,40,0.04) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}

/* ========== CONTOUR FIELD ========== */
.contour-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.contour {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200vh;
    will-change: transform;
}

.contour path {
    fill: none;
    stroke: var(--moss);
    stroke-width: 1.2;
}

.contour-1 path { stroke: var(--moss); opacity: 0.18; stroke-width: 1.3; }
.contour-2 path { stroke: var(--lichen); opacity: 0.22; stroke-width: 1.1; }
.contour-3 path { stroke: var(--moss); opacity: 0.16; stroke-width: 1.4; }
.contour-4 path { stroke: var(--amber); opacity: 0.10; stroke-width: 1.2; }
.contour-5 path { stroke: var(--lichen); opacity: 0.20; stroke-width: 1.0; }
.contour-6 path { stroke: var(--moss); opacity: 0.14; stroke-width: 1.5; }

/* ========== HUD ========== */
.hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

.hud-widget {
    position: absolute;
    background: var(--vellum);
    border: 3px solid var(--quill);
    box-shadow:
        4px 4px 0 0 var(--quill),
        inset 0 0 0 2px var(--vellum),
        inset 0 0 0 4px var(--ink);
    padding: 10px 14px;
    font-family: var(--font-pixel);
    font-size: 18px;
    color: var(--ink);
    min-width: 168px;
    image-rendering: pixelated;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease;
}

.hud-widget.is-shown {
    transform: scale(1);
    opacity: 1;
}

.hud-tl { top: 18px; left: 18px; }
.hud-tr { top: 18px; right: 18px; }
.hud-bl { bottom: 18px; left: 18px; }
.hud-br { bottom: 18px; right: 18px; }

.hud-label {
    color: var(--vermilion);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 4px;
    line-height: 1;
}

.hud-bar {
    width: 100%;
    height: 12px;
    background: var(--vellum-warm);
    border: 2px solid var(--quill);
    margin: 4px 0;
    position: relative;
    overflow: hidden;
}

.hud-bar-fill {
    height: 100%;
    background: var(--vermilion);
    width: 80%;
    transition: width 1s linear;
    background-image: repeating-linear-gradient(
        90deg,
        var(--vermilion) 0 4px,
        var(--amber) 4px 8px
    );
}

.hud-value {
    color: var(--ink);
    font-size: 18px;
    line-height: 1.1;
}

.hud-glyphs {
    display: flex;
    gap: 4px;
    margin: 2px 0 4px 0;
}

.hud-glyph {
    width: 12px;
    height: 16px;
    background: var(--moss);
    border: 1px solid var(--quill);
    box-shadow: inset 1px -1px 0 var(--quill);
}

.hud-coin {
    width: 18px;
    height: 18px;
    background: var(--amber);
    border: 2px solid var(--quill);
    border-radius: 50%;
    margin: 4px 0;
    box-shadow: inset -2px -2px 0 var(--vermilion), 2px 2px 0 var(--quill);
    position: relative;
}

.hud-coin::after {
    content: '$';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--quill);
    font-family: var(--font-pixel);
    font-size: 14px;
    line-height: 1;
}

.hud-clock {
    color: var(--vermilion);
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 2px 0;
}

.hud-mini {
    color: var(--moss);
    font-size: 13px;
    font-style: italic;
}

/* ========== PARCHMENT MAIN ========== */
.parchment {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    padding: 80px 48px 120px;
}

/* ========== HERO ========== */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 0;
}

.compass-wrap {
    width: clamp(220px, 28vw, 360px);
    height: clamp(220px, 28vw, 360px);
    margin-bottom: 40px;
    cursor: pointer;
    transition: filter 400ms ease;
}

.compass-wrap:hover {
    filter: brightness(1.06);
}

.compass-rose {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.compass-ring {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    opacity: 0.5;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawRing 1.6s ease-out forwards;
}

.compass-ring.outer {
    stroke-width: 1.6;
    opacity: 0.8;
    animation-delay: 0.1s;
}

.compass-ring:nth-of-type(2) { animation-delay: 0.25s; }
.compass-ring:nth-of-type(3) { animation-delay: 0.4s; }
.compass-ring:nth-of-type(4) { animation-delay: 0.55s; }
.compass-ring:nth-of-type(5) { animation-delay: 0.7s; }

.compass-points line {
    stroke: var(--ink);
    stroke-width: 0.8;
    opacity: 0.4;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawRing 1.4s ease-out 0.6s forwards;
}

.compass-needle {
    transform-origin: 0 0;
    animation: rotateNeedle 30s linear infinite;
    opacity: 0;
    animation: fadeIn 600ms ease 1s forwards, rotateNeedle 30s linear 1.6s infinite;
}

.needle-n { fill: var(--vermilion); }
.needle-s { fill: var(--ink); opacity: 0.6; }

.compass-letter {
    font-family: var(--font-serif);
    font-size: 16px;
    fill: var(--ink);
    opacity: 0;
    animation: fadeIn 500ms ease 1.2s forwards;
}

.wordmark {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 144px);
    line-height: 0.9;
    color: var(--ink);
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(16px);
    animation: heroRise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
}

.word-lunch { color: var(--ink); }
.word-dot { color: var(--vermilion); }
.word-quest {
    color: var(--moss);
    font-style: italic;
}

.subhead {
    font-family: var(--font-pixel);
    font-size: clamp(15px, 1.4vw, 22px);
    color: var(--moss);
    letter-spacing: 1.5px;
    margin-bottom: 36px;
    opacity: 0;
    animation: fadeIn 700ms ease 0.7s forwards;
}

.ribbon {
    position: relative;
    width: clamp(280px, 50vw, 540px);
    height: 64px;
    margin-bottom: 48px;
    clip-path: inset(0 100% 0 0);
    animation: ribbonUnfurl 800ms cubic-bezier(0.7, 0, 0.3, 1) 1s forwards;
}

.ribbon-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ribbon-fill {
    fill: var(--vermilion);
    stroke: var(--quill);
    stroke-width: 1.5;
}

.ribbon-shadow {
    fill: rgba(0,0,0,0.18);
}

.ribbon-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: clamp(16px, 1.8vw, 24px);
    color: var(--vellum);
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.hero-cutlery {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeIn 700ms ease 1.4s forwards;
}

.dingbat, .dingbat-glyph {
    width: 60px;
    height: 30px;
}

.dingbat-glyph {
    width: 30px;
}

.hero-cutlery svg path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.hero-meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
    opacity: 0;
    animation: fadeIn 700ms ease 1.6s forwards;
}

/* ========== STATIONS ========== */
.station {
    margin: 140px 0;
    position: relative;
}

.station-card {
    position: relative;
    background: var(--vellum-warm);
    padding: 54px 56px 56px;
    box-shadow:
        2px 4px 0 rgba(42,31,18,0.08),
        6px 12px 24px rgba(42,31,18,0.10),
        inset 0 0 0 1px rgba(42,31,18,0.10);
    /* torn parchment edges */
    clip-path: polygon(
        2% 1%, 8% 0.4%, 16% 1.5%, 28% 0.6%, 38% 1.8%, 50% 0.8%,
        62% 1.6%, 74% 0.5%, 86% 1.4%, 94% 0.7%, 99% 2%,
        99.5% 12%, 98.6% 24%, 99.4% 36%, 98.4% 48%, 99.2% 60%,
        98.5% 72%, 99.4% 84%, 98.7% 94%, 99.2% 99%,
        92% 99.4%, 80% 98.5%, 68% 99.4%, 56% 98.7%, 44% 99.5%,
        32% 98.6%, 22% 99.5%, 12% 98.6%, 2% 99.2%,
        0.7% 90%, 1.5% 78%, 0.5% 66%, 1.4% 54%, 0.6% 42%,
        1.5% 30%, 0.7% 18%, 1.4% 8%
    );
    opacity: 0;
    transform: scale(0.96) rotate(-1deg);
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 700ms ease;
}

.station-card.is-revealed {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.station[data-station="2"] .station-card { transform-origin: 60% 40%; }
.station[data-station="3"] .station-card { transform-origin: 30% 60%; transform: scale(0.96) rotate(0.6deg); }
.station[data-station="4"] .station-card { transform-origin: 70% 30%; transform: scale(0.96) rotate(-0.4deg); }
.station[data-station="5"] .station-card { transform-origin: 50% 50%; transform: scale(0.96) rotate(0.8deg); }
.station[data-station="3"] .station-card.is-revealed,
.station[data-station="4"] .station-card.is-revealed,
.station[data-station="5"] .station-card.is-revealed { transform: scale(1) rotate(0deg); }

/* wax seal */
.seal {
    position: absolute;
    width: 92px;
    height: 92px;
    top: -38px;
    right: 56px;
    transform: rotate(-6deg) scale(0);
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(2px 4px 4px rgba(42,31,18,0.30));
}

.station-card.is-revealed .seal {
    transform: rotate(-6deg) scale(1);
    transition-delay: 300ms;
}

.station[data-station="2"] .seal { right: auto; left: 56px; transform: rotate(7deg) scale(0); }
.station[data-station="2"] .station-card.is-revealed .seal { transform: rotate(7deg) scale(1); }
.station[data-station="3"] .seal { transform: rotate(-3deg) scale(0); }
.station[data-station="3"] .station-card.is-revealed .seal { transform: rotate(-3deg) scale(1); }
.station[data-station="4"] .seal { right: auto; left: 56px; transform: rotate(5deg) scale(0); }
.station[data-station="4"] .station-card.is-revealed .seal { transform: rotate(5deg) scale(1); }
.station[data-station="5"] .seal { transform: rotate(-8deg) scale(0); }
.station[data-station="5"] .station-card.is-revealed .seal { transform: rotate(-8deg) scale(1); }

.seal-wax {
    fill: var(--vermilion);
    stroke: var(--quill);
    stroke-width: 1;
    filter: url(#wax-bumps);
}

.seal-inner {
    fill: none;
    stroke: rgba(255,224,200,0.4);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.seal-glyph path,
.seal-glyph line,
.seal-glyph circle:not(.seal-dot),
.seal-tri,
.seal-ring,
.seal-ptr {
    fill: none;
    stroke: var(--vellum);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.seal-tri { fill: var(--vellum); opacity: 0.4; }
.seal-ptr { fill: var(--vellum); }
.seal-ring { stroke-width: 1.4; }
.seal-glyph circle { fill: var(--vellum); }
.seal-dot { fill: var(--vellum); }

.seal-text {
    font-family: var(--font-serif);
    font-size: 7px;
    fill: var(--vellum);
    letter-spacing: 1px;
}

.station-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    color: var(--vermilion);
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.station-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 48px);
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.station-tag {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--moss);
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.station-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.78;
    color: var(--ink);
    margin-bottom: 18px;
    text-indent: 0;
}

.station-body em {
    color: var(--vermilion);
    font-style: italic;
}

.station-blockquote {
    border-left: 3px solid var(--vermilion);
    padding-left: 24px;
    margin: 28px 0;
    font-style: italic;
    font-family: var(--font-serif);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.6;
    color: var(--ink);
}

.station-blockquote q {
    quotes: '\201C' '\201D';
}

.quote-attrib {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--moss);
    letter-spacing: 1px;
}

.station-list {
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.station-list li {
    padding: 4px 0;
    font-size: clamp(14px, 1vw, 16px);
    color: var(--ink);
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.bullet-glyph {
    color: var(--vermilion);
    font-size: 14px;
    flex-shrink: 0;
}

/* margin annotations */
.station-margin {
    position: absolute;
    width: 220px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--moss);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    opacity: 0;
    transition: opacity 600ms ease;
}

.station-card.is-revealed + .station-margin,
.station-card.is-revealed .station-margin,
.station .station-margin { opacity: 0; }

.station.is-shown .station-margin {
    opacity: 0.8;
    transition-delay: 600ms;
}

.margin-arrow {
    width: 36px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

.margin-arrow path {
    fill: none;
    stroke: var(--moss);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.margin-1 { right: -200px; top: 100px; transform: rotate(2deg); }
.margin-2 { left: -200px; top: 140px; transform: rotate(-3deg); }
.margin-3 { right: -200px; bottom: 80px; transform: rotate(1deg); }
.margin-4 { left: -200px; top: 60px; transform: rotate(-2deg); }
.margin-5 { right: -200px; top: 40px; transform: rotate(3deg); }

/* ========== INVENTORY GRID ========== */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.inv-slot {
    background: var(--vellum);
    border: 2px solid var(--ink);
    padding: 14px 12px;
    text-align: center;
    font-family: var(--font-pixel);
    box-shadow: 2px 2px 0 var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
}

.inv-slot:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.inv-rune {
    font-size: 24px;
    color: var(--moss);
}

.inv-name {
    font-size: 16px;
    color: var(--ink);
    line-height: 1.1;
}

.inv-rarity {
    font-size: 13px;
    color: var(--moss);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inv-rare { background: linear-gradient(135deg, var(--vellum) 0%, rgba(217,147,58,0.15) 100%); }
.inv-rare .inv-rune { color: var(--vermilion); }
.inv-rare .inv-rarity { color: var(--vermilion); }

.inv-empty { opacity: 0.55; border-style: dashed; box-shadow: none; }

/* ========== VOTE ========== */
.vote-list {
    margin: 24px 0;
    padding: 18px;
    background: rgba(199,185,138,0.18);
    border: 1px dashed var(--moss);
}

.vote-row {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    gap: 14px;
    align-items: center;
    padding: 8px 0;
    font-family: var(--font-pixel);
    cursor: pointer;
    transition: background 200ms ease;
}

.vote-row:hover {
    background: rgba(217,147,58,0.10);
}

.vote-name {
    font-size: 18px;
    color: var(--ink);
    letter-spacing: 1.5px;
}

.vote-bar {
    height: 14px;
    background: var(--vellum);
    border: 1.5px solid var(--ink);
    overflow: hidden;
    position: relative;
}

.vote-fill {
    height: 100%;
    background: var(--vermilion);
    background-image: repeating-linear-gradient(
        90deg,
        var(--vermilion) 0 6px,
        var(--amber) 6px 12px
    );
    transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vote-row[data-vote="dumplings"] .vote-fill {
    background-image: repeating-linear-gradient(
        90deg,
        var(--moss) 0 6px,
        var(--lichen) 6px 12px
    );
}

.vote-count {
    font-size: 22px;
    color: var(--vermilion);
    text-align: center;
    font-weight: bold;
}

.vote-row.is-voted .vote-name {
    color: var(--vermilion);
    text-shadow: 1px 0 0 var(--amber);
}

/* ========== ROUTE MAP ========== */
.route-map {
    width: 100%;
    height: auto;
    margin: 24px 0;
    background: rgba(199,185,138,0.15);
    border: 1px solid var(--moss);
    padding: 12px;
}

.route-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    cursor: pointer;
    transition: stroke-width 250ms ease, opacity 250ms ease;
}

.route-short { stroke: var(--vermilion); opacity: 0.85; }
.route-scenic { stroke: var(--moss); opacity: 0.85; }
.route-safe { stroke: var(--amber); opacity: 0.85; }

.route-path:hover {
    stroke-width: 5;
    stroke-dasharray: 0;
    opacity: 1;
}

.route-pin {
    stroke: var(--quill);
    stroke-width: 2;
}

.route-pin.start { fill: var(--moss); }
.route-pin.end { fill: var(--vermilion); }

.route-label {
    font-family: var(--font-serif);
    font-size: 15px;
    fill: var(--ink);
    letter-spacing: 1px;
}

.route-tag {
    font-family: var(--font-pixel);
    font-size: 14px;
    letter-spacing: 1px;
}

.route-short-tag { fill: var(--vermilion); }
.route-scenic-tag { fill: var(--moss); }
.route-safe-tag { fill: var(--amber); }

/* ========== DINGBAT DIVIDER ========== */
.dingbat-divider {
    display: flex;
    justify-content: center;
    margin: 80px 0;
}

.dingbat-divider svg {
    width: 200px;
    height: 24px;
}

.dingbat-divider svg path {
    fill: none;
    stroke: var(--moss);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.6;
}

.dingbat-dot {
    fill: var(--vermilion);
    opacity: 0.7;
}

/* ========== FOOTER ========== */
.footer-scroll {
    margin-top: 120px;
    padding: 50px 0 20px;
    text-align: center;
    position: relative;
}

.footer-ribbon {
    width: 100%;
    height: 60px;
    margin-bottom: 18px;
    opacity: 0.85;
}

.footer-ribbon .ribbon-fill {
    fill: var(--vermilion);
    stroke: var(--quill);
    stroke-width: 1.2;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 24px 0;
}

.footer-glyph {
    width: 28px;
    height: 28px;
}

.footer-glyph path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.footer-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 26px);
    color: var(--ink);
    letter-spacing: 1px;
}

.footer-meta {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--moss);
    letter-spacing: 2px;
    margin-top: 10px;
}

/* ========== ANIMATIONS ========== */
@keyframes drawRing {
    to { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes heroRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ribbonUnfurl {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes rotateNeedle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes caretBlink {
    50% { opacity: 0; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 880px) {
    .parchment {
        padding: 60px 20px 100px;
    }

    .station-card {
        padding: 40px 28px;
    }

    .seal {
        width: 72px;
        height: 72px;
        top: -28px;
        right: 24px;
    }

    .station[data-station="2"] .seal,
    .station[data-station="4"] .seal {
        left: 24px;
    }

    .station-margin {
        position: relative;
        width: 100%;
        margin-top: 18px;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 0.8 !important;
    }

    .hud-widget {
        font-size: 14px;
        min-width: 130px;
        padding: 8px 10px;
    }

    .hud-label { font-size: 11px; }
    .hud-value { font-size: 14px; }
    .hud-clock { font-size: 18px; }

    .ribbon-text {
        font-size: 14px;
    }

    .vote-row {
        grid-template-columns: 90px 1fr 30px;
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .hud-tl, .hud-tr, .hud-bl, .hud-br {
        min-width: 110px;
    }

    .hud-tl, .hud-bl { left: 8px; }
    .hud-tr, .hud-br { right: 8px; }
    .hud-tl, .hud-tr { top: 8px; }
    .hud-bl, .hud-br { bottom: 8px; }

    .compass-wrap {
        width: 200px;
        height: 200px;
    }

    .station {
        margin: 100px 0;
    }
}