/* ======================================================================
   LongScience — shared site styles
   Used by every page: root lobby, subject lobbies, and all games.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --ls-bg-1:#1e1b4b;
  --ls-bg-2:#0f172a;
  --ls-purple:#7c3aed;
  --ls-purple-dark:#5b21b6;
  --ls-blue:#2563eb;
  --ls-teal:#0d9488;
  --ls-pink:#db2777;
  --ls-orange:#ea580c;
  --ls-green:#16a34a;
  --ls-yellow:#f59e0b;
  --ls-red:#dc2626;
  --ls-card:#ffffff;
  --ls-card-ink:#1f2333;
  --ls-muted:#6b7280;
  --ls-radius:20px;
  --ls-shadow: 0 10px 30px rgba(15,23,42,.35);
  font-size:16px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  min-height:100%;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#eef0ff;
  background:
    radial-gradient(1200px 600px at 10% -10%, #4c1d95 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #0e7490 0%, transparent 55%),
    linear-gradient(160deg, var(--ls-bg-1), var(--ls-bg-2) 70%);
  background-attachment:fixed;
}

h1,h2,h3,h4{
  font-family:'Fredoka', 'Nunito', sans-serif;
  margin:0 0 .4em;
  letter-spacing:.2px;
}

a{color:inherit;}

.ls-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:32px 20px 60px;
}

.ls-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:28px;
}

.ls-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Fredoka', sans-serif;
  font-size:1.5rem;
  font-weight:600;
  text-decoration:none;
}
.ls-brand .ls-logo-dot{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#facc15,#fb7185);
  box-shadow:0 0 14px 2px rgba(250,204,21,.6);
}

.ls-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#eef0ff;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  transition:background .15s ease, transform .15s ease;
}
.ls-back:hover{background:rgba(255,255,255,.16); transform:translateY(-1px);}

.ls-scoreboard{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 16px;
  border-radius:999px;
  font-weight:800;
  font-family:'Fredoka', sans-serif;
}
.ls-scoreboard .ls-score-icon{font-size:1.1rem;}
.ls-scoreboard .ls-score-num{
  color:#fde68a;
  font-size:1.15rem;
}

.ls-card{
  background:var(--ls-card);
  color:var(--ls-card-ink);
  border-radius:var(--ls-radius);
  box-shadow:var(--ls-shadow);
  padding:28px;
}

.ls-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--ls-radius);
  padding:24px;
}

.ls-subtitle{
  color:#c7cbf5;
  font-size:1.05rem;
  margin-bottom:28px;
}

.ls-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:22px;
}

.ls-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(160deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  color:var(--ls-card-ink);
  border-radius:var(--ls-radius);
  padding:26px;
  text-decoration:none;
  box-shadow:var(--ls-shadow);
  border:1px solid rgba(255,255,255,.4);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.ls-tile:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 18px 40px rgba(15,23,42,.45);
}
.ls-tile .ls-tile-emoji{
  font-size:2.6rem;
  line-height:1;
}
.ls-tile h3{
  font-size:1.35rem;
  margin:0;
}
.ls-tile p{
  margin:0;
  color:var(--ls-muted);
  font-size:.95rem;
  line-height:1.4;
}
.ls-tile .ls-tile-cta{
  margin-top:auto;
  font-weight:800;
  color:var(--ls-purple-dark);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.92rem;
}
.ls-tile-stripe{
  position:absolute; top:0; left:0; right:0; height:8px;
}
.ls-tile-stripe.bio{background:linear-gradient(90deg,var(--ls-green),var(--ls-teal));}
.ls-tile-stripe.ana{background:linear-gradient(90deg,var(--ls-pink),var(--ls-orange));}

.ls-empty{
  padding:36px;
  text-align:center;
  color:#c7cbf5;
  border:2px dashed rgba(255,255,255,.25);
  border-radius:var(--ls-radius);
}

/* Buttons */
.ls-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:12px 22px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ls-btn:active{transform:translateY(1px) scale(.98);}
.ls-btn-primary{
  background:linear-gradient(135deg,var(--ls-purple),var(--ls-blue));
  color:#fff;
  box-shadow:0 8px 20px rgba(124,58,237,.45);
}
.ls-btn-primary:hover{filter:brightness(1.08);}
.ls-btn-gold{
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#1f2333;
  box-shadow:0 8px 20px rgba(245,158,11,.45);
}
.ls-btn-gold:hover{filter:brightness(1.06);}
.ls-btn-ghost{
  background:rgba(255,255,255,.1);
  color:#eef0ff;
  border:1px solid rgba(255,255,255,.28);
}
.ls-btn-ghost:hover{background:rgba(255,255,255,.18);}
.ls-btn:disabled{opacity:.45; cursor:not-allowed; filter:none; box-shadow:none;}

