/* ===== Memory Solo: Tokens nur für das Spiel ===== */
:root{
  --card-ratio: 0.70;
  --card-min: 180px;
  --card-pad: 1px;
  --glow-inset: -4px;
  --glow-scale: 1.02;
  --glow-brightness: 1.45;
  --cardback: url("../card_sets/memoriii_card_back.png");
  --cardglow: url("../card_sets/memoriii_card_glow_soft_v2.png");
}
@media (max-width: 900px){
  :root{ --card-min: 150px; --card-pad: 16px; }
}
@media (max-width: 600px){
  :root{ --card-min: 130px; --card-pad: 14px; }
}

/* Anti-FOUC: Spielfeld erst zeigen, wenn Karten bereit sind. */
body.memory-preinit #grid{ opacity:0; }
body:not(.memory-preinit) #grid{ opacity:1; transition:opacity .18s ease; }

/* ===== Topics/Chooser oben ===== */
.mini{ color: var(--muted); }
.chooser{
  border:1px solid var(--border); border-radius:12px;
  padding:14px; background:rgba(255,255,255,.03); margin-bottom:14px;
}
.topics{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  overflow-x:hidden;
}
.topic-card{
  border:0; border-radius:12px; background:transparent;
  padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
  width:auto; height:auto; flex:0 0 auto;
}
.topic-card:hover{ transform: translateY(-2px); }
.topic-card.active{ border:0; background:transparent; }
.topic-card.active .topic-icon{ box-shadow: 0 0 0 2px var(--aqua); }
.topic-icon{
  width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); font-size:22px; background:rgba(255,255,255,.04);
}
.topic-meta{ display:none; }
.topic-meta small{ color: var(--muted); display:none; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }

@media(max-width:900px){ .topics{ gap:10px; justify-content:center; } }

/* ===== Grid der Karten (klassischer Modus) ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min),1fr));
  gap:12px; margin-top:16px;
}

/* ===== Spielfeld-Basis (#grid = Spielfeld-Container) ===== */
#grid{ position:relative; display:block; min-height:60vh; }
#cardsLayer{ position:relative; z-index:0; }
#petalsLayer{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* ===== Karte ===== */
#grid .card{
  position:relative;
  aspect-ratio: var(--card-ratio);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:visible;
  perspective:1000px; -webkit-perspective:1000px;
  background:transparent;
  transition:filter .3s ease;
}
/* Ratio-Hack: sichtbare Höhe erzeugen */
#grid .card::before{
  content:""; display:block; padding-top: calc(100% / var(--card-ratio));
}
/* Innenfläche aufspannen */
#grid .card > .card-inner{ position:absolute; inset:0; }

/* Flip-Mechanik */
#grid .card-inner{
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .35s ease; -webkit-transition:-webkit-transform .35s ease;
  will-change:transform; cursor:pointer;
}
#grid .card.flipped .card-inner{
  transform:rotateY(180deg); -webkit-transform:rotateY(180deg); cursor:default;
}

/* Vorder- & Rückseite */
#grid .face, #grid .back{
  position:absolute; inset:0; display:flex !important; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);
}
#grid .back{
  transform:rotateY(0deg); -webkit-transform:rotateY(0deg);
  padding: var(--card-pad);
  background-image:
    var(--cardback, none),
    linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  color: transparent; font-size:0; font-weight:800; letter-spacing:.5px;
  box-shadow: inset 0 0 0 1px rgba(0,228,211,0.25);
  border-radius:12px;
  z-index:1;
}
#grid .face{
  transform:rotateY(180deg); -webkit-transform:rotateY(180deg);
  background:#000; z-index:3;
}
#grid .face img{
  width:100%; height:100%; object-fit:cover; display:block !important;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

