/* Hub: toys laid out on a table. Chrome stays quiet. */

.hub main { padding-block: 16px 40px; }

.hub-lede {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 22ch;
  line-height: 1.2;
}
.hub-date { color: var(--ink-2); margin-top: 8px; }

.table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 4vw, 40px);
  margin-top: 28px;
  align-items: start;
}

.toy {
  display: grid;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  border-radius: 20px;
  padding: 4px;
}
.toy:focus-visible { outline: 3px solid var(--brand); outline-offset: 6px; }

.toy-preview {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.toy:hover .toy-preview, .toy:focus-visible .toy-preview { transform: translateY(-4px) rotate(-1deg); }

.toy-preview-pegs svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 14px rgba(29,35,51,.35)); }
.toy-preview-pegs .hole { fill: #2a1608; }
.toy-preview-pegs .peg { fill: #E3A93B; stroke: #a9731f; stroke-width: .8; }
.toy-preview-pegs .peg-hi { fill: #fff1c2; opacity: .9; }

.mini-panel {
  width: 78%;
  padding: 7%;
  border-radius: 22px;
  background: linear-gradient(160deg, #3a3e47 0%, var(--charcoal) 40%, #1f2227 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.45), 0 18px 22px -14px rgba(29,35,51,.7);
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .3em;      /* not %: a percentage row-gap in an auto-height grid overflows the box */
  padding: .4em;
  border-radius: 12px;
  background: #15171b;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8);
}
.mini-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 22%;
  background: radial-gradient(circle at 50% 40%, #4a4f5a 0%, #33373f 60%, #262930 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 2px 0 #0d0e11;
}
.mini-grid i.on {
  background: radial-gradient(circle at 50% 38%, #ffd9cf 0%, #ff7f66 22%, var(--signal) 55%, #b8231a 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 2px 0 #0d0e11, 0 0 8px 2px rgba(255,58,45,.5);
}

.toy-preview-ghost {
  border: 3px dashed var(--line);
  border-radius: var(--radius-toy);
  color: var(--line);
  font-family: var(--font-display);
  font-size: 64px;
}
.toy-ghost { color: var(--ink-2); }
.toy-ghost .toy-name { color: var(--ink-2); }

.toy-name {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
}
.toy-blurb { color: var(--ink-2); margin: 0; }
.toy-status { margin: 2px 0 6px; font-weight: 600; min-height: 1.5em; }
.toy-status.done { color: var(--ok); }
.toy-cta { justify-self: start; }

.hub-footer { padding-block: 8px 40px; color: var(--ink-2); font-size: 14px; }

.mini-handheld {
  width: 74%;
  padding: 7%;
  border-radius: 22px;
  background: linear-gradient(160deg, #F7F3EA 0%, var(--bone) 45%, #E3DCCB 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 0 #CFC6B2, 0 18px 22px -14px rgba(29,35,51,.6);
}
.mini-readout {
  padding: 4px 8px;
  border-radius: 6px;
  background: #101214;
  color: var(--signal);
  font: 700 14px/1.2 ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 0 6px rgba(255,58,45,.8);
  text-align: center;
  letter-spacing: .06em;
}
.mini-field {
  position: relative;
  margin-top: 8px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, #1f4d37 0%, var(--field) 70%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.7);
}
.mini-diamond { position: absolute; left: 50%; top: 48%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid rgba(255,255,255,.18); border-radius: 3px; }
.mini-base, .mini-ball { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #3a2222; }
.mini-base.on, .mini-ball { background: var(--signal); box-shadow: 0 0 8px 2px rgba(255,58,45,.6); }
.mini-base-1 { left: 82.5%; top: 48%; } .mini-base-2 { left: 50%; top: 15.5%; } .mini-base-3 { left: 17.5%; top: 48%; }
.mini-ball { left: 50%; top: 62%; }