:root{
  --night:#040b12;--deep:#071725;--panel:#0b2233cc;--panel2:#0f2c40;--line:#1b4258;
  --teal:#2ee6d6;--teal2:#14b8ab;--orange:#ff8a3d;--gold:#ffd34d;--red:#ff3d5a;--green:#4dff9a;
  --text:#eaf7f8;--muted:#86a9b2;
  --r:16px;
  --font:'Nunito',system-ui,-apple-system,"Segoe UI",sans-serif;--display:'Bungee',var(--font);
  --hull:#3a1f17;--hull2:#5a2e1e;--cabin:#d9e7ea;--trim:#ff8a3d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--night);color:var(--text);font-family:var(--font);overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% -10%,#13365088,transparent 60%),linear-gradient(#040b12f0,#040b12f8),url(../concept/01_keyart.jpg) center/cover fixed}
button{font:inherit;cursor:pointer;border:0;color:inherit}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:10px 14px 14px;gap:9px}

/* Topbar */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo{font-family:var(--display);font-size:20px;letter-spacing:1px;color:var(--teal);text-shadow:0 0 14px #2ee6d6aa,0 2px 0 #0a5a55}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:800}
.iconbtn{background:var(--panel);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;font-size:16px}

/* Gegner */
.opps{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.opp{position:relative;flex:1 1 0;min-width:62px;max-width:110px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 4px 5px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.opp .av{font-size:24px;line-height:1.1;display:block;transition:transform .2s}
.opp .nm{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp .ti{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp .ct{font-size:13px;font-weight:900;margin-top:2px}
.opp .tok{position:absolute;top:4px;right:5px;font-size:11px}
.opp.turn{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 16px #ff8a3d66;transform:translateY(-2px)}
.opp.judge{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 16px #ff3d5a66}
.opp.judge .av{animation:think 1s infinite}
@keyframes think{50%{transform:rotate(-8deg) scale(1.08)}}
.used{opacity:.25;filter:grayscale(1)}

/* Hafen-Bühne */
.stage{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:250px;flex:1;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0a1e33 0%,#0f2f4a 45%,#0d3a52 62%,#082636 100%)}
.stage.storm{background:linear-gradient(180deg,#060d17 0%,#121f2e 50%,#13293a 62%,#071a26 100%)}
.stage.storm .flashsky{animation:lightning 5s infinite}
@keyframes lightning{0%,92%,96%,100%{opacity:0}93%,95%{opacity:.5}}
.flashsky{position:absolute;inset:0;background:#cfe8ff;opacity:0;pointer-events:none}
.moon{position:absolute;top:34px;right:64px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d8,#ffd98a 60%,#e0a64a);box-shadow:0 0 30px #ffd98a88}
.stars{position:absolute;inset:0 0 45% 0;background-image:radial-gradient(1px 1px at 12% 20%,#fff9,transparent),radial-gradient(1px 1px at 30% 40%,#fff6,transparent),radial-gradient(1.5px 1.5px at 55% 15%,#fffa,transparent),radial-gradient(1px 1px at 70% 35%,#fff7,transparent),radial-gradient(1px 1px at 85% 55%,#fff5,transparent),radial-gradient(1px 1px at 42% 8%,#fff8,transparent);animation:twinkle 4s infinite alternate}
@keyframes twinkle{to{opacity:.5}}
.skyline{position:absolute;left:0;right:0;bottom:36%;height:42px;opacity:.55;background:
  linear-gradient(#061420,#061420) 4% 100%/9% 70% no-repeat,linear-gradient(#061420,#061420) 15% 100%/6% 100% no-repeat,
  linear-gradient(#061420,#061420) 24% 100%/12% 55% no-repeat,linear-gradient(#061420,#061420) 80% 100%/10% 85% no-repeat,
  linear-gradient(#061420,#061420) 92% 100%/7% 60% no-repeat}
.crane{position:absolute;left:10%;bottom:36%;width:46px;height:70px;opacity:.5;border-right:3px solid #061420;border-top:3px solid #061420}

.hud{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px 0;gap:6px}
.event{font-size:11px;font-weight:800;background:#00000055;border:1px solid #ffffff22;border-radius:20px;padding:4px 10px;backdrop-filter:blur(4px)}
.shipno{font-family:var(--display);font-size:12px;color:var(--gold)}

.harbor{position:relative;flex:1;min-height:140px}
.shipwrap{position:absolute;left:50%;bottom:4px;width:230px;margin-left:-115px;z-index:2;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px) rotate(-1deg)}}
.shipwrap.thunk .ship{animation:thunk .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes thunk{30%{transform:translateY(7px) scaleY(.97)}}
.shipwrap.sail{animation:sail 1.9s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes sail{to{transform:translateX(140vw) rotate(-2deg)}}
.shipwrap.arrive{animation:arrive 1.1s cubic-bezier(.2,.9,.3,1) both,bob 3.2s 1.1s ease-in-out infinite}
@keyframes arrive{from{transform:translateX(-140vw)}}
.ship{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px #0008)}
.deck{position:absolute;left:22%;right:35%;bottom:43%;display:flex;flex-wrap:wrap-reverse;gap:2px;justify-content:center;align-content:flex-start}
.deck i{width:13px;height:11px;border-radius:2px;background:linear-gradient(#a8743f,#6b4523);box-shadow:inset 0 0 0 1px #3d250f;animation:drop .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes drop{from{transform:translateY(-30px);opacity:0}}
.smoke{position:absolute;width:12px;height:12px;border-radius:50%;background:#cfe0e655;animation:smoke 2.6s linear infinite;left:75%;bottom:84%}
.smoke:nth-child(2){animation-delay:.9s}.smoke:nth-child(3){animation-delay:1.8s}
@keyframes smoke{from{transform:translate(0,0) scale(.6);opacity:.8}to{transform:translate(-30px,-46px) scale(2.2);opacity:0}}
.lantern{animation:lantern 1.6s infinite alternate}
@keyframes lantern{to{opacity:.4}}

.waves{position:absolute;left:0;right:0;bottom:36px;height:52px;z-index:3;pointer-events:none}
.waves svg{position:absolute;bottom:0;width:200%;height:100%}
.w1{animation:wave 7s linear infinite;opacity:.9}.w2{animation:wave 11s linear infinite reverse;opacity:.6;bottom:6px!important}
@keyframes wave{to{transform:translateX(-50%)}}

.capwrap{position:relative;z-index:4;padding:6px 12px 10px;background:#0a3a55}
.cap{position:relative;height:9px;background:#00000066;border-radius:6px;overflow:hidden;border:1px solid #ffffff18}
.cap i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold),var(--orange));transition:width .5s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 10px var(--orange)}
.cap u{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(45deg,#ff8a3d44 0 5px,transparent 5px 10px)}
.captxt{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between;font-weight:700}
.captxt.hot{color:var(--orange);animation:pulse .5s infinite alternate}
@keyframes pulse{to{opacity:.45}}

/* Glücksrad + Ansage */
.reel.choosing{gap:6px;padding:4px;border-color:var(--orange);animation:pulse .5s infinite alternate}
.opt{background:linear-gradient(#1d4a63,#0d2a3b);color:var(--gold);border:1.5px solid var(--gold);border-radius:9px;padding:5px 8px;font-family:var(--display);font-size:15px;box-shadow:0 3px 0 #9a6b05,inset 0 1px 0 #ffffff22}
.reel .opt{pointer-events:auto}
span.opt{cursor:default}
.opt.hid{background:linear-gradient(#4a6b7a,#2b4b57);color:#fff;box-shadow:0 3px 0 #142630}
.opt.rej{position:relative;opacity:.45;filter:grayscale(.8);transform:scale(.8);box-shadow:none;border-color:#ffffff44}
.opt.rej::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:var(--red);transform:rotate(-20deg)}
.reel.spin .opt{background:#00000040;color:var(--gold);box-shadow:none}
.opt:active{transform:translateY(3px);box-shadow:none}
.call{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-height:58px}
.reel{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#00000055;border:2px solid var(--gold);border-radius:12px;padding:4px 10px;box-shadow:0 0 14px #ffd34d44,inset 0 0 10px #000;font-family:var(--display);font-size:20px;color:var(--gold);min-width:104px;justify-content:center}
.reel.spin{animation:reel .08s infinite;filter:blur(.6px)}
@keyframes reel{50%{transform:translateY(-2px)}}
.reel.land{animation:land .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes land{40%{transform:scale(1.18)}}
.claim{flex:1;font-size:13px;line-height:1.3;color:var(--muted)}
.claim b{color:var(--text)}
.timer{height:5px;background:#00000066;border-radius:3px;overflow:hidden;margin-top:6px}
.timer i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--orange))}
.alarm{display:none;text-align:center;color:var(--red);font-weight:900;font-size:13px;animation:pulse .45s infinite alternate}

.log{font-size:11.5px;color:var(--muted);height:34px;overflow:hidden;mask-image:linear-gradient(#000 40%,transparent)}
.log div:first-child{color:var(--text)}

/* Event-Varianten */
.meline{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:var(--muted);position:relative}
.meline .tok{position:static;margin-left:2px}
.meline .your{color:var(--orange);animation:pulse .5s infinite alternate}

/* Hand */
.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:52px;padding-top:6px}
.crate{--c:#777;position:relative;width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:23px;cursor:pointer;user-select:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 100%,#fff 25%),var(--c) 45%,color-mix(in srgb,var(--c) 100%,#000 40%));
  box-shadow:inset 0 2px 0 #ffffff44,inset 0 -3px 0 #00000055,0 3px 0 color-mix(in srgb,var(--c) 100%,#000 55%),0 5px 8px #0007;
  transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
.crate::before{content:"";position:absolute;inset:4px;border-radius:7px;border:1px dashed #ffffff30;pointer-events:none}
.crate.sel{transform:translateY(-10px) scale(1.06);box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 0 #00000055,0 0 0 2px #fff,0 0 18px #fffa,0 12px 14px #0008}
.crate:active{transform:scale(.92)}
.crate.contra{background:linear-gradient(160deg,#3a3a3a,#151515 50%,#000);box-shadow:inset 0 2px 0 #ffffff22,inset 0 -3px 0 #000,0 3px 0 #000,0 0 10px #ff3d5a44}
.crate.new{animation:popin .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes popin{from{transform:scale(0)}}
.hand.locked .crate{filter:saturate(.6) brightness(.8)}
/* Kisten-Skins */
body.crate-neon .crate{box-shadow:inset 0 0 0 2px var(--c),0 0 12px var(--c),0 4px 8px #0008;background:#071725}
body.crate-glitch .crate::after{content:"";position:absolute;inset:0;border-radius:11px;background:linear-gradient(90deg,#ff00ff22,transparent 30%,#00ffff22 70%,transparent);mix-blend-mode:screen;animation:glitch 2.2s steps(2) infinite}
@keyframes glitch{50%{transform:translateX(2px)}}

/* Buttons */
.row{display:flex;gap:8px}
.btn{position:relative;flex:1;border-radius:14px;padding:14px 10px;font-weight:900;font-size:16px;letter-spacing:.3px;transition:transform .08s,box-shadow .08s,filter .2s}
.btn:active:not(:disabled){transform:translateY(4px)}
.btn:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.btn-teal{background:linear-gradient(#5ff5e8,var(--teal) 45%,var(--teal2));color:#032b28;box-shadow:0 4px 0 #0b7c73,0 8px 16px #2ee6d633}
.btn-teal:active:not(:disabled){box-shadow:0 0 0 #0b7c73}
.btn-red{background:linear-gradient(#ff7088,var(--red) 50%,#d41f3c);color:#fff;box-shadow:0 4px 0 #8f1226,0 8px 16px #ff3d5a44;text-shadow:0 1px 0 #0005}
.btn-red:not(:disabled){animation:glow .55s infinite alternate}
@keyframes glow{to{box-shadow:0 4px 0 #8f1226,0 0 26px #ff3d5aaa}}
.btn-gray{background:linear-gradient(#36596a,#26414e);color:var(--text);box-shadow:0 4px 0 #142630}
.btn-gold{background:linear-gradient(#ffe68a,var(--gold) 50%,#e5a91c);color:#3b2600;box-shadow:0 4px 0 #9a6b05,0 8px 16px #ffd34d44}
.btn small{display:block;font-size:10px;font-weight:700;opacity:.75}
.subrow{display:flex;gap:6px;align-items:center;justify-content:space-between}
.emotes{display:flex;gap:5px}
.emotes button{background:var(--panel);border:1px solid var(--line);border-radius:50%;width:38px;height:38px;font-size:19px;transition:transform .1s}
.emotes button:active{transform:scale(.8)}
.scan{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 10px;font-size:12px;font-weight:800}
.scan:disabled{opacity:.35}

/* Overlays */
.overlay{position:fixed;inset:0;background:#020810dd;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:20;padding:16px;overflow:auto}
.overlay.on{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.card{background:linear-gradient(#0f2c40,#081a28);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;max-width:400px;width:100%;box-shadow:0 20px 60px #000a;animation:rise .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes rise{from{transform:translateY(30px) scale(.95);opacity:0}}
.card h2{margin:0 0 8px;font-family:var(--display);font-size:22px;font-weight:400}
.verdict{font-family:var(--display);font-size:30px;margin:8px 0;animation:stamp .5s cubic-bezier(.3,1.8,.5,1) both}
@keyframes stamp{from{transform:scale(2.4) rotate(-12deg);opacity:0}}
.reveal{display:flex;gap:10px;justify-content:center;margin:14px 0}
.reveal .crate{width:56px;height:56px;font-size:28px;cursor:default}
.reveal .crate.closed{background:linear-gradient(160deg,#9a6a3a,#6b4523 50%,#3d250f);--c:#6b4523}
.reveal .crate.flip{animation:flip .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes flip{from{transform:rotateY(90deg) scale(.7)}}
.reveal .bad{box-shadow:0 0 0 3px var(--red),0 0 22px var(--red)!important}
.reveal .good{box-shadow:0 0 0 3px var(--green),0 0 18px var(--green)!important}

/* Menü */
.hero{height:130px;margin:-20px -20px 10px;border-radius:22px 22px 0 0;background:linear-gradient(#0000,#081a28),url(../concept/01_keyart.jpg) center 40%/cover;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.hero .logo{font-size:32px}
.rank{display:flex;align-items:center;gap:10px;text-align:left;background:#00000040;border-radius:14px;padding:10px;margin:8px 0}
.rank .ic{font-size:30px}
.rank b{display:block}
.xpbar{height:8px;border-radius:5px;background:#00000080;overflow:hidden;margin-top:4px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width 1.2s cubic-bezier(.2,.8,.3,1)}
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-weight:800;font-size:13px}
.chip.on{background:var(--teal);color:#032b28;border-color:var(--teal)}
.chip.lock{opacity:.4}
.daily{display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(90deg,#ffd34d22,#0000);border:1px solid #ffd34d44;border-radius:14px;padding:10px;margin:8px 0;font-size:13px}
.daily.done{border-color:var(--green);background:linear-gradient(90deg,#4dff9a22,#0000)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.stats div{background:#00000040;border-radius:10px;padding:6px;font-size:10px;color:var(--muted)}
.stats b{display:block;font-size:17px;color:var(--text)}
details{text-align:left;font-size:13px;color:var(--muted);line-height:1.45;margin:8px 0;background:#00000030;border-radius:12px;padding:8px 12px}
details summary{cursor:pointer;font-weight:800;color:var(--text)}
details b{color:var(--text)}
.section{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:10px;text-align:left}
.unlock{margin:10px 0;padding:10px;border-radius:14px;background:linear-gradient(90deg,#ffd34d33,#ff8a3d22);border:1px solid var(--gold);font-weight:800;animation:stamp .5s .6s both}
.rankrow{padding:6px 0;text-align:left;display:flex;justify-content:space-between}
.rankrow.win{color:var(--gold);font-weight:900}

/* FX */
#fx{position:fixed;inset:0;pointer-events:none;z-index:30}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#0b2233ee;border:1px solid var(--orange);padding:9px 14px;border-radius:12px;z-index:25;font-weight:800;font-size:13px;display:none;white-space:nowrap;box-shadow:0 8px 24px #0009}
.toast.on{display:block;animation:drop .35s cubic-bezier(.3,1.6,.5,1)}
.float{position:fixed;left:50%;top:38%;font-size:28px;font-family:var(--display);pointer-events:none;z-index:31;text-shadow:0 0 16px currentColor,0 3px 0 #0008;animation:floatUp 1.5s ease-out forwards;white-space:nowrap}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,24px) scale(.5)}14%{opacity:1;transform:translate(-50%,0) scale(1.2)}24%{transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-100px)}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:29;animation:flash .5s ease-out forwards}
@keyframes flash{from{opacity:.55}to{opacity:0}}
.shake{animation:shake .42s}
@keyframes shake{15%{transform:translate(-9px,2px)}30%{transform:translate(8px,-2px)}45%{transform:translate(-6px,1px)}60%{transform:translate(5px,0)}80%{transform:translate(-2px,0)}}
.bubble{position:fixed;z-index:32;font-size:32px;pointer-events:none;animation:pop 1.9s forwards;filter:drop-shadow(0 3px 6px #000)}
@keyframes pop{0%{transform:translate(-50%,-100%) scale(0)}12%{transform:translate(-50%,-100%) scale(1.4)}22%{transform:translate(-50%,-100%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%)}}
.flyer{position:fixed;z-index:28;pointer-events:none;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;background:linear-gradient(#a8743f,#6b4523);box-shadow:inset 0 0 0 1px #3d250f,0 4px 10px #0008}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 90px #ff3d5a;opacity:0;transition:opacity .3s}
.vignette.on{animation:vig .9s infinite alternate}
@keyframes vig{from{opacity:.15}to{opacity:.55}}
.streak{position:fixed;left:14px;bottom:14px;z-index:6;font-family:var(--display);color:var(--orange);text-shadow:0 0 14px var(--orange);font-size:18px;display:none}
.streak.on{display:block;animation:land .4s}

/* Schiff-Skins */
body.ship-neon{--hull:#0b1f2e;--hull2:#123349;--cabin:#2ee6d6;--trim:#ff3dc8}
body.ship-gold{--hull:#5a3d06;--hull2:#c99a1e;--cabin:#fff2c4;--trim:#ffd34d}
body.ship-ghost{--hull:#1d2a33;--hull2:#3c5563;--cabin:#a8ffe9;--trim:#7dffcf}
body.ship-ghost .ship{opacity:.82;filter:drop-shadow(0 0 14px #7dffcf88)}

@media (max-height:700px){.stage{min-height:200px}.harbor{min-height:110px}.shipwrap{width:190px;margin-left:-95px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Lobby und Profil */
.namerow input,.joinrow input{width:100%;box-sizing:border-box;background:#00000040;border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--text);font:800 15px var(--font);outline:none}
.namerow input:focus,.joinrow input:focus{border-color:var(--teal)}
.avs .chip{padding:5px 8px;font-size:18px}
.joinrow{display:flex;gap:8px;margin-top:8px}
.joinrow input{text-transform:uppercase;letter-spacing:4px;text-align:center;font-family:var(--display)}
.joinrow .btn{flex:0 0 auto;padding:11px 14px}
.roomcode{font-family:var(--display);font-size:38px;letter-spacing:8px;color:var(--gold);margin:4px 0 10px;text-shadow:0 0 18px #ffd34d66}
.members{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.member{display:flex;justify-content:space-between;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:800;font-size:14px}
.member.off{opacity:.5}
.wait{margin:12px 0;color:var(--muted);font-weight:800}
.opp.away{opacity:.55}

/* Kompaktes Menü, Auswahl-Popups */
.profrow{display:flex;gap:8px;align-items:center}
.profrow input{flex:1;min-width:0;box-sizing:border-box;background:#00000040;border:1px solid var(--line);border-radius:12px;padding:11px 12px;color:var(--text);font:800 15px var(--font);outline:none}
.profrow input:focus{border-color:var(--teal)}
.avbtn{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--panel2);border:2px solid var(--teal);font-size:24px}
.joinrow{display:flex;gap:6px;margin-top:6px}
.joinrow input{flex:1;min-width:0;padding:11px 6px}
.joinrow .btn{flex:0 0 auto;padding:11px 10px;font-size:14px}
.skinrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.skin{background:#00000040;border:1px solid var(--line);border-radius:14px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:11px;color:var(--text)}
.skin:active{transform:scale(.97)}
.pvship{width:72px;height:38px}
.pvcrate{display:flex;width:38px;height:38px;border-radius:9px;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(160deg,#e9b44c,#b27a1e);box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 0 #00000055,0 3px 6px #0008}
.pvcrate i{font-style:normal}
.pv-neon{background:#071725;box-shadow:inset 0 0 0 2px var(--teal),0 0 12px var(--teal)}
.pv-glitch{background:linear-gradient(90deg,#ff00ff55,#2a2a3a 40%,#00ffff55)}
.pick{z-index:40}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.ptile{background:var(--panel2);border:2px solid var(--line);border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;color:var(--text);font-weight:800;font-size:12px}
.ptile.on{border-color:var(--teal);box-shadow:0 0 12px #2ee6d655}
.ptile.lock{opacity:.45}
.ptile small{font-size:9px;color:var(--muted)}
.pvav{font-size:28px}
.card .hero{height:76px;margin-bottom:6px}
.card .hero .logo{font-size:26px}
.card .rank,.card .daily{margin:6px 0;padding:8px}
.card .section{margin-top:8px}
.card .chips{margin:6px 0}
@media (max-height:760px){.card{padding:14px}.card .hero{height:56px;margin:-14px -14px 6px}.card .hero .logo{font-size:22px}.card .daily{display:none}}
.btn-green{background:linear-gradient(#7dffb8,var(--green) 50%,#22c36c);color:#032b18;box-shadow:0 4px 0 #14804a,0 8px 16px #4dff9a44}
.chk{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;border:2px solid var(--line);font-size:14px;vertical-align:middle;color:#032b18}
.chk.on{background:var(--green);border-color:var(--green);box-shadow:0 0 10px #4dff9a88;animation:popin .35s cubic-bezier(.3,1.8,.5,1) both}

/* ---------- Spiel-UI v16 ---------- */
.log{height:15px;margin-top:5px;font-size:11px;mask-image:none;white-space:nowrap;text-overflow:ellipsis}
.log div:not(:first-child){display:none}
.log div:first-child{overflow:hidden;text-overflow:ellipsis;animation:fade .3s}
.opp .hg{position:absolute;top:-7px;right:-5px;font-size:15px;animation:think 1s infinite;filter:drop-shadow(0 2px 3px #000a)}
.opp.turn .av{animation:think 1.2s infinite}

/* Hand als Stapel */
.hand{gap:10px;padding:10px 4px 4px;min-height:64px;align-content:center;border-radius:18px;transition:box-shadow .3s,background .3s}
.hand.go{background:#2ee6d60d;box-shadow:0 0 0 1px #2ee6d655,0 0 26px #2ee6d633;animation:handglow 1.4s ease-in-out infinite alternate}
@keyframes handglow{to{box-shadow:0 0 0 1px #2ee6d6aa,0 0 34px #2ee6d655}}
.stack{position:relative;cursor:pointer;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.stack .crate{width:54px;height:54px;font-size:27px;cursor:pointer}
.stack.multi .crate{box-shadow:inset 0 2px 0 #ffffff55,inset 0 -3px 0 #00000055,3px -3px 0 -1px var(--c),3px -3px 0 0 #0006,6px -6px 0 -2px var(--c),0 6px 10px #0008}
.stack .crate.empty{opacity:.28;filter:grayscale(.6)}
.stack.has{transform:translateY(-8px)}
.stack.has .crate{outline:2px solid #fff;outline-offset:2px}
.stack:active{transform:scale(.92)}
.stack.new{animation:popin .4s cubic-bezier(.3,1.6,.5,1) both}
.stack .cnt{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#04141f;border:1.5px solid var(--c);color:#fff;font-size:12px;font-weight:900;line-height:17px;text-align:center}
.stack .took{position:absolute;left:50%;top:-18px;transform:translateX(-50%);background:#fff;color:#04141f;border-radius:8px;padding:0 6px;font-size:12px;font-weight:900;animation:popin .25s cubic-bezier(.3,1.8,.5,1)}
.stack .minus{position:absolute;left:-8px;bottom:-6px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:15px;line-height:20px;padding:0;box-shadow:0 2px 0 #8f1226}
.hand.locked .stack{cursor:default}

/* Laden-Knopf */
.btn-smug{background:linear-gradient(#d29bff,#a64dff 50%,#7a1fd6);color:#fff;box-shadow:0 4px 0 #4f0f96,0 8px 22px #a64dff66;text-shadow:0 1px 0 #0005;animation:smug 1s ease-in-out infinite alternate}
@keyframes smug{to{box-shadow:0 4px 0 #4f0f96,0 0 30px #a64dffaa}}
#load.btn-green{animation:honest 1s ease-in-out infinite alternate}
@keyframes honest{to{box-shadow:0 4px 0 #14804a,0 0 26px #4dff9a88}}
#load{font-size:18px}
#load small{font-size:11px}

/* Waren-Wahl */
.wsheet{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;padding:18px 16px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(#0f2c40f2,#06141ef8);border-top:1px solid var(--line);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px #000c;text-align:center}
.wsheet.on{display:block;animation:sheet .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes sheet{from{transform:translateY(100%)}}
.wtitle{font-family:var(--display);font-size:18px;color:var(--gold);margin-bottom:12px;text-shadow:0 0 12px #ffd34d66}
.wcards{display:flex;gap:12px;max-width:440px;margin:0 auto}
.wcard{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 12px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff 10%),color-mix(in srgb,var(--c) 60%,#000));color:#fff;box-shadow:inset 0 2px 0 #ffffff55,0 5px 0 color-mix(in srgb,var(--c) 40%,#000),0 10px 24px #0008;text-shadow:0 1px 2px #0008;transition:transform .1s}
.wcard:active{transform:translateY(4px) scale(.97)}
.wcard .we{font-size:46px;line-height:1.1;animation:land .5s cubic-bezier(.3,1.8,.5,1) both}
.wcard b{font-family:var(--display);font-weight:400;font-size:17px}
.wcard small{font-size:12px;font-weight:800;opacity:.9}

/* Dein-Zug-Banner */
.turnban{position:fixed;left:50%;top:42%;z-index:24;pointer-events:none;font-family:var(--display);font-size:38px;color:var(--teal);text-shadow:0 0 22px #2ee6d6,0 3px 0 #0a5a55;white-space:nowrap;opacity:0;transform:translate(-50%,-50%)}
.turnban.on{animation:ban 1.1s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.9)}}


/* Menü v17 */
.mode{background:#00000026;border:1px solid var(--line);border-radius:16px;padding:10px;margin-top:8px}
.mhead{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;text-align:left}
.mhead b{font-size:15px}
.mhead span{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.mode .chips{margin:0 0 8px}
.or{font-size:11px;color:var(--muted);font-weight:700;margin:8px 0 6px;display:flex;align-items:center;gap:8px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.mode .joinrow input{flex:1;min-width:0}
#nameIn::placeholder{color:#ffffff55;font-style:italic}
#nameIn.need{border-color:var(--gold);box-shadow:0 0 0 1px #ffd34d55;animation:needname 1.2s ease-in-out infinite alternate}
@keyframes needname{to{box-shadow:0 0 0 1px #ffd34d,0 0 14px #ffd34d55}}
.overlay .card{margin:auto}
.dline{margin-top:5px;font-size:11.5px;font-weight:800;color:var(--text);display:flex;gap:6px}
.dline b{margin-left:auto;color:var(--gold)}
.dline.done{color:var(--green)}
.rules{text-align:left;font-size:13px;line-height:1.5}
.member .flag{font-size:15px;margin-left:2px}

#langBtn{font-size:11px;font-weight:900;letter-spacing:.3px;color:var(--text)}