/*
  THE SIGN-IN AND ONBOARDING PAGES IN THE NEW LOOK (2026-10-08): index-v2.html and onboarding-v2.html.

  A visitor on these pages is not signed in, or is signed in with no profile yet, so there is no
  frame: no side bars, no Friends, no Connect, and no 1728 x 995 picture. The page is a plain page -
  the theme's surface (the felt, in Mahogany) filling the window, and one centred panel in the
  table's dialog style on it. It is as wide as a phone needs and as tall as its content.

  THE THEME is the visitor's own where this browser has one (localStorage "gsb.portal.theme", put on
  <html> as data-v2-theme by the few lines at the top of each page, the same lines gsb-stage-v2.js
  runs) and Mahogany where it has none. Every colour here is a variable of gsb-theme-v2.css.

  THIS FILE IS LOOK ONLY. Every id and every class the two pages' scripts read - .tab / .active,
  .signup-only / .signin-only, .status, .choice, .picture-mode, .avatar-choice / .selected - is
  the old page's; the classes invented here start au-.

  THE STATUS LINE'S COLOUR. Both scripts set it inline, to a red or a green chosen for the old navy
  panel, and the scripts are not edited. So the colour is taken back here: the theme's warning
  colour where the script wrote its red, the panel's quiet text otherwise.
*/
html.au-page{--au-serif:var(--v2-font-head);--au-w:480px;--au-logo-w:290px;--au-logo-h:244px;--au-logo-pic:304px}
html.au-page,html.au-page body{margin:0;min-height:100%;background:#0b3a12}
html.au-page *{box-sizing:border-box}
html.au-page body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:12px 16px;color:var(--v2-ink);
  font-family:var(--v2-font-body);font-size:15px;line-height:1.4;-webkit-text-size-adjust:100%}
/* the surface: the table's own six layers, from the same variables (as .v2-surface in gsb-frame-v2.css) */
html.au-page .au-surface{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    var(--v2-felt-sheen),
    var(--v2-felt-glow),
    var(--v2-felt-edge),
    var(--v2-engrave-art,none) 50% 50% / min(72%,1180px) auto no-repeat,      /* (2026-10-17) the engraved wordmark, once, centred: under the light, on the texture */
    linear-gradient(rgba(0,0,0,var(--v2-felt-dark)),rgba(0,0,0,var(--v2-felt-dark))),
    var(--v2-felt-photo),
    var(--v2-felt-under);
  background-blend-mode:normal,normal,normal,normal,normal,var(--v2-felt-blend),normal}

/* ---------- the panel: the table's dialog ---------- */
html.au-page .au-panel{position:relative;z-index:1;width:min(var(--au-w),100%);padding:18px 24px;border-radius:var(--v2-radius);background:var(--v2-panel);border:1px solid var(--v2-line);box-shadow:var(--v2-shadow);color:var(--v2-ink)}
html.au-page.au-wide{--au-w:680px}
/* THE LOGO: the theme's picture (--v2-logo), which has its ground painted in, so it is a plaque with
   the logo's gold for a rim, as on the home page. The picture is square with an empty margin all
   round; the plaque is a little shorter than it is wide and shows the picture at --au-logo-pic, so
   what is cut is ground only and the tagline is drawn large enough to read. */
/* (2026-10-10) NO FRAME: no rim, no shadow, no ground of its own. The picture has a see-through ground, so the panel shows through it. */
html.au-page .au-logo{width:min(var(--au-logo-w),100%);height:var(--au-logo-h);margin:0 auto 14px;border:0;border-radius:0;
  background:var(--v2-logo) 50% 38% / var(--au-logo-pic) var(--au-logo-pic) no-repeat;box-shadow:none}
html.au-page .au-head{text-align:center;margin:0 0 14px}
html.au-page .au-head :is(h1,h2){margin:0 0 4px;font-family:var(--au-serif);font-size:26px;line-height:1.15;font-weight:700;letter-spacing:.01em;color:var(--v2-accent)}
html.au-page .au-head p{margin:0;font-size:14px;line-height:1.4;color:var(--v2-dim)}

