/* ========================================================================
   BOMBARERA V59 — SETTINGS CONTROL PANEL
   Compact, readable, no-scroll desktop modal. Preserves existing settings IDs
   and runtime behavior while giving the screen a game-first visual hierarchy.
   ======================================================================== */

#settingsModal.settings-modal--v59{
  --settings-font:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --settings-cyan:#63e6ff;
  --settings-blue:#6f8cff;
  --settings-violet:#a67cff;
  --settings-pink:#ff72c7;
  --settings-green:#6ff0b0;
  --settings-gold:#ffd166;
  padding:clamp(16px,2.4vw,34px)!important;
  z-index:22000!important;
}

#settingsModal .settings-modal__overlay{
  background:
    radial-gradient(circle at 18% 20%,rgba(44,183,255,.14),transparent 31%),
    radial-gradient(circle at 82% 78%,rgba(163,83,255,.16),transparent 34%),
    rgba(2,7,18,.84)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
}

#settingsModal .settings-v59{
  --ui-dialog-accent:var(--settings-cyan);
  position:relative!important;
  width:min(790px,calc(100vw - 32px))!important;
  max-width:790px!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid rgba(101,220,255,.34)!important;
  border-radius:28px!important;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(75,209,255,.14),transparent 31%),
    radial-gradient(circle at 100% 0,rgba(176,92,255,.13),transparent 35%),
    linear-gradient(145deg,rgba(10,28,52,.995),rgba(7,17,38,.995) 55%,rgba(13,15,42,.995))!important;
  background-size:28px 28px,28px 28px,auto,auto,auto!important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(90,205,255,.05),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
  color:#f7fbff!important;
  font-family:var(--settings-font)!important;
  isolation:isolate!important;
}

#settingsModal .settings-v59::before{
  content:''!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:2px!important;
  z-index:3!important;
  background:linear-gradient(90deg,transparent 4%,#62e8ff 25%,#9f7cff 58%,#ff74c9 80%,transparent 96%)!important;
  opacity:.9!important;
  pointer-events:none!important;
}

#settingsModal .settings-v59::after{
  content:'';
  position:absolute;
  inset:auto -70px -95px auto;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(130,88,255,.14),transparent 66%);
  pointer-events:none;
  z-index:-1;
}

#settingsModal .settings-v59__aurora{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
#settingsModal .settings-v59__aurora::before,
#settingsModal .settings-v59__aurora::after{
  content:'';
  position:absolute;
  width:270px;
  height:270px;
  border-radius:50%;
  filter:blur(62px);
  opacity:.16;
}
#settingsModal .settings-v59__aurora::before{left:-130px;top:-150px;background:#35dfff}
#settingsModal .settings-v59__aurora::after{right:-130px;top:-120px;background:#d35cff}

#settingsModal .settings-card__close{
  top:18px!important;
  right:18px!important;
  width:42px!important;
  height:42px!important;
  border:1px solid rgba(164,216,255,.20)!important;
  border-radius:13px!important;
  background:rgba(6,20,41,.78)!important;
  color:#dff7ff!important;
  font:600 21px/1 var(--settings-font)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#settingsModal .settings-card__close:hover{
  border-color:rgba(108,226,255,.48)!important;
  background:rgba(18,50,75,.88)!important;
  color:#fff!important;
}

#settingsModal .settings-v59__header{
  position:relative;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:116px;
  padding:22px 74px 20px 24px;
  border-bottom:1px solid rgba(132,205,255,.13);
  background:linear-gradient(180deg,rgba(15,38,67,.72),rgba(8,21,43,.36));
}

#settingsModal .settings-v59__emblem{
  position:relative;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid rgba(117,229,255,.46);
  border-radius:19px;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.28),transparent 23%),
    linear-gradient(145deg,#28c6ec 0%,#6577ff 48%,#c75ae9 100%);
  box-shadow:0 10px 28px rgba(62,127,255,.26),inset 0 1px 0 rgba(255,255,255,.3);
}
#settingsModal .settings-v59__emblem-ring{
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
}
#settingsModal .settings-v59__emblem [data-ui-icon]{display:grid;place-items:center;width:31px;height:31px;color:#fff!important}
#settingsModal .settings-v59__emblem .ui-icon{width:31px!important;height:31px!important;color:#fff!important;filter:drop-shadow(0 3px 7px rgba(18,22,67,.35))}

