/* Atless — the screen, and the globe's colours.

   THE GLOBE READS ITS COLOURS FROM CUSTOM PROPERTIES on the document root
   (web/src/al_globe.js palette()), as it did in the lab it came from
   (labs/blank-globe/style.css). The tokens below are that file's, for the two
   looks the site plays — Solid while the round is on, and the Classic atlas
   it lays the map on after the guess — dark first, the light theme under it.
   The names are the lab's (--solid-*, --map-*, --pin…) and clash with nothing
   in theme.css; a theme change there is one block here.

   EVERYTHING ELSE on the screen is the site's: the .gg-* card furniture from
   gauntlet.css, the theme's panel, border and text tokens, Archivo. LOADED
   AFTER gauntlet.css AND BEFORE responsive.css — see the tag order in
   index.html. */
:root{
  --globe-lit:#5A6596; --globe-mid:#2B3156; --globe-dark:#0E0F1D;
  --globe-line:rgba(214,226,255,.17); --globe-equator:rgba(184,230,43,.62);
  --globe-glow:120,168,255; --globe-shade:.55; --pin:#B8E62B; --pin-ink:#14121F;
  --target:#F0B23C; --hint-ring:#7CC8FF; --city:#FFFFFF; --city-ring:#57B894; --label:#FFFFFF;
  --label-halo:rgba(12,10,22,.88); --arc:#B8E62B; --north:#F0B23C; --north-ink:#14121F;
  --map-ocean:rgba(20,34,78,.55); --map-land:rgba(160,182,236,.42);
  --map-line:rgba(214,226,255,.55); --hl-target:rgba(240,178,60,.45);
  --hl-pin:rgba(184,230,43,.34); --solid-base:#E2DCCD; --solid-line:rgba(64,52,36,.28);
  --solid-equator:rgba(74,110,11,.9); --solid-shadow:rgba(0,0,0,.55);
  --solid-edge:rgba(0,0,0,.35); --solid-arc:#4A6E0B; --solid-ocean:#A3BFD4;
  --solid-land:#EEE5CC; --solid-map-line:rgba(70,58,40,.55);
  --map-tones:#A0B6EC6B #B0BEEC66 #8CA6E270 #AAB0E266 #96C0EA6B #B8C4F061;
  --map-inner:rgba(214,226,255,.4); --map-coast:rgba(120,170,255,.12);
  --map-map-lake:rgba(26,44,100,.75); --map-map-river:rgba(124,200,255,.5);
  --map-map-label:rgba(225,233,255,.85); --map-map-halo:rgba(10,12,24,.75);
  --map-sea-label:rgba(150,190,255,.65); --map-town:#FFFFFF;
  --solid-tones:#EFDCC6 #ECE5C2 #DDE6C8 #E2DAE9 #F0D9D2 #D8E3E8;
  --solid-inner:rgba(70,58,40,.38); --solid-coast:rgba(232,244,250,.42);
  --solid-map-lake:#9DBBD2; --solid-map-river:rgba(52,112,170,.6);
  --solid-map-label:rgba(58,46,32,.85); --solid-map-halo:rgba(255,252,244,.75);
  --solid-sea-label:rgba(46,86,128,.75); --solid-town:#2A261E; --river:#7CC8FF;
  --river-halo:rgba(8,18,40,.6); --lake:rgba(92,170,255,.6); --lake-line:#9AD4FF;
  --solid-river:#2C7FD0; --solid-river-halo:rgba(255,255,255,.6); --solid-lake:#7FB6E6;
  --solid-lake-line:#2C6FB3; --water-label:#A8DCFF;
}
html[data-theme="light"]{
  --globe-lit:#FFFFFF; --globe-mid:#E4E0D4; --globe-dark:#A7A190;
  --globe-line:rgba(30,40,50,.17); --globe-equator:rgba(74,110,11,.8); --globe-glow:96,132,210;
  --globe-shade:.30; --target:#C25A3A; --city-ring:#2F7359; --label:#0D1A1E;
  --label-halo:rgba(255,255,255,.92); --arc:#4A6E0B; --north:#F0B23C;
  --map-ocean:rgba(118,160,208,.40); --map-land:rgba(236,226,196,.85);
  --map-line:rgba(60,70,60,.45); --map-inner:rgba(60,70,60,.25);
  --map-tones:#ECE2C4D9 #E6DEB8D9 #F0E6CED9 #E2DCC0D9 #EADFC8D9 #F2EAD2D9;
  --map-coast:rgba(255,255,255,.4); --map-map-lake:rgba(118,160,208,.6);
  --map-map-river:rgba(40,110,190,.55); --map-map-label:rgba(30,40,44,.8);
  --map-map-halo:rgba(255,255,255,.8); --map-sea-label:rgba(30,80,130,.7); --map-town:#1A2226;
  --hl-target:rgba(194,90,58,.40); --hl-pin:rgba(74,110,11,.32); --solid-base:#D8D1BF;
  --solid-shadow:rgba(60,50,30,.38); --solid-edge:rgba(60,50,30,.35); --river:#1F78C8;
  --river-halo:rgba(255,255,255,.7); --lake:rgba(60,140,220,.55); --lake-line:#1F6AB0;
  --water-label:#16558F;
}

/* ---- the game screen -----------------------------------------------------
   One screen that does not scroll while a round is on: the globe takes what
   the target card and the dock leave, as in the lab. On a computer the card
   and the dock stand to the right of the globe; a phone stacks them. */
/* THE `hidden` ATTRIBUTE WINS over the display rules below. The lab's sheet
   had [hidden]{display:none !important} for the page; this site has no such
   rule, and without it a flex or grid rule on the sheet, the result card or
   the button row would draw them while they are marked hidden. */
