/* ==========================================================================
   Hub — Der Spieltisch-Raum mit Regal und Spielschachteln
   ========================================================================== */

body.hub {
  background: radial-gradient(ellipse at 50% -10%, var(--wood-600), var(--wood-900) 55%, var(--wood-950) 100%);
  min-height: 100vh;
}

.hub-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1em 2em;
  border-bottom: 4px solid var(--brass-800);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.hub-header .rivet {
  position: absolute;
  top: 10px;
}
.hub-header .rivet:nth-of-type(1) { left: 14px; }
.hub-header .rivet:nth-of-type(2) { right: 14px; }

.hub-brand {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.hub-brand h1 {
  font-size: 1.8rem;
  color: var(--parchment-100);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.hub-brand span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--brass-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hub-player {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.hub-player button {
  background: none;
  border: none;
  color: var(--brass-500);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .hub-header {
    flex-wrap: wrap;
    row-gap: 0.6em;
    padding: 0.9em 1.2em;
  }
  .hub-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15em;
  }
  .hub-player {
    margin-left: auto;
  }
  .nameplate {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
}

@media (max-width: 380px) {
  .hub-brand span {
    display: none;
  }
}

.hub-intro {
  text-align: center;
  padding: 2.6em 1em 1.2em;
}

.hub-intro h2 {
  font-size: 2.2rem;
  color: var(--parchment-100);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 0.3em;
}

.hub-intro p {
  color: var(--parchment-400, var(--parchment-300));
  max-width: 46em;
  margin: 0 auto;
  font-size: 1.05rem;
  opacity: 0.85;
}

.shelf-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5em 2em 5em;
}

.shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 3.5em 2.5em;
  padding: 1em 1.5em 3em;
}

.shelf::before {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: 18px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--wood-500), var(--wood-700) 60%, var(--wood-900));
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.3),
    0 22px 30px rgba(0, 0, 0, 0.5);
}

.game-box {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  perspective: 800px;
}

.game-box-face {
  position: relative;
  border-radius: 10px;
  padding: 1.4em 1.3em 1.6em;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--brass-700);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-settle);
  transform: rotate(var(--tilt, -1deg)) translateY(0) translateZ(0);
}

.game-box:nth-child(4n+1) .game-box-face { --tilt: -1.4deg; }
.game-box:nth-child(4n+2) .game-box-face { --tilt: 0.8deg; }
.game-box:nth-child(4n+3) .game-box-face { --tilt: -0.6deg; }
.game-box:nth-child(4n+4) .game-box-face { --tilt: 1.2deg; }

.game-box:hover .game-box-face,
.game-box:focus-visible .game-box-face {
  transform: rotate(0deg) translateY(-14px) scale(1.02);
  box-shadow: var(--shadow-card-lift);
}

.game-box:active .game-box-face {
  transform: rotate(0deg) translateY(-6px) scale(1.005);
  transition: transform 0.08s var(--ease-settle);
}

.game-box-face .rivet {
  position: absolute;
}
.game-box-face .rivet:nth-child(1) { top: 10px; left: 10px; }
.game-box-face .rivet:nth-child(2) { top: 10px; right: 10px; }
.game-box-face .rivet:nth-child(3) { bottom: 10px; left: 10px; }
.game-box-face .rivet:nth-child(4) { bottom: 10px; right: 10px; }

.game-box-illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.6em 0 1em;
}

.game-box-title {
  font-size: 1.35rem;
  color: var(--parchment-100);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.game-box-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(240, 228, 200, 0.75);
  margin-top: 0.4em;
  line-height: 1.4;
}

.game-box-tag {
  align-self: flex-start;
  margin-top: 0.9em;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-900);
  background: var(--brass-500);
  padding: 0.3em 0.7em;
  border-radius: 999px;
}

/* --- Mini-Illustrationen der Spielschachteln (skeuomorph, kein Emoji) --- */
.illust-ttt {
  width: 96px;
  height: 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: var(--wood-900);
  box-shadow: var(--shadow-inset-deep);
}
.illust-ttt div {
  border-radius: 3px;
  background: linear-gradient(160deg, var(--wood-600), var(--wood-800));
}
.illust-ttt div.marble {
  background: radial-gradient(circle at 35% 30%, var(--marble-100), var(--marble-500) 75%);
}
.illust-ttt div.wood {
  background: radial-gradient(circle at 35% 30%, var(--wood-500), var(--wood-900) 75%);
}

.illust-c4 {
  width: 104px;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  background: var(--felt-800);
  box-shadow: var(--shadow-inset-deep);
}
.illust-c4 span {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  align-self: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
}
.illust-c4 span.a { background: radial-gradient(circle at 35% 30%, var(--wine-500), var(--wine-800)); }
.illust-c4 span.b { background: radial-gradient(circle at 35% 30%, var(--brass-500), var(--brass-800)); }
.illust-c4 span.empty { background: rgba(0,0,0,0.35); box-shadow: var(--shadow-inset-deep); }

