/*
 * Hub, progress and admin pages on the shared frame (/mg/frame.css, plan 012).
 * Only page parts live here: the mark, game cards, sign-in fields, lists.
 * Created: 2026-10-20 · Updated: 2026-10-21 (plan 012: frame, Lexend, one slot; plan 016: card motion)
 */
.contents { display: contents; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.mark { display: block; width: 96px; height: 96px; color: var(--mg-mark); }
.lead { margin: 0; max-width: 22rem; }
#signin-error { color: var(--mg-danger); }

/* Game cards: the picture is the memorable part; the whole card is the link. */
.cards { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.mg-card {
  width: 100%; min-height: 128px; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 16px; border: 1px solid var(--mg-border); border-radius: var(--mg-radius);
  background: var(--mg-surface); color: var(--mg-text); text-align: left; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mg-card:active { background: var(--mg-surface-2); }
.mg-card b { display: block; font-size: var(--mg-size-title); font-weight: 600; line-height: 1.2; }
.mg-card .level { display: block; width: fit-content; min-height: 1.35em; }
/* The card's Sun pop stays inside the level's own line, so it never reaches the game's name above:
   an oval glow behind "Level N" and a short fan of rays just after it (anim.css draws a round sun). */
.mg-card .level.mg-sun-pop::before { width: calc(100% + 24px); height: 1.35em; margin: -.675em 0 0 calc(-50% - 12px); }
.mg-card .level.mg-sun-pop::after {
  left: 100%; width: calc(1.35em * 14 / 24); height: 1.35em; margin: -.675em 0 0 5px;
  -webkit-mask: var(--hub-ray-mask) left center / contain no-repeat; mask: var(--hub-ray-mask) left center / contain no-repeat;
  transform-origin: 0 50%; animation-name: mg-once-hub-rays;
}
:root { --hub-ray-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 14 24'%3E%3Cg stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.8 -4.1L6.2 -9.1'/%3E%3Cpath d='M4.4 -2.3L9.7 -5.2'/%3E%3Cpath d='M5.0 0.0L11.0 0.0'/%3E%3Cpath d='M4.4 2.3L9.7 5.2'/%3E%3Cpath d='M2.8 4.1L6.2 9.1'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes mg-once-hub-rays {
  0%   { opacity: 0;   transform: translateX(-4px) scaleX(.6); }
  30%  { opacity: .85; }
  100% { opacity: 0;   transform: none; }
}
.mg-card .pic {
  width: 96px; height: 96px; border-radius: var(--mg-radius-sm); display: grid; place-items: center;
  background: var(--mg-surface-2);
}
.mg-card .pic svg { width: 64px; height: 64px; }
.pic.pepper { color: #e9a93a; }
.pic.mole { color: #6e5a63; }

/*
 * Card motion (plan 016, /mg/anim.css contract). Only the card art moves,
 * never the card. The svg clips its art, so the mole ducks out of sight at
 * its bottom edge and the worm hides behind the pepper.
 *   Welcome back  .pic.is-back on the card just left: the mole bobs up and
 *                 waves, or the worm peeks out of the pepper. Once, 1.2 s.
 *   Level up      .level.is-up: the new level rises in gold over the Sun pop.
 *   Idle loop     6 s: the pepper sways, the mole breathes and blinks once.
 *                 Runs only in data-mg-scene="start" (the chooser, ☰ shut).
 */
.pic svg * { transform-box: view-box; }
.hub-peek { opacity: 0; transform: translate(-6px, 7px); }        /* rest: behind the pepper */
.hub-sway { transform-origin: 24px 44px; }
.hub-breathe { transform-origin: 24px 47px; }
.hub-blink { transform-origin: 24px 20.5px; }
.hub-paw { transform-origin: 34px 46px; }

.pic.is-back .hub-bob { animation: mg-once-hub-bob var(--mg-once-short) var(--mg-ease-out) both; }
.pic.is-back .hub-paw { animation: mg-once-hub-wave var(--mg-once-short) var(--mg-ease-breathe) both; }
.pic.is-back .hub-peek { animation: mg-once-hub-peek var(--mg-once-short) var(--mg-ease-out) both; }
.mg-card .level.is-up { animation: mg-once-hub-level var(--mg-once-sun) var(--mg-ease-pop) both; }

.hub-sway { animation: mg-loop-hub-sway var(--mg-loop-idle) var(--mg-ease-breathe) infinite; }
.hub-breathe { animation: mg-loop-hub-breathe var(--mg-loop-idle) var(--mg-ease-breathe) -3s infinite; }
.hub-blink { animation: mg-loop-hub-blink var(--mg-loop-idle) linear -3s infinite; }
:root { --mg-loop-idle: 6000ms; }

@keyframes mg-once-hub-bob {
  0%   { transform: translateY(18px); }
  28%  { transform: translateY(-2px); }
  38%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes mg-once-hub-wave {
  0%, 26% { transform: translateY(0) rotate(0); }
  38%  { transform: translateY(-9px) rotate(-14deg); }
  50%  { transform: translateY(-9px) rotate(12deg); }
  62%  { transform: translateY(-9px) rotate(-14deg); }
  74%  { transform: translateY(-9px) rotate(6deg); }
  90%, 100% { transform: translateY(0) rotate(0); }
}
@keyframes mg-once-hub-peek {
  0%, 12% { opacity: 0; transform: translate(-6px, 7px); }
  20%  { opacity: 1; }
  34%  { transform: translate(0, 0) rotate(0); }
  48%  { transform: translate(0, 0) rotate(-7deg); }
  62%  { transform: translate(0, 0) rotate(5deg); }
  74%  { transform: translate(0, 0) rotate(0); }
  92%  { opacity: 1; transform: translate(-6px, 7px); }
  100% { opacity: 0; transform: translate(-6px, 7px); }
}
@keyframes mg-once-hub-level {
  0%   { opacity: 0; transform: translateY(8px); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mg-loop-hub-sway {
  0%, 100% { transform: rotate(0); }
  25%  { transform: rotate(-2deg); }
  75%  { transform: rotate(2deg); }
}
@keyframes mg-loop-hub-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%  { transform: scale(1.015, 1.03); }
}
@keyframes mg-loop-hub-blink {
  0%, 46%, 50%, 100% { transform: scaleY(1); }
  48%  { transform: scaleY(.1); }
}

/* Google mark on the primary */
.g-logo { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.g-logo svg { width: 22px; height: 22px; }

/* Grown-up fields */
.field { display: flex; flex-direction: column; gap: 6px; color: var(--mg-text-muted); }
.field input, .rules input {
  height: 56px; padding: 0 16px; border-radius: var(--mg-radius-sm);
  border: 1px solid var(--mg-border); background: var(--mg-surface); color: var(--mg-text); font: inherit;
}
.field input:focus-visible, .rules input:focus-visible { outline: 3px solid var(--mg-focus); outline-offset: 2px; }
.mg-content > .field + .field { margin-top: 0; }
.account { margin: 8px 4px 0; overflow-wrap: anywhere; }
.mg-row label { flex: 1; cursor: pointer; }

/* Progress and admin lists */
.group { margin: 0; font-size: var(--mg-size-title); font-weight: 600; line-height: 1.2; }
.group + p { margin: -8px 0 0; }
.mg-content.is-list > section { display: flex; flex-direction: column; gap: 8px; }
.mg-content.is-list > section + section { margin-top: 16px; }
.mg-content p { margin: 0; }

/* Fluid art (plan 016 iPad): the mark and the card pictures grow by a third with the frame
   (--mg-grow, 0 at 390 wide), so the 390 phone is unchanged. */
svg.mark { width: calc(96px + var(--mg-grow) * 0.128); height: calc(96px + var(--mg-grow) * 0.128); }
.mg-card { min-height: calc(128px + var(--mg-grow) * 0.128); grid-template-columns: calc(96px + var(--mg-grow) * 0.128) minmax(0, 1fr); }
.mg-card .pic { width: calc(96px + var(--mg-grow) * 0.128); height: calc(96px + var(--mg-grow) * 0.128); }
.mg-card .pic svg { width: calc(64px + var(--mg-grow) * 0.0853); height: calc(64px + var(--mg-grow) * 0.0853); }