/* The one navigation (js/nav.js, CONTRACTS.md §16): the Games list, its "Logged in as" tile (js/me.js, §17) and the
   page geometry around the Dock. Loaded on
   every page with guest navigation: the main site (after extras.css) and the satellites (/join/, /placeyourbats/,
   /dashboard/log/: after ../css/bundle.css, before the page CSS). The Dock and the Sheet are the bundle's; this file
   is a page pattern built from tokens (no bf- names).

   Page geometry (the satellites pad their content with it; the main site keeps app.css's --dock-total):
     --nav-bottom  space the bar takes at the bottom edge (safe area included)
     --nav-right   space the rail takes at the right edge (landscape phones; 0 elsewhere)
   Shapes (bundle.css picks them by viewport): the bar on portrait phones and tablets, the right rail on landscape
   phones (height ≤ 500px), the floating pill on landscape tablets and desktop (height ≥ 501px). */
:root{
  --nav-bottom:calc(var(--sp-3) + var(--dock-h) + max(var(--sp-3), var(--sab))); /* the bar: 80px without a safe area */
  --nav-right:0px;
  /* Keyboard focus never scrolls under the fixed bar (WCAG 2.4.11). On the rail --nav-bottom is only the safe area. */
  scroll-padding-bottom:calc(var(--nav-bottom) + var(--sp-2));
}
@media (orientation:landscape) and (max-height:500px){ /* layout breakpoint: landscape phone (the Dock's rail) */
  :root{--nav-bottom:var(--sab);--nav-right:calc(var(--rail-w) + var(--sar))}
}
@media (orientation:landscape) and (min-height:501px){ /* layout breakpoint: landscape tablet and desktop (the floating pill) */
  :root{--nav-bottom:calc(var(--sp-6) + var(--dock-h) + var(--sab))} /* 80px without a safe area */
}

/* On the satellites Gate, Bag and Party are links (<a>), styled like the Dock's buttons. */
#dock a.bf-dock__item{cursor:pointer}
@media print{#dock{display:none}}

/* ---------- The "Logged in as" tile and the screen-name editor (js/me.js, §17) ---------- */
/* Its own slot above the rows (renderGames never diffs it). The Sheet body scrolls with only sp-1 above its content:
   room for the tile's whole focus ring. */
.me-slot{margin-bottom:var(--sp-3)}
.me-slot:empty{display:none}
#sheet-games-body > .me-slot{margin-top:calc(var(--ring) + var(--ring-offset) - var(--sp-1))}

/* One button, drawn like a .game-tile (surface-2, stroke-bold line edge, lilac hover, the base ring and press): the
   avatar on a round plate in the player's own light (you), then "Logged in as" over the name in the display face,
   "Change" at the top right, the hint across the bottom. */
.me-tile{display:grid;grid-template-columns:calc(var(--sp-12) + var(--sp-2)) minmax(0,1fr) auto;
  grid-template-areas:"art top change" "art name name" "art hint hint";align-items:center;gap:var(--sp-1) var(--sp-3);
  width:100%;min-height:calc(var(--sp-12) + var(--sp-8));margin:0;padding:var(--sp-3);
  border:var(--stroke-bold) solid var(--line);border-radius:var(--r-card);background:var(--surface-2);
  color:var(--text);text-align:start;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.me-tile[aria-expanded="true"]{border-color:var(--lilac-300)}
@media (hover:hover){.me-tile:hover:not([aria-disabled="true"]){border-color:var(--lilac-300)}}
.me-tile__body{display:contents}
.me-tile__avatar{grid-area:art;align-self:center;display:grid;place-items:center;
  width:calc(var(--sp-12) + var(--sp-2));height:calc(var(--sp-12) + var(--sp-2));
  border:var(--stroke-bold) solid var(--you);border-radius:50%;background:var(--bg);font-size:var(--fs-32);line-height:var(--lh-solid)}
.me-tile__eyebrow{grid-area:top;color:var(--text-2);font:var(--fw-bold) var(--fs-13)/var(--lh-18) var(--font-ui);letter-spacing:var(--track-caps);text-transform:uppercase}
.me-tile__name{grid-area:name;min-width:0;font:var(--fw-regular) var(--fs-24)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-display);overflow-wrap:anywhere}
.me-tile__title{grid-area:top;font:var(--fw-bold) var(--fs-18)/var(--lh-heading) var(--font-ui)}
.me-tile__hint{grid-area:hint;min-width:0;color:var(--text-2);font:var(--fw-semibold) var(--fs-15)/var(--lh-20) var(--font-ui);overflow-wrap:anywhere} /* the name rides in it */
.me-tile__hint.is-you{color:var(--candle-300)}
.me-tile__hint.is-rejected{color:var(--danger)}
.me-tile__change{grid-area:change;justify-self:end;display:inline-flex;align-items:center;gap:var(--sp-1);
  color:var(--lilac-300);font:var(--fw-semibold) var(--fs-15)/var(--lh-20) var(--font-ui)}
/* No name yet: the prompt, on a dashed edge in the player's light (Surface's dashed row idea on a control), a ghost
   placeholder on a dashed plate, and the pencil alone. */
.me-tile--prompt{grid-template-areas:"art top change" "art hint hint";border-style:dashed;border-color:var(--you);background:var(--bg)}
.me-tile--prompt .me-tile__avatar{border-style:dashed;border-color:var(--plate-line);color:var(--text-2)}
/* 320px-class phones: "Change" takes its own line under the hint, so "Logged in as" never wraps beside it. */
@media (max-width:359px){ /* layout breakpoint: the narrowest phones */
  .me-tile:not(.me-tile--prompt){grid-template-columns:calc(var(--sp-12) + var(--sp-2)) minmax(0,1fr);grid-template-areas:"art top" "art name" "art hint" "art change"}
  .me-tile:not(.me-tile--prompt) .me-tile__change{justify-self:start}
}

/* The editor: a Surface row in place under the tile (no second dialog). */
.me-form{display:grid;gap:var(--sp-4);margin-top:var(--sp-2)}
.me-form__note{margin:0;color:var(--text-2);overflow-wrap:anywhere} /* the rename note holds a name */
.me-form__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.me-form__out{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2)}
.me-form__out > .me-form__note{flex:1 1 calc(var(--sp-12) * 3)} /* beside Log out, under it on the narrowest phones */

