/* ================= Vier gewinnt ================= */
#play-c4{background:radial-gradient(ellipse 80% 60% at 50% 0%,#2a4fc4 0%,#13235e 45%,#070b22 100%);overflow:hidden}
#play-c4::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 20% 70%,rgba(255,60,80,.18),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,210,40,.15),transparent 40%);animation:c4Glow 8s ease-in-out infinite alternate;pointer-events:none}
@keyframes c4Glow{to{transform:translate(4%,-3%) scale(1.05)}}
.c4-wrap{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px;padding:calc(10px + var(--safe-t)) clamp(10px,2vw,28px) calc(10px + var(--safe-b));overflow:hidden;max-width:1600px;margin:0 auto;--bw:420px}
.c4-bar{display:flex;align-items:center;gap:8px}
.c4-bar .icon-btn{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);flex:none}
.c4-title{display:flex;flex-direction:column;line-height:1.15;margin-left:6px;min-width:0}
.c4-title b{font:400 22px 'Lilita One';white-space:nowrap}.c4-title span{font-size:12px;color:var(--muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c4-main{display:grid;min-width:0;grid-template-columns:minmax(150px,250px) minmax(0,1fr) minmax(150px,250px);grid-template-areas:"l c r";gap:clamp(10px,2.2vw,32px);min-height:0}
.c4-side{align-self:center;min-width:0}.c4-side.l{grid-area:l}.c4-side.r{grid-area:r}
.c4-center{grid-area:c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;min-width:0;overflow:hidden}
/* Spielerkarte: groß und ruhig auf breiten Bildschirmen */
.c4pc{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px 26px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:2px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);transition:border-color .4s,box-shadow .4s,transform .5s var(--ease);text-align:center}
.c4pc .av{--s:88px!important;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.c4pc-info{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%}
.c4pc .nm{font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c4pc .tagrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:22px}
.c4pc .col{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:800}
.c4pc .score{font:400 46px/1 'Lilita One'}.c4pc .score small{display:block;font:800 11px Nunito;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.c4pc .turnlbl{position:absolute;left:50%;top:-12px;transform:translateX(-50%);background:#ffcc00;color:#2a1d00;font-size:12px;font-weight:900;padding:2px 12px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .3s}
.c4pc.turn .turnlbl{opacity:1;animation:pop .35s var(--ease)}
.c4pc.turn{border-color:#ffe066;box-shadow:0 0 44px rgba(255,220,0,.28);transform:translateY(-4px)}
.c4pc.turn .av{animation:turnPulse 1.4s ease-in-out infinite}
@keyframes turnPulse{50%{box-shadow:0 0 0 6px rgba(255,224,102,.35),0 8px 20px rgba(0,0,0,.4)}}
.c4pc.won{border-color:#5be36c;box-shadow:0 0 44px rgba(80,230,120,.45)}
.c4pc .tbar{position:absolute;left:22px;right:22px;bottom:10px;height:5px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden;opacity:0;transition:opacity .3s}
.c4pc.turn .tbar{opacity:1}.c4pc .tbar i{display:block;height:100%;background:linear-gradient(90deg,#ff3b3b,#ffd21f 40%,#5be36c);transform-origin:left}
.c4-status{font:400 clamp(18px,2.6vh,24px) 'Lilita One';padding:7px 24px;border-radius:99px;background:rgba(0,0,0,.35);transition:all .3s;letter-spacing:.3px;text-align:center;max-width:100%}
.c4-status.me{background:linear-gradient(135deg,#ffd84d,#ffaa00);color:#2a1d00;box-shadow:0 0 30px rgba(255,200,0,.5);animation:c4Pop .5s var(--ease)}
@keyframes c4Pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}}
.c4-status.lose{background:linear-gradient(135deg,#ff3d57,#b3001b)}
/* schmale Bildschirme & Hochformat: Spielerkarten werden kompakte Zeilen über dem Brett */
@media (max-width:900px),(orientation:portrait){
  .c4-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"l r" "c c";gap:8px}
  .c4-side{align-self:stretch}
  .c4-title b{font-size:18px}
  .c4pc{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 12px 14px;border-radius:18px;text-align:left}
  .c4pc .av{--s:42px!important}
  .c4pc-info{align-items:flex-start;gap:2px;flex:1}.c4pc .nm{font-size:14px}
  .c4pc .tagrow{justify-content:flex-start;min-height:0}.c4pc .tagrow:empty{display:none}
  .c4pc .tagrow .chip{font-size:10px;padding:2px 7px}
  .c4pc .col{font-size:11px}
  .c4pc .score{font-size:28px}.c4pc .score small{font-size:9px}
  .c4pc .turnlbl{top:-9px;font-size:10px;padding:1px 9px}
  .c4pc .tbar{left:12px;right:12px;bottom:5px;height:4px}
  .c4pc.turn{transform:none}
}
@media (max-width:430px) and (orientation:portrait){
  .c4-bar{gap:6px}.c4-bar .icon-btn{width:38px;height:38px;border-radius:11px;font-size:16px}
  .c4-title{margin-left:2px}.c4-title b{font-size:17px}.c4-title span{display:none}
  .c4pc{gap:8px;padding:8px 10px 14px}.c4pc .av{--s:36px!important}
  .c4pc .score small{display:none}.c4pc .score{font-size:26px}
  .c4pc .tagrow{display:none}
}
/* flache Querformat-Geräte: drei Spalten, aber kompakt */
@media (orientation:landscape) and (max-height:520px) and (min-width:700px){
  .c4-main{grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(120px,170px);grid-template-rows:none;grid-template-areas:"l c r"}
  .c4pc{flex-direction:column;padding:10px 8px 16px;gap:4px;text-align:center}.c4pc .av{--s:46px!important}.c4pc-info{align-items:center}.c4pc .tagrow{justify-content:center}
  .c4pc .score{font-size:30px}.c4-status{display:none}.c4-title b{font-size:18px}.c4-bottom{min-height:0}.c4-center{gap:6px}
}
.c4-board-wrap{position:relative;padding-top:calc(var(--bw)/7);width:var(--bw);perspective:1200px;flex:none;margin-bottom:calc(var(--bw)*.07)}
.c4-hover{position:absolute;left:0;right:0;top:0;height:calc(var(--bw)/7);pointer-events:none}
.c4-hover .disc{position:absolute;top:8%;transform:translateX(-50%);--d:calc(var(--bw)/7*.78);opacity:.9;animation:hoverBob .9s ease-in-out infinite alternate}
@keyframes hoverBob{to{transform:translateX(-50%) translateY(-5px)}}
.c4-board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);padding:calc(var(--bw)*.018);border-radius:calc(var(--bw)*.04);background:linear-gradient(170deg,#4d86ff 0%,#2557e8 40%,#1840c0 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -8px 0 rgba(0,0,0,.25),0 calc(var(--bw)*.03) 0 #0f2a85,0 30px 60px rgba(0,0,0,.55);transform:rotateX(6deg);transform-origin:50% 100%}
.c4-board::after{content:"";position:absolute;left:-2%;right:-2%;bottom:calc(var(--bw)*-.05);height:calc(var(--bw)*.035);border-radius:0 0 12px 12px;background:linear-gradient(#173aa8,#0b2069);z-index:-1}
.c4-col{display:flex;flex-direction:column;cursor:pointer;border-radius:calc(var(--bw)*.03);transition:background .2s}
.c4-board.myturn .c4-col:hover{background:rgba(255,255,255,.12)}
.c4-cell{aspect-ratio:1;display:grid;place-items:center;position:relative}
.c4-cell::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#081133,#0b1a4d);box-shadow:inset 0 calc(var(--bw)*.012) calc(var(--bw)*.02) rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.25)}
.c4-cell .disc{--d:80%;position:relative;z-index:1}
.c4-cell .disc:not(.p0):not(.p1){visibility:hidden}
.c4-cell.win .disc{animation:winDisc .6s ease-in-out infinite alternate;z-index:3}
.c4-cell.last .disc{box-shadow:0 0 0 3px rgba(255,255,255,.85),inset 0 -4px 0 rgba(0,0,0,.25),0 0 18px rgba(255,255,255,.5)}
@keyframes winDisc{to{transform:scale(1.14);filter:brightness(1.4) drop-shadow(0 0 14px #fff)}}
.c4-line{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible}
.c4-line line{stroke:#fff;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawLine .7s .3s ease-out forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.c4-line line.glow{stroke:rgba(255,230,110,.45)}
.c4-bottom{display:flex;gap:10px;min-height:46px;align-items:center;position:relative;z-index:2}
.disc{width:var(--d,40px);height:var(--d,40px);border-radius:50%;flex:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 4px 8px rgba(255,255,255,.45),0 4px 8px rgba(0,0,0,.4);display:grid;place-items:center;font-size:calc(var(--d,40px)*.55);position:relative}
.disc::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(0,0,0,.12);box-shadow:inset 0 2px 3px rgba(0,0,0,.15)}
.disc.p0{background:radial-gradient(circle at 35% 28%,#ff9a9a,#e3242b 55%,#9d0d14)}
.disc.p1{background:radial-gradient(circle at 35% 28%,#fff6b8,#ffcc00 55%,#c48f00)}
.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::before{display:none}
.disc.disc_emoji.p0::after{content:"😈"}.disc.disc_emoji.p1::after{content:"😇"}

/* ================= 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}

/* ================= Mau-Mau ================= */
.g-mm .art{background:radial-gradient(circle at 70% 25%,#2fb36b,#0f6d3d 60%,#063a20)}
.g-mm .art .mmc{position:absolute;width:62px;height:90px;border-radius:9px;background:#fffdf5;top:22px;right:34px;box-shadow:0 10px 20px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 26px 'Lilita One';transition:transform .5s var(--ease)}
.g-mm .art .mmc b{font-weight:400;font-size:30px}
.g-mm .art .mmc.c1{transform:rotate(-26deg) translate(-44px,10px);color:#15161c}
.g-mm .art .mmc.c2{transform:rotate(-9deg) translate(-16px,0);color:#d6202a}
.g-mm .art .mmc.c3{transform:rotate(9deg) translate(12px,0);color:#d6202a}
.g-mm .art .mmc.c4{transform:rotate(26deg) translate(40px,10px);color:#15161c}
.g-mm:hover .mmc.c1{transform:rotate(-36px) translate(-60px,12px)}.g-mm:hover .mmc.c4{transform:rotate(36deg) translate(56px,12px)}
.card.mm{background:#f7f3e6;padding:0;border-radius:calc(var(--cw)*.09);font-family:Nunito,sans-serif}
.card.mm .mmf{position:absolute;inset:calc(var(--cw)*.04);border-radius:calc(var(--cw)*.06);background:linear-gradient(160deg,#fffef9,#f3ecd6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.card.mm .idx{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;gap:calc(var(--cw)*.01);z-index:2}
.card.mm .idx b{font:900 calc(var(--cw)*.2) Nunito}
.card.mm .idx .sv{width:calc(var(--cw)*.15);height:calc(var(--cw)*.15)}
.card.mm .idx.tl{left:calc(var(--cw)*.05);top:calc(var(--cw)*.04)}
.card.mm .idx.br{right:calc(var(--cw)*.05);bottom:calc(var(--cw)*.04);transform:rotate(180deg)}
.card.mm .mid{position:absolute;inset:13% 15%}
.card.mm .mid i{position:absolute;display:block;width:calc(var(--cw)*.23);height:calc(var(--cw)*.23);transform:translate(-50%,-50%)}
.card.mm .mid i .sv{width:100%;height:100%;display:block}
.card.mm .mid i.ace{left:50%;top:50%;width:calc(var(--cw)*.56);height:calc(var(--cw)*.56)}
.card.mm .facepanel{position:absolute;inset:4% 2%;border-radius:calc(var(--cw)*.06);border:calc(var(--cw)*.025) solid #c9a227;background:linear-gradient(160deg,#fff7d9,#efd88a);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;box-shadow:inset 0 0 calc(var(--cw)*.1) rgba(160,110,0,.35)}
.card.mm .facepanel b{font:400 calc(var(--cw)*.52) 'Lilita One';line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.card.mm .facepanel .sv.small{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
.card.mm .wish{position:absolute;left:50%;bottom:calc(var(--cw)*.03);transform:translateX(-50%);width:calc(var(--cw)*.2);height:calc(var(--cw)*.2);border-radius:50%;background:#fff;padding:calc(var(--cw)*.025);box-shadow:0 0 0 2px #e6b422,0 2px 6px rgba(0,0,0,.3);z-index:3}
.card.mm .wish .sv{width:100%;height:100%;display:block}
.card.mm.back{background:#f7f3e6}
.card.mm.back .mmf{background:#1d3f93;overflow:hidden}
.card.mm.back .lattice{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.2) 6px 8px),repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.2) 6px 8px)}
.card.mm.back .medal{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b0,#e0b030 55%,#9a6b00);display:grid;place-items:center;font:400 calc(var(--cw)*.3) 'Lilita One';color:#5b3b00;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mm-logo{font-size:calc(var(--pcw)*1.1)!important;letter-spacing:12px!important}
.suitbadge{position:absolute;right:calc(var(--pcw)*-.55);top:calc(var(--pcw)*-.15);width:calc(var(--pcw)*.55);height:calc(var(--pcw)*.55);border-radius:50%;background:#fffdf5;padding:calc(var(--pcw)*.1);box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.7);z-index:6}
.suitbadge .sv{width:100%;height:100%;display:block}
.suitbadge.bpop{animation:badgePop .6s var(--ease)}
@keyframes badgePop{0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:none}}
.suitgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(310px,78vmin);animation:wheelIn .5s var(--ease)}
.suitgrid button{aspect-ratio:1;border-radius:22px;border:4px solid #fff;background:#fffdf5;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 19px 'Lilita One';color:#222;transition:transform .2s var(--ease);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.suitgrid button:hover,.suitgrid button:active{transform:scale(1.08) rotate(-3deg)}
.suitgrid .sv{width:50%;height:50%}
.unobtn.mm-btn{background:radial-gradient(ellipse at 40% 28%,#7ad4ff,#1478d6 50%,#08408f)}
.unobtn.mm-btn b{color:#fff}
.rrow .mmminis{--cw:26px;--ch:39px}
.rrow .mmminis .card.mm .idx b{font-size:9px}

/* ================= Schiffe versenken ================= */
#play-bs{background:radial-gradient(ellipse 90% 70% at 50% 0%,#12689e 0%,#0a3a63 45%,#04162b 100%);overflow:hidden}
#play-bs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.035) 60px 62px);animation:seaDrift 18s linear infinite;pointer-events:none}
@keyframes seaDrift{to{background-position:240px 0}}
.bs-wrap{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(10px + var(--safe-t)) 12px calc(10px + var(--safe-b));gap:clamp(6px,1.2vh,12px);overflow:hidden;
  --bsz:min(94vw - 28px,calc(100dvh - 400px),560px)}
.bs-top{display:flex;align-items:center;gap:8px;width:100%;max-width:900px}
.bs-top .ibtn{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(0,20,40,.45);color:#fff;font-size:19px;cursor:pointer;position:relative}
.bs-top .ibtn .badge{position:absolute;top:-4px;right:-4px}
.bs-players{display:flex;align-items:center;gap:clamp(8px,2vw,20px)}
.bs-p{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:20px;background:rgba(0,20,40,.45);border:2px solid rgba(255,255,255,.1);transition:all .35s var(--ease);font-size:14px}
.bs-p.turn{border-color:#ffe066;box-shadow:0 0 28px rgba(255,220,0,.4);transform:scale(1.05)}
.bs-p .fleet{display:flex;gap:5px;margin-top:3px;min-height:9px}
.bs-p .pip{display:flex;gap:1px}.bs-p .pip i{width:6px;height:8px;background:#9bb2c8;border-radius:1px}
.bs-status{font:400 clamp(16px,2.4vh,22px) 'Lilita One';padding:6px 20px;border-radius:99px;background:rgba(0,20,40,.5);text-align:center;transition:all .3s}
.bs-status.me{background:linear-gradient(135deg,#ffd84d,#ffaa00);color:#2a1d00;box-shadow:0 0 30px rgba(255,200,0,.5);animation:statusPop .5s var(--ease)}
.bs-timer{width:min(420px,70vw);height:6px;border-radius:9px;background:rgba(0,0,0,.35);overflow:hidden;visibility:hidden;flex:none}
.bs-timer i{display:block;height:100%;background:linear-gradient(90deg,#ff3b3b,#ffd21f 40%,#5be36c);transform-origin:left}
.bs-boards{display:flex;gap:clamp(14px,3vw,34px);align-items:flex-start;justify-content:center;flex:none}
.bs-cap{font:400 15px 'Lilita One';text-align:center;margin:0 0 4px 22px;opacity:.85;letter-spacing:.4px}
.bs-wrap.placing .bs-col.foe{display:none}
.bs-wrap.battle .bs-col.own{--bsz:min(44vw,calc((100dvh - 330px)*.8),340px)}
@media (max-width:760px) and (orientation:portrait){
  .bs-wrap{--bsz:min(100vw - 52px,calc(100dvh - 380px),520px)}
  .bs-wrap.battle .bs-boards{flex-direction:column;align-items:center;gap:8px}
  .bs-wrap.battle .bs-col.own{--bsz:min(46vw,150px);align-self:flex-end;margin-top:-4px}
  .bs-wrap.battle .bs-col.foe{--bsz:min(100vw - 52px,calc(100dvh - 450px),460px)}
  .bs-wrap.battle .bs-col.own .bs-cap{display:none}
}
@media (orientation:landscape) and (max-height:520px){.bs-wrap{--bsz:min(44vw,calc(100dvh - 150px))}.bs-wrap.battle .bs-col.own{--bsz:min(36vw,calc(100dvh - 150px))}.bs-status{display:none}.bs-players{transform:scale(.85)}}
.bsb{position:relative;width:var(--bsz);aspect-ratio:1;margin:20px 0 0 22px;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.25);transition:box-shadow .4s,transform .4s var(--ease)}
.bsb.active{box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 3px #ffe066,0 0 36px rgba(255,220,0,.4)}
.bsb.foe.active .bc:not(.done){cursor:crosshair}
.sea{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#1a8ac8 0%,#0f5f9b 55%,#0a3f6f 100%)}
.sea::before,.sea::after{content:"";position:absolute;inset:-50%;background:radial-gradient(ellipse 30px 8px at 20px 20px,rgba(255,255,255,.18),transparent 70%);background-size:64px 34px;animation:wave 9s linear infinite}
.sea::after{background-size:90px 46px;opacity:.7;animation-duration:14s;animation-direction:reverse}
@keyframes wave{to{transform:translate(64px,34px)}}
.bgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);z-index:5;touch-action:manipulation}
.bc{border:1px solid rgba(255,255,255,.15);display:block;transition:background .15s}
.bc.aim{background:rgba(255,80,80,.32);box-shadow:inset 0 0 0 2px #ff7b7b}
.bc.pv{background:rgba(90,255,150,.4)}.bc.bad{background:rgba(255,70,70,.45)}
.axis{position:absolute;display:flex;font:800 10px Nunito;color:rgba(255,255,255,.7);pointer-events:none}
.axis.x{left:0;right:0;top:-16px}.axis.x b{flex:1;text-align:center}
.axis.y{top:0;bottom:0;left:-17px;flex-direction:column}.axis.y b{flex:1;display:grid;place-items:center}
.blay{position:absolute;inset:0;pointer-events:none}
.blay.ships{z-index:2}.blay.marks{z-index:3}
.ship{position:absolute}
.ship .hull{position:absolute;background:linear-gradient(180deg,#d3dbe5,#8794a6 55%,#5b687a);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.45)}
.ship.h .hull{left:2%;right:2%;top:14%;bottom:14%;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%);border-radius:6px 0 0 6px}
.ship.v .hull{top:2%;bottom:2%;left:14%;right:14%;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);border-radius:6px 6px 0 0}
.ship .bridge{position:absolute;background:#2f3a49;border-radius:3px;box-shadow:0 0 0 2px rgba(255,255,255,.4) inset}
.ship.h .bridge{left:38%;top:30%;width:22%;height:40%}.ship.v .bridge{top:38%;left:30%;height:22%;width:40%}
.ship .gun{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;background:#3b4656}
.ship.h .g1{left:14%;top:38%}.ship.h .g2{left:66%;top:38%}.ship.v .g1{top:14%;left:38%}.ship.v .g2{top:66%;left:38%}
.ship.len2 .g2{display:none}.ship.len2 .bridge{left:30%}
.ship.pop{animation:shipPop .45s var(--ease)}
@keyframes shipPop{from{transform:scale(1.35);opacity:0}}
.ship.sunk .hull{background:linear-gradient(180deg,#6b2f2f,#3a1515);filter:saturate(.8)}
.ship.reveal .hull{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.15));box-shadow:inset 0 0 0 2px rgba(255,120,120,.7)}
.bsb.foe .ship.sunk{animation:sinkIn .8s var(--ease)}
@keyframes sinkIn{from{opacity:0;transform:scale(1.3)}}
.mk{position:absolute;width:10%;height:10%;display:grid;place-items:center}
.mk.miss::after{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(255,255,255,.7)}
.mk.miss .ring{position:absolute;inset:10%;border-radius:50%;border:2px solid rgba(255,255,255,.9);animation:ripple 1.1s ease-out forwards}
.mk.still .ring{display:none}
@keyframes ripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
.mk.hit .fire{position:absolute;inset:8%;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 70%,#fff6a0 0,#ffb02e 35%,#ff4a1a 70%,transparent 72%);animation:flame .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #ff7a1a)}
@keyframes flame{from{transform:scale(.9) rotate(-4deg)}to{transform:scale(1.12) rotate(4deg)}}
.mk.hit .smoke{position:absolute;left:30%;top:0;width:40%;aspect-ratio:1;border-radius:50%;background:rgba(40,40,40,.5);animation:smoke 2s ease-out infinite;filter:blur(2px)}
@keyframes smoke{from{transform:translateY(20%) scale(.5);opacity:.7}to{transform:translateY(-120%) scale(1.5);opacity:0}}
.bs-fx{position:fixed;z-index:210;pointer-events:none;width:0;height:0}
.bs-fx i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%}
.bs-fx .r1,.bs-fx .r2{width:calc(var(--s)*2.4);height:calc(var(--s)*2.4);border:4px solid rgba(255,255,255,.9);animation:fxRing .9s ease-out forwards}
.bs-fx .r2{animation-delay:.18s;border-width:2px}
.bs-fx.hit .r1,.bs-fx.sunk .r1{border-color:#ffd27a}.bs-fx.sunk .r2{border-color:#ff5a3a}
.bs-fx .drop{width:calc(var(--s)*.5);height:calc(var(--s)*1.6);background:linear-gradient(#fff,rgba(255,255,255,.2));border-radius:50% 50% 40% 40%;animation:drop .8s ease-out forwards}
.bs-fx .flash2{width:calc(var(--s)*3);height:calc(var(--s)*3);background:radial-gradient(circle,#fff 0,rgba(255,220,120,.9) 30%,transparent 70%);animation:fxFlash .45s ease-out forwards}
.bs-fx .blast{width:calc(var(--s)*2.2);height:calc(var(--s)*2.2);background:radial-gradient(circle,#ffb02e,#ff4a1a 55%,transparent 70%);animation:fxBlast .7s ease-out forwards}
@keyframes fxRing{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@keyframes drop{0%{transform:translate(-50%,-30%) scaleY(.2);opacity:1}40%{transform:translate(-50%,-90%) scaleY(1)}100%{transform:translate(-50%,-30%) scaleY(.3);opacity:0}}
@keyframes fxFlash{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}
@keyframes fxBlast{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.ball{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a8f99,#1a1d24);box-shadow:0 8px 8px rgba(0,0,0,.35);z-index:208;pointer-events:none}
.bs-tray{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:560px}
.tship{border:2px solid rgba(255,255,255,.18);background:rgba(0,20,40,.5);border-radius:14px;padding:8px 10px;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .2s var(--ease);min-width:70px}
.tship .tl{display:flex;gap:2px}.tship .tl i{width:14px;height:14px;background:linear-gradient(#d3dbe5,#7a889b);border-radius:3px;display:block}
.tship small{font-size:10px;font-weight:800;opacity:.8}
.tship.on{border-color:#ffe066;box-shadow:0 0 20px rgba(255,220,0,.4);transform:translateY(-3px)}
.tship.done{opacity:.45}.tship.done.on{opacity:1}
.bs-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;min-height:44px}
.bs-actions .btn.on{outline:3px solid #ffe066}
.bs-wrap.battle .bs-actions,.bs-wrap.battle .bs-tray{display:none}
.bs-wrap .result{position:absolute}

.g-bs .art{background:radial-gradient(circle at 70% 25%,#2aa0e0,#0d5a93 60%,#052a4a)}
.g-bs .art .bsboard{position:absolute;right:22px;top:20px;display:grid;grid-template-columns:repeat(5,24px);gap:3px;padding:6px;background:rgba(255,255,255,.18);border-radius:10px;transform:rotate(4deg);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.g-bs .art .bsboard i{height:24px;border-radius:4px;background:rgba(255,255,255,.22)}
.g-bs .art .bsboard i.sh{background:linear-gradient(#d3dbe5,#7a889b)}
.g-bs .art .bsboard i.ht{background:radial-gradient(circle,#fff6a0,#ff6a1a);box-shadow:0 0 10px #ff7a1a}
.g-bs .art .bsboard i.ms{background:radial-gradient(circle,#fff 0 3px,rgba(255,255,255,.22) 4px)}

/* ================= Zeichnen & Raten ================= */
#play-dg{background:linear-gradient(160deg,#2b1c5c 0%,#14254f 55%,#0a1a38 100%);overflow:hidden}
#play-dg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,90,140,.18),transparent 38%),radial-gradient(circle at 85% 75%,rgba(70,200,255,.15),transparent 40%);pointer-events:none}
.dg-wrap{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(8px + var(--safe-t)) 10px calc(8px + var(--safe-b));gap:8px;overflow:hidden}
.dg-head{display:flex;align-items:center;gap:8px}
.dg-head .ibtn{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.14);background:rgba(10,15,40,.5);color:#fff;font-size:19px;cursor:pointer;flex:none}
.dg-mid{flex:1;min-width:0;text-align:center}
.dg-round{font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.6px;text-transform:uppercase}
.dg-sub{font-weight:800;font-size:14px;color:#ffd96a}
.dg-word{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.dg-word b{min-width:clamp(14px,3.6vw,28px);height:clamp(24px,5.4vw,36px);border-bottom:3px solid #fff;font:400 clamp(17px,4.6vw,28px) 'Lilita One';display:grid;place-items:end center;color:#fff;letter-spacing:1px}
.dg-word b.blank{border-bottom-color:rgba(255,255,255,.55)}
.dg-word i.sp{width:14px}
.dg-word.ok b{color:#5be36c;border-bottom-color:#5be36c}
.dg-clock{position:relative;width:46px;height:46px;flex:none}
.dg-clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.dg-clock circle{fill:rgba(0,0,0,.35);stroke:rgba(255,255,255,.18);stroke-width:4}
.dg-clock .fg{fill:none;stroke:#ffd21f;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .3s linear}
.dg-clock b{position:absolute;inset:0;display:grid;place-items:center;font:400 18px 'Lilita One'}
.dg-clock.low .fg{stroke:#ff4d5e}.dg-clock.low b{color:#ff8a95;animation:pulse .5s infinite}
.dg-body{flex:1;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr) 300px;gap:10px}
.dg-players{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.dp{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:14px;background:rgba(10,15,40,.5);border:2px solid transparent;transition:all .3s var(--ease)}
.dp.draw{border-color:#ffd21f;background:rgba(255,210,31,.12)}
.dp.ok{border-color:#5be36c;background:rgba(91,227,108,.12)}
.dpi{flex:1;min-width:0}.dpn{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dps{font:400 15px 'Lilita One';color:#ffe9a6}.dpm{font-size:17px}
.dg-center{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;align-items:center;justify-content:center}
.dg-cvwrap{position:relative;width:min(100%,calc((100dvh - 250px) * 4 / 3));aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.2)}
#dCv{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.dg-overlay{position:absolute;inset:0;display:none;place-items:center;background:rgba(14,16,40,.78);backdrop-filter:blur(5px);padding:14px;text-align:center}
.dg-overlay.on{display:grid;animation:fade .25s}
.dg-box{width:min(420px,100%);animation:modalIn .4s var(--ease)}
.dg-box h2{font:400 clamp(22px,4vw,32px) 'Lilita One';margin:0 0 10px}
.dg-choices{display:grid;gap:10px;margin:12px 0}
.dg-pencil{font-size:54px;animation:pencil 1s ease-in-out infinite alternate}
@keyframes pencil{from{transform:rotate(-14deg)}to{transform:rotate(14deg) translateY(-6px)}}
.dg-reveal{font:400 clamp(30px,7vw,48px) 'Lilita One';color:#ffd21f;margin:4px 0 12px;animation:pop .5s var(--ease)}
.dg-pt{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.07);margin:4px 0;font-weight:800}
.dg-pt span{display:flex;align-items:center;gap:8px}.dg-pt b{color:#5be36c}
.dg-overlay.over .dg-pt b{color:#ffe9a6}
.dg-tools{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}
.dg-colors{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.sw{width:clamp(20px,4.4vw,30px);aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.35);cursor:pointer;transition:transform .15s var(--ease);padding:0}
.sw.on{transform:scale(1.25);border-color:#fff;box-shadow:0 0 0 2px #ffd21f}
.dg-tool-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.sz,.tb{min-width:42px;height:42px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(10,15,40,.55);cursor:pointer;display:grid;place-items:center;color:#fff;font-size:18px}
.sz i{display:block;border-radius:50%;background:#fff}
.sz.on,.tb.on{border-color:#ffd21f;background:rgba(255,210,31,.2)}
.dg-chat{display:flex;flex-direction:column;min-height:0;background:rgba(10,15,40,.5);border-radius:16px;padding:10px;border:1px solid var(--line)}
.dg-chat .msgs{flex:1}
@media (max-width:1100px) and (min-width:901px){.dg-body{grid-template-columns:150px minmax(0,1fr) 230px}}
@media (max-width:900px){
  .dg-body{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);gap:6px}
  .dg-players{flex-direction:row;overflow-x:auto;overflow-y:hidden;order:2;padding-bottom:2px}
  .dp{flex:none;padding:5px 8px}.dp .dpn{max-width:70px}
  .dg-center{order:1}.dg-chat{order:3}
  .dg-cvwrap{width:min(100%,calc((100dvh - 330px) * 4 / 3))}
  .dg-head .ibtn{width:38px;height:38px}
}
@media (orientation:landscape) and (max-height:520px){
  .dg-body{grid-template-columns:130px minmax(0,1fr) 210px;grid-template-rows:none}
  .dg-players{flex-direction:column;overflow-y:auto;order:0}.dg-center,.dg-chat{order:0}
  .dg-cvwrap{width:min(100%,calc((100dvh - 150px) * 4 / 3))}
}
.g-dg .art{background:radial-gradient(circle at 70% 25%,#a95bff,#5b2bd6 60%,#2a1070)}
.g-dg .art .doodle{position:absolute;right:16px;top:14px;width:130px;transform:rotate(-6deg);background:rgba(255,255,255,.12);border-radius:14px;padding:6px}
.g-dg .art .pencil{position:absolute;right:20px;top:78px;font-size:40px;transform:rotate(-30deg);transition:transform .5s var(--ease)}
.g-dg:hover .pencil{transform:rotate(-10deg) translate(-10px,-6px)}
/* Freunde / Nachrichten */
.pm-h{font:400 14px 'Lilita One';color:var(--muted);margin:14px 6px 4px;letter-spacing:.5px;text-transform:uppercase}
.friend-add input{border-radius:99px;padding:10px 16px}
.pm-note{font-size:11px;color:var(--muted);text-align:center;padding-top:6px}
.empty.small{padding:14px;font-size:13px}

.disc.disc_pizza::before,.disc.disc_troll::before,.disc.disc_skull::before,.disc.disc_cats::before{display:none}
.disc.disc_pizza.p0::after{content:"🍕"}.disc.disc_pizza.p1::after{content:"🍔"}
.disc.disc_troll.p0::after{content:"🤡"}.disc.disc_troll.p1::after{content:"💩"}
.disc.disc_skull.p0::after{content:"💀"}.disc.disc_skull.p1::after{content:"👻"}
.disc.disc_cats.p0::after{content:"🐱"}.disc.disc_cats.p1::after{content:"🐶"}
.disc.disc_pizza::after,.disc.disc_troll::after,.disc.disc_skull::after,.disc.disc_cats::after{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--d,48px)*.8);line-height:1}
.disc.disc_planets.p0{background:radial-gradient(circle at 35% 30%,#9fe3ff,#2a7de1 45%,#1d8f4e 70%,#0a3a6b)}
.disc.disc_planets.p1{background:radial-gradient(circle at 35% 30%,#ffb08a,#d9532b 50%,#7a2410)}
.g2048.theme_matrix{--bg:#020a04;--board:#06240f;--cell:#0a3318;--txt:#9dffb4}
.g2048.theme_matrix .gtile{background:#0f5a2a;color:#caffd6;box-shadow:0 0 10px rgba(0,255,90,.25)}.g2048.theme_matrix .gtile.v4{background:#14803a}.g2048.theme_matrix .gtile.v8{background:#19a84b}.g2048.theme_matrix .gtile.v16{background:#24d060;color:#02210d}.g2048.theme_matrix .gtile.v32,.g2048.theme_matrix .gtile.v64{background:#5dff94;color:#02210d}.g2048.theme_matrix .gtile.v128,.g2048.theme_matrix .gtile.v256,.g2048.theme_matrix .gtile.v512,.g2048.theme_matrix .gtile.v1024,.g2048.theme_matrix .gtile.v2048,.g2048.theme_matrix .gtile.v4096{background:#d6ffe3;color:#02210d;box-shadow:0 0 30px #5dff94}
.g2048.theme_ocean{--bg:#e6f6ff;--board:#2a7ab8;--cell:#4d9bd3;--txt:#0b3a63}
.g2048.theme_ocean .gtile{background:#d4efff;color:#0b3a63}.g2048.theme_ocean .gtile.v4{background:#b3e0ff}.g2048.theme_ocean .gtile.v8{background:#6cc3ff}.g2048.theme_ocean .gtile.v16{background:#2fa8f5;color:#fff}.g2048.theme_ocean .gtile.v32{background:#1585d6;color:#fff}.g2048.theme_ocean .gtile.v64{background:#0b5fa6;color:#fff}.g2048.theme_ocean .gtile.v128,.g2048.theme_ocean .gtile.v256,.g2048.theme_ocean .gtile.v512{background:#17c3b2;color:#fff}.g2048.theme_ocean .gtile.v1024,.g2048.theme_ocean .gtile.v2048,.g2048.theme_ocean .gtile.v4096{background:#ffd166;color:#4a2f00;box-shadow:0 0 24px #ffd166}
.g2048.theme_sunset{--bg:#2a1065;--board:#5b2a86;--cell:#7b3b9f;--txt:#ffe3f3}
.g2048.theme_sunset .gtile{background:#ffd6ec;color:#6e1f55}.g2048.theme_sunset .gtile.v4{background:#ffb8dc}.g2048.theme_sunset .gtile.v8{background:#ff8fc4}.g2048.theme_sunset .gtile.v16{background:#ff6a9f;color:#fff}.g2048.theme_sunset .gtile.v32{background:#ff8a3d;color:#fff}.g2048.theme_sunset .gtile.v64{background:#ff5e00;color:#fff}.g2048.theme_sunset .gtile.v128,.g2048.theme_sunset .gtile.v256,.g2048.theme_sunset .gtile.v512{background:#ffc233;color:#4a2400}.g2048.theme_sunset .gtile.v1024,.g2048.theme_sunset .gtile.v2048,.g2048.theme_sunset .gtile.v4096{background:#fff3a0;color:#4a2400;box-shadow:0 0 34px #ffd23d}
.g2048.theme_retro{--bg:#9bbc0f;--board:#306230;--cell:#8bac0f;--txt:#0f380f}
.g2048.theme_retro .gtile{background:#9bbc0f;color:#0f380f;border-radius:2px;box-shadow:inset 0 0 0 3px #0f380f}.g2048.theme_retro .gtile.v8,.g2048.theme_retro .gtile.v16{background:#8bac0f}.g2048.theme_retro .gtile.v32,.g2048.theme_retro .gtile.v64{background:#306230;color:#9bbc0f}.g2048.theme_retro .gtile.v128,.g2048.theme_retro .gtile.v256,.g2048.theme_retro .gtile.v512,.g2048.theme_retro .gtile.v1024,.g2048.theme_retro .gtile.v2048,.g2048.theme_retro .gtile.v4096{background:#0f380f;color:#9bbc0f}
.t2048-prev.theme_matrix{background:#06240f}.t2048-prev.theme_matrix i{background:#14803a;color:#caffd6}.t2048-prev.theme_matrix i:nth-child(3){background:#24d060;color:#02210d}.t2048-prev.theme_matrix i:nth-child(4){background:#d6ffe3;color:#02210d}
.t2048-prev.theme_ocean{background:#2a7ab8}.t2048-prev.theme_ocean i{background:#d4efff;color:#0b3a63}.t2048-prev.theme_ocean i:nth-child(3){background:#1585d6;color:#fff}.t2048-prev.theme_ocean i:nth-child(4){background:#ffd166;color:#4a2f00}
.t2048-prev.theme_sunset{background:#5b2a86}.t2048-prev.theme_sunset i{background:#ffd6ec;color:#6e1f55}.t2048-prev.theme_sunset i:nth-child(3){background:#ff5e00;color:#fff}.t2048-prev.theme_sunset i:nth-child(4){background:#fff3a0;color:#4a2400}
.t2048-prev.theme_retro{background:#306230}.t2048-prev.theme_retro i{background:#9bbc0f;color:#0f380f}.t2048-prev.theme_retro i:nth-child(3){background:#306230;color:#9bbc0f;box-shadow:inset 0 0 0 2px #9bbc0f}.t2048-prev.theme_retro i:nth-child(4){background:#0f380f;color:#9bbc0f}