/* ⚙ ตั้งค่า (client/settings.js): the lobby's (index.html) and the game page's (proto/map.html) one dialog. A big sticker
   frame, the striped yellow title band with its ✕, the sections a rail of sticker tabs down the left (an icon and its
   name), the picked section's cards beside it (scrolling on their own), the page's own line along its foot. The lobby's
   palette on the dialog itself, and every rule under dialog.setdlg, so neither page's own colours or buttons leak in. */
dialog.setdlg {
  --ink: #1A1320; --yel: #F2C94C; --lime: #9BE15D; --cyan: #5FD3FF; --orange: #FF6B35; --navy: #0E2A5A; --navy-hi: #1B4A8A;
  --panel: #172A4F; --bar: #0F1D3A; --line: #2D4679; --text: #EEF1F6; --muted: #B3C0D8; --head: #F2C94C; --val: #9BE15D; --err: #FF8A80; --off-text: #C3CCDD;
  --hatch: repeating-linear-gradient(-45deg, #2D4679 0 8px, #26396A 8px 16px);
  width: min(1000px, calc(100vw - 32px)); height: min(740px, calc(100dvh - 48px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: clip;
  color: var(--text); background: var(--panel); font: 16px/1.5 Kanit, Tahoma, sans-serif; text-align: left;
  border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink), 0 24px 60px rgba(0, 0, 0, .45);
  -webkit-user-select: none; user-select: none;
}
dialog.setdlg[open] { display: flex; flex-direction: column; }
dialog.setdlg::backdrop { background: radial-gradient(ellipse at 50% 40%, rgba(14, 22, 44, .5), rgba(8, 12, 26, .82)); }
@media (prefers-reduced-motion: no-preference) { dialog.setdlg[open] { animation: setIn .2s cubic-bezier(.2, .9, .3, 1.15); } }
@keyframes setIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
dialog.setdlg * { box-sizing: border-box; }
dialog.setdlg [hidden] { display: none !important; } /* (the rows' own display would beat the hidden attribute) */
dialog.setdlg :is(h2, h3, p) { margin: 0; }
dialog.setdlg :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
dialog.setdlg .muted { color: var(--muted); font-size: 14px; }
dialog.setdlg a { color: var(--head); }
dialog.setdlg kbd { padding: 0 5px; color: var(--text); background: var(--bar); border: 1px solid var(--line); border-radius: 4px; font: 13px/1.6 Kanit, Tahoma, sans-serif; }
dialog.setdlg .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
dialog.setdlg input, dialog.setdlg .tin { -webkit-user-select: text; user-select: text; }
/* (a page's own button look stays out: each button here is styled below) */
dialog.setdlg button { margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
dialog.setdlg button:active { transform: none; }

/* the title band */
dialog.setdlg .dlg-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 20px; color: var(--ink); border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .17) 0 10px, transparent 10px 22px), var(--yel); }
dialog.setdlg .dlg-head h2 { flex: 1 1 auto; min-width: 0; padding: 0; color: var(--ink); background: none; font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: .3px; }
dialog.setdlg .dlg-x { flex: none; display: grid; place-items: center; width: 42px; height: 42px; font: 900 20px/1 Kanit, Tahoma, sans-serif; color: var(--ink); background: #fff;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
dialog.setdlg .dlg-x:hover { color: #fff; background: var(--orange); }
dialog.setdlg .dlg-x:active { transform: translateY(3px); box-shadow: none; }

/* the rail and the sections */
dialog.setdlg .set-wrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
dialog.setdlg .set-tabs { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 18px 16px; overflow-y: auto; background: var(--bar); border-right: 3px solid var(--ink); }
dialog.setdlg .set-tabs [role=tab] { position: relative; flex: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 10px; text-align: left;
  font: 900 16px/1.2 Kanit, Tahoma, sans-serif; color: var(--text); background: var(--navy); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
dialog.setdlg .set-tabs svg { flex: none; width: 36px; height: 36px; padding: 5px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(255, 255, 255, .1); border-radius: 10px; }
dialog.setdlg .set-tabs [role=tab]:hover { background: var(--navy-hi); }
dialog.setdlg .set-tabs [role=tab][aria-selected=true] { color: var(--ink); background: var(--yel); box-shadow: 0 0 0 3px #fff, 0 4px 0 3px var(--ink); }
dialog.setdlg .set-tabs [role=tab][aria-selected=true] svg { background: rgba(255, 255, 255, .5); }
dialog.setdlg .set-tabs [role=tab]:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
dialog.setdlg .set-panes { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px; background: radial-gradient(ellipse at 100% 0, rgba(95, 211, 255, .09), transparent 60%); }
dialog.setdlg .set-pane { display: grid; gap: 16px; align-content: start; }
dialog.setdlg .set-pane:focus-visible { outline-offset: -3px; }
dialog.setdlg .scard { display: grid; gap: 12px; padding: 14px 18px 18px; background: rgba(10, 21, 48, .6); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
dialog.setdlg .scard h3 { padding: 0; color: var(--head); background: none; font-size: 19px; font-weight: 900; }
dialog.setdlg .set-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 10px 20px; background: var(--bar); border-top: 3px solid var(--ink); }
dialog.setdlg .set-foot p { font-size: 13px; }

/* the controls: sticker buttons, a name field, the TH | EN switch, switches, sliders with the value on the thumb */
dialog.setdlg .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
dialog.setdlg .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; font: 700 16px Kanit, Tahoma, sans-serif;
  color: var(--ink); background: var(--yel); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); text-decoration: none; }
dialog.setdlg .btn.ghost { background: #fff; box-shadow: 0 3px 0 var(--ink); }
dialog.setdlg .btn:hover { filter: brightness(1.06); }
dialog.setdlg .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
dialog.setdlg [aria-disabled=true] { background: var(--hatch) !important; color: var(--off-text) !important; border: 2px dashed #7C86A0 !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; filter: none !important; }
dialog.setdlg .tin { width: 100%; max-width: 440px; min-height: 54px; padding: 0 10px; font: 700 19px Kanit, Tahoma, sans-serif; color: var(--text); background: #091530; border: 2px solid var(--line); border-radius: 10px; }
dialog.setdlg .langsw { display: inline-flex; gap: 0; justify-self: start; overflow: hidden; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
dialog.setdlg .langsw button { min-height: 54px; min-width: 120px; padding: 0 10px; font: 900 19px Kanit, Tahoma, sans-serif; color: var(--ink); background: none; }
dialog.setdlg .langsw button + button { border-left: 3px solid var(--ink); }
dialog.setdlg .langsw button[aria-pressed=true] { background: var(--yel); cursor: default; }
dialog.setdlg .langsw:empty { display: none; }
dialog.setdlg .tglrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 10px 14px 10px 16px; font-size: 15px;
  background: var(--bar); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
dialog.setdlg .tglrow:hover { border-color: var(--muted); }
dialog.setdlg .tglrow:has(:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
dialog.setdlg .tg-tx { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
dialog.setdlg input.tgl { -webkit-appearance: none; appearance: none; flex: none; width: 62px; height: 36px; margin: 0; vertical-align: middle; cursor: pointer; border: 3px solid var(--ink); border-radius: 999px;
  background: radial-gradient(circle, #fff 0 9.5px, var(--ink) 10px 12.5px, transparent 13px) 2px 50% / 26px 26px no-repeat, #42506E;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3), 0 2px 0 var(--ink); transition: background-position .15s, background-color .15s; }
dialog.setdlg input.tgl:checked { background-position: calc(100% - 2px) 50%; background-color: var(--val); }
dialog.setdlg input.tgl:disabled { opacity: .45; cursor: not-allowed; }
dialog.setdlg input.tgl:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
dialog.setdlg .vols { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 14px 22px; }
dialog.setdlg .volrow { font-size: 16px; font-weight: 700; }
dialog.setdlg .rng { position: relative; display: block; padding: 0 14px; --p: .5; }
dialog.setdlg .rng input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; }
dialog.setdlg .rng input[type=range]:focus-visible { outline: none; }
dialog.setdlg .rng input[type=range]::-webkit-slider-runnable-track { height: 16px; border: 3px solid var(--ink); border-radius: 10px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(90deg, var(--val) calc(var(--p) * (100% - 48px) + 24px), #0A1530 0); }
dialog.setdlg .rng input[type=range]::-moz-range-track { height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(90deg, var(--val) calc(var(--p) * (100% - 48px) + 24px), #0A1530 0); }
dialog.setdlg .rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 32px; margin-top: -8px; border: 0; background: transparent; }
dialog.setdlg .rng input[type=range]::-moz-range-thumb { width: 48px; height: 32px; border: 0; background: transparent; }
dialog.setdlg .rng output { position: absolute; top: 50%; left: calc(14px + 24px + var(--p) * (100% - 28px - 48px)); min-width: 48px; height: 32px; padding: 0 8px; display: grid; place-items: center;
  transform: translate(-50%, -50%); color: var(--ink); background: var(--yel); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink);
  font: 900 14px/1 Kanit, Tahoma, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
dialog.setdlg .rng:has(:focus-visible) output { outline: 3px solid var(--cyan); outline-offset: 2px; }
dialog.setdlg .rng:has(:active) output { background: #FFE14A; }
/* the violence toggle (client/age.js): the age question in its place until it's answered; under 18, off with why */
dialog.setdlg .age-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
dialog.setdlg .age-line { margin: 0; flex: 1 1 12em; font-weight: 700; }
dialog.setdlg .age-btns { display: flex; gap: 8px; }
dialog.setdlg .age-why { margin: 0; color: var(--muted); font-size: 14px; }
dialog.setdlg .tglrow:has(> input:disabled) { cursor: not-allowed; }
/* the game's unlock-all confirm, in place */
dialog.setdlg .unlockask { display: grid; gap: 8px; padding: 10px 12px; background: rgba(242, 201, 76, .07); border: 2px dashed rgba(242, 201, 76, .45); border-radius: 12px; }

/* เป้าเล็ง (the game page): the preview over a sky and ground beside the shape pills, the swatches, the sliders, the outline */
dialog.setdlg .xh-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
dialog.setdlg .xh-preview { height: 220px; display: grid; place-items: center; line-height: 0; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  background: linear-gradient(#A9C6D8 0 50%, #2B231F 50%); }
dialog.setdlg .xh-opts { display: grid; gap: 12px; min-width: 0; }
dialog.setdlg .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; background: var(--bar); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
dialog.setdlg .seg label { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; text-align: center; font-weight: 900; font-size: 14px; line-height: 1.2; cursor: pointer; }
dialog.setdlg .seg label + label { border-left: 3px solid var(--ink); }
dialog.setdlg .seg label:has(:checked) { color: var(--ink); background: var(--head); }
dialog.setdlg .seg label:has(:focus-visible) { outline: 3px solid var(--cyan); outline-offset: -5px; }
dialog.setdlg .xh-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
dialog.setdlg .swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
dialog.setdlg .swatches button { width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
dialog.setdlg .swatches button[aria-pressed=true] { box-shadow: 0 0 0 3px #fff, 0 3px 0 3px var(--ink); }
dialog.setdlg .swatches input[type=color] { width: 48px; height: 36px; padding: 0; background: none; border: 3px solid var(--ink); border-radius: 10px; cursor: pointer; }

/* an upright phone: the tabs a row of icons over the section */
@media (max-width: 700px) and (min-height: 501px) {
  dialog.setdlg { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 16px; }
  dialog.setdlg .set-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  dialog.setdlg .set-tabs { flex-direction: row; gap: 8px; padding: 10px; overflow-x: auto; border-right: 0; border-bottom: 3px solid var(--ink); }
  dialog.setdlg .set-tabs [role=tab] { justify-content: center; min-height: 50px; min-width: 56px; padding: 4px; }
  dialog.setdlg .set-tabs [role=tab] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  dialog.setdlg .set-panes { padding: 12px; }
  dialog.setdlg .xh-grid { grid-template-columns: minmax(0, 1fr); } dialog.setdlg .xh-preview { height: 140px; }
}
/* a phone on its side (the apps: landscape only): nearly the screen, inside the safe area (a notch on either side, the
   home bar: --sa-* from client/shell.js over env()); the rail a column of icons (their names for a screen reader), the
   cards tighter */
@media (max-height: 500px) and (orientation: landscape) {
  dialog.setdlg { width: calc(100vw - 12px - var(--sa-l, env(safe-area-inset-left)) - var(--sa-r, env(safe-area-inset-right)));
    height: calc(100dvh - 10px - var(--sa-t, env(safe-area-inset-top)) - var(--sa-b, env(safe-area-inset-bottom)));
    max-height: calc(100dvh - 10px - var(--sa-t, env(safe-area-inset-top)) - var(--sa-b, env(safe-area-inset-bottom))); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
  dialog.setdlg .dlg-head { padding: 4px 8px 4px 14px; } dialog.setdlg .dlg-head h2 { font-size: 18px; }
  dialog.setdlg .dlg-x { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
  dialog.setdlg .set-wrap { grid-template-columns: 70px minmax(0, 1fr); }
  dialog.setdlg .set-tabs { gap: 5px; padding: 6px 8px; } /* (six tabs fit 375 px tall) */
  dialog.setdlg .set-tabs [role=tab] { justify-content: center; min-height: 40px; padding: 2px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
  dialog.setdlg .set-tabs [role=tab][aria-selected=true] { box-shadow: 0 0 0 3px #fff, 0 3px 0 3px var(--ink); }
  dialog.setdlg .set-tabs [role=tab] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  dialog.setdlg .set-tabs svg { width: 28px; height: 28px; padding: 4px; }
  dialog.setdlg .set-panes { padding: 10px 12px; } dialog.setdlg .set-pane { gap: 10px; }
  dialog.setdlg .scard { gap: 8px; padding: 8px 12px 12px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); } dialog.setdlg .scard h3 { font-size: 15px; }
  dialog.setdlg .tin { min-height: 44px; font-size: 16px; } dialog.setdlg .langsw button { min-height: 44px; font-size: 16px; }
  dialog.setdlg .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
  dialog.setdlg .tglrow { min-height: 52px; padding: 6px 10px 6px 12px; font-size: 13px; } dialog.setdlg .vols { gap: 4px 14px; } dialog.setdlg .volrow { font-size: 14px; }
  dialog.setdlg .set-foot { padding: 2px 12px; } dialog.setdlg .set-foot p { font-size: 11px; line-height: 1.4; } dialog.setdlg .set-foot kbd { font-size: 11px; line-height: 1.4; }  dialog.setdlg .xh-grid { grid-template-columns: 130px minmax(0, 1fr); gap: 10px; } dialog.setdlg .xh-preview { height: 130px; }
  dialog.setdlg .seg label { min-height: 38px; font-size: 13px; } dialog.setdlg .swatches button { width: 30px; height: 30px; } dialog.setdlg .swatches input[type=color] { height: 30px; }
}