/* Design tokens shared between the game app (index.html) and server-rendered pages (glossary, impressum, datenschutz). */
:root {
    --c-bg:        #fafafa;
    --c-fg:        #222;
    --c-muted:     #666;
    --c-accent:    #0b72c0;
    --c-accent-bg: #e7f2fb;
    --c-card:      #fff;
    --c-border:    #ddd;
    --c-warn:      #b35900;

    --c-cat-krankheit: #c0392b;
    --c-cat-symptom:   #2874a6;
    --c-cat-koerper:   #117864;
    --c-cat-labor:     #7d3c98;
    --c-cat-konzept:   #a0522d;
    --c-level-m:       #4a4a4a;
    --c-level-o:       #b35900;

    --r-card: 8px;
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;

    --ff: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: var(--ff);
    color: var(--c-fg);
    background: var(--c-bg);
    line-height: 1.5;
}

.page-header {
    padding: var(--s-2) var(--s-3);
    background: var(--c-card);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-header h1 { margin: 0; font-size: 1.25rem; }
.page-header .nav-link { color: var(--c-accent); text-decoration: none; }

.page-main {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--s-2) var(--s-3);
}

.page-footer {
    padding: var(--s-2) var(--s-3);
    text-align: center;
    color: var(--c-muted);
    border-top: 1px solid var(--c-border);
    margin-top: var(--s-4);
}
.page-footer a { color: var(--c-muted); margin: 0 var(--s-1); }

/* Glossary-specific */
.glossary-controls {
    position: sticky;
    top: 0;
    background: var(--c-bg);
    padding: var(--s-2) 0;
    margin-bottom: var(--s-2);
    z-index: 10;
}
.glossary-controls #search {
    width: 100%;
    padding: var(--s-1) var(--s-2);
    font-size: 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    background: var(--c-card);
}
.filter-group {
    margin-top: var(--s-1);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.filter-label { font-size: 0.9rem; color: var(--c-muted); margin-right: 0.3rem; }
.chip {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-card);
    cursor: pointer;
}
.chip.active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

.glossary-entries {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.glossary-entry {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: var(--s-1) var(--s-2);
}
.glossary-entry[hidden] { display: none; }
.glossary-entry summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.glossary-entry summary::-webkit-details-marker { display: none; }
.entry-name { font-weight: 600; flex: 1; }
.entry-body { margin-top: var(--s-1); color: var(--c-fg); }
.entry-text { margin: 0 0 var(--s-1); }
.entry-auto, .entry-refs { margin: var(--s-1) 0 0; font-size: 0.9rem; color: var(--c-muted); }
.entry-auto a, .entry-refs a { color: var(--c-accent); text-decoration: none; }
.entry-auto a:hover, .entry-refs a:hover { text-decoration: underline; }

.badge {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}
.badge-krankheit { background: var(--c-cat-krankheit); }
.badge-symptom   { background: var(--c-cat-symptom); }
.badge-koerper   { background: var(--c-cat-koerper); }
.badge-labor     { background: var(--c-cat-labor); }
.badge-konzept   { background: var(--c-cat-konzept); }
.badge-level     { background: transparent; color: var(--c-fg); border: 1px solid var(--c-border); }
.badge-mittelstufe { color: var(--c-level-m); }
.badge-oberstufe   { color: var(--c-level-o); }

@media (max-width: 640px) {
    .page-header { padding: var(--s-1) var(--s-2); }
    .page-main { padding: var(--s-1) var(--s-2); }
    .filter-group { gap: 0.2rem; }
    .chip { font-size: 0.8rem; padding: 0.15rem 0.5rem; }
    .entry-name { flex: 1 1 100%; order: -1; }
}

/* Tutor rating widget */
.rating-stars {
    display: flex;
    gap: 0.25rem;
}
.rating-stars button {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-warn, #b35900);
    padding: 0 0.25rem;
    line-height: 1;
}
.rating-stars button:hover {
    transform: scale(1.15);
}
.camp-hint {
    padding: var(--s-1, 0.5rem) var(--s-2, 1rem);
    background: var(--c-accent-bg, #e7f2fb);
    border-left: 3px solid var(--c-accent, #0b72c0);
    border-radius: 4px;
}
.stat-badge {
    display: inline-block;
    padding: .15rem .55rem;
    font-size: .8rem;
    background: var(--c-accent-bg, #e7f2fb);
    color: var(--c-fg, #234);
    border-radius: 999px;
    white-space: nowrap;
}
.diff-chain {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  letter-spacing: .1em;
  color: #1a2e1a;
}

.game-card-wrap { margin-bottom: .6rem; }
.game-card {
  padding: .75rem .9rem;
  border: 1px solid #dfe6df;
  border-radius: 8px;
  cursor: pointer;
  background: #fbfdfb;
  transition: background .15s;
}
.game-card:hover, .game-card:active { background: #eef4ee; }
.game-card-head {
  display:flex; justify-content:space-between; align-items:center;
  font-size: .8rem; color: #3a5a3a; margin-bottom: .25rem;
}
.game-card-date { font-variant-numeric: tabular-nums; }
.game-card-disease { font-weight: 600; font-size: 1rem; color: #1a2e1a; margin-bottom: .25rem; }
.game-card-meta {
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
  font-size: .85rem; color: #444;
}
.game-card-score { font-weight: 600; }
.game-card-interactions { font-variant-numeric: tabular-nums; color: #777; }
.game-card-actions { margin-top: .5rem; }
.game-card-badge { color: #888; font-size: .8rem; }
.game-card-tutor { font-size: .8rem; white-space: nowrap; }

.my-games-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }

.dash-badges {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 .75rem 0;
}

.dash-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.dash-cta {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  padding: .8rem .5rem;
  font-size: .95rem;
  min-height: 2.8rem;
}
.dash-cta[hidden] { display: none; }
.dash-badges[hidden] { display: none; }
.hs-link[hidden] { display: none; }
#tutor-game-history-body[hidden] { display: none; }

.dash-actions {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 1rem;
}
.dash-actions .btn-primary { width: 100%; padding: .8rem; min-height: 2.8rem; }

.dash-stats--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .dash-ctas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .dash-ctas { grid-template-columns: 1fr; }
}

/* ── Generic in-app modal (#app-modal) primary button baseline ── */
/* Scoped to #app-modal so existing #diag-modal / #giveup-modal .cm-btn.primary rules are unaffected. */
#app-modal .cm-btn {
  background: var(--c-accent, #0b72c0);
  color: #fff;
}
#app-modal .cm-btn.secondary {
  background: #e3e9e3;
  color: #223;
}
#app-modal .cm-btn.danger {
  background: #b32e2e;
  color: #fff;
}
.game-history-panel {
  padding: .5rem 1rem;
  background: #f6f6f2;
  border-bottom: 1px solid #ddd;
}
#tutor-game-history-body {
  max-height: 14rem; overflow-y: auto;
  padding: .5rem 0;
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .85rem;
}
.gh-msg { line-height: 1.35; }
.gh-user      { color: #1a4a1a; }
.gh-assistant { color: #444; }
.gh-role { font-weight: 600; margin-right: .25rem; }