/* The shell: the page, its regions, the parts many screens share and the meta screens (specs/shell.md), as design/_shared/base.css draws them. Structure only: every colour, font, radius, shadow and texture is a token. */

/* The viewport is the device's screen: one background, the column's, as design/home_wide.html draws it */
html, body { margin: 0; height: 100%; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: var(--font-size-m); }
/* The stage: the one canvas, fixed over the viewport above the screens; it never catches a pointer */
#game { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#game canvas { display: block; }
#view { position: relative; height: 100vh; height: 100dvh; }

/* A region: the phone's column, widened a little and centred on a viewport wider than a phone; or the whole viewport */
.region { position: relative; height: 100%; overflow: hidden; background: var(--color-bg); }
.region *, .region *::before, .region *::after { box-sizing: border-box; }
.region--column { width: 100%; max-width: var(--size-column); margin: 0 auto; }
.region--column.region--wide, .region--static { max-width: var(--size-column-wide); }
.region--full { width: 100%; }

/* A screen that is not the table: its bar, a scrolling body, a footer that stays */
.page { display: flex; flex-direction: column; height: 100%; }
.bar { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; flex: none; }
.bar__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-control); color: var(--color-text-muted); font-size: var(--font-size-l); }
.bar__title { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: var(--font-size-m); font-weight: 700; overflow-wrap: anywhere; }
.page__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.page__footer { flex: none; padding: 12px 16px 20px; border-top: 1px solid var(--color-line); background: var(--color-bg); }

/* A sheet over the dimmed region; Back closes it, a tap on the scrim too unless the sheet says otherwise */
.scrim { position: absolute; inset: 0; z-index: 2; background: var(--color-scrim); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 28px; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--color-surface-raised); box-shadow: var(--shadow-sheet); }
.sheet__title { margin: 0; font-size: var(--font-size-xl); font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.sheet__note { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-s); }
.sheet__note--refused { color: var(--color-danger); font-weight: 600; }
/* A sheet's actions stacked, the primary full width above the other */
.sheet__stack { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.sheet__actions--one { grid-template-columns: 1fr; }
.sheet__actions[hidden] { display: none; }

/* A switch: on, off, disabled */
.switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--color-surface-raised); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--color-text); }
.switch--on { background: var(--color-blue); }
.switch--on::after { left: auto; right: 3px; }
.switch:disabled { cursor: default; background: var(--color-surface); }
.switch:disabled::after { background: var(--color-disabled-text); }

/* A segmented choice: two to four options, one on */
.segmented { display: flex; padding: 3px; gap: 3px; border-radius: var(--radius-control); background: var(--color-bg); }
.segmented__option { flex: 1; height: 34px; padding: 0 4px; border-radius: var(--radius-tile); color: var(--color-text-muted); font-size: var(--font-size-s); font-weight: 600; white-space: nowrap; }
.segmented__option--on { background: var(--color-surface-raised); color: var(--color-text); }

