/* The screens between the playing: the front door, the level card, the
   tally, and the level picker.

   The styles for js/games/arcade/intermission.js, and shared by every game
   that uses it. Loaded ALONGSIDE arcade.css rather than folded into it,
   deliberately: arcade.css is on eleven pages, most of which want nothing to
   do with these, and a stylesheet is cheaper to leave out than to override.

   Knock Down wrote all of this and was the only thing using it for a day.
   Nothing in here knows about bricks.
   ====================================================================== */
/* ======================================================================
   THE SCREENS

   One box over the board holding the front door, the level card and the
   tally, one at a time. Absolutely positioned inside the game's stage, which is
   already position:relative for the canvas, so it covers the board exactly
   and goes full screen along with it.
   ====================================================================== */

/* hidden is an ATTRIBUTE, and the browser implements it as display:none in
   the user-agent stylesheet -- which any author display rule outranks. So
   display:flex below quietly beat it and hide() stopped hiding: the panel
   emptied, the box stayed, and the board went on being covered by a blurred
   pane you could still play through, because the game binds pointermove
   underneath and the events bubbled straight past. This line is the fix and
   it has to stay above the display rule. */
.ar-screen[hidden] { display: none; }

.ar-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;

  /* So the panel can ask how tall this box is (the @container rule at the
     end of the tally). Safe to measure: inset:0 means its size comes from
     the stage it covers and never from what is inside it. */
  container-type: size;

  /* The board stays FAINTLY visible underneath. It keeps its last painted
     frame -- nothing in intermission.js draws -- and a hint of the wall you
     just cleared behind the tally is why this reads as part of the game
     rather than a dialog the game put up.

     A hint is the whole of it, though. At 82% there was enough brick showing
     through to read as clutter behind the numbers, which is the opposite of
     what a scoreboard is for. 94% and a heavier blur keeps the sense that
     the board is still there without asking anybody to look past it. */
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(7px);
  animation: ar-screen-in 180ms ease-out;
}

@keyframes ar-screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Biased up rather than dead centre. Optically centred beats measured
   centred -- a panel on the true middle line reads as sitting low -- so a
   spacer under the panel lifts it, and the pair is centred together. That
   lifts the panel without ever pushing its top off the box, which is what
   align-items:flex-start plus a fixed offset would do on a short window.

   It used to be padding at the bottom, and padding cannot give way. On a box
   too short for the panel, the tally scrolled with its buttons below the fold
   while up to 130px of nothing sat under it -- it was already doing that at
   1280x800 before the payout made it taller. The spacer gives way first: it
   shrinks a thousand times as readily as the panel does, so the lift is the
   first thing to go and the panel scrolls only when the whole box is not
   enough. */
.ar-screen::after {
  content: '';
  flex: 0 1000 clamp(12px, 14%, 118px);
}

