/* Settings dialog: reuses .rpg-window/.window-* chrome from character-windows.css. */
dialog.settings-window{width:min(560px,94vw);max-height:88dvh}
.settings-body{display:flex;flex-direction:column;gap:14px;padding:18px 22px;overflow:auto}
.settings-panel h3{margin-bottom:10px}
.settings-note{margin:0 0 10px;font-size:12px;line-height:1.7;color:#a9b49e}
.settings-row{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 0;border-bottom:1px solid #99a47c1c}
.settings-row:last-child{border-bottom:0}
.settings-row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.settings-row-text strong{font-weight:400;font-size:15px;color:#f0ecdb}
.settings-row-text small{font-size:11px;color:#9fae96;line-height:1.5}

/* Toggle switch, built from a native checkbox for a11y + keyboard support. */
.settings-toggle{cursor:pointer}
.settings-toggle input[type=checkbox]{position:absolute;opacity:0;width:38px;height:22px;margin:0;cursor:pointer}
.settings-switch{position:relative;flex:0 0 38px;width:38px;height:22px;border-radius:999px;background:#0d1a15;border:1px solid #6f7d63;transition:background .15s,border-color .15s}
.settings-switch::after{content:'';position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:#cfc6a6;transition:transform .15s}
.settings-toggle input:checked+.settings-switch{background:#4c6e3f;border-color:#e1c279}
.settings-toggle input:checked+.settings-switch::after{transform:translateX(16px);background:#ffe9b0}
.settings-toggle input:focus-visible+.settings-switch{outline:2px solid #ffe6a1;outline-offset:2px}

/* Volume sliders */
.settings-slider input[type=range]{flex:1;min-width:0;accent-color:#d8bc78;height:22px}
.settings-slider-value{flex:0 0 42px;text-align:right;font-size:12px;color:#d8bc78;font-variant-numeric:tabular-nums}

.settings-action button{flex:none}
.account-form{display:grid;gap:8px;margin:12px 0}
.account-form label{display:grid;gap:4px;font-size:12px;color:#cfc6a6}
.account-form input{width:100%;min-width:0;box-sizing:border-box;padding:9px;border:1px solid #6f7d63;border-radius:5px;background:#0d1a15;color:#f0ecdb;font:inherit;font-size:16px}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.account-actions button{white-space:normal}
.danger-button{border-color:#a85a4d88!important;color:#f0b9a8!important}
.danger-button:hover{background:linear-gradient(#5a2c22,#2c1512)!important;border-color:#d98a6f!important}

#fps-counter{position:absolute;top:calc(var(--safe-top,0px) + 6px);left:calc(var(--safe-left,0px) + 6px);z-index:var(--z-notice);padding:3px 7px;border-radius:4px;background:#0b1513b8;color:#a5dcaf;font:11px "Noto Sans Thai",Tahoma,system-ui,sans-serif;pointer-events:none;letter-spacing:.3px}

/* Manual override: force-disable transitions/animations regardless of OS prefers-reduced-motion. */
html.force-reduce-motion *,html.force-reduce-motion *::before,html.force-reduce-motion *::after{transition:none!important;animation:none!important}

/* Manual override: keep the touch joystick visible even with a mouse/trackpad pointer. */
#game.force-joystick #joystick{display:block!important}

@media(max-width:750px){
  dialog.settings-window{width:calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 24px)}
  .settings-body{padding:14px}
  .settings-row-text strong{font-size:13px}
}

.language-choice{display:flex;align-items:center;justify-content:space-between;gap:16px}
.language-choice select{min-width:120px;padding:8px 12px;border:1px solid #6f7d63;border-radius:5px;background:#14221d;color:#f0ecdb;font:inherit;font-size:16px}
.language-choice select:focus-visible{outline:2px solid #ffe6a1;outline-offset:2px}
.class-start .language-choice{width:min(100%,320px);margin:0 auto 12px;text-align:left}

/* Scoped settings theme: stays independent of the parchment game windows. */
#game #settings-dialog {
  width:min(900px,calc(100vw - 32px));max-width:900px;height:min(640px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);
  padding:0;gap:0;overflow:hidden;border:1px solid #927649;border-image:none;border-radius:16px;
  background:radial-gradient(ellipse at 100% 0%,#34443755,transparent 65%),#18231e;color:#f6edda;
  box-shadow:inset 0 0 0 4px #101a1555,0 32px 100px #0009;scrollbar-color:#697562 #18231e;
}
#game #settings-dialog[open]{display:flex;flex-direction:column}
#game #settings-dialog::backdrop{background:#0b151a99;backdrop-filter:blur(6px)}
#game #settings-dialog .window-heading{padding:22px 26px;gap:16px;background:linear-gradient(110deg,#24352b,#18241f);border-bottom:1px solid #af91543b;box-shadow:none}
#game #settings-dialog .window-sigil{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;background:#d7b97512;border:1px solid #d7b97555;border-radius:14px;font:26px Georgia;color:#e8ca8c}
#game #settings-dialog .settings-title{display:grid;gap:3px}
#game #settings-dialog .settings-eyebrow{font-size:10px;letter-spacing:2px;color:#bda77a}
#game #settings-dialog h2{margin:0;font-size:27px;line-height:1.3;color:#fff0cb}
#game #settings-dialog .window-close{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:1px solid #bda77a33;background:#ffffff05;border-radius:9px;box-shadow:none;color:#c6cabb;font-size:26px}
#game #settings-dialog .settings-layout{display:grid;grid-template-columns:200px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
#game #settings-dialog .settings-tabs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;padding:20px 12px;background:#101b164d;border-right:1px solid #af915425;overflow:auto}
#game #settings-dialog .settings-tabs button{display:flex;align-items:center;gap:12px;flex:none;width:100%;min-height:48px;padding:10px 14px;border:1px solid transparent;border-radius:9px;background:transparent;box-shadow:none;color:#aebbad;font-size:14px;text-align:left;font-weight:400;line-height:1.4}
#game #settings-dialog .settings-tabs button:hover{background:#c5d2b70a;color:#f6edda}
#game #settings-dialog .settings-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#d9b87525,#d9b8750d);border-color:#d9b87545;color:#f3d69b;box-shadow:inset 3px 0 #dbb96f}
#game #settings-dialog .settings-tab-icon{display:grid;place-items:center;flex:0 0 24px;font-size:21px;color:#cdb77f}
#game #settings-dialog .settings-body{display:block;min-height:0;overflow:auto;overscroll-behavior:contain;padding:28px 30px}
#game #settings-dialog .settings-panel{padding:0;min-height:0;background:none;border:0;box-shadow:none;color:#f6edda}
#game #settings-dialog .settings-panel h3{margin:0 0 8px;padding:0;border:0;color:#f6edda;font-size:23px;font-weight:600;line-height:1.4}
#game #settings-dialog .settings-note{margin:0 0 22px;color:#acb9a9;font-size:12px;line-height:1.8}
#game #settings-dialog .settings-row{position:relative;min-height:64px;margin:0 0 10px;padding:14px 16px;gap:16px;border:1px solid #9ba98926;border-radius:10px;background:linear-gradient(115deg,#ffffff05,#ffffff02);box-sizing:border-box}
#game #settings-dialog .settings-row-text{color:#e9ecdf;font-size:13px;line-height:1.6}
#game #settings-dialog .settings-row-text strong{color:#f3eedf;font-size:14px;font-weight:500}
#game #settings-dialog .settings-row-text small{color:#a4b19f;font-size:11px;line-height:1.7}
#game #settings-dialog .settings-toggle input[type=checkbox]{right:14px;top:50%;transform:translateY(-50%);width:44px;height:44px}
#game #settings-dialog .settings-switch{flex-basis:42px;width:42px;height:24px;background:#0e1713;border-color:#69765e}
#game #settings-dialog .settings-switch::after{top:2px;left:2px;background:#9da992}
#game #settings-dialog .settings-toggle input:checked+.settings-switch{background:#ae9157;border-color:#e0bf79}
#game #settings-dialog .settings-toggle input:checked+.settings-switch::after{transform:translateX(18px);background:#fff0cf}
#game #settings-dialog .settings-slider{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:12px 18px}
#game #settings-dialog .settings-volume-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #d1b36f33;border-radius:10px;background:#d1b36f0c;color:#e2c383;font-size:24px}
#game #settings-dialog .settings-slider-control{display:flex;align-items:center;gap:16px;grid-column:2;min-width:0}
#game #settings-dialog .settings-slider input[type=range]{appearance:none;-webkit-appearance:none;flex:1;width:100%;height:26px;margin:0;border:0;border-radius:99px;background:transparent;cursor:pointer}
#game #settings-dialog .settings-slider input::-webkit-slider-thumb{margin-top:-6px;appearance:none;-webkit-appearance:none;width:18px;height:18px;border:3px solid #efdaaa;border-radius:50%;background:#ad8b49;box-shadow:0 2px 6px #0005}
#game #settings-dialog .settings-slider input::-moz-range-thumb{width:12px;height:12px;border:3px solid #efdaaa;border-radius:50%;background:#ad8b49;box-shadow:0 2px 6px #0005}
#game #settings-dialog .settings-slider-value{flex:0 0 46px;color:#f2d69b;font-size:13px}
#game #settings-dialog .settings-action button,#game #settings-dialog .account-actions button{min-height:40px;padding:8px 12px;background:#283a2c;border:1px solid #8b9a714d;border-radius:7px;box-shadow:none;font-size:12px;color:#e9e8d2}
#game #settings-dialog .settings-action button:hover,#game #settings-dialog .account-actions button:hover{background:#354932;border-color:#bba46b}
#game #settings-dialog .danger-button{color:#f2b6a5!important;border-color:#b577664d!important;background:#733f331c}
#game #settings-dialog .language-choice{margin-top:18px}
#game #settings-dialog .language-choice strong{font-weight:500}
#game #settings-dialog :is(select,.account-form input){border-color:#71816866;border-radius:7px;background:#111e17;color:#f3eedf}
#game #settings-dialog .account-form label{color:#bcc5b3}
#game #settings-dialog .account-panel a{color:#e8ca8c}
#game #settings-dialog .settings-shortcuts{display:grid;gap:8px;margin-top:20px}
#game #settings-dialog .settings-shortcuts>div{display:flex;align-items:center;gap:16px;color:#b4bfad;font-size:12px}
#game #settings-dialog kbd{min-width:112px;box-sizing:border-box;padding:7px 10px;border:1px solid #72806655;border-bottom-width:3px;border-radius:6px;background:#101a16;color:#e4d6b4;text-align:center;font:11px "Noto Sans Thai",system-ui,sans-serif}
#game #settings-dialog .window-footer{display:flex;align-items:center;gap:16px;margin:0;padding:14px 24px;background:#111d18;border-top:1px solid #af91542b;box-shadow:none}
#game #settings-dialog .settings-saved{display:flex;align-items:center;gap:8px;flex:1;color:#a8b79f;font-size:11px}
#game #settings-dialog .settings-saved::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:#a9bd86;box-shadow:0 0 8px #a9bd8633}
#game #settings-dialog .window-footer small{display:block;color:#8e9d89;font-size:11px}
#game #settings-dialog .settings-done{min-height:36px;padding:7px 22px;background:#dcc087;border:1px solid #edd5a0;border-radius:7px;color:#283022;font-size:13px;font-weight:600;box-shadow:inset 0 1px #fff4d7}
#game #settings-dialog .settings-done:hover{background:#edd39a}
#game #settings-dialog :is(button,input,select):focus-visible{outline:2px solid #efd39a;outline-offset:3px}
@media(max-width:650px){
  #game #settings-dialog{width:calc(100vw - 20px);height:min(700px,calc(100dvh - 20px));max-height:calc(100dvh - 20px);border-radius:12px}
  #game #settings-dialog .window-heading{padding:14px 16px;gap:12px}
  #game #settings-dialog h2{font-size:22px}
  #game #settings-dialog .window-sigil{flex-basis:38px;width:38px;height:38px;font-size:23px;border-radius:10px}
  #game #settings-dialog .settings-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  #game #settings-dialog .settings-tabs{flex-direction:row;gap:4px;padding:9px 10px;border-right:0;border-bottom:1px solid #af915425}
  #game #settings-dialog .settings-tabs button{width:auto;min-width:max-content;min-height:44px;padding:8px 12px;gap:7px;font-size:12px}
  #game #settings-dialog .settings-tabs button[aria-pressed=true]{box-shadow:inset 0 -2px #dbb96f}
  #game #settings-dialog .settings-tab-icon{flex-basis:18px;font-size:17px}
  #game #settings-dialog .settings-body{padding:20px 16px}
  #game #settings-dialog .settings-panel h3{font-size:21px}
  #game #settings-dialog .settings-note{margin-bottom:16px}
  #game #settings-dialog .settings-row{padding:12px;gap:12px}
  #game #settings-dialog .settings-slider{padding:14px;column-gap:12px}
  #game #settings-dialog .settings-action{flex-wrap:wrap}
  #game #settings-dialog .settings-action .settings-row-text{flex-basis:180px}
  #game #settings-dialog .window-footer{padding:12px 16px;gap:10px}
  #game #settings-dialog .window-footer small{display:none}
}
@media(max-height:500px) and (min-width:651px){
  #game #settings-dialog .window-heading{padding:10px 20px}
  #game #settings-dialog .settings-body{padding:16px 22px}
  #game #settings-dialog .settings-tabs{padding:10px}
  #game #settings-dialog .settings-tabs button{min-height:40px;padding:7px 12px}
  #game #settings-dialog .window-footer{padding:8px 20px}
}

#game #settings-dialog .settings-slider input::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to right,#ddbc78 var(--volume),#415045 var(--volume))}
#game #settings-dialog .settings-slider input::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(to right,#ddbc78 var(--volume),#415045 var(--volume))}

#game #settings-dialog .feedback-form{display:grid;gap:14px;min-width:0}
#game #settings-dialog .feedback-form label{display:grid;gap:8px;color:#e9ecdf;font-size:13px}
#game #settings-dialog .feedback-form :is(select,textarea){width:100%;box-sizing:border-box;padding:12px;border:1px solid #71816866;border-radius:7px;background:#111e17;color:#f3eedf;font:inherit}
#game #settings-dialog .feedback-form textarea{resize:vertical;min-height:140px;max-height:300px;line-height:1.6}
#game #settings-dialog .feedback-form :is(textarea,button):focus-visible{outline:2px solid #efd39a;outline-offset:3px}
#game #settings-dialog .feedback-form small{color:#acb9a9;text-align:right}
#game #settings-dialog .feedback-form button{min-height:44px;border:1px solid #edd5a0;border-radius:7px;background:#dcc087;color:#283022;font:inherit;cursor:pointer}
#game #settings-dialog .feedback-form :disabled{opacity:.6;cursor:wait}
#game #settings-dialog .feedback-status{margin:0;color:#e8ca8c;overflow-wrap:anywhere;font-size:13px;line-height:1.7}