.refined-ui #layer1 > #exploration-panel {
    --compass-silver: #d5d4d0;
    --compass-graphite: #474843;
    --compass-north: #e64b2c;
    width: clamp(180px, calc(52vw - 8px), 210px);
    height: 62px;
    max-width: none;
    padding: 6px 0 6px 9px;
    right: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-panel, 24px);
}
.exploration-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.exploration-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    color: #222c3a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.exploration-settings,
.exploration-season {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2563eb;
    font-size: 12px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.exploration-settings:hover { color: #1d4ed8; }
.exploration-settings:focus-visible,
.exploration-season:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.refined-ui #exploration-panel #stats-text-overlay {
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 8px !important;
    line-height: 1.5;
    text-align: left;
    text-overflow: ellipsis;
}
.refined-ui #exploration-compass {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--compass-silver);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff 0, #f8f8f5 58%, #ecece7 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -1px 2px rgba(66,67,60,0.04), 0 1px 3px rgba(42,43,38,0.06);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform: none !important;
}
#exploration-compass:focus-visible { outline: 2px solid #e64b2c; outline-offset: 3px; }
.compass-face, .compass-face svg { display: block; width: 100%; height: 100%; }
.compass-face { pointer-events: none; }
.compass-tick { stroke: #a9aaa3; stroke-width: 0.6; }
.compass-tick-major { stroke: #85877e; stroke-width: 0.9; }
.compass-cardinal { fill: #92958b; font: 600 7px Georgia, serif; text-anchor: middle; dominant-baseline: middle; }
.compass-cardinal-north { fill: var(--compass-north); }
.compass-degree { fill: #a0a298; font: 4px monospace; text-anchor: middle; dominant-baseline: middle; }
.compass-needle { transform-origin: 50% 50%; transform: rotate(42deg); filter: drop-shadow(0 0.6px 0.5px rgba(39,40,35,0.2)); }
@media (min-width: 768px) {
    .refined-ui #layer1 > #exploration-panel { width: 230px; height: 72px; padding: 7px 0 7px 12px; right: 32px; gap: 8px; }
    .refined-ui #exploration-compass { width: 48px; height: 48px; }
    .exploration-title { font-size: 11px; }
    .exploration-settings, .exploration-season { width: 24px; height: 24px; font-size: 14px; }
    .refined-ui #exploration-panel #stats-text-overlay { font-size: 9px !important; }
}
@media (max-width: 360px) {
    .refined-ui #layer1 > #exploration-panel { top: 86px; }
}
@media (prefers-reduced-motion: reduce) {
    .compass-needle { transition: none !important; }
}