/* =========================================================
   Gemeinsame Basis für alle Spiele
   ========================================================= */

:root,
html[data-theme="dunkel"]{
  --ink:        #17181B;
  --ink-deep:   #0E0F12;
  --surface:    #232429;
  --surface-hi: #2F3037;
  --line:       #3C3E46;
  --text:       #EDEEF0;
  --text-dim:   #A0A2AA;
  --chip:       rgba(255,255,255,.07);
  --glow:       #2B2C33;
  --scrim:      rgba(10,11,13,.88);
  --accent-text:#FFC145;
}

html[data-theme="hell"]{
  --ink:        #E9EAEC;
  --ink-deep:   #D5D7DC;
  --surface:    #FFFFFF;
  --surface-hi: #F1F2F5;
  --line:       #C6C9D0;
  --text:       #1B1C1F;
  --text-dim:   #5D6068;
  --chip:       rgba(0,0,0,.06);
  --glow:       #F6F7F9;
  --scrim:      rgba(233,234,236,.93);
  --accent-text:#8A5A00;
}

html[data-theme="rosa"]{
  --ink:        #FBEEF2;
  --ink-deep:   #F2DBE3;
  --surface:    #FFFFFF;
  --surface-hi: #FBE6EC;
  --line:       #E6C4D0;
  --text:       #2A1B21;
  --text-dim:   #6E5A62;
  --chip:       rgba(120,40,70,.07);
  --glow:       #FFF7FA;
  --scrim:      rgba(251,238,242,.94);
  --accent-text:#9A4A00;
}

html[data-theme="blau"]{
  --ink:        #E8F0F9;
  --ink-deep:   #D2E1F1;
  --surface:    #FFFFFF;
  --surface-hi: #EAF2FB;
  --line:       #BDD2E7;
  --text:       #16202B;
  --text-dim:   #556877;
  --chip:       rgba(20,60,110,.07);
  --glow:       #F5FAFF;
  --scrim:      rgba(232,240,249,.94);
  --accent-text:#8A5A00;
}

:root{
  --gold:       #FFC145;
  --gold-deep:  #C98A12;
  --good:       #2FBF71;
  --bad:        #E3524F;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --tap: 56px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0;
  min-height:100%;
  background: var(--ink);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overscroll-behavior: none;
}

body{
  background-image:
    radial-gradient(120% 90% at 50% -10%, var(--glow) 0%, transparent 62%);
  background-attachment: fixed;
}

button, input, select{ font: inherit; color: inherit; }
button{ cursor: pointer; border: none; background: none; }

a{ color: var(--accent-text); }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Grundbausteine ---------- */

.wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: var(--tap);
  padding: 0 22px;
  border-radius: var(--r-m);
  background: var(--surface-hi);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: transform .12s ease, background .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn--primary{
  background: var(--gold);
  color: #2A1D00;
  border-color: var(--gold-deep);
  font-weight: 700;
}
.btn--quiet{ background: transparent; }
.btn--wide{ width:100%; }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 20px;
}

.stack > * + *{ margin-top: 14px; }

/* ---------- Schieberegler ---------- */

.field{ margin: 0 0 26px; }
.field__head{
  display:flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.field__label{ font-weight: 600; }
.field__value{ color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height: 42px; background: transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height: 10px; border-radius: 999px;
  background: var(--ink-deep); border: 1px solid var(--line);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width: 34px; height: 34px; margin-top: -13px;
  border-radius: 50%; background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
input[type=range]::-moz-range-track{
  height: 10px; border-radius: 999px;
  background: var(--ink-deep); border: 1px solid var(--line);
}
input[type=range]::-moz-range-thumb{
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--ink);
}

.hint{
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

.ticks{
  display:flex; justify-content: space-between;
  color: var(--text-dim); font-size: 14px; margin-top: -4px;
}

/* ---------- Umschalter (zwei Optionen) ---------- */

.segment{
  display:flex; gap:6px;
  background: var(--ink-deep);
  border:1px solid var(--line);
  border-radius: var(--r-m);
  padding: 6px;
}
.segment button{
  flex:1; min-height: 46px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.segment button[aria-pressed=true]{
  background: var(--gold); color:#2A1D00;
}

/* ---------- Checkbox ---------- */

.check{
  display:flex; align-items:center; gap: 14px;
  min-height: var(--tap);
  cursor: pointer;
}
.check input{
  width: 28px; height: 28px; accent-color: var(--gold);
  flex: 0 0 auto;
}

/* ---------- Kopfzeile ---------- */

.masthead{ margin-bottom: 30px; }
.masthead h1{
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 6px;
  overflow-wrap: break-word;
}
.masthead p{ margin:0; color: var(--text-dim); }

/* ---------- Spielkacheln ---------- */

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

.tile{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px; align-items: center;
  text-align: left;
  padding: 18px;
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, border-color .14s ease;
}
.tile:active{ transform: scale(.985); }
.tile__art{ width: 96px; height: 96px; display:block; }
.tile__name{ font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 3px; }
.tile__desc{ margin:0; color: var(--text-dim); font-size: 15px; line-height: 1.35; }
.tile__flag{
  display:inline-block; margin-top: 9px;
  font-size: 13px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--chip); color: var(--text-dim);
}
.tile--idea{ opacity: .5; }
.tile--idea, .tile--soon{ cursor: default; }

/* ---------- Fusszeile ---------- */

.colophon{
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14px;
}
.colophon a{ color: var(--accent-text); }

/* ---------- Dialog / Overlay ---------- */

.sheet{
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
}
.sheet[data-open="true"]{ display: flex; }
.sheet__inner{
  width: 100%; max-width: 460px;
  max-height: 92dvh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 22px;
}
.sheet h2{ margin: 0 0 18px; font-size: 24px; letter-spacing: -0.02em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 200;
  background: var(--gold); color:#2A1D00;
  font-weight: 700;
  padding: 13px 22px; border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}