/* 2048 — eigene Styles (Farben nur über Tokens) */
:root {
  --g: 340px; --zelle: 76px; --spalt: 10px;
  --brett: color-mix(in srgb, var(--kl-flaeche) 75%, #000);
  --leer: color-mix(in srgb, var(--kl-flaeche2) 92%, #fff);
  --dunkel: #1a2440; --hell: #ffffff;
  --k2: #dfe8f7; --k4: #c3d6f6; --k8: #7fb2ff; --k16: #4f8cff; --k32: #6a6cf5; --k64: #9a5cf0;
  --k128: #38e1c6; --k256: #22c3a0; --k512: #39d98a; --k1024: #ffb648; --k2048: #ffd54a;
  --k4096: #ff6b6b; --k8192: #e8457f; --kmehr: #2a2f45;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --brett: #b9c6dd; --leer: #d3dcec; --k2: #f4f7fd; --k4: #e2eafb;
  }
}
html, body { height: 100%; overflow: hidden; }
#spiel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 8px 10px; min-height: 0; touch-action: none; }

#oben { display: flex; gap: 8px; width: var(--g); align-items: stretch; }
#modus { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
#modus b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modus span { font-size: 13px; color: var(--kl-text2); font-weight: 700; }
.box { position: relative; background: var(--kl-flaeche); border-radius: 10px; padding: 5px 10px; min-width: 76px; text-align: center; box-shadow: var(--kl-schatten); }
.box small { display: block; font-size: 11px; font-weight: 800; color: var(--kl-text2); text-transform: uppercase; letter-spacing: .04em; }
.box b { font-size: 20px; }
#plus { position: absolute; left: 0; right: 0; top: 18px; font-style: normal; font-weight: 800; color: var(--kl-gut); pointer-events: none; opacity: 0; }
#plus.an { animation: plus .7s ease-out; }
@keyframes plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-28px); } }

#brett { position: relative; width: var(--g); height: var(--g); flex: none; background: var(--brett); border-radius: 12px; box-shadow: var(--kl-schatten); }
#zellen, #kacheln { position: absolute; inset: 0; }
.zelle, .kachel { position: absolute; left: 0; top: 0; width: var(--zelle); height: var(--zelle); border-radius: calc(var(--zelle) * .1);
  transform: translate(calc(var(--spalt) + var(--c) * (var(--zelle) + var(--spalt))), calc(var(--spalt) + var(--r) * (var(--zelle) + var(--spalt)))); }
.zelle { background: var(--leer); }
.kachel { transition: transform .11s ease-in-out; z-index: 1; }
.kachel > span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: inherit;
  font-weight: 800; font-size: calc(var(--zelle) * .46); line-height: 1; background: var(--kf); color: var(--kt, var(--hell)); }
.kachel.d3 > span { font-size: calc(var(--zelle) * .38); }
.kachel.d4 > span { font-size: calc(var(--zelle) * .3); }
.kachel.d5 > span { font-size: calc(var(--zelle) * .25); }
.kachel.d6 > span { font-size: calc(var(--zelle) * .2); }
.kachel.neu > span { animation: auftauchen .18s .1s ease-out backwards; }
.kachel.fusion { z-index: 2; }
.kachel.fusion > span { animation: fusion .2s .1s ease-out backwards; }
.kachel.weg > span { animation: weg .25s ease-in forwards; }
@keyframes auftauchen { from { transform: scale(0); } }
@keyframes fusion { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.16); opacity: 1; } 100% { transform: scale(1); } }
@keyframes weg { to { transform: scale(0); opacity: 0; } }
.ohne-anim .kachel { transition: none; }

.v2 { --kf: var(--k2); --kt: var(--dunkel); } .v4 { --kf: var(--k4); --kt: var(--dunkel); }
.v8 { --kf: var(--k8); } .v16 { --kf: var(--k16); } .v32 { --kf: var(--k32); } .v64 { --kf: var(--k64); }
.v128 { --kf: var(--k128); --kt: var(--dunkel); } .v256 { --kf: var(--k256); --kt: var(--dunkel); } .v512 { --kf: var(--k512); --kt: var(--dunkel); }
.v1024 { --kf: var(--k1024); --kt: var(--dunkel); }
.v2048 > span { --kf: var(--k2048); --kt: var(--dunkel); box-shadow: 0 0 calc(var(--zelle) * .3) color-mix(in srgb, var(--k2048) 70%, transparent); }
.v4096 { --kf: var(--k4096); } .v8192 { --kf: var(--k8192); } .vmehr { --kf: var(--kmehr); --kt: var(--k2048); }

#ende { position: absolute; inset: 0; z-index: 5; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--kl-bg) 65%, transparent); animation: kl-ein .4s; }
#ende[hidden] { display: none; }
#ende p { margin: 0; font-size: 24px; font-weight: 800; }

#werkzeuge { display: flex; gap: 8px; width: var(--g); }
#werkzeuge .kl-knopf { flex: 1; padding: 10px 6px; font-size: 15px; white-space: nowrap; }
#hinweis { margin: 0; font-size: 12px; color: var(--kl-text2); font-weight: 700; }
@media (max-height: 520px) { #hinweis { display: none; } }
@media (prefers-reduced-motion: reduce) { .kachel { transition: none; } .kachel > span { animation: none !important; } }