/* Settings (settings-ui.mjs): the island view's gear button and the settings window in the HUD's cream pixel style
   (my-pcs.css, apricot.css). The gear is a square twin of the profile chip (social-paper frame), placed by
   settings-ui.mjs right of the chip in the top-left row (LEADERBOARD · name · gear) or under it where the resource
   cards leave no room. On phones, where that row is full, it sits just above the bottom navigation's left end. */
.game-settings-button{position:absolute;display:grid;place-items:center;box-sizing:border-box;width:62px;height:62px;padding:0 0 3px;
  cursor:pointer;pointer-events:auto;touch-action:manipulation}
.game-settings-button .pixel-icon{width:62%;height:62%;image-rendering:pixelated;transition:rotate .2s steps(2)}
.game-settings-button:hover .pixel-icon{rotate:22.5deg}
.game-settings-button:active{transform:translateY(2px)}
.game-settings-button:focus-visible{outline:3px solid #ad5b35;outline-offset:3px}
body[data-pc-picker] .game-settings-button{display:none}
@media(max-width:700px){
  .game-settings-button{left:max(10px,env(safe-area-inset-left));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 63px);width:46px;height:46px;border-width:7px}
}
/* An open LEADERBOARD or profile panel reaches the gear's corner on phones and short screens: the gear steps aside until
   it closes instead of being drawn over the panel (9 Oct 2026). Elsewhere the gear stands clear of both panels. */
@media(max-width:700px),(max-height:500px){
  body:has(:is(.leaderboard-panel,.island-profile-panel):not([hidden])) .game-settings-button{visibility:hidden}
}
body:has(:is(.leaderboard-panel,.island-profile-panel):not([hidden])) .game-settings-button[data-dock=nav]{visibility:hidden}
/* No clear spot beside the profile chip (settings-ui.mjs gearSpot): the phones' place above the navigation's left end. */
.game-settings-button[data-dock=nav]{left:max(10px,env(safe-area-inset-left));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 63px);width:46px;height:46px;border-width:7px}
@media(prefers-reduced-motion:reduce){.game-settings-button .pixel-icon{rotate:none!important;transition:none}}