.ar-screen__panel {
  width: min(22rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px var(--shadow);
  text-align: center;
  animation: ar-panel-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes ar-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* A door with more choices than fit in a column needs the room to put them
   side by side. 22rem is right for three; eight of them is a different shape
   of question. */
.ar-screen.is-wide .ar-screen__panel {
  width: min(38rem, 100%);
}

/* The level card is a moment, not a page. No box, no shadow -- just the name
   over the board it is naming. */
.ar-screen.is-card .ar-screen__panel {
  border: 0;
  background: none;
  box-shadow: none;
}

.ar-screen h2 { margin: 0; }

/* THE LINE HEIGHT IS THE POINT OF THIS RULE.
   `font: inherit` is a shorthand, and a shorthand sets every part it covers
   -- so it was handing these buttons the panel's line height along with its
   family and size, and on the big bold labels that came out tight enough
   that a descender on a g or a y ran into the bottom border. Stating it here
   gives every button on every one of these screens the same breathing room,
   whatever size its own rule sets the text at. */
.ar-screen button {
  font: inherit;
  line-height: 1.45;
  cursor: pointer;
  border-radius: 9px;
}

/* The screens' main button. arcade.css has the same rule for its bars, but a
   page can use these screens without the arcade bar -- the card games do --
   and there PLAY came out as a plain white box. The look travels with the box
   now. Scoped to the screens, so the two rules never meet over a bar button;
   on an arcade page both apply and agree. */
.ar-screen .ar-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.ar-screen .ar-primary:hover { filter: brightness(1.12); }


/* ---------------------------------------------------------- the front door */

.ar-door__over {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ar-door__ask {
  margin: 2px 0 14px;
  font-size: 1.25rem;
  color: var(--ink);
}

/* The way back to the rest of the site, in the corner the overline leaves
   empty. Out of the flow, so the door is exactly the shape it was: it sits on
   the overline's line and borrows its type, which is what makes it read as
   part of the header rather than one more button. The padding is the hit
   area -- the words alone are a 12px target -- and the negative offsets put
   the words back where the padding moved them, square on the overline and on
   the left edge of the choices underneath. */
.ar-door { position: relative; }

.ar-door__leave {
  position: absolute;
  top: -6px;
  left: -8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
}

.ar-door__leave:hover {
  color: var(--ink);
  background: var(--ground);
}

/* Larger than the words, or the door is a smudge beside them. At the size
   the words are, this is 17px -- the smallest the arrow keeps clear of the
   door on a 1x screen. */
.ar-door__leave svg { width: 1.5em; height: 1.5em; }

/* A phone has room for the words or the title, not both. The panel narrows
   to 20rem at 720px, and there the longer titles -- PEBBLE CRUSH, KNOCK
   DOWN, BUBBLE POP -- ran into GAMES. So on a phone the door and arrow say
   it alone, and the link keeps its name in aria-label. The same breakpoint
   as the panel's, so no width can have the narrow panel and the words. */
@media (max-width: 720px) {
  .ar-door__leave-word { display: none; }
}

.ar-door__versions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Two abreast, for a door with more choices than fit in a column. Stays one
   column on a phone, where two of these would be too narrow to read. */
@media (min-width: 620px) {
  .ar-door__versions--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* A version is a paragraph you press, not a radio button with a label beside
   it. Three of these is the whole question, and the blurb is the part that
   actually answers it for somebody who has played neither. */
.ar-version {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  text-align: left;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
}

.ar-version b { font-size: 0.98rem; }

.ar-version span {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.ar-version:hover { border-color: var(--rule-strong); }

.ar-version[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The second question, for a game that asks one: how to play the version
   chosen. A row of short choices rather than more paragraphs -- the first
   question already spent the room, and a way needs a word and a note, not a
   blurb. Wraps on a phone rather than squeezing three into a column. */
.ar-door__how {
  margin: 14px 0 8px;
  font-size: 1rem;
  color: var(--ink);
}

.ar-door__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ar-way {
  flex: 1 1 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink);
}

.ar-way b { font-size: 0.92rem; }

.ar-way span {
  font-size: 0.76rem;
  color: var(--ink-muted);
}

.ar-way:hover { border-color: var(--rule-strong); }

.ar-way[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* What the chosen way brings with it -- a difficulty, a deal number. The game
   builds the control; this only seats it under the row. */
.ar-door__extra {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.ar-door__extra label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ar-door__extra select,
.ar-door__extra input {
  font: inherit;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--rule-strong);
  background: var(--ground);
  color: var(--ink);
}

.ar-door__extra input { width: 9ch; }

/* A tick box is not a field to type in: no width, no padding, no box drawn
   round it. Sized up a little, because it is the whole target. */
.ar-door__extra input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  padding: 0;
  margin: 0;
  accent-color: var(--accent, currentColor);
}

/* The one action on the door. Its label and behaviour come from whichever
   version is chosen; its POSITION never does. */
.ar-door__play {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ar-door__purse {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.ar-door__purse b { color: var(--warn); }

/* How far up the ladder, under the coins. */
.ar-door__climb {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.ar-door__climb b { color: var(--ink-muted); }


/* ---------------------------------------------------------- the level card */

.ar-card__level {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ar-card__name {
  margin: 2px 0 14px;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--accent);
}

/* What the level wants, BEFORE it is played. A star nobody knew about is a
   star that can only be earned on the second go. */
.ar-card__targets {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.ar-card__targets li,
.ar-tally__stars li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* Its own line.
   .ar-card__targets is inline-flex so that a left-aligned list can sit
   centred under the name -- and an inline-level list leaves the rest of the
   line free, which a plain <button> then flowed into. The button landed
   beside "Keep your white ball" and on top of it. */
.ar-card__go {
  display: block;
  margin: 0 auto;
  padding: 10px 26px 11px;
  font-weight: 700;
}


/* --------------------------------------------------------------- the tally */

.ar-tally__level {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ar-tally__name {
  margin: 2px 0 0;
  font-size: 1.35rem;
  color: var(--ink);
}

.ar-tally__verdict {
  margin: 2px 0 12px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
}

/* Green is for a level cleared. "Not cleared" wore the same green, which read
   as good news -- and on the card games this screen is also where a deal is
   given up on. */
.ar-tally__verdict.is-missed { color: var(--ink-muted); }

.ar-tally__stars {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.ar-tally__stars li.is-won {
  color: var(--ink);
  font-weight: 600;
}

.ar-tally__coins {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.ar-tally__coins b {
  font-size: 1.15rem;
  color: var(--warn);
}

/* Your best on this level, ever. Quiet when it has not moved, and loud for
   the one thing worth shouting about. */
.ar-tally__best {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.ar-tally__best b {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ar-tally__best.is-new {
  border-color: var(--warn);
  color: var(--ink);
}

.ar-tally__best.is-new b { color: var(--warn); }

.ar-tally__was {
  width: 100%;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.ar-tally__rows {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 14px;
  justify-content: center;
  margin: 0 0 16px;
  font-size: 0.84rem;
}

.ar-tally__rows dt { color: var(--ink-muted); text-align: right; }

.ar-tally__rows dd {
  margin: 0;
  text-align: left;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The end of a ladder. Said once, on the last rung, and it should look like
   an arrival rather than another row of the tally. */
.ar-tally__final {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.ar-tally__final b {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.ar-tally__actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ar-tally__actions button { padding: 9px 16px 10px; }

.ar-tally__actions button:not(.ar-primary) {
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--ink-muted);
}


/* -------------------------------------------------------------- the payout

   How the tally's numbers arrive -- see arcade/payout.js. The movement is in
   the script, because it has to keep time with the counting; what is here is
   what the pieces look like standing still. */

/* The big number: the level's score, counted up from nothing. */
.ar-tally__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 4px;
  line-height: 1.05;
}

.ar-tally__score span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ar-tally__score b {
  font-size: 1.8rem;
  color: var(--ink);
}

/* What the level paid on top, one line each, draining into the number above.
   A BLOCK that shrinks to fit rather than inline-flex like the stars below
   it: two inline boxes in a row share a line, and this one would sit beside
   the stars instead of over them. */
.ar-tally__bonus {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: fit-content;
  min-width: min(13rem, 100%);
  margin: 0 auto 10px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.ar-tally__bonus li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  color: var(--ink-muted);
  transition: opacity 300ms ease-out;
}

.ar-tally__bonus b {
  text-align: right;
  color: var(--ink);
}

/* Paid in. Still there to read, no longer asking to be. */
.ar-tally__bonus li.is-spent { opacity: 0.55; }

/* Every number the payout moves. Inline-block so that it can hold a width
   and take a jolt -- a transform does nothing to an inline box. */
.ar-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* The best line before its turn. Hidden, but holding its place, so nothing
   under it moves when it arrives. */
.ar-tally__best.is-waiting { visibility: hidden; }

/* Where the flying things go: over the whole box, and never in the way of a
   press. */
.ar-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

/* Invisible where they stand. It is the animation that puts them anywhere,
   so one caught before or after its flight is nowhere at all. */
.ar-coin,
.ar-spark {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* A coin, out of the theme's own gold so it is gold on every theme. The
   highlight at the top left is what makes it a coin rather than a dot. */
.ar-coin {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
      color-mix(in srgb, var(--warn) 30%, #fff) 0 18%,
      var(--warn) 55%,
      color-mix(in srgb, var(--warn) 70%, #000) 100%);
  box-shadow: 0 1px 2px var(--shadow);
}

/* A spark: a four-pointed twinkle, the same gold as the stars it comes off. */
.ar-spark {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--warn);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%,
                     50% 100%, 39% 61%, 0 50%, 39% 39%);
}


/* ---------------------------------------------------------------- the star

   One shape, two states. The empty one is outlined rather than absent, so the
   row keeps its shape and you can see what there was to get. */

.ar-star {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.ar-star.is-won {
  fill: var(--warn);
  stroke: var(--warn);
  filter: drop-shadow(0 1px 2px var(--shadow));
}


/* --------------------------------------------------- the screens, narrower */

@media (max-width: 720px) {
  .ar-screen__panel { width: min(20rem, 100%); padding: 15px 16px 17px; }
  .ar-card__name { font-size: 1.5rem; }
}

/* A phone on its side: wide, and too short for three choices stacked. It
   pushed PLAY below the fold inside the panel. So the door goes wide and the
   choices sit side by side, the way the colours already do. */
@media (pointer: coarse) and (max-height: 500px) and (min-width: 600px) {
  .ar-screen.is-door .ar-screen__panel { width: min(40rem, 100%); }

  .ar-screen.is-door .ar-door__versions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .ar-screen.is-door .ar-door__how { margin: 10px 0 6px; }
}

/* A short window has room for the board and not much else, so the tally gives
   up its stat rows -- the stars and the coins are what somebody came to read,
   and every one of those numbers is in the rail anyway. */
@media (max-height: 560px) {
  .ar-screen__panel { padding: 12px 14px 14px; }
  .ar-tally__rows { display: none; }
  .ar-card__name { font-size: 1.4rem; }
  .ar-tally__score b { font-size: 1.5rem; }
}

/* The same trade on a short BOX, which a window's height does not tell you.
   An 800px window that is not full screen leaves a game about 460px under the
   site header and the game's own bar, and the tally -- taller since the score
   got a line of its own -- scrolled its main button out of sight there while
   the rule above slept. The box is what the panel has to fit in, so the box is
   what is measured. See the container-type on .ar-screen. */
@container (max-height: 640px) {
  .ar-tally__rows { display: none; }
  .ar-tally__score b { font-size: 1.5rem; }
}


/* ======================================================================
   THE LEVEL PICKER

   Wider than the other screens, because a grid of one column is a list
   and a list was the thing worth avoiding.
   ====================================================================== */

.ar-screen.is-picker .ar-screen__panel {
  width: min(42rem, 100%);
  text-align: center;
}

.ar-picker__title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  color: var(--ink);
}

/* The whole responsive story, in one line.

   auto-fill with a minimum column width gives several columns on a monitor,
   two on a tablet and one on a phone, and it keeps working in a window
   somebody has dragged to half width -- which is the case a breakpoint
   always misses. There is no phone layout to maintain because there is no
   phone layout. */
.ar-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

/* The card IS the button. A small launch button inside a card is a smaller
   target than the card it sits in, and on a phone that is a miss. */
.ar-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px 9px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: var(--ground);
  color: var(--ink);
  text-align: center;
}

.ar-level:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ar-level__number {
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.ar-level__name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.ar-level__stars {
  display: flex;
  gap: 2px;
  margin: 2px 0 1px;
}

.ar-level__stars .ar-star {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.ar-level__stat {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Shown, not hidden. A ladder you can see the length of is a ladder worth
   climbing, and how many are left is something a player wants to know. */
.ar-level.is-locked {
  opacity: 0.4;
  cursor: default;
  border-style: dashed;
}

.ar-level.is-locked .ar-level__number,
.ar-level.is-locked .ar-level__name { color: var(--ink-faint); }

/* The card for what is not built yet. Dashed like a locked level, but in
   the accent rather than grey -- it is a promise, not a barrier. */
.ar-level.is-soon {
  opacity: 1;
  cursor: default;
  border-style: dashed;
  border-color: var(--accent);
  background: none;
}

.ar-level.is-soon .ar-level__number { color: var(--accent); }
.ar-level.is-soon .ar-level__name { color: var(--ink-muted); }

.ar-picker__back {
  padding: 8px 22px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--ground);
  color: var(--ink-muted);
}

.ar-picker__back:hover { border-color: var(--rule-strong); color: var(--ink); }

/* The door's way in to all of it. */
.ar-door__choose {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--ground);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.ar-door__choose:hover { border-color: var(--accent); color: var(--ink); }


/* ======================================================================
   A LONG LADDER, IN GROUPS -- and the card that opens a board

   picker({ group }) folds the levels into <details>, twenty at a time, the
   way the phone Mahjong apps show a ladder of hundreds. card({ picture,
   record, onBack }) is the board opened before it is played.
   ====================================================================== */

.ar-group {
  margin: 0 0 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ground);
  text-align: left;
}

.ar-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 2.8rem;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}

.ar-group__head::-webkit-details-marker { display: none; }

/* The fold's own arrow, drawn so it matches the site rather than the
   browser's triangle. */
.ar-group__head::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.ar-group[open] > .ar-group__head::after { transform: rotate(225deg) translateY(-2px); }

.ar-group__name { font-size: 1rem; color: var(--ink); }

.ar-group__note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.ar-group__note .ar-star { width: 15px; height: 15px; }

.ar-group.is-locked .ar-group__name { color: var(--ink-faint); }

.ar-group > .ar-picker__grid { margin: 0; padding: 4px 10px 12px; }

.ar-card__picture {
  display: flex;
  justify-content: center;
  margin: 10px 0 12px;
}

.ar-card__record {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.ar-card__back {
  display: block;
  margin: 10px auto 0;
  padding: 7px 18px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--ground);
  color: var(--ink-muted);
}

.ar-card__back:hover { border-color: var(--rule-strong); color: var(--ink); }


/* ======================================================================
   HANDHELD SCREENS -- one question to a screen (js/games/arcade/handheld.js)

   choose(), and picker() and card() when they are handed `back`: a screen of
   its own rather than a panel floating over the board. A bar across the top
   with the way back on the left and the screen's name in the middle, then
   the question, filling the box. On a computer the same thing, phone-width,
   in the middle of the window -- one design, not two. The design is
   Z_Nice Colors/Handheld Mode.html.
   ====================================================================== */

.ar-screen.is-page {
  padding: 0 12px;
  justify-content: stretch;
}

/* The lift under a floating panel. A page fills the box and has nothing to
   lift. */
.ar-screen.is-page::after { display: none; }

.ar-screen.is-page .ar-screen__panel {
  display: flex;
  flex-direction: column;
  width: min(28rem, 100%);
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.ar-screen.is-page.is-picker .ar-screen__panel { width: min(42rem, 100%); }

/* Scrolls when it must; centred when it fits. An auto margin in a scrolling
   flex box does both: it takes up the spare room when there is some, and
   none when there is not, so a long list starts at its top rather than half
   way up out of reach. */
.ar-page__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 6px 2px 18px;
}

.ar-page__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: auto;
}

/* The bar. Three columns with the outer two the same width, so the name sits
   in the true middle whatever the way back says. */
.ar-top {
  flex: none;
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) auto minmax(5.5rem, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 3.3rem;
  border-bottom: 1px solid var(--rule);
}

.ar-top__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 2.9rem;
  padding: 0 10px 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.ar-top__back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-top__back svg { flex: none; width: 1.35em; height: 1.35em; }
.ar-top__back:hover { background: var(--accent-soft); border-radius: 10px; }

.ar-top__title {
  margin: 0;
  overflow: hidden;
  font-size: 1.05rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

/* Continue: what is waiting to be carried on with, first and biggest. */
.ar-continue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 12px 16px 13px;
  border-radius: 14px !important;
  text-align: left;
}

.ar-continue small {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ar-continue b { font-size: 1.15rem; }
.ar-continue span { font-size: 0.85rem; font-weight: 400; opacity: 0.9; }

.ar-choose__ask {
  margin: 8px 0 2px;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}

.ar-choose__items {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* An answer: the whole thing is the button, and pressing it is the way on. */
.ar-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 3.8rem;
  padding: 12px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 14px !important;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  touch-action: manipulation;
}

.ar-choice b { font-size: 1.1rem; }

.ar-choice span {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.ar-choice:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The answer picked last time, so it is quick to find again. Not "selected":
   nothing here waits for a second press. */
.ar-choice[aria-current="true"] { border-color: var(--accent); }

.ar-choose__extra {
  display: flex;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.ar-choose__extra label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 2.75rem;
  cursor: pointer;
}

.ar-choose__extra input[type="checkbox"] {
  width: 1.3em;
  height: 1.3em;
  margin: 0;
  accent-color: var(--accent, currentColor);
}

.ar-choose__foot {
  margin: 4px 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-muted);
}

/* The map: where you are, lit. */
.ar-picker__sum {
  margin: 4px 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--accent);
}

.ar-level.is-next {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.ar-level.is-next .ar-level__stat { color: var(--accent); font-weight: 700; }

/* The level card as a screen: centred, and its "Level 3" is already in the
   bar over it. */
.ar-screen.is-page.is-card .ar-page__inner {
  align-items: stretch;
  text-align: center;
}

.ar-screen.is-page .ar-card__level { display: none; }

/* A phone on its side: the answers two abreast, or three of them push the
   last off the bottom of a 390px-tall screen. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .ar-screen.is-page .ar-screen__panel { width: min(40rem, 100%); }

  .ar-choose__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .ar-choose__ask { margin-top: 2px; font-size: 1.15rem; }
  .ar-top { min-height: 2.9rem; }
}

/* The answers' extras, for the card games' lists (choose() in
   intermission.js): a badge on the label, a note at the right, and a quiet
   answer -- offered, not pushed. */
.ar-choice { position: relative; }

.ar-choice__badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.ar-choice__note {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--ink-faint);
}

/* Room for the note at the right on anything wider than a phone: the label
   and its line on the left, the note level with the label. */
@media (min-width: 521px) {
  .ar-choice:has(.ar-choice__note) { padding-right: 7.5rem; }

  .ar-choice__note {
    position: absolute;
    top: 14px;
    right: 16px;
    max-width: 6.5rem;
    text-align: right;
  }
}

.ar-choice.is-quiet {
  border-style: dashed;
  background: transparent;
  margin-top: 8px;
}

.ar-choice.is-quiet b { color: var(--ink-muted); }

/* A picture of the answer at its right, centred on its height: Mahjong's
   shapes. The words keep the left and the room the picture leaves them. */
.ar-choice:has(.ar-choice__picture) {
  justify-content: center;
  padding-right: 7.5rem;
}

.ar-choice__picture {
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  transform: translateY(-50%);
  pointer-events: none;
}

/* A page with a list of numbers in it: the card games' ladder map. */
.ar-screen.is-page.is-wide .ar-screen__panel { width: min(40rem, 100%); }