/* ---------- segmented buttons: Sign In / Create Account, and the picture's three ways ---------- */
html.au-page :is(.tabs,.picture-mode-grid){display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 14px;background:var(--v2-well);border:1px solid var(--v2-line);border-radius:var(--v2-radius-sm)}
html.au-page .picture-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html.au-page .tab,html.au-page .picture-mode span{min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 8px;border:0;border-radius:8px;background:none;color:var(--v2-ink);font:inherit;font-size:14px;font-weight:400;cursor:pointer}
html.au-page .tab.active,html.au-page .picture-mode input:checked+span{background:var(--v2-accent);color:var(--v2-on-accent);font-weight:700}
html.au-page .tab:disabled{opacity:.45;cursor:default}
html.au-page .picture-mode{position:relative;display:block;margin:0}
html.au-page .picture-mode input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0}
html.au-page .tab:focus-visible,html.au-page .picture-mode input:focus-visible+span{outline:2px solid var(--v2-accent);outline-offset:2px}

/* ---------- a provider's button keeps the provider's own look ----------
   Google's: its light button - white, a grey hairline, near-black words, the four-colour G.
   Facebook's blue with the white f; Apple's white with the black mark. None of them takes the theme. */
html.au-page .providers{display:grid;gap:8px}
html.au-page .provider{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--v2-radius-sm);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
html.au-page .provider.google{background:#fff;color:#1f1f1f;border:1px solid #747775;font-family:Roboto,Arial,sans-serif;font-weight:500}
html.au-page .provider.facebook{background:#1877f2;color:#fff;border:1px solid #1877f2}
/* Apple's: its white style with a hairline, which holds on a dark panel and on Metallic silver's light one */
html.au-page .provider.apple{background:#fff;color:#000;border:1px solid #000;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-weight:600}
/* THREE PROVIDERS (2026-10-08; there were four until X was taken out): Google across the whole row,
   Facebook and Apple side by side under it. Two rows, so the panel still fits a 995-high window, and
   no cell is empty. A narrow phone has the three in one column. */
html.au-page .providers{grid-template-columns:1fr 1fr}
html.au-page .provider.google{grid-column:1 / -1}
html.au-page .provider{gap:8px;padding:0 6px;font-size:13px;white-space:nowrap}
@media(max-width:460px){html.au-page .providers{grid-template-columns:1fr}html.au-page .provider{font-size:14px}}
html.au-page .provider:hover{filter:brightness(.96)}
html.au-page .provider:focus-visible{outline:2px solid var(--v2-accent);outline-offset:2px}
html.au-page .provider-icon{width:20px;height:20px;display:grid;place-items:center;font-size:17px;font-weight:900;line-height:1}
html.au-page .provider-icon svg{width:20px;height:20px;display:block}
html.au-page .divider{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--v2-dim);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
html.au-page .divider:before,html.au-page .divider:after{content:"";height:1px;background:var(--v2-line);flex:1}

/* ---------- fields, labels, hints ---------- */
html.au-page .form{display:grid;gap:10px}
html.au-page .field{display:block;min-width:0}
html.au-page .field>label{display:block;margin:0 0 5px;font-size:13px;font-weight:700;color:var(--v2-ink)}
html.au-page :is(.field input,.field select){width:100%;height:42px;min-height:42px;padding:0 12px;border-radius:var(--v2-radius-sm);border:1px solid var(--v2-line);background:var(--v2-well);color:var(--v2-ink);font:inherit;font-size:16px;outline:none;box-shadow:none}
html.au-page .field select{-webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--v2-dim) 50%),linear-gradient(135deg,var(--v2-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
html.au-page .field select option{color:#111;background:#fff}
html.au-page :is(.field input,.field select):focus{border-color:var(--v2-accent)}
html.au-page :is(.field input,.field select):disabled{opacity:.6}
html.au-page .field input::placeholder{color:var(--v2-dim);opacity:.8}
html.au-page .hint{margin-top:5px;color:var(--v2-dim);font-size:12px;line-height:1.35}
html.au-page .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
html.au-page .remember{display:flex;align-items:center;gap:8px;color:var(--v2-dim);font-size:13px;cursor:pointer}
html.au-page .remember input{accent-color:var(--v2-accent);width:16px;height:16px;margin:0}
html.au-page .link-btn{border:0;background:none;padding:0;color:var(--v2-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- buttons: the table's, and the one gold one ---------- */
html.au-page :is(.primary,.au-btn){min-height:44px;padding:0 20px;border-radius:var(--v2-radius-sm);border:1px solid var(--v2-line);background:var(--v2-well);color:var(--v2-ink);font:inherit;font-size:15px;font-weight:400;cursor:pointer}
html.au-page .au-btn:hover:not(:disabled){border-color:var(--v2-accent)}
html.au-page :is(.primary,.au-btn.au-gold){background:var(--v2-accent);border-color:var(--v2-accent);color:var(--v2-on-accent);font-weight:700}
html.au-page :is(.primary,.au-btn.au-gold):hover:not(:disabled){filter:brightness(1.08)}
html.au-page :is(.primary,.au-btn):disabled{opacity:.45;cursor:default}
html.au-page :is(.primary,.au-btn):focus-visible{outline:2px solid var(--v2-accent);outline-offset:2px}
html.au-page .primary{width:100%;margin-top:2px}

/* ---------- the status line and the small print ---------- */
html.au-page .status{min-height:20px;font-size:13px;line-height:1.4;color:var(--v2-dim)!important}
html.au-page .status:is([style*="255, 154, 160"],[style*="255, 170, 169"],[style*="ff9aa0"],[style*="ffaaa9"]){color:var(--v2-warn)!important}
html.au-page .au-panel>.status,html.au-page .au-signin .status{margin-top:10px;text-align:center}
html.au-page .legal{margin:8px 0 0;color:var(--v2-dim);font-size:12px;line-height:1.45;text-align:center}
html.au-page .signup-only{display:none}
html.au-page body.signup .signup-only{display:block}
html.au-page body.signup .signin-only{display:none}

/* ---------- onboarding: one step at a time ---------- */
html.au-page .au-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;color:var(--v2-dim);font-size:13px}
html.au-page .au-steps b{color:var(--v2-ink);font-weight:700}
html.au-page .au-pips{display:flex;gap:6px}
html.au-page .au-pip{width:34px;height:6px;padding:0;border:0;border-radius:3px;background:var(--v2-line);cursor:pointer}
html.au-page .au-pip.au-done{background:var(--v2-accent-dim)}
html.au-page .au-pip.au-now{background:var(--v2-accent)}
html.au-page .au-pip:focus-visible{outline:2px solid var(--v2-accent);outline-offset:3px}
html.au-page .section{padding:0;border:0}
html.au-page .section[hidden]{display:none}
html.au-page .section h2{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--v2-line);font-family:inherit;font-size:18px;font-weight:700;line-height:1.2;color:var(--v2-accent)}
html.au-page .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
html.au-page .field.full{grid-column:1 / -1}
html.au-page .name-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* what to play: list rows, each with its own tick */
html.au-page .choice-grid{display:grid;grid-template-columns:1fr;gap:6px}
html.au-page .choice{position:relative}
html.au-page .choice input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
html.au-page .choice label{min-height:44px;margin:0;display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:var(--v2-radius-sm);border:1px solid var(--v2-line);background:var(--v2-well);color:var(--v2-ink);font-size:15px;font-weight:400;cursor:pointer}
html.au-page .choice label:before{content:"";flex:0 0 18px;width:18px;height:18px;border-radius:5px;border:1px solid var(--v2-dim);background:var(--v2-panel)}
html.au-page .choice input:checked+label{border-color:var(--v2-accent);font-weight:700}
html.au-page .choice label:before{display:grid;place-items:center;font-size:13px;font-weight:900;line-height:1;color:var(--v2-on-accent)}
html.au-page .choice input:checked+label:before{content:"\2713";border-color:var(--v2-accent);background:var(--v2-accent)}
html.au-page .choice input:focus-visible+label{outline:2px solid var(--v2-accent);outline-offset:2px}
/* the picture: an upload, or one of the twelve */
html.au-page .picture-panel{margin-top:0;padding:12px;border-radius:var(--v2-radius-sm);background:var(--v2-well);border:1px solid var(--v2-line)}
html.au-page .picture-panel[hidden]{display:none}
html.au-page .picture-panel input[type=file]{width:100%;max-width:100%;color:var(--v2-ink);font:inherit;font-size:14px}
html.au-page .picture-panel input[type=file]::file-selector-button{margin-right:12px;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--v2-line);background:var(--v2-panel);color:var(--v2-ink);font:inherit;cursor:pointer}
html.au-page .avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
html.au-page .avatar-choice{padding:0;border-radius:12px;overflow:hidden;aspect-ratio:1;border:2px solid transparent;background:var(--v2-panel);cursor:pointer}
html.au-page .avatar-choice img{width:100%;height:100%;object-fit:cover;display:block}
html.au-page .avatar-choice.selected{border-color:var(--v2-accent);box-shadow:0 0 0 3px rgba(var(--v2-accent-rgb),.3)}
html.au-page .avatar-choice:focus-visible{outline:2px solid var(--v2-accent);outline-offset:2px}
html.au-page .upload-preview-wrap{margin-top:10px;display:flex;align-items:center;gap:12px;color:var(--v2-dim);font-size:13px}
html.au-page .upload-preview{width:84px;height:84px;object-fit:cover;border-radius:50%;border:2px solid var(--v2-accent)}
html.au-page .upload-preview[hidden]{display:none}
html.au-page .actions{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--v2-line)}
html.au-page .actions .status{flex:1;min-width:0;text-align:left}
html.au-page .actions [hidden]{display:none}

/* ---------- a short window: the logo gives way first; a phone: one column, nothing cut ---------- */
@media(max-height:940px){html.au-page{--au-logo-w:260px;--au-logo-h:218px;--au-logo-pic:272px}}
@media(max-height:820px){html.au-page{--au-logo-w:220px;--au-logo-h:186px;--au-logo-pic:232px}}
@media(max-width:560px){
  html.au-page body{padding:10px;align-items:flex-start}
  html.au-page .au-panel{padding:16px 14px}
  html.au-page{--au-logo-w:250px;--au-logo-h:212px;--au-logo-pic:264px}
  html.au-page .au-head :is(h1,h2){font-size:23px}
  html.au-page .grid,html.au-page .name-row{grid-template-columns:1fr}
  html.au-page .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html.au-page .picture-mode span{font-size:13px;padding:4px}
  html.au-page .actions{flex-wrap:wrap}
  html.au-page .actions .status{flex:1 0 100%;order:-1}
  html.au-page .actions .au-btn{flex:1 1 0}
}

/* ---------- the foot of the sign-in and onboarding panels, and the links in the Terms line ---------- */
html.au-page :is(.legal,.au-foot) a{color:var(--v2-accent);text-decoration:underline;text-underline-offset:3px}
html.au-page .au-foot{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--v2-line);text-align:center;font-size:12px;line-height:1.5;color:var(--v2-dim)}
html.au-page .au-foot a{margin:0 6px;white-space:nowrap}

/* ---------- a page to read: Privacy, Terms, Deleting your data (2026-10-08) ----------
   The same surface and the same panel, wider, starting at the top of the window and as long as
   its words; the window scrolls. */
html.au-page.au-doc{--au-w:860px;--au-logo-w:220px;--au-logo-h:186px;--au-logo-pic:232px}
html.au-page.au-doc body{align-items:flex-start;padding:24px 16px 40px}
html.au-page.au-doc .au-panel{padding:22px 34px 26px}
html.au-page .au-back{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px;font-size:14px}
html.au-page .au-back a,html.au-page .au-text a{color:var(--v2-accent);text-decoration:underline;text-underline-offset:3px}
html.au-page .au-text{font-size:16px;line-height:1.6;color:var(--v2-ink)}
html.au-page .au-text h2{margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--v2-line);font-family:var(--au-serif);font-size:20px;line-height:1.25;font-weight:700;color:var(--v2-accent)}
html.au-page .au-text h3{margin:16px 0 4px;font-size:16px;font-weight:700;color:var(--v2-ink)}
html.au-page .au-text p{margin:0 0 10px}
html.au-page .au-text ul{margin:0 0 10px;padding-left:22px}
html.au-page .au-text li{margin:0 0 5px}
html.au-page .au-text .au-updated{margin:0 0 4px;text-align:center;color:var(--v2-dim);font-size:14px}
html.au-page .au-text table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:15px}
html.au-page .au-text :is(th,td){text-align:left;vertical-align:top;padding:7px 10px 7px 0;border-bottom:1px solid var(--v2-line)}
html.au-page .au-text th{color:var(--v2-dim);font-weight:700;font-size:13px}
@media(max-width:560px){
  html.au-page.au-doc .au-panel{padding:16px 16px 20px}
  html.au-page .au-text{font-size:15px}
  html.au-page .au-text :is(table,tbody,tr,td,th){display:block}
  html.au-page .au-text thead{display:none}
  html.au-page .au-text td{border:0;padding:0 0 2px}
  html.au-page .au-text tr{padding:8px 0;border-bottom:1px solid var(--v2-line)}
  html.au-page .au-text td:first-child{font-weight:700}
}