/* A field: its label, an input, a note or a refusal under it */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; }
.field__input { height: 48px; padding: 0 14px; border: 0; border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); font: inherit; font-weight: 600; box-shadow: inset 0 0 0 2px var(--color-line); }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-blue); }
.field--refused .field__input { box-shadow: inset 0 0 0 2px var(--color-danger); }
.field__note { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.field__note--refused { color: var(--color-danger); font-weight: 600; }

/* The name field: the name typed, the tag beside it, the rules' line or a refusal under it (design/lobby_nickname.html) */
.name-field { display: flex; flex-direction: column; gap: 10px; }
.name-field__box { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: var(--radius-control); background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-blue); font-size: var(--font-size-l); font-weight: 700; }
.name-field__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; }
.name-field__input:focus { outline: none; }
.name-field__tag { flex: none; color: var(--color-text-muted); font-weight: 600; }
.name-field--refused .name-field__box { box-shadow: inset 0 0 0 2px var(--color-danger); }
.name-field__note { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.name-field--refused .name-field__note { color: var(--color-danger); font-weight: 600; }

/* Grouped rows: a group's heading, the rows as one rounded list */
.group { margin: 10px 0 -6px; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.rows { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; border-radius: var(--radius-control); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; background: var(--color-surface); text-align: left; }
.row__number { width: 22px; flex: none; color: var(--color-text-muted); font-size: var(--font-size-s); font-variant-numeric: tabular-nums; }
.row__title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.row__value { min-width: 0; max-width: 50%; color: var(--color-text-muted); font-size: var(--font-size-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__chevron { flex: none; color: var(--color-text-muted); }
.row--danger .row__title { color: var(--color-danger); }
.settings__group { display: flex; flex-direction: column; gap: 14px; }
.settings__version { margin: 4px 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* The flag choice: the UI languages inline, one on */
.flag-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: var(--radius-control); background: var(--color-surface); }
.flag-choice__option { display: flex; justify-content: center; padding: 12px 0; border-radius: var(--radius-control); }
.flag-choice__flag { display: block; width: 52px; height: 35px; opacity: 0.55; }
.flag-choice__option--on { background: var(--color-surface-raised); box-shadow: inset 0 0 0 2px var(--color-blue); }
.flag-choice__option--on .flag-choice__flag { opacity: 1; }

/* The match row: the player's turn, waiting, a live clock, unavailable offline, with an action */
.match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.match-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--radius-control); background: var(--color-surface); text-align: left; }
.match-row--mine { background: var(--color-surface-bright); }
.match-row__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.match-row__dot--online { background: var(--color-green); }
.match-row__dot--local { background: var(--color-text-muted); }
.match-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.match-row__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row__sub { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row__time { flex: none; color: var(--color-text-muted); font-size: var(--font-size-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-row--mine .match-row__time { color: var(--color-text); font-weight: 700; }
.match-row__time--live, .match-row--mine .match-row__time--live { color: var(--color-green); }
.match-row__action { flex: none; height: 34px; padding: 0 14px; border-radius: var(--radius-control); background: var(--color-surface-raised); font-size: var(--font-size-s); font-weight: 700; }
.match-row--mine .match-row__action { background: none; color: var(--color-text-muted); }
.match-row--unavailable, .match-row--unavailable .match-row__time, .match-row--unavailable .match-row__sub { color: var(--color-disabled-text); cursor: default; }
.match-row--unavailable .match-row__dot { background: var(--color-disabled-text); }
.match-row__action:disabled { color: var(--color-disabled-text); cursor: default; }

/* The home's menu buttons: the primary with a hint, a secondary, greyed */
.menu-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 64px; padding: 6px 12px; border-radius: var(--radius-control); border-image: var(--frame-button); font-size: var(--font-size-l); font-weight: 700; text-align: center; }
.menu-button--primary { background: var(--color-blue); color: var(--color-tile-text); }
.menu-button--secondary { background: var(--color-surface); color: var(--color-text); }
.menu-button:disabled { background: var(--color-surface); color: var(--color-disabled-text); cursor: default; }
.menu-button__hint { font-size: var(--font-size-xs); font-weight: 500; opacity: 0.75; }

/* The home: the title, the player's matches or the title art above, the menu at the bottom */
.home { display: flex; flex-direction: column; height: 100%; padding: 28px 16px 24px; }
.home__title { margin: 8px 0 20px; text-align: center; font-family: var(--font-board); font-size: var(--font-size-xl); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.home__space { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.home__matches { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.home__group { margin: 8px 0 0; }
.home__art { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0 -16px; background: var(--texture-title-art); }
.home__board { width: 62%; max-width: 260px; aspect-ratio: 1; border-radius: var(--radius-board); box-shadow: var(--shadow-title-board); }
.home__menu { flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.home__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home__links .menu-button { font-size: var(--font-size-m); }

/* A How to play topic: its step, a small board running its lesson with a replay button, a caption, a few paragraphs, the neighbouring topics */
.lesson__step { margin: 8px 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.lesson__board { position: relative; align-self: center; width: min(100%, 260px); flex: none; }
.lesson__slot { display: block; width: 100%; aspect-ratio: 1; }
/* Beside the board's corner, never under it: the board is drawn on the stage, above the DOM */
.lesson__replay { position: absolute; right: -44px; bottom: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-surface-raised); color: var(--color-text); }
.lesson__caption { min-height: 1.4em; margin: -4px 0 0; text-align: center; color: var(--color-traced); font-size: var(--font-size-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.lesson__text { margin: 0; line-height: 1.5; }
.lesson__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lesson__nav .button { width: 100%; min-width: 0; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.button__icon--after { margin: 0 0 0 6px; }

/* About game */
.about__title { margin: 12px 0 0; }
.about__version { margin: -8px 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.about__section { display: flex; flex-direction: column; gap: 6px; }
.about__heading { margin: 0; }
.about__text { margin: 0; line-height: 1.5; }

/* A page of text: the privacy policy */
.prose { line-height: 1.55; }
.prose h2, .prose h3 { margin: 18px 0 6px; font-size: var(--font-size-m); }
.prose p { margin: 0 0 8px; }
.prose ul { margin: 0 0 8px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--color-blue); }
.prose__updated { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* The Android app's update screen: the title art fills it, the message and the one action at the bottom (journal 014, Q6, Q7) */
.update__body { padding: 0; }
.update__art { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--texture-title-art); }
.update__footer { display: flex; flex-direction: column; gap: 12px; }
.update__text { margin: 0; text-align: center; line-height: 1.5; }
.update__note { margin: 0; padding: 14px 16px; border-radius: var(--radius-control); background: var(--color-surface); text-align: center; line-height: 1.5; }

/* The Android app's notice permission: a sheet over the screen the Daily game was made from (journal 014, Q1, Q5) */
.notices__text { margin: 0 0 8px; text-align: center; line-height: 1.5; }