.compass-area{flex-grow:1;justify-content:center;align-items:center;display:flex;position:relative}.compass-housing{background:var(--compass-face);border:12px solid var(--compass-rim);border-radius:50%;justify-content:center;align-items:center;width:240px;height:240px;display:flex;position:relative;box-shadow:inset 0 0 20px #00000080,10px 10px #0009}.compass-ring{opacity:.2;border:4px dashed #333;border-radius:50%;position:absolute;inset:5px}.compass-face{width:100%;height:100%;position:absolute}.compass-needle-container{justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s cubic-bezier(.4,2.5,.6,.8);display:flex;position:absolute}.pixel-arrow-inside{border-left:25px solid #0000;border-right:25px solid #0000;border-bottom:80px solid var(--accent-red);filter:drop-shadow(2px 2px #0000004d);width:0;height:0;position:relative;transform:translateY(-20px)}.pixel-arrow-inside:after{content:"";background:var(--accent-red);width:24px;height:24px;position:absolute;top:80px;left:-12px;box-shadow:inset 0 0 0 2px #0003}@media (max-height:700px){.compass-housing{border-width:8px;width:180px;height:180px}.pixel-arrow-inside{border-bottom-width:60px;border-left-width:20px;border-right-width:20px;transform:translateY(-15px)}.pixel-arrow-inside:after{width:20px;height:20px;top:60px;left:-10px}}@media (max-height:550px){.compass-housing{border-width:6px;width:140px;height:140px;box-shadow:inset 0 0 15px #00000080,6px 6px #0009}.pixel-arrow-inside{border-bottom-width:45px;border-left-width:15px;border-right-width:15px;transform:translateY(-12px)}.pixel-arrow-inside:after{width:16px;height:16px;top:45px;left:-8px}}@media (max-width:380px){.compass-housing{width:200px;height:200px}}
.hud-panel{border:4px solid var(--accent-gold);text-align:center;box-sizing:border-box;background:#1a0f0a;width:100%;max-width:350px;padding:10px 0;position:relative;box-shadow:6px 6px #000c}.embroidery-pattern{background-image:linear-gradient(45deg,var(--accent-red)25%,transparent 25%,transparent 75%,var(--accent-red)75%,var(--accent-red)),linear-gradient(-45deg,var(--accent-red)25%,transparent 25%,transparent 75%,var(--accent-red)75%,var(--accent-red));background-color:#fff;background-size:16px 16px;width:100%;height:8px;margin:5px 0}@media (max-height:700px){.hud-panel{max-width:320px;margin-bottom:5px;padding:5px 0}.embroidery-pattern{height:6px;margin:4px 0}}@media (max-width:420px){.hud-panel{border-width:3px;max-width:300px;padding:8px 0}}@media (max-height:600px){.hud-panel{border-width:3px;max-width:280px;padding:4px 0}.embroidery-pattern{height:5px;margin:3px 0}}