/* Dieter → Karteo · CSS für die 5 Spiele (aus styles.css extrahiert).
   Nutzt CSS-Variablen (--navy-800 etc.) aus dem Dieter-Theme — falls Karteo
   andere Variablen hat, oben passende :root-Werte setzen. */

/* ============================================================
   Spiele → Mystik  (dark-purple + gold, "German with Tarot" vibe)
   ============================================================ */
.spiele-wrap { padding: 18px 16px 90px; }

.spiele-title { font-family: "Anton", system-ui, sans-serif; letter-spacing: .5px; font-size: 30px; color: #1e293b; margin: 4px 0 2px; }

.spiele-sub { color: #64748b; font-size: 14px; margin: 0 0 18px; }

.spiele-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.spiele-card { min-width: 0; }

.spiele-card-name, .spiele-card-desc { overflow-wrap: anywhere; max-width: 100%; }

.spiele-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 150px; border-radius: 18px; padding: 18px 12px; text-decoration: none; }

.mys-card-go { background: radial-gradient(circle at 50% 25%, #3b2a6b 0%, #1c1340 70%, #140d2e 100%);
  border: 1.5px solid #c9a85f; box-shadow: 0 10px 30px rgba(28,19,64,.35), inset 0 0 28px rgba(201,168,95,.12); color: #f3e9c9; }

.mys-card-go:active { transform: scale(.98); }

.spiele-card-soon { background: #f1f3f9; border: 1.5px dashed #cbd2e0; color: #94a3b8; }

.spiele-card-emoji { font-size: 38px; line-height: 1; }

.spiele-card-name { font-family: "Anton", system-ui, sans-serif; letter-spacing: .5px; font-size: 20px; }

.spiele-card-desc { font-size: 12px; opacity: .85; line-height: 1.25; }

/* Mystik screens share a dark mystical canvas */
.mys-wrap { min-height: calc(100vh - 60px); padding: 14px 16px 96px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1d57 0%, #1a1140 55%, #120b2c 100%); color: #efe6c8; }

.mys-topbar { display: flex; }

.mys-back { color: #c9a85f; text-decoration: none; font-weight: 700; font-size: 14px; padding: 6px 2px; }

.mys-h2 { font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; text-align: center; font-size: 30px;
  color: #e7c879; text-shadow: 0 2px 14px rgba(231,200,121,.35); margin: 6px 0 18px; }

.mys-ask { text-align: center; font-family: "Anton", system-ui, sans-serif; letter-spacing: .5px; font-size: 22px; color: #e7c879; margin: 4px 0 16px; }

.mys-cardgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 520px) { .mys-cardgrid { grid-template-columns: 1fr 1fr; } }

.mys-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 170px; padding: 16px 10px; border-radius: 16px; text-decoration: none; color: #f3e9c9;
  background: linear-gradient(160deg, #2e2060 0%, #1b1242 100%);
  border: 1.5px solid #c9a85f; box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 0 26px rgba(201,168,95,.14); }

.mys-card:active { transform: scale(.97); }

.mys-card-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 10px rgba(231,200,121,.45)); }

.mys-card-level-label { font-family: "Anton", system-ui, sans-serif; font-size: 22px; letter-spacing: 1px; color: #e7c879; }

.mys-card-char { font-size: 13px; letter-spacing: .5px; opacity: .9; }

.mys-soon { opacity: .72; }

.mys-soon-tag { position: absolute; top: 8px; right: 8px; font-size: 11px; background: rgba(201,168,95,.2); border: 1px solid #c9a85f; color: #e7c879; border-radius: 999px; padding: 2px 8px; }

/* date row */
.mys-daterow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }

.mys-date { background: #221752; border: 1.5px solid #c9a85f; color: #f3e9c9; border-radius: 12px; padding: 12px 14px; font-size: 15px; }

.mys-reveal { background: linear-gradient(160deg, #e7c879, #c9a85f); color: #2a1d57; border: none; border-radius: 12px; padding: 12px 20px; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 6px 18px rgba(231,200,121,.35); }

.mys-reveal:active { transform: scale(.97); }

/* reading card */
.mys-reading { margin-top: 18px; border-radius: 18px; padding: 18px 16px;
  background: linear-gradient(165deg, rgba(46,32,96,.92), rgba(20,13,46,.96));
  border: 1.5px solid #c9a85f; box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 0 30px rgba(201,168,95,.12); animation: mysFade .5s ease; }

.mys-r-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.mys-r-emoji { font-size: 34px; filter: drop-shadow(0 0 10px rgba(231,200,121,.5)); }

.mys-r-head h3 { font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; font-size: 26px; color: #e7c879; margin: 0; }

.mys-r-el { margin-left: auto; font-size: 12px; border: 1px solid #c9a85f; color: #e7c879; border-radius: 999px; padding: 3px 10px; }

.mys-r-el-note { font-size: 14px; color: #cdbde8; margin: 0 0 10px; }

.mys-r-over { font-size: 15.5px; line-height: 1.5; color: #efe6c8; margin: 0 0 14px; }

.mys-r-sec { margin: 10px 0; }

.mys-r-sec h4 { font-size: 14px; color: #e7c879; margin: 0 0 4px; }

.mys-r-sec ul { margin: 0; padding-left: 20px; }

.mys-r-sec li, .mys-r-sec p { font-size: 14.5px; line-height: 1.5; color: #efe6c8; margin: 2px 0; }

.mys-r-motto { text-align: center; font-style: italic; font-size: 16px; color: #e7c879; margin: 14px 0 4px; }

.mys-xp { text-align: center; margin-top: 10px; font-weight: 800; color: #7CFC9A; }

/* tarot deck (interactive draw + readings land next step) */
.mys-tarot-deck { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 16px; }

.mys-tarot-back { width: 34px; height: 54px; border-radius: 6px; background: repeating-linear-gradient(45deg, #3a2a72, #3a2a72 4px, #2a1d57 4px, #2a1d57 8px); border: 1.5px solid #c9a85f; box-shadow: inset 0 0 10px rgba(201,168,95,.3); }

.mys-soon-panel { text-align: center; background: rgba(201,168,95,.1); border: 1px solid #c9a85f; border-radius: 14px; padding: 16px 14px; font-size: 14.5px; line-height: 1.5; color: #efe6c8; }

/* ---- Intro overlay: logo spins on a spooky night, ~2s ---- */
.mys-intro { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 35%, #2a1d57 0%, #150d34 60%, #0a0620 100%); overflow: hidden; animation: mysIntroOut .4s ease 1.9s forwards; }

.mys-intro-logo { width: 168px; height: 168px; border-radius: 50%; border: 3px solid #c9a85f;
  box-shadow: 0 0 50px rgba(231,200,121,.6); animation: mysSpin 2.1s ease-in-out; }

.mys-intro-cap { font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; color: #e7c879; font-size: 20px; text-shadow: 0 2px 14px rgba(231,200,121,.4); }

.mys-moon { position: absolute; top: 8%; right: 14%; font-size: 56px; filter: drop-shadow(0 0 18px rgba(231,200,121,.5)); }

.mys-bats { position: absolute; bottom: 12%; font-size: 26px; letter-spacing: 14px; opacity: .8; animation: mysFloat 2.2s ease-in-out infinite; }

.mys-stars { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(2px 2px at 60% 85%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 80%, #fff, transparent); opacity: .55; animation: mysTwinkle 2s ease-in-out infinite alternate; }

/* Mystik v2 — birthday selects + tappable words */
.mys-selects { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }

.mys-sel { background: #221752; border: 1.5px solid #c9a85f; color: #f3e9c9; border-radius: 12px; padding: 12px 12px; font-size: 15px; min-width: 84px; }

.mys-sel-wide { min-width: 130px; }

.mys-sel option { color: #1e293b; }

.mys-tap-hint { font-size: 12.5px; color: #cdbde8; text-align: center; margin: 0 0 12px; }

.mys-reading .rw { cursor: pointer; text-decoration: underline dotted rgba(231,200,121,.55); text-underline-offset: 3px; }

.mys-reading .rw:hover { color: #fff; text-decoration-color: #e7c879; }

/* ============================================================
   Mystik v3 — Kevin's artwork (level/interest cards, tarot draw, bg pattern)
   ============================================================ */
/* mystic seamless pattern behind the gradient (kept dark for readability) */
.mys-wrap { background: linear-gradient(rgba(18,11,44,.88), rgba(20,13,46,.95)), url('mystik/bg-pattern.jpg'); background-size: auto, 340px auto; background-attachment: scroll; }

/* portrait image cards (level select — art already has the label baked in) */
.mys-imgcard { display: block; aspect-ratio: 9 / 16; border-radius: 14px; background-size: cover; background-position: center;
  border: 2px solid #c9a85f; box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 0 24px rgba(0,0,0,.3); }

.mys-imgcard:active { transform: scale(.97); }

/* interest cards: image + caption */
.mys-interest-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }

.mys-interest-img { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background-size: cover; background-position: center;
  border: 2px solid #c9a85f; box-shadow: 0 8px 26px rgba(0,0,0,.45), inset 0 0 24px rgba(0,0,0,.3); }

.mys-interest-card:active .mys-interest-img { transform: scale(.97); }

.mys-interest-cap { font-family: "Anton", system-ui, sans-serif; letter-spacing: .5px; font-size: 16px; color: #e7c879; text-align: center; line-height: 1.1; }

/* ---- Tarot: two slots (Situation / Rat), flip animation ---- */
.mys-tarot .mys-fate-row { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }

.mys-fate-col { flex: 1; max-width: 240px; display: flex; flex-direction: column; align-items: center; }

.mys-fate-label { font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; font-size: 22px; color: #e7c879; margin-bottom: 10px; }

.mys-cardflip { position: relative; width: 100%; aspect-ratio: 9 / 15; perspective: 1200px; }

.mys-card-face { position: absolute; inset: 0; border-radius: 12px; border: 2px solid #c9a85f; background-size: cover; background-position: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.5); transition: transform .7s cubic-bezier(.3,.8,.3,1); }

.mys-card-back  { transform: rotateY(0deg); }

.mys-card-front { transform: rotateY(180deg); display: flex; align-items: flex-end; justify-content: center; padding: 14px 8px;
  background-image: url('mystik/card-back.jpg'); background-color: #1b1242; }

.mys-cardflip.flipped .mys-card-back  { transform: rotateY(-180deg); }

.mys-cardflip.flipped .mys-card-front { transform: rotateY(0deg); }

.mys-card-name { font-family: "Anton", system-ui, sans-serif; letter-spacing: .5px; font-size: 17px; color: #f6e7b0; text-align: center;
  background: rgba(20,13,46,.75); border: 1px solid #c9a85f; border-radius: 8px; padding: 5px 8px; text-shadow: 0 1px 6px #000; }

.mys-fate-read { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #efe6c8; text-align: center; }

.mys-fate-read .rw { cursor: pointer; text-decoration: underline dotted rgba(231,200,121,.55); text-underline-offset: 3px; }

.mys-drawbtn { display: block; margin: 22px auto 0; background: linear-gradient(160deg, #e7c879, #c9a85f); color: #2a1d57; border: none;
  border-radius: 14px; padding: 14px 26px; font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; font-size: 18px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(231,200,121,.4); }

.mys-drawbtn:active { transform: scale(.97); }

.mys-deck-img { width: 220px; height: 110px; margin: 16px auto 0; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: .92; }

/* Mystik v4 — sign / element images on result screens (auto-appear when uploaded) */
.mys-sign-img { display: block; width: 72%; max-width: 230px; margin: 2px auto 16px; border-radius: 12px; border: 2px solid #c9a85f; box-shadow: 0 10px 26px rgba(0,0,0,.5); }

.mys-elem-img { display: block; width: 55%; max-width: 175px; margin: 14px auto; border-radius: 10px; border: 1.5px solid #c9a85f; box-shadow: 0 6px 18px rgba(0,0,0,.45); }

/* Mystik v5 — extended description paragraph (B/C zodiac long text) */
.mys-r-langtext { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(201,168,95,.3); font-size: 14px; line-height: 1.6; color: #e8dcc0; text-align: left; }

.mys-r-langtext .rw { cursor: pointer; text-decoration: underline dotted rgba(231,200,121,.5); text-underline-offset: 3px; }

/* Mystik v6 — center wrapped cards + remove the underline on tappable words */
.mys-cardgrid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px; }

.mys-cardgrid > * { flex: 0 1 150px; max-width: 190px; }

/* tappable words still work (add to flashcards) but without the odd dotted underline */
.mys-reading .rw, .mys-fate-read .rw, .mys-r-langtext .rw,
.mys-reading .rw:hover, .mys-fate-read .rw:hover, .mys-r-langtext .rw:hover { text-decoration: none; }

/* Mystik v8 — real glowing, stacked, fanned tarot deck (tap to draw) */
.mys-deck { position: relative; width: 130px; height: 200px; margin: 10px auto 2px; cursor: pointer; }

.mys-deck-card { position: absolute; inset: 0; border-radius: 11px; background-size: cover; background-position: center;
  border: 1.5px solid #c9a85f; box-shadow: 0 8px 18px rgba(0,0,0,.55);
  transform: translate(calc(var(--k) * 2px), calc(var(--k) * -3px)) rotate(calc((var(--k) - 2.5) * 2deg));
  transition: transform .28s cubic-bezier(.3,.8,.3,1); }

.mys-deck:hover .mys-deck-card, .mys-deck:active .mys-deck-card {
  transform: translate(calc(var(--k) * 4px), calc(var(--k) * -6px)) rotate(calc((var(--k) - 2.5) * 4deg)); }

.mys-deck-glow { position: absolute; inset: -16px; border-radius: 22px; pointer-events: none;
  background: radial-gradient(circle, rgba(231,200,121,.4), transparent 70%); animation: mysDeckPulse 2.4s ease-in-out infinite; }

/* Mystik v9 — fanned, individually clickable tarot cards (real draw) */
.mys-deck-fan { display: flex; justify-content: center; align-items: flex-end; padding-top: 26px; margin: 6px auto 4px; min-height: 130px; }

.mys-deck-fan .mys-deck-card { position: relative; inset: auto; width: 60px; height: 96px; margin: 0 -16px; border-radius: 8px;
  background-size: cover; background-position: center; border: 1.5px solid #c9a85f; box-shadow: 0 6px 14px rgba(0,0,0,.55); cursor: pointer;
  transform-origin: bottom center; transform: rotate(calc((var(--k) - 4) * 7deg)); transition: transform .2s, filter .2s, box-shadow .2s; }

.mys-deck-fan .mys-deck-card:hover { transform: rotate(calc((var(--k) - 4) * 7deg)) translateY(-12px); filter: brightness(1.18); box-shadow: 0 12px 22px rgba(231,200,121,.5); }

.mys-deck-fan .mys-deck-card.used { opacity: .2; pointer-events: none; transform: rotate(calc((var(--k) - 4) * 7deg)) translateY(8px) scale(.9); }

/* ============================================================
   Spiele — Lernspiele (Wörtle · Satzbau · Vokabel-Rennen · Konjugation)
   ============================================================ */
.spiele-grid .game-card-go { background: radial-gradient(circle at 50% 22%, #2f3e6b 0%, #1a2247 70%, #121a33 100%);
  border: 1.5px solid #5b76c9; box-shadow: 0 10px 26px rgba(20,26,51,.35), inset 0 0 24px rgba(120,150,230,.12); color: #e8eefc; }

.spiele-grid .game-card-go:active { transform: scale(.98); }

.game-wrap { text-align: center; }

.game-levels { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 8px auto; }

.game-levelbtn { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(160deg, #2e2060, #1b1242); border: 1.5px solid #c9a85f; color: #f3e9c9; }

.game-levelbtn b { font-family: "Anton", system-ui, sans-serif; letter-spacing: 1px; font-size: 22px; color: #e7c879; }

.game-levelbtn span { font-size: 13px; opacity: .85; }

.game-levelbtn:active { transform: scale(.98); }

.game-btn { display: inline-block; margin: 16px auto 0; background: linear-gradient(160deg, #e7c879, #c9a85f); color: #2a1d57; border: none;
  border-radius: 12px; padding: 13px 26px; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(231,200,121,.35); }

.game-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }

.game-again { margin-left: 8px; background: #e7c879; color: #2a1d57; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 800; cursor: pointer; }

.game-msg { min-height: 22px; font-size: 15px; color: #efe6c8; margin: 14px 0; }

.game-result { font-size: 52px; margin: 18px 0 8px; }

.game-bigscore { font-family: "Anton", system-ui, sans-serif; font-size: 56px; color: #e7c879; line-height: 1; }

.game-result p { font-size: 15px; color: #efe6c8; }

/* Wörtle */
.wo-clue { text-align: center; margin: 2px 0 6px; font-size: 15px; color: #cfc6f0; }
.wo-clue b { color: #fff; }
.wo-board { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 10px 0; }

.wo-row { display: flex; gap: 6px; }

.wo-tile { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
  color: #fff; border: 2px solid #4a3f7a; border-radius: 6px; text-transform: uppercase; background: transparent; }

.wo-tile.wo-filled { border-color: #c9a85f; }

.wo-correct { background: #4a9c5b !important; border-color: #4a9c5b !important; }

.wo-present { background: #c9a85f !important; border-color: #c9a85f !important; color: #2a1d57 !important; }

.wo-absent { background: #2e2752 !important; border-color: #2e2752 !important; color: #8b87a8 !important; }

.wo-kb { display: flex; flex-direction: column; gap: 6px; align-items: stretch; margin-top: 14px; width: 100%; max-width: 430px; margin-left: auto; margin-right: auto; }

.wo-kbrow { display: flex; gap: 4px; justify-content: center; width: 100%; }

.wo-key { flex: 1 1 0; min-width: 0; max-width: 40px; height: 46px; padding: 0; border-radius: 6px; border: none; background: #4a3f7a; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }

.wo-key-wide { flex: 1.5 1 0; max-width: 54px; }

.wo-key.wo-k-correct { background: #4a9c5b; }

.wo-key.wo-k-present { background: #c9a85f; color: #2a1d57; }

.wo-key.wo-k-absent { background: #241d44; color: #6f6a8e; }

/* Vokabel-Rennen + shared HUD */
.rn-hud { display: flex; justify-content: space-between; max-width: 460px; margin: 4px auto 16px; font-size: 17px; font-weight: 800; color: #e7c879; }

.rn-word { font-family: "Anton", system-ui, sans-serif; font-size: 34px; color: #fff; margin: 24px 0; letter-spacing: .5px; }

.rn-opts { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; }

.rn-opt { padding: 15px; border-radius: 12px; border: 1.5px solid #c9a85f; background: linear-gradient(160deg, #2e2060, #1b1242); color: #f3e9c9; font-size: 17px; cursor: pointer; }

.rn-opt.rn-ok { background: #4a9c5b; border-color: #4a9c5b; color: #fff; }

.rn-opt.rn-bad { background: #9c4a4a; border-color: #9c4a4a; color: #fff; }

/* Konjugation */
.kj-prompt { font-size: 26px; color: #efe6c8; margin: 26px 0 18px; }

.kj-pron { font-family: "Anton", system-ui, sans-serif; color: #e7c879; font-size: 30px; }

.kj-inf { color: #9b95c4; font-size: 18px; }

.kj-input { width: min(86%, 320px); padding: 14px; font-size: 20px; text-align: center; border-radius: 12px; border: 2px solid #c9a85f; background: #221752; color: #fff; }

/* ---- Fixes (2026-07-18, Kevin-Feedback): SVG-Icons, Satzbau-Chips, Wörtle-Enter ---- */
.pcic{width:1em;height:1em;display:inline-block;vertical-align:-0.13em;}
.sb-build{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:54px;padding:12px;margin:6px 0 16px;background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.22);border-radius:14px;}
.sb-empty{color:rgba(255,255,255,.35);font-size:22px;}
.sb-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px;}
.sb-chip{padding:11px 16px;border-radius:12px;border:none;background:#4a3f7a;color:#fff;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.28);}
.sb-chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28);}
.sb-chip[disabled]{opacity:.28;pointer-events:none;}
.sb-built{background:#6c5cff;}
.sb-solved{border-style:solid;border-color:#4a9c5b;}
.sb-shake{animation:sbshake .45s;}
@keyframes sbshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.wo-key-enter{background:#4a9c5b !important;color:#fff !important;font-size:18px !important;}
.gw-word{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .12s,color .12s;-webkit-tap-highlight-color:transparent;}
.gw-word:hover{color:#e8c96a;}
.gw-word:active{background:rgba(232,201,106,.4);color:#fff;}

/* Wörtle-Upgrade (2026-07-18) */
@keyframes woflip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.wo-flip{animation:woflip .5s ease both;}
.wo-row.wo-shake{animation:sbshake .45s;}
.wo-hint{display:block;margin:4px auto 10px;background:#3a2f66;color:#e8c96a;border:none;border-radius:11px;padding:9px 18px;font-weight:800;font-size:14px;cursor:pointer;}
.wo-hint:active{transform:translateY(1px);}
.wo-solved{margin-top:8px;font-size:15px;line-height:1.5;}
.wo-savehint{color:rgba(255,255,255,.5);font-size:12px;margin-left:2px;white-space:nowrap;}

/* ============================================================
   Bild-Wort — Artikel + Wort zum Foto tippen (Vollbild-Look)
   ============================================================ */
.bw-modehead{max-width:340px;margin:16px auto 8px;text-align:left;font-size:13px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--txt3);}
.bw-modes{display:flex;gap:12px;max-width:340px;margin:0 auto;}
.bw-mode{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px 10px;border-radius:16px;cursor:pointer;
  background:var(--card);border:2px solid var(--line);color:var(--txt);text-align:center;transition:transform .08s,border-color .12s;}
.bw-mode b{font-size:16px;}
.bw-mode span{font-size:11.5px;color:var(--txt3);line-height:1.25;}
.bw-mode-ic{font-size:22px;line-height:1;color:var(--purple);}
.bw-mode.act{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,92,255,.16);}
.bw-mode:active{transform:scale(.97);}
.bw-intro .game-levels{max-width:340px;}
.bw-intro .game-levelbtn{background:linear-gradient(160deg,#2f3e6b,#1a2247);border-color:#5b76c9;color:#e8eefc;}
.bw-intro .game-levelbtn b{color:#fff;}

/* Spielbühne */
main:has(.bw-game){padding:10px 10px 12px;}
.bw-game{padding:0;min-height:100%;display:flex;flex-direction:column;}
.bw-stage{position:relative;width:100%;flex:1;min-height:0;border-radius:22px;overflow:hidden;background:#0d1017;box-shadow:0 14px 34px rgba(15,18,24,.4);}
.bw-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}
.bw-photo-err{opacity:0;}
.bw-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 44%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.82) 100%);}

.bw-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:14px 14px 0;}
.bw-quit{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(0,0,0,.34);backdrop-filter:blur(6px);color:#fff;font-size:18px;font-weight:800;text-decoration:none;}
.bw-score{margin-left:auto;background:rgba(0,0,0,.36);backdrop-filter:blur(6px);color:#fff;font-family:"Anton",system-ui,sans-serif;
  font-size:22px;line-height:1;padding:8px 14px;border-radius:14px;letter-spacing:.5px;}
.bw-score span{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;opacity:.75;margin-left:2px;}
.bw-progress{background:rgba(0,0,0,.36);backdrop-filter:blur(6px);color:#fff;font-weight:900;font-size:16px;padding:8px 12px;border-radius:14px;}
.bw-progress span{opacity:.6;font-size:13px;}
.bw-timer{background:rgba(0,0,0,.36);backdrop-filter:blur(6px);color:#fff;font-family:"Anton",system-ui,sans-serif;
  font-size:24px;line-height:1;padding:7px 13px;border-radius:14px;min-width:56px;text-align:center;}
.bw-timer-unit{font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;opacity:.7;margin-left:1px;}
.bw-timer-low{background:rgba(226,59,59,.72);animation:bwPulse .8s ease-in-out infinite;}
@keyframes bwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Eingabe-Panel unten */
.bw-panel{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 16px;}
/* Hint-Slots + Tipp-Zeile */
.bw-sluice{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px;}
.bw-slots{display:flex;align-items:flex-end;gap:5px;flex-wrap:wrap;}
.bw-slotgrp{display:flex;gap:5px;}
.bw-slotgap{width:12px;}
.bw-slot{min-width:19px;height:26px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;
  color:#fff;border-bottom:3px solid rgba(255,255,255,.55);text-shadow:0 1px 6px rgba(0,0,0,.6);line-height:1;}
.bw-slot-art{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.3);}
.bw-slot-on{color:#ffd23f;border-bottom-color:#ffd23f;}
.bw-slot-space{width:8px;}
.bw-hintbtn{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.35);color:#fff;
  border-radius:13px;padding:9px 15px;font-size:14.5px;font-weight:800;cursor:pointer;}
.bw-hintbtn::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  background:radial-gradient(circle at 50% 38%,currentColor 0 2px,transparent 2px);opacity:.85;}
.bw-hintbtn:active{transform:scale(.95);}
.bw-hintbtn[disabled]{opacity:.4;cursor:default;}
.bw-inrow{display:flex;gap:9px;align-items:center;}
.bw-input{flex:1;min-width:0;height:54px;border-radius:16px;border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);color:#fff;font-size:20px;font-weight:800;padding:0 16px;outline:none;
  box-shadow:0 6px 18px rgba(0,0,0,.3);}
.bw-input::placeholder{color:rgba(255,255,255,.6);font-weight:700;}
.bw-input:focus{border-color:#fff;background:rgba(255,255,255,.22);}
.bw-go{flex:0 0 auto;width:54px;height:54px;border-radius:16px;border:none;cursor:pointer;
  background:linear-gradient(160deg,var(--purple),#5b3fe0);color:#fff;font-size:24px;font-weight:800;box-shadow:0 6px 18px rgba(124,92,255,.5);}
.bw-go:active{transform:scale(.95);}

/* Feedback-Overlay */
.bw-fb{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .18s,transform .18s;z-index:4;}
.bw-fb-show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.bw-fb-ic{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.4);}
.bw-fb-full .bw-fb-ic{background:#39b66d;}
.bw-fb-half .bw-fb-ic{background:#e6a11c;}
.bw-fb-wrong .bw-fb-ic{background:#e23b3b;}
.bw-fb-word{background:rgba(0,0,0,.6);color:#fff;font-family:"Anton",system-ui,sans-serif;font-size:24px;letter-spacing:.5px;
  padding:5px 16px;border-radius:12px;}
.bw-fb-note{color:#fff;font-weight:900;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* Ergebnis */
.bw-result-wrap{text-align:center;}
.bw-result{max-width:340px;margin:8px auto;background:var(--card);border:2px solid var(--line);border-radius:22px;padding:26px 22px;}
.bw-result-badge{width:74px;height:74px;margin:0 auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:38px;color:#fff;background:linear-gradient(160deg,#7c5cff,#5b3fe0);}
.bw-result-badge.bw-rec{background:linear-gradient(160deg,var(--gold),var(--goldd));}
.bw-rec-tag{color:var(--goldd);font-weight:900;font-size:14px;letter-spacing:.5px;margin-bottom:2px;}
.bw-bigscore{font-family:"Anton",system-ui,sans-serif;font-size:60px;line-height:1;color:var(--txt);}
.bw-result-sub{color:var(--txt3);font-size:13px;margin:2px 0 16px;}
.bw-result-stats{display:flex;justify-content:center;gap:14px;margin-bottom:14px;}
.bw-result-stats>div{flex:1;background:var(--soft);border-radius:14px;padding:12px 6px;}
.bw-result-stats b{display:block;font-family:"Anton",system-ui,sans-serif;font-size:26px;color:var(--txt);}
.bw-result-stats span{font-size:11px;color:var(--txt3);}
.bw-xp{color:var(--purple);font-weight:900;font-size:16px;margin:0 0 16px;}
.bw-result-btns{display:flex;flex-direction:column;gap:10px;}
.bw-btn{display:block;padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--txt);
  font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;}
.bw-btn-primary{background:linear-gradient(160deg,var(--purple),#5b3fe0);color:#fff;border:none;box-shadow:0 6px 0 #4a32c0;}
.bw-btn-primary:active{transform:translateY(2px);box-shadow:0 4px 0 #4a32c0;}