:root{
  --cream:#fff3d8;--paper:#fffdf8;--ink:#4b3428;--muted:#876c5c;--accent:#ff6f7d;
  --accent2:#ffb43f;--mint:#6fd5a0;--line:#efcfb6;--shadow:0 14px 34px rgba(94,57,35,.14)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#fff7e6,#ffefcf);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible{outline:4px solid #52a9ff;outline-offset:3px}
.app{min-height:100vh;min-height:100dvh;padding:calc(10px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))}
.screen{display:none;width:100%;max-width:560px;margin:0 auto}.screen.active{display:block}.hidden{display:none!important}
.hero{text-align:center;padding:14px 0 12px}.chef-badge{font-size:70px;filter:drop-shadow(0 8px 7px rgba(90,55,35,.13))}.hero h1{font-size:42px;line-height:1;margin:4px 0 8px}.hero p{font-size:20px;font-weight:800;color:var(--muted);margin:0}
.food-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:6px 0 18px}.food-card{position:relative;min-height:134px;border-radius:28px;background:linear-gradient(145deg,#fff,#fff8ec);box-shadow:var(--shadow);border:4px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden}.food-card:after{content:"";position:absolute;width:80px;height:80px;background:#ffd66f40;border-radius:50%;right:-18px;top:-23px}.food-card:active{transform:scale(.98)}.food-card .emoji{font-size:57px;filter:saturate(1.2) contrast(1.08) drop-shadow(0 5px 3px rgba(65,40,25,.15))}.food-card .label{font-size:17px;font-weight:900}.install-note{background:#fff;border:3px dashed #e9c28c;border-radius:20px;padding:12px 14px;text-align:center;font-size:13px;font-weight:750;color:var(--muted);margin-bottom:8px}
.topbar{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:8px;margin:4px 0 10px}.icon-btn{height:50px;border-radius:18px;background:white;box-shadow:0 5px 14px rgba(92,62,45,.10);font-size:25px}.title-wrap{text-align:center}.game-title{font-size:22px;font-weight:950}.step-title{font-size:13px;font-weight:800;color:var(--muted);margin-top:2px}.progress-dots{display:flex;justify-content:center;gap:8px;margin:0 0 12px}.dot{width:12px;height:12px;border-radius:50%;background:#ead9ca;box-shadow:inset 0 0 0 2px #fff}.dot.done{background:#65cf99}.dot.active{background:#ff7b7f;transform:scale(1.28)}
.stage{display:flex;flex-direction:column;align-items:center;gap:14px}.speech{width:100%;background:white;border-radius:22px;padding:12px 15px;text-align:center;font-size:17px;font-weight:900;box-shadow:0 6px 18px rgba(92,62,45,.08)}
.ingredient-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}.ingredient{position:relative;background:white;border-radius:20px;min-height:112px;padding:7px 4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;box-shadow:0 7px 18px rgba(92,62,45,.10);border:3px solid #f3d8c3;user-select:none;touch-action:none;overflow:hidden}.ingredient:before{content:"";position:absolute;inset:7px 12px 34px;border-radius:15px;background:var(--ingredient-color,#f4d489);border:3px solid rgba(80,52,35,.25);box-shadow:inset 0 8px 12px rgba(255,255,255,.35),inset 0 -7px 12px rgba(70,40,20,.08)}.ingredient .ie{position:relative;z-index:1;font-size:35px;filter:saturate(1.35) contrast(1.12) drop-shadow(0 2px 1px #fff)}.ingredient .in{position:relative;z-index:1;font-size:11px;line-height:1.05;font-weight:950;text-align:center;background:#fff9;padding:2px 5px;border-radius:8px}.ingredient .grab{position:absolute;z-index:2;right:5px;top:4px;font-size:13px;background:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}.ingredient.used{opacity:.30;transform:scale(.92);pointer-events:none;filter:grayscale(.6)}
.drag-ingredient{position:fixed;z-index:999;width:90px;height:92px;border-radius:19px;background:white;border:4px solid #ffc55f;box-shadow:0 16px 36px #0003;display:flex;align-items:center;justify-content:center;font-size:42px;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg);transition:transform .1s}.drag-ingredient.over-bowl{transform:translate(-50%,-50%) rotate(48deg) scale(.9)}
.drop-caption{font-size:13px;font-weight:950;color:#996740;background:#fff2;border-radius:99px;padding:3px 12px;margin-bottom:-10px}.bowl-zone{position:relative;width:245px;height:174px;margin:0 auto;filter:drop-shadow(0 10px 7px rgba(70,45,30,.13))}.bowl-back{position:absolute;left:24px;right:24px;top:29px;height:91px;border-radius:50%;background:#dfeefa;border:8px solid #6fa0bd}.bowl-mix{position:absolute;left:41px;right:41px;top:46px;height:65px;border-radius:50%;background:#f1cf83;box-shadow:inset 0 8px 16px #fff7;transition:.2s}.bowl-inner{position:absolute;z-index:3;left:48px;right:48px;top:43px;min-height:56px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;font-size:21px;gap:0;pointer-events:none}.bowl-front{position:absolute;z-index:4;left:24px;right:24px;top:71px;height:91px;background:linear-gradient(#8cc2de,#6fa8c7);border-radius:0 0 105px 105px;border:7px solid #5e91b0;border-top:0}.bowl-front:after{content:"KIS SÉF";position:absolute;left:0;right:0;top:33px;text-align:center;font-weight:950;font-size:13px;color:#fff;text-shadow:0 1px 1px #46728e}.bowl-zone.ready .bowl-back{animation:bowlGlow .7s alternate 2}@keyframes bowlGlow{to{box-shadow:0 0 0 10px #7fe2ac80}}.pour-drop{position:fixed;z-index:1000;pointer-events:none;font-size:31px;animation:pourDrop .58s ease-in forwards}@keyframes pourDrop{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.2;transform:translate(-50%,75px) scale(.5)}}.counter-chip{font-size:13px;font-weight:900;background:#fff;border-radius:99px;padding:6px 12px;box-shadow:0 3px 9px #6c43251a}
.big-btn{width:100%;max-width:380px;min-height:60px;border-radius:21px;background:linear-gradient(135deg,var(--accent),#ff9d6c);color:white;font-weight:950;font-size:18px;box-shadow:0 9px 0 #d75d69,0 12px 25px rgba(216,90,100,.22);margin-bottom:8px}.big-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 5px 0 #d75d69}.big-btn:disabled{filter:grayscale(.5);opacity:.44;box-shadow:none}.big-btn.secondary{background:white;color:var(--ink);box-shadow:0 7px 0 #e8d7ca,0 10px 22px rgba(92,62,45,.10)}
.mix-area,.shape-area{width:min(92vw,410px);height:330px;background:white;border-radius:34px;box-shadow:var(--shadow);position:relative;overflow:hidden;touch-action:none}.mix-bowl{position:absolute;left:50%;top:56%;width:280px;height:180px;transform:translate(-50%,-50%);background:linear-gradient(#9bcbe2,#6aa5c5);border-radius:20px 20px 135px 135px;border:9px solid #5f92af}.batter{position:absolute;left:50%;top:48%;width:230px;height:110px;transform:translate(-50%,-50%);background:#efd390;border-radius:50%;border:5px solid #d0a85b;box-shadow:inset 0 8px 20px #fff7}.batter:after{content:"";position:absolute;left:35px;top:29px;width:28px;height:16px;border-radius:50%;background:#fff4;box-shadow:84px 15px 0 #fff4,130px -4px 0 #fff4}.spoon{position:absolute;left:50%;top:40%;font-size:79px;transform:translate(-50%,-50%) rotate(-12deg);filter:drop-shadow(0 4px 3px #0002)}
.meter{width:100%;max-width:380px;height:19px;background:#eadbd0;border-radius:12px;overflow:hidden;border:3px solid white;box-shadow:0 4px 10px rgba(92,62,45,.08)}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#64d49a,#ffc74e);transition:width .09s ease}
.shape-area{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#fff,#fff4e2)}.dough-shape{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ffe5ad,#efbf72);border:5px solid #d89c51;box-shadow:inset 0 -12px 0 rgba(154,102,50,.10),0 9px 18px #7d4b2a15;transition:width .15s,height .15s,border-radius .15s}.shape-tool{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 4px rgba(90,60,40,.18));pointer-events:none}.rolling-pin-graphic{display:block;position:relative;width:188px;height:42px;background:linear-gradient(#eab978,#c88748);border:5px solid #955e33;border-radius:25px}.rolling-pin-graphic:before,.rolling-pin-graphic:after{content:"";position:absolute;top:8px;width:47px;height:17px;background:#a86b38;border:4px solid #7b4728;border-radius:12px}.rolling-pin-graphic:before{left:-45px}.rolling-pin-graphic:after{right:-45px}.cutter-graphic{font-size:80px}.hands-graphic{font-size:76px}.ladle-graphic{font-size:76px}
.cook-visual{width:100%;max-width:410px;height:300px;border-radius:32px;background:linear-gradient(#4d4542,#292728);position:relative;overflow:hidden;box-shadow:var(--shadow);border:10px solid #796b66}.cook-icon{position:absolute;z-index:3;inset:16px 0 auto;text-align:center;font-size:51px;opacity:.95}.cook-window{position:absolute;left:45px;right:45px;bottom:28px;top:82px;background:radial-gradient(circle at 50% 100%,#ff9245aa,#251f1d 65%);border:8px solid #171617;border-radius:23px}.cook-food{position:absolute;z-index:2;left:50%;bottom:57px;transform:translateX(-50%);font-size:118px;transition:transform .25s,filter .25s}.cooking .cook-food{animation:bake 1.1s infinite alternate}.cooking .cook-icon{animation:flame .65s infinite alternate}@keyframes bake{to{transform:translateX(-50%) scale(1.08) rotate(2deg);filter:saturate(1.35)}}@keyframes flame{to{transform:scale(1.12)}}
.decorate-stage{gap:10px}.canvas-wrap{width:min(94vw,440px);aspect-ratio:1;border-radius:30px;overflow:hidden;background:white;box-shadow:var(--shadow);border:6px solid #fff}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.tool-hint{font-size:12px;font-weight:850;color:#795d4d;background:#fff7;border:2px solid #efd7c5;border-radius:99px;padding:5px 11px;text-align:center}
.topping-tray{width:100%;display:flex;gap:9px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}.topping-tray::-webkit-scrollbar{display:none}.topping{position:relative;flex:0 0 86px;height:89px;border-radius:21px;background:#fff;box-shadow:0 5px 14px rgba(92,62,45,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:4px solid #edd2bd;overflow:hidden}.topping .ti{width:49px;height:49px;display:grid;place-items:center;font-size:31px;border-radius:50%;background:var(--top-bg,#ffe5a8);border:3px solid var(--top-border,#9c6739);box-shadow:inset 0 4px 8px #fff6}.topping .tn{font-size:10px;line-height:1.05;font-weight:950;max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topping .mode{position:absolute;right:3px;top:3px;background:#4b3428;color:#fff;border-radius:99px;padding:2px 5px;font-size:8px;font-weight:900}.topping.selected{border-color:#ffaf24;outline:4px solid #ffd666;transform:translateY(-3px);box-shadow:0 8px 18px #b16e2630}
.decorate-actions{display:grid;grid-template-columns:1fr 1fr 82px;gap:8px;width:100%;align-items:center}.small-btn{min-height:53px;background:white;border-radius:18px;font-weight:900;box-shadow:0 5px 0 #e8d7ca}.camera-btn{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,#ff697a,#ffb640);font-size:35px;box-shadow:0 7px 0 #d96661}
.celebrate{text-align:center;font-size:22px;font-weight:950;margin-top:8px}.snapshot{width:min(90vw,410px);aspect-ratio:1;object-fit:cover;background:white;border-radius:28px;border:8px solid white;box-shadow:var(--shadow)}.save-hint{text-align:center;color:var(--muted);font-size:14px;line-height:1.35;max-width:380px;margin:0}.final-actions{width:100%;display:flex;flex-direction:column;gap:6px;align-items:center}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#4a3a31;color:white;padding:12px 16px;border-radius:16px;font-weight:850;opacity:0;pointer-events:none;transition:.2s;z-index:2000;max-width:88vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){.app{padding-top:24px}.food-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}