/* gamehead.css — the header above each game (.phead--game in index.html).
 *
 * Hallmark · component: page header · genre: atmospheric · theme: house (obsidian and lava gold)
 * states: default · hover · focus · active · open (the "How it works" bubble)
 *
 * The game pages opened on the site-wide page title: the name at 2.7rem with a 15px "i" beside
 * it. Above a game that is the loudest thing on the screen and says the least; the game is what a
 * player came for. This is the lobby card in miniature instead: the item, the name, the
 * DonutLuxe Originals line, and "How it works" as a button you can find. The text it opens is the
 * same hint the "i" carried (ui.js opens it on touch, the bubble below on hover and focus).
 *
 * Linked after matte.css, which owns .ihint, so the overrides here win on equal specificity.
 * House tokens only; the one named below is the house gold at low alpha. */

:root { --gh-wash: rgba(255, 190, 40, .3); }

.phead--game {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-size: 1rem; line-height: normal; letter-spacing: normal;
}

.phead__ico {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-edge); border-radius: var(--r-soft);
  background: radial-gradient(70% 70% at 50% 50%, var(--gh-wash), transparent 75%), var(--mat-lava);
}
.phead__ico img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }

.phead__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phead--game h1 {
  display: block; margin: 0;
  font-size: 1.375rem; line-height: 1.1; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.phead__tag {
  font: 700 .625rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-body);
}

/* "How it works": the old hint, as a pill at the far end of the row. */
.phead--game .phead__how {
  flex: none; margin: 0 0 0 auto;
  width: auto; height: 36px; padding: 0 14px 0 10px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ob-line); border-radius: 999px;
  background: var(--panel); color: var(--muted);
  font: 700 .8125rem/1 var(--body);
  cursor: pointer;
  transition: color var(--ob-quick), border-color var(--ob-quick), background var(--ob-quick);
}
.phead--game .phead__how::before {
  content: "i";
  display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid currentColor;
  font: italic 800 10px/1 var(--body);
}
.phead--game .phead__how:hover { color: var(--text); border-color: var(--ob-line-hi); background: var(--panel2); }
.phead--game .phead__how:focus-visible { color: var(--text); outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.phead--game .phead__how:active { transform: translateY(1px); }
.phead--game .phead__how[aria-expanded="true"] { color: var(--gold-bright); border-color: var(--gold-edge); }

/* The bubble opens below the pill and lines up with its right edge: above it would slide under
   the sticky header, and centred it would run off the right of the screen. */
.phead--game .phead__how::after {
  top: calc(100% + 8px); bottom: auto;
  left: auto; right: 0;
  transform: translateY(-3px);
}
.phead--game .phead__how:hover::after,
.phead--game .phead__how:focus-visible::after { transform: translateY(0); }

/* A finger: the pill grows to a full 44px target (matte.css shrinks every hint's ring to 15px
   inside a 29px box on touch screens; this one is a button and keeps its own shape). */
@media (hover: none) {
  .phead--game .phead__how,
  .phead--game .phead__how:hover,
  .phead--game .phead__how:focus-visible {
    height: 44px; margin: 0 0 0 auto;
    border-color: var(--ob-line); background: var(--panel);
  }
}

/* A narrow phone: the pill keeps its "i" and gives up its words, so the game's name has the row. */
@media (max-width: 420px) {
  .phead--game .phead__how { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .phead--game .phead__how::before { width: 18px; height: 18px; }
  .phead__howtxt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phead--game .phead__how { transition: none; }
  .phead--game .phead__how:active { transform: none; }
}