/* Password gate */
.ls-gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.ls-gate-card{
  width:100%;
  max-width:420px;
  text-align:center;
  padding:40px 34px;
}
.ls-gate-card .ls-tile-emoji{font-size:3rem;}
.ls-gate-card input[type="password"], .ls-gate-card input[type="text"]{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:2px solid #e5e7eb;
  font-size:1.05rem;
  font-family:'Nunito', sans-serif;
  margin:18px 0 8px;
  text-align:center;
  letter-spacing:1px;
}
.ls-gate-card input:focus{outline:none; border-color:var(--ls-purple);}
.ls-error{
  color:var(--ls-red);
  font-weight:700;
  min-height:1.4em;
  font-size:.92rem;
}

/* Modal overlay (used by memory bonus game) */
.ls-modal-overlay{
  position:fixed; inset:0;
  background:rgba(10,10,25,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
  padding:20px;
}
.ls-modal{
  background:#fff;
  color:var(--ls-card-ink);
  border-radius:22px;
  max-width:480px;
  width:100%;
  padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  max-height:90vh;
  overflow-y:auto;
}

/* Memory bonus game */
.ls-mem-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.ls-mem-head .ls-tile-emoji{font-size:2rem;}
.ls-mem-sub{color:var(--ls-muted); font-size:.92rem; margin-bottom:18px;}
.ls-mem-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0;
}
.ls-mem-row label{font-weight:800; font-size:.95rem;}
.ls-mem-row input[type="number"]{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid #e5e7eb;
  font-size:1.1rem;
  font-family:'Fredoka', sans-serif;
  text-align:center;
}
.ls-mem-row input:focus{outline:none; border-color:var(--ls-purple);}
.ls-mem-stake-btns{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px;}
.ls-mem-stake-btns button{
  border:2px solid #e5e7eb; background:#f8fafc; color:var(--ls-card-ink);
  border-radius:10px; padding:6px 12px; font-weight:800; cursor:pointer; font-size:.85rem;
}
.ls-mem-stake-btns button:hover{border-color:var(--ls-purple);}
.ls-mem-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:20px auto;
  max-width:320px;
}
.ls-mem-tile{
  aspect-ratio:1/1;
  border-radius:16px;
  background:linear-gradient(160deg,#e0e7ff,#c7d2fe);
  border:2px solid #a5b4fc;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fredoka', sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:#3730a3;
  cursor:pointer;
  user-select:none;
  transition:transform .1s ease, background .15s ease;
}
.ls-mem-tile:hover{transform:scale(1.04);}
.ls-mem-tile.ls-mem-lit{
  background:linear-gradient(160deg,#fde68a,#f59e0b);
  border-color:#d97706;
  color:#3f2d00;
}
.ls-mem-tile.ls-mem-correct{
  background:linear-gradient(160deg,#bbf7d0,#22c55e);
  border-color:#16a34a;
  color:#052e16;
}
.ls-mem-tile.ls-mem-wrong{
  background:linear-gradient(160deg,#fecaca,#ef4444);
  border-color:#b91c1c;
  color:#450a0a;
}
.ls-mem-tile.ls-mem-disabled{cursor:default;}
.ls-mem-status{
  text-align:center;
  font-weight:800;
  font-family:'Fredoka', sans-serif;
  font-size:1.05rem;
  min-height:1.6em;
  margin-bottom:6px;
}
.ls-mem-result{
  text-align:center;
  padding:10px 0 4px;
}
.ls-mem-result .ls-result-emoji{font-size:2.6rem; display:block; margin-bottom:8px;}
.ls-mem-actions{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;}

/* Quiz / game-round shared bits */
.ls-progress-wrap{
  background:rgba(255,255,255,.15);
  border-radius:999px;
  height:10px;
  overflow:hidden;
  margin:6px 0 26px;
}
.ls-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--ls-teal),var(--ls-green));
  border-radius:999px;
  transition:width .3s ease;
}
.ls-quiz-card{max-width:680px; margin:0 auto;}
.ls-quiz-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--ls-muted); font-weight:800; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.04em;
}
.ls-quiz-q{font-size:1.3rem; line-height:1.4; margin-bottom:6px;}
.ls-diagram{
  display:flex; justify-content:center; margin:14px 0 6px;
}
.ls-opts{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.ls-opt-btn{
  text-align:left;
  padding:14px 18px;
  border-radius:14px;
  border:2px solid #e5e7eb;
  background:#f8fafc;
  font-size:1rem;
  font-family:'Nunito', sans-serif;
  font-weight:700;
  color:var(--ls-card-ink);
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .08s ease;
}
.ls-opt-btn:hover:not(:disabled){border-color:var(--ls-purple); background:#f3eefe;}
.ls-opt-btn:active:not(:disabled){transform:scale(.99);}
.ls-opt-btn:disabled{opacity:.5; cursor:not-allowed;}
.ls-opt-btn.ls-opt-correct{background:#dcfce7; border-color:var(--ls-green); color:#14532d;}
.ls-opt-btn.ls-opt-wrong{background:#fee2e2; border-color:var(--ls-red); color:#7f1d1d;}
.ls-tf-row{display:flex; gap:14px; margin-top:18px;}
.ls-tf-row .ls-opt-btn{flex:1; text-align:center; font-size:1.1rem;}
.ls-fill-row{display:flex; gap:10px; margin-top:18px;}
.ls-fill-row input[type="text"]{
  flex:1;
  padding:14px 16px;
  border-radius:14px;
  border:2px solid #e5e7eb;
  font-size:1.05rem;
  font-family:'Nunito', sans-serif;
}
.ls-fill-row input:focus{outline:none; border-color:var(--ls-purple);}
.ls-feedback{
  margin-top:16px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  font-size:.95rem;
  display:none;
}
.ls-feedback.show{display:block;}
.ls-feedback.good{background:#dcfce7; color:#14532d;}
.ls-feedback.retry{background:#fef3c7; color:#78350f;}
.ls-feedback.bad{background:#fee2e2; color:#7f1d1d;}
.ls-pill{
  display:inline-block;
  padding:3px 12px;
  border-radius:999px;
  background:rgba(124,58,237,.12);
  color:var(--ls-purple-dark);
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.ls-summary{text-align:center; max-width:520px; margin:0 auto;}
.ls-summary .ls-result-emoji{font-size:3.2rem; display:block; margin-bottom:8px;}
.ls-summary-stat{
  display:inline-block;
  font-family:'Fredoka', sans-serif;
  font-size:2.2rem;
  font-weight:700;
  color:var(--ls-purple-dark);
  margin:6px 0 2px;
}
.ls-setup-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:20px 0;}
.ls-setup-row button{
  border:2px solid #e5e7eb; background:#f8fafc; color:var(--ls-card-ink);
  border-radius:12px; padding:12px 18px; font-weight:800; cursor:pointer; font-family:'Fredoka', sans-serif; font-size:1rem;
}
.ls-setup-row button.active, .ls-setup-row button:hover{border-color:var(--ls-purple); background:#f3eefe;}

/* Macromolecule sort game */
.ls-sort-timer{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:1.6rem;
  color:#fde68a;
  margin-bottom:18px;
}
.ls-sort-zones{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin-bottom:22px;
}
@media (min-width: 720px){
  .ls-sort-zones{grid-template-columns:repeat(4, 1fr);}
}
.ls-dropzone{
  min-height:150px;
  border:3px dashed rgba(255,255,255,.35);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:background .15s ease, border-color .15s ease;
}
.ls-dropzone.ls-zone-over{
  background:rgba(124,58,237,.25);
  border-color:#a78bfa;
}
.ls-dropzone .ls-zone-emoji{font-size:1.6rem;}
.ls-dropzone h4{
  margin:0;
  font-size:.95rem;
  text-align:center;
  color:#eef0ff;
}
.ls-zone-items{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  min-height:36px;
  width:100%;
}
.ls-zone-chip{
  background:rgba(34,197,94,.25);
  border:1px solid #4ade80;
  color:#f0fff4;
  font-size:.78rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}
.ls-stage{
  background:rgba(255,255,255,.94);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  min-height:70px;
  align-items:center;
}
.ls-chip{
  touch-action:none;
  user-select:none;
  background:linear-gradient(160deg,#fff,#f3f0ff);
  border:2px solid #c4b5fd;
  color:#3730a3;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:12px 18px;
  border-radius:14px;
  cursor:grab;
  box-shadow:0 4px 10px rgba(76,29,149,.18);
}
.ls-chip.ls-chip-dragging{
  position:fixed;
  z-index:1200;
  pointer-events:none;
  cursor:grabbing;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  transform:scale(1.06) rotate(-2deg);
}
.ls-chip.ls-chip-placeholder{
  opacity:.25;
  pointer-events:none;
}
.ls-chip.ls-chip-wrong{
  animation: ls-shake .4s ease;
  border-color:#ef4444;
  background:#fee2e2;
}
@keyframes ls-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
.ls-sort-hint{
  text-align:center;
  color:#c7cbf5;
  font-size:.9rem;
  margin-bottom:14px;
}

footer.ls-foot{
  text-align:center;
  color:#8b90c4;
  font-size:.85rem;
  margin-top:50px;
}