.zemljovid { margin-block: 1.5rem; padding: 1.1rem; border: 1px solid var(--color-border-medium); border-radius: 16px; background: var(--color-bg-white); color: var(--color-text-primary); }
.zemljovid__image { display: block; width: 100%; height: auto; }
.zemljovid--ready .zemljovid__image, .zemljovid--ready .zemljovid__fallback { display: none; }
.zemljovid__canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 1px solid var(--color-border-medium); border-radius: 12px; background: #f1f6f9; cursor: crosshair; }
.zemljovid__canvas [hidden] { display: none; }
.zemljovid__pin { fill: #087957; stroke: white; stroke-width: 2; pointer-events: none; }
.zemljovid__reference { pointer-events: none; }
.zemljovid__reference circle { fill: #626971; stroke: #fff; stroke-width: 1; }
.zemljovid__reference text { fill: #35414b; stroke: #fff; stroke-width: 1.5; paint-order: stroke; font-weight: 700; }
.zemljovid__cursor circle { fill: white; fill-opacity: .5; stroke: #953b20; stroke-width: 2; }
.zemljovid__cursor path { fill: none; stroke: #953b20; stroke-width: 2; }
.zemljovid__status { color: var(--color-text-secondary); font-size: .95rem; }
.zemljovid__prompt { font-size: 1.3rem; margin-block: .8rem; }
.zemljovid__instructions { font-size: 1rem; line-height: 1.6; }
.zemljovid__controls { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: .8rem; }
.zemljovid__choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: 1rem; }
.zemljovid button { min-height: 48px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.zemljovid button.btn { background: #17699b; color: #fff; }
.zemljovid button.btn:hover { background: #11517a; }
.zemljovid button.btn:disabled { opacity: .65; }
.zemljovid button.btn.zemljovid__choice--correct { background: #087957; opacity: 1; }
.zemljovid button.btn.zemljovid__choice--incorrect { background: #a33131; opacity: 1; }
.zemljovid__credits { font-size: .85rem; color: var(--color-text-secondary); margin-top: 1.2rem; }
.zemljovid__feedback { min-height: 3em; line-height: 1.65; }
.zemljovid button[hidden] { display: none; }
.zemljovid__canvas:focus-visible, .zemljovid button:focus-visible { outline: 3px solid #17699b; outline-offset: 3px; }
@media (max-width: 500px) { .zemljovid {padding: .8rem;} .zemljovid__choices {grid-template-columns: 1fr;} }
@media print { .zemljovid--ready .zemljovid__image, .zemljovid--ready .zemljovid__fallback {display: block;} .zemljovid__canvas, .zemljovid__controls, .zemljovid__choices, .zemljovid > button {display: none;} }