/* ================= SIGN IN ON A PHONE (2026-10-10): 768 wide or less =================
   The same page and the same things on it, in the order they have: the logo, Sign In / Create
   Account, the three providers one under another, the email form with its links, the small print.
   The panel is the whole screen, not a card on the felt; the document itself scrolls, so a field
   being typed in is brought into view by the browser when the keyboard opens. A field's text is
   16, which is also what stops a phone zooming the page when one is pressed. */
@media(max-width:768px){
  html.au-page:not(.au-doc) body{display:block;padding:0;min-height:100dvh;overflow-x:hidden}
  html.au-page:not(.au-doc) .au-panel{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;
    padding:calc(18px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}
  html.au-page:not(.au-doc) .au-surface{display:none}
  html.au-page:not(.au-doc),html.au-page:not(.au-doc) body{background:var(--v2-panel)}
  html.au-page .au-signin{--au-logo-w:232px;--au-logo-h:196px;--au-logo-pic:244px}
  html.au-page .au-signin .au-logo{flex:0 0 auto;margin-bottom:16px}
  html.au-page .au-signin .tab{min-height:44px;font-size:15px}
  html.au-page .au-signin .providers{grid-template-columns:1fr;gap:10px}
  html.au-page .au-signin .provider,html.au-page .au-signin .provider.google{grid-column:auto;height:52px;font-size:16px}
  html.au-page .au-signin .divider{font-size:14px;letter-spacing:.06em;margin:16px 0 12px}
  html.au-page .au-signin :is(.field input,.field select){height:50px;min-height:50px}
  html.au-page .au-signin .field>label{font-size:14px}
  html.au-page .au-signin .primary{min-height:52px;font-size:16px}
  html.au-page .au-signin .row{min-height:44px}
  html.au-page .au-signin :is(.remember,.link-btn){font-size:14px;min-height:44px}
  html.au-page .au-signin .remember input{width:20px;height:20px}
  html.au-page .au-signin :is(.status,.legal){font-size:14px}
  html.au-page .au-signin .au-foot{margin-top:auto;padding-top:14px;font-size:14px;line-height:2.2}
  html.au-page .au-signin .au-foot a{display:inline-block;margin:0 8px}
}

/* ================= ONBOARDING ON A PHONE (2026-10-10): 768 wide or less =================
   Each of the four steps is a screen: "Step n of 4" over a four-part bar, the step's heading, its
   questions, and Back and Next fixed at the foot. The steps, their fields and what is saved are the
   page's own. A choice from a short list (bridge level, bidding system) is a column of large
   buttons, drawn from its <select> and setting it (.au-pick, built by the page's step script); a
   long list (country, time zone, language) stays a dropdown. */
.au-pick{display:none}
@media(max-width:768px){
  html.au-page .au-onboard{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  html.au-page .au-onboard .au-logo,html.au-page .au-onboard .au-head,html.au-page .au-onboard .au-foot{display:none}
  html.au-page .au-onboard .au-steps{flex-direction:column;align-items:stretch;gap:8px;margin:0 0 18px;font-size:14px}
  html.au-page .au-onboard .au-steps b{font-size:14px}
  html.au-page .au-onboard .au-pips{gap:6px}
  html.au-page .au-onboard .au-pip{flex:1 1 0;width:auto;height:5px;position:relative}
  html.au-page .au-onboard .au-pip::after{content:"";position:absolute;inset:-14px 0}
  html.au-page .au-onboard .au-pip.au-done{background:var(--v2-accent)}
  html.au-page .au-onboard .section h2{margin:0 0 16px;padding:0;border:0;font-family:var(--au-serif);font-size:25px;line-height:1.2;color:var(--v2-ink)}
  html.au-page .au-onboard .grid,html.au-page .au-onboard .name-row{grid-template-columns:1fr;gap:14px}
  html.au-page .au-onboard .field>label{font-size:14px}
  html.au-page .au-onboard .hint{font-size:14px}
  html.au-page .au-onboard :is(.field input,.field select){height:50px;min-height:50px}
  html.au-page .au-onboard .field select{background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px}
  html.au-page .au-onboard .choice label{min-height:52px;font-size:16px}
  html.au-page .au-onboard .field.au-picked select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0}
  html.au-page .au-onboard .au-pick{display:grid;gap:8px}
  html.au-page .au-onboard .au-pick button{min-height:52px;padding:6px 16px;border-radius:var(--v2-radius-sm);border:1px solid var(--v2-line);background:var(--v2-well);color:var(--v2-ink);font:inherit;font-size:16px;text-align:left;cursor:pointer}
  html.au-page .au-onboard .au-pick button.on{border:2px solid var(--v2-accent);padding:5px 15px;font-weight:700}
  html.au-page .au-onboard .actions{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;flex-wrap:wrap;gap:10px;background:var(--v2-panel);border-top:1px solid var(--v2-line);
    padding:10px calc(18px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}
  html.au-page .au-onboard .actions .status{flex:1 0 100%;order:-1;min-height:0;font-size:14px}
  html.au-page .au-onboard .actions .status:empty{display:none}
  html.au-page .au-onboard .actions .au-btn{min-height:52px;font-size:16px;flex:1 1 0}
  html.au-page .au-onboard .actions .au-btn.au-gold{flex:2 1 0}
  /* the last step's button: its words here are "Start playing" (the page's script writes its own on the button, for a computer) */
  html.au-page .au-onboard #saveBtn{font-size:0}
  html.au-page .au-onboard #saveBtn::after{content:"Start playing";font-size:16px}
  html.au-page .au-onboard #saveBtn:disabled::after{content:"Saving\2026"}
}

/* ================= CHOOSING A PICTURE (2026-10-10), on a phone and on a computer =================
   The Profile picture step. It was three modes to switch between - upload, avatar, none - and the
   avatars were seen only after choosing the second. Now the site's own avatars are there at once: a
   grid of round pictures, the chosen one ringed; under it "Or upload your own picture" and "No
   picture". The three radio buttons are still in the page, not drawn, and are what is set - so what
   the page's own script reads and saves is exactly what it was. THE GRID SHOWS WHATEVER AVATARS THE
   PAGE HAS; where they are more than two rows hold, the last place is "More" and shows the rest. */
html.au-page .au-onboard .picture-mode-grid{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;opacity:0;pointer-events:none}
html.au-page .au-onboard #avatarPanel,html.au-page .au-onboard #avatarPanel[hidden]{display:block;padding:0;border:0;background:none}
html.au-page .au-onboard .avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:560px;margin:0 auto}
html.au-page .au-onboard :is(.avatar-choice,.au-av-more){aspect-ratio:1;border-radius:50%;border:3px solid transparent;padding:0;overflow:hidden;background:var(--v2-well);cursor:pointer}
html.au-page .au-onboard .avatar-choice.selected{border-color:var(--v2-accent);box-shadow:0 0 0 3px rgba(var(--v2-accent-rgb),.35)}
html.au-page .au-onboard .avatar-grid:not(.au-all) .avatar-choice.au-extra{display:none}
html.au-page .au-onboard .au-av-more{border:1px dashed var(--v2-accent-dim,var(--v2-line));color:var(--v2-accent);font:inherit;font-size:14px;font-weight:700}
html.au-page .au-onboard .avatar-grid.au-all .au-av-more{display:none}
html.au-page .au-onboard .au-av-acts{display:grid;gap:8px;max-width:560px;margin:16px auto 0}
html.au-page .au-onboard .au-av-acts .au-btn{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:15px;font-weight:700;border-color:var(--v2-accent);background:none;text-align:center}
html.au-page .au-onboard .au-av-acts .au-av-none{border-color:var(--v2-line);font-weight:400}
html.au-page .au-onboard .au-av-acts .au-av-none.on{border-color:var(--v2-accent);color:var(--v2-accent)}
html.au-page .au-onboard #uploadPanel{max-width:560px;margin:12px auto 0}
html.au-page .au-onboard #uploadPanel input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html.au-page .au-onboard #uploadPanel .upload-preview-wrap{margin-top:0;font-size:14px}
@media(max-width:768px){
  html.au-page .au-onboard .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}