/* ============ Spiele (games.js) ============ */
#view-games [hidden], #view-game [hidden]{display:none!important}
.cr-games{--cv:#3A8DDE}
/* with "Spiele" the phone bar has seven buttons; signing out stays in the profile (#p-logout) */
@media (max-width:480px){ .bottomnav #nav-logout{display:none} }
.gm-home-ics{font-size:22px;letter-spacing:4px}

/* ---- the games page: cards + leaderboard ---- */
.gm-hub{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:900px){ .gm-hub{grid-template-columns:1fr} }
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gm-card{display:flex;gap:14px;align-items:flex-start;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .15s,border-color .15s}
.gm-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--gv)}
.gm-card:hover{transform:translateY(-3px);border-color:var(--gv)}
.gm-card.k-learn{--gv:#3A8DDE}
.gm-card.k-fun{--gv:#E8913A}
.gm-card-ic{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:30px;
  background:color-mix(in srgb,var(--gv) 16%,var(--surface))}
.gm-card-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.gm-card-txt b{font-size:18px}
.gm-tag{font-size:12px;font-weight:700;color:var(--gv)}
.gm-card-d{font-size:13.5px;color:var(--muted);line-height:1.4}
.gm-card-best{font-size:13.5px;font-weight:700;margin-top:4px}
.gm-board{position:sticky;top:84px}
@media (max-width:900px){ .gm-board{position:static} }
.gm-board h3{margin:0 0 10px}
.gm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.gm-chips .chip{cursor:pointer;font-size:13px}
.gm-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.gm-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;font-size:14.5px}
.gm-row:nth-child(odd){background:var(--surface-2)}
.gm-row.me{background:var(--accent-soft);font-weight:700}
.gm-rank{width:28px;text-align:center;font-weight:800;flex:none}
.gm-ava{font-size:20px;flex:none}
.gm-nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-pts{font-variant-numeric:tabular-nums}
.gm-gap{text-align:center;color:var(--muted);list-style:none}
.gm-top-note{color:var(--muted);font-size:14px;margin:8px 0 0}

/* ---- one round ---- */
.gm-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.gm-hud-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 12px;font-size:14px;color:var(--muted)}
.gm-hud-box b{color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums;margin-left:4px}
.gm-extra{flex:1;min-width:120px;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.gm-play{position:relative;max-width:640px;margin:0 auto}
.gm-stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;min-height:380px;display:flex;flex-direction:column;align-items:center;gap:16px}
.gm-over{position:absolute;inset:0;display:grid;place-items:center;padding:16px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg,#fff) 70%,transparent);backdrop-filter:blur(3px)}
.gm-over-in{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:22px 22px 18px;max-width:420px;width:100%;text-align:center}
.gm-over-ic{font-size:46px;line-height:1}
.gm-over-in h2{margin:8px 0 6px}
.gm-over-p{color:var(--muted);margin:0 0 10px;line-height:1.5}
.gm-over-rec{font-weight:700;margin:0 0 12px}
.gm-over-rec.new{color:var(--teal);font-size:19px}
.gm-over-rec.bad{color:var(--danger)}
.gm-over-btns{display:flex;flex-direction:column;gap:8px}

/* Rechenblitz */
.gm-q{font-size:clamp(34px,8vw,52px);font-weight:800;font-variant-numeric:tabular-nums;margin:18px 0 6px;text-align:center}
.gm-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:420px}
.gm-opt{font:inherit;font-size:26px;font-weight:800;padding:18px 0;border-radius:14px;border:2px solid var(--line);
  background:var(--surface-2);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.gm-opt:hover{border-color:var(--accent)}
.gm-opt.ok{background:var(--teal-soft);border-color:var(--teal)}
.gm-opt.bad{background:color-mix(in srgb,var(--danger) 18%,var(--surface));border-color:var(--danger);animation:gm-shake .3s}

/* Wort-Memory */
.gm-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:480px}
.gm-card-m{aspect-ratio:1;border-radius:12px;border:2px solid var(--line);background:#3A8DDE;cursor:pointer;font:inherit;
  display:grid;place-items:center;padding:4px;color:var(--ink);transition:transform .15s}
