/* Settings: sound and effect switches, the volume sliders, the offline download row, save transfer and backup, and the How to play guide. The battle's play-test options dialog reuses .setting-row. */
.pause-glyph {width:32px;height:32px;display:block}

/* Settings: rounded cards like the mission rows; volume sliders sit under their switch. */
[data-modal-type="settings"] .modal-body {display:flex;flex-direction:column;gap:12px;padding:16px 14px 14px}
[data-modal-type="settings"] .panel-hint {margin:2px 0 0}
.save-transfer {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 6px;
}
.save-transfer .btn {
  flex: 1;
  max-width: 150px;
}
.save-code {
  display: block;
  width: 100%;
  height: 120px;
  padding: 8px;
  border: 2px solid var(--slate-800);
  border-radius: 8px;
  background: var(--slate-900);
  color: #eef2e8;
  font: 11px/1.4 ui-monospace, monospace;
  word-break: break-all;
  resize: none;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 5px;
  background: none;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #ffffff20;
}
/* Settings: offline play status (src/offline.js). A div, so it copies the buttons' type. */
.offline-row{font-weight:400}
.offline-row>span>span{text-transform:uppercase}
.offline-row>span{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;flex:1;min-width:0;margin-right:10px}
.offline-row small{font-size:10px;font-weight:normal;color:#dfe8ee;line-height:1.3}
.offline-row-bar{display:block;align-self:stretch;height:6px;border-radius:3px;background:var(--slate-900);overflow:hidden}
.offline-row-bar::before{content:"";display:block;height:100%;width:calc(100% * var(--progress));background:var(--green-top)}
/* Flat status pill; off matches a switched-off toggle, ink ring included. */
.offline-badge{flex-shrink:0;padding:5px 11px;border-radius:12px;box-shadow:0 0 0 2px var(--ink);font-size:11px;background:#87939c;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.offline-row.ready .offline-badge{background:var(--green)}
.offline-row.downloading .offline-badge{background:var(--yellow)}
.offline-row.paused .offline-badge{background:#e2842f}
.help-guide .modal-body {padding:12px 12px 16px}
.help-steps {list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px;counter-reset:none}
.help-step {display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;text-align:left;background:#6f889b;border:2px solid var(--slate-900);border-radius:11px;box-shadow:inset 0 2px var(--slate-200),0 3px var(--ink);padding:8px 12px 8px 8px}
.help-step-art {position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:56px;background:var(--slate);border:2px solid var(--slate-900);border-radius:9px;box-shadow:inset 0 -3px var(--slate-700)}
.help-step-art > b {position:absolute;top:-8px;left:-8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(#ffcf39,#ffbb1c);border:2px solid var(--slate-900);color:var(--slate-900);font-size:12px;line-height:1}
.help-step h3 {margin:0 0 3px;text-align:left;font-size:18px;color:#ffe066;-webkit-text-stroke:2px var(--slate-900);paint-order:stroke fill;text-shadow:0 2px var(--slate-900);text-transform:uppercase}
.help-step p {margin:0;font-size:13px;line-height:1.35;color:#fff;-webkit-text-stroke:1px var(--slate-900);paint-order:stroke fill}
@media(max-width:360px){.help-step{grid-template-columns:50px minmax(0,1fr);gap:9px}.help-step-art{width:50px;height:48px}.help-step h3{font-size:16px}.help-step p{font-size:12px}
}
.settings-card {padding:4px 14px;border-radius:14px;background:var(--slate-500);box-shadow:inset 0 3px var(--slate-700),0 3px #bdd0df}
.settings-card .setting-row {min-height:52px;padding:8px 0;border-bottom:2px solid var(--slate);font-size:14px;letter-spacing:.3px;text-transform:uppercase;color:#fffbe6}
.settings-card .setting-row:last-child,.settings-card .setting-row:has(+ .setting-slider) {border-bottom:0}
/* A settings row is a line of text, not a push button: no press dip, so the label holds still. */
.setting-row:active:not(:disabled) {transform:none}
.setting-label {display:flex;align-items:center;gap:9px}
.setting-label .pause-glyph {width:24px;height:24px;flex:none}
.setting-slider {display:flex;align-items:center;gap:10px;margin-top:-4px;padding:0 0 14px 35px;border-bottom:2px solid var(--slate);transition:opacity .15s}
.setting-slider:last-child {border-bottom:0}
.setting-slider.muted {opacity:.45}
.setting-slider output {min-width:40px;text-align:right;font-size:13px;font-weight:900;color:#fffbe6}
.setting-slider input {flex:1;min-width:0;height:24px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
/* Flat track and knob, colored and ink-ringed like the toggles. */
.setting-slider input::-webkit-slider-runnable-track {height:10px;border-radius:5px;box-shadow:0 0 0 2px var(--ink);background:linear-gradient(90deg,var(--green) var(--fill,100%),var(--slate-900) var(--fill,100%))}
.setting-slider input::-moz-range-track {height:10px;border-radius:5px;box-shadow:0 0 0 2px var(--ink);background:linear-gradient(90deg,var(--green) var(--fill,100%),var(--slate-900) var(--fill,100%))}
.setting-slider input::-webkit-slider-thumb {-webkit-appearance:none;width:22px;height:22px;margin-top:-6px;border:0;border-radius:50%;background:#fffbe6;box-shadow:0 0 0 2px var(--ink)}
.setting-slider input::-moz-range-thumb {width:22px;height:22px;border:0;border-radius:50%;background:#fffbe6;box-shadow:0 0 0 2px var(--ink)}
.setting-slider input:focus-visible {outline:2px solid #fffbe6;outline-offset:2px;border-radius:6px}
.settings-card .offline-row {min-height:60px}
.settings-card .offline-row small {color:#d3e0ea;text-transform:none;letter-spacing:0}
.settings-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.settings-actions .btn {width:100%;min-width:0;margin:0;padding-inline:6px;white-space:nowrap}
.settings-actions .restore-backup {grid-column:1/-1}
@media(max-width:360px){.settings-actions .btn {font-size:var(--button-label-compact-size)}
}