/* /join/: the tile on the page's ground in the page tiles' geometry (.game-list--page .game-tile: an 80px art box,
   sp-4 beside it, 112px tall), so its words start where the game rows' titles do. */
.me-slot--page .me-tile{grid-template-columns:calc(var(--sp-12) + var(--sp-8)) minmax(0,1fr) auto;column-gap:var(--sp-4);
  min-height:calc(var(--sp-12) * 2 + var(--sp-4));padding:var(--sp-3) var(--sp-4);background:var(--surface)}
.me-slot--page .me-tile__avatar{width:calc(var(--sp-12) + var(--sp-8));height:calc(var(--sp-12) + var(--sp-8));font-size:var(--fs-44)}
.me-slot--page .me-tile--prompt{background:var(--bg)}
@media (max-width:359px){ /* layout breakpoint: the narrowest phones ("Change" on its own line, the page's art column) */
  .me-slot--page .me-tile:not(.me-tile--prompt){grid-template-columns:calc(var(--sp-12) + var(--sp-8)) minmax(0,1fr)}
}

/* ---------- The Games list: one tile per game (the drawer) ---------- */
.game-list,.game-more{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.game-list > li,.game-more > li{display:flex;min-width:0}

/* Tiles are links (navigation), drawn as neutral outlined controls: surface-2 fill, stroke-bold line edge, lilac
   hover, the base focus ring and press. 80px tall: a 56px art cell beside three lines. */
.game-tile{display:grid;grid-template-columns:calc(var(--sp-12) + var(--sp-2)) minmax(0,1fr);align-items:center;gap:var(--sp-3);
  width:100%;min-height:calc(var(--sp-12) + var(--sp-8));padding:var(--sp-3);
  border:var(--stroke-bold) solid var(--line);border-radius:var(--r-card);background:var(--surface-2);
  color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.game-tile:hover,.game-link:hover{border-color:var(--lilac-300)}}
/* The page you are on (satellites): "You're here" under the row's words, so they keep the tile's full width. */
.game-tile[aria-current="page"]{row-gap:var(--sp-2)}
.game-tile[aria-current="page"] .game-tile__art{grid-row:span 2}
.game-tile__here{grid-column:2;justify-self:start;white-space:nowrap}

/* Art: a cell of an existing sprite, decorative (the row's words carry the meaning). 56px in the drawer. */
.game-tile__art{width:calc(var(--sp-12) + var(--sp-2));height:calc(var(--sp-12) + var(--sp-2));background-repeat:no-repeat;background-position:0 50%}
.game-tile__art--ghost{background-image:url("../assets/ghost-cast-v1.webp?v=20261016g");background-size:calc(6 * 56px) 70px;background-position:0 -8px} /* 6 cells of 192×240: the lilac ghost at 56×70, cropped to its glow */
.game-tile__art--pumpkin{background:url("../assets/pumpkin.webp?v=20261016g") center/contain no-repeat}
.game-tile__art--bat{background-image:url("../assets/secrets-batface-v1.webp?v=20261016g");background-size:calc(3 * 56px) 56px} /* 3 poses of 256×256, the first at 56px */
.game-tile__art--tomb{background-image:url("../assets/tombstone-v1.webp?v=20261016g");background-size:calc(2 * 56px) 70px;background-position:0 -11px} /* 2 stones of 240×300: the intact one at 56×70 */

/* One title, one line, at most one live hint. Each hint takes one light: gold for a personal best (reward), candle
   for your own numbers (you), spectral for what is happening now (live); the plain lines stay mist. */
.game-tile__body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.game-tile__title{margin:0;font:var(--fw-bold) var(--fs-18)/var(--lh-heading) var(--font-ui);color:var(--text)}
.game-tile__desc{font:var(--fw-medium) var(--fs-15)/var(--lh-20) var(--font-ui);color:var(--text-2)}
.game-tile__hint,.game-link__hint{font:var(--fw-semibold) var(--fs-15)/var(--lh-20) var(--font-ui);color:var(--text-2)}
.game-tile__hint.is-best{color:var(--reward)}
.game-tile__hint.is-you{color:var(--candle-300)}
.game-tile__hint.is-live{color:var(--live)}

/* ---------- Scores and more: ListRow --boxed links ---------- */
.game-link{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:calc(var(--hit) + var(--sp-3));padding:var(--sp-2) var(--sp-3);
  border:var(--hairline) solid var(--line);border-radius:var(--r-row);background:var(--bg);
  color:var(--text);text-decoration:none;-webkit-tap-highlight-color:transparent}
.game-link > .bf-ico{flex:none;color:var(--text-2)}
.game-link__text{display:flex;flex-direction:column;min-width:0}
.game-link__title{font:var(--fw-semibold) var(--fs-15)/var(--lh-20) var(--font-ui);color:var(--text)}
.game-link__desc{font:var(--fw-medium) var(--fs-14)/var(--lh-18) var(--font-ui);color:var(--text-2)}
.game-link__hint{font-size:var(--fs-14);line-height:var(--lh-18)}

/* ---------- The /join/ page: the same list as a page ---------- */
.game-list--page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
.game-list--page .game-tile{grid-template-columns:calc(var(--sp-12) + var(--sp-8)) minmax(0,1fr);gap:var(--sp-4);
  min-height:calc(var(--sp-12) * 2 + var(--sp-4));padding:var(--sp-3) var(--sp-4);background:var(--surface)} /* 112px tall: an 80px art box beside three lines */
.game-list--page .game-tile__art{width:calc(var(--sp-12) + var(--sp-8));height:calc(var(--sp-12) + var(--sp-8))}
.game-list--page .game-tile__art--ghost{background-size:calc(6 * 80px) 100px;background-position:0 -12px} /* the lilac ghost at 80×100 */
.game-list--page .game-tile__art--pumpkin{background-size:contain;background-position:center}
.game-list--page .game-tile__art--bat{background-size:calc(3 * 80px) 80px}
.game-list--page .game-tile__art--tomb{background-size:calc(2 * 80px) 100px;background-position:0 -16px} /* the intact stone at 80×100 */
.game-list--page .game-tile__title{font-size:var(--fs-20)}
.game-more__title.t-heading{margin:var(--sp-8) 0 var(--sp-3);color:var(--text);text-align:center}

/* Desktop and landscape tablets: the tiles side by side, art on top; the secondary rows in two columns. */
@media (min-width:900px){
  .game-list--page{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} /* three or four equal columns, by how many tiles show */
  .game-list--page .game-tile{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;text-align:center;padding:var(--sp-5)}
  .game-list--page .game-tile__art{width:calc(var(--sp-12) * 2 + var(--sp-6));height:calc(var(--sp-12) * 2 + var(--sp-6))} /* 120px */
  .game-list--page .game-tile__art--ghost{background-size:calc(6 * 120px) 150px;background-position:0 -18px}
  .game-list--page .game-tile__art--bat{background-size:calc(3 * 120px) 120px}
  .game-list--page .game-tile__art--tomb{background-size:calc(2 * 120px) 150px;background-position:0 -24px}
  .game-list--page .game-tile__body{align-items:center}
  .game-list--page ~ .game-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Landscape phones: two columns beside the rail. */
@media (orientation:landscape) and (max-height:500px){
  .game-list--page,.game-list--page ~ .game-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
}