/* Shared autoplay setup panel — extracted from the owner729-approved Tempest
 * modal (candidate/source/public/css/game.css, donor game.css sha256
 * ef134f42...; index.html 06b5e226...). Inner class names, order and layout
 * values are preserved verbatim; only the palette/vars are tokenized so a
 * host can supply its approved theme. Tempest brass/navy values are the
 * defaults. No finished artwork is generated here: the card texture is
 * supplied by the host via --sap-card-bg (demo Tempest theme uses the actual
 * donor marble.png; alternate themes may pass any approved image or none).
 */
.sap {
  --sap-brass: #d9b25f;
  --sap-brass-dim: #8a6a2f;
  --sap-parchment: #e9dfc8;
  --sap-mist: #9fb0c9;
  --sap-win-glow: #ffd97a;
  --sap-danger: #e0685e;
  --sap-card-bg-color: #101a2f;
  --sap-card-bg: none;
  --sap-track: #2c3d5e;
  --sap-start-top: #1d3a4d;
  --sap-start-bottom: #12242f;
  --sap-scrim: rgba(4, 8, 16, 0.85);
  --sap-font: Georgia, 'Times New Roman', serif;
}

.sap-modal { display: none; position: fixed; inset: 0; background: var(--sap-scrim); z-index: 10; padding: 20px; overflow: auto; }
.sap-modal.open { display: block; }
.sap .modal-card {
  max-width: 620px; margin: 30px auto;
  background-color: var(--sap-card-bg-color);
  background-image: var(--sap-card-bg);
  border: 3px solid var(--sap-brass); border-radius: 10px; padding: 18px 20px;
}
.sap .modal-card h2 { color: var(--sap-brass); margin-top: 0; }

/* Approved panel block (values carried over from donor .auto-* rules). */
.sap .auto-card { max-width: 420px; padding: 16px 20px 14px; font-family: var(--sap-font); }
.sap .auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sap .auto-head h2 { margin: 0; color: var(--sap-brass); letter-spacing: 2px; font-size: 26px; }
.sap .auto-x {
  background: none; border: none; color: var(--sap-brass);
  font-size: 24px; line-height: 1; padding: 4px 8px; min-width: 44px; min-height: 44px;
}
.sap .auto-sub { margin: 2px 0 10px; color: var(--sap-parchment); font-size: 15px; }
.sap .auto-label { margin: 12px 0 6px; font-size: 12px; letter-spacing: 2px; color: var(--sap-parchment); }
.sap .auto-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sap .step-btn {
  width: 52px; height: 48px; flex: none;
  background: transparent; border: 2px solid var(--sap-brass-dim); border-radius: 8px;
  color: var(--sap-brass); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer;
}
.sap .step-btn:disabled { opacity: 0.45; cursor: default; }
.sap .step-value { font-size: 26px; color: var(--sap-win-glow); min-width: 90px; text-align: center; }
.sap .auto-card input[type="range"] { width: 100%; margin: 10px 0 0; accent-color: var(--sap-brass); min-height: 32px; }
.sap .auto-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--sap-mist); margin: 0 2px 6px; }
.sap .auto-presets { display: flex; gap: 10px; }
.sap .preset-btn {
  flex: 1; min-height: 44px;
  background: transparent; border: 2px solid var(--sap-brass-dim); border-radius: 8px;
  color: var(--sap-parchment); font-size: 16px; font-family: inherit; cursor: pointer;
}
.sap .preset-btn:disabled { opacity: 0.45; cursor: default; }
.sap .preset-btn[aria-pressed="true"] { border-color: var(--sap-brass); color: var(--sap-win-glow); }
.sap .auto-credits { margin: 10px 0 0; font-size: 13px; color: var(--sap-mist); }
.sap .auto-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--sap-track);
  font-size: 15px; color: var(--sap-parchment);
}
.sap .auto-total .auto-total-right { font-size: 20px; color: var(--sap-win-glow); }
.sap .auto-error { margin: 6px 0 0; min-height: 18px; font-size: 13px; color: var(--sap-danger); }
.sap .auto-start {
  width: 100%; min-height: 52px; margin-top: 6px;
  background: linear-gradient(var(--sap-start-top), var(--sap-start-bottom));
  color: var(--sap-win-glow); border: 2px solid var(--sap-brass); border-radius: 8px;
  font-size: 17px; letter-spacing: 2px; font-family: inherit; cursor: pointer;
}
.sap .auto-start:disabled { opacity: 0.45; cursor: default; }
.sap .auto-stop {
  width: 100%; min-height: 52px; margin-top: 6px;
  background: transparent;
  color: var(--sap-danger); border: 2px solid var(--sap-danger); border-radius: 8px;
  font-size: 17px; letter-spacing: 2px; font-family: inherit; cursor: pointer;
}
.sap .auto-cancel-wrap { text-align: center; margin: 8px 0 0; }
.sap .auto-cancel {
  background: none; border: none; color: var(--sap-mist);
  font-size: 15px; padding: 10px 16px; min-height: 44px; font-family: inherit; cursor: pointer;
}
.sap .step-btn:focus-visible, .sap .preset-btn:focus-visible,
.sap .auto-start:focus-visible, .sap .auto-stop:focus-visible,
.sap .auto-cancel:focus-visible, .sap .auto-x:focus-visible {
  outline: 2px solid var(--sap-win-glow); outline-offset: 2px;
}
@media (max-width: 760px) {
  .sap .auto-card { margin: 10px auto; }
  .sap .auto-head h2 { font-size: 23px; }
}