#settingsModal .settings-v59__heading{min-width:0}
#settingsModal .settings-card__eyebrow{
  margin:0 0 5px!important;
  color:#76eaff!important;
  font:800 10px/1 var(--settings-font)!important;
  letter-spacing:.16em!important;
}
#settingsModal .settings-card__title{
  margin:0!important;
  color:#fff!important;
  font:900 clamp(27px,3vw,38px)/1.02 var(--settings-font)!important;
  letter-spacing:-.035em!important;
  white-space:normal!important;
  overflow:visible!important;
}
#settingsModal .settings-card__text{
  max-width:none!important;
  margin:7px 0 0!important;
  color:#aebed1!important;
  font:600 14px/1.35 var(--settings-font)!important;
  letter-spacing:0!important;
}

#settingsModal .settings-v59__status{
  display:grid;
  grid-template-columns:8px auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
  min-width:108px;
  padding:9px 12px;
  border:1px solid rgba(115,232,255,.16);
  border-radius:13px;
  background:rgba(4,17,37,.54);
}
#settingsModal .settings-v59__status-dot{
  grid-row:1/3;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#6df0b0;
  box-shadow:0 0 0 4px rgba(109,240,176,.09),0 0 14px rgba(109,240,176,.48);
}
#settingsModal .settings-v59__status strong{color:#eaf9ff;font:800 10px/1.05 var(--settings-font);letter-spacing:.07em}
#settingsModal .settings-v59__status small{margin-top:3px;color:#7188a4;font:700 8px/1 var(--settings-font);letter-spacing:.13em}

#settingsModal .settings-panel.settings-v59__grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  padding:18px 20px 0!important;
}

#settingsModal .settings-field.settings-v59__field{
  --field-accent:#65e6a3;
  position:relative!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  min-height:84px!important;
  margin:0!important;
  padding:13px 14px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--field-accent) 24%,rgba(132,203,255,.10))!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--field-accent) 11%,transparent),transparent 48%),
    linear-gradient(180deg,rgba(11,30,54,.78),rgba(6,19,40,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  cursor:var(--bm-cursor-action)!important;
}
#settingsModal .settings-field.settings-v59__field::before{
  content:'';
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:2px;
  border-radius:0 3px 3px 0;
  background:var(--field-accent);
  opacity:.78;
}
#settingsModal .settings-v59__field--sound{--field-accent:#65e6a3}
#settingsModal .settings-v59__field--camera{--field-accent:#a98cff}
#settingsModal .settings-v59__field--volume{--field-accent:#63ddff}
#settingsModal .settings-v59__field--particles{--field-accent:#ff76c8}

#settingsModal .settings-v59__field-icon{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  border:1px solid color-mix(in srgb,var(--field-accent) 34%,transparent)!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--field-accent) 10%,rgba(7,19,39,.92))!important;
  color:var(--field-accent)!important;
}
#settingsModal .settings-v59__field-icon .ui-icon{width:23px!important;height:23px!important;color:var(--field-accent)!important}

#settingsModal .settings-v59__field-copy{display:block;min-width:0}
#settingsModal .settings-v59__field-copy strong{
  display:block!important;
  color:#f7fbff!important;
  font:750 15px/1.2 var(--settings-font)!important;
  letter-spacing:-.01em!important;
}
#settingsModal .settings-v59__field-copy small{
  display:block!important;
  margin:4px 0 0!important;
  color:#91a5bd!important;
  font:600 12px/1.3 var(--settings-font)!important;
  letter-spacing:0!important;
}

#settingsModal .settings-v59__switch{
  position:relative!important;
  width:50px!important;
  height:28px!important;
  flex:0 0 50px!important;
  margin:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:1px solid rgba(146,183,213,.28)!important;
  border-radius:999px!important;
  background:#12263d!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.26)!important;
  cursor:var(--bm-cursor-action)!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#settingsModal .settings-v59__switch::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#91a8bd;
  box-shadow:0 3px 8px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .18s ease;
}
#settingsModal .settings-v59__switch:checked{
  border-color:color-mix(in srgb,var(--field-accent) 68%,white 5%)!important;
  background:color-mix(in srgb,var(--field-accent) 32%,#0a2533)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 16px color-mix(in srgb,var(--field-accent) 20%,transparent)!important;
}
#settingsModal .settings-v59__switch:checked::after{transform:translateX(22px);background:#f8ffff}

#settingsModal .settings-field.settings-v59__field--volume,
#settingsModal .settings-field.settings-v59__field--particles{
  grid-template-columns:1fr!important;
  align-items:stretch!important;
  gap:11px!important;
  cursor:var(--bm-cursor-default)!important;
}
#settingsModal .settings-v59__field-head{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
#settingsModal .settings-v59__value{
  display:grid!important;
  place-items:center!important;
  min-width:54px!important;
  height:30px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid rgba(99,221,255,.28)!important;
  border-radius:10px!important;
  background:rgba(52,191,224,.10)!important;
  color:#8deeff!important;
  font:800 13px/1 var(--settings-font)!important;
  font-variant-numeric:tabular-nums!important;
}

