/* Moritz Fick Pfannen Suppe — full redesign CSS */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{--amber:#D4920A;--amber-hi:#F5B030;--black:#060400;--cream:#FFF3D0;--bad:#ff3322;--good:#66dd44;}
html,body{width:100%;height:100%;background:var(--black);overflow:hidden;font-family:'DM Mono',monospace;color:var(--cream);-webkit-user-select:none;user-select:none;}

/* Login overlay */
#pfb-login-overlay{position:fixed;inset:0;background:#060400;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:1.5rem;}
#pfb-login-overlay.hidden{display:none;}
#pfb-login-overlay .lo-title{font-family:Anton,sans-serif;font-size:2.2rem;color:var(--amber-hi);letter-spacing:2px;text-align:center;line-height:1.05;}
#pfb-login-overlay .lo-sub{font-size:.85rem;color:rgba(255,243,208,.5);text-align:center;}
#pfb-login-overlay .lo-btn{background:var(--amber);color:#000;border:2px solid var(--cream);padding:.9rem 2.4rem;min-height:44px;min-width:44px;font-family:Anton,sans-serif;font-size:1.2rem;letter-spacing:1px;border-radius:8px;cursor:pointer;}

/* Screens */
.fs-screen{display:none;position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;padding:1rem;}
.fs-screen.active{display:flex;}

/* ── START ──────────────────────────────────────────── */
#start{background:radial-gradient(ellipse at 50% 60%, #1a0e00 0%, #060400 100%);}
.fs-logo{font-family:Anton,sans-serif;font-size:3rem;color:var(--amber-hi);letter-spacing:3px;text-align:center;text-shadow:0 0 30px rgba(245,176,48,.5);line-height:.95;}
.fs-logo span{display:block;font-size:.88rem;letter-spacing:5px;color:var(--amber);margin-top:.6rem;font-family:'DM Mono',monospace;}
.fs-sub{margin-top:1rem;font-size:.85rem;color:rgba(255,243,208,.6);text-align:center;max-width:320px;line-height:1.55;}
.fs-start-btn{margin-top:1.8rem;background:var(--amber-hi);color:#060400;border:2px solid var(--cream);padding:.95rem 2.8rem;min-height:44px;min-width:44px;font-family:Anton,sans-serif;font-size:1.4rem;letter-spacing:2px;border-radius:8px;cursor:pointer;box-shadow:0 0 20px rgba(245,176,48,.4);}
.fs-start-btn:active{transform:scale(.96);}
.fs-difficulty{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap;justify-content:center;}
.fs-diff-btn{background:transparent;border:1px solid rgba(245,176,48,.3);color:rgba(255,243,208,.6);padding:.42rem 1.1rem;font-family:'DM Mono',monospace;font-size:.78rem;border-radius:4px;cursor:pointer;}
.fs-diff-btn.selected{border-color:var(--amber-hi);color:var(--amber-hi);background:rgba(245,176,48,.12);}
.fs-rekord-line{margin-top:1rem;font-size:.74rem;color:rgba(255,243,208,.4);letter-spacing:1px;text-align:center;}
.fs-rekord-line b{color:var(--amber-hi);font-family:Anton,sans-serif;}
.fs-hero-chip{margin-top:.8rem;padding:.4rem .9rem;border:1px solid rgba(245,176,48,.25);border-radius:999px;background:rgba(0,0,0,.3);font-size:.72rem;letter-spacing:1.5px;color:rgba(255,243,208,.5);}
.fs-hero-chip .hc-label{opacity:.7;}
.fs-hero-chip b{color:var(--amber-hi);font-family:Anton,sans-serif;font-weight:normal;letter-spacing:2px;margin-left:.4rem;}

/* ── CHAR SELECT ────────────────────────────────────── */
#char-select{background:radial-gradient(ellipse at 50% 50%, #1a0e00 0%, #060400 100%);}
.fs-cs-title{font-family:Anton,sans-serif;font-size:2.2rem;color:var(--amber-hi);letter-spacing:2px;text-align:center;line-height:1;}
.fs-cs-sub{font-size:.8rem;color:rgba(255,243,208,.5);text-align:center;margin-top:.4rem;letter-spacing:1px;}
.fs-char-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.2rem;width:100%;max-width:460px;}
.fs-char-card{background:rgba(255,243,208,.04);border:1.5px solid rgba(245,176,48,.2);border-radius:10px;padding:.55rem .3rem .6rem;text-align:center;cursor:pointer;transition:transform .12s ease-out,border-color .12s ease-out,background .12s ease-out;}
.fs-char-card:active{transform:scale(.97);}
.fs-char-card.selected{border-color:var(--amber-hi);background:rgba(245,176,48,.12);box-shadow:0 0 20px rgba(245,176,48,.3);}
.fs-char-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid rgba(245,176,48,.4);margin:0 auto;display:block;background:#1a0e00;}
.fs-char-card.selected .fs-char-photo{border-color:var(--amber-hi);}
.fs-char-name{font-family:Anton,sans-serif;font-size:.95rem;color:var(--cream);margin-top:.4rem;letter-spacing:1px;}

/* ── GAME ───────────────────────────────────────────── */
#game{background:#060400;gap:0;padding:0;}

/* HUD (top bar) */
.fs-hud{position:absolute;top:.5rem;left:.7rem;right:.7rem;display:flex;align-items:flex-start;justify-content:space-between;z-index:20;pointer-events:none;gap:.5rem;}
.fs-hud-left,.fs-hud-mid,.fs-hud-right{background:rgba(0,0,0,.55);padding:.35rem .7rem;border-radius:10px;border:1px solid rgba(245,176,48,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.fs-hud-label{font-size:.55rem;letter-spacing:1.5px;color:rgba(255,243,208,.5);line-height:1;}
.fs-hud-val{font-family:Anton,sans-serif;font-size:1.3rem;color:var(--amber-hi);line-height:1;margin-top:.15rem;}
.fs-hud-val.urgent{color:#ff4400;animation:urg .5s infinite alternate;}
@keyframes urg{from{opacity:1;}to{opacity:.45;}}
.fs-hud-mid{text-align:center;}
.fs-hud-mult{color:#ff9800;}
.fs-hud-mult.hot{color:#ff4400;text-shadow:0 0 10px rgba(255,68,0,.6);}
.fs-hud-plate{font-size:.56rem;letter-spacing:1.4px;color:var(--amber);margin-top:.25rem;font-family:'DM Mono',monospace;}
.fs-hud-right{text-align:right;}

/* Recipe strip (top, below HUD) */
.fs-recipe{position:absolute;top:3.6rem;left:50%;transform:translateX(-50%);display:flex;gap:.35rem;background:rgba(0,0,0,.5);padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(245,176,48,.2);backdrop-filter:blur(6px);z-index:19;font-size:1.15rem;}
.fs-recipe .rlabel{font-size:.55rem;letter-spacing:1.5px;color:rgba(255,243,208,.5);align-self:center;margin-right:.3rem;font-family:'DM Mono',monospace;}

/* Pan / canvas area */
.fs-canvas-wrap{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative;margin-top:.5rem;}
#pan-canvas{display:block;touch-action:none;}

/* Prompt layer (microgame instruction) */
.fs-prompt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:44;opacity:0;transition:opacity .15s;}
.fs-prompt.show{opacity:1;}
.fs-prompt-emoji{font-size:4.5rem;line-height:1;filter:drop-shadow(0 0 18px rgba(245,176,48,.55));}
.fs-prompt-text{font-family:Anton,sans-serif;font-size:2.2rem;color:var(--amber-hi);letter-spacing:3px;margin-top:.4rem;text-shadow:0 0 14px rgba(0,0,0,.9),0 3px 0 #060400;text-align:center;line-height:1;}
.fs-prompt-sub{font-size:.72rem;color:rgba(255,243,208,.6);letter-spacing:2px;margin-top:.2rem;text-align:center;}
.fs-prompt-bar{margin-top:1rem;width:140px;height:5px;background:rgba(255,243,208,.15);border-radius:3px;overflow:hidden;}
.fs-prompt-bar>i{display:block;height:100%;background:var(--amber-hi);transition:width .05s linear;}
.fs-prompt.fail .fs-prompt-text{color:var(--bad);}
.fs-prompt.ok .fs-prompt-text{color:var(--good);}

/* Tap-target (for chop microgame) */
.fs-tap-target{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe790,#d4920a 70%);border:3px solid #fff3d0;display:flex;align-items:center;justify-content:center;font-size:3rem;pointer-events:auto;user-select:none;z-index:45;box-shadow:0 0 35px rgba(245,176,48,.55),inset 0 0 20px rgba(255,255,255,.25);display:none;}
.fs-tap-target.show{display:flex;animation:tapPulse .4s infinite alternate;}
@keyframes tapPulse{from{transform:translate(-50%,-50%) scale(1);}to{transform:translate(-50%,-50%) scale(1.08);}}

/* Swipe card (ingredient) */
.fs-swipe-layer{position:absolute;inset:0;pointer-events:none;z-index:46;display:none;}
.fs-swipe-layer.show{display:block;}
.fs-swipe-card{position:absolute;left:50%;top:52%;width:160px;height:200px;transform:translate(-50%,-50%) rotate(0deg);background:linear-gradient(160deg,#fff9e5,#ffe4a3);border:3px solid var(--amber);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.7);pointer-events:auto;touch-action:none;transition:transform .05s linear,opacity .2s;will-change:transform;}
.fs-swipe-card .se{font-size:5rem;line-height:1;}
.fs-swipe-card .sn{font-family:Anton,sans-serif;font-size:1.1rem;color:#060400;margin-top:.5rem;letter-spacing:1px;text-align:center;padding:0 .3rem;}
.fs-swipe-hints{position:absolute;inset:0;pointer-events:none;}
.fs-swipe-hint{position:absolute;font-family:Anton,sans-serif;font-size:.85rem;letter-spacing:2px;color:rgba(255,243,208,.5);padding:.2rem .6rem;border:1px solid rgba(245,176,48,.3);border-radius:999px;background:rgba(0,0,0,.4);}
.fs-swipe-hint.r{right:.8rem;top:50%;transform:translateY(-50%);}
.fs-swipe-hint.l{left:.8rem;top:50%;transform:translateY(-50%);}
.fs-swipe-hint.u{left:50%;top:12%;transform:translateX(-50%);}
.fs-swipe-hint.d{left:50%;bottom:12%;transform:translateX(-50%);}

/* Plate-flash (success/fail) */
.fs-plate-flash{position:absolute;inset:0;pointer-events:none;z-index:25;background:transparent;opacity:0;}
.fs-plate-flash.good{background:radial-gradient(ellipse at center,rgba(102,221,68,.5),transparent 70%);animation:flashGood .4s forwards;}
.fs-plate-flash.bad{background:radial-gradient(ellipse at center,rgba(255,50,34,.55),transparent 70%);animation:flashBad .4s forwards;}
@keyframes flashGood{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}
@keyframes flashBad{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}

/* Score pop */
.fs-score-pop{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-family:Anton,sans-serif;font-size:3rem;color:var(--amber-hi);pointer-events:none;opacity:0;z-index:30;text-shadow:0 0 20px rgba(245,176,48,.9),0 4px 0 #060400;}
.fs-score-pop.show{animation:scorePop 1.2s forwards;}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,10px) scale(.6);}15%{opacity:1;transform:translate(-50%,-18px) scale(1.2);}75%{opacity:1;transform:translate(-50%,-28px) scale(1);}100%{opacity:0;transform:translate(-50%,-60px) scale(.9);}}

/* Plate-intro banner (AUFTRAG) */
.fs-auftrag{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:35;opacity:0;}
.fs-auftrag.show{animation:auftragIn 1s forwards;}
@keyframes auftragIn{0%{opacity:0;transform:scale(.7);}20%{opacity:1;transform:scale(1.1);}80%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.8);}}
.fs-auftrag-title{font-family:Anton,sans-serif;font-size:2.6rem;color:var(--amber-hi);letter-spacing:3px;text-shadow:0 0 20px rgba(0,0,0,.9),0 3px 0 #060400;}
.fs-auftrag-recipe{margin-top:.5rem;font-size:2rem;letter-spacing:.6rem;}

/* MORITZ BRÜLLT overlay */
.fs-bruell{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:80;opacity:0;background:radial-gradient(ellipse at center,rgba(255,40,20,.7),rgba(20,0,0,.85));}
.fs-bruell.show{animation:bruellIn 3s forwards;}
@keyframes bruellIn{0%{opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;}}
.fs-bruell img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 40px rgba(255,50,30,.9);animation:bruellShake .1s infinite;}
@keyframes bruellShake{0%,100%{transform:translate(0,0) rotate(-1deg);}25%{transform:translate(-3px,1px) rotate(1deg);}50%{transform:translate(2px,-1px) rotate(-2deg);}75%{transform:translate(-1px,2px) rotate(2deg);}}
.fs-bruell-text{font-family:Anton,sans-serif;font-size:2rem;color:#fff;letter-spacing:2px;text-align:center;margin-top:1rem;max-width:300px;line-height:1.05;text-shadow:0 4px 0 #060400,0 0 20px rgba(0,0,0,.9);}

/* BOSS-STACK layer */
.fs-boss{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;z-index:40;background:radial-gradient(ellipse at center,#1a0e00 0%,#060400 100%);}
.fs-boss.show{display:flex;}
.fs-boss-title{font-family:Anton,sans-serif;font-size:2rem;color:var(--amber-hi);letter-spacing:3px;margin-top:1rem;text-align:center;}
.fs-boss-sub{font-size:.78rem;color:rgba(255,243,208,.65);letter-spacing:1px;margin-top:.2rem;}
#boss-canvas{margin-top:.6rem;touch-action:none;display:block;}
.fs-boss-hud{position:absolute;bottom:1.2rem;left:0;right:0;display:flex;justify-content:center;gap:1.2rem;font-family:Anton,sans-serif;font-size:1rem;color:var(--amber-hi);letter-spacing:1.5px;}

/* EMMY-BEFEHL overlay */
.fs-emmy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4.5rem;z-index:38;background:radial-gradient(ellipse at center,rgba(40,0,20,.75),rgba(10,0,0,.88));pointer-events:none;opacity:0;}
.fs-emmy.show{opacity:1;transition:opacity .2s;pointer-events:none;}
.fs-emmy-title{font-family:Anton,sans-serif;font-size:1.7rem;color:#ff4422;letter-spacing:3px;text-align:center;text-shadow:0 3px 0 #060400;line-height:1;animation:emmyYell .25s infinite alternate;}
@keyframes emmyYell{from{transform:scale(1);}to{transform:scale(1.06);}}
.fs-emmy-sub{font-size:.72rem;color:var(--cream);letter-spacing:1.5px;margin-top:.3rem;opacity:.85;}
.fs-emmy-steps{display:flex;gap:.5rem;margin-top:1.2rem;}
.fs-emmy-step{width:52px;height:52px;border-radius:10px;border:2px solid rgba(245,176,48,.3);background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:1.8rem;}
.fs-emmy-step.active{border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,.6);animation:emmyStepPulse .4s infinite alternate;}
@keyframes emmyStepPulse{from{transform:scale(1);}to{transform:scale(1.06);}}
.fs-emmy-step.done{border-color:var(--good);background:rgba(102,221,68,.15);}
.fs-emmy-step.miss{border-color:var(--bad);background:rgba(255,50,34,.15);}

/* ── RESULT ─────────────────────────────────────────── */
#result{background:radial-gradient(ellipse at 50% 40%,#1a1000 0%,#060400 100%);gap:0;}
.fs-result-icon{font-size:3.8rem;margin-bottom:.3rem;}
.fs-result-title{font-family:Anton,sans-serif;font-size:2.4rem;color:var(--amber-hi);letter-spacing:2px;text-align:center;line-height:1;}
.fs-result-sub{font-size:.85rem;color:rgba(255,243,208,.55);margin-top:.35rem;text-align:center;}
.fs-result-score{font-family:Anton,sans-serif;font-size:3.8rem;color:var(--amber-hi);margin:.7rem 0 .3rem;text-shadow:0 0 25px rgba(245,176,48,.6);line-height:1;}
.fs-result-score span{font-size:1.1rem;color:var(--amber);letter-spacing:2px;margin-left:.35rem;}
.fs-result-stats{display:flex;gap:1.6rem;justify-content:center;margin:.3rem 0 .6rem;}
.fs-result-stat{text-align:center;}
.fs-result-stat .v{font-family:Anton,sans-serif;color:var(--amber-hi);font-size:1.5rem;line-height:1;}
.fs-result-stat .l{font-size:.6rem;color:rgba(255,243,208,.4);letter-spacing:1.5px;margin-top:.15rem;}
.fs-rekord-banner{background:linear-gradient(90deg,#ff9800,#ffeb3b,#ff9800);background-size:200% 100%;color:#060400;font-family:Anton,sans-serif;font-size:1rem;letter-spacing:2px;padding:.5rem 1.3rem;border-radius:999px;text-align:center;margin:.3rem 0 .3rem;animation:rekordShimmer 1.6s linear infinite;box-shadow:0 0 22px rgba(255,200,0,.6);}
@keyframes rekordShimmer{from{background-position:0 0;}to{background-position:200% 0;}}
.fs-verdict{font-size:.82rem;color:var(--cream);text-align:center;max-width:310px;font-style:italic;margin:.7rem .3rem 1rem;line-height:1.5;}
.fs-result-btn{background:var(--amber-hi);color:#060400;border:2px solid var(--cream);padding:.85rem 2.2rem;min-height:44px;min-width:44px;font-family:Anton,sans-serif;font-size:1.25rem;letter-spacing:1px;border-radius:8px;cursor:pointer;margin:.3rem;}
.fs-result-btn.secondary{background:transparent;border:1px solid rgba(245,176,48,.4);color:var(--amber);font-size:1rem;}
.fs-result-btn:active{transform:scale(.96);}

/* Confetti */
.fs-confetti{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden;}
.fs-conf-piece{position:absolute;width:8px;height:14px;top:-20px;opacity:.95;}
@keyframes confFall{from{transform:translateY(-30px) rotate(0deg);opacity:1;}to{transform:translateY(110vh) rotate(720deg);opacity:.85;}}

/* Perms toast */
.fs-perm-toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);background:rgba(0,0,0,.9);color:var(--cream);padding:.7rem 1.2rem;border:1px solid var(--amber);border-radius:8px;font-size:.8rem;z-index:9000;max-width:90%;text-align:center;display:flex;gap:.7rem;align-items:center;}
.fs-perm-txt{flex:1;}
.fs-perm-btn{background:var(--amber-hi);color:#060400;border:none;padding:.45rem 1rem;font-family:Anton,sans-serif;font-size:.85rem;letter-spacing:1px;border-radius:4px;cursor:pointer;}

/* Pause button (game HUD corner) */
.fs-pause-btn{position:absolute;top:3.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(245,176,48,.3);color:var(--amber-hi);font-size:1rem;z-index:50;cursor:pointer;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:0;}
.fs-pause-btn:active{transform:scale(.9);}

/* Pause overlay */
.fs-pause-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(6,4,0,.85);z-index:200;gap:.8rem;backdrop-filter:blur(6px);}
.fs-pause-overlay.show{display:flex;}
.fs-pause-overlay .pt{font-family:Anton,sans-serif;font-size:2rem;color:var(--amber-hi);letter-spacing:2px;}
.fs-pause-overlay .psub{font-size:.78rem;color:rgba(255,243,208,.55);letter-spacing:1px;margin-bottom:.6rem;}
.fs-pause-overlay .pb{background:var(--amber-hi);color:#060400;border:none;padding:.7rem 1.8rem;font-family:Anton,sans-serif;font-size:1.1rem;letter-spacing:1px;border-radius:6px;cursor:pointer;}
.fs-pause-overlay .pb.secondary{background:transparent;border:1px solid rgba(245,176,48,.4);color:var(--amber);}

/* Tutorial strip on start screen */
.fs-tutorial{margin-top:1rem;font-size:.68rem;color:rgba(255,243,208,.4);letter-spacing:1.2px;text-align:center;max-width:330px;line-height:1.6;padding:.5rem .8rem;border:1px solid rgba(245,176,48,.12);border-radius:6px;background:rgba(0,0,0,.25);}
.fs-tutorial b{color:var(--amber);font-weight:normal;}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}