/* Districts: original game symbols on fixed mechanic segments with a rotating central pointer. */
.mg-compass { --compass-width:320px; --dial-accent:#BCE92C; width:var(--compass-width); color:#F3EDE8; position:relative; isolation:isolate; }
.mg-wheel { position:relative; width:100%; aspect-ratio:1; touch-action:manipulation; user-select:none; -webkit-user-select:none; cursor:default; overflow:hidden; }
.mg-dial-city { position:absolute; inset:4.5%; border-radius:50%; overflow:hidden; pointer-events:none; background:#181818; box-shadow:0 0 0 1px #55583e; }
.mg-dial-rotor { position:absolute; inset:0;  }
.mg-demo .mg-direction,.mg-compass .mg-direction { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; display:block; border:0; border-radius:0; background:#222e; color:#F3EDE8; cursor:pointer; transition:background-color .18s; font:600 12px/1.1 var(--wyswietlacz,'Clash Display',sans-serif); -webkit-tap-highlight-color:transparent; }
.mg-compass .mg-direction:hover { background:#404832e8; }
.mg-compass .mg-direction[aria-selected=true] { background:#BCE92Ce8; color:#181818; }
.mg-compass .mg-direction[data-mechanic=zlota][aria-selected=true] { background:#FFD700ed; }
.mg-compass .mg-direction:focus,.mg-compass .mg-direction:focus-visible { outline:none; }
.mg-direction-content { position:absolute; width:28%; height:21%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; transform:translate(-50%,-50%); pointer-events:none; }
.mg-direction-icon { display:grid; place-items:center; width:37%; height:52%; flex:none; background:transparent; border:0; border-radius:0; }
.mg-direction-icon img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.mg-direction-icon img.mg-compass-sprite { width:135%; height:100%; max-width:none; }
.mg-direction-label { font-size:clamp(10px,calc(var(--compass-width)*.035),12.5px); white-space:nowrap; line-height:1.05; }
.mg-direction[data-mechanic=zlota] .mg-direction-label { white-space:normal; width:44px; }
.mg-direction[aria-selected=true] .mg-compass-glyph { filter:brightness(0); }
.mg-direction:focus-visible .mg-direction-label { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.mg-dial-core { position:absolute; inset:32%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border-radius:50%; background:#181818; box-shadow:0 0 0 1px #5c633b; pointer-events:none; }
.mg-dial-core img { width:42%; height:42%; object-fit:contain; }
.mg-dial-core span { font:600 clamp(8px,calc(var(--compass-width)*.027),10px)/1.2 var(--wyswietlacz); letter-spacing:.04em; }
.mg-dial-bearing { position:absolute; inset:0; transform:rotate(var(--dial-turn,0deg)); pointer-events:none; }
.mg-dial-needle { position:absolute; left:47.5%; top:28%; width:5%; height:11%; background:var(--dial-accent); clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%); }
.mg-dial-footer { display:flex; align-items:center; justify-content:center; gap:14px; margin:9px 0 0; }
.mg-compass .mg-dial-step { width:36px; height:36px; border:1px solid #525548; border-radius:3px; background:#222; color:#F3EDE8; display:grid; place-items:center; font:500 24px/1 sans-serif; padding:0; cursor:pointer; }
.mg-compass .mg-dial-step:hover { background:#BCE92C; color:#181818; border-color:#BCE92C; }
.mg-compass .mg-dial-step:focus-visible { outline:2px solid #BCE92C; outline-offset:3px; }
.mg-dial-current { width:138px; font:600 19px/1 var(--wyswietlacz); text-align:center; color:var(--dial-accent); }
.mg-dial-hint { font:400 11px/1.4 var(--tekst,sans-serif); text-align:center; color:#a2a69b; margin:9px 0 0; }
@media (prefers-reduced-motion:reduce) { .mg-compass * { transition:none!important; } }