/* Spiel-Layout: Brett als Rundkurs um ein Riesenrad; oben Spielerkarten, unten die Aktionsleiste (Desktop: rechts daneben).
   Farben, Knöpfe und Schriften kommen aus theme.css. */
html,body{height:100%}
body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}

#app{height:100%;max-width:1200px;margin:0 auto;display:grid;gap:10px;padding-block:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-bottom,0px) + 8px);
  grid-template-areas:"top" "hud" "board" "panel";grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.topbar{grid-area:top;display:flex;align-items:center;gap:8px}
.topbar .logo{margin-right:auto}

#hud{grid-area:hud;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pc{--pc:var(--lantern);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 8px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 16%,transparent),transparent 70%),var(--glass-2);
  border:1px solid var(--stroke);border-radius:var(--r-md);padding:6px 10px 6px 7px;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.pc::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pc)}
.pc.active{border-color:color-mix(in srgb,var(--pc) 70%,white 10%);transform:translateY(-1px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 50%,transparent),0 10px 26px -10px var(--pc)}
.pc-av{grid-row:1/3;display:flex;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.pc-name{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:baseline}
.pc-name small{color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.04em}
.pc-stats{display:flex;gap:12px;font-weight:900;font-size:14px;font-variant-numeric:tabular-nums}
.pc-stats span{display:inline-flex;align-items:center;gap:4px}
.ico{width:15px;height:15px;flex:none}

.board-wrap{grid-area:board;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#board{display:block;border-radius:28px;touch-action:none;box-shadow:0 0 0 1px var(--stroke),0 30px 80px -30px rgba(0,0,0,.8),0 0 120px -40px rgba(178,139,255,.45)}

#panel{grid-area:panel;border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-height:122px;justify-content:center}
#pmsg{font-size:15px;line-height:1.45;min-height:2.9em}
#pmsg b{color:var(--lantern);font-weight:900}
#pbtns{display:flex;gap:8px;flex-wrap:wrap}
#pbtns:empty{display:none}
.turn{display:flex;align-items:center;gap:14px}

.die{width:62px;height:62px;flex:none;background:linear-gradient(160deg,#fffaf0,#f2e4c4);border-radius:16px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px;
  box-shadow:0 4px 0 #cdbf9e,0 12px 24px -8px rgba(0,0,0,.6),inset 0 1px 0 #fff}
.die i{display:block;width:11px;height:11px;border-radius:50%;place-self:center;background:transparent}
.die i.on{background:var(--night);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.die.landed{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}

/* Overlays */
.screen{position:fixed;inset:0;z-index:20;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 20px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px))}
.card{width:100%;max-width:540px;padding:24px 20px;display:flex;flex-direction:column;gap:18px;margin:auto 0;animation:rise .35s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.seg{display:flex;background:rgba(10,8,34,.5);border:1px solid var(--stroke);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 6px;font-weight:900;color:var(--muted);transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--lantern-2),var(--lantern));color:var(--night);box-shadow:0 4px 14px -6px rgba(255,201,74,.7)}
.slots{display:flex;flex-direction:column;gap:8px}
.slot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;background:rgba(10,8,34,.45);border:1px solid var(--stroke);border-radius:var(--r-md);padding:6px 10px}
.slot input{width:100%;min-width:0;background:transparent;border:0;border-bottom:2px solid var(--line);color:var(--ink);font:inherit;font-weight:900;font-size:16px;padding:6px 2px;user-select:text;-webkit-user-select:text}
.slot input:focus{outline:none;border-color:var(--lantern)}
.slot-acc{display:flex;flex-direction:column;min-width:0;line-height:1.2;padding:4px 2px}
.slot-acc b{font-weight:900;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-acc small{font-size:11px;font-weight:800;color:var(--teal);letter-spacing:.04em}
.slot-btns{display:flex;gap:6px;align-items:center}
.lnk{border:1.5px solid rgba(60,208,180,.45);background:rgba(60,208,180,.1);color:var(--teal);border-radius:999px;padding:6px 11px;font-weight:900;font-size:13px}
.lnk[data-act="unlink"]{padding:4px 10px;font-size:16px;line-height:1}
.slot-login{display:flex;flex-direction:column;gap:8px;background:rgba(60,208,180,.06);border:1px solid rgba(60,208,180,.3);border-radius:var(--r-md);padding:10px;margin-top:-2px}
.slot-login .inp{padding:10px 12px;user-select:text;-webkit-user-select:text}
.slot-login .btn{font-size:16px;padding:11px 14px 9px}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.slot-err{margin:0;color:#ffb3aa;font-size:13px;font-weight:800}
.who{border:1.5px solid var(--stroke);background:transparent;border-radius:999px;padding:6px 12px;font-weight:900;font-size:13px;min-width:84px;transition:background .15s}
.who[data-cpu="0"]{background:var(--teal);border-color:var(--teal);color:var(--night)}
.rules{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;margin:0;font-size:14px;line-height:1.35;color:var(--muted)}
.rules dt{display:flex;align-items:center}
.rules dd{margin:0}
.sw{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:0 0 10px -1px currentColor}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acct{display:flex;align-items:center;gap:10px;background:rgba(60,208,180,.08);border:1px solid rgba(60,208,180,.28);border-radius:var(--r-md);padding:10px 12px;font-size:14px;line-height:1.35}
.acct svg{flex:none}
.acct b{color:var(--teal)}
.acct a{margin-left:auto;flex:none}
.acct .acct-btns{margin-left:auto;flex:none;display:flex;gap:6px}
.acct .acct-btns a{margin-left:0}
@media (max-width:400px){ .acct .acct-btns{flex-direction:column} }

/* Minispiele */
.mg-title{font-family:var(--f-display);font-size:30px;color:var(--lantern);margin:0;line-height:1;text-shadow:0 3px 0 #0b0926}
.mg-kicker{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
#mgArea{display:flex;flex-direction:column;gap:14px}
.mg-btns{display:flex;gap:8px}
.mg-rule{margin:0;line-height:1.5;font-size:16px}
.mg-hint{margin:0;color:var(--muted);line-height:1.4}
.mg-big{font-family:var(--f-display);font-size:34px;text-align:center;font-variant-numeric:tabular-nums;min-height:1.1em}
.mg-pad{width:100%;min-height:190px;border:1px solid var(--stroke);border-radius:var(--r-lg);font-family:var(--f-display);font-size:28px;background:rgba(10,8,34,.55);color:var(--ink);padding:16px;touch-action:manipulation;transition:background .1s}
.mg-pad.go{background:var(--lantern);color:var(--night);box-shadow:0 0 50px -10px var(--lantern)}
.mg-pad.bad{background:var(--coral);color:var(--night)}
.mg-pad.tap{background:var(--teal);color:var(--night)}
.mg-pad:disabled{opacity:.7}
.pass{display:flex;align-items:center;gap:14px;font-size:18px;line-height:1.3}
.simon{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,320px);margin:0 auto}
.sp{aspect-ratio:1;max-width:100%;border:0;border-radius:22px;opacity:.35;transition:opacity .08s,transform .08s}
.sp.lit{opacity:1;transform:scale(1.04);box-shadow:0 0 28px currentColor}
.sp.s0{background:var(--coral);color:var(--coral)} .sp.s1{background:var(--teal);color:var(--teal)}
.sp.s2{background:var(--lantern);color:var(--lantern)} .sp.s3{background:var(--lilac);color:var(--lilac)}
.field{position:relative;height:300px;background:rgba(10,8,34,.55);border:1px solid var(--stroke);border-radius:var(--r-lg);overflow:hidden}
.fstar{position:absolute;width:56px;height:56px;border:0;background:transparent;padding:4px;animation:twinkle 1.1s ease-out forwards}
.fstar svg{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(255,214,102,.8))}
@keyframes twinkle{0%{transform:scale(.3)}20%{transform:scale(1.1)}80%{opacity:1}100%{transform:scale(.8);opacity:0}}
.res{display:flex;flex-direction:column;gap:6px}
.res-row{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto auto;align-items:center;gap:10px;background:rgba(10,8,34,.45);border:1px solid var(--stroke);border-radius:var(--r-sm);padding:6px 12px;font-weight:900;font-variant-numeric:tabular-nums}
.res-row .pl{font-family:var(--f-display);font-size:20px;color:var(--muted)}
.res-row.first{border-color:rgba(255,201,74,.5);background:linear-gradient(90deg,rgba(255,201,74,.14),rgba(10,8,34,.45) 70%)}
.res-row.first .pl{color:var(--lantern)}
.res-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-row .sc{color:var(--muted);font-size:14px}
.res-row .pz{color:var(--lantern);min-width:40px;text-align:right}
.saved{font-size:13px;color:var(--teal);text-align:center;margin:0}

@media (min-width:900px) and (min-aspect-ratio:1/1){
  #app{grid-template-areas:"top top" "board hud" "board panel";grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto minmax(0,1fr);gap:16px;padding-block:16px}
  #hud{grid-template-columns:1fr;align-self:start}
  .pc{padding:9px 12px 9px 10px}
  #panel{align-self:start;min-height:170px}
  .logo{font-size:28px}
}
@media (max-width:480px){ #roundChip,#kontoBtn{display:none} .logo{font-size:20px} }
/* Schmale Handys: Logo und Knöpfe oben kleiner, damit „Menü“ ganz zu sehen ist. */
@media (max-width:400px){ .topbar{gap:6px} .topbar .logo{font-size:16px;min-width:0} .topbar .logo svg{width:22px;height:22px} .topbar .tbtn{padding:6px 10px} }
@media (max-width:360px){ .pc-stats{gap:6px;font-size:13px} .logo{font-size:19px} }
@media (prefers-reduced-motion:reduce){ .die.landed,.fstar,.card{animation:none} .pc{transition:none} }

/* Endstand: Saisonpunkte, Münzen und Abzeichen der Konten (js/kosmetik.js) */
.earnings{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:6px;color:var(--ink);font-weight:800}
.earnings .earn b{color:var(--lantern)}
.earnings .tbtn{margin-top:4px}

/* Neue Spielinhalte: Bretter, Items, Duelle, Team- und neue Minispiele */
.board-blurb{margin:6px 2px 0;font-size:13px;color:var(--muted);line-height:1.35}
.dice{display:flex;gap:8px;flex:none}
.pc-items{display:inline-flex;gap:2px}
.itm{flex:none;vertical-align:-3px}
.lantern{position:absolute;width:34px;height:44px;border-radius:45% 45% 40% 40%;background:radial-gradient(circle at 50% 40%,#fff4dc,var(--lantern) 45%,#c9921b);box-shadow:0 0 26px 4px rgba(255,201,74,.6);animation:twinkle .52s ease-out forwards}
.stepper{display:flex;gap:12px;justify-content:center}
.stepper .btn{min-width:84px;font-size:28px}
.memo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,360px);margin:0 auto}
.card-m{aspect-ratio:1;border:1px solid var(--stroke);border-radius:14px;background:linear-gradient(160deg,#3a2f9a,#211b5e);display:grid;place-items:center;padding:0}
.card-m span{opacity:0;transition:opacity .12s}
.card-m.up{background:rgba(255,244,220,.12)} .card-m.up span{opacity:1}
.card-m.ok{border-color:var(--teal);box-shadow:0 0 16px -4px var(--teal)}
.meter{position:relative;height:46px;border-radius:999px;background:rgba(10,8,34,.55);border:1px solid var(--stroke);overflow:hidden}
.meter .zone{position:absolute;left:42%;width:16%;top:0;bottom:0;background:rgba(60,208,180,.35)}
.meter .ptr{position:absolute;top:4px;bottom:4px;width:6px;margin-left:-3px;left:50%;border-radius:3px;background:var(--lantern);box-shadow:0 0 12px var(--lantern)}
.rain{touch-action:none}
.rain .me{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:flex;transition:filter .1s}
.rain .me.hit{filter:brightness(2) drop-shadow(0 0 10px var(--coral))}
.rock{position:absolute;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff4dc,#ff8a3d 55%,#b53d33);box-shadow:0 -14px 14px -6px rgba(255,138,61,.7)}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duel .mg-pad{min-height:220px;font-size:20px;border-color:color-mix(in srgb,var(--pc) 60%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.rope{position:relative;height:14px;border-radius:7px;background:repeating-linear-gradient(90deg,#c9921b 0 8px,#ffc94a 8px 16px)}
.rope .knot{position:absolute;left:50%;top:-9px;width:16px;height:32px;margin-left:-8px;border-radius:6px;background:var(--coral);box-shadow:0 0 14px var(--coral)}
.team{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px dashed var(--stroke);border-radius:var(--r-md)}
.team.first{border-color:rgba(255,201,74,.55)}
.team-sum{font-size:13px;font-weight:900;color:var(--muted);text-align:right;padding-right:6px}
@media (prefers-reduced-motion:reduce){ .lantern{animation:none} }