:root{
  --sky-dawn:#6EC6E8;
  --balloon-red:#E8543E;
  --balloon-red-dark:#C63C2C;
  --balloon-cream:#FDF6E9;
  --sky-dusk:#F4907A;
  --night-indigo:#1B1F4B;
  --ink:#1A1A2E;
  --gold:#F2B84B;
  --panel-bg: rgba(20, 18, 40, 0.55);
  --panel-bg-solid: #201C3D;
}

*{ box-sizing:border-box; }

html, body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden; background:#0B0E2E;
  font-family:'Inter', system-ui, sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* ============ Shared typography ============ */
.title{
  font-family:'Baloo 2', sans-serif; font-weight:800;
  font-size:clamp(30px, 7vw, 42px);
  color:var(--balloon-cream);
  margin:0 0 6px;
  text-shadow:0 3px 0 rgba(0,0,0,0.25);
}

.subtitle{
  color:rgba(253,246,233,0.78); font-size:14.5px; line-height:1.55;
  margin:0 0 22px;
}

.hint{
  font-size:12px; color:rgba(253,246,233,0.5);
}

/* ============ Shared card panel (used by game overlays + menu) ============ */
.card{
  background:linear-gradient(180deg, rgba(32,28,61,0.92), rgba(18,16,36,0.94));
  border-top:4px solid var(--gold);
  border-radius:22px;
  padding:34px 38px 30px;
  max-width:420px; width:88%;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  animation:cardIn 0.35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(14px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ============ Shared buttons ============ */
.btn{
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:18px;
  color:var(--balloon-cream);
  background:linear-gradient(180deg, #F0745F, var(--balloon-red) 55%, var(--balloon-red-dark));
  border:none; border-radius:14px;
  padding:13px 30px;
  cursor:pointer;
  box-shadow:0 6px 0 var(--balloon-red-dark), 0 10px 18px rgba(0,0,0,0.3);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
  text-decoration:none;
  display:inline-block;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--balloon-red-dark), 0 4px 10px rgba(0,0,0,0.25); }
.btn:focus-visible{ outline:3px solid var(--balloon-cream); outline-offset:3px; }

.btn-secondary{
  background:rgba(253,246,233,0.08);
  color:var(--balloon-cream);
  box-shadow:none;
  border:2px solid rgba(253,246,233,0.28);
}
.btn-secondary:hover{ background:rgba(253,246,233,0.14); }
.btn-secondary:active{ transform:translateY(2px); }

.btn-quit{
  background:transparent;
  color:rgba(253,246,233,0.55);
  box-shadow:none;
  border:2px solid rgba(198,60,44,0.4);
  font-size:15px;
  padding:10px 28px;
}
.btn-quit:hover{ background:rgba(198,60,44,0.14); color:var(--balloon-cream); border-color:rgba(198,60,44,0.7); }
.btn-quit:active{ transform:translateY(2px); }

/* ============ Badge ============ */
.badge{
  display:inline-block; background:var(--gold); color:#3B2A0E;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.badge.hidden{ display:none; }

@media (max-width:420px){
  .card{ padding:26px 22px 24px; }
}