:root{
  --bg:#f5faff; --ink:#2b3a4a; --muted:#6b7c8d; --card:#ffffff; --line:#e3eef8;
  --brand:#4aa8ff; --brand-dark:#2f8ae6; --sun:#ffd166;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; color:var(--ink); line-height:1.5;
  background:linear-gradient(180deg,#e9f5ff 0,#fffaf0 55%,#fff0f5 100%) fixed; min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:var(--brand-dark)}
.top{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.5rem; padding:.8rem 1.5rem;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border-bottom:2px solid var(--line); position:sticky; top:0; z-index:10;
}
.logo{font-size:1.4rem; font-weight:800; text-decoration:none; color:var(--ink)}
nav{display:flex; gap:1rem; flex:1}
nav a{text-decoration:none; font-weight:700; color:var(--ink); padding:.3rem .8rem; border-radius:999px}
nav a:hover{background:#e6f3ff}
.namebox{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.namebox label{font-weight:700}
input{font:inherit; padding:.45rem .8rem; border:2px solid #cfe5f8; border-radius:12px; background:#fff; color:var(--ink); min-width:0}
input:focus{outline:3px solid #bfe0ff; border-color:var(--brand)}
button,.btn{
  font:inherit; font-weight:800; cursor:pointer; border:0; border-radius:12px; padding:.5rem 1.1rem;
  background:var(--brand); color:#fff; box-shadow:0 3px 0 var(--brand-dark); transition:transform .08s;
}
button:hover{filter:brightness(1.05)} button:active{transform:translateY(2px); box-shadow:0 1px 0 var(--brand-dark)}
#namemsg{font-size:.9rem; color:#2a9d5c; font-weight:700}
#namemsg.bad{color:#d6455d}
main{max-width:1100px; width:100%; margin:0 auto; padding:1.5rem 1rem 3rem; flex:1}
.hero{text-align:center; margin-bottom:1.5rem}
.hero h1{margin:.2rem 0; font-size:2.2rem}
.hero p{color:var(--muted); margin:.2rem 0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.1rem}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.gcard{
  display:block; text-decoration:none; color:var(--ink); background:var(--card); border-radius:22px; padding:0; overflow:hidden;
  border:3px solid var(--c,#8ec5ff); box-shadow:0 6px 16px rgba(60,110,160,.10);
  transition:transform .2s, box-shadow .2s; animation:pop-in .5s both; animation-delay:calc(var(--i,0) * 45ms);
}
a.gcard:hover{transform:translateY(-6px) rotate(-.6deg) scale(1.02); box-shadow:0 16px 30px rgba(60,110,160,.22)}
.gcard.static{padding:0 0 .9rem}
.gcard.static h3,.gcard.static p,.gcard.static ol{margin-left:1rem; margin-right:1rem}
.cardtext{display:block; padding:.5rem 1.1rem 1.1rem}
.banner{display:block; position:relative; aspect-ratio:2/1; overflow:hidden; background:var(--c,#8ec5ff)}
.banner.small{aspect-ratio:3/1}
.banner img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
a.gcard:hover .banner img{transform:scale(1.12) rotate(1.5deg)}
.gcard .icon{
  position:absolute; right:.6rem; bottom:.4rem; font-size:2.2rem; width:3.4rem; height:3.4rem; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .3s;
}
a.gcard:hover .icon{animation:wiggle .6s}
.playbtn{display:inline-block; margin-top:.6rem; font-weight:800; color:#fff; background:var(--c,#4aa8ff); background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)); border-radius:999px; padding:.25rem .9rem; transform:scale(.92); transition:transform .2s}
a.gcard:hover .playbtn{transform:scale(1.06)}
.medals{list-style:none; padding-left:0 !important}
.medals li:nth-child(1)::before{content:"🥇 "} .medals li:nth-child(2)::before{content:"🥈 "} .medals li:nth-child(3)::before{content:"🥉 "}
.gcard h2,.gcard h3{margin:.3rem 0 .2rem; font-size:1.2rem}
.gcard p{margin:0; color:var(--muted); font-size:.95rem}
.gcard ol{margin:.2rem 0 0; padding-left:1.3rem}
.muted{color:var(--muted)}
.error{background:#ffe9ec; color:#b3263f; padding:.8rem 1rem; border-radius:12px}
.table{border-collapse:collapse; width:100%; max-width:640px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(60,110,160,.08)}
.table th,.table td{padding:.55rem .9rem; text-align:left; border-bottom:1px solid var(--line)}
.table th{background:#eaf5ff}
.gamepage{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:1.5rem; align-items:start}
.gamepage h1{margin:.2rem 0}
.stage{
  position:relative; margin:.8rem 0; background:#fff; border-radius:20px; border:3px solid var(--c,#8ec5ff);
  box-shadow:0 8px 24px rgba(60,110,160,.12); overflow:hidden; width:100%; user-select:none; -webkit-user-select:none; outline:none;
}
.stage canvas{display:block; width:100%; height:auto; touch-action:none}
.hud{display:flex; justify-content:space-between; padding:.4rem .9rem; background:#f1f8ff; font-weight:800; border-bottom:2px solid var(--line)}
.overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.88); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; text-align:center; padding:1rem; z-index:5;
}
.overlay h2{margin:0; font-size:1.8rem}
.overlay p{margin:0; max-width:90%}
.overlay button{font-size:1.2rem; padding:.7rem 1.6rem}
.overlay .big{font-size:2.4rem; font-weight:800; color:var(--brand-dark)}
.record{color:#e08a00; font-weight:800}
.side{background:#fff; border:2px solid var(--line); border-radius:20px; padding:1rem 1.2rem; box-shadow:0 6px 16px rgba(60,110,160,.08)}
.side h2{margin:.1rem 0 .5rem; font-size:1.2rem}
.toplist{padding-left:1.4rem; margin:0 0 1rem}
.toplist li{padding:.15rem 0}
.controls{color:var(--muted); font-size:.95rem}
.pad{display:flex; justify-content:space-between; gap:1rem; margin:.5rem 0}
.pad[hidden]{display:none}
.pad .dp{display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(2,64px); gap:6px}
.pad button{font-size:1.5rem; padding:0; touch-action:none}
.pad .act{width:96px; height:96px; border-radius:50%; align-self:center; font-size:1.2rem; background:#ff9aa2; box-shadow:0 3px 0 #e07c85}
.foot{text-align:center; padding:1rem; color:var(--muted)}
/* DOM-Spiele */
.board{display:grid; gap:6px; padding:12px; margin:0 auto; touch-action:manipulation}
.cell{
  background:#eaf5ff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer;
  aspect-ratio:1; font-size:1.6rem; border:0; box-shadow:none; color:var(--ink); padding:0;
}
.cell:hover{background:#d8ecff}
.msgline{text-align:center; padding:.4rem; font-weight:800; min-height:2.2rem}
@media (max-width:820px){
  .gamepage{grid-template-columns:1fr}
  nav{order:3; flex-basis:100%}
}

/* ---------- Lebendiger Hintergrund ---------- */
.sky{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.sun{position:absolute; top:70px; right:6%; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,#fff6c2 0 45%,#ffe27a 46% 100%);
  box-shadow:0 0 0 14px rgba(255,226,122,.35),0 0 0 32px rgba(255,226,122,.2),0 0 60px 30px rgba(255,226,122,.35); animation:sunpulse 6s ease-in-out infinite}
.cloud{position:absolute; left:-220px; width:170px; height:52px; background:#fff; border-radius:60px; opacity:.85; animation:drift 70s linear infinite}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%}
.cloud::before{width:70px; height:70px; left:24px; top:-34px}
.cloud::after{width:90px; height:90px; left:70px; top:-48px}
.c1{top:12%; animation-duration:80s} .c2{top:32%; transform:scale(.7); animation-duration:105s; animation-delay:-40s}
.c3{top:58%; transform:scale(1.2); animation-duration:130s; animation-delay:-90s; opacity:.6} .c4{top:80%; transform:scale(.8); animation-duration:95s; animation-delay:-20s; opacity:.7}
.bub{position:absolute; bottom:-60px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff,var(--b,#bfe3ff) 70%); opacity:.55; animation:rise 18s linear infinite}
.b1{left:5%; width:26px; height:26px; --b:#bfe3ff} .b2{left:14%; width:44px; height:44px; --b:#ffd6e0; animation-duration:24s; animation-delay:-6s}
.b3{left:26%; width:20px; height:20px; --b:#d4f5d4; animation-duration:16s; animation-delay:-3s} .b4{left:38%; width:36px; height:36px; --b:#fff0b3; animation-duration:22s; animation-delay:-12s}
.b5{left:52%; width:24px; height:24px; --b:#e6d4ff; animation-duration:19s; animation-delay:-9s} .b6{left:63%; width:48px; height:48px; --b:#bfe3ff; animation-duration:27s; animation-delay:-15s}
.b7{left:74%; width:22px; height:22px; --b:#ffd6e0; animation-duration:17s; animation-delay:-1s} .b8{left:83%; width:38px; height:38px; --b:#d4f5d4; animation-duration:23s; animation-delay:-18s}
.b9{left:91%; width:28px; height:28px; --b:#fff0b3; animation-duration:20s; animation-delay:-7s} .b10{left:45%; width:16px; height:16px; --b:#e6d4ff; animation-duration:15s; animation-delay:-11s}
body.gamebody{background:linear-gradient(180deg,color-mix(in srgb,var(--gc,#8ec5ff) 35%,#fff) 0,#fffaf0 60%,#fff 100%) fixed}
main,.top,.foot{position:relative; z-index:1}
.top{z-index:10}
.rainbow{background:linear-gradient(90deg,#ff7a8a,#ffb347,#f5c400,#4cbf7a,#4aa8ff,#9b7dff); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:shine 6s linear infinite}
.hero{padding:.5rem 0 .3rem}
.hero-icons{font-size:2.4rem; display:flex; justify-content:center; gap:1.2rem}
.hero-icons span{display:inline-block; animation:hop 1.6s ease-in-out infinite}
.hero-icons span:nth-child(2){animation-delay:.2s} .hero-icons span:nth-child(3){animation-delay:.4s} .hero-icons span:nth-child(4){animation-delay:.6s} .hero-icons span:nth-child(5){animation-delay:.8s}
.big-btn{font-size:1.2rem; padding:.7rem 1.6rem; border-radius:999px; background:linear-gradient(135deg,#ff9aa2,#ffb347); box-shadow:0 4px 0 #e0805f; animation:pulse 2.4s ease-in-out infinite}
.recent{margin:0 0 1.4rem; text-align:center}
.recent h2{font-size:1.1rem; margin:.2rem 0 .5rem}
.ticker{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem}
.chip{background:rgba(255,255,255,.9); border:2px solid var(--line); border-radius:999px; padding:.2rem .8rem; font-weight:700; font-size:.92rem; text-decoration:none; color:var(--ink); animation:pop-in .5s both}
.chip:hover{background:#fff7d6}
.gamehead{position:relative}
.gamehead img{display:block; width:100%; height:200px; object-fit:cover; object-position:50% 68%; border-radius:22px; border:3px solid var(--c,#8ec5ff); box-shadow:0 8px 20px rgba(60,110,160,.14)}
.gametitle{padding:.5rem .3rem 0}
.gametitle h1{margin:0; font-size:1.7rem} .gametitle p{margin:0; color:var(--muted)}
.bounce{display:inline-block; animation:hop 1.8s ease-in-out infinite}
.stage{box-shadow:0 8px 24px rgba(60,110,160,.12),0 0 0 6px color-mix(in srgb,var(--c,#8ec5ff) 25%,transparent)}
.hud span:first-child.pop{animation:scorepop .3s}
.side{background:rgba(255,255,255,.92)}
.table tr:nth-child(2) td{background:#fff9db} .table tr:nth-child(3) td{background:#f4f6f8} .table tr:nth-child(4) td{background:#fff1e6}
.foot{color:#5c6f82}
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:100}
@keyframes drift{from{translate:0 0} to{translate:calc(100vw + 500px) 0}}
@keyframes rise{from{translate:0 0; opacity:0} 10%{opacity:.55} to{translate:40px -115vh; opacity:0}}
@keyframes sunpulse{50%{transform:scale(1.08)}}
@keyframes shine{to{background-position:200% 0}}
@keyframes hop{0%,100%{transform:translateY(0)} 40%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes wiggle{25%{transform:rotate(-14deg) scale(1.15)} 75%{transform:rotate(14deg) scale(1.15)}}
@keyframes pop-in{from{opacity:0; transform:translateY(16px) scale(.94)} to{opacity:1; transform:none}}
@keyframes slowzoom{to{transform:scale(1.12)}}
@keyframes scorepop{50%{transform:scale(1.35); color:#e08a00}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

button.secondary{background:#fff; color:var(--brand-dark); box-shadow:0 3px 0 #cfe5f8; border:2px solid #cfe5f8}
button[hidden],input[hidden]{display:none}
.notice{background:#fff3c4; color:#6b5200; text-align:center; padding:.5rem 1rem; font-weight:700; border-bottom:2px solid #ffe08a; position:relative; z-index:2}

.loginpage{max-width:520px; margin:0 auto}
.loginpage .panel,.panel{background:rgba(255,255,255,.95); border:2px solid var(--line); border-radius:18px; padding:1rem 1.3rem; margin:0 0 1.2rem; box-shadow:0 6px 16px rgba(60,110,160,.08)}
.loginpage .field{display:flex; flex-direction:column; gap:.2rem; margin-bottom:.9rem}
.loginpage .field label{font-weight:700}
.loginpage .field input{width:100%}
.loginpage .big-btn{width:100%; animation:none}
.loginmsg{min-height:1.4rem; font-weight:700; margin:.6rem 0 0; color:#2a9d5c}
.loginmsg.bad{color:#d6455d}
.okbox{background:#e1f7e8; color:#1d7a43; border-radius:12px; padding:.7rem 1rem; font-weight:700}
.notice.inpage{max-width:520px; margin:0 auto 1rem; border-radius:12px; border:2px solid #ffe08a}

.tabs{display:flex; gap:.4rem; margin:0 0 1rem; border-bottom:2px solid var(--line)}
.tab{background:transparent; color:var(--ink); box-shadow:none; border-radius:12px 12px 0 0; padding:.5rem 1rem; border:2px solid transparent; border-bottom:0}
.tab.active{background:#e6f3ff; color:var(--brand-dark); border-color:var(--line)}
.tab:hover{filter:none; background:#f1f8ff}
.hint{color:var(--muted); font-size:.88rem}
.hint.bad{color:#d6455d; font-weight:700}
.hint.good{color:#2a9d5c; font-weight:700}
form[hidden]{display:none}

/* ---------- Spielgröße S / M / L / XL ---------- */
.stagewrap{margin:.8rem 0}
.stagewrap .stage{margin:0}
.gamebar{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.4rem 1rem}
.sizebar{display:flex; align-items:center; gap:0; margin-top:.5rem; background:rgba(255,255,255,.9); border:2px solid var(--line); border-radius:999px; padding:.15rem; box-shadow:0 3px 8px rgba(60,110,160,.08)}
.sizelabel{font-weight:800; font-size:.85rem; color:var(--muted); padding:0 .6rem 0 .7rem}
.sizebar button{background:transparent; color:var(--ink); box-shadow:none; border-radius:999px; padding:.25rem .8rem; min-width:2.6rem; font-weight:800}
.sizebar button:hover{background:#eef6ff; filter:none}
.sizebar button.active{background:var(--c,#4aa8ff); background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)); color:#fff}
body.gamebody.sz-l main{max-width:1300px}
body.gamebody.sz-xl main{max-width:1700px}
body.gamebody.sz-xl .gamepage{grid-template-columns:1fr}
@media (max-width:820px){ .sizelabel{display:none} }
.stagewrap{scroll-margin-top:78px}
body.gamebody.sz-l .gamehead img{height:130px}
body.gamebody.sz-xl .gamehead img{height:90px}
body.gamebody.sz-xl .stagewrap{margin-left:auto; margin-right:auto}

/* ---------- Handy: nichts darf seitlich überlaufen ---------- */
nav{flex-wrap:wrap; gap:.2rem .6rem}
@media (max-width:600px){
  nav a{padding:.25rem .6rem; font-size:.95rem}
  .table th,.table td{padding:.4rem .45rem; font-size:.9rem}
  .table td{overflow-wrap:anywhere}
  .hero h1{font-size:1.7rem}
}

/* ---------- Multiplayer ---------- */
.gametools{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:.5rem}
.gametools .sizebar{margin-top:0}
.mpbar{display:flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.9); border:2px solid var(--line); border-radius:999px; padding:.15rem .3rem .15rem .15rem; box-shadow:0 3px 8px rgba(60,110,160,.08)}
.mp-btn{background:linear-gradient(135deg,#9b7dff,#4aa8ff); box-shadow:0 3px 0 #6a58c9; border-radius:999px; padding:.3rem .9rem}
.mpbar select{border:0; background:transparent; font-weight:700; padding:.2rem .3rem; color:var(--ink)}
.mp-panel{background:rgba(255,255,255,.96); border:3px solid #cbbdff; border-radius:20px; padding:.9rem 1.2rem; margin:.8rem 0; box-shadow:0 8px 24px rgba(110,90,200,.15)}
.mp-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.mp-head h2{margin:.1rem 0; font-size:1.3rem}
.mp-code{background:#f1ecff; border-radius:12px; padding:.2rem .8rem; font-size:1.3rem; letter-spacing:.15em; color:#5b45c4}
.mp-codelabel{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-right:.5rem}
.mp-msg{margin:.5rem 0; color:var(--ink)} .mp-msg.bad{color:#d6455d; font-weight:700} .mp-msg.ok{color:#1d7a43; font-weight:700}
.mp-hint{color:var(--muted); font-size:.92rem; margin:.4rem 0}
.mp-link{width:100%; font-size:.9rem; margin:.2rem 0 .5rem}
.mp-name{display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0}
.mp-players{list-style:none; margin:.6rem 0; padding:0; display:grid; gap:.4rem}
.mp-player{display:flex; justify-content:space-between; align-items:center; gap:.8rem; background:#f6f9ff; border:2px solid var(--line); border-radius:14px; padding:.45rem .9rem}
.mp-player.me{background:#f1ecff; border-color:#cbbdff}
.mp-pname{font-weight:800} .mp-medal{display:inline-block; min-width:1.8rem}
.mp-pscore{display:flex; align-items:center; gap:.6rem; color:var(--muted); flex-wrap:wrap; justify-content:flex-end}
.mp-pscore strong{font-size:1.2rem; color:var(--ink)}
.mp-tag{font-size:.85rem}
.mp-diff{font-weight:800; font-size:.9rem; border-radius:999px; padding:.05rem .6rem; background:#eef2f6}
.mp-diff.up{background:#ffe1e5; color:#c0344d} .mp-diff.down{background:#dff6e6; color:#1d7a43}
.mp-count{font-size:3.4rem; font-weight:800; text-align:center; color:#6a58c9; animation:pulse 1s ease-in-out infinite; margin:.2rem 0}
.mp-result{font-size:1.5rem; font-weight:800; text-align:center; margin:.6rem 0; color:#6a58c9}
.mp-btns{display:flex; flex-wrap:wrap; gap:.6rem; margin:.7rem 0 .2rem}
.mp-rooms{margin:0 0 1.4rem; background:rgba(255,255,255,.92); border:3px solid #cbbdff; border-radius:20px; padding:.8rem 1.2rem}
.mp-rooms h2{margin:.1rem 0 .2rem; font-size:1.2rem}
.mp-roomlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.6rem; margin-top:.5rem}
.mp-room{display:flex; flex-direction:column; gap:.1rem; text-decoration:none; color:var(--ink); background:#f6f2ff; border:2px solid #d8ccff; border-radius:14px; padding:.55rem .9rem; transition:transform .15s}
.mp-room:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(110,90,200,.2)}
.mp-room-title{font-weight:800} .mp-room-host{color:var(--muted); font-size:.9rem} .mp-room-join{font-weight:800; color:#6a58c9}
body.mp-on #againbtn{display:none}
.mp-rooms[hidden]{display:none}
/* Menü: Links nicht umbrechen; wird es eng, rutscht lieber das Namensfeld in die nächste Zeile */
nav{flex:1 1 auto}
nav a{white-space:nowrap}
.mp-round{font-size:.8rem; letter-spacing:.04em; color:var(--muted); margin-right:.7rem; font-weight:800}
.mp-wins{font-size:.9rem; color:#c98a00; font-weight:800}