/* A real north-pointing dial, kept outside the photographic frame. */
#compass{position:absolute;left:auto;right:var(--gutter);top:max(90px,calc(env(safe-area-inset-top) + 66px));transform:none;display:flex;align-items:center;gap:10px;padding:7px 13px 7px 7px;min-width:128px;border:1px solid #d9b77952;border-radius:42px;background:linear-gradient(125deg,#153630e8,#0b201dea);box-shadow:0 3px 15px #00151122;font-family:var(--sans);font-size:12px;letter-spacing:0;text-shadow:none;direction:ltr;unicode-bidi:isolate;pointer-events:none}
.compass-case{width:62px;height:62px;flex:none}.compass-face{display:block;width:100%;height:100%;overflow:visible;stroke:none}
.compass-rim{fill:#102b25;stroke:#c4ab75;stroke-width:.8}.compass-inner{fill:none;stroke:#b6c8b638;stroke-width:.6}
#compass-dial{transform-origin:36px 36px;will-change:transform}
.compass-ticks{fill:none;stroke:#c7cfb980;stroke-width:.8}
.compass-cardinals{font:10px Georgia,serif;fill:#dbe0ce;text-anchor:middle}.compass-cardinals .compass-north{fill:#e9b878;font-weight:700}
.compass-needle-north{fill:#e5ac67;stroke:#f7d296;stroke-width:.5}.compass-needle-south{fill:#a5bdb0;opacity:.70}
.compass-pin{fill:#f4e5bb;stroke:#15352c;stroke-width:1}.compass-index{fill:#f1c98b}
.compass-readout{display:grid;gap:3px;min-width:40px;text-align:center}#compass #heading{font:16px Georgia,serif;letter-spacing:.1em;color:#f1e6ca}
#compass-bearing{font:10px var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:#bac9ba;direction:ltr}
@media(max-width:650px){
 .clock-button{max-width:calc(100vw - 158px)}.clock-button #weather-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clock-button #weather-icon,.clock-button #game-time{flex-shrink:0}
 #compass{top:max(68px,calc(env(safe-area-inset-top) + 56px));left:auto;right:max(16px,env(safe-area-inset-right));transform:none;min-width:112px;gap:5px;padding:4px 9px 4px 4px;border-radius:32px}
 .compass-case{width:46px;height:46px}.compass-readout{min-width:41px;gap:1px}#compass #heading{font-size:14px}#compass-bearing{font-size:10px}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){
 .clock-button{max-width:min(240px,calc(100vw - 320px))}.clock-button #weather-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #compass{top:max(62px,calc(env(safe-area-inset-top) + 54px));left:auto;right:max(12px,env(safe-area-inset-right));transform:none;min-width:108px;gap:4px;padding:3px 8px 3px 3px}
 .compass-case{width:42px;height:42px}#compass #heading{font-size:13px}
}