body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

/* Flyttet innhold fra <style> i index.html */
:root { --bg:#ffeef8; --accent:#2b6cb0; --muted:#718096; --card:#ffffff; --glass:rgba(255,255,255,0.6); --accent-2:#1766a0; --radius:10px; }

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #1a202c;
  background: linear-gradient(180deg,#f6fbfd 0%,var(--bg) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(11,25,39,0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

header > div { font-weight:700; color:var(--accent-2); letter-spacing:0.2px; }

nav a {
  margin-left: 1rem;
  color: var(--muted);
  text-decoration: none;
  font-weight:600;
  padding: .35rem .6rem;
  border-radius: 8px;
}
nav a:hover { color: var(--accent-2); background: rgba(43,108,176,0.06); }

.container {
  max-width: 980px;
  margin: 3rem auto;
  padding: 0 1rem;
}

/* Hero card */
.hero {
  background: var(--card);
  padding: 2.25rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(11,25,39,0.06);
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
}

.hero h1 {
  margin: 0 0 .25rem 0;
  font-size: 1.9rem;
  color: #0b2545;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lead {
  color: var(--muted);
  margin-top: .5rem;
  font-size: 0.98rem;
}

/* Primary CTA */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .6rem .95rem;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(43,108,176,0.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43,108,176,0.18); }

/* Cards / articles */
article {
  background: var(--card);
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.04);
}

/* Forms */
form { margin: 0; }
label { font-weight:600; color:#2b3744; display:block; margin-bottom:.35rem; }
input[type="text"], input[type="email"], input[type="password"], textarea, .input {
  width: 100%;
  max-width: 520px;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid #e6edf3;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: .95rem;
  color: #0b2545;
  outline: none;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: rgba(43,108,176,0.85);
  box-shadow: 0 4px 18px rgba(43,108,176,0.08);
}

/* status text */
[role="status"] { margin-top:.6rem; color:var(--muted); }

/* Footer */
footer {
  margin-top: 2rem;
  padding: .75rem 0;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}

/* Utility / responsive */
@media (max-width: 720px) {
  .hero { flex-direction: column; padding: 1.25rem; }
  .hero img { max-width: 100%; height: auto; }
  .container { margin: 1.5rem auto; padding: 0 1rem; }
}

/* Small visual tweaks for twilio view */
.send-form .cta { margin-top: .5rem; }
.send-form .input { max-width: 400px; }

/* --- New helper classes used by views --- */
.center { text-align: center; }

.hero-image {
  border-radius: 8px;
  max-width: 160px;
  height: auto;
  display: inline-block;
}

.game-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.card {
  background: var(--card);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.04);
}

.form-row { margin-bottom: .75rem; }

.footer-small { margin-top: 2rem; padding: .75rem 0; color: var(--muted); font-size: .9rem; text-align: center; }

/* small responsive tweaks for game UI */
@media (max-width: 560px) {
  .game-grid { flex-direction: column; align-items: center; }
  .input { max-width: 100%; }
}