/* Innstillinger (js/settings-sheet.js, SA-05). A bottom sheet on the phone, a centred dialog from 768 px. Rows follow the draft's settings list (Standalone App/drafts/app-drafts.html, frame 8): 56 px rows in white cards, a plum icon, the value in muted ink on the right, a chevron where the row leads somewhere. Depends on tokens.css and shell.css (.sheet, .sheet-backdrop, .grabber, .app-modal, .btn); self-contained otherwise, because not every page that opens it loads spill.css. Also carries the one rule "Vis trekk" needs: with the setting off, js/settings-sheet.js puts .loftet-no-move-dots on and the board's destination dots and capture rings are not drawn. */ /* ---------- Vis trekk off ---------- */ .loftet-no-move-dots .board .sq.is-candidate::after { display: none; } /* ---------- The sheet ---------- */ .settings-sheet { padding-top: 20px; background: var(--bg); } /* The round white close sits inside the top corner: the sheet scrolls inside itself, so a close hanging off the edge (as the Play MVP's did) is clipped in half by the sheet's own scroll box. */ .settings-close { position: absolute; top: 8px; right: 10px; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); display: grid; place-items: center; color: var(--muted); } .settings-close svg { width: 22px; height: 22px; } .settings-close:active { transform: scale(var(--press-scale)); } .stg-group { margin-bottom: 14px; } .stg-group-label { margin: 4px 4px 8px; font-size: var(--text-xs); font-weight: var(--font-weight-heading); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .stg-list { background: var(--card); border: var(--card-border-width) solid var(--card-border-color); box-shadow: var(--card-shadow); border-radius: var(--radius-md); overflow: hidden; } /* The game menu shows the four settings and nothing else. */ .settings-sheet.is-game .stg-full-only { display: none; } /* ---------- Rows ---------- */ .stg-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 14px; border-bottom: 1px solid #eee7f0; font-size: var(--text-sm); font-weight: 700; color: var(--ink); text-align: left; text-decoration: none; background: var(--card); transition: background-color .1s; } .stg-row:last-child { border-bottom: 0; } .stg-row[hidden] { display: none; } .stg-row:active { background: #f1ecf3; } .stg-row:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -3px; } .stg-row-icon { width: 24px; flex: none; display: grid; place-items: center; color: var(--plum); } .stg-row-icon svg { width: 22px; height: 22px; } .stg-row-text { flex: 1; min-width: 0; } .stg-row-value { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: var(--font-weight-body); font-size: 14px; font-variant-numeric: tabular-nums; } .stg-row-chev { flex: none; color: var(--track); font-size: 22px; line-height: 1; transition: transform .15s; } .stg-row.is-open .stg-row-chev { transform: rotate(90deg); } .stg-row.is-danger, .stg-row.is-danger .stg-row-icon { color: var(--red); } .stg-row.is-dim { opacity: .45; cursor: default; } .stg-row.is-dim:active { background: var(--card); } .stg-switch { flex: none; width: 46px; height: 26px; border-radius: 13px; background: var(--track); position: relative; transition: background-color .15s; } .stg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; } .stg-switch.is-on { background: var(--newgreen); } .stg-switch.is-on::after { transform: translateX(20px); } /* ---------- Brett og brikker: the picker under its row ---------- */ .stg-themes { padding: 0 14px 4px; border-bottom: 1px solid #eee7f0; background: var(--card); } .stg-themes[hidden] { display: none; } .stg-list > .stg-themes:last-child { border-bottom: 0; } .theme-row { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; /* Room for the selected card's scale and ring, which the scroll box would otherwise clip at the top and at the first card's left edge. */ padding: 9px 8px 12px; margin: 0 -8px; } .theme-card { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 84px; min-height: var(--tap-min); padding: 10px 6px; background: var(--card); border: 3px solid #e6e1ea; border-radius: var(--radius-md); box-shadow: 0 2px 6px #958f8f8a; transition: transform .15s, border-color .15s, box-shadow .15s; } .theme-card:active { transform: scale(.96); } .theme-card.is-selected { border-color: var(--royal); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); transform: scale(1.05); } .theme-card-preview { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 44px; border-radius: var(--radius-sm); background: #eee9f0; } .theme-card-preview img { width: 26px; height: 26px; object-fit: contain; } .theme-card-name { font-size: var(--text-xs); font-weight: var(--font-weight-heading); color: var(--muted); text-align: center; line-height: 1.2; } .theme-card.is-selected .theme-card-name { color: var(--royal); } /* ---------- Konto (BOT-160) ---------- */ /* The panel folds under the Konto row, the same way the piece picker folds under Brett og brikker, so the list stays one screen tall on a phone. It is the one place in the app with a text field a grown-up types in: the fields are 16 px or more so iOS does not zoom the page when one is focused, and every tap target keeps --tap-min. */ .stg-account { padding: 4px 14px 12px; border-bottom: 1px solid #eee7f0; background: var(--card); } .stg-account[hidden] { display: none; } .stg-list > .stg-account:last-child { border-bottom: 0; } .stg-account-form { display: flex; flex-direction: column; gap: 10px; } .stg-account-form[hidden] { display: none; } .stg-account-lead { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--muted); } .stg-field { display: flex; flex-direction: column; gap: 4px; } .stg-field-label { font-size: var(--text-xs); font-weight: var(--font-weight-heading); color: var(--muted); } .stg-field input { min-height: var(--tap-min); padding: 8px 10px; font: inherit; font-size: 16px; color: inherit; background: var(--card); border: 2px solid #e6e1ea; border-radius: var(--radius-md); } .stg-field input:focus-visible { outline: none; border-color: var(--royal); } .stg-account-hint { margin: -4px 0 0; font-size: var(--text-xs); line-height: 1.4; color: var(--muted); } /* The news box is UNTICKED by default and separate from the account itself (owner, 2026-09-12): it is a row of its own, never folded into the sign-in button. */ .stg-tick { display: flex; align-items: center; gap: 10px; min-height: var(--tap-min); font-size: var(--text-sm); line-height: 1.35; } .stg-tick input { width: 22px; height: 22px; flex: none; accent-color: var(--royal); } .stg-account-send { width: 100%; } .stg-account-code[hidden] { display: none; } /* The code: six slots in two groups of three, as the mail prints it (482-913). The real input lies over them, invisible, and takes every tap, paste and code offer; the slots draw its digits (js/settings-sheet.js codeInput). No placeholder: an empty slot is empty. */ .stg-code { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; } .stg-code-slot { display: grid; place-items: center; width: 44px; height: 54px; font-size: 26px; font-weight: var(--font-weight-heading); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--card); border: 2px solid #e6e1ea; border-radius: var(--radius-md); } .stg-code-slot.is-next { border-color: var(--royal); } .stg-code-dash { padding: 0 4px; font-size: 24px; font-weight: var(--font-weight-heading); color: var(--muted); } .stg-field .stg-code-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; font-size: 16px; /* 16 px or iOS zooms in on focus */ color: transparent; caret-color: transparent; background: transparent; opacity: 0; } .stg-account-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* One line for every answer: "check your email", "saved", or what went wrong. It is a live region, so a screen reader says it without the focus moving. */ .stg-account-note { margin: 2px 0 0; min-height: 1.2em; font-size: var(--text-xs); line-height: 1.45; color: var(--muted); } .stg-account-note.is-error { color: var(--red); } /* The account row's value is an email address, which is longer than a piece theme's name: it shortens rather than pushing the chevron off the row. */ #settings-account-row .stg-row-value { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stg-confirm-body { margin: -8px 0 16px; font-size: var(--text-sm); line-height: 1.5; color: var(--muted); text-align: center; } /* ---------- The privacy line and the stamp ---------- */ .stg-foot { padding: 2px 4px 4px; } .stg-privacy { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--muted); } /* The engine stamp. Deliberately quiet: a child never needs it; it answers "did the reload pick up the new bot" at a glance. */ .stg-build { margin: 10px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--muted); user-select: text; -webkit-user-select: text; } /* ---------- Slette alle partier? ---------- */ .stg-confirm { z-index: 31; } .stg-confirm-title { font-size: var(--text-md); font-weight: var(--font-weight-heading); text-align: center; margin: 4px 0 18px; } .stg-confirm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stg-confirm .modal-close svg { width: 20px; height: 20px; } /* Prevent background scroll while the sheet is open (shared lock class, see also css/pregame-sheet.css; harmless if both stylesheets define it). */ body.sheet-open-lock { overflow: hidden; } @media (min-width: 768px) { .settings-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 100%; max-width: 460px; max-height: 88dvh; transform: translate(-50%, -46%) scale(.98); opacity: 0; border-radius: var(--radius-lg); transition: transform .2s ease, opacity .2s ease; pointer-events: none; } .settings-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .settings-sheet .grabber { display: none; } } @media (prefers-reduced-motion: reduce) { .theme-card, .settings-close, .theme-row, .stg-row-chev { transition: none !important; scroll-behavior: auto !important; } }