/* ---------------------------------------------------------------- window */
.settings-window{--p:clamp(.8px,min(calc((100vw - 24px) / 620),calc((100dvh - 24px) / 700)),1.3px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(620 * var(--p)),calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:calc(12 * var(--p)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;overflow:hidden;
  color:var(--ink);font:400 calc(14 * var(--p))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.settings-window[open]{display:flex;flex-direction:column}
.settings-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.settings-window *{box-sizing:border-box}
.settings-window :is(h1,h2,p){margin:0}
.settings-window button{font-family:Pixeloid,monospace;color:var(--ink);cursor:pointer}
.settings-window :is(button,input):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.settings-head{flex:none;display:flex;align-items:center;gap:calc(12 * var(--p));padding:calc(9 * var(--p)) calc(14 * var(--p));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--p)) solid #d9a15f}
.settings-head-icon{flex:none;width:calc(42 * var(--p));height:calc(42 * var(--p));image-rendering:pixelated;filter:drop-shadow(0 calc(2 * var(--p)) 0 #b8742f)}
.settings-head h1{flex:1;min-width:0;font:700 calc(30 * var(--p))/1.1 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:break-word;hyphens:auto}
.settings-close{flex:none;display:grid;place-items:center;width:calc(46 * var(--p));height:calc(46 * var(--p));min-width:36px;min-height:36px;padding:calc(10 * var(--p));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat}
.settings-close svg{width:100%;height:100%;shape-rendering:crispEdges}
.settings-close:hover{filter:brightness(1.05)}
/* Content-sized body (flex-basis auto, never 0%): WebKit resolves a percentage inside a modal <dialog> as 0 and the body
   collapsed under the title on iPhones (9 Oct 2026; island-hall.css). */
.settings-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:calc(14 * var(--p));padding:calc(14 * var(--p)) calc(16 * var(--p)) calc(16 * var(--p));
  scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.settings-section{display:grid;gap:calc(9 * var(--p))}
.settings-section h2{font:700 calc(15 * var(--p))/1.2 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

/* Languages: a grid of paper tiles, the chosen one green with a check (each name in its own script). */
.settings-languages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(7 * var(--p))}
.settings-language{display:flex;align-items:center;gap:calc(8 * var(--p));min-height:calc(44 * var(--p));padding:calc(6 * var(--p)) calc(10 * var(--p));text-align:left;
  font:700 calc(14 * var(--p))/1.2 Pixeloid,'Segoe UI',Tahoma,'Nirmala UI','Leelawadee UI',sans-serif;background:#fff8e3;
  border:calc(2 * var(--p)) solid #dcb784;box-shadow:inset 0 calc(-3 * var(--p)) #f1dcb4,0 calc(2 * var(--p)) #c99461}
.settings-language:hover{background:#fffdf3;translate:0 -1px}
.settings-language:active{translate:0 1px}
.settings-language[aria-checked=true]{color:#24522a;background:#eef7e2;border-color:#8fc274;box-shadow:inset 0 calc(-3 * var(--p)) #d6ecc4,0 calc(2 * var(--p)) #6fa35a}
.settings-language-mark{flex:none;display:grid;place-items:center;width:calc(18 * var(--p));height:calc(18 * var(--p));background:#fff;border:calc(2 * var(--p)) solid #c9a77a}
.settings-language[aria-checked=true] .settings-language-mark{background:#5aa344;border-color:#2f6b2a;color:#fff}
.settings-language-mark svg{width:70%;height:70%;shape-rendering:crispEdges}
.settings-language-name{min-width:0;overflow-wrap:anywhere}

/* Sound: name, On/Off switch, volume slider and its number on one row. */
.settings-channel{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,2fr) calc(48 * var(--p));align-items:center;gap:calc(10 * var(--p));
  padding:calc(9 * var(--p)) calc(12 * var(--p));background:#fff8e3;border:calc(2 * var(--p)) solid #dcb784}
.settings-channel-name{font-weight:700;overflow-wrap:anywhere}
.settings-toggle{min-width:calc(66 * var(--p));padding:calc(6 * var(--p)) calc(10 * var(--p));font:700 calc(13 * var(--p))/1 Pixeloid,monospace;text-transform:uppercase;
  background:#f6f0e4;border:calc(2 * var(--p)) solid #cdbfa6;box-shadow:0 calc(2 * var(--p)) #b5a487;color:#6b5d4f}
.settings-toggle[aria-pressed=true]{background:#5aa344;border-color:#2f6b2a;box-shadow:0 calc(2 * var(--p)) #2f6b2a;color:#fff}
.settings-toggle:active{translate:0 1px}
.settings-volume{--fill:50%;width:100%;height:calc(22 * var(--p));margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.settings-volume:disabled{opacity:.45;cursor:default}
.settings-volume::-webkit-slider-runnable-track{height:calc(10 * var(--p));background:linear-gradient(90deg,#f0913a var(--fill),#ead8b8 var(--fill));border:calc(2 * var(--p)) solid #8a5a32}
.settings-volume::-moz-range-track{height:calc(10 * var(--p));background:linear-gradient(90deg,#f0913a var(--fill),#ead8b8 var(--fill));border:calc(2 * var(--p)) solid #8a5a32}
.settings-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:calc(16 * var(--p));height:calc(22 * var(--p));margin-top:calc(-8 * var(--p));background:#fff4d2;border:calc(2 * var(--p)) solid #3e211d;box-shadow:inset 0 calc(-3 * var(--p)) #e2c48f}
.settings-volume::-moz-range-thumb{width:calc(14 * var(--p));height:calc(20 * var(--p));border-radius:0;background:#fff4d2;border:calc(2 * var(--p)) solid #3e211d}
.settings-volume-value{font-weight:700;text-align:right;color:var(--soft)}
.settings-note{font-size:calc(12 * var(--p));color:var(--muted)}

/* A long title (EINSTELLUNGEN, CONFIGURAÇÕES) stays on one line on a phone. */
@media(max-width:560px){
  .settings-head h1{font-size:19px}
  .settings-languages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-channel{grid-template-columns:minmax(0,1fr) auto calc(44 * var(--p));row-gap:calc(8 * var(--p))}
  .settings-channel .settings-volume{grid-column:1 / 3;grid-row:2}
  .settings-channel .settings-volume-value{grid-column:3;grid-row:2}
}