/* Shared chrome for the three hub pages: / , /play/ , /study/ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(160deg, #10162a 0%, #1a2340 55%, #232c4d 100%);
  color: #eef1f9;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; padding: 24px 20px 40px; overflow-x: hidden; position: relative;
}
.cube {
  position: absolute; width: 26px; height: 26px; opacity: .18; border-radius: 4px;
  animation: floaty 9s ease-in-out infinite; pointer-events: none;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50%      { transform: translateY(-26px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .cube { animation: none; } }

.top { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 12px; min-height: 34px; }
.back {
  color: #9aa7c7; text-decoration: none; font-size: .9rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
.back:hover { color: #eef1f9; border-color: rgba(255,255,255,.3); }

.head { text-align: center; margin: clamp(24px, 7vh, 64px) 0 34px; }
h1 { font-size: clamp(1.7rem, 5.4vw, 2.5rem); font-weight: 800; letter-spacing: .5px; }
.tag { color: #9aa7c7; margin-top: 8px; font-size: .95rem; }

.cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 900px; }
a.card {
  flex: 1 1 270px; max-width: 380px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 28px 24px; text-align: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
a.card:hover, a.card:active { transform: translateY(-4px); background: rgba(255,255,255,.09); }
a.card:focus-visible { outline: 2px solid #7c95ff; outline-offset: 3px; }
a.card .emoji { font-size: 3rem; display: block; margin-bottom: 12px; }
a.card h2 { font-size: 1.25rem; margin-bottom: 6px; }
a.card p { color: #9aa7c7; font-size: .9rem; line-height: 1.55; flex: 1; }
a.card .cta {
  display: inline-block; margin-top: 18px; font-weight: 700; font-size: .95rem;
  padding: 12px 26px; border-radius: 999px; align-self: center; min-width: 150px;
}

/* the two front doors are bigger than the cards behind them */
.doors { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 820px; }
a.door { flex: 1 1 320px; max-width: 400px; padding: 44px 30px; }
a.door .emoji { font-size: 4rem; }
a.door h2 { font-size: 1.75rem; }
a.door .sub { color: #7f8cad; font-size: .82rem; margin-top: 10px; line-height: 1.6; }

a.card.play  { border-color: rgba(122, 220, 120, .38); }
a.card.play  .cta { background: #3ec46d; color: #06220f; }
a.card.study { border-color: rgba(124, 149, 255, .42); }
a.card.study .cta { background: #7c95ff; color: #101638; }
a.card.ink { border-color: #ff537d; background: linear-gradient(135deg, #ff537d18, #34d8ee12); }
a.card.ink .cta { background: #e3ff52; color: #16200b; }
a.card.english { border-color: rgba(255, 217, 74, .45); }
a.card.english .cta { background: #ffd94a; color: #3a2e05; }
a.card.correct { border-color: rgba(233, 88, 66, .45); }
a.card.correct .cta { background: #e95842; color: #fff; }
a.card.vocab { border-color: rgba(146, 118, 220, .5); }
a.card.vocab .cta { background: #9276dc; color: #fff; }
a.card.oral { border-color: rgba(60, 190, 175, .5); }
a.card.oral .cta { background: #3cbeaf; color: #04241f; }

footer { margin-top: auto; padding-top: 46px; color: #5d6a8c; font-size: .8rem; text-align: center; }