/* Settings panel and the top round sound/settings buttons (2026-09-25). Loaded after control-hit-targets.css.
   The top buttons use the special round-button style of .dialog-sound-toggle (gold ring, dark red disc). */
.settings-button{font:inherit;color:inherit;background:none;border:0;padding:0 4px;cursor:pointer}
.top-round-controls{display:none}
.top-round-button{
  display:grid;place-items:center;padding:0;border-radius:50%;border:2px solid #ffd36b;
  background:radial-gradient(circle at 50% 35%,#5a1420,#24060e);color:#fff3a4;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px #000a,inset 0 0 6px #0008;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation
}
.top-round-button:hover{filter:brightness(1.15)}
.top-round-button:active{transform:scale(.94)}
.top-round-button:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}
.top-sound-button[aria-pressed="false"]{border-color:#ff6a5a}

/* Video cabinet: both round buttons sit in the top-right corner over curtain/tent art only (measured at
   1280x800, 1366x768, 1920x1080; the logo, Chompers, meters and signs start further in). */
.cabinet[data-video-ready="true"]>footer>.top-round-controls{display:contents}
.cabinet[data-video-ready="true"]>footer .top-round-button{
  position:absolute;z-index:31;top:1.6%;width:3.4%;min-width:34px;height:auto;aspect-ratio:1;pointer-events:auto;
  font-size:clamp(14px,1.5vw,26px)
}
.cabinet[data-video-ready="true"]>footer .top-sound-button{right:1.1%}
.cabinet[data-video-ready="true"]>footer .top-settings-button{right:5.1%}

@media (min-width:901px),(orientation:landscape){
  /* Desktop: the painted gear opens Settings (sound on/off moved inside it and onto the top 🔊). */
  .cabinet[data-video-ready="true"]>footer #sound-toggle{display:none}
  .cabinet[data-video-ready="true"]>footer #settings-button{
    display:block;position:absolute;left:93.5%;top:86.4%;width:4.4%;height:auto;aspect-ratio:1;padding:0;
    border-radius:50%;pointer-events:auto;color:transparent;font-size:0;background:transparent;cursor:pointer
  }
  .cabinet[data-video-ready="true"]>footer #settings-button:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}
  .cabinet[data-video-ready="true"]>footer #settings-button[data-muted="true"]::after{
    content:"";position:absolute;inset:12%;border-radius:50%;
    box-shadow:inset 0 0 0 3px #ff4a3d;background:linear-gradient(135deg,transparent 44%,#ff4a3d 44% 56%,transparent 56%)
  }
}
@media (max-width:900px) and (orientation:portrait){
  /* Phone: the painted 🔊 stays the mute toggle; Settings opens from the top ⚙ (or a long press on the top 🔊). */
  .cabinet[data-video-ready="true"]>footer #settings-button{display:none}
  .cabinet[data-video-ready="true"]>footer .top-round-button{top:1.1%;width:9.4%;min-width:34px;font-size:clamp(14px,4.4vw,20px)}
  .cabinet[data-video-ready="true"]>footer .top-sound-button{right:1.8%}
  .cabinet[data-video-ready="true"]>footer .top-settings-button{right:12.6%}
}

/* Settings dialog */
.settings-dialog{
  width:min(92vw,420px);max-height:94dvh;padding:0;border:3px solid #ffcf4d;border-radius:22px;overflow:auto;color:#fff3cf;
  background:radial-gradient(ellipse at 50% 0%,#ffb52e33,transparent 50%),radial-gradient(ellipse at 50% 40%,#7d1424,#3c0814 70%,#1d040c);
  box-shadow:0 0 0 3px #6a2006,0 0 0 5px #f7c24a,0 18px 50px #000d,0 0 30px #ff9d2555
}
.settings-dialog[open]{animation:settings-in .22s cubic-bezier(.2,.9,.3,1.1) both}
.settings-dialog::backdrop{background:#07020bc4;backdrop-filter:blur(4px)}
.settings-dialog form{display:grid;gap:clamp(8px,1.6dvh,14px);margin:0;padding:clamp(14px,2.6dvh,24px) clamp(16px,4vw,26px)}
.settings-dialog h2{
  margin:0 0 2px;text-align:center;font:700 clamp(22px,4dvh,32px)/1 CarnivalCoin,Georgia,serif;letter-spacing:.06em;
  background:linear-gradient(#fffbe0 8%,#ffd84f 46%,#e48a14 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.6px #6f1b0d;filter:drop-shadow(0 2px 0 #5c160c)
}
.settings-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;border:1px solid #b8862d99;background:#0b0413cc}
.settings-row>span{font:900 clamp(12px,2dvh,15px)/1 'Trebuchet MS',sans-serif;letter-spacing:.16em;color:#ffcf6a}
.settings-slider{grid-template-columns:5.6em minmax(0,1fr) 3.4em}
.settings-slider output{font:800 14px/1 'Trebuchet MS',sans-serif;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.settings-slider input{width:100%;min-height:32px;accent-color:#ffcf4d;cursor:pointer}
.settings-dialog[data-sound="off"] .settings-slider{opacity:.6}
.settings-muted-note,.settings-how-to-note{margin:-4px 0 0;text-align:center;font:700 12px/1.3 'Trebuchet MS',sans-serif;color:#ffb3a8}
.settings-switch{
  position:relative;width:74px;height:36px;padding:0 10px;border-radius:999px;border:2px solid #ffd36b;cursor:pointer;
  background:#3a2a31;color:#fff1d8;font:900 13px/1 'Trebuchet MS',sans-serif;letter-spacing:.1em;text-align:right;
  box-shadow:inset 0 0 8px #000a
}
.settings-switch::before{content:"";position:absolute;left:4px;top:50%;width:26px;aspect-ratio:1;border-radius:50%;translate:0 -50%;background:radial-gradient(circle at 40% 35%,#fff7cf,#ffcf4d 55%,#a86a12);box-shadow:0 2px 4px #000a;transition:left .18s}
.settings-switch[aria-checked="true"]{background:linear-gradient(#45a83e,#1b5419);text-align:left}
.settings-switch[aria-checked="true"]::before{left:calc(100% - 30px)}
.settings-link,.settings-close{
  min-height:46px;border-radius:999px;border:3px solid #ffcf4d;cursor:pointer;color:#fff4c4;
  font:700 clamp(15px,2.4dvh,19px)/1 CarnivalCoin,Georgia,serif;letter-spacing:.04em;box-shadow:0 0 0 2px #6a2006,0 4px 10px #000a,inset 0 2px 0 #fff5
}
.settings-link{background:linear-gradient(#1f84d4,#0a3a74);text-shadow:0 2px 0 #06224a}
.settings-link:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.settings-close{background:linear-gradient(#c8302f,#6f1019);text-shadow:0 2px 0 #4a0a0e}
.settings-dialog button:focus-visible,.settings-dialog input:focus-visible{outline:3px solid #fff5ae;outline-offset:2px}
@keyframes settings-in{from{opacity:0;transform:scale(.92)}}
@media (prefers-reduced-motion:reduce){.settings-dialog[open]{animation:none}.settings-switch::before{transition:none}}