/* Glow-Layer */
#grid .card-glow-outer{
  position:absolute; inset: var(--glow-inset);
  background: center/cover no-repeat var(--cardglow, none);
  opacity:0; pointer-events:none; z-index:2;
  transform: scale(var(--glow-scale));
  transition: opacity .28s ease, filter .28s ease;
  filter: brightness(1) saturate(1.0) contrast(1.0);
}
#grid .card:hover .card-glow-outer{
  opacity:1;
  filter: brightness(var(--glow-brightness)) saturate(1.25) contrast(1.10);
}
/* zusätzlicher Hover-Glow */
#grid .card:hover{
  filter:
    drop-shadow(0 0 10px rgba(0,255,255,.75))
    drop-shadow(0 0 20px rgba(0,255,255,.45))
    drop-shadow(0 0 35px rgba(0,255,255,.25));
}

/* Fallback-Rückseite */
body[data-cardback="fallback"] #grid .back{
  color:#041312; font-size:1.1rem; padding:0;
  background-origin:border-box; background-clip:border-box;
  background-image:linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  background-repeat:no-repeat; background-position:center; background-size:cover;
}

/* ===== Spiral-Modus ===== */
#grid.spiral{ position:relative; display:block; min-height:60vh; }
#grid .card.spiral-item{
  position:absolute;
  width:min(15vw, 160px);
  aspect-ratio: var(--card-ratio);
  left:0; top:0;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), filter .18s linear;
  will-change: transform, filter, z-index;
}
#grid .card.spiral-item[data-focus="1"] .card-glow-outer{
  opacity:1 !important;
  filter: brightness(1.6) saturate(1.25) contrast(1.1);
}
#grid .card.spiral-item[data-focus="1"]{
  filter:
    drop-shadow(0 0 10px rgba(0,255,255,.75))
    drop-shadow(0 0 20px rgba(0,255,255,.45))
    drop-shadow(0 0 35px rgba(0,255,255,.25));
}
@media (max-width: 480px){
  #grid .card.spiral-item{ width:min(28vw, 120px); }
}

/* ===== Gesammelte Paare (Stacks) ===== */
#collectedHud{ position:relative; height:0; }
#collectedStack, #remainingStack{ pointer-events:none; }
#collectedStack{
  position:absolute; top:-6px; left:-6px; width:140px; height:90px;
}
.col-thumb{
  position:absolute; width:46px; height:calc(46px / var(--card-ratio));
  border-radius:8px; border:1px solid var(--border);
  background:#000 center/cover no-repeat;
  box-shadow:0 6px 14px rgba(0,0,0,.35); opacity:.96; transform:rotate(-2deg);
}
.col-thumb:nth-child(1){ left:0;  top:0;  transform:rotate(-2deg); }
.col-thumb:nth-child(2){ left:12px; top:8px; transform:rotate( 1deg); }
.col-thumb:nth-child(3){ left:24px; top:16px;transform:rotate(-1deg); }
.col-thumb:nth-child(4){ left:36px; top:24px;transform:rotate( 2deg); }
.col-thumb:nth-child(5){ left:48px; top:32px;transform:rotate(-3deg); }
.col-thumb:nth-child(n+6){ display:none; }

#remainingStack{
  --stack-card-w: 46px;
  --stack-gap-x: 9px;
  --stack-gap-y: 6px;
  position:absolute; top:-10px; right:-10px; width:140px; height:90px;
}
.rem-back{
  position:absolute;
  width:var(--stack-card-w);
  height:calc(var(--stack-card-w) / var(--card-ratio));
  border-radius:8px;
  border:1px solid var(--border);
  background: var(--cardback, linear-gradient(135deg, var(--aqua), var(--aqua-deep)));
  background-size:cover; background-position:center;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  opacity:.9;
  filter:saturate(1.05) contrast(1.05);
  transform:rotate(2deg);
}
.rem-back:nth-child(1){ right:0; top:0; transform:rotate( 1deg); }
.rem-back:nth-child(2){ right:var(--stack-gap-x); top:var(--stack-gap-y); transform:rotate(-2deg); }
.rem-back:nth-child(3){ right:calc(var(--stack-gap-x)*2); top:calc(var(--stack-gap-y)*2); transform:rotate( 1deg); }
.rem-back:nth-child(4){ right:calc(var(--stack-gap-x)*3); top:calc(var(--stack-gap-y)*3); transform:rotate(-1deg); }
.rem-back:nth-child(5){ right:calc(var(--stack-gap-x)*4); top:calc(var(--stack-gap-y)*4); transform:rotate( 2deg); }
.rem-back:nth-child(n+6){ display:none; }

