/* ---------- Lobby ---------- */
.lobby {
  min-height: 100dvh;
  padding: max(22px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

.lobby__head {
  width: min(100%, 980px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lobby__head .soft-btn { white-space: nowrap; }
.lobby__actions { display: flex; align-items: center; gap: 8px; }
/* Brand, language and code button share one row down to small phones */
@media (max-width: 420px) {
  .lobby__head { gap: 6px; }
  .lobby__actions { gap: 6px; }
  .lobby__head .soft-btn, .lobby__head .lang { font-size: .92rem; }
  .lobby__head .soft-btn { padding: 0 .8em; }
  /* Just the globe: the menu itself names every language */
  .lobby__head .lang { padding: 0; }
  .lobby__head .lang__current svg:first-child { display: block; width: 20px; height: 20px; }
  .lobby__head .lang__short, .lobby__head .lang__current svg:last-child { display: none; }
  .lobby .brand { gap: 8px; font-size: clamp(.92rem, 4.4vw, 1rem); }
}
/* Narrower than any current phone: keep the mark, drop the wordmark (still read by screen readers) */
@media (max-width: 340px) {
  .lobby .brand { font-size: 0; }
}
.brand {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 4.4vw, 1.15rem);
  white-space: nowrap;
  letter-spacing: -.03em;
}
/* Two small cards, about as tall as the wordmark's capitals plus a little */
.brand__mark {
  width: 17px; height: 23px;
  position: relative;
  margin-left: 3px;
}
.brand__mark span {
  position: absolute; inset: 0;
  border-radius: 4px;
  background: var(--ink);
}
/* Back card solid, front card in outline on top, so the two never merge into one shape */
.brand__mark span:first-child { rotate: -12deg; translate: -3px 1px; }
.brand__mark span:last-child {
  rotate: 6deg; translate: 3px 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.6px var(--ink);
}

.lobby__intro {
  width: min(100%, 980px);
  margin: clamp(10px, 3vw, 24px) 0 0;
}
.lobby__intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.04em;
}
/* Who it's for, then a quieter line with what it doesn't need */
.lobby__who {
  margin: 14px 0 0;
  font-size: clamp(1.1rem, 4.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
}
.lobby__free {
  margin: 4px 0 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

.shelf {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 40vw), 1fr));
  justify-items: center;
  gap: 36px 24px;
  padding: 12px clamp(12px, 3vw, 36px);
}

/* ---------- Deck box: flat, front-on, with a pile of card edges below ---------- */
.box {
  --w: clamp(112px, 33vw, 170px);
  --h: calc(var(--w) * 1.42);
  --thickness: 9px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  color: inherit;
  text-decoration: none;
}
.box:focus-visible { outline: none; }
.box:focus-visible .box__front { outline: 3px solid #4b4dff; outline-offset: 4px; }

.box__stage { position: relative; padding-bottom: var(--thickness); }
.box__stage::before {
  /* contact shadow under the pile, same as the table decks */
  content: "";
  position: absolute; inset: 10% 4% -3%;
  border-radius: 10px;
  background: rgba(40,30,20,.22);
  filter: blur(8px);
  transition: transform .3s var(--ease-out), opacity .3s;
}
.box:hover .box__stage::before { transform: scale(.94); opacity: .7; }

.box__body {
  position: relative;
  width: var(--w); height: var(--h);
  transition: transform .3s var(--ease-out);
}
.box:hover .box__body,
.box:focus-visible .box__body { transform: translateY(-6px); }
.box:active .box__body { transform: translateY(-1px) scale(.98); }

.box__front {
  position: absolute; inset: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--a);
  /* card edges of the pile underneath */
  box-shadow:
    0 1.5px 0 #fdfcfa, 0 3px 0 #dcd7cf, 0 4.5px 0 #fdfcfa,
    0 6px 0 #dcd7cf, 0 7.5px 0 #fdfcfa, 0 9px 0 #dcd7cf;
}
.box__front .card-back__art { position: absolute; inset: 0; width: 100%; height: 100%; }

.box__band {
  position: absolute; left: 0; right: 0; bottom: 7%;
  padding: calc(var(--w) * .07) calc(var(--w) * .08);
  background: var(--paper);
  color: var(--ink);
}
.box__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--w) * .13);
  line-height: 1;
  letter-spacing: -.03em;
  /* Room for two lines on every box, so all the bands are the same height */
  min-height: 2em;
  display: flex; align-items: flex-end;
}
.box__brand {
  display: block;
  margin-top: 5px;
  font-size: calc(var(--w) * .055);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.box__meta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-soft);
}
.box__meta strong { color: var(--ink); font-weight: 600; }

/* Boxes not available yet */
.box--soon { cursor: default; pointer-events: none; }
.sticker {
  position: absolute; z-index: 3;
  top: 7%; right: -9%;
  width: calc(var(--w) * .36); aspect-ratio: 1;
  display: grid; place-items: center;
  rotate: 12deg;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--w) * .085);
  text-transform: uppercase;
  color: var(--ink);
  background: #ffd400;
}
.box--soon .box__front { opacity: .5; filter: grayscale(.4); }