/* ============================================================
   DEUTSCH LAB — shared theme
   "Sprachpass" concept: a language-learning passport. Each game
   is a stamp you collect. Header/footer echo a passport cover;
   completed games and scores render as ink stamps.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');

:root{
  --ink:#12161F;
  --ink-soft:#2A3140;
  --paper:#F6F3EA;
  --card:#FFFFFF;
  --gold:#E3A83B;
  --flag-red:#C1443A;
  --success:#2FA84F;
  --success-bg:#E7F6EC;
  --danger:#E5484D;
  --danger-bg:#FDEBEC;
  --blue:#3E7CB1;
  --purple:#8B5FBF;
  --line:rgba(18,22,31,0.12);
  /* Constant dark surfaces (topbar, primary buttons) — stay dark in both themes */
  --surface-dark:#12161F;
  --surface-dark-hover:#2A3140;
}

[data-theme="dark"]{
  --ink:#EDEAE0;
  --ink-soft:#A8AFB8;
  --paper:#171A21;
  --card:#232833;
  --success-bg:rgba(47,168,79,0.16);
  --danger-bg:rgba(229,72,77,0.18);
  --line:rgba(255,255,255,0.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  transition:background 0.2s ease, color 0.2s ease;
}

.mono{font-family:'JetBrains Mono',monospace;}

a{color:inherit;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--surface-dark);
  color:var(--paper);
  padding:16px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand .flagbar{
  width:22px;height:14px;border-radius:2px;
  background:linear-gradient(180deg, #12161F 0 33%, var(--flag-red) 33% 66%, var(--gold) 66% 100%);
  border:1px solid rgba(255,255,255,0.25);
}
.topbar .right{display:flex;align-items:center;gap:14px;}
.back-link{
  font-size:0.85rem;
  text-decoration:none;
  color:var(--paper);
  opacity:0.8;
  border:1px solid rgba(255,255,255,0.25);
  padding:7px 14px;
  border-radius:100px;
  transition:opacity 0.15s ease;
}
.back-link:hover{opacity:1;}
.logout-btn{
  font-family:'Inter',sans-serif;
  font-size:0.82rem;
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:var(--paper);
  padding:7px 14px;
  border-radius:100px;
  cursor:pointer;
  opacity:0.8;
}
.logout-btn:hover{opacity:1;}

/* ---------- Layout shells ---------- */
.page{
  max-width:900px;
  margin:0 auto;
  padding:34px 20px 70px;
}
.page.narrow{max-width:640px;}

h1.page-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.6rem,4vw,2.2rem);
  margin:0 0 6px;
}
p.page-sub{
  color:var(--ink-soft);
  margin:0 0 30px;
  font-size:0.95rem;
}

/* ---------- Login page ---------- */
.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(227,168,59,0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(193,68,58,0.10), transparent 45%),
    var(--surface-dark);
  padding:20px;
}
.login-card{
  background:var(--paper);
  border-radius:6px;
  padding:44px 40px;
  width:100%;
  max-width:380px;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
  position:relative;
}
.login-card .flagbar-top{
  height:6px;width:100%;
  background:linear-gradient(90deg, #12161F 0 33%, var(--flag-red) 33% 66%, var(--gold) 66% 100%);
  border-radius:4px;
  margin-bottom:26px;
}
.login-card h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.5rem;
  margin:0 0 4px;
}
.login-card p{
  color:var(--ink-soft);
  font-size:0.9rem;
  margin:0 0 26px;
}
.login-card input{
  width:100%;
  padding:13px 14px;
  border-radius:8px;
  border:1.5px solid var(--line);
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  margin-bottom:14px;
  background:var(--card);
}
.login-card input:focus{outline:2px solid var(--gold);outline-offset:1px;}
.login-card button{
  width:100%;
  padding:13px;
  border-radius:8px;
  border:none;
  background:var(--surface-dark);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:background 0.15s ease;
}
.login-card button:hover{background:var(--surface-dark-hover);}
.login-error{
  color:var(--danger);
  font-size:0.85rem;
  margin:-4px 0 14px;
  min-height:1.1em;
}

/* ---------- Dashboard ---------- */
.game-column{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.game-row{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--card);
  border-radius:10px;
  padding:20px 22px;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  position:relative;
  overflow:hidden;
}
.game-row:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,22,31,0.12);}
.game-row .num{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:0.85rem;
  color:var(--ink-soft);
  width:26px;
}
.game-row .tag{
  width:52px;height:52px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  flex-shrink:0;
}
.game-row .info{flex:1;}
.game-row .info h3{
  font-family:'Space Grotesk',sans-serif;
  margin:0 0 3px;
  font-size:1.08rem;
}
.game-row .info p{
  margin:0;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.game-row .arrow{
  font-size:1.3rem;
  color:var(--ink-soft);
}
.tag.gold{background:#FBEDD1;color:#96701A;}
.tag.green{background:var(--success-bg);color:#1C7A38;}
.tag.blue{background:#E4EEF6;color:var(--blue);}
.tag.purple{background:#F1E9FB;color:var(--purple);}
.tag.red{background:var(--danger-bg);color:var(--flag-red);}

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--card);
  border-radius:12px;
  padding:26px;
  border:1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  padding:12px 24px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn-primary{background:var(--surface-dark);color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{transform:translateY(-2px);}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* ---------- Timer chip ---------- */
.timer-chip{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  background:var(--surface-dark);
  color:var(--paper);
  padding:8px 16px;
  border-radius:100px;
  font-size:0.95rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.timer-chip.low{background:var(--danger);}

/* ---------- Feedback colors (answer states) ---------- */
.opt{
  display:block;
  width:100%;
  text-align:left;
  padding:13px 16px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:var(--card);
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  cursor:pointer;
  margin-bottom:10px;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.opt:hover:not(:disabled){border-color:var(--gold);}
.opt:disabled{cursor:default;}
.opt.correct{background:var(--success-bg);border-color:var(--success);color:#1C7A38;font-weight:600;}
.opt.wrong{background:var(--danger-bg);border-color:var(--danger);color:var(--flag-red);font-weight:600;}

/* ---------- Stamp badge (score / completion) ---------- */
.stamp{
  width:150px;height:150px;
  border:4px solid var(--flag-red);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(-8deg);
  color:var(--flag-red);
  margin:0 auto 20px;
  font-family:'Space Grotesk',sans-serif;
  position:relative;
}
.stamp::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1.5px dashed var(--flag-red);
  border-radius:50%;
}
.stamp .big{font-size:2rem;font-weight:700;line-height:1;}
.stamp .small{font-size:0.68rem;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;}

.result-shell{text-align:center;padding:30px 0;}
.result-shell h2{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;margin:6px 0;}
.result-shell p{color:var(--ink-soft);}

/* ---------- Progress dots ---------- */
.progress-dots{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.progress-dots .d{
  width:9px;height:9px;border-radius:50%;
  background:var(--line);
}
.progress-dots .d.on{background:var(--gold);}
.progress-dots .d.correct{background:var(--success);}
.progress-dots .d.wrong{background:var(--danger);}

@media (max-width:560px){
  .game-row{padding:16px;gap:14px;}
  .game-row .tag{width:42px;height:42px;font-size:1.2rem;}
}