/* 13 Oct (map): the settings window, the interface scale, the minimap frame and legends (58-settings.js, 01-render.js drawMinimap, 03-ui.js openMap) */
/* the interface scale: one variable, set from the settings (phones keep their size) */
/* #side lives inside #hud (it scales with it); the bottom HUD grows only while the window keeps ≥1600 of its pixels (its layout is made for that) */
@media (min-width:901px){#modals,#chat,#loreTrk,#target,#toast{zoom:var(--uis,1)}#top{zoom:var(--uisT,1)}#hud{zoom:var(--uisH,1)}}
#tip{zoom:var(--tipz,1)}
/* from the main menu the settings window stands above it */
#modals.overMenu .veil{z-index:9}

/* the minimap draws its own rounded frame */
#mm{border:0!important;box-shadow:none!important;border-radius:14px;background:transparent;cursor:crosshair;image-rendering:auto!important}
.mmleg{display:grid;gap:3px 10px;grid-template-columns:1fr;margin:6px 0}
.mmleg>div{display:flex;align-items:center;gap:7px;color:var(--ink);font:500 12px/1.25 var(--f-ui)}
.mmleg img{flex:none;width:18px;height:18px}
/* the world map legend under its canvas */
.wmleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;color:var(--dim);font:500 12px/1.2 var(--f-ui)}
.wmleg span{display:inline-flex;align-items:center;gap:5px}
.wmleg canvas{width:18px;height:18px}

/* the settings window */
.modal:has(.setw){width:min(820px,100%)}
.setw h4{margin:12px 0 6px;font:700 13px var(--f-ui);color:var(--gold);letter-spacing:.02em}
.setw h4:first-child{margin-top:2px}
.setbody{display:grid;grid-template-columns:150px 1fr;gap:14px;min-height:380px}
.setnav{display:flex;flex-direction:column;gap:4px}
.setnav .btn{text-align:left;padding:8px 10px;font-size:14px}
.setpage{min-width:0;max-height:min(62vh,560px);overflow:hidden auto;padding-right:4px}
.setseg{flex-wrap:wrap;gap:0}
.setseg .btn{flex:1 1 auto;padding:7px 9px;font-size:13px}
.setnote{margin:8px 0;color:var(--dim);font-size:12.5px}
.setlv{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.setlv .q{margin:0}.setlv .q span{color:var(--dim);font-size:12px}
.setlist{display:grid;gap:4px}
.settog{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 8px;background:#1d150d;border:1px solid var(--line)}
.settog b{display:block;font:600 13px var(--f-ui);color:var(--ink)}.settog small{color:var(--dim)}
.settog .tog{min-width:64px;text-align:center}
.setrange{width:100%;accent-color:var(--gold)}
.setkeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.setkey{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 3px 3px 8px;background:#1d150d;border:1px solid var(--line);font:500 13px var(--f-ui);color:var(--ink)}
.setkey span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keyb{flex:none;width:72px;min-width:0;text-align:center;cursor:pointer;caret-color:transparent;background:#110c08;border:1px solid var(--line2);color:var(--gold);font:700 13px var(--f-ui);padding:5px 4px;outline:none}
.keyb.chg{color:#9fe3ff}
.keyb.wait,.keyb:focus{border-color:var(--ember);color:var(--ember2);box-shadow:0 0 0 1px var(--ember) inset}
@media (prefers-reduced-motion:no-preference){.keyb.wait{animation:keyw 1s ease-in-out infinite}}
@keyframes keyw{50%{background:#2a1a0c}}
.setrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
@media (max-width:640px){
  .setbody{grid-template-columns:1fr;min-height:0}
  .setnav{flex-direction:row;flex-wrap:wrap}.setnav .btn{flex:1 1 auto;text-align:center;padding:6px 8px;font-size:13px}
  .setkeys,.setlv{grid-template-columns:1fr}
  .setpage{max-height:none}
}