/* ══════════════════════════════════
   KARTEN-FRAGE – Fragetyp-Buttons, Editor, Host-Modal, Handy
══════════════════════════════════ */

/* ── Map Question: Editor ── */
.q-type-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;border:1.5px solid rgba(255,255,255,.18);background:transparent;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Barlow',sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;}
.q-type-btn.map-active{border-color:#3498db;color:#3498db;background:rgba(52,152,219,.08);}
.q-type-btn:hover{border-color:rgba(255,255,255,.45);color:#fff;}
.map-picker-wrap{display:flex;flex-direction:column;gap:6px;}
.map-img-clickable{position:relative;display:inline-block;cursor:crosshair;max-width:100%;}
.map-img-clickable img{display:block;max-width:100%;max-height:200px;border-radius:8px;border:1px solid var(--input-border);}
.map-coord-lbl{font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.04em;}
/* Pin markers (shared by editor, host modal, phone) */
.map-pin-wrap{
  position:relative;display:inline-block;max-width:100%;
  user-select:none;overflow:hidden;border-radius:8px;
}
.map-zoom-inner{
  position:relative;
  width:100%;
  transform-origin:0 0;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.map-zoom-inner img{display:block;max-width:100%;border-radius:0;}
/* When wrapping map-zoom-inner the outer border-radius clips overflow cleanly */
.map-pin-wrap img{display:block;max-width:100%;border-radius:8px;}
.map-pin{position:absolute;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.55);transform:translate(-50%,-50%);pointer-events:none;z-index:2;transition:left .1s,top .1s;}
.map-pin-team{width:20px;height:20px;}
/* Richtiger Ort: SVG-Stecknadel */
.map-pin-correct{
  width:28px;height:36px;border-radius:0!important;border:none!important;background:none!important;
  box-shadow:none!important;transform:translate(-50%,-100%)!important;z-index:3;
  overflow:visible;
}
.map-pin-correct svg{width:28px;height:36px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));}
.map-pin-lbl{position:absolute;transform:translate(-50%,6px);font-size:10px;font-weight:700;white-space:nowrap;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none;z-index:4;}
.editor-map-pin{position:absolute;width:14px;height:14px;border-radius:50%;background:#e74c3c;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;}
/* Zoom-Hinweis */
.map-zoom-hint{position:absolute;bottom:6px;right:8px;background:rgba(0,0,0,.6);color:rgba(255,255,255,.7);font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;pointer-events:none;z-index:10;letter-spacing:.05em;opacity:0;transition:opacity .4s;}
/* Map Modal (Host) */
#map-modal .modal{max-width:1060px;width:100%;}
/* ══ SCOREBOARD DIST BARS ════════════════════ */
.mm-sb-bar-track{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;min-width:40px;}
.mm-sb-bar-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.25,.46,.45,.94);}
/* colour ramp: close=green, mid=yellow, far=red (set via inline style) */
#mm-reveal-layout{display:flex;flex-direction:row;gap:18px;align-items:flex-start;}
@media(max-width:700px){
  #mm-reveal-layout{flex-direction:column;}
  #mm-scoreboard-wrap{flex:unset!important;min-width:unset!important;width:100%;}
}
.mm-sb-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);}
.mm-sb-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:8px;margin-bottom:5px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.07);
  transition:background .35s,border-color .35s;
}
.mm-sb-row.new-row{animation:sbRowIn .35s cubic-bezier(.22,1,.36,1) both;}
@keyframes sbRowIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}
.mm-sb-row.rank-1{background:rgba(212,175,55,.14);border-color:rgba(212,175,55,.35);}
.mm-sb-row.rank-2{background:rgba(192,192,192,.1);border-color:rgba(192,192,192,.25);}
.mm-sb-row.rank-3{background:rgba(205,127,50,.1);border-color:rgba(205,127,50,.22);}
.mm-sb-rank{font-family:'Anton',sans-serif;font-size:15px;color:rgba(255,255,255,.3);min-width:22px;text-align:center;}
.mm-sb-rank.gold{color:#d4af37;}
.mm-sb-rank.silver{color:#c0c0c0;}
.mm-sb-rank.bronze{color:#cd7f32;}
.mm-sb-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1.5px solid rgba(255,255,255,.35);}
.mm-sb-name{flex:1;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mm-sb-dist{font-family:'Anton',sans-serif;font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap;}
.mm-sb-dist.exact{color:#2ecc71;}
.mm-result{display:none;text-align:center;font-size:15px;font-weight:700;padding:10px;background:rgba(255,255,255,.06);border-radius:10px;margin-top:10px;line-height:1.6;}
#mm-map-wrap{max-width:100%;text-align:center;}
#mm-map-wrap .map-pin-wrap{max-width:100%;}
#mm-map-wrap .map-pin-wrap img{max-height:400px;border-radius:8px;}
.mm-progress{text-align:center;color:rgba(255,255,255,.4);font-size:13px;margin-bottom:10px;letter-spacing:.04em;}
@keyframes pinDrop{
  0%{transform:translate(-50%,-200%) scale(.5);opacity:0;}
  60%{transform:translate(-50%,-42%) scale(1.18);}
  80%{transform:translate(-50%,-52%) scale(.95);}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
}
.pin-drop-anim{animation:pinDrop .42s cubic-bezier(.22,1,.36,1) both;}
@keyframes pinLblFade{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,6px);}}
.pin-lbl-anim{animation:pinLblFade .3s ease .18s both;}
/* Phone Map Phase */
#bz-phase-map{flex-direction:column!important;gap:0!important;justify-content:flex-start!important;align-items:stretch!important;height:100vh;max-width:100%!important;padding:0!important;}
.bz-map-header{padding:14px 18px 12px;background:rgba(0,0,0,.4);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.bz-map-header-pts{font-family:'Anton',sans-serif;font-size:22px;color:var(--gold);}
.bz-map-header-q{font-size:15px;font-weight:600;line-height:1.45;margin-top:4px;color:rgba(255,255,255,.9);}
.bz-map-imgwrap{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:8px;min-height:0;}
.bz-map-footer{padding:12px 18px;background:rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.bz-map-hint{font-size:13px;color:rgba(255,255,255,.45);text-align:center;}
.bz-map-sent-lbl{color:#2ecc71;font-size:16px;font-weight:700;}