/* ================= Vier gewinnt ================= */
#play-c4{background:radial-gradient(ellipse at 50% 0%,#1d3a8a,#0b1530 70%)}
.c4-wrap{height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(10px + var(--safe-t)) 12px calc(12px + var(--safe-b));gap:10px;overflow:auto}
.c4-top{display:flex;align-items:center;width:100%;max-width:640px}
.c4-players{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap}
.c4-p{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:99px;background:rgba(255,255,255,.06);border:2px solid transparent;transition:all .3s var(--ease);font-size:14px}
.c4-p.turn{border-color:#ffe066;box-shadow:0 0 24px rgba(255,220,0,.4);transform:scale(1.05)}
.vs{font:400 22px 'Lilita One';color:var(--muted)}
.c4-status{font-weight:900;font-size:17px;padding:7px 18px;border-radius:99px;background:rgba(0,0,0,.35);transition:all .3s}
.c4-status.me{background:linear-gradient(135deg,#ffd84d,#ffaa00);color:#2a1d00;box-shadow:0 0 30px rgba(255,200,0,.5)}
.c4-board-wrap{position:relative;padding-top:64px;width:min(560px,100%)}
.c4-hover{position:absolute;left:0;right:0;top:0;height:60px;pointer-events:none}
.c4-hover .disc{position:absolute;top:6px;transform:translateX(-50%);--d:min(56px,11vw);opacity:.85;animation:pop .2s}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:0;padding:10px;border-radius:22px;background:linear-gradient(160deg,#2f6bff,#1740c4);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 20px 50px rgba(0,0,0,.5);perspective:600px}
.c4-col{display:flex;flex-direction:column;cursor:pointer;border-radius:14px;transition:background .2s}
.c4-board.myturn .c4-col:hover{background:rgba(255,255,255,.1)}
.c4-cell{aspect-ratio:1;display:grid;place-items:center;position:relative}
.c4-cell::before{content:"";position:absolute;inset:9%;border-radius:50%;background:#0a1640;box-shadow:inset 0 5px 8px rgba(0,0,0,.6)}
.c4-cell .disc{--d:82%;position:relative;z-index:1}
.c4-cell .disc:not(.p0):not(.p1){visibility:hidden}
.c4-cell.win .disc{animation:winDisc .7s ease-in-out infinite alternate;z-index:2}
.c4-cell.last .disc{box-shadow:0 0 0 3px rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,0,0,.25)}
@keyframes winDisc{to{transform:scale(1.12);filter:brightness(1.35) drop-shadow(0 0 12px #fff)}}
.c4-bottom{display:flex;gap:10px;min-height:44px}
.disc{width:var(--d,40px);height:var(--d,40px);border-radius:50%;flex:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.4),0 3px 6px rgba(0,0,0,.35);display:grid;place-items:center;font-size:calc(var(--d,40px)*.55)}
.disc.p0{background:radial-gradient(circle at 35% 30%,#ff8a8a,#e3242b 55%,#a40f16)}
.disc.p1{background:radial-gradient(circle at 35% 30%,#fff4a8,#ffcc00 55%,#c99700)}
.disc.disc_gold.p0{background:radial-gradient(circle at 35% 30%,#fff3b0,#e6b422 50%,#8a6400)}
.disc.disc_gold.p1{background:radial-gradient(circle at 35% 30%,#ffffff,#c0c7d0 50%,#6b7480)}
.disc.disc_neon.p0{background:#16001a;box-shadow:0 0 12px #ff2bd6,inset 0 0 10px #ff2bd6;border:3px solid #ff6ae6}
.disc.disc_neon.p1{background:#001a1a;box-shadow:0 0 12px #00f0ff,inset 0 0 10px #00f0ff;border:3px solid #7ff8ff}
.disc.disc_emoji.p0::after{content:"😈"}.disc.disc_emoji.p1::after{content:"😇"}
.c4-cell .disc.disc_emoji::after{font-size:calc(var(--d)*.6)}

/* ================= 2048 ================= */
#play-g2048{overflow:auto}
.g2048{--bg:#faf8ef;--board:#bbada0;--cell:#cdc1b4;--txt:#776e65;min-height:100%;padding:calc(14px + var(--safe-t)) 16px calc(20px + var(--safe-b));display:flex;flex-direction:column;align-items:center;background:var(--bg);color:var(--txt);touch-action:none}
.g2048 .g-top{display:flex;align-items:center;gap:10px;width:min(460px,100%)}
.g2048 h1{font:400 44px 'Lilita One';margin:0;color:var(--txt)}
.g2048 .icon-btn{background:rgba(0,0,0,.08);color:var(--txt)}
.g2048 .sbox{background:var(--board);color:#fff;border-radius:10px;padding:5px 12px;text-align:center;min-width:72px}
.g2048 .sbox span{display:block;font-size:11px;font-weight:800;opacity:.85;text-transform:uppercase}
.g2048 .sbox b{font-size:20px}
.g2048 .muted{color:var(--txt);opacity:.7}
.gboard{--gap:min(12px,2.6vw);--sz:min(440px,calc(100vw - 32px));width:var(--sz);height:var(--sz);background:var(--board);border-radius:14px;padding:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);position:relative;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.gcell{background:var(--cell);border-radius:8px}
.gtiles{position:absolute;inset:var(--gap)}
.gtile{--cs:calc((var(--sz) - 5 * var(--gap)) / 4);position:absolute;width:var(--cs);height:var(--cs);left:0;top:0;transform:translate(calc(var(--c) * (var(--cs) + var(--gap))),calc(var(--r) * (var(--cs) + var(--gap))));transition:transform .12s ease-in-out;border-radius:8px;display:grid;place-items:center;font:900 calc(var(--cs)*.42) Nunito;background:#eee4da;color:#776e65}
.gtile.new{animation:tnew .2s .1s ease backwards}
.gtile.merged{animation:tmerge .2s .1s ease}
@keyframes tnew{from{scale:0}}
@keyframes tmerge{50%{scale:1.2}}
.gtile.v4{background:#ede0c8}.gtile.v8{background:#f2b179;color:#fff}.gtile.v16{background:#f59563;color:#fff}.gtile.v32{background:#f67c5f;color:#fff}.gtile.v64{background:#f65e3b;color:#fff}
.gtile.v128{background:#edcf72;color:#fff;font-size:calc(var(--cs)*.34);box-shadow:0 0 20px rgba(243,215,116,.4)}.gtile.v256{background:#edcc61;color:#fff;font-size:calc(var(--cs)*.34);box-shadow:0 0 24px rgba(243,215,116,.5)}
.gtile.v512{background:#edc850;color:#fff;font-size:calc(var(--cs)*.34);box-shadow:0 0 28px rgba(243,215,116,.6)}.gtile.v1024{background:#edc53f;color:#fff;font-size:calc(var(--cs)*.28)}
.gtile.v2048,.gtile.v4096{background:#edc22e;color:#fff;font-size:calc(var(--cs)*.28);box-shadow:0 0 40px rgba(243,215,116,.9)}
/* Themes */
.g2048.theme_dark{--bg:#0f1226;--board:#232a52;--cell:#2e3768;--txt:#e6e9ff}
.g2048.theme_dark .gtile{background:#3d4a9a;color:#fff}
.g2048.theme_dark .gtile.v4{background:#4a5bd0}.g2048.theme_dark .gtile.v8{background:#7a4dff}.g2048.theme_dark .gtile.v16{background:#a53dff}.g2048.theme_dark .gtile.v32{background:#e03dff}
.g2048.theme_dark .gtile.v64{background:#ff3da5}.g2048.theme_dark .gtile.v128,.g2048.theme_dark .gtile.v256,.g2048.theme_dark .gtile.v512{background:#ff6a3d;box-shadow:0 0 24px #ff6a3d}
.g2048.theme_dark .gtile.v1024,.g2048.theme_dark .gtile.v2048,.g2048.theme_dark .gtile.v4096{background:#ffd23d;color:#222;box-shadow:0 0 34px #ffd23d}
.g2048.theme_candy{--bg:#fff0f6;--board:#f7a8c9;--cell:#fbcfe0;--txt:#a3215f}
.g2048.theme_candy .gtile{background:#fff;color:#d6337a}
.g2048.theme_candy .gtile.v4{background:#ffe3f0}.g2048.theme_candy .gtile.v8{background:#ffb3d9;color:#fff}.g2048.theme_candy .gtile.v16{background:#ff8cc6;color:#fff}.g2048.theme_candy .gtile.v32{background:#c78cff;color:#fff}
.g2048.theme_candy .gtile.v64{background:#8cb8ff;color:#fff}.g2048.theme_candy .gtile.v128,.g2048.theme_candy .gtile.v256,.g2048.theme_candy .gtile.v512{background:#5ee0c0;color:#fff}
.g2048.theme_candy .gtile.v1024,.g2048.theme_candy .gtile.v2048,.g2048.theme_candy .gtile.v4096{background:#ffcf33;color:#fff;box-shadow:0 0 30px #ffcf33}
.t2048-prev{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border-radius:10px;background:#bbada0;width:96px}
.t2048-prev i{height:38px;border-radius:5px;display:grid;place-items:center;font:900 13px Nunito;font-style:normal;background:#eee4da;color:#776e65}
.t2048-prev i:nth-child(3){background:#f65e3b;color:#fff}.t2048-prev i:nth-child(4){background:#edc22e;color:#fff}
.t2048-prev.theme_dark{background:#232a52}.t2048-prev.theme_dark i{background:#4a5bd0;color:#fff}.t2048-prev.theme_dark i:nth-child(3){background:#ff3da5}.t2048-prev.theme_dark i:nth-child(4){background:#ffd23d;color:#222}
.t2048-prev.theme_candy{background:#f7a8c9}.t2048-prev.theme_candy i{background:#fff;color:#d6337a}.t2048-prev.theme_candy i:nth-child(3){background:#8cb8ff;color:#fff}.t2048-prev.theme_candy i:nth-child(4){background:#ffcf33;color:#fff}
.view.noanim>*{animation:none}