/* ============================================================
   Finanz-Wordle und Blitzrunde – Gestaltung
   ============================================================ */

.sp-modal {
  position: fixed; inset: 0; z-index: 210; display: none;
  background: rgba(0, 40, 44, .58); backdrop-filter: blur(3px);
  padding: 1rem; overflow-y: auto;
}
.sp-modal.open { display: grid; place-items: start center; padding-top: 3vh; }

.sp-box {
  width: 100%; max-width: 30rem;
  background: var(--paper, #fff); border-radius: var(--radius, 14px);
  box-shadow: 0 18px 60px rgba(10, 30, 25, .3);
  overflow: hidden;
}
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--line, #DCEAE1);
  background: var(--cream, #F4FAF6);
}
.sp-head b { font-size: 1rem; color: var(--green-900, #00555C); }
.sp-x {
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--muted, #3E6B70); padding: 0 .3rem; border-radius: 8px;
}
.sp-body { padding: 1.2rem; position: relative; }

.sp-p { color: var(--ink, #204A4F); font-size: .93rem; margin-bottom: .5rem; }
.sp-meta {
  font-size: .72rem; letter-spacing: .03em; color: var(--muted, #3E6B70);
  margin-bottom: 1rem;
}
.sp-hinweis {
  position: absolute; left: 50%; top: .5rem; transform: translateX(-50%);
  background: var(--green-950, #003E44); color: #fff;
  padding: .4rem .9rem; border-radius: 999px; font-size: .8rem; z-index: 5;
}

/* ---------- Wordle: Raster ---------- */
.w-grid { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.w-row { display: grid; gap: .3rem; }
.w-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 2px solid var(--line, #DCEAE1); border-radius: 7px;
  font-weight: 800; font-size: clamp(.9rem, 4.2vw, 1.3rem);
  color: var(--ink, #204A4F); background: #fff;
  text-transform: uppercase;
}
.w-cell.voll { border-color: var(--green-100, #B4DAC3); }
.w-cell.gruen { background: var(--green-900, #00555C); border-color: var(--green-900, #00555C); color: #fff; }
.w-cell.gelb  { background: var(--gold, #C7A500); border-color: var(--gold, #C7A500); color: #fff; }
.w-cell.grau  { background: #C3D3CB; border-color: #C3D3CB; color: #fff; }

/* ---------- Wordle: Tastatur ---------- */
.w-keys { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem; }
.w-keyrow { display: flex; gap: .25rem; justify-content: center; }
.w-key {
  flex: 1; min-width: 0; padding: .7rem .1rem;
  border: 1px solid var(--line, #DCEAE1); border-radius: 6px;
  background: #fff; color: var(--ink, #204A4F);
  font-size: .8rem; font-weight: 700;
}
.w-key.breit { flex: 1.7; font-size: .7rem; }
.w-key.gruen { background: var(--green-900, #00555C); border-color: var(--green-900, #00555C); color: #fff; }
.w-key.gelb  { background: var(--gold, #C7A500); border-color: var(--gold, #C7A500); color: #fff; }
.w-key.grau  { background: #E3ECE7; border-color: #E3ECE7; color: #93A8A0; }

/* ---------- Der Aha danach ---------- */
.w-aha, .b-aha {
  display: none; background: var(--cream, #F4FAF6);
  border-left: 3px solid var(--green-100, #B4DAC3);
  padding: .85rem 1rem; border-radius: 0 10px 10px 0;
  font-size: .88rem; line-height: 1.5; color: var(--ink, #204A4F);
}
.w-aha.an, .b-aha.an { display: block; }
.w-aha b { display: block; color: var(--green-900, #00555C); margin-bottom: .3rem; }
.w-aha p { margin-bottom: .8rem; }
.w-aha .btn { width: 100%; }

/* ---------- Blitzrunde ---------- */
.b-top {
  display: flex; gap: .6rem; margin-bottom: 1rem;
}
.b-zeit, .b-punkte {
  flex: 1; background: var(--cream, #F4FAF6);
  border: 1px solid var(--line, #DCEAE1); border-radius: 11px;
  padding: .6rem; text-align: center;
}
.b-zeit b, .b-punkte b {
  display: block; font-size: 1.6rem; font-weight: 800;
  color: var(--green-900, #00555C); line-height: 1;
}
.b-zeit i, .b-punkte i {
  font-style: normal; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #3E6B70);
}

.b-quelle {
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-700, #3E6B70); font-weight: 700; margin-bottom: .35rem;
}
.b-frage {
  font-size: 1.02rem; font-weight: 700; color: var(--green-950, #003E44);
  line-height: 1.35; margin-bottom: .9rem;
}
.b-opts { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.b-opts button {
  text-align: left; padding: .7rem .9rem;
  border: 1px solid var(--line, #DCEAE1); border-radius: 10px;
  background: #fff; color: var(--ink, #204A4F); font-size: .9rem;
}
.b-opts button:hover:not(:disabled) { border-color: var(--green-100, #B4DAC3); background: var(--cream, #F4FAF6); }
.b-opts button.richtig { background: #EAF6EE; border-color: #7FC79A; color: #1F5C39; font-weight: 600; }
.b-opts button.falsch  { background: #FDF0EC; border-color: #E8AE9F; color: #9B3A28; }
.b-opts button:disabled { cursor: default; }

.b-ende { text-align: center; padding: 1rem 0; }
.b-ende .gross { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.b-ende h3 { font-size: 1.25rem; color: var(--green-950, #003E44); margin-bottom: .4rem; }
.b-ende p { color: var(--muted, #3E6B70); font-size: .88rem; margin-bottom: .5rem; }
.b-rekord { color: var(--gold, #C7A500) !important; font-weight: 700; }
.b-ende .btn { margin-top: .8rem; }

@media (max-width: 400px) {
  .sp-body { padding: .9rem; }
  .w-key { padding: .6rem .05rem; font-size: .72rem; }
}