*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--yellow: #FFD700;--red: #C0392B;--dark-red: #922B21;--orange: #E67E22;--dark: #1A0800;--white: #FFFFFF;--cream: #FFFDF5}html{height:100%}body{font-family:Fredoka,Arial Rounded MT Bold,sans-serif;background:linear-gradient(160deg,var(--red) 0%,var(--dark-red) 100%);min-height:100vh;color:var(--dark);overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ctext x='10' y='50' font-size='36' opacity='0.06'%3E🍟%3C/text%3E%3C/svg%3E");background-size:80px 80px;pointer-events:none;z-index:0}.app{max-width:820px;margin:0 auto;padding:20px 16px 40px;position:relative;z-index:1}.header{text-align:center;background:var(--yellow);border-radius:20px;padding:24px 20px 20px;margin-bottom:24px;border:4px solid var(--dark);box-shadow:0 8px 0 var(--dark),0 12px 32px #00000059;position:relative;overflow:hidden}.header-fries{position:absolute;top:0;left:0;right:0;font-size:13px;letter-spacing:3px;opacity:.25;padding:3px 0;white-space:nowrap;overflow:hidden}.header-fries.bottom{top:auto;bottom:0}.header h1{font-family:Bangers,cursive;font-size:clamp(52px,12vw,88px);line-height:1;color:var(--red);letter-spacing:4px;text-shadow:4px 4px 0 var(--dark),7px 7px 0 rgba(0,0,0,.15)}.header .tagline{font-size:17px;font-weight:500;color:var(--dark);opacity:.75;margin-top:4px}.controls-card{background:var(--white);border-radius:20px;padding:32px 28px;border:3px solid var(--dark);box-shadow:0 6px 0 var(--dark),0 10px 30px #0003}.control-group{margin-bottom:32px}.control-group:last-child{margin-bottom:0}.control-label{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}.counter{display:flex;align-items:center;justify-content:center;gap:20px}.counter-btn{width:56px;height:56px;border-radius:50%;border:3px solid var(--dark);background:var(--yellow);font-family:Bangers,cursive;font-size:32px;line-height:1;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 0 var(--dark);display:flex;align-items:center;justify-content:center;color:var(--dark)}.counter-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 var(--dark)}.counter-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--dark)}.counter-btn:disabled{opacity:.35;cursor:not-allowed}.counter-val{text-align:center}.counter-num{font-family:Bangers,cursive;font-size:72px;line-height:1;color:var(--red);text-shadow:2px 2px 0 rgba(0,0,0,.12);min-width:80px;display:block}.counter-sub{font-size:13px;color:#aaa;font-weight:500}.hunger-display{text-align:center;margin-bottom:20px}.hunger-emoji-big{font-size:72px;line-height:1;display:block;transition:transform .3s}.hunger-emoji-big.pop{animation:pop .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.hunger-label{font-size:20px;font-weight:700;margin-top:6px;color:var(--red);transition:color .3s}.hunger-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;outline:none;cursor:pointer;background:linear-gradient(to right,#66bb6a,#fdd835,#ff9800,#ef5350,#e91e63);border:2px solid var(--dark)}.hunger-slider::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:3px solid var(--dark);cursor:pointer;box-shadow:0 3px 8px #0000004d;transition:transform .15s}.hunger-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.hunger-slider::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:var(--yellow);border:3px solid var(--dark);cursor:pointer}.hunger-icons{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px}.hunger-icon{font-size:22px;transition:transform .25s,opacity .25s;opacity:.4;cursor:pointer;background:none;border:none}.hunger-icon.active{opacity:1;transform:scale(1.35)}.dorst-toggle{display:flex;gap:12px}.dorst-btn{flex:1;padding:14px 10px;font-family:Fredoka,sans-serif;font-size:18px;font-weight:600;border-radius:14px;border:3px solid var(--dark);cursor:pointer;background:#f5f5f5;color:#aaa;box-shadow:0 4px #ccc;transition:transform .12s,box-shadow .12s,background .15s,color .15s}.dorst-btn:hover:not(.active){transform:translateY(-2px);box-shadow:0 6px #ccc}.dorst-btn.active{background:#e3f2fd;color:#1565c0;border-color:#1565c0;box-shadow:0 4px #0d47a1}.dorst-btn.active:first-child{background:#fff3e0;color:#bf360c;border-color:var(--dark);box-shadow:0 4px 0 var(--dark)}.spin-btn{width:100%;margin-top:28px;padding:20px 16px;font-family:Bangers,cursive;font-size:clamp(26px,6vw,42px);letter-spacing:3px;background:var(--red);color:var(--yellow);border:4px solid var(--dark);border-radius:16px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 7px 0 var(--dark),0 10px 28px #0000004d;position:relative;overflow:hidden}.spin-btn:after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}.spin-btn:hover:after{left:150%}.spin-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 var(--dark),0 14px 36px #0000004d}.spin-btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--dark)}.spin-btn:disabled{opacity:.5;cursor:not-allowed}.results-header{text-align:center;margin-bottom:24px}.results-title{font-family:Bangers,cursive;font-size:clamp(38px,8vw,64px);letter-spacing:3px;color:var(--yellow);text-shadow:3px 3px 0 var(--dark),5px 5px 0 rgba(0,0,0,.2)}.results-subtitle{color:#ffffffb3;font-size:16px;font-weight:500;margin-top:4px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:24px}.person-card{background:var(--card-bg, #fff);border:3px solid var(--card-border, #FFD700);border-radius:18px;padding:20px;box-shadow:0 5px 20px #00000024,0 2px 6px #00000014;position:relative;overflow:hidden;opacity:0}.person-card.card-enter{animation:card-enter .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes card-enter{0%{opacity:0;transform:scale(.75) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.person-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--card-border, #FFD700)}.card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px dashed rgba(0,0,0,.08)}.card-icon{font-size:30px}.card-name{font-size:21px;font-weight:700;flex:1}.card-hunger-pill{background:var(--card-border, #FFD700);padding:4px 10px;border-radius:20px;font-size:13px;font-weight:600;border:1px solid rgba(0,0,0,.1);white-space:nowrap}.card-row{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.05)}.card-row:last-child{border-bottom:none;padding-bottom:0}.row-icon{font-size:22px;width:28px;text-align:center;flex-shrink:0;padding-top:2px}.row-body{flex:1;min-width:0}.row-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#bbb;margin-bottom:3px}.slot-val{font-size:16px;font-weight:600;color:var(--dark);min-height:22px;display:block;transition:color .2s}.slot-val.spinning{color:#ccc;filter:blur(1.5px);animation:flicker .06s linear infinite}@keyframes flicker{0%,to{opacity:.5;transform:translateY(-1px)}50%{opacity:1;transform:translateY(1px)}}.slot-val.settled{animation:settle .4s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes settle{0%{transform:translateY(-18px);opacity:0;filter:blur(4px)}65%{transform:translateY(3px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}.vlees-list{display:flex;flex-direction:column;gap:5px}.vlees-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;visibility:hidden;white-space:nowrap}.badge.burger{background:#fff3e0;color:#bf360c;border:1px solid #FFCC80}.badge.klassiek{background:#e8f5e9;color:#1b5e20;border:1px solid #A5D6A7}.badge.visible{visibility:visible}.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.act-btn{padding:14px 28px;font-family:Fredoka,sans-serif;font-size:18px;font-weight:600;border-radius:14px;border:3px solid var(--dark);cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 5px 0 var(--dark)}.act-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--dark)}.act-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--dark)}.btn-reset{background:var(--yellow);color:var(--dark)}.btn-share{background:var(--white);color:var(--dark)}.status-card{background:var(--white);border-radius:20px;padding:40px 28px;border:3px solid var(--dark);box-shadow:0 6px 0 var(--dark),0 10px 30px #0003;text-align:center;font-size:18px;font-weight:600;color:var(--dark)}.status-card.error{color:var(--red)}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(120px);background:var(--dark);color:var(--yellow);padding:13px 26px;border-radius:14px;font-size:16px;font-weight:600;transition:transform .35s cubic-bezier(.175,.885,.32,1.275);z-index:9999;pointer-events:none;box-shadow:0 8px 24px #0000004d}.toast.show{transform:translate(-50%) translateY(0)}@media (max-width: 480px){.app{padding:12px 10px 32px}.controls-card{padding:22px 18px}.cards-grid{grid-template-columns:1fr}.actions{flex-direction:column;align-items:stretch}.act-btn{text-align:center}}