#alScreen [hidden]{display:none !important}
#alScreen .al-wrap{display:block;max-width:1100px}
.al-stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"globe target" "globe dock";border:1px solid var(--border);border-radius:16px;
  overflow:hidden;background:var(--panel)}
.al-target{grid-area:target;padding:18px 20px 14px;border-left:1px solid var(--border);border-bottom:1px solid var(--border)}
.al-k{font:800 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.al-name{font:900 clamp(24px,2.6vw,34px)/1.05 var(--display);letter-spacing:-.01em;margin-top:6px;overflow-wrap:anywhere}
.al-country{font-weight:700;font-size:15px;color:var(--text-soft);margin-top:4px}
.al-stats{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.al-stat{display:flex;flex-direction:column;gap:4px}
.al-stat b{font:900 18px/1 var(--display);font-variant-numeric:tabular-nums}
.al-mode{font:800 12px/1 var(--mono);letter-spacing:.08em;color:var(--text-soft)}
/* km or miles: a small pill, the settings' shape */
.seg.al-units{display:flex;gap:3px;padding:3px;border-radius:11px;background:var(--field);margin-left:auto}
.seg.al-units button{border:0;background:transparent;color:var(--text-muted);cursor:pointer;
  font:800 12.5px/1 var(--font);padding:8px 9px;border-radius:8px;min-width:38px}
.seg.al-units button[aria-checked="true"]{background:var(--gold);color:var(--accent-ink);box-shadow:0 2px 0 var(--gold-sh)}

.al-globe{grid-area:globe;position:relative;min-height:0;min-width:0;height:min(64vh,560px);overflow:hidden;background:var(--page)}
#alCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#alCanvas.can-pin{cursor:crosshair}
#alCanvas.is-grabbing{cursor:grabbing}
#alCanvas:focus-visible{box-shadow:inset 0 0 0 2px rgba(184,230,43,.35)}
#alCanvas.al-fresh{animation:alFresh .35s ease-out}
@keyframes alFresh{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.al-ctrls{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px}
.al-ctrl{width:42px;height:42px;border-radius:12px;border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);padding:0;line-height:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.al-ctrl:hover{background:var(--panel-2)}
.al-ctrl:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
/* THE ICONS ARE DRAWN, centred by their geometry (27 Oct 2026: "Make the ?, N,
   +, and - icons centered in their buttons"): strokes in the text colour, the
   ?'s dot filled; the compass's needle amber to the north, its N at that tip. */
.al-ico{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.al-help .al-ico circle{fill:currentColor;stroke:none}
.al-compass .al-ico{width:26px;height:26px}
.al-compass .al-ico .n{stroke-width:1.6}
.al-compass .al-ico .tip{fill:#F0B23C;stroke:none}
.al-compass .al-ico .tail{fill:currentColor;opacity:.55;stroke:none}
.al-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font:700 13px/1 var(--font);color:var(--text-soft);
  background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:9px 14px;white-space:nowrap;
  pointer-events:none;transition:opacity .4s}
.al-hint:empty{opacity:0}
.al-toast{position:absolute;left:50%;top:12px;transform:translate(-50%,-8px);opacity:0;font:800 14px/1 var(--font);
  background:var(--panel);border:1px solid var(--border-strong);border-radius:999px;padding:10px 16px;white-space:nowrap;
  pointer-events:none;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:opacity .2s,transform .2s;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.al-toast.is-on{opacity:1;transform:translate(-50%,0)}
.al-toast .cost{color:var(--amber);margin-left:6px}

.al-dock{grid-area:dock;display:flex;flex-direction:column;min-height:0;gap:12px;padding:12px 20px 18px;border-left:1px solid var(--border)}
.al-chips{display:flex;flex-direction:column;gap:8px;min-height:0}
.al-chips:not(:empty)::before{content:"Reference city";font:800 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.al-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);background:var(--sheet);color:var(--text);font:700 14px/1.15 var(--font)}
.al-chip:hover{background:var(--panel-2)}
.al-chip i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--mint);flex:none}
.al-chip .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-chip .ct{color:var(--text-muted);font-weight:500}
.al-chip .cost{color:var(--amber);font-variant-numeric:tabular-nums}
/* LOCK IN TAKES THE ROW (28 Oct 2026): "the 'lock in' button will extend wider
   to be where it currently is plus in the place of the 'reveal' button" — the
   reveal is the box above it now (.al-rev). */
.al-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:auto}
.al-btn{width:100%;white-space:nowrap}
.al-result{display:flex;flex-direction:column;gap:10px;margin-top:auto}
/* ONE DISTANCE, IN THE PLAYER'S UNITS (28 Oct 2026). The owner: "I don't want
   the KM and miles number for my guess both displayed on the screen - if I have
   it set to KM show KM and if I have it set to miles show only miles." */
.al-dist{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.al-dist b{font:900 28px/1 var(--display);font-variant-numeric:tabular-nums}
.al-lines{margin:0;display:flex;flex-direction:column;gap:6px}
.al-lines div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;font-size:14px}
.al-lines dt{color:var(--text-soft)}
.al-lines dd{margin:0;font-weight:800}
.al-lines dd small{color:var(--text-muted);font-weight:700;font-size:.86em}
.al-rtotal{padding-top:8px;border-top:1px solid var(--border)}
.al-rtotal dt{color:var(--text);font-weight:800}
.al-rtotal dd{font:900 22px/1 var(--display);color:var(--gold)}

/* ---- the reveal box, on the dock (28 Oct 2026) ----------------------------
   It was a sheet behind a Reveal button; the owner: "it would be more
   straightforward if the box to start typing a city to reveal was already on
   the screen." A heading, the cost sentence small under it (the owner chose to
   keep it), the box, and from the third letter the cities under the box,
   three rows at a time (atless.js alRevList). Gone once a city is revealed:
   its chip, above, is what is left of the reveal (.al-chips). */
.al-rev{display:flex;flex-direction:column;gap:6px;scroll-margin-top:10px}
.al-rev-h{display:block;font:900 15px/1.2 var(--display);color:var(--text);margin:0}
.al-sub{color:var(--text-muted);font-size:12.5px;margin:0 0 4px;line-height:1.4}
.al-sub b{color:var(--text-soft)}
.al-rev-field{position:relative}
.al-search{width:100%;font:700 16px/1 var(--font);color:var(--text);background:var(--field);border:1px solid var(--border-strong);
  border-radius:12px;padding:12px 13px;outline:none}
.al-search:focus{border-color:var(--gold)}
/* THE WORD UNDER THE BOX (atless.js alRevSay): "Already revealed Paris this
   game", or why a reveal did not go through — the cost's amber. No height when
   it has nothing to say, and kept on the page so a screen reader hears it come. */
.al-rev-msg{margin:0;color:var(--amber);font:700 12.5px/1.35 var(--font)}
.al-rev-msg:not(:empty){margin-top:6px}
/* THREE ROWS AT A TIME, THE REST BY SCROLLING (the owner: "a drop down
   underneath the box that only shows 3 at a time and they can scroll to see
   others"): every row one line, 38px, and the list three of them tall plus its
   padding. Positioned, so a row's offsetTop is the list's own (alRevMove). */
.al-revlist{list-style:none;margin:6px 0 0;padding:4px;position:relative;overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(3 * 38px + 8px);background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.22)}
.al-revlist li{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:9px;cursor:pointer;white-space:nowrap}
.al-revlist li .nm{font-weight:800;flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.al-revlist li .ct{color:var(--text-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.al-revlist li .pop{font:700 11px/1 var(--mono);color:var(--text-muted);font-variant-numeric:tabular-nums;flex:none}
.al-revlist li.is-on,.al-revlist li:hover{background:var(--panel-2)}
.al-revlist li.is-more,.al-revlist li.is-empty{cursor:default;color:var(--text-muted);font-weight:700}
.al-revlist li.is-more{justify-content:center;font:800 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.al-revlist li.is-empty{white-space:normal;height:auto;min-height:38px;padding:8px 10px;line-height:1.35}
.al-revlist li.is-more:hover,.al-revlist li.is-empty:hover{background:none}
/* ON A COMPUTER IT FLOATS IN THE PAGE, under the box (atless.js alRevPlace): the
   dock is as tall as the globe, three rows pushed in under the box would push
   Lock in off its foot, and on a window as short as the owner's (1280x600 at
   150%) they run past the site card's foot, which clips (.wrap). Placed on
   <body> in page coordinates it lies over whatever is under the box and
   scrolls with the page. A phone keeps it in the page's flow (below). */
.al-revlist.al-revfloat{position:absolute;z-index:60;margin:0}
/* On <body> it is outside #alScreen's [hidden] rule, so, like the pop-up, it
   carries its own: closed is gone, whatever display a later rule gives it. */
.al-revlist[hidden]{display:none !important}

/* ---- the pop-up: the site's .modal (ui.css), with the rules in it --------- */
.al-modal{max-width:400px}

/* ---- the archive: The Gauntlet's (.gg-arch-wrap), Play Unlimited over today -- */
.al-arch-guest{margin-bottom:10px}
.al-arch-unl{display:block;width:100%;min-height:46px;margin:2px 0 4px}
.al-day .al-plays{color:var(--text-muted);font-weight:600;font-size:12.5px;margin-left:6px;white-space:nowrap}
/* A row WRAPS rather than clip: on a phone "Today's puzzle — 2026-10-27" fills the
   line, and "played" — the thing the row is there to say — went under the ellipsis. */
.al-day .nm{white-space:normal;line-height:1.5}
/* TODAY'S TOP 5 HAS ROOM FOR FIVE (28 Oct 2026). The owner: "the leaderboard in
   Atless archive is too crowded - space out the names a bit so they don't
   overlap; do this by extending it down not up, this space will eventually get
   filled in by previous days puzzles." The panel is the home page's (theme.css
   .lead-slot), which shares a 132px slot among its rows — made for three; five
   shared it here, 25px a row round 22px avatars. Each row keeps a height of its
   own now and the slot no floor, so the panel grows DOWNWARD from the top it
   shares with today's row, into the space the days before today fill. */
.al-arch-wrap .gg-boards .lead-slot{min-height:0}
.al-arch-wrap .gg-boards .lead-card{gap:6px}
.al-arch-wrap .gg-boards .lead-row{flex:none;min-height:32px}
.al-arch-wrap .gg-boards .lead-row.lead-win{min-height:38px}

/* ---- the rules pop-up (27 Oct 2026): three cards, one at a time -----------
   The owner picked this of three drafts ("lets go with C"). The modal sits
   outside #alScreen, so it carries its own [hidden] rule. */
.al-modal [hidden]{display:none !important}
.al-modal-rules{max-width:440px}
.al-rules-cap{font:800 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.al-rules h2{margin:8px 0 0;text-wrap:balance}
.modal .al-rules-lede{margin:10px auto 0;max-width:34ch;font-size:14.5px;line-height:1.45;color:var(--text-soft)}
.al-check{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13.5px;line-height:1.4;
  color:var(--text-soft);cursor:pointer;text-align:left}
.al-modal input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin:1px 0 0;padding:0;flex:none;
  accent-color:var(--gold);cursor:pointer;background:none;border:0}
.al-rules-go{display:block;width:100%;min-height:46px;margin-top:14px}
html[data-theme="light"] .al-rules-go{color:var(--on-accent)}
.al-rules-more{display:block;width:max-content;margin:12px auto 0;font-weight:700;font-size:13px;color:var(--text-muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.al-rules-more:hover{color:var(--text)}
/* ALL THREE CARDS STAND IN ONE GRID CELL, the one on show visible: the pop-up
   keeps the tallest card's height, so the dots, the box and Next never move
   (a heading that wraps on one card moved them all). */
.al-steps{display:grid;text-align:center}
.al-step{grid-area:1 / 1;visibility:hidden}
.al-step.is-on{visibility:visible}
.al-dots{grid-area:2 / 1;display:flex;gap:6px;justify-content:center;margin-top:14px}
.al-dot{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--border-strong);cursor:pointer;transition:width .2s,background .2s}
.al-dot.on{width:22px;background:var(--gold)}
/* the pictures, in the globe's colours */
.al-step-ico{display:block;width:84px;height:84px;margin:4px auto 12px}
.al-step-ico .s1{stop-color:var(--globe-lit)}
.al-step-ico .s2{stop-color:var(--globe-mid)}
.al-step-ico .s3{stop-color:var(--globe-dark)}
.al-art-grid ellipse,.al-art-grid line{fill:none;stroke:var(--globe-line);stroke-width:1}
.al-art-grid .eq{stroke:var(--globe-equator);stroke-width:1.6}
.al-art-link{stroke:var(--arc);stroke-width:2;stroke-dasharray:5 4;stroke-linecap:round}
.al-art-ref{fill:var(--city);stroke:var(--city-ring);stroke-width:2.5}
.al-art-pin{fill:var(--pin);stroke:var(--pin-ink);stroke-width:1.2;stroke-linejoin:round}
.al-art-ring{fill:none;stroke:var(--pin);stroke-width:2;opacity:.8}
@media (prefers-reduced-motion:reduce){ .al-dot{transition:none} }

/* ---- the end card ---------------------------------------------------------- */
/* ROOM UNDER THE SCORE FOR ITS COMMA (27 Oct 2026). The owner: "the comma
   should not overlap with text below" — GeoGauntlet's card sets the number
   on a line exactly its size, which suits 51.3; Atless's run into the tens of
   thousands, and the comma's tail reached into the date under it. */
.al-final .big{padding-bottom:.14em}
.al-rounds{list-style:none;margin:16px 0 18px;padding:0;border-top:1px solid var(--border);text-align:left}
.al-rounds li{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.al-rounds .n{font:800 12px/1 var(--mono);color:var(--text-muted)}
.al-rounds .c{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-rounds .c small{color:var(--text-muted);font-weight:500;margin-left:6px}
.al-rounds .d{color:var(--text-muted);font-size:13px}
.al-rounds .s{font-weight:800;text-align:right;min-width:52px}
/* What was revealed, a row of its own — on a phone only (below). */
.al-rounds .r{display:none}

/* ---- phones --------------------------------------------------------------- */
@media (max-width:820px){
  .al-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"target" "globe" "dock"}
  /* THE NAME ON ITS OWN LINE, THE NUMBERS UNDER IT. Beside each other, the
     four stats and the unit pill are wider than a phone leaves for the name,
     and the name's column collapsed to nothing (seen at 375px, 27 Oct 2026). */
  .al-target{display:block;padding:8px 14px 8px;border-left:0}
  .al-name{font-size:clamp(20px,6vw,26px);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* THE COUNTRY UNDER THE NAME ON A PHONE TOO (27 Oct 2026, the owner: "on
     computer the city I need to find is displayed as the city and country
     but on phone only has city - add country to phone display"). */
  .al-country{font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .al-stats{margin:6px 0 0;padding:0;border:0;gap:6px 14px;align-items:center;justify-content:flex-start}
  .al-stat{flex-direction:row;align-items:baseline;gap:6px}
  .al-stat b{font-size:15px}
  .seg.al-units{margin-left:auto}
  .seg.al-units button{padding:6px 7px;min-width:34px;font-size:12px}
  .al-globe{height:min(46vh,400px)}
  .al-dock{padding:10px 12px 12px;gap:8px;border-left:0;border-top:1px solid var(--border)}
  .al-chips{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;scrollbar-width:none}
  .al-chips:not(:empty)::before{display:none}
  .al-chip{width:auto;flex:none;padding:7px 10px;font-size:13px;border-radius:999px}
  .al-chip .ct{display:none}
  /* THE BREAKDOWN TAKES THE CARD'S WIDTH AND NEXT ROUND GOES UNDER IT (28 Oct
     2026). The owner: "'reference distance' needs to be one row not two -
     bring the 'next round' button down and move each score breakdown slightly
     to the right so that they are aligned with each other and 'reference
     distance' can fit in one row." Next round stood beside the four lines and
     squeezed them until "Reference distance" broke in two; one column now, the
     points ending at the card's right edge, one under another, and the button
     across the foot. */
  .al-result{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"dist" "lines" "btn";gap:6px}
  .al-dist{grid-area:dist}
  .al-dist b{font-size:22px}
  .al-lines{grid-area:lines;gap:3px}
  .al-lines div{font-size:13px}
  .al-lines dt{white-space:nowrap}
  .al-rtotal dd{font-size:19px}
  #alNext{grid-area:btn;width:100%;margin-top:4px}
  .al-ctrls{right:10px;bottom:10px;gap:6px}
  .al-ctrl{width:38px;height:38px}
  .al-ico{width:20px;height:20px}
  .al-compass .al-ico{width:24px;height:24px}
  /* THE HINT KEEPS CLEAR OF THE ZOOM BUTTONS: at the left, wrapping, with the
     controls' width left free on the right (it crossed the − button centred). */
  .al-hint{left:10px;right:64px;bottom:12px;transform:none;white-space:normal;text-align:center;font-size:12.5px;padding:8px 12px}
  /* THE REVEAL'S NOTE STAYS UP NOW (alRevealNote), so on a phone it wraps rather
     than lose its points under an ellipsis. */
  .al-toast{white-space:normal;text-align:center;line-height:1.3;border-radius:16px;width:max-content}
  /* WHAT A REVEAL TOOK IS A ROW OF ITS OWN, UNDER THE CITY (28 Oct 2026, the
     owner: "on phone when I reveal a city and it says '-x size -x distance' -
     make this it's own row beneath the city name which should be centered"). */
  .al-toast .cost{display:block;margin:3px 0 0}
  /* EACH GUESS ON THE END CARD IS TWO ROWS (28 Oct 2026). The owner: "make each
     guess two rows where the bottom row displays the revealed city. If not city
     revealed, say 'nothing revealed'. This way, longer city names can be fully
     displayed." The reference city came off the distance's line (it widened the
     row past the screen's edge) onto its own, and the city wraps rather than clip. */
  .al-rounds li{grid-template-areas:"n c d s" ". r r r";row-gap:3px}
  .al-rounds .n{grid-area:n}
  /* The city and its country wrap as WORDS, the country starting its own line
     flush left when it does not fit (a flex row: "Thessaloniki" / "Greece",
     never "Gre" / "ece"); a single word longer than the column breaks rather
     than push the score off the screen. */
  .al-rounds .c{grid-area:c;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;
    white-space:normal;overflow:visible;overflow-wrap:break-word;min-width:0}
  .al-rounds .c small{margin-left:0;min-width:0}
  .al-rounds .c .cn{min-width:0;overflow-wrap:anywhere}
  .al-rounds .d{grid-area:d;white-space:nowrap}
  .al-rounds .d small{display:none}
  .al-rounds .s{grid-area:s}
  .al-rounds .r{grid-area:r;display:block;color:var(--text-muted);font-size:13px;font-weight:600}
  /* THE REVEAL BOX ON A PHONE: a little tighter, and its cities IN THE PAGE'S
     FLOW under the box — never positioned against a viewport, which with the
     keyboard up lands anywhere (gauntletguesser.js guHideSugg says why). Lock
     in moves down while they are open; the box's block is brought to the top
     of the window when it is tapped (atless.js alRevFocused), so the three
     rows clear the keyboard. */
  .al-rev{gap:5px}
  .al-rev-h{font-size:14px}
  .al-sub{font-size:12px;margin-bottom:2px}
}
@media (prefers-reduced-motion:reduce){
  #alCanvas.al-fresh{animation:none}
  .al-toast,.al-hint{transition:none}
}

/* ---- Atless Party (27 Oct 2026): rooms of friends on the same five cities --
   web/src/atless_party.js. The room, the way in, the live leaderboard in the
   game's dock, and the end card's — the site's panel, border and text
   tokens, Archivo, nothing new to theme.
   ROOMIER (28 Oct 2026). The owner: "we need the boxes to be larger so that
   the game and buttons aren't cramped within them like the leave game
   button": more padding in each box, taller buttons, and Leave a button with
   room around it instead of a link on the card's edge. */
/* 52px under the last thing (29 Oct 2026): Leave the room, on its 4px lip,
   ended 29px from the card's edge — the cramping he keeps asking to be rid of */
.alp-wrap{max-width:820px;padding-bottom:52px}
.alp-hero{margin:8px 0 18px}
.alp-hero .gg-sub{margin-top:6px;max-width:52ch}
.alp-k{font:800 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.alp-h{font:900 16px/1.2 var(--display);margin:22px 0 10px;display:flex;align-items:baseline;gap:8px}
.alp-count{font:700 13px/1 var(--font);color:var(--text-muted)}
.alp-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alp-card{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:18px}
.alp-card .alp-h{margin-top:0}
.alp-card > .gg-go{display:block;width:100%;min-height:46px;text-align:center;text-decoration:none}
.alp-card > .cap-btn{display:flex;width:100%;min-height:46px}
.alp-signin{line-height:20px}
.alp-note{font-size:13.5px;line-height:1.45;color:var(--text-soft);margin:0 0 12px}
.alp-note a{color:var(--gold);font-weight:800;cursor:pointer}
.alp-join{display:flex;gap:10px}
.alp-join .gg-go{min-height:46px}
.alp-input{flex:1;min-width:0;font:700 16px/1 var(--font);color:var(--text);background:var(--field);
  border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;outline:none}
.alp-input:focus{border-color:var(--gold)}
.alp-codein{text-transform:uppercase;letter-spacing:.2em}
.alp-msg{min-height:18px;margin-top:10px;color:var(--rust-text);font-size:13.5px;font-weight:700}
.alp-joinwrap .alp-join{max-width:440px}
.alp-joinbtn{min-height:46px;min-width:220px}
.alp-mine{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel)}
.alp-mine-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:baseline;padding:12px 14px;
  border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);text-align:left;cursor:pointer;font:700 14px/1.2 var(--font)}
.alp-mine-row:last-child{border-bottom:0}
.alp-mine-row:hover{background:var(--sheet)}
.alp-mine-row .c{font:900 15px/1 var(--display);letter-spacing:.12em}
.alp-mine-row .h,.alp-mine-row .p{color:var(--text-muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the room */
.alp-roomhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:20px 22px}
.alp-code{font:900 clamp(30px,6vw,44px)/1 var(--display);letter-spacing:.18em;margin-top:6px}
.alp-invite{display:flex;gap:10px;flex-wrap:wrap}
.alp-invite .cap-btn{min-height:44px}
.alp-game{margin-top:16px;border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:20px 22px}
.alp-gamehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.alp-gamehead b{font:900 20px/1 var(--display)}
.alp-gamehead > span{color:var(--text-muted);font-weight:700;font-size:13px}
.alp-gamebtns{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.alp-gamebtns .gg-go{flex:1 1 220px;min-height:52px}
.alp-gamebtns .cap-btn{flex:0 1 auto;min-height:52px;padding-left:22px;padding-right:22px}
/* WAITING FOR THE LEADER is a state, not a broken button */
.alp-waiting[disabled]{opacity:1;cursor:default;background:var(--sheet-2);color:var(--text-soft);box-shadow:none;transform:none}
.alp-leaverow{display:flex;justify-content:center;margin:24px 0 4px}
.alp-leaverow .alp-leave{min-height:48px;padding:0 28px}
/* THE PARTY'S BUTTONS ARE THE STANDARD BUTTON (29 Oct 2026, the owner, of
   Copy invite link, Share… and Leave the room: "these buttons should be also
   the standard buttons"): .cap-btn (theme.css), and the main ones — Make a
   room, Join, Play game — the site's blue on the same 4px lip. Waiting for
   the leader stays a flat grey state. */
.alp-wrap .gg-go:not([disabled]){box-shadow:0 4px 0 var(--accent-lip);transition:transform .08s ease,box-shadow .08s ease}
.alp-wrap .gg-go:not([disabled]):active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-lip)}
.alp-kicked{margin:0 0 14px;color:var(--rust-text);font-weight:700}
/* THE RED X, the leader's, by a player five minutes without a guess */
.alp-kick{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;padding:0;margin-left:6px;border:0;
  border-radius:50%;background:var(--red);color:#fff;font:900 14px/1 var(--font);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.alp-kick:hover{filter:brightness(1.1)}
.alp-kick[disabled]{opacity:.5;cursor:default}
/* a row a player: the room's list, and a game's leaderboard (with a place) */
.alp-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--panel);text-align:left}
.alp-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto minmax(78px,auto);gap:12px;align-items:center;
  padding:13px 16px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
#alpPlayers .alp-row{grid-template-columns:minmax(0,1fr) auto minmax(90px,auto)}
.alp-list .alp-row:last-child{border-bottom:0}
.alp-row .r{font:800 12px/1 var(--mono);color:var(--text-muted)}
/* THE NAME SHORTENS, NEVER ITS BADGES: on a phone "leader" was clipped to
   "LEAD…" when the name and its badges shared one ellipsis. */
.alp-row .n{display:flex;align-items:baseline;min-width:0;font-weight:800}
.alp-row .n .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alp-row .n i{flex:none}
.alp-row .w{font-size:12.5px;color:var(--text-muted);font-weight:600}
.alp-row .s{font-weight:800;text-align:right}
.alp-row .s.dim{color:var(--text-muted);font-weight:600;font-size:13px}
.alp-row.is-me{background:var(--sheet)}
.alp-row.is-winner .s{color:var(--gold)}
.alp-badge,.alp-you{font:800 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;
  padding:3px 6px;border-radius:6px;margin-left:6px;vertical-align:2px}
.alp-badge{background:var(--gold);color:var(--accent-ink)}
.alp-you{background:var(--sheet-2);color:var(--text-soft)}
.alp-crown{font-style:normal;color:var(--amber);margin-left:4px}
.alp-wait{padding:12px 14px;color:var(--text-muted);font-weight:700}
/* A PLAYER'S ROUNDS (29 Oct 2026): a name on a room's board is a button, and
   opens their pins and reveals, a round at a time, on a globe of its own */
.alp-who{display:inline-block;max-width:100%;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
/* NO SHADING UNDER A NAME (29 Oct 2026, the owner: "this is unneccesaary you
   just need to clik on the name no blue shading"). base.css's generic
   button:hover — (0,1,1), over this (0,1,0) background:none — painted a name
   dark blue under a mouse and lifted it a pixel. A name stays a name: the
   pointer and an underline while it is on it, nothing else. */
.alp-who:hover,.alp-who:focus-visible,.alp-who:active{background:none;transform:none;text-decoration-color:currentColor}
.al-modal-rounds{max-width:560px}
.alp-rh{display:flex;align-items:baseline;gap:10px;margin:0 34px 12px 0;font:900 20px/1.2 var(--display)}
.alp-rh span{font:700 13px/1 var(--font);color:var(--text-muted)}
.alp-rtabs{display:flex;gap:6px;margin-bottom:10px}
/* THE NUMBER IN THE MIDDLE (29 Oct 2026, the owner: "these numbers should be
   centered too", as the globe's ?, N, + and − are). The tab set no padding,
   so base.css's generic button gave it 13px 26px — 26px from the left of a
   40px tab pushed each digit right. A grid with no padding centres it. And no
   dark blue under a mouse (base.css's button:hover, the names' shading): a
   tab's own hover is the sheet; the lit one stays lit. */
.alp-rtab{width:40px;height:36px;border-radius:10px;border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text);font:800 14px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0}
.alp-rtab.is-on{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.alp-rtab[disabled]{opacity:.35;cursor:default}
.alp-rtab:hover{background:var(--panel-2);transform:none}
.alp-rtab.is-on:hover{background:var(--gold)}
.alp-rtab[disabled]:hover{background:var(--panel)}
.alp-rglobe{position:relative;height:min(52vh,380px);border-radius:14px;overflow:hidden;background:var(--page)}
.alp-rglobe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.alp-rline{margin-top:10px;font-size:14px;line-height:1.45;color:var(--text-soft)}
.alp-rline b{color:var(--text)}
.alp-rnote{padding:26px 6px;color:var(--text-muted);font-weight:700;text-align:center;line-height:1.45}

/* THE LIVE LEADERBOARD (28 Oct 2026), in the dock between the reveal box and
   Lock in — it takes that space, and scrolls past it — and on a round's result
   above Next round. A PARTY'S STAGE IS TALLER, so the dock has room for it. */
.al-wrap.is-party .al-globe{height:min(74vh,660px)}
.alp-live{display:flex;flex-direction:column;gap:8px;min-height:0;border-top:1px solid var(--border);padding-top:10px}
.al-dock > .alp-live{flex:1 1 auto}
.al-result > .alp-live{flex:0 1 auto;max-height:230px}
.alp-live-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font:800 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.alp-live-h b{font:900 14px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--gold)}
.alp-live-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0}
.alp-live-rows li{display:grid;grid-template-columns:18px minmax(0,1fr) auto minmax(58px,auto);gap:8px;align-items:center;
  padding:6px 8px;border-radius:9px;font-size:13.5px;font-variant-numeric:tabular-nums}
.alp-live-rows li.is-me{background:var(--sheet)}
.alp-live-rows .r{font:800 11px/1 var(--mono);color:var(--text-muted)}
.alp-live-rows .n{display:flex;align-items:center;min-width:0;font-weight:700}
.alp-live-rows .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alp-live-rows .d{color:var(--text-muted);font-size:12.5px;font-weight:700}
.alp-live-rows .s{font-weight:800;text-align:right}
.alp-live-rows .s.dim{color:var(--text-muted);font-weight:600;font-size:12.5px}
.alp-live-rows li.is-me .s{color:var(--gold)}
.alp-live-rows li.is-behind .n{color:var(--text-soft)}
/* the end card */
.alp-final .alp-next{margin-top:18px}
.alp-final .alp-next .gg-go{width:100%;min-height:46px}
.alp-final .alp-h{justify-content:flex-start}
.alp-boardh .alp-won{color:var(--gold)}
/* A GAME'S LEADERBOARD IN THE BOX'S STYLE (29 Oct 2026, the owner:
   "make the leaderboard also same style"): the face, ink and lip of .cap-box
   (theme.css) — rows ruled by a darker line, your own row a shade deeper, its
   tags on the box's chip, the winner's star amber. The room's Players list
   shares the rows and is left as it was. */
.alp-list.alp-board{background:var(--box-face);color:var(--box-ink);border:0;border-radius:16px;box-shadow:0 4px 0 var(--box-lip)}
.alp-board .alp-row{border-bottom-color:rgba(0,0,0,.16)}
.alp-board .alp-row :is(.r,.w,.s.dim){color:var(--box-ink);opacity:.75}
.alp-board .alp-row .s,.alp-board .alp-row.is-winner .s{color:var(--box-ink)}
.alp-board .alp-row.is-winner .s{font:900 17px/1 var(--display)}
.alp-board .alp-row.is-me{background:var(--box-chip)}
.alp-board :is(.alp-you,.alp-badge){background:var(--box-chip);color:var(--box-ink)}
.alp-board .alp-crown{color:var(--amber)}
/* and room under the links that end the screen, as under the room's last button */
.gg-final.alp-final{padding-bottom:52px}
@media (max-width:820px){
  .alp-cards{grid-template-columns:1fr}
  .alp-roomhead{align-items:stretch}
  .alp-invite{width:100%}
  /* two standard buttons share a phone's row: Copy invite link takes the
     larger part, so it stays one line, and both a point smaller */
  .alp-invite .cap-btn{flex:1 1 0;min-width:0;padding:13px 10px;font-size:13px;line-height:1.15}
  .alp-invite #alpCopy{flex-grow:1.45}
  .alp-row{gap:8px;padding:10px 12px}
  /* Your own row is shaded already; on a phone its YOU tag gives the name its
     room back. */
  .alp-row .alp-you{display:none}
  /* ON A PHONE THE LIVE LEADERBOARD IS ONE LINE OF CHIPS, under the box and on
     the result, so the dock grows by a row and not by a table: no scrolling
     mid-game. */
  .alp-live{gap:6px;padding-top:8px}
  .alp-live-rows{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;scrollbar-width:none}
  .alp-live-rows li{display:flex;gap:6px;flex:none;padding:5px 10px;border-radius:999px;background:var(--sheet);
    font-size:12.5px;white-space:nowrap}
  .alp-live-rows li.is-me{background:var(--sheet-2)}
  .al-wrap.is-party .al-result{grid-template-areas:"dist" "lines" "live" "btn"}
  .al-result > .alp-live{grid-area:live;max-height:none}
  .alp-gamebtns .cap-btn{flex:1 1 auto}
}

/* ==== THE GAME'S LAYOUT (29 Oct 2026) ===========================================
   A COMPUTER keeps the game exactly as it was — the globe's box and its height,
   the white panel, the site's card as wide as on the home page (theme.css .wrap)
   — and the card runs on 64px under it. The owner: "have the outlying box
   extend further down the screen so that the game isn't cramped inside it and
   doesn't go all the way down to the edge" (it ended 1px under the stage); of
   three he picked 64px of card under the stage, and then "revert back to what
   we had originally the only change is the space below" — so the taller globe
   that came with that draft went back. A party's stage keeps its own height
   (.al-wrap.is-party, above), for the leaderboard in its dock.
   A PHONE has no frames — of three, "i like C for phone": the city a strip, the
   globe square, the box and Lock in one row, the whole round on the screen
   without scrolling; a party's leaderboard a line of its own above the box.
   Atless's game screen only — "Atless is the only layout that is being changed
   not anything else on the site": every rule is on the stage or what it holds. */
@media (min-width:821px){
  .al-stage{margin-bottom:64px}
}
@media (max-width:820px){
  .al-stage{border:0;border-radius:0;background:transparent;overflow:visible}
  .al-globe{background:transparent}
  .al-target,.al-dock{border:0;background:transparent}
  #alScreen .al-wrap{padding:0 10px}
  .al-target{display:block;padding:4px 2px 6px}
  .al-name{font-size:clamp(22px,7vw,28px)}
  .al-stats{margin:4px 0 0}
  .al-globe{height:min(calc(100vw + 10px),58vh);min-height:0}
  /* a party's round carries its leaderboard's line, and its bar runs to two (the
     room's way back): the globe gives them the room */
  .al-wrap.is-party .al-globe{height:min(calc(100vw - 74px),48vh);min-height:0}
  .al-dock{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:8px 2px 4px}
  .al-chips{flex-basis:100%}
  .al-chips:empty{display:none}
  .al-rev{flex:1 1 0;min-width:0}
  .al-sub{display:none}
  .al-rev-h{font-size:13px}
  .al-actions{flex:none;width:112px;margin-top:0}
  /* once a city is revealed the box goes, and Lock in takes the row */
  .al-rev[hidden] ~ .al-actions{flex:1 1 auto;width:auto}
  /* a party's leaderboard on its own line above the box; the result the row's width */
  .al-dock > .alp-live{order:-1;flex-basis:100%}
  .al-result{flex-basis:100%}
}

/* ---- FULL SCREEN (29 Oct 2026; alFullSet in atless.js) ----------------------
   The owner: "do a fullscreen mode mockup with a button to enter it in
   gameplay for atless". The game over the whole window: no site header and
   no bar, the stage edge to edge — on a computer the globe every pixel of
   height there is, the card and the dock beside it as before; on a phone the
   city above, the dock below and the globe all that is left between. Over
   the page, under the floating reveal list (60) and the pop-ups (100 up). */
html.al-full-on,html.al-full-on body{overflow:hidden}
#alScreen .al-wrap.al-full{position:fixed;inset:0;z-index:50;max-width:none;width:auto;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:stretch;background:var(--page)}
.al-wrap.al-full > .gg-bar{display:none}
.al-wrap.al-full .al-stage{flex:1 1 auto;min-height:0;margin:0;border:0;border-radius:0}
.al-wrap.al-full .al-globe{height:auto;min-height:0}
.al-wrap.al-full .al-dock{overflow-y:auto}
/* the button's corners point out, and in once it is on */
.al-fullbtn .back{display:none}
.al-wrap.al-full .al-fullbtn .go{display:none}
.al-wrap.al-full .al-fullbtn .back{display:inline}
@media (max-width:820px){
  #alScreen .al-wrap.al-full{padding:max(6px,env(safe-area-inset-top)) 10px max(6px,env(safe-area-inset-bottom))}
  .al-wrap.al-full .al-globe,.al-wrap.al-full.is-party .al-globe{height:auto;min-height:0}
}

/* ==== THE END CARD'S BUTTONS HAVE NO THIN OUTLINE (30 Oct 2026) ==============
   The owner, of Share result, Share… and Close: "i want to get rid of these
   thin border lines for the buttons, can you draft 3 button/border styles and
   let me review them" — and of the three, "use B": the raised shape of the
   site's standard button in the page's quiet surface and the text's own
   colour, on a soft dark lip; the big button on its own lip. A day's (or an
   Unlimited game's) card and its share card; the party's has its own. */
#alScreen .al-final:not(.alp-final){--quiet-face:rgba(255,255,255,.11);--quiet-face-hi:rgba(255,255,255,.16);--quiet-lip:rgba(0,0,0,.45)}
html[data-theme="light"] #alScreen .al-final:not(.alp-final){--quiet-face:rgba(16,30,34,.075);--quiet-face-hi:rgba(16,30,34,.11);--quiet-lip:rgba(16,30,34,.22)}
#alScreen .al-final:not(.alp-final) .gg-stand{border:0;background:var(--quiet-face);color:var(--text);box-shadow:0 4px 0 var(--quiet-lip);
  font:900 14px/1 var(--display);padding:13px 22px;transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
#alScreen .al-final:not(.alp-final) .gg-stand:hover{background:var(--quiet-face-hi);color:var(--text);transform:none}
#alScreen .al-final:not(.alp-final) .gg-stand:active{transform:translateY(3px);box-shadow:0 1px 0 var(--quiet-lip)}
#alScreen .al-final:not(.alp-final) .gg-go:not([disabled]){box-shadow:0 4px 0 var(--accent-lip);transition:transform .08s ease,box-shadow .08s ease}
#alScreen .al-final:not(.alp-final) .gg-go:not([disabled]):active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-lip)}