@media (max-width: 600px){
  #remainingStack{ top:-6px; right:-6px; width:108px; height:72px; --stack-card-w: 36px; --stack-gap-x: 7px; --stack-gap-y: 5px; }
  #remainingStack .rem-back{ border-radius:7px; box-shadow:0 4px 10px rgba(0,0,0,.32); }
}

@media (max-width: 480px){
  #remainingStack{ top:-4px; right:-4px; width:92px; height:60px; --stack-card-w: 32px; --stack-gap-x: 6px; --stack-gap-y: 4px; }
  #remainingStack .rem-back{ border-radius:6px; }
}

@media (max-width: 700px), (pointer: coarse){
  #grid .back{
    padding:0 !important;
    background-origin:border-box, border-box !important;
    background-clip:border-box, border-box !important;
    background-size:100% 100%, cover !important;
  }
}

/* ===== Ergebnis-Feedback für Choices ===== */
.choice-correct{
  border-color: var(--aqua) !important;
  box-shadow: 0 0 0 3px rgba(0,228,211,.15) inset, 0 0 14px rgba(0,228,211,.30);
}
.choice-wrong{
  border-color: #a33 !important;
  box-shadow: 0 0 0 3px rgba(170,51,51,.20) inset;
}

/* ===== Modals, HUD, Debug ===== */
.hud{ margin-left:10px; }
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; padding:16px; z-index:20000;
}
.modal .inner{
  width:min(640px, 92vw); background:var(--card);
  border:1px solid var(--border); border-radius:16px; padding:16px;
}
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

#debugBox{
  position:fixed; right:10px; bottom:10px; max-width:44vw;
  background:rgba(0,0,0,.7); color:#fff;
  font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding:10px; border-radius:8px; display:none; z-index:2000; white-space:pre-wrap;
}
#debugBox a{ color:#9cf; }

/* ===== Lern-Snack (ls-*) ===== */
.ls-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ls-x{
  border:1px solid var(--border); background:transparent; color:var(--muted);
  width:28px; height:28px; border-radius:8px; cursor:pointer;
}
.ls-x:hover{ color:#fff; border-color:var(--aqua); }
.ls-body{ display:flex; gap:12px; align-items:flex-start; }
.ls-thumb{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:10px;
  border:1px solid var(--border); background:#000;
}
.ls-main{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.ls-credits-line{ display:flex; align-items:center; gap:8px; min-height:28px; justify-content:flex-start; }
.ls-credits{ display:none !important; order:2; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48ch; }
.info-chip{
  order:1; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px; border:1px solid var(--aqua);
  background:linear-gradient(135deg, var(--aqua), var(--aqua-deep));
  color:#041312; font-weight:800; cursor:pointer;
}
.info-chip[aria-expanded="true"]{ box-shadow:0 0 0 3px rgba(0,228,211,.18); }
.ls-panel{ border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(255,255,255,.03); }
.ls-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.ls-grid a{ color:var(--aqua); }
.muted{ color:var(--muted); }
.ls-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.report-btn{
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff;
  padding:6px 10px; border-radius:10px; cursor:pointer; font-size:.9rem;
}
.report-btn:hover{ border-color:var(--aqua); box-shadow:0 0 0 3px rgba(0,228,211,.15) inset; }

/* ===== Blütensteuerung: Tuning-Panel ===== */
#petalsPanel{
  position:fixed; right:14px; bottom:14px; width:260px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px; box-shadow:0 8px 30px rgba(0,0,0,.45);
  z-index:60000; font-size:13px; color:var(--muted);
}
#petalsPanel h4{ margin:0 0 8px 0; font-size:13px; color:inherit; }
#petalsPanel .row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
#petalsPanel label{ flex:1; font-size:12px; color:var(--muted); }
#petalsPanel input[type=range]{ flex:1; }
#petalsPanel .small-btn{
  background:transparent; border:1px solid var(--border); padding:6px 8px;
  border-radius:8px; color:var(--muted); cursor:pointer;
}
#petalsPanel .panel-handle{
  position:absolute; left:-36px; top:8px; width:36px; height:36px;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border); cursor:pointer;
}
#petalsPanel .panel-handle span{ transform:rotate(-90deg); color:var(--muted); }
#petalsPanel[aria-hidden="true"]{ display:none; }

/* ===== Credits, Badges & Ads im Lern-Snack ===== */
.credit-badges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.04); font-size:.85rem; color:var(--muted);
}
.badge strong{ color:#fff; font-weight:700; }
.conf-bar{
  position:relative; width:72px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.conf-bar>span{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg, var(--aqua), var(--aqua-deep));
}
.ls-credits{ display:block !important; }
.ls-thumb-wrap{ position:relative; display:inline-block; width:96px; aspect-ratio:var(--card-ratio); flex:0 0 auto; }
.info-chip-thumb{
  position:absolute; right:8px; bottom:8px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}
#learnModal .ls-ad-slot{ width:100%; margin-top:10px; max-width:320px; }
#learnModal .ad-slot{ width:100%; max-width:320px; }
#learnModal .ad-card{
  width:100%;
  background:linear-gradient(180deg, rgba(34,44,59,.9), rgba(18,25,36,.95));
  border:1px solid var(--border); border-radius:14px; padding:10px;
  box-shadow:0 12px 26px rgba(0,0,0,.4);
}
#learnModal .ad-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
#learnModal .ad-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:999px; font-size:11px; font-weight:700;
  background:rgba(47,227,200,.14); color:var(--text); border:1px solid rgba(47,227,200,.35);
  letter-spacing:0.03em; text-transform:uppercase;
}
#learnModal .ad-pill.subtle{ background:rgba(255,255,255,.05); border-color:var(--border); color:var(--muted); }
#learnModal .ad-media{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background:#0c131c;
}
#learnModal .ad-media[data-format="portrait"]{ aspect-ratio:4/5; }
#learnModal .ad-media[data-format="3-2"]{ aspect-ratio:3/2; }
#learnModal .ad-media[data-format="16-9"]{ aspect-ratio:16/9; }
#learnModal .ad-media img,
#learnModal .ad-media video{ width:100%; height:100%; object-fit:cover; display:block; }
#learnModal .ad-mute{
  position:absolute; bottom:6px; right:6px;
  border:none; background:rgba(0,0,0,.55); color:#fff; border-radius:10px;
  padding:6px 8px; cursor:pointer; font-weight:700; box-shadow:0 6px 12px rgba(0,0,0,.35);
}
#learnModal .ad-body{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
#learnModal .ad-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
#learnModal .ad-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 12px; border-radius:12px; font-weight:800; font-size:13px; text-decoration:none;
  border:1px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#learnModal .ad-btn.primary{
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#022220; border-color:rgba(47,227,200,.4);
}
#learnModal .ad-btn.ghost{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--border); }
#learnModal .ad-audio{ width:100%; }
#learnModal .ad-note{
  font-size:12px; color:var(--muted); line-height:1.4;
  background:rgba(255,255,255,.03); border:1px dashed var(--border);
  padding:8px 10px; border-radius:10px;
}