.illust-cards {
  display: flex;
  align-items: flex-end;
}
.illust-cards .card-mini {
  width: 52px;
  height: 74px;
  border-radius: 7px;
  margin-left: -20px;
  box-shadow: var(--shadow-card);
  border: 2px solid rgba(255,255,255,0.5);
  transform-origin: bottom center;
}
.illust-cards .card-mini:nth-child(1) { transform: rotate(-16deg); background: linear-gradient(160deg, var(--wine-500), var(--wine-800)); z-index: 1; }
.illust-cards .card-mini:nth-child(2) { transform: rotate(-2deg) translateY(-6px); background: linear-gradient(160deg, var(--felt-500), var(--felt-800)); z-index: 2; }
.illust-cards .card-mini:nth-child(3) { transform: rotate(14deg); background: linear-gradient(160deg, var(--brass-500), var(--brass-800)); z-index: 1; }

/* --- Kompakte Mini-Illustrationen für die 11 zusätzlichen Spiele --- */
.illust-checker {
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-inset-deep);
}
.illust-checker span { background: var(--wood-800); }
.illust-checker span:nth-child(even) { background: var(--parchment-300); }
.illust-checker span.p0::after,
.illust-checker span.p1::after {
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  margin: 15%;
  border-radius: 50%;
}
.illust-checker span.p0::after { background: radial-gradient(circle at 32% 26%, var(--wine-500), var(--wine-800)); }
.illust-checker span.p1::after { background: radial-gradient(circle at 32% 26%, var(--brass-500), var(--brass-800)); }

.illust-rings {
  width: 84px;
  height: 84px;
  position: relative;
}
.illust-rings .ring {
  position: absolute;
  border: 3px solid var(--brass-600);
  border-radius: 4px;
}
.illust-rings .ring:nth-child(1) { inset: 0; }
.illust-rings .ring:nth-child(2) { inset: 16px; }
.illust-rings .ring:nth-child(3) { inset: 32px; }

.illust-diag {
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
}
.illust-diag span { background: rgba(0, 0, 0, 0.25); border-radius: 2px; }
.illust-diag span.on { background: var(--wine-500); }

.illust-sticks {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 84px;
}
.illust-sticks span {
  width: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--wood-400), var(--wood-700));
}
.illust-sticks span:nth-child(1) { height: 40%; }
.illust-sticks span:nth-child(2) { height: 70%; }
.illust-sticks span:nth-child(3) { height: 55%; }
.illust-sticks span:nth-child(4) { height: 85%; }

.illust-pegs {
  display: flex;
  gap: 8px;
}
.illust-pegs span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset;
}
.illust-pegs span:nth-child(1) { background: radial-gradient(circle at 35% 30%, #d86a6a, #7a2333); }
.illust-pegs span:nth-child(2) { background: radial-gradient(circle at 35% 30%, #6fbb84, #1e4030); }
.illust-pegs span:nth-child(3) { background: radial-gradient(circle at 35% 30%, #6f9bd8, #1c3252); }
.illust-pegs span:nth-child(4) { background: radial-gradient(circle at 35% 30%, #eac972, #7a5a1e); }

.illust-ship {
  width: 90px;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
}
.illust-ship span { background: var(--felt-800); border-radius: 2px; }
.illust-ship span.hull { background: var(--wood-500); }

.illust-triangle {
  width: 84px;
  height: 84px;
  position: relative;
}
.illust-triangle .dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.illust-triangle .dot.a { background: var(--wine-600); }
.illust-triangle .dot.b { background: var(--brass-600); }

.illust-rps {
  display: flex;
  gap: 10px;
}
.illust-rps .shape {
  width: 26px;
  height: 26px;
}
.illust-rps .rock { border-radius: 45% 55% 55% 45% / 55% 55% 45% 45%; background: linear-gradient(160deg, var(--wood-400), var(--wood-800)); }
.illust-rps .paper { border-radius: 3px; background: linear-gradient(160deg, var(--parchment-100), var(--parchment-300)); }
.illust-rps .scissors { border-radius: 3px; background: linear-gradient(160deg, var(--wine-500), var(--wine-800)); }

.illust-dots-grid {
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}
.illust-dots-grid span { background: rgba(0, 0, 0, 0.3); border-radius: 2px; }
.illust-dots-grid span.owned-a { background: var(--wine-600); }
.illust-dots-grid span.owned-b { background: var(--brass-600); }

.illust-cardback-pair {
  display: flex;
  gap: 8px;
}
.illust-cardback-pair .mini-back {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(212, 176, 108, 0.15) 0 6px, transparent 6px 12px), linear-gradient(160deg, var(--wine-600), var(--wine-900));
  border: 2px solid var(--brass-600);
}