/* Owner1203: approved Scenario1199 wide arrangement. Shared once across slots.
   Palette/data remain host inputs; the scheduler still belongs to the game. */
.sap [hidden] { display:none !important; }
/* Preserve the approved single-column phone arrangement, with the same
   44px controls and compact spacing so both actions fit a 640px viewport. */
@media (orientation:portrait) and (max-width:760px) {
  .sap-modal { padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left)); }
  .sap-modal.open { display:grid;place-items:center; }
  .sap .auto-card { box-sizing:border-box;width:100%;margin:0;padding:8px 12px;border-width:2px;max-height:calc(100dvh - 16px);overflow:auto; }
  .sap .auto-head { height:44px; }
  .sap .auto-head h2 { font-size:23px;line-height:28px; }
  .sap .auto-sub { margin:0;line-height:18px;font-size:14px; }
  .sap .auto-label { margin:4px 0 0;line-height:18px;font-size:14px;letter-spacing:1px; }
  .sap .step-btn { height:44px;min-height:44px; }
  .sap .auto-card input[type=range] { box-sizing:border-box;margin:0;min-height:44px;height:44px; }
  .sap .auto-scale { margin:0 2px;font-size:14px;line-height:16px; }
  .sap .auto-credits { margin:2px 0 0;line-height:20px;font-size:14px; }
  .sap .auto-total { margin:4px 0 0;padding-top:4px;line-height:24px;font-size:14px; }
  .sap .auto-error:empty { display:none; }
  .sap .auto-error { font-size:14px;line-height:20px; }
  .sap .auto-card>p:has(.auto-start),.sap .auto-card>p:has(.auto-stop),.sap .auto-cancel-wrap { margin:4px 0 0; }
  .sap .auto-start,.sap .auto-stop,.sap .auto-cancel { box-sizing:border-box;min-height:44px;height:44px;margin:0;padding:0 8px; }
}
@media (orientation:landscape) and (max-height:600px) {
  .sap-modal { padding:4px max(4px,env(safe-area-inset-right)) 4px max(4px,env(safe-area-inset-left)); }
  .sap-modal.open { display:grid;place-items:center; }
  .sap .auto-card { box-sizing:border-box;width:100%;max-width:980px;margin:0;padding:8px 12px;border-width:2px;max-height:calc(100dvh - 8px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px 18px 44px 44px 44px 44px;gap:4px 24px;--sap-actions-row:6; }
  .sap .auto-head { grid-area:1/1/2/-1;min-width:0;height:44px;align-items:flex-start; }
  .sap .auto-head h2 { font-size:23px;line-height:26px; }
  .sap .auto-x { width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--sap-brass);border-radius:6px; }
  .sap .auto-sub { grid-area:1/1/2/-1;align-self:end;margin:0 52px 0 0;font-size:14px;line-height:16px;pointer-events:none; }
  .sap .auto-label { margin:0;line-height:18px;font-size:14px;letter-spacing:1px; }
  .sap [data-sap=spinsLabel] { grid-area:2/1; }
  .sap [data-sap=betLabel] { grid-area:2/2; }
  .sap .auto-stepper:has([data-sap=spinsMinus]) { grid-area:3/1; }
  .sap .auto-stepper:has([data-sap=betMinus]) { grid-area:3/2; }
  .sap .step-btn { width:52px;height:44px;min-height:44px; }
  .sap .step-value { font-size:25px; }
  .sap .auto-card input[type=range] { box-sizing:border-box;margin:0;width:100%;min-width:0;min-height:44px;height:44px;align-self:start; }
  .sap [data-sap=spinsSlider] { grid-area:4/1; }
  .sap [data-sap=betSlider] { grid-area:4/2; }
  .sap .auto-scale { grid-area:4/1;align-self:end;transform:translateY(4px);margin:0 2px;font-size:14px;line-height:16px;pointer-events:none; }
  .sap .auto-presets { grid-area:5/1;gap:8px; }
  .sap .preset-btn { min-height:44px;font-size:16px; }
  .sap .auto-credits { grid-area:5/2;align-self:start;margin:0;line-height:20px;font-size:14px; }
  .sap .auto-total { grid-area:5/2;align-self:end;margin:0;padding:0;line-height:20px;font-size:14px;border:0; }
  .sap .auto-total .auto-total-right { font-size:19px; }
  .sap .auto-error:empty { display:none; }
  .sap .auto-error:not(:empty) { grid-area:6/1/7/-1;margin:0;min-height:20px;font-size:14px;line-height:20px; }
  .sap .auto-card:has(.auto-error:not(:empty)) { --sap-actions-row:7;grid-template-rows:44px 18px 44px 44px 44px minmax(20px,auto) 44px; }
  .sap .auto-card>p:has(.auto-start),.sap .auto-card>p:has(.auto-stop) { grid-column:1;grid-row:var(--sap-actions-row);margin:0; }
  .sap .auto-cancel-wrap { grid-column:2;grid-row:var(--sap-actions-row);margin:0; }
  .sap .auto-start,.sap .auto-stop,.sap .auto-cancel { box-sizing:border-box;width:100%;height:44px;min-height:44px;margin:0;padding:0 8px;font-size:16px; }
  .sap .auto-cancel { border:2px solid var(--sap-brass-dim);border-radius:8px;color:var(--sap-parchment); }
}