/* Orli v3 · games · hub and game pages
   ---------------------------------------------------------------------------
   Built only on the v2 system (../../../v2/system/system.css): its tokens,
   layout, cards, pills and the approved buttons, unchanged. Handwriting is
   the outlined Figma Hand labels (../../hand-labels), one per viewport.
   Nothing here redefines a token, a type step, a radius or a button. */

/* ------------------------------------------------------------ header: Play
   The fifth link. Same nav pill as the others; the spinning-top doodle is
   registered by lib/nav-play.js. On a games page it is the current page. */
.o-header__nav .o-nav-pill[aria-current="page"] { font-weight: var(--o-weight-ui); }

/* The world label: a dot in the world's accent and the world's name in
   outlined Figma Hand, in its deep colour (hand-labels/RULES.md). */
.g-world {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--world-deep);
  font: var(--o-weight-ui) var(--o-text-heading) / 1.15 var(--o-font-ui);
}
.g-world::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--world-accent); translate: 0 1px;
}
.g-world .hand { --hand-size: calc(var(--o-text-heading) * 1.08); }

/* ==================================================================== hub */
.g-hero { padding-block: var(--o-space-8) var(--o-space-7); }
@media (min-width: 900px) { .g-hero { padding-block: var(--o-space-9) var(--o-space-8); } }
.g-hero__title { font: var(--o-weight-title) var(--o-text-display) / var(--o-lh-display) var(--o-font-ui); letter-spacing: var(--o-track-display); }
.g-hero__title .hand { --hand-size: calc(var(--o-text-display) * 1.12); }
.g-hero .o-lead { color: var(--o-ink); }
.g-settings { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3); margin-block-start: var(--o-gap-loose); }
.g-settings__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }

/* the playable games: three link cards, the world's picture on its own stage */
.g-cards { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .g-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-card .o-card__media { --ratio: 16 / 10; background: var(--world-wash); position: relative; }
.g-card .o-card__media img { object-fit: cover; }
.g-card .o-card__body { gap: var(--o-space-2); }
.g-card__world { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--world-deep); display: inline-flex; align-items: center; gap: 8px; }
.g-card__world::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--world-accent); }
.g-card .o-card__text { max-inline-size: 34ch; }
.g-card .o-pill { position: absolute; z-index: 2; inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-3); --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }

/* the other worlds: quieter cards, the same family */
.g-more { padding-block: var(--o-space-8) var(--o-section); }
.g-cards--more .o-card__body { padding: var(--o-space-4) var(--o-space-5) var(--o-space-5); }
.g-cards--more .o-card__title { font-size: 1.125rem; }

/* Find the Orli: the one game that keeps a count (built in its own lane) */
.g-find { display: grid; gap: var(--o-space-5); align-items: center; }
@media (min-width: 900px) { .g-find { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.g-find__art { aspect-ratio: 16 / 9; border-radius: var(--o-r-card); overflow: clip; background: #141313; position: relative; }
.g-find__art img, .g-find__art canvas { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================= game page
   One column as wide as the stage can be in the window, so the title, the
   stage and the bar line up. Phones use the full width and a 4:3 stage. */
.g-page { padding-block: var(--o-space-4) var(--o-space-8); }
.g-wrap {
  --chrome: 368px;
  width: min(100% - 2 * var(--o-gutter), max(640px, (100svh - var(--chrome)) * var(--stage-ratio, 16 / 9)), var(--o-max-wide));
  margin-inline: auto;
}
.g-top { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3); flex-wrap: wrap; }
.g-back { margin-inline-start: calc(-1 * var(--o-space-3)); }
.g-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--o-space-4) var(--o-space-6);
  margin-block: var(--o-space-3) var(--o-space-5);
}
.g-head__words { display: grid; gap: var(--o-space-2); min-width: 0; }
.g-title { font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui); letter-spacing: var(--o-track-title); text-wrap: balance; }
.g-controls { display: flex; flex-wrap: wrap; gap: var(--o-space-2); }

/* the stage: one frame, the game's own ground */
.g-play { position: relative; }
.g-stage {
  position: relative; isolation: isolate;
  width: 100%;
  aspect-ratio: var(--stage-ratio, 16 / 9);
  border-radius: var(--o-r-card); overflow: clip;
  background: var(--world-stage);
  box-shadow: inset 0 0 0 1px rgb(47 46 43 / .06), var(--o-shadow);
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 699.98px) {
  .g-wrap { width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); }
  .g-stage { --stage-ratio: var(--stage-ratio-phone, 4 / 3); }
}
.g-stage > :is(img, canvas, picture) { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-stage > img { object-fit: cover; object-position: var(--plate-x, 50%) var(--plate-y, 50%); }

.g-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--o-space-3) var(--o-space-5);
  margin-block-start: var(--o-space-4);
  min-height: 44px;
}
.g-howto { flex: 1 1 18rem; min-width: 0; color: var(--o-ink-2); font-size: var(--o-text-small); line-height: var(--o-lh-small); text-wrap: pretty; }
.g-howto[data-tone="done"] { color: var(--o-ink); font-weight: 600; }
.g-howto kbd { font: 650 .8125rem/1 var(--o-font-ui); padding: 3px 7px; border-radius: 6px; background: var(--o-surface); border: 1px solid var(--o-n2); box-shadow: 0 1.5px 0 var(--o-n2); }
@media (hover: none) and (pointer: coarse) { .g-keys { display: none; } }

/* invisible, real buttons laid over things in a picture */
.g-hits { position: absolute; inset: 0; z-index: 3; }
.g-hit {
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: none;
}
.g-hit:focus-visible { outline: 3px solid var(--o-focus); outline-offset: 2px; box-shadow: 0 0 0 7px rgb(255 255 255 / .85); }

/* a status tag on paper, top left of a picture (Concept, Generated) */
.g-tag { position: absolute; z-index: 4; inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-3); --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }

.o-vh, .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* phones: the game comes straight after its title; the controls follow the
   instruction, in one row */
@media (max-width: 699.98px) {
  .g-wrap { display: flex; flex-direction: column; }
  .g-head { display: contents; }
  .g-head__words { order: 1; margin-block: var(--o-space-3) var(--o-space-4); }
  .g-top { order: 0; }
  .g-play { order: 2; }
  .g-controls { order: 3; margin-block-start: var(--o-space-4); }
  .g-controls .o-btn { flex: 1 1 auto; }
}

@media (forced-colors: active) {
  .g-stage { border: 1px solid CanvasText; }
  .g-hit:focus-visible { outline-color: Highlight; }
}

/* hub details */
.g-now { padding-block-end: var(--o-space-6); }
.g-card__go { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--world-deep); }
.g-verify { color: var(--o-ink-2); font-weight: 400; }
.g-find-band .o-section-head { margin-block-end: 0; }
.g-hero .o-section-head { margin-block-end: 0; }