:root {
  --cream: #fffbe0;
  --cream-2: #f7f2bf;
  --aqua: #71e7e4;
  --aqua-dark: #38cbd0;
  --navy: #172345;
  --navy-2: #263255;
  --purple: #8062f5;
  --purple-2: #9a5bff;
  --yellow: #ffd84c;
  --orange: #f59c34;
  --pink: #f05b9a;
  --green: #85d553;
  --blue: #65bdf7;
  --line: rgba(20, 29, 67, .22);
  --white: #ffffff;
  --shadow: 0 12px 0 rgba(21, 25, 53, .18), 0 18px 36px rgba(42, 35, 93, .20);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--navy);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 15% 50%, #e6f3ff, transparent 25%),
              radial-gradient(circle at 85% 30%, #fff0f5, transparent 25%),
              radial-gradient(circle at 50% 80%, #f0f8ed, transparent 25%),
              #f4f7fb;
  background-attachment: fixed;
}

a { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
strong { font-weight: 950; }

.app-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom));
}
.content-area { display: grid; gap: 14px; }
.loading-card, .game-card { background: linear-gradient(180deg, var(--cream), #fff6bf); border: 5px solid var(--navy); border-radius: var(--radius); box-shadow: var(--shadow); }
.loading-card { margin: 18vh auto 0; max-width: 540px; padding: 26px; text-align: center; font-weight: 950; }

@media (max-width: 700px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
}