/* Top-right buttons (sound, settings, AUTO), the settings menu and the help screen. */
#topright{position:fixed;right:16px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:flex-start;gap:8px}
.icon{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--hud);border:1px solid var(--hud-line);border-radius:10px;color:var(--gold);cursor:pointer}
.icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mute[aria-pressed="true"] .off,#mute[aria-pressed="false"] .on{display:none}
#gear[aria-expanded="true"]{background:var(--gold);color:#3b2410;border-color:transparent}
#settings{position:fixed;right:16px;top:calc(64px + env(safe-area-inset-top,0px));width:min(300px,calc(100vw - 32px));box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;padding:12px 14px;background:var(--hud);border:1px solid var(--hud-line);border-radius:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#settings[hidden]{display:none}
#settings .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#settings .head b{font-size:15px}
#settings .x{width:36px;height:36px;border-radius:8px;border:1px solid var(--hud-line);background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
#settings .row{display:flex;flex-direction:column;gap:6px;font-size:13px}
#settings .row+.row{margin-top:12px}
#langs{display:flex;gap:6px;flex-wrap:wrap}
.lang{min-height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--hud-line);background:rgba(4,20,22,.45);color:var(--ink);font:500 14px 'Kanit',system-ui,sans-serif;cursor:pointer}
.lang[aria-pressed="true"]{background:var(--gold);color:#3b2410;border-color:transparent}
.lang.warn{background:#c0443a;color:#fff;border-color:transparent}
.pill[hidden]{display:none}
.pill{min-height:44px;padding:0 16px;background:var(--hud);border:1px solid var(--hud-line);border-radius:10px;color:var(--ink);font:700 13px 'Kanit',system-ui,sans-serif;letter-spacing:.06em;cursor:pointer}
.pill[aria-pressed="true"]{background:var(--gold);color:#3b2410;border-color:transparent}
#mute[aria-pressed="false"]{opacity:.6}
#help{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;padding:14px 16px 16px;background:rgba(9,38,40,.95);border:1px solid var(--hud-line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:6}
#help[hidden]{display:none}
/* padding inside the width, so the panels never run off a narrow screen */
#help,#shop,#settings{box-sizing:border-box}
#help .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#help .head b{font-size:17px}
#help .x{width:36px;height:36px;border-radius:8px;border:1px solid var(--hud-line);background:transparent;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
#help h3{margin:12px 0 6px;font-size:14px;color:var(--gold)}
#help ul{margin:0;padding-left:18px;font-size:14px;line-height:1.5}
#help li+li{margin-top:4px}
/* the save slots (settings.js) */
#slots{display:flex;flex-direction:column;gap:6px}
#slots .saveslot{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;border:1px solid var(--hud-line);background:rgba(4,20,22,.3)}
#slots .saveslot.cur{border-color:var(--gold)}
#slots .what{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12px}
#slots .what b{font-size:13px}
#slots .saveslot.cur .what b{color:var(--gold)}
#slots .what span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#slots .what i{font-style:normal;opacity:.7;font-size:11px}
#slots .acts{display:flex;flex-direction:column;gap:4px;flex:none}
#slots .acts .lang{min-height:34px;padding:0 10px;font-size:13px}