/* Native controls in the theme (v6.43): dropdowns, checkboxes, expanders and scrollbars. Loaded last. The base look (border, fill, text) is a bare element rule, so every component's own colours still win; the dropdown's chevron and room for it use select:not([multiple]), which wins by coming last. A component tints its chevron with --chevron. Where the browser can (appearance: base-select; Chrome, Edge and Chrome for Android), the open list is the game's own menu in the page (below), not the phone's pop-up; elsewhere it stays the phone's or browser's own. */ select{border:1px solid var(--stone-750);border-radius:var(--radius-md);background-color:var(--field);color:var(--text)} select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--chevron,var(--accent-600)) 50%),linear-gradient(135deg,var(--chevron,var(--accent-600)) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer} select:not([multiple]):hover:not(:disabled){border-color:var(--accent-700)} select:focus-visible{outline:2px solid var(--accent);outline-offset:1px} select:disabled{cursor:not-allowed} select option{background:var(--surface);color:var(--text)} .narration-model select{--chevron:var(--nsfw-400)} .narration-model select:not([multiple]):hover:not(:disabled){border-color:var(--nsfw-400)} /* The open list as the game's own menu: below the field (above it when it would not fit), as wide as the field at least, in the field's font, rows tall enough for a thumb, the chosen one marked, scrolling when long. The field keeps its look: one line, cut short with an ellipsis, the chevron above. Where the browser draws it (base-select) these rules do; elsewhere src/ui/select-menu.mjs puts .own-menus on the page and draws the same menu (.select-menu, below). */ @supports (appearance:base-select){ :where(html:not(.own-menus)) select:not([multiple]),:where(html:not(.own-menus)) select:not([multiple])::picker(select){appearance:base-select} :where(html:not(.own-menus)) select:not([multiple]){display:inline-flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} :where(html:not(.own-menus)) select:not([multiple])::picker-icon{display:none} :where(html:not(.own-menus)) select:not([multiple]) selectedcontent{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :where(html:not(.own-menus)) select:not([multiple])::picker(select){margin:4px 0;padding:4px 0;min-width:anchor-size(width);max-width:min(92vw,520px);max-height:min(60dvh,420px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--accent-700);border-radius:var(--ledger-radius,var(--radius-md));background:var(--surface);color:var(--text);box-shadow:0 12px 32px rgb(var(--black-rgb) / .55);font:inherit;line-height:1.3;position-try-order:normal;position-try-fallbacks:flip-block} :where(html:not(.own-menus)) select:not([multiple]) option{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:0;background:transparent;color:var(--text);font:inherit;white-space:normal;cursor:pointer} :where(html:not(.own-menus)) select:not([multiple]) option::checkmark{order:1;margin-left:auto;color:var(--accent);content:"✓"} :where(html:not(.own-menus)) select:not([multiple]) option:hover:not(:disabled),:where(html:not(.own-menus)) select:not([multiple]) option:focus-visible{background:var(--surface-warm);outline:none} :where(html:not(.own-menus)) select:not([multiple]) option:checked{background:var(--accent-950);color:var(--accent);font-weight:600} :where(html:not(.own-menus)) select:not([multiple]) option:disabled{opacity:.45;cursor:default} :where(html:not(.own-menus)) select:not([multiple]) optgroup{padding:6px 0 0;color:var(--muted);font-size:.75em;font-weight:600;letter-spacing:.08em;text-transform:uppercase} :where(html:not(.own-menus)) select:not([multiple]) optgroup+optgroup,:where(html:not(.own-menus)) select:not([multiple]) option+optgroup{margin-top:4px;border-top:1px solid var(--line)} :where(html:not(.own-menus)) select:not([multiple]) optgroup option{color:var(--text);font-size:calc(1em / .75);font-weight:normal;letter-spacing:normal;text-transform:none} :where(html:not(.own-menus)) select:not([multiple]) optgroup option:checked{color:var(--accent)} /* The NSFW narrator's menu in its own colours. */ :where(html:not(.own-menus)) .narration-model select::picker(select){border-color:var(--nsfw-650);background:var(--nsfw-900)} :where(html:not(.own-menus)) .narration-model select option:checked{background:var(--nsfw-950);color:var(--nsfw-200)} :where(html:not(.own-menus)) .narration-model select option::checkmark{color:var(--nsfw-300)} } /* Checkboxes; the on/off rows in Settings are switches (settings-access.css). */ input[type=checkbox]:not([role=switch]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:18px;height:18px;min-height:0;flex:0 0 auto;margin:0;padding:0;border:1px solid var(--stone-600);border-radius:var(--radius-xs);background:var(--field);cursor:pointer} input[type=checkbox]:not([role=switch])::after{content:"";width:5px;height:10px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0} input[type=checkbox]:not([role=switch]):checked{border-color:var(--accent);background:var(--accent)} input[type=checkbox]:not([role=switch]):checked::after{opacity:1} input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* A disabled button looks it (Begin adventure until a character is chosen): faded, and no hover. A component's own disabled look still wins. */ button:disabled{opacity:.5;cursor:not-allowed} button:disabled:is(:hover,:focus-visible){border-color:var(--line)} input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55} .toggle-row>input[type=checkbox]:not([role=switch]){width:20px;height:20px;margin-top:3px} .settings-toggle input[role=switch]::before{transition:transform .15s} /* Expanders: a chevron that turns open. Story chapters keep their own look. */ details>summary{list-style:none;cursor:pointer} details>summary::-webkit-details-marker{display:none} details:not(.story-chapter)>summary::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 2px;border:solid var(--chevron,var(--accent-600));border-width:0 2px 2px 0;vertical-align:middle;transform:rotate(-45deg);transition:transform .15s} details:not(.story-chapter)[open]>summary::before{transform:rotate(45deg)} /* Scrollbars follow the theme where the browser draws them. */ :root{scrollbar-color:var(--stone-700) transparent} @media(prefers-reduced-motion:reduce){details>summary::before,.settings-toggle input[role=switch]::before{transition:none}} /* Focus: tabs drawn without a border show a ring when reached by keyboard. */ .panel-tabs button:focus-visible,.mobile-nav button:focus-visible,.subtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--radius-md)} /* The same menu drawn by src/ui/select-menu.mjs (Firefox, Safari, older Samsung Internet): a popover placed by the script. */ .select-menu{position:fixed;inset:auto;margin:0;padding:4px 0;text-align:left;text-transform:none;letter-spacing:normal;white-space:normal;font-style:normal;text-shadow:none;max-width:min(92vw,520px);max-height:min(60dvh,420px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--accent-700);border-radius:var(--ledger-radius,var(--radius-md));background:var(--surface);color:var(--text);box-shadow:0 12px 32px rgb(var(--black-rgb) / .55);line-height:1.3} .select-menu-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .select-menu-option.active{background:var(--surface-warm)} .select-menu-option[aria-selected=true]{background:var(--accent-950);color:var(--accent);font-weight:600} .select-menu-option[aria-selected=true].active{box-shadow:inset 3px 0 0 var(--accent)} .select-menu-option[aria-selected=true]::after{content:"✓";margin-left:auto;color:var(--accent)} .select-menu-option[aria-disabled=true]{opacity:.45;cursor:default} .select-menu-label{padding:6px 14px 2px;color:var(--muted);font-size:.75em;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .select-menu-group+.select-menu-group,.select-menu-option+.select-menu-group{margin-top:4px;border-top:1px solid var(--line)} .select-menu[data-tone=nsfw]{border-color:var(--nsfw-650);background:var(--nsfw-900)} .select-menu[data-tone=nsfw] .select-menu-option[aria-selected=true]{background:var(--nsfw-950);color:var(--nsfw-200)} .select-menu[data-tone=nsfw] .select-menu-option[aria-selected=true]::after{color:var(--nsfw-300)} /* Model pickers (src/ui/model-picker.mjs): each choice a card, its cover name over the model's own name and the owner's line, then a smarts and a speed meter of three bars and the price, in columns under a header row that names them with icons (the rows leave the icons out). The closed field shows the chosen name, meters and price, the icons beside them. Bars fill with the theme's accent; the NSFW narrator's in its crimson. */ .pick-text{display:block;min-width:0} .pick-name{display:block} .pick-sub{display:block;margin-top:2px;font-size:.9em;font-weight:400;line-height:1.3} .pick-model{display:block;color:var(--text-soft)} .pick-line{display:block;color:var(--muted)} .pick-meter{display:inline-flex;align-items:center;gap:3px;justify-self:center} .pick-bars{display:inline-flex;flex-direction:column-reverse;gap:3px} .pick-bar{display:block;width:14px;height:4px;border-radius:1px;background:var(--stone-750)} .pick-bar.on{background:var(--accent)} .pick-icon.material-symbols-outlined{font-size:15px;color:var(--muted)} .pick-cost{display:inline-flex;align-items:center;gap:2px;justify-self:end;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} .pick-cost .pick-icon.material-symbols-outlined{color:var(--accent)} .pick-cost.free{color:var(--ok);font-size:.85em} .narration-model .pick-bar.on,.select-menu[data-tone=nsfw] .pick-bar.on{background:var(--nsfw-300)} .narration-model .pick-cost .pick-icon.material-symbols-outlined{color:var(--nsfw-300)} option.pick-option .pick-icon,.select-menu-option.pick-option .pick-icon{display:none} .select-menu-head,.select-menu-option.pick-option{display:grid;grid-template-columns:minmax(0,1fr) 30px 30px 34px;gap:6px} .select-menu-head{align-items:center;min-height:30px;padding:4px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.75em;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .select-menu-head .pick-icon.material-symbols-outlined,option.pick-head .pick-icon.material-symbols-outlined{justify-self:center;font-size:17px;color:var(--text-dim)} .select-menu-head .pick-icon:last-child,option.pick-head .pick-icon:last-child{justify-self:end} .select-menu-option.pick-option[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent)} .select-menu-option.pick-option[aria-selected=true]::after{content:none} .select-menu[data-tone=nsfw] .select-menu-option.pick-option[aria-selected=true]{box-shadow:inset 3px 0 0 var(--nsfw-300)} /* Where the game draws the list, the closed field shows the option's label (the cover name) and a face over its right end the meters and price. */ .pick-field{display:grid;min-width:0} .pick-field>select,.pick-field>.pick-face{grid-area:1/1;min-width:0} .pick-field>select{padding-right:150px} .pick-face{display:inline-flex;align-items:center;gap:10px;align-self:center;justify-self:end;margin-right:34px;pointer-events:none} .pick-field:has(>select:disabled)>.pick-face{opacity:.5} @supports (appearance:base-select){ /* Where the browser draws the list: the