/* Slovenija kviz. Sections follow the panel from top to bottom, then the map, then small screens. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a class with display:flex otherwise beats the attribute */
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #e9eef2; }
#map { position: absolute; inset: 0; height: 100dvh; background: #e9eef2; }
/* behind the map while it draws: the colour of Ljubljana's current look outside the ring */
body[data-map=nacrt] #map { background: #e4dccc; }
body[data-map=temna] #map, body[data-map=satelit] #map { background: #0d1015; }
body[data-map=ulice] #map { background: #e3e7ea; }

/* --- panel ---------------------------------------------------------------------------------- */
.panel {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: min(480px, calc(100% - 32px));
  background: #fff; border-radius: 12px; padding: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.tabs, .modes { display: flex; gap: 4px; background: #eceff1; border-radius: 8px; padding: 3px; }
.tabs { margin-bottom: 10px; }
.modes { margin-bottom: 8px; }
.tab, .mode { flex: 1; background: transparent; white-space: nowrap; }
.tab { padding: 7px 0; font-size: 14px; color: #546e7a; }
.mode { padding: 5px 0; font-size: 13px; color: #607d8b; }
.tab:hover, .mode:hover { background: rgba(255,255,255,.6); }
.tab.active { background: #fff; color: #263238; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.mode.active { background: #fff; color: #1565c0; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.brk { flex-basis: 100%; height: 0; }   /* keeps the input on a line of its own, actions below */
#guess {                                /* scoped: the checkbox and slider must keep their native look */
  flex: 1; min-width: 0; font-size: 17px; padding: 10px 12px;
  border: 2px solid #cfd8dc; border-radius: 8px; outline: none;
}
#guess:focus { border-color: #1e88e5; }
#guess.wrong { border-color: #e53935; animation: shake .3s; }

button {
  font: inherit; font-size: 15px; font-weight: 600; padding: 0 16px; border: 0; border-radius: 8px;
  background: #fb8c00; color: #fff; cursor: pointer; touch-action: manipulation;
}
#send { background: #1e88e5; font-size: 19px; line-height: 1; padding: 0 13px; }
#send:hover { background: #1565c0; }
#hint { flex: 2; padding: 10px 0; }
#hint:hover { background: #ef6c00; }
#hint.armed { background: #e65100; box-shadow: 0 0 0 3px rgba(251,140,0,.35); }
#sol, #listbtn, #skip { flex: 1; padding: 10px 0; font-size: 13px; }
#sol { background: #e53935; }
#sol:hover { background: #c62828; }
#sol.armed { background: #b71c1c; box-shadow: 0 0 0 3px rgba(229,57,53,.35); }
#listbtn { background: #607d8b; }
#listbtn:hover { background: #455a64; }
#listbtn.on { background: #37474f; }
#skip { background: #78909c; }
#skip:hover { background: #546e7a; }
/* the per-button ID rules above outrank a bare button:disabled, so name them all */
button:disabled, #send:disabled, #hint:disabled, #sol:disabled, #listbtn:disabled, #skip:disabled
  { background: #bdbdbd; cursor: default; box-shadow: none; }

.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
          margin-top: 8px; font-size: 14px; color: #546e7a; min-height: 20px; }
.count { font-weight: 700; color: #263238; white-space: nowrap; }
.count .pts { font-weight: 600; color: #a1887f; }   /* the points, quietly, after the count */
.link { background: none; color: #546e7a; font-size: 13px; font-weight: 600; padding: 0; text-decoration: underline; white-space: nowrap; }
.link:hover { background: none; color: #c62828; }
.link.on { color: #0d47a1; }   /* a filter is narrowing the game - say so even while it is folded away */
.msg.ok { color: #2e7d32; }
.msg.bad { color: #c62828; }
.msg.tip { color: #1565c0; }

/* the thing being asked for in find mode */
.target {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 8px; background: #e3f2fd;
  border-left: 3px solid #1e88e5; border-radius: 0 8px 8px 0;
}
.target small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #1976d2; }
.target b { font-size: 18px; line-height: 1.2; color: #0d47a1; }
#score { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; color: #c62828; }

/* category filters */
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cats label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  padding: 5px 8px; border: 1.5px solid #cfd8dc; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: #90a4ae; white-space: nowrap; user-select: none;
}
.cats.four label { flex-basis: calc(50% - 3px); }   /* four bands sit as a tidy 2x2 rather than 3 + 1 */
.cats.five label { flex-basis: calc(33.3% - 4px); min-width: 0; flex-wrap: wrap; gap: 0 5px; padding: 5px 3px; }   /* five as an even 3 + 2: a count that does not fit drops under its name */
.cats label.on { border-color: #4a9fd4; background: #eaf5fb; color: #0d47a1; }
.cats input { accent-color: #1e88e5; margin: 0; }
.cats .n { font-weight: 400; font-size: 11px; opacity: .8; }

/* clues: every one revealed so far, numbered, and a button for the next */
.clue {
  position: relative; margin-top: 8px; padding: 8px 10px; background: #fff8e1; border-left: 3px solid #fb8c00;
  border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.45; color: #5d4037;
}
.clue .close { position: absolute; top: 6px; right: 8px; background: none; color: #a1887f; font-size: 12px; padding: 2px 0; }
.clue .close:hover { background: none; color: #e65100; }
.clue b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #ef6c00; margin-bottom: 2px; }
.clue ol { margin: 0; padding-left: 18px; }
.clue li + li { margin-top: 3px; }
.clue .more { margin-top: 6px; background: none; color: #e65100; font-size: 12px; padding: 0; text-decoration: underline; }

/* Seznam */
.lvl { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #78909c; white-space: nowrap; }
.lvl label { flex: none; }
.lvl input[type=range] { flex: 1; min-width: 70px; accent-color: #607d8b; margin: 0; }
#lvlname { flex: none; min-width: 108px; text-align: right; font-weight: 600; color: #455a64; }
.list {
  margin-top: 6px; max-height: 42vh; overflow-y: auto; padding: 8px 10px;
  background: #eceff1; border-radius: 8px; font-size: 12px; line-height: 1.55; color: #37474f;
}
.list h4 { margin: 6px 0 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #78909c; column-span: all; }
.list h4:first-child { margin-top: 0; }
.list ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 14px; }
.list li { break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li.got { color: #2e7d32; }
.list li.miss { color: #90a4ae; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.list .none { margin: 0; color: #90a4ae; font-style: italic; }
.list .tally { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: #78909c; }
.list .tally span:first-child { color: #2e7d32; }
/* found with help: orange after a Namig, red after a Rešitev - the colours of the pin and the peek */
.list .help-hint, .list li.got.help-hint { color: #ef6c00; }
.list .help-sol, .list li.got.help-sol { color: #c62828; }
/* points, right-aligned on each row: what it is worth, or while typing what a find paid */
.list li .pts { float: right; margin-left: 6px; font: 600 10px/18px system-ui, -apple-system, "Segoe UI", sans-serif;
                letter-spacing: 0; color: #a1887f; }
.list li .pts.paid { color: #e65100; }

/* "Brez imen": the map keeps its shapes, every name goes */
body.names-off .leaflet-tooltip { display: none !important; }
body.names-off #msg, body.names-off #clue { visibility: hidden; }
body.names-off #namesbtn { color: #ad1457; }

/* Fokus: only what a round needs - the question or score, the input, the count (no Namig, no Rešitev) */
body.focus .chrome { display: none !important; }
body.focus .panel { width: min(420px, calc(100% - 32px)); padding: 10px 12px; }
#focusbtn { margin-left: auto; }

/* --- map ------------------------------------------------------------------------------------- */
.pin svg, .peak svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pop svg { animation: pop .4s ease-out; transform-origin: bottom center; }
.leaflet-tooltip.label {
  background: rgba(255,255,255,.9); border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  padding: 1px 5px; font-size: 12px; font-weight: 600; color: #1a237e;
}
.leaflet-tooltip.label::before { display: none; }
.leaflet-tooltip.label.river { font-style: italic; color: #0d47a1; }
.leaflet-tooltip.label.street { font-size: 11px; padding: 0 4px; background: rgba(255,255,255,.88); }
.leaflet-tooltip.label.area { font-size: 11px; background: rgba(255,255,255,.8); }
.leaflet-tooltip.label.peek { color: #b71c1c; background: #fff; }
.leaflet-tooltip.label.help-hint { color: #e65100; }
.leaflet-tooltip.label.help-sol { color: #b71c1c; }
/* the card on a found shape */
.leaflet-tooltip.label.info { font-size: 12px; font-style: normal; padding: 4px 8px; line-height: 1.4;
                              width: max-content; max-width: 280px; white-space: normal; }   /* one line per fact, wrapping only past the max */
.leaflet-tooltip.label.info b { display: block; font-size: 13px; }
.leaflet-tooltip.label.info i { display: block; font-style: normal; font-weight: 400; color: #455a64; }
.leaflet-tooltip.label.info i.pts { color: #8d6e63; }

/* Ljubljana's four looks, bottom left */
.styles { display: flex; gap: 2px; padding: 3px; background: #fff; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,.25); }
.styles .style { padding: 5px 9px; font-size: 12px; font-weight: 600; background: transparent; color: #546e7a; border-radius: 6px; }
.styles .style:hover { background: #eceff1; }
.styles .style.on { background: #37474f; color: #fff; }
body.focus .styles { display: none; }   /* not part of a round */

@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* --- phones ------------------------------------------------------------------------------------ */
/* The panel becomes a sheet across the top, flush with the screen edges and clear of the notch;
   buttons grow to a thumb's size; the list and clues stay short enough to leave map in view. */
@media (max-width: 600px) {
  .panel, body.focus .panel {
    top: 0; left: 0; transform: none; width: 100%;
    border-radius: 0 0 14px 14px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  }
  .tabs { margin-bottom: 6px; }
  .modes { margin-bottom: 6px; }
  .tab { font-size: 12.5px; padding: 8px 1px; }
  .mode { font-size: 12px; padding: 7px 2px; }
  .row { gap: 6px; }
  button { padding: 0 9px; font-size: 14px; }
  #send { padding: 0 16px; font-size: 18px; min-height: 44px; }
  #hint, #sol, #listbtn, #skip { min-height: 42px; padding: 0; }
  #sol, #listbtn, #skip { font-size: 13px; }
  #guess { font-size: 16px; padding: 10px; }   /* 16px keeps iOS from zooming in on focus */
  .status { margin-top: 6px; font-size: 13px; gap: 4px 10px; }
  .link { font-size: 12px; padding: 4px 0; }
  .cats label { font-size: 12px; padding: 7px 4px; }
  .list { max-height: 32vh; }
  .list ul { columns: 1; }
  .clue { max-height: 28vh; overflow-y: auto; }
  .target { padding: 7px 10px; margin-bottom: 6px; }
  .target b { font-size: 16px; }
  .leaflet-tooltip.label.info { max-width: 250px; }
  .leaflet-control-attribution { font-size: 9px; }
  .styles .style { padding: 8px 8px; }   /* a thumb's height */
}
@media (max-width: 420px) {
  .cats.five label { gap: 0 3px; padding: 5px 2px; font-size: 11.5px; }
  .cats.five .n { font-size: 10px; }
}
@media (max-width: 360px) {
  .tab { font-size: 10.5px; padding: 8px 0; }
  .lvl { font-size: 11px; gap: 6px; } #lvlname { min-width: 88px; }
}
/* touch screens pinch to zoom; the +/- buttons only take room there */
@media (pointer: coarse) { .leaflet-control-zoom { display: none; } }