@font-face{font-family:"Creepster";src:url("fonts/Creepster-Regular.ttf") format("truetype");font-display:swap}
:root{--orange:#ff7518;--orange2:#ffb05c;--gold:#ffd24a;--green:#5be37d;--red:#ff4d4d;--panel:rgba(18,10,26,.72);
--glow:rgba(255,140,40,.75);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0612;color:#fff;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
user-select:none;-webkit-user-select:none}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%);
transition:background .4s}
#vignette.danger{background:radial-gradient(ellipse at center,transparent 40%,rgba(160,0,0,.55) 100%)}
#vignette.win{background:radial-gradient(ellipse at center,transparent 45%,rgba(255,190,40,.4) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}

/* oben: Spieler, Punkte, Ton */
#top{position:fixed;left:0;right:0;top:0;display:flex;gap:8px;align-items:center;padding:calc(10px + var(--safe-t)) 12px 0;z-index:5}
.chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:999px;
padding:6px 14px 6px 8px;font-size:15px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#333}
#player{min-width:0}#pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36vw}
#balance{margin-left:auto}
.chip.btn{padding:6px 12px;cursor:pointer;color:#fff;font-size:18px}
#history{position:fixed;left:0;right:0;top:calc(54px + var(--safe-t));display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
padding:0 12px;z-index:4;pointer-events:none}
.h{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18)}
.h.lo{color:#ff8b8b;border-color:rgba(255,100,100,.4)}.h.mid{color:#ffc26b;border-color:rgba(255,170,60,.45)}
.h.hi{color:#7dffa0;border-color:rgba(90,230,130,.5)}.h.top{color:#ffe27a;border-color:rgba(255,215,80,.7);box-shadow:0 0 10px rgba(255,210,60,.45)}

/* Mitte: Multiplikator */
#hud{position:fixed;left:0;right:0;top:calc(18% + var(--safe-t));text-align:center;pointer-events:none;z-index:3}
#mult{font-family:"Creepster",system-ui,sans-serif;font-size:clamp(70px,19vw,168px);line-height:1;letter-spacing:2px;
color:#fff;text-shadow:0 0 18px var(--glow),0 0 48px var(--glow),0 4px 0 rgba(0,0,0,.5);transition:color .25s}
#mult small{font-size:.5em;margin-left:2px;opacity:.9}
#mult.bump{animation:bump .22s ease-out}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
#mult.crash{color:#ff5a5a;--glow:rgba(255,60,40,.9);animation:shake .5s}
#mult.win{color:#ffe27a;--glow:rgba(255,205,60,.95)}
#mult.dim{opacity:.45}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px) rotate(-1.5deg)}40%{transform:translateX(10px) rotate(1.2deg)}
60%{transform:translateX(-7px)}80%{transform:translateX(5px)}}
#sub{margin-top:4px;font-size:clamp(15px,3.6vw,22px);color:#ffe6c8;text-shadow:0 2px 8px #000;min-height:1.4em;font-weight:600}
#badge{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:999px;background:rgba(40,160,70,.85);
border:1px solid #9affb0;font-weight:800;font-size:clamp(14px,3.4vw,20px);opacity:0;transform:scale(.7);transition:all .3s}
#badge.show{opacity:1;transform:scale(1)}

/* unten: Bedienfeld */
#panel{position:fixed;left:0;right:0;bottom:0;padding:12px 14px calc(14px + var(--safe-b));display:flex;justify-content:center;z-index:6}
.card{width:min(560px,100%);background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px 16px 14px;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.55);animation:rise .45s ease-out}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.card h2{margin:0 0 4px;font-family:"Creepster",system-ui;font-weight:400;font-size:30px;letter-spacing:1px;color:var(--orange2)}
.card p{margin:4px 0 10px;color:#d8c9e6;font-size:14.5px;line-height:1.45}
.row{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin:2px 0}.row b{color:var(--gold)}
button.big{width:100%;margin-top:10px;border:0;cursor:pointer;color:#2a0f00;font-family:"Creepster",system-ui;font-size:clamp(28px,7vw,38px);
letter-spacing:1.5px;padding:12px 18px 10px;border-radius:18px;background:linear-gradient(#ffc04d,#ff7518 60%,#d4510c);
box-shadow:0 0 0 3px rgba(255,200,120,.35),0 8px 0 #8a2f00,0 14px 28px rgba(255,100,0,.45);transition:transform .08s,box-shadow .08s}
button.big:active{transform:translateY(5px);box-shadow:0 0 0 3px rgba(255,200,120,.35),0 3px 0 #8a2f00,0 8px 18px rgba(255,100,0,.45)}
button.big.cash{background:linear-gradient(#a5ffb8,#38d46a 60%,#1f9d46);color:#06260f;animation:breathe 1s ease-in-out infinite;
box-shadow:0 0 0 3px rgba(150,255,180,.4),0 8px 0 #0f6a2c,0 14px 30px rgba(60,230,110,.5)}
button.big.cash:active{box-shadow:0 0 0 3px rgba(150,255,180,.4),0 3px 0 #0f6a2c,0 8px 18px rgba(60,230,110,.5)}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
button.big:disabled{filter:grayscale(.8) brightness(.7);animation:none;cursor:default}
button.ghostbtn{margin-top:8px;width:100%;background:transparent;color:#d8c9e6;border:1px solid rgba(255,255,255,.22);border-radius:14px;
padding:9px 12px;font-size:14.5px;cursor:pointer}
.fair{margin-top:10px;font:12px/1.5 ui-monospace,Consolas,monospace;color:#b9a8cf;word-break:break-all}
.fair b{color:#fff}.ok{color:var(--green)}.bad{color:var(--red)}

/* Countdown */
#overlay{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:7}
#count{font-family:"Creepster",system-ui;font-size:clamp(120px,40vw,320px);color:#ffe9c9;text-shadow:0 0 30px var(--orange),0 0 80px var(--orange);
opacity:0}
#count.go{animation:count .9s ease-out forwards}
@keyframes count{0%{transform:scale(2.4) rotate(-8deg);opacity:0}25%{transform:scale(1) rotate(0);opacity:1}80%{opacity:1}
100%{transform:scale(.7);opacity:0}}
#toast{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;font-family:"Creepster",system-ui;
font-size:clamp(34px,9vw,72px);text-align:center;opacity:0;text-shadow:0 0 22px currentColor,0 4px 0 rgba(0,0,0,.5);white-space:nowrap}
#toast.go{animation:toast 2.2s ease-out forwards}
@keyframes toast{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
25%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
#msg{position:fixed;inset:0;display:none;place-items:center;z-index:9;background:rgba(8,4,14,.88);padding:20px;text-align:center}
#msg.show{display:grid}#msg .card{animation:none}
@media (max-height:620px){#hud{top:calc(12% + var(--safe-t))}.card{padding:12px}.card h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){#mult.crash,#mult.bump,button.big.cash{animation:none}}

/* „Nochmal spielen“ am Ende */
.again{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.stepper{display:inline-flex;align-items:center;gap:10px}.stepper b{min-width:44px;text-align:center;color:var(--gold);font-size:17px}
.stepper button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.stepper button:active{background:rgba(255,117,24,.4)}

.stepper input{width:76px;text-align:center;font:700 17px system-ui;color:var(--gold);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:6px 4px}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper input{-moz-appearance:textfield}
.chips{display:flex;gap:6px;margin:6px 0 2px}.chips button{flex:1;padding:7px 2px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#e9dcf5;font-size:13px;font-weight:700;cursor:pointer}
.chips button:active{background:rgba(255,117,24,.35)}