#settingsModal .settings-v59__range{
  --settings-volume:50%;
  width:100%!important;
  height:7px!important;
  margin:2px 0 3px!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#62e6ff 0 var(--settings-volume),rgba(133,171,204,.20) var(--settings-volume) 100%)!important;
  outline:0!important;
  cursor:var(--bm-cursor-action)!important;
}
#settingsModal .settings-v59__range::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:transparent}
#settingsModal .settings-v59__range::-webkit-slider-thumb{
  width:20px;
  height:20px;
  margin-top:-6.5px;
  appearance:none;
  -webkit-appearance:none;
  border:3px solid #e8fcff;
  border-radius:50%;
  background:#54dfff;
  box-shadow:0 0 0 4px rgba(84,223,255,.12),0 4px 12px rgba(0,0,0,.35);
}
#settingsModal .settings-v59__range::-moz-range-track{height:7px;border-radius:999px;background:rgba(133,171,204,.20)}
#settingsModal .settings-v59__range::-moz-range-progress{height:7px;border-radius:999px;background:#62e6ff}
#settingsModal .settings-v59__range::-moz-range-thumb{width:16px;height:16px;border:3px solid #e8fcff;border-radius:50%;background:#54dfff;box-shadow:0 4px 12px rgba(0,0,0,.35)}

#settingsModal .settings-v59__select{
  width:100%!important;
  min-height:42px!important;
  padding:0 42px 0 13px!important;
  border:1px solid rgba(255,118,200,.22)!important;
  border-radius:12px!important;
  background-color:#091a33!important;
  color:#f4f9ff!important;
  font:700 13px/1 var(--settings-font)!important;
  cursor:var(--bm-cursor-action)!important;
}

#settingsModal .settings-card__actions.settings-v59__actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:10px!important;
  margin:16px 0 0!important;
  padding:15px 20px 18px!important;
  border-top:1px solid rgba(132,205,255,.10)!important;
  background:linear-gradient(180deg,rgba(5,16,34,.05),rgba(3,12,28,.46))!important;
}
#settingsModal .settings-v59__actions .settings-card__btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:132px!important;
  min-height:46px!important;
  padding:0 17px!important;
  border-radius:13px!important;
  font:750 13px/1 var(--settings-font)!important;
  letter-spacing:0!important;
  cursor:var(--bm-cursor-action)!important;
}
#settingsModal .settings-v59__actions .settings-card__btn [data-ui-icon]{display:grid;width:18px;height:18px}
#settingsModal .settings-v59__actions .settings-card__btn .ui-icon{width:18px!important;height:18px!important}
#settingsModal .settings-v59__actions .settings-card__btn--ghost{
  border:1px solid rgba(154,190,221,.18)!important;
  background:rgba(255,255,255,.045)!important;
  color:#d9e7f5!important;
}
#settingsModal .settings-v59__actions .settings-card__btn--primary{
  border:1px solid rgba(117,246,190,.50)!important;
  background:linear-gradient(180deg,#72efb5,#39cf91)!important;
  color:#062117!important;
  box-shadow:0 8px 20px rgba(46,210,143,.16),inset 0 1px 0 rgba(255,255,255,.34)!important;
}

#settingsModal :is(button,input,select):focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(99,221,255,.18),0 0 0 1px rgba(99,221,255,.82)!important;
}

/* 1365x768 / laptop: compact by design, never a nested scroll surface. */
@media (min-width:721px) and (max-height:760px){
  #settingsModal.settings-modal--v59{padding:12px!important}
  #settingsModal .settings-v59{width:min(760px,calc(100vw - 24px))!important;max-height:none!important;overflow:hidden!important}
  #settingsModal .settings-v59__header{min-height:96px;padding:16px 68px 15px 18px;grid-template-columns:54px minmax(0,1fr) auto;gap:13px}
  #settingsModal .settings-v59__emblem{width:54px;height:54px;border-radius:16px}
  #settingsModal .settings-v59__emblem .ui-icon{width:27px!important;height:27px!important}
  #settingsModal .settings-card__title{font-size:30px!important}
  #settingsModal .settings-card__text{font-size:13px!important;margin-top:5px!important}
  #settingsModal .settings-panel.settings-v59__grid{gap:10px!important;padding:14px 16px 0!important}
  #settingsModal .settings-field.settings-v59__field{min-height:76px!important;padding:10px 12px!important;gap:10px!important}
  #settingsModal .settings-v59__field-icon{width:40px!important;height:40px!important}
  #settingsModal .settings-v59__field-head{grid-template-columns:40px minmax(0,1fr) auto!important;gap:10px!important}
  #settingsModal .settings-v59__field-copy strong{font-size:14px!important}
  #settingsModal .settings-v59__field-copy small{font-size:11.5px!important;margin-top:3px!important}
  #settingsModal .settings-card__actions.settings-v59__actions{margin-top:13px!important;padding:12px 16px 14px!important}
  #settingsModal .settings-v59__actions .settings-card__btn{min-height:42px!important}
}

/* Tablet / narrow desktop: one readable column; no horizontal compression. */
@media (max-width:720px){
  #settingsModal.settings-modal--v59{padding:12px!important;align-items:center!important}
  #settingsModal .settings-v59{width:min(100%,560px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;border-radius:23px!important}
  #settingsModal .settings-v59__header{grid-template-columns:54px minmax(0,1fr);min-height:0;padding:18px 60px 17px 17px;gap:12px}
  #settingsModal .settings-v59__status{display:none}
  #settingsModal .settings-v59__emblem{width:54px;height:54px;border-radius:16px}
  #settingsModal .settings-card__title{font-size:29px!important}
  #settingsModal .settings-card__text{font-size:13px!important;margin-top:5px!important}
  #settingsModal .settings-panel.settings-v59__grid{grid-template-columns:1fr!important;padding:13px 14px 0!important;gap:9px!important}
  #settingsModal .settings-field.settings-v59__field{min-height:72px!important;padding:10px 12px!important}
  #settingsModal .settings-card__actions.settings-v59__actions{position:sticky;bottom:0;z-index:4;margin-top:12px!important;padding:12px 14px 14px!important;background:linear-gradient(180deg,rgba(6,17,36,.90),rgba(4,13,30,.98))!important}
}

@media (max-width:480px){
  #settingsModal.settings-modal--v59{padding:8px!important}
  #settingsModal .settings-v59{width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:20px!important}
  #settingsModal .settings-v59__header{grid-template-columns:46px minmax(0,1fr);padding:14px 52px 13px 13px;gap:10px}
  #settingsModal .settings-v59__emblem{width:46px;height:46px;border-radius:14px}
  #settingsModal .settings-v59__emblem .ui-icon{width:23px!important;height:23px!important}
  #settingsModal .settings-card__eyebrow{font-size:9px!important}
  #settingsModal .settings-card__title{font-size:25px!important}
  #settingsModal .settings-card__text{font-size:12px!important}
  #settingsModal .settings-card__close{top:12px!important;right:12px!important;width:36px!important;height:36px!important;border-radius:11px!important}
  #settingsModal .settings-panel.settings-v59__grid{padding:10px 10px 0!important;gap:8px!important}
  #settingsModal .settings-field.settings-v59__field{grid-template-columns:38px minmax(0,1fr) auto!important;min-height:66px!important;padding:9px 10px!important;gap:9px!important;border-radius:14px!important}
  #settingsModal .settings-v59__field-icon{width:38px!important;height:38px!important;border-radius:11px!important}
  #settingsModal .settings-v59__field-icon .ui-icon{width:20px!important;height:20px!important}
  #settingsModal .settings-v59__field-copy strong{font-size:14px!important}
  #settingsModal .settings-v59__field-copy small{font-size:11px!important}
  #settingsModal .settings-v59__switch{width:46px!important;height:26px!important;flex-basis:46px!important}
  #settingsModal .settings-v59__switch::after{width:18px;height:18px}
  #settingsModal .settings-v59__switch:checked::after{transform:translateX(20px)}
  #settingsModal .settings-v59__field-head{grid-template-columns:38px minmax(0,1fr) auto!important;gap:9px!important}
  #settingsModal .settings-card__actions.settings-v59__actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important}
  #settingsModal .settings-v59__actions .settings-card__btn{min-width:0!important;width:100%!important;min-height:44px!important;padding:0 10px!important}
}

/* Short landscape fallback: preserve every control without clipping. */
@media (max-height:540px){
  #settingsModal.settings-modal--v59{padding:8px!important}
  #settingsModal .settings-v59{max-height:calc(100dvh - 16px)!important;overflow:auto!important}
  #settingsModal .settings-v59__header{min-height:76px;padding-top:10px;padding-bottom:10px}
  #settingsModal .settings-v59__emblem{width:46px;height:46px}
  #settingsModal .settings-card__text{display:none!important}
  #settingsModal .settings-panel.settings-v59__grid{gap:7px!important;padding-top:9px!important}
  #settingsModal .settings-field.settings-v59__field{min-height:62px!important;padding-top:8px!important;padding-bottom:8px!important}
  #settingsModal .settings-v59__field-copy small{font-size:11px!important}
  #settingsModal .settings-card__actions.settings-v59__actions{margin-top:9px!important;padding-top:9px!important;padding-bottom:9px!important}
}

@media (prefers-reduced-motion:reduce){
  #settingsModal *,#settingsModal *::before,#settingsModal *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}