.gm-card-m .gm-face{display:none}
.gm-card-m .gm-back{font-size:28px}
.gm-card-m.open,.gm-card-m.done{background:var(--surface-2);transform:rotateY(0)}
.gm-card-m.open .gm-face,.gm-card-m.done .gm-face{display:block}
.gm-card-m.open .gm-back,.gm-card-m.done .gm-back{display:none}
.gm-card-m.pic .gm-face{font-size:clamp(26px,8vw,40px)}
.gm-card-m.word .gm-face{font-size:clamp(11px,3.2vw,15px);font-weight:700;overflow-wrap:anywhere;hyphens:auto}
.gm-card-m.done{border-color:var(--teal);background:var(--teal-soft);cursor:default}

/* Buchstabensalat */
.gm-pic{font-size:72px;line-height:1;margin-top:6px}
.gm-slots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:52px}
.gm-slot{width:40px;height:48px;border-bottom:3px solid var(--muted);display:grid;place-items:center;font-size:26px;font-weight:800;cursor:pointer}
.gm-slot.full{border-color:var(--accent)}
.gm-slots.ok .gm-slot{color:var(--teal);border-color:var(--teal)}
.gm-slots.bad{animation:gm-shake .3s}
.gm-slots.bad .gm-slot{color:var(--danger);border-color:var(--danger)}
.gm-tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gm-tile{width:48px;height:52px;border-radius:12px;border:2px solid var(--line);background:#FFF4D6;color:#3A2A10;
  font:inherit;font-size:24px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.gm-tile:disabled{opacity:.25;cursor:default;box-shadow:none}
.gm-tools{display:flex;gap:10px}

/* Schlange */
.gm-canvas{width:min(100%,420px);aspect-ratio:1;border-radius:12px;touch-action:none;border:2px solid #9CC97A}
.gm-pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);gap:6px}
.gm-padb{font-size:22px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;touch-action:none}
.gm-padb.p-up{grid-column:2;grid-row:1}
.gm-padb.p-left{grid-column:1;grid-row:2}
.gm-padb.p-down{grid-column:2;grid-row:2}
.gm-padb.p-right{grid-column:3;grid-row:2}
@media (hover:hover) and (pointer:fine){ .gm-pad{opacity:.7} }

/* 2048 */
.gm-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,420px);aspect-ratio:1;
  padding:10px;border-radius:14px;background:#BBADA0;touch-action:none;user-select:none}
.gm-n{border-radius:8px;background:rgba(238,228,218,.35);display:grid;place-items:center;
  font-size:clamp(20px,7vw,36px);font-weight:800;color:#776E65;font-variant-numeric:tabular-nums}
.gm-n.big{font-size:clamp(16px,5.5vw,28px)}
.gm-n.v2{background:#EEE4DA}.gm-n.v4{background:#EDE0C8}
.gm-n.v8{background:#F2B179;color:#fff}.gm-n.v16{background:#F59563;color:#fff}
.gm-n.v32{background:#F67C5F;color:#fff}.gm-n.v64{background:#F65E3B;color:#fff}
.gm-n.v128{background:#EDCF72;color:#fff}.gm-n.v256{background:#EDCC61;color:#fff}
.gm-n.v512{background:#EDC850;color:#fff}.gm-n.v1024{background:#EDC53F;color:#fff}
.gm-n.v2048{background:#EDC22E;color:#fff}.gm-n.v4096{background:#3C3A32;color:#fff}
.gm-n.pop{animation:gm-pop .18s}
.gm-n.born{animation:gm-born .18s}
.gm-finish{margin-left:auto}

@keyframes gm-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes gm-pop{50%{transform:scale(1.15)}}
@keyframes gm-born{from{transform:scale(.3)}}
@media (max-width:560px){
  .gm-stage{padding:14px 10px;min-height:340px}
  .gm-mem{gap:7px}
  .gm-tile{width:42px;height:48px;font-size:21px}
  .gm-slot{width:32px;font-size:22px}
}