@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap'); :root{--orange:#ef8738;--orange-dark:#c96025;--cream:#fff8ed;--ink:#283a37;--teal:#176d68;--muted:#71807a;--line:#f0e5d7;--white:#fff;--shadow:0 12px 35px #49321a12} *{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;border:0}.topbar{height:76px;padding:12px max(20px,calc((100vw - 1040px)/2));display:flex;align-items:center;gap:12px;background:#fffdf8;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brandmark{width:44px;height:44px;border-radius:15px;background:#ffead2;display:grid;place-items:center;font-size:24px}.brand{font-weight:800;letter-spacing:-.4px}.tagline{font-size:11px;color:var(--muted)}.topbar .quiet{margin-left:auto}main{max-width:1040px;margin:28px auto;padding:0 20px;min-height:70vh}.login{max-width:430px;margin:8vh auto}.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}h1,h2,h3,p{margin-top:0}h1{font:700 clamp(30px,5vw,44px) 'Playfair Display',serif;letter-spacing:-.8px;margin-bottom:8px}h2{font:700 24px 'Playfair Display',serif;margin:0}h3{font-size:18px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--orange-dark);margin-bottom:9px}.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.welcome{display:flex;justify-content:space-between;align-items:center;padding:18px 0 26px}.welcome p{margin-bottom:0}.round-icon{width:68px;height:68px;border-radius:22px;background:#fbe4c8;display:grid;place-items:center;font-size:34px}.tabs{display:flex;gap:8px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:24px}.tab{white-space:nowrap;background:transparent;padding:12px 15px;color:var(--muted);font-weight:700;border-bottom:3px solid transparent}.tab.active{color:var(--teal);border-color:var(--orange)}.count{background:#fbe4c8;color:var(--orange-dark);border-radius:20px;padding:2px 6px;font-size:10px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 15px}.chips{display:flex;gap:8px;overflow:auto;margin-bottom:18px}.chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 14px;color:var(--muted);white-space:nowrap}.chip.active{background:var(--teal);color:#fff;border-color:var(--teal)}.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}.food-card{background:#fff;border:1px solid var(--line);border-radius:19px;overflow:hidden;box-shadow:var(--shadow)}.food-card img{width:100%;height:155px;object-fit:cover;background:#f4e6d5}.food-placeholder{height:155px;display:grid;place-items:center;background:#f8e9d7;font-size:44px}.food-info{padding:15px}.food-info h3{margin:0 0 6px}.food-info p{font-size:12px;line-height:1.5;color:var(--muted);min-height:36px;margin-bottom:12px}.price-row{display:flex;align-items:center;justify-content:space-between;font-weight:800}.price{color:var(--teal)}.add{background:#ffead2;color:#a94f1f;border-radius:12px;padding:8px 12px;font-weight:800}.cart{margin:25px 0;max-width:650px}.cart-line,.total-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.cart-line button{background:#fff0e4;color:#a94f1f;border-radius:8px;padding:3px 8px}.total-row{font-size:18px;border:0;padding:17px 0}.total-row strong{color:var(--teal)}label{display:block;font-size:12px;font-weight:700;margin:14px 0;color:#53635d}input,textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid #e8ddd0;border-radius:11px;background:#fff;color:var(--ink);outline:none}input:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px #ef873822}.inline{display:flex;align-items:center;gap:8px}.inline input{width:auto;margin:0}.primary{background:var(--orange);color:#fff;padding:11px 17px;border-radius:12px;font-weight:800}.primary:hover{background:var(--orange-dark)}.full{width:100%;padding:14px}.quiet{background:transparent;color:var(--teal);font-weight:700;padding:8px}.stack{display:grid;gap:12px}.order-card,.manage-row{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px}.order-top,.manage-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.status{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:30px;padding:6px 9px;background:#fff0d8;color:#9b5b18}.status.accepted,.status.ready{background:#dff3e9;color:#176d50}.status.preparing{background:#e4efff;color:#315d9b}.status.declined{background:#fde5e2;color:#a33b32}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button{font-size:12px}.manage-row img{width:54px;height:54px;border-radius:12px;object-fit:cover}.manage-info{flex:1}.manage-info strong{display:block}.error{color:#b43c31;font-size:12px}.hidden{display:none!important}footer{text-align:center;padding:25px;color:#9a9b8e;font-size:11px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 18px;border-radius:30px;z-index:10;box-shadow:var(--shadow)}@media(max-width:560px){main{margin:15px auto;padding:0 14px}.panel{padding:18px}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.food-card img,.food-placeholder{height:115px}.food-info{padding:11px}.food-info h3{font-size:14px}.food-info p{font-size:11px;min-height:48px}.add{padding:7px 9px}.welcome{padding-top:12px}.round-icon{width:54px;height:54px;font-size:27px}} /* Phone-first layout: no horizontal page overflow, readable controls. */ html,body{width:100%;max-width:100%;overflow-x:hidden} main,.panel,.welcome,.menu-grid,.food-card,.manage-row,.order-card{min-width:0} img{max-width:100%} .topbar{height:auto;min-height:68px;padding:10px 14px;gap:9px} .topbar>div:nth-child(2){min-width:0;flex:1} .brand{font-size:clamp(14px,4.3vw,18px)} .tagline{font-size:10px} .topbar .quiet{flex-shrink:0;font-size:12px;padding:7px} @media(max-width:600px){ main{width:100%;max-width:100%;margin:10px auto;padding:0 12px} h1{font-size:clamp(27px,8vw,36px)} .welcome{gap:8px} .welcome>div:first-child{min-width:0} .round-icon{flex-shrink:0;width:46px;height:46px} .tabs,.chips{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .tab{padding:12px 11px;font-size:13px} .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .food-card{min-width:0} .food-info{padding:10px} .price-row{gap:5px;flex-wrap:wrap} .food-info p{overflow-wrap:anywhere} .manage-row,.order-top{flex-wrap:wrap;align-items:flex-start} .actions{width:100%} .actions button{min-height:40px} input,textarea{font-size:16px;max-width:100%} .panel{padding:16px;border-radius:16px} .login{margin:22px auto} } @media(max-width:360px){ .menu-grid{grid-template-columns:1fr} .food-card img,.food-placeholder{height:170px} } /* Readable phone typography: avoid tiny desktop-style labels and two-column cards. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{font-size:17px;line-height:1.5} @media(max-width:650px){ main{padding:0 16px} .brand{font-size:19px} .tagline{font-size:13px} h1{font-size:clamp(31px,8vw,39px);line-height:1.16} h2{font-size:26px;line-height:1.25} h3,.food-info h3{font-size:21px} p,.muted,.food-info p{font-size:16px;line-height:1.5} .eyebrow,.tiny,.small,.tagline{font-size:13px} label{font-size:16px} input,textarea,select{font-size:17px;min-height:48px} button,.tab,.chip,.add,.quiet,.primary,.actions button{font-size:16px;min-height:44px} .topbar .quiet{font-size:15px} .count,.status{font-size:13px} .menu-grid{grid-template-columns:minmax(0,1fr);gap:14px} .food-card img,.food-placeholder{height:190px} .food-info{padding:17px} .food-info p{min-height:0;margin-bottom:14px} .price-row{font-size:18px} .panel,.order-card,.manage-row{padding:18px} .order-top{gap:10px} footer{font-size:13px} .toast{max-width:calc(100vw - 24px);font-size:15px} } .choice-label{display:block;margin:10px 0;font-weight:650}.item-choice,.item-request{display:block;width:100%;box-sizing:border-box;min-height:44px;margin-top:6px;padding:10px;border:1px solid #ddd0c4;border-radius:11px;background:#fff;color:#332c26;font:inherit}.unavailable-card{opacity:.82}.unavailable-label{display:inline-block;padding:7px 10px;border-radius:9px;background:#fce9e4;color:#a33b32;font-size:14px}.request-line{display:block;font-size:.83em;font-weight:400;white-space:pre-wrap;overflow-wrap:anywhere} /* Multi-select toppings and flavor stock editor */ .multi-choice,.stock-editor{display:flex;flex-direction:column;gap:9px;margin:12px 0;} .multi-option{padding:8px 10px;border:1px solid var(--line,#ddd);border-radius:10px;} .multi-option:has(input:disabled){opacity:.55;} .stock-editor{padding:12px;border:1px solid var(--line,#ddd);border-radius:12px;} /* Compact menu: tap the item to reveal its customizations. */ .menu-details{display:block} .menu-summary{display:block;cursor:pointer;list-style:none;outline-offset:-3px} .menu-summary::-webkit-details-marker{display:none} .menu-summary .food-info p{min-height:0} .compact-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800} .expand-hint{color:var(--orange-dark);font-size:12px;white-space:nowrap} .expand-arrow{display:inline-block;transition:transform .2s} .menu-details[open] .expand-arrow{transform:rotate(180deg)} .menu-summary:focus-visible{outline:3px solid var(--orange);border-radius:15px} .menu-customize{border-top:1px solid var(--line);padding:12px 15px 16px} .menu-customize .price-row{margin-top:12px;gap:8px;flex-wrap:wrap} @media(max-width:560px){.menu-customize{padding:10px}.expand-hint{font-size:11px}} /* Global stock manager */ .stock-match-row{display:flex;gap:12px;align-items:center;padding:11px 8px;border-bottom:1px solid rgba(120,120,120,.18);cursor:pointer} .stock-match-row input{flex:0 0 auto;width:19px;height:19px} #stockIngredientList{margin-top:14px} #stockIngredientList .manage-row{flex-wrap:wrap;gap:8px} #stockIngredientList .manage-info{min-width:140px;flex:1} #stockMatches{max-height:360px;overflow:auto;margin:12px 0} /* Owner cooking checklist */ .kitchen-checklist{margin:14px 0;padding:12px;border:1px solid var(--border,#ded7ca);border-radius:14px;background:rgba(128,128,128,.045)} .kitchen-checklist-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:.92rem} .kitchen-check-row{display:flex;align-items:flex-start;gap:12px;padding:9px 2px;border-top:1px solid rgba(128,128,128,.15);cursor:pointer} .kitchen-check-row input{width:22px;height:22px;flex-shrink:0;accent-color:#27845b;margin-top:1px} .kitchen-check-row span{display:flex;flex-direction:column;gap:3px;min-width:0} .kitchen-check-row small{font-size:.79rem;opacity:.78} .kitchen-checked span{text-decoration:line-through;opacity:.56} /* Visual order progress — both owner and customer */ .order-progress{margin:14px 0 16px;padding:14px 12px 10px;background:rgba(112,135,112,.055);border:1px solid rgba(112,135,112,.17);border-radius:14px} .order-progress-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;gap:0} .order-progress-track:before{content:"";position:absolute;top:15px;left:12.5%;right:12.5%;height:3px;background:#d9d4ca;z-index:0} .order-progress-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;min-width:0} .order-progress-dot{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:2px solid #c6c0b5;background:#fff;color:#746e63;font-size:13px;font-weight:800;box-sizing:border-box} .order-progress-step.is-complete .order-progress-dot{background:#25845d;border-color:#25845d;color:white} .order-progress-step.is-current .order-progress-dot{background:#fff2df;border-color:#bd681b;color:#8c480d;box-shadow:0 0 0 3px rgba(189,104,27,.10)} .order-progress-step.is-current:last-child .order-progress-dot{background:#25845d;border-color:#25845d;color:white} .order-progress-label{font-size:12px;font-weight:650;color:#777068;overflow-wrap:anywhere} .order-progress-step.is-complete .order-progress-label{color:#287454} .order-progress-step.is-current .order-progress-label{color:#9a4f14;font-weight:800} .order-progress-caption{font-size:12px;color:#615d56;text-align:center;margin:11px 0 0} .order-progress-declined{display:flex;align-items:center;gap:10px;background:#fff0ec;border-color:#e7b7ad;color:#973b2f} .order-progress-declined>span:first-child{font-size:22px;font-weight:bold} .order-progress-declined>span:last-child{display:flex;flex-direction:column;gap:3px} .order-progress-declined small{font-size:12px} @media(max-width:400px){.order-progress{padding:12px 5px 9px}.order-progress-dot{width:29px;height:29px}.order-progress-track:before{top:14px}.order-progress-label{font-size:10px}} /* Favorite menu items */ .favorite-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .favorite-title h3{flex:1;min-width:0} .favorite-heart{flex:0 0 auto;border:1px solid #edd4cc;border-radius:50%;width:35px;height:35px;background:#fff8f3;color:#a24d3b;font-size:24px;line-height:1;display:grid;place-items:center;padding:0} .favorite-heart.selected{background:#ffe8e4;color:#c63e4e;border-color:#f4b8bc} .favorite-heart:disabled{opacity:.5} .favorite-card .price-row{flex-wrap:wrap;gap:8px} .menu-search-wrap{margin-bottom:14px;max-width:560px}.menu-search-wrap label{margin:0 0 6px}.menu-search-wrap input{margin:0}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}.stats-tile{display:flex;flex-direction:column;gap:10px}.stats-tile span{font-size:12px;color:var(--muted)}.stats-tile strong{font-size:28px;color:var(--teal)}.stats-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}.stats-list-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.stats-list-row strong{color:var(--teal)} #rewardHeader{margin-left:auto;border:1px solid #d9a14b;border-radius:24px;background:#fff4d9;color:#7e4a00;font-weight:800;white-space:nowrap}#rewardHistoryList .panel{margin-bottom:10px}#rewardRates .panel{margin-bottom:10px}#rewardItems .panel{margin-bottom:10px} /* Premium rewards */ .reward-card{overflow:hidden}.reward-photo{display:block;width:100%;max-height:210px;object-fit:cover;border-radius:12px;margin-bottom:12px}.reward-options{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}.reward-options label{font-weight:normal}.reward-card textarea{width:100%} /* Collapsed premium reward cards mirror the standard menu */ #rewardItems .reward-card{margin-bottom:10px} #rewardItems .reward-card .menu-customize{padding-top:12px} #rewardItems .reward-card .reward-options{margin-top:8px} /* Rewards Bank: collapsed by default, expand on tap */ #rewardItems details.reward-card{padding:0;overflow:hidden} #rewardItems .reward-summary{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;list-style:none} #rewardItems .reward-summary::-webkit-details-marker{display:none} #rewardItems .reward-summary-photo{width:84px;height:84px;object-fit:cover;border-radius:10px;flex-shrink:0} #rewardItems .reward-summary-text{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1} #rewardItems .reward-chevron{font-size:24px;transition:transform .15s} #rewardItems details[open] .reward-chevron{transform:rotate(180deg)} #rewardItems details.reward-card .menu-customize{padding:0 14px 14px} #rewardItems .reward-option-group{margin:10px 0} /* Expandable linked selections in Global Stock Manager */ .stock-ingredient-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff} .stock-ingredient-card>.manage-row{border:0;border-radius:0;box-shadow:none} .stock-linked-list{padding:4px 16px 12px;border-top:1px solid var(--line);background:#fffdf9} .stock-linked-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .stock-linked-row:last-child{border-bottom:0} .stock-linked-name{min-width:0;overflow-wrap:anywhere;font-size:14px} .stock-unlink{flex-shrink:0;color:#a33b32} @media(max-width:560px){.stock-linked-row{align-items:flex-start}.stock-linked-name{font-size:15px}} /* Modern Bistro visual system — presentation only; business logic unchanged. */ :root{--orange:#b96d3a;--orange-dark:#914b27;--cream:#faf4e9;--ink:#173b30;--teal:#174e3b;--muted:#66796e;--line:#e8ddcc;--white:#fffdf8;--shadow:0 14px 34px rgba(26,51,38,.09)} body{background:radial-gradient(circle at 90% 0%,#f1e2c9 0,transparent 35%),var(--cream)} .topbar{background:#123e2f;color:#fff9e9;border-bottom:2px solid #b78b5e;box-shadow:0 5px 24px #123e2f24} .topbar .brand{font-family:'Playfair Display',serif;font-size:22px;color:#fff6e4} .topbar .tagline{color:#dfc7a4}.topbar .quiet{color:#f8e5c4} .brandmark{background:#f7e9d0;border:1px solid #e7bb78;overflow:hidden}.brandmark img{width:100%;height:100%;object-fit:cover} .welcome{background:linear-gradient(115deg,#123e2f,#24614b);border-radius:24px;padding:24px 28px;margin:10px 0 20px;color:#fff9eb;box-shadow:var(--shadow)} .welcome .muted{color:#e6d7bd}.welcome .eyebrow{color:#efc38d}.welcome h1{color:#fff9eb} .round-icon{width:88px;height:88px;background:#dfc6a0;border:2px solid #d5a875;overflow:hidden;box-shadow:0 6px 18px #0002}.round-icon img{width:100%;height:100%;object-fit:cover} .panel,.order-card,.manage-row,.food-card{background:#fffdf8;border-color:#e7dac7;box-shadow:var(--shadow)} .panel,.order-card{border-radius:22px}.food-card{border-radius:20px;transition:transform .2s,box-shadow .2s}.food-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px #123e2f1c} .tabs{border-bottom:1px solid #d7c7ae}.tab.active{color:#174e3b;border-color:#bd7b45;background:#e9efdf;border-radius:12px 12px 0 0} .primary{background:linear-gradient(135deg,#1c5b43,#113d2f);color:#fff8e8;box-shadow:0 4px 12px #153e3026}.primary:hover{background:#27694e} .chip.active{background:#174e3b}.chip{border-color:#e5d6c1;background:#fffaf2} #rewardHeader{border-radius:999px;background:#e9cf9c;color:#163b2e;padding:8px 12px;font-weight:800;box-shadow:inset 0 0 0 1px #b88b52} #rewardBalance,#ownerRewardBalance{color:#8d542b;font-family:'Playfair Display',serif;font-size:27px} #rewardsTab>.panel{background:linear-gradient(160deg,#fffdf8,#fbf0db)} .status.preparing{background:#f8e5ce;color:#94501f}.status.ready{background:#d8ecdb;color:#1c6844} .order-progress{background:#f7f3e9;border:1px solid #e6d9c4;border-radius:16px;padding:16px} .meter-heading{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:9px;color:#184b38}.meter-heading span{font-variant-numeric:tabular-nums;font-weight:800;color:#a46130} .order-meter{height:13px;border-radius:99px;background:#e7ded0;overflow:hidden;box-shadow:inset 0 2px 4px #0000000d} .order-meter-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#b66c38,#e4a866);transition:width .75s cubic-bezier(.2,.8,.2,1);position:relative} .order-meter-fill:after{content:'';position:absolute;right:0;top:0;bottom:0;width:18px;background:#ffffff35;filter:blur(6px)} .order-meter-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px;text-align:center;font-size:11px;color:#738076}.order-meter-labels .current{color:#a46130;font-weight:800} .order-progress-caption{text-align:left;font-size:12px;margin:9px 0 0;color:#62746a} .kitchen-checklist{background:#f9f6ee;border:1px solid #e8dac7;border-radius:18px;padding:16px} .kitchen-progress-head{display:flex;gap:18px;align-items:center;margin-bottom:16px} .kitchen-ring{--pct:0%;width:112px;height:112px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#216448 var(--pct),#e5ddd0 0);transition:background .5s} .kitchen-ring>div{width:88px;height:88px;background:#fffdf8;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 0 0 1px #f0e8dc} .kitchen-ring strong{font-size:25px;color:#174e3b;line-height:1.1}.kitchen-ring small{font-size:10px;color:#6e776d} .kitchen-progress-copy strong{font-family:'Playfair Display',serif;font-size:19px;color:#1c4b38}.kitchen-progress-copy p{font-size:12px;color:#66796e;margin:4px 0} #statsTab .panel,#rewardManagerTab .panel{border-top:3px solid #bb8452} @media(max-width:600px){.topbar .brand{font-size:17px}.welcome{padding:17px;border-radius:19px}.round-icon{width:65px;height:65px}.kitchen-ring{width:90px;height:90px}.kitchen-ring>div{width:70px;height:70px}.kitchen-ring strong{font-size:20px}.kitchen-progress-head{gap:10px}.order-meter-labels{font-size:10px}} @media(prefers-reduced-motion:reduce){.order-meter-fill,.food-card,.kitchen-ring{transition:none!important}} /* Modern Bistro: top five whole-item order chart */ .top5-panel{margin:0 0 18px;padding:18px 20px}.top5-panel h3{margin:0 0 5px;color:#123e2f}.top5-panel>p{margin:0 0 17px}.top5-chart{display:grid;gap:16px}.top5-row{min-width:0}.top5-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:14px}.top5-name{min-width:0;overflow-wrap:anywhere}.top5-name b{color:#b97946;margin-right:5px}.top5-heading strong{color:#123e2f;font-variant-numeric:tabular-nums}.top5-track{height:15px;background:#e9e0d1;border-radius:999px;overflow:hidden}.top5-fill{height:100%;width:var(--bar-width);border-radius:999px;background:linear-gradient(90deg,#1c5942,#ba7b4b);transform:scaleX(0);transform-origin:left;animation:top5-grow .8s cubic-bezier(.2,.75,.3,1) var(--bar-delay) forwards}@keyframes top5-grow{to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){.top5-fill{animation:none;transform:none}} /* Top 5 whole-item quantities: vertical columns */ .top5-chart{display:flex;align-items:stretch;justify-content:space-around;gap:clamp(5px,2vw,18px);min-height:260px;padding:8px 0 0;overflow-x:auto} .top5-chart:has(>p){min-height:0;display:block} .top5-column{flex:1 1 0;min-width:0;max-width:155px;display:flex;flex-direction:column;align-items:center;text-align:center} .top5-value{font-size:14px;color:#123e2f;margin-bottom:8px;font-variant-numeric:tabular-nums} .top5-column-track{height:180px;width:min(100%,64px);background:#e9e0d1;border-radius:10px 10px 4px 4px;display:flex;align-items:flex-end;overflow:hidden} .top5-column-fill{width:100%;height:var(--bar-height);background:linear-gradient(0deg,#1c5942,#ba7b4b);border-radius:9px 9px 2px 2px;transform:scaleY(0);transform-origin:bottom;animation:top5-rise .8s cubic-bezier(.2,.75,.3,1) var(--bar-delay) forwards} .top5-column-label{font-size:clamp(10px,2.4vw,13px);line-height:1.25;margin-top:9px;overflow-wrap:anywhere;hyphens:auto;color:#123e2f;max-width:100%} @keyframes top5-rise{to{transform:scaleY(1)}} @media(prefers-reduced-motion:reduce){.top5-column-fill{animation:none;transform:none}} /* Modern Bistro chart: alternating forest green and copper-orange columns */ .top5-column:nth-child(odd) .top5-column-fill{background:linear-gradient(0deg,#123e2f,#267251)} .top5-column:nth-child(even) .top5-column-fill{background:linear-gradient(0deg,#b45d2d,#ed984b)} .top5-column-track{background:#f0e6d7} /* Optional seasonal layer: all existing Modern Bistro layout and functionality retained. */ .autumn-leaves,.autumn-header-label,.autumn-welcome{display:none} html[data-season="autumn"]{--autumn-orange:#b96332;--autumn-gold:#e5ac58} html[data-season="autumn"] body{background-color:#fbf4e9} html[data-season="autumn"] .topbar{position:relative;overflow:hidden;background:linear-gradient(115deg,#173e2d,#34543b 65%,#764729);isolation:isolate} html[data-season="autumn"] .topbar>*:not(.autumn-leaves){position:relative;z-index:2} html[data-season="autumn"] .autumn-header-label{display:block;font-size:.69rem;letter-spacing:.07em;color:#f5c784;margin-top:3px;font-weight:700} html[data-season="autumn"] .autumn-welcome{display:block;color:#9a562d;font-family:Georgia,serif;font-size:1rem;margin:.2rem 0 .8rem} html[data-season="autumn"] .autumn-leaves{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} html[data-season="autumn"] .autumn-leaves span{position:absolute;top:-34px;left:var(--leaf-x);font-size:var(--leaf-size);opacity:0;animation:autumn-drift var(--leaf-speed) linear infinite;animation-delay:var(--leaf-delay);filter:drop-shadow(0 2px 2px #0003)} html[data-season="autumn"] .autumn-leaves span:nth-child(1){--leaf-x:7%;--leaf-size:17px;--leaf-speed:8s;--leaf-delay:-2s} html[data-season="autumn"] .autumn-leaves span:nth-child(2){--leaf-x:23%;--leaf-size:13px;--leaf-speed:11s;--leaf-delay:-7s} html[data-season="autumn"] .autumn-leaves span:nth-child(3){--leaf-x:39%;--leaf-size:19px;--leaf-speed:10s;--leaf-delay:-4s} html[data-season="autumn"] .autumn-leaves span:nth-child(4){--leaf-x:54%;--leaf-size:14px;--leaf-speed:9s;--leaf-delay:-8s} html[data-season="autumn"] .autumn-leaves span:nth-child(5){--leaf-x:68%;--leaf-size:16px;--leaf-speed:12s;--leaf-delay:-5s} html[data-season="autumn"] .autumn-leaves span:nth-child(6){--leaf-x:82%;--leaf-size:12px;--leaf-speed:10s;--leaf-delay:-1s} html[data-season="autumn"] .autumn-leaves span:nth-child(7){--leaf-x:94%;--leaf-size:16px;--leaf-speed:13s;--leaf-delay:-9s} @keyframes autumn-drift{0%{transform:translate3d(-7px,-25px,0) rotate(0deg);opacity:0}15%{opacity:.85}85%{opacity:.85}100%{transform:translate3d(26px,180px,0) rotate(220deg);opacity:0}} html[data-season="autumn"] .panel{border-color:#e9d9bf} html[data-season="autumn"] .primary{background-color:#a95c32} html[data-season="autumn"] .primary:hover{background-color:#8e4b2b} html[data-season="autumn"] .seasonal-settings{border-top:4px solid #c77a3c} html[data-season="autumn"] .login{background-image:linear-gradient(110deg,rgba(255,246,226,.9),rgba(255,248,236,.78)),url('/assets/bistro-board.jpg');background-size:cover;background-position:center} @media(prefers-reduced-motion:reduce){html[data-season="autumn"] .autumn-leaves span{animation:none!important;opacity:.5;top:14px;transform:none}} /* Autumn Harvest v33: visible seasonal palette and uncropped header emblem. */ .topbar .brandmark{flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:3px;border-radius:14px;overflow:hidden} .topbar .brandmark img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:9px} html[data-season="autumn"]{--orange:#c26b34;--orange-dark:#8e4928;--cream:#fff1dd;--line:#e6c9a6;--muted:#7a604d} html[data-season="autumn"] body{background:radial-gradient(circle at 10% 4%,#f3d2a4 0,transparent 35%),radial-gradient(circle at 90% 20%,#f6e2c1 0,transparent 40%),#fff1dd} html[data-season="autumn"] .welcome{background:linear-gradient(115deg,#713c27,#b36532 58%,#dc934a);border:1px solid #edbd79;box-shadow:0 12px 28px #7a3f2630} html[data-season="autumn"] .welcome .eyebrow{color:#ffe3a2} html[data-season="autumn"] .welcome .muted{color:#fff0d8} html[data-season="autumn"] .panel,html[data-season="autumn"] .order-card,html[data-season="autumn"] .manage-row,html[data-season="autumn"] .food-card,html[data-season="autumn"] .stock-ingredient-card{background:#fff9ee;border-color:#e8caa6} html[data-season="autumn"] .tab.active{color:#91481f;border-color:#c47734;background:#f9e2bf} html[data-season="autumn"] .chip.active{background:#aa602e;border-color:#aa602e;color:#fff} html[data-season="autumn"] .chip{background:#fff6e8;border-color:#e7caa8} html[data-season="autumn"] .primary{background:linear-gradient(135deg,#d07a3d,#9c4d27);color:#fffaf1} html[data-season="autumn"] .primary:hover{background:#8e4928} html[data-season="autumn"] .add,html[data-season="autumn"] .count{background:#f6d6a9;color:#88441f} html[data-season="autumn"] .eyebrow,html[data-season="autumn"] .price{color:#a55b2a} html[data-season="autumn"] .order-meter-fill{background:linear-gradient(90deg,#a74c27,#e4a64e)} html[data-season="autumn"] .kitchen-ring{background:conic-gradient(#c87837 var(--pct),#ecd9be 0)} html[data-season="autumn"] #rewardHeader{background:#f5d393;color:#633a1f} html[data-season="autumn"] #rewardsTab>.panel{background:linear-gradient(145deg,#fff7e8,#f8dfb9)} html[data-season="autumn"] #statsTab .panel,html[data-season="autumn"] #rewardManagerTab .panel{border-top-color:#ce8741} html[data-season="autumn"] .top5-column:nth-child(odd) .top5-column-fill{background:linear-gradient(0deg,#8d4828,#d4843e)} html[data-season="autumn"] .top5-column:nth-child(even) .top5-column-fill{background:linear-gradient(0deg,#bd702c,#eeb35b)} html[data-season="autumn"] .top5-column-track{background:#edd9bc} html[data-season="autumn"] .seasonal-settings{background:linear-gradient(140deg,#fff6e5,#f8e1bd)} @media(max-width:560px){.topbar .brandmark{flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:3px}} /* v34: display the emblem directly, without an enclosing tile or inset. */ .topbar .brandmark{flex:0 0 60px;width:60px;height:60px;min-width:60px;min-height:60px;padding:0;margin:0;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;display:flex;align-items:center;justify-content:center} .topbar .brandmark img{width:60px;height:60px;max-width:none;object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;background:transparent} @media(max-width:560px){.topbar .brandmark{flex:0 0 54px;width:54px;height:54px;min-width:54px;min-height:54px}.topbar .brandmark img{width:54px;height:54px}} /* Winter Wonderland v35: scoped seasonal styling; no app behavior changes. */ .winter-snow,.winter-header-label,.winter-welcome{display:none} html[data-season="winter"]{--orange:#bc3d42;--orange-dark:#90252d;--cream:#f4f9f7;--line:#cbdfe0;--muted:#536f76} html[data-season="winter"] body{background:radial-gradient(circle at 0 0,#d9eff4 0,transparent 35%),radial-gradient(circle at 100% 20%,#f7e6e4 0,transparent 38%),#f4f9f7} html[data-season="winter"] .topbar{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#103e30,#165742 58%,#254c6d)} html[data-season="winter"] .topbar>*:not(.winter-snow){position:relative;z-index:2} html[data-season="winter"] .winter-header-label{display:block;font-size:.69rem;letter-spacing:.05em;color:#d3efff;margin-top:3px;font-weight:700} html[data-season="winter"] .winter-welcome{display:block;color:#fff5ec;font-family:Georgia,serif;font-size:1rem;margin:.2rem 0 .8rem} html[data-season="winter"] .winter-snow{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} html[data-season="winter"] .winter-snow span{position:absolute;left:var(--snow-x);top:-26px;color:#e6f7ff;font-size:var(--snow-size);text-shadow:0 0 5px #ffffffa8;opacity:0;animation:winter-fall var(--snow-speed) linear infinite;animation-delay:var(--snow-delay)} html[data-season="winter"] .winter-snow span:nth-child(1){--snow-x:20%;--snow-size:13px;--snow-speed:10s;--snow-delay:-5s} html[data-season="winter"] .winter-snow span:nth-child(2){--snow-x:37%;--snow-size:16px;--snow-speed:13s;--snow-delay:-10s} html[data-season="winter"] .winter-snow span:nth-child(3){--snow-x:54%;--snow-size:19px;--snow-speed:8s;--snow-delay:-2s} html[data-season="winter"] .winter-snow span:nth-child(4){--snow-x:71%;--snow-size:11px;--snow-speed:11s;--snow-delay:-7s} html[data-season="winter"] .winter-snow span:nth-child(5){--snow-x:88%;--snow-size:14px;--snow-speed:14s;--snow-delay:-12s} html[data-season="winter"] .winter-snow span:nth-child(6){--snow-x:8%;--snow-size:17px;--snow-speed:9s;--snow-delay:-4s} html[data-season="winter"] .winter-snow span:nth-child(7){--snow-x:25%;--snow-size:20px;--snow-speed:12s;--snow-delay:-9s} html[data-season="winter"] .winter-snow span:nth-child(8){--snow-x:42%;--snow-size:12px;--snow-speed:7s;--snow-delay:-1s} html[data-season="winter"] .winter-snow span:nth-child(9){--snow-x:59%;--snow-size:15px;--snow-speed:10s;--snow-delay:-6s} html[data-season="winter"] .winter-snow span:nth-child(10){--snow-x:76%;--snow-size:18px;--snow-speed:13s;--snow-delay:-11s} html[data-season="winter"] .winter-snow span:nth-child(11){--snow-x:93%;--snow-size:10px;--snow-speed:8s;--snow-delay:-3s} html[data-season="winter"] .winter-snow span:nth-child(12){--snow-x:13%;--snow-size:13px;--snow-speed:11s;--snow-delay:-8s} @keyframes winter-fall{0%{transform:translate3d(-9px,-22px,0) rotate(0deg);opacity:0}16%{opacity:.82}85%{opacity:.82}100%{transform:translate3d(23px,175px,0) rotate(160deg);opacity:0}} html[data-season="winter"] .welcome{background:linear-gradient(115deg,#123f34,#24624b 60%,#376783);border:1px solid #8db7ba;box-shadow:0 12px 28px #173e4630} html[data-season="winter"] .welcome .eyebrow{color:#f3c9bf} html[data-season="winter"] .welcome .muted{color:#e7f4f5} html[data-season="winter"] .panel,html[data-season="winter"] .order-card,html[data-season="winter"] .manage-row,html[data-season="winter"] .food-card,html[data-season="winter"] .stock-ingredient-card{background:#fffefe;border-color:#c9dedc} html[data-season="winter"] .tab.active{color:#a72d39;border-color:#bd4650;background:#fbe8e7} html[data-season="winter"] .chip.active{background:#a93240;border-color:#a93240;color:white} html[data-season="winter"] .chip{background:#f3faf9;border-color:#c5dfe0} html[data-season="winter"] .primary{background:linear-gradient(135deg,#be404b,#8e2838);color:#fff} html[data-season="winter"] .primary:hover{background:#862734} html[data-season="winter"] .add,html[data-season="winter"] .count{background:#e4f1f5;color:#215b6d} html[data-season="winter"] .eyebrow,html[data-season="winter"] .price{color:#ad3443} html[data-season="winter"] .order-meter-fill{background:linear-gradient(90deg,#1d7959,#b53d47)} html[data-season="winter"] .kitchen-ring{background:conic-gradient(#26765c var(--pct),#d8e9ec 0)} html[data-season="winter"] #rewardHeader{background:#f4d9dc;color:#82333d} html[data-season="winter"] #rewardsTab>.panel{background:linear-gradient(145deg,#fff,#e8f3f5)} html[data-season="winter"] .top5-column:nth-child(odd) .top5-column-fill{background:linear-gradient(0deg,#175c47,#42a27d)} html[data-season="winter"] .top5-column:nth-child(even) .top5-column-fill{background:linear-gradient(0deg,#912d3a,#d75861)} html[data-season="winter"] .top5-column-track{background:#dcebef} html[data-season="winter"] .seasonal-settings{background:linear-gradient(135deg,#f8fdfc,#e2f1f5);border-top:4px solid #bd424b} /* Garland across the top edge of each tab's main title; presents at the end. */ html[data-season="winter"] #appView>section>.section-head:first-child{position:relative;padding-top:27px;margin-top:9px} html[data-season="winter"] #appView>section>.section-head:first-child::before{content:"";position:absolute;top:0;left:0;right:0;height:19px;border-radius:50% 50% 45% 45%;background:repeating-linear-gradient(115deg,transparent 0 7px,#1e6d4b 8px 11px,#3c9867 12px 16px,transparent 17px 23px);border-bottom:3px solid #a83b43;opacity:.9;pointer-events:none} html[data-season="winter"] #appView>section>.section-head:first-child h2::after{content:" 🎁";font-size:.7em;white-space:nowrap} html[data-season="winter"] #appView>section>.section-head:first-child h2{color:#235a49} html[data-season="winter"] #stockTab .section-head:first-child,html[data-season="winter"] #settingsTab .seasonal-settings{border-top-color:#b83e48} @media(prefers-reduced-motion:reduce){html[data-season="winter"] .winter-snow span{animation:none!important;opacity:.45;top:12px;transform:none}} /* Winter warmth + Autumn heading decorations v36 */ .winter-fireplace{display:none;position:relative;flex:0 0 100px;width:100px;height:99px;filter:drop-shadow(0 5px 7px #4e25252e);pointer-events:none} html[data-season="winter"] .welcome .round-icon{display:none} html[data-season="winter"] .winter-fireplace{display:block} .fireplace-mantel{position:absolute;left:5px;right:5px;top:8px;height:11px;border-radius:5px;background:linear-gradient(#c56b55,#852d36);box-shadow:0 2px 0 #5f2730;z-index:3} .fireplace-hearth{position:absolute;left:14px;right:14px;top:17px;bottom:11px;border:9px solid #b74a47;border-bottom-width:13px;border-radius:7px 7px 4px 4px;background:radial-gradient(ellipse at 50% 95%,#763c23,#271e26 65%);overflow:hidden} .fireplace-base{position:absolute;left:2px;right:2px;bottom:2px;height:10px;background:linear-gradient(#d37a61,#8e3235);border-radius:5px} .fire-logs{position:absolute;bottom:1px;left:7px;width:43px;height:7px;background:#71442f;border-radius:6px;transform:rotate(-11deg);box-shadow:0 0 0 2px #4a2d26,3px 0 8px #e98a27} .fire-flame{position:absolute;bottom:6px;left:21px;width:21px;height:37px;background:linear-gradient(0deg,#ffd55b 0%,#ff8c2e 54%,#df4130 100%);border-radius:65% 15% 60% 45%;transform-origin:50% 100%;transform:rotate(45deg);filter:drop-shadow(0 0 7px #f9a23c);animation:bistro-fire-flicker 1.4s ease-in-out infinite alternate} .flame-two{left:9px;bottom:6px;width:17px;height:28px;animation-delay:-.7s;animation-duration:1.1s} .flame-three{left:32px;bottom:6px;width:13px;height:24px;animation-delay:-.3s;animation-duration:1.7s} @keyframes bistro-fire-flicker{0%{transform:rotate(34deg) scale(.82,1);opacity:.8}50%{transform:rotate(50deg) scale(1.07,.9);opacity:1}100%{transform:rotate(41deg) scale(.92,1.13);opacity:.88}} @media(max-width:440px){.winter-fireplace{flex-basis:75px;width:75px;height:80px}.fireplace-mantel{left:2px;right:2px}.fireplace-hearth{left:9px;right:9px;bottom:10px;border-width:7px;border-bottom-width:11px}.fireplace-base{bottom:0}.fire-flame{left:17px}.flame-two{left:6px}.flame-three{left:27px}} html[data-season="winter"]{--teal:#a93240;--ink:#452f36;--line:#e9c6c9;--muted:#775963} html[data-season="winter"] .topbar{background:linear-gradient(110deg,#852b3b 0%,#ad3647 57%,#2d5676 100%);border-bottom:3px solid #e4b6ba} html[data-season="winter"] .welcome{background:linear-gradient(110deg,#fff2f0,#fce1e2 60%,#e7f2f9);border:1px solid #e5aeb6;border-radius:20px;padding:18px 15px;margin-bottom:16px} html[data-season="winter"] .welcome h1{color:#8c2638} html[data-season="winter"] .tabs{border-bottom-color:#dfb3b7} html[data-season="winter"] .tab.active{color:#fff;background:linear-gradient(125deg,#a92f43,#c84b57);border-radius:12px 12px 0 0;border-color:#f1b7bd} html[data-season="winter"] .panel,html[data-season="winter"] .order-card,html[data-season="winter"] .manage-row,html[data-season="winter"] .food-card,html[data-season="winter"] .stock-ingredient-card{border-color:#e7c4c9} html[data-season="winter"] #appView>section>.section-head:first-child h2{color:#992f42} html[data-season="winter"] .top5-column:nth-child(odd) .top5-column-fill{background:linear-gradient(0deg,#8f253a,#d95362)} html[data-season="winter"] .top5-column:nth-child(even) .top5-column-fill{background:linear-gradient(0deg,#295b7b,#75b5d5)} /* Autumn garlands and harvest icons around section headings, only when Autumn is active */ html[data-season="autumn"] #appView>section>.section-head:first-child{position:relative;padding-top:31px;margin-top:9px} html[data-season="autumn"] #appView>section>.section-head:first-child::before{content:"🍁 🦃 🍂 🍁 🦃 🍂 🍁";position:absolute;top:0;left:0;right:0;height:25px;overflow:hidden;white-space:nowrap;text-align:center;font-size:17px;letter-spacing:5px;line-height:23px;border-bottom:2px solid #c77d3c;pointer-events:none} html[data-season="autumn"] #appView>section>.section-head:first-child h2{color:#9a4a27} html[data-season="autumn"] #appView>section>.section-head:first-child h2::after{content:" 🍂";font-size:.72em;white-space:nowrap} @media(prefers-reduced-motion:reduce){.fire-flame{animation:none!important}} /* Seasonal polish v37 — winter contrast, realistic hearth, autumn turkeys */ html[data-season="winter"] .topbar{ background:linear-gradient(112deg,#8c1e30 0%,#b12e3d 34%,#6c2635 56%,#174d38 80%,#0d3c2d 100%); border-bottom:3px solid #c19b64; } html[data-season="winter"] .welcome{ background:linear-gradient(115deg,#103f31 0%,#185641 58%,#24644d 100%); border:1px solid #4c8b6c; box-shadow:0 12px 26px #103d2f30; } html[data-season="winter"] .welcome h1, html[data-season="winter"] .welcome .eyebrow, html[data-season="winter"] .welcome .muted{color:#fffaf0!important;text-shadow:0 1px 2px #092e2470} html[data-season="winter"] .welcome .eyebrow{color:#ffdbab!important} html[data-season="winter"] .welcome .muted{color:#e6f3e9!important} /* Brickwork and warm, irregular hearth lighting replace flat clip-art blocks. */ .winter-fireplace{filter:drop-shadow(0 4px 7px #071d1855)} .fireplace-mantel{ background:linear-gradient(180deg,#aa8b74 0%,#6f5142 42%,#44342e 78%,#8b6c58 100%); box-shadow:0 3px 2px #261b1a9c,0 1px 0 #d8b8a3 inset; border-radius:3px; height:12px; } .fireplace-hearth{ border:9px solid #8d6150; border-bottom:13px solid #725246; border-radius:4px 4px 3px 3px; background: radial-gradient(ellipse at 49% 85%,#ffb743b0 0%,#ad452c77 20%,transparent 60%), radial-gradient(ellipse at 50% 70%,#47312b 0%,#171a1b 72%); box-shadow:inset 0 2px 9px #000b,0 0 0 1px #3e2a25; } .fireplace-hearth:before{ content:"";position:absolute;inset:-9px;pointer-events:none;z-index:0; background:repeating-linear-gradient(0deg,transparent 0 11px,#412b2640 11px 13px), repeating-linear-gradient(90deg,transparent 0 19px,#3b2b274d 19px 21px,transparent 21px 40px); mix-blend-mode:multiply; } .fireplace-hearth:after{ content:"";position:absolute;left:9%;right:9%;bottom:2px;height:15px;z-index:1; background:radial-gradient(ellipse,#ffcf69 0%,#ed6b29a8 28%,transparent 73%); filter:blur(3px);animation:bistro-ember-glow 2.3s ease-in-out infinite alternate; } .fireplace-base{ background:linear-gradient(#9a7663,#5e4238 56%,#3c302c); box-shadow:0 2px 2px #231a19a8,0 1px 0 #d2ac92 inset; } .fire-logs{ z-index:3;bottom:5px;left:8px;width:45px;height:7px; background:repeating-linear-gradient(105deg,#513225 0 8px,#765039 8px 13px,#39271f 13px 19px); transform:rotate(-12deg);box-shadow:0 2px 1px #221a18,4px 0 7px #e4772d99; } .fire-flame{ z-index:2;bottom:9px;left:19px;width:20px;height:37px; background:radial-gradient(ellipse at 48% 80%,#fff6b0 0%,#ffe277 23%,#ffad39 47%,#ed5b2d 72%,#a72b23 100%); border-radius:65% 8% 65% 30%;opacity:.9; filter:drop-shadow(0 0 5px #f28a35); animation:bistro-fire-natural 1.23.1s ease-in-out infinite alternate; } .flame-two{left:9px;bottom:8px;width:15px;height:28px;animation-delay:-.6s;animation-duration:.94s} .flame-three{left:31px;bottom:9px;width:14px;height:25px;animation-delay:-.3s;animation-duration:1.55s} @keyframes bistro-fire-natural{ 0%{transform:rotate(29deg) scale(.8,.95) skewX(-4deg);opacity:.76} 40%{transform:rotate(47deg) scale(.95,1.12) skewX(3deg);opacity:.95} 100%{transform:rotate(38deg) scale(1.07,.87) skewX(-2deg);opacity:.84} } @keyframes bistro-ember-glow{from{opacity:.6;transform:scaleX(.8)}to{opacity:1;transform:scaleX(1.1)}} @media(max-width:440px){.fire-flame{left:15px}.flame-two{left:5px}.flame-three{left:25px}} @media(prefers-reduced-motion:reduce){.fire-flame,.fireplace-hearth:after{animation:none!important}} /* Seasonal polish v38: solid rustic autumn selection and a brick-built Christmas hearth. */ html[data-season="autumn"] .tab.active, html[data-season="autumn"] .tabs .tab.active { background:linear-gradient(140deg,#bd682e 0%,#a45228 100%); border-color:#8f421f; color:#fffaf2; box-shadow:0 2px 0 #74391f,0 3px 9px #81451e24; border-radius:12px 12px 0 0; font-weight:750; } html[data-season="autumn"] .tab.active .count{background:#f7d7a8;color:#74391f} /* Keep the illustration compact while letting the chimney rise above the mantel. */ .winter-fireplace{overflow:visible;isolation:isolate} .fireplace-chimney{ position:absolute;top:-14px;left:19px;right:19px;height:42px;z-index:0; border:2px solid #654539;border-radius:2px 2px 0 0; background-color:#a76e58; background-image: linear-gradient(90deg,transparent 49%,#593c35 50%,transparent 52%), repeating-linear-gradient(0deg,transparent 0 10px,#63443a 10px 12px), repeating-linear-gradient(90deg,transparent 0 21px,#63443a 21px 23px), linear-gradient(120deg,#bc8970,#865644); background-size:38px 24px,100% 24px,44px 24px,100% 100%; background-position:11px 12px,0 0,0 0,0 0; box-shadow:inset 3px 0 5px #edb99a55,inset -3px 0 5px #43291d55; } .fireplace-mantel{z-index:5;top:21px;left:3px;right:3px;height:12px} .fireplace-hearth{top:31px;bottom:9px;z-index:1;border-color:#93634f} .fireplace-hearth:before{ background-image: repeating-linear-gradient(0deg,transparent 0 9px,#4d302b99 9px 11px), repeating-linear-gradient(90deg,transparent 0 17px,#53342d9c 17px 19px), linear-gradient(110deg,#ba8166aa,#7e503eaa); background-size:100% 20px,37px 20px,100% 100%; background-position:0 0,8px 10px,0 0; opacity:.7; } .fireplace-stockings{position:absolute;top:29px;left:17px;right:13px;height:27px;z-index:6;pointer-events:none} .stocking{position:absolute;top:0;width:12px;height:20px;border-radius:2px 2px 4px 3px;transform:rotate(9deg);box-shadow:1px 2px 2px #1b171766} .stocking:before{content:"";position:absolute;top:-3px;left:-2px;right:-2px;height:6px;border-radius:2px;background:#fff2d9;box-shadow:0 1px 1px #4b2d2b55} .stocking:after{content:"";position:absolute;bottom:-1px;left:-5px;width:10px;height:8px;border-radius:6px 3px 3px 6px;background:inherit} .stocking-red{left:6px;background:linear-gradient(110deg,#e65b51,#982937)} .stocking-blue{right:5px;background:linear-gradient(110deg,#6ea6ba,#285e8a);transform:rotate(-10deg)} .fire-flame,.flame-two,.flame-three{ border-radius:0; clip-path:polygon(49% 0%,63% 21%,58% 38%,79% 25%,73% 54%,94% 68%,78% 88%,61% 100%,30% 100%,10% 81%,26% 58%,22% 37%,43% 48%); transform-origin:50% 100%; background:linear-gradient(0deg,#ffda55 0%,#ffb236 34%,#fa6a25 67%,#d83c21 100%); filter:drop-shadow(0 0 4px #ffb33a); animation:bistro-flame-pointed 1.2s ease-in-out infinite alternate; } .fire-flame{bottom:7px;left:17px;width:23px;height:37px} .flame-two{left:5px;bottom:7px;width:20px;height:27px;animation-delay:-.6s;animation-duration:.85s} .flame-three{left:29px;bottom:7px;width:18px;height:29px;animation-delay:-.3s;animation-duration:1.4s} @keyframes bistro-flame-pointed{ 0%{transform:rotate(-7deg) scale(.88,.95) skewX(-4deg);opacity:.84} 45%{transform:rotate(6deg) scale(1.06,1.12) skewX(3deg);opacity:1} 100%{transform:rotate(-3deg) scale(.95,.86) skewX(-2deg);opacity:.9} } @media(max-width:440px){ .fireplace-chimney{top:-8px;left:13px;right:13px;height:34px} .fireplace-mantel{top:19px} .fireplace-hearth{top:29px;bottom:8px} .fireplace-stockings{top:27px;left:11px;right:9px} .stocking{width:9px;height:16px} .stocking-red{left:4px}.stocking-blue{right:3px} .fire-flame{left:13px;height:29px;width:19px}.flame-two{left:3px;height:23px;width:16px}.flame-three{left:23px;height:24px;width:16px} } @media(prefers-reduced-motion:reduce){.fire-flame,.flame-two,.flame-three{animation:none!important}} /* Holiday Flavors shares the exact menu cards and order controls. */ #holidayTab .section-head h2{letter-spacing:.01em} html[data-season="autumn"] #holidayTab .section-head h2{color:#a74b22} html[data-season="winter"] #holidayTab .section-head h2{color:#a52436} /* Daily Drop */ .drop-intro{text-align:center}.drop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.drop-board{max-width:660px;margin:0 auto 20px}.drop-sky{position:relative;height:470px;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,#164d39,#2b6a50 60%,#b0793e);border:5px solid #b88a4b;box-shadow:inset 0 0 0 3px #e7c48e;margin-bottom:14px}.drop-season-ornament{position:absolute;left:50%;top:6px;z-index:5;font-size:31px;transform:translate(-50%,0);filter:drop-shadow(0 3px 3px #0006);pointer-events:none}.drop-peg{position:absolute;width:11px;height:11px;background:radial-gradient(circle at 30% 30%,#fff4d0,#d8a654 65%,#8c5825);border-radius:50%;box-shadow:0 2px 3px #0006}.drop-buckets{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:78px;gap:2px;padding:2px}.drop-bucket{border:2px solid #f2d3a0;border-radius:9px 9px 5px 5px;background:#943c31;color:#fff9e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:700;text-shadow:0 1px 2px #0007}.drop-bucket:nth-child(2),.drop-bucket:nth-child(4){background:#246449}.drop-bucket:nth-child(3){background:#b3832c}.drop-bucket-art{font-size:26px;line-height:1.1}.drop-bucket.won{box-shadow:0 0 0 3px #fff,0 0 28px 12px #ffdf6d;animation:dropPulse .45s ease-in-out 4;z-index:2}.drop-win{text-align:center;font-size:1.15rem;font-weight:800;min-height:30px}.drop-voucher,.drop-history-entry{padding:12px;border-radius:12px;background:rgba(150,120,75,.1);margin:8px 0}.drop-history-entry{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}.drop-particle{position:absolute;z-index:8;pointer-events:none;font-size:19px;animation:dropBurst 1.8s ease-out forwards}html[data-season="autumn"] .drop-sky{background:linear-gradient(160deg,#60371f,#ae642b 55%,#d39a43);border-color:#8a4d29}html[data-season="winter"] .drop-sky{background:linear-gradient(155deg,#0a3b3e,#1a6172 60%,#a4d2e0);border-color:#ba2738}html[data-season="winter"] .drop-bucket{border-color:#f9db9d}html[data-season="winter"] .drop-bucket:nth-child(odd){background:#b42d42}html[data-season="winter"] .drop-bucket:nth-child(even){background:#1d654a}@keyframes dropBurst{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}@keyframes dropPulse{50%{filter:brightness(1.65)}}@media(max-width:450px){.drop-sky{height:400px}.drop-bucket{font-size:11px}.drop-bucket-art{font-size:21px}} .drop-prize-settings{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border,#d7cbbb)}.drop-prize-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:.65rem;margin:.8rem 0}.drop-prize-grid label{display:flex;flex-direction:column;gap:.3rem}.drop-prize-grid input{width:100%;box-sizing:border-box} /* V49: autumn-only haunted house, occupying the winter fireplace's header position. */ .autumn-haunted-house{display:none;position:relative;flex:0 0 100px;width:100px;height:106px;isolation:isolate;pointer-events:none;filter:drop-shadow(0 5px 5px #28142266)} html[data-season="autumn"] .autumn-haunted-house{display:block} .autumn-haunted-house .haunt-moon{position:absolute;width:32px;height:32px;right:4px;top:3px;border-radius:50%;background:#ffe9a0;box-shadow:0 0 17px #ffd45a9c;animation:hauntMoon 3s ease-in-out infinite alternate} .haunt-body{position:absolute;bottom:3px;left:16px;width:68px;height:64px;background:linear-gradient(95deg,#392b43,#594055 50%,#2b2238);border:3px solid #241b30;border-radius:3px 3px 2px 2px;box-shadow:inset 4px 0 #6c5265} .haunt-roof{position:absolute;left:8px;top:25px;width:84px;height:43px;background:#211c30;clip-path:polygon(50% 0,100% 100%,0 100%);z-index:2} .haunt-tower{position:absolute;top:8px;left:19px;width:25px;height:51px;background:#35273d;border:2px solid #211a2c;z-index:3} .haunt-tower:before{content:"";position:absolute;left:-7px;top:-15px;width:35px;height:22px;background:#201a2b;clip-path:polygon(50% 0,100% 100%,0 100%)} .haunt-window,.haunt-tower-window{position:absolute;background:#ffbb3c;border:3px solid #251c2b;border-radius:12px 12px 2px 2px;box-shadow:0 0 9px #ffb43cbb;animation:hauntFlicker 2.7s ease-in-out infinite alternate} .haunt-window{top:13px;width:15px;height:23px}.haunt-window-left{left:7px}.haunt-window-right{right:7px;animation-delay:1.2s}.haunt-tower-window{top:8px;left:6px;width:9px;height:15px;animation-delay:.5s} .haunt-door{position:absolute;bottom:0;left:25px;width:16px;height:30px;background:#1c1726;border:2px solid #a17858;border-radius:9px 9px 0 0} .haunt-ghost{position:absolute;z-index:6;right:-7px;top:30px;font-size:29px;filter:drop-shadow(0 0 6px #ffffffb8);animation:hauntFloat 4s ease-in-out infinite} .haunt-spark{position:absolute;z-index:5;width:5px;height:5px;background:#fbd56e;border-radius:50%;box-shadow:0 0 7px #ffe5a4;animation:hauntFlicker 1.7s infinite alternate}.haunt-spark-one{left:6px;top:48px}.haunt-spark-two{right:5px;bottom:10px;animation-delay:.8s} @keyframes hauntFloat{0%,100%{transform:translate(-2px,5px) rotate(-9deg)}50%{transform:translate(2px,-14px) rotate(8deg)}} @keyframes hauntFlicker{0%,100%{opacity:1;filter:brightness(1.15)}45%{opacity:.7;filter:brightness(.75)}55%{opacity:.95}} @keyframes hauntMoon{to{box-shadow:0 0 24px #ffd45ad9}} html[data-season="autumn"] .drop-season-ornament{font-size:32px;line-height:1.2;filter:drop-shadow(0 3px 3px #2c1609a0)} @media(max-width:440px){.autumn-haunted-house{flex-basis:75px;width:75px;transform:scale(.78);transform-origin:right center;margin-left:-9px}} @media(prefers-reduced-motion:reduce){.haunt-ghost,.haunt-window,.haunt-tower-window,.haunt-spark,.haunt-moon{animation:none!important}} /* V50: hide platter only in autumn; winter ornament and autumn storm clouds. */ html[data-season="autumn"] .welcome .round-icon{display:none} html[data-season="winter"] .drop-season-ornament{font-size:0;width:34px;height:37px;line-height:1;display:block;background:radial-gradient(circle at 30% 24%,#ff9b9b 0%,#e52f43 30%,#a50924 76%,#65051c 100%);border:2px solid #f4c66b;border-radius:49% 49% 52% 52%;box-shadow:inset -5px -5px 8px #4d001d55,0 3px 7px #0005;transform:translate(-50%,0)} html[data-season="winter"] .drop-season-ornament::before{content:"";position:absolute;top:-9px;left:11px;width:10px;height:9px;background:linear-gradient(90deg,#a77d29,#ffe6a1,#a77d29);border-radius:2px 2px 0 0;border:1px solid #9c7325} html[data-season="winter"] .drop-season-ornament::after{content:"";position:absolute;top:-14px;left:14px;width:5px;height:6px;border:2px solid #e8c675;border-radius:50%} .autumn-haunted-house .haunt-cloud{position:absolute;z-index:7;top:-13px;width:40px;height:13px;background:#56575e;border-radius:25px;opacity:.9;filter:drop-shadow(0 2px 2px #2225);animation:hauntCloudDrift 6s ease-in-out infinite alternate} .autumn-haunted-house .haunt-cloud::before{content:"";position:absolute;width:20px;height:18px;left:7px;bottom:3px;background:#62636b;border-radius:50%} .autumn-haunted-house .haunt-cloud::after{content:"";position:absolute;width:17px;height:14px;right:5px;bottom:2px;background:#4a4b53;border-radius:50%} .autumn-haunted-house .haunt-cloud-one{left:3px}.autumn-haunted-house .haunt-cloud-two{right:0;top:-7px;transform:scale(.7);animation-delay:-2s} @keyframes hauntCloudDrift{from{translate:-4px 0}to{translate:8px 2px}} @media(prefers-reduced-motion:reduce){.autumn-haunted-house .haunt-cloud{animation:none}} /* V59: Golden Jackpot visuals, wallet, seasonal reactions. */ .v59-wallet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px} .v59-wallet-stat{padding:18px;border-radius:16px;background:linear-gradient(145deg,#174b3b,#2b7759);color:#fff7e2;display:flex;flex-direction:column;gap:9px;box-shadow:0 7px 22px #122b2525} .v59-wallet-stat span{font-size:.85rem}.v59-wallet-stat strong{font-size:2rem} .v59-wallet-voucher{border:1px solid #d8b46c;border-radius:13px;background:linear-gradient(110deg,#fff7db,#f5e4b6);padding:13px;display:flex;flex-direction:column;gap:9px;color:#573b1e;margin:8px 0} .v59-wallet-voucher .muted{color:#6e583d} .drop-bucket{transition:box-shadow .35s ease,filter .35s ease,opacity .35s ease,transform .35s ease} .drop-bucket.v59-winning{box-shadow:0 0 0 3px #fff6ce,0 0 24px 10px #ffe17ba8;filter:brightness(1.3);animation:v59SlotGlow .6s ease-in-out infinite alternate;z-index:2} .drop-bucket.v59-dim{filter:brightness(.68)} @keyframes v59SlotGlow{to{box-shadow:0 0 0 4px #fff,0 0 35px 16px #ffe17b;transform:translateY(-3px)}} .v59-reveal{position:fixed;inset:0;z-index:9999;background:#0a1622e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;text-align:center;overflow:auto} .v59-reveal.hidden{display:none!important} .v59-reveal-sparkles{font-size:2rem;letter-spacing:12px;animation:v59Sparkle 1.4s ease-in-out infinite alternate} .v59-ticket{width:min(86vw,370px);height:245px;position:relative;transform-style:preserve-3d;filter:drop-shadow(0 14px 25px #0009)} .v59-ticket-front,.v59-ticket-back{position:absolute;inset:0;backface-visibility:hidden;border:5px double #fff4b5;border-radius:22px;background:linear-gradient(130deg,#b67919,#ffe9a0 45%,#d49b32 70%,#9c6512);color:#563007;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;box-shadow:inset 0 0 0 5px #a77723} .v59-ticket-front{font-size:4rem}.v59-ticket-front span{font-size:1.3rem;font-weight:900;letter-spacing:2px} .v59-ticket-back{transform:rotateY(180deg)}.v59-ticket-back>span{font-size:2.5rem}.v59-ticket-back strong{font-size:1.3rem}.v59-ticket-back small{font-weight:700} .v59-active .v59-ticket{animation:v59TicketFlip 3.2s cubic-bezier(.25,.65,.25,1) both} .v59-reveal-note{color:#fff3ce;font-size:1.1rem;font-weight:700} .v59-reveal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .v59-reveal-actions button{min-width:130px} @keyframes v59TicketFlip{0%{transform:translateY(115px) scale(.58) rotateY(0);opacity:0}38%{transform:translateY(0) scale(1.04) rotateY(0);opacity:1}52%{transform:translateY(0) scale(1.04) rotateY(0);opacity:1}100%{transform:translateY(0) scale(1) rotateY(180deg);opacity:1}} @keyframes v59Sparkle{to{transform:scale(1.12);filter:brightness(1.5)}} html[data-season="autumn"].v59-jackpot-party .haunt-ghost{animation:v59GhostDance .52s ease-in-out infinite alternate!important} html[data-season="autumn"].v59-jackpot-party .haunt-window,html[data-season="autumn"].v59-jackpot-party .haunt-tower-window{animation:v59HauntFlash .4s ease-in-out infinite alternate!important} html[data-season="winter"].v59-jackpot-party .fire-flame{animation:v59FireDance .3.1s ease-in-out infinite alternate!important;filter:brightness(1.5) drop-shadow(0 0 9px #ffe9a0)} html[data-season="winter"].v59-jackpot-party .winter-fireplace{filter:drop-shadow(0 0 15px #ffe9a0)} @keyframes v59GhostDance{to{transform:translate(-18px,-15px) rotate(-18deg) scale(1.17)}} @keyframes v59HauntFlash{to{filter:brightness(2.5) drop-shadow(0 0 10px #ffd86a)}} @keyframes v59FireDance{to{transform:scale(1.25) rotate(7deg)}} @media(prefers-reduced-motion:reduce){.v59-active .v59-ticket{animation:none;transform:rotateY(180deg)}.v59-reveal-sparkles,.drop-bucket.v59-winning{animation:none!important}html.v59-jackpot-party .haunt-ghost,html.v59-jackpot-party .haunt-window,html.v59-jackpot-party .haunt-tower-window,html.v59-jackpot-party .fire-flame{animation:none!important}} /* V61: original banner scrolls normally; seasonal companions flank Plinko. */ .welcome{position:static!important;top:auto!important;z-index:auto!important} .drop-board{position:relative;isolation:isolate} .v61-board-decor{position:absolute;top:112px;width:105px;display:flex;justify-content:center;pointer-events:none;z-index:2} .v61-board-decor-left{left:-115px} .v61-board-decor-right{right:-115px} .v61-board-decor .autumn-haunted-house,.v61-board-decor .winter-fireplace{flex-shrink:0} @media(max-width:940px){ .v61-board-decor{top:96px;width:70px;z-index:3} .v61-board-decor-left{left:3px} .v61-board-decor-right{right:3px} .v61-board-decor .autumn-haunted-house,.v61-board-decor .winter-fireplace{transform:scale(.55);transform-origin:top center;margin-bottom:-42px} .v61-board-decor .autumn-haunted-house{margin-left:0} } @media(max-width:450px){ .v61-board-decor{top:65px;width:48px} .v61-board-decor-left{left:1px}.v61-board-decor-right{right:1px} .v61-board-decor .autumn-haunted-house,.v61-board-decor .winter-fireplace{transform:scale(.42);transform-origin:top center;margin-bottom:-60px} } @media(prefers-reduced-motion:reduce){.v61-board-decor .haunt-ghost,.v61-board-decor .fire-flame{animation:none!important}} /* V63: anticipation before the reveal; the main banner remains normal-scrolling. */ html.v63-jackpot-build #dropSky,html.v63-jackpot-build #dropTestSky{animation:v63BuildShake 3s linear both;transform-origin:center center} html.v63-jackpot-build .v61-side-decor,html.v63-jackpot-build .v61-board-companions{animation:v63BuildShake 3s linear both} @keyframes v63BuildShake{0%,15%{transform:translate(0,0)}20%{transform:translate(1px,0)}30%{transform:translate(-1px,1px)}40%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}60%{transform:translate(3px,-2px)}70%{transform:translate(-4px,2px)}78%{transform:translate(5px,-2px)}85%{transform:translate(-6px,3px)}90%{transform:translate(7px,-3px)}95%{transform:translate(-8px,3px)}100%{transform:translate(0,0)}} .v59-reveal[data-theme="autumn"]{background:radial-gradient(circle at center,#502451f2,#170e25f5 78%)} .v59-reveal[data-theme="autumn"] .v59-ticket-front,.v59-reveal[data-theme="autumn"] .v59-ticket-back{background:linear-gradient(130deg,#783849,#ffb44c 45%,#a55a28 75%,#552d35);border-color:#ffce87;color:#3a1830} .v59-reveal[data-theme="winter"]{background:radial-gradient(circle at center,#164e65f2,#0c1a39f5 78%)} .v59-reveal[data-theme="winter"] .v59-ticket-front,.v59-reveal[data-theme="winter"] .v59-ticket-back{background:linear-gradient(130deg,#9c1e2a,#fce6c2 45%,#c53743 75%,#7c1a2c);border-color:#f8e8ac;color:#52151e} .v63-ticket-emblem{font-size:4rem!important;line-height:1.1}.v59-ticket-front #v63TicketSeason{font-size:1.1rem;letter-spacing:1px} .v59-active .v59-ticket{animation:v63TicketBurst 3.2s cubic-bezier(.2,.7,.2,1) both} @keyframes v63TicketBurst{0%{transform:translateY(145px) scale(.2) rotate(-10deg) rotateY(0);opacity:0}23%{transform:translateY(-14px) scale(1.13) rotate(3deg) rotateY(0);opacity:1}38%,52%{transform:translateY(0) scale(1.02) rotate(0) rotateY(0);opacity:1}100%{transform:translateY(0) scale(1) rotateY(180deg);opacity:1}} @media(prefers-reduced-motion:reduce){html.v63-jackpot-build #dropSky,html.v63-jackpot-build #dropTestSky,html.v63-jackpot-build .v61-side-decor,html.v63-jackpot-build .v61-board-companions{animation:none!important}.v59-active .v59-ticket{animation:none!important;transform:rotateY(180deg)}} /* V64: visual-only enhancements; all rewards and orders remain server-authoritative */ .v64-mascot{display:flex;align-items:center;gap:12px;margin:10px 0;padding:10px 13px;border:1px solid var(--border,#c9b9a4);border-radius:14px;background:rgba(195,151,76,.10)} .v64-mascot-face{font-size:38px;display:inline-block;transform-origin:bottom center;animation:v64-mascot-bob 2.5s ease-in-out infinite} .v64-mascot small{display:block;margin-top:3px;opacity:.8} .v64-preparing .v64-mascot-face{animation-duration:.85s}.v64-ready .v64-mascot-face{animation:v64-mascot-party .75s ease-in-out infinite} @keyframes v64-mascot-bob{50%{transform:translateY(-5px) rotate(-5deg)}}@keyframes v64-mascot-party{25%{transform:rotate(-16deg) translateY(-5px)}75%{transform:rotate(16deg) translateY(-5px)}} .v64-voucher{display:flex;gap:14px;align-items:center;padding:15px;margin:9px 0;border:2px solid #d8ac47;border-radius:16px;background:linear-gradient(125deg,#fff4d5,#f9e2a4);color:#53380d;box-shadow:0 4px 16px #0001} .v64-voucher-autumn{background:linear-gradient(125deg,#ffdeb0,#e8b9ed);border-color:#a55d2d}.v64-voucher-winter{background:linear-gradient(125deg,#eaf6ff,#ffdddd);border-color:#c44b48} .v64-voucher-icon{font-size:42px}.v64-voucher-info{display:grid;gap:4px;flex:1}.v64-voucher .muted{color:#614e3c}.v64-voucher button{justify-self:start;margin-top:5px} .v64-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v64-stats>div{border-radius:13px;padding:13px;background:rgba(160,140,110,.11);font-size:13px}.v64-stats strong{display:block;font-size:25px;margin-top:6px} .v64-entrance{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:95px;padding:14px;border-radius:18px;background:linear-gradient(110deg,#433321,#94703b);color:white;margin-bottom:12px;text-align:center}.v64-entrance.hidden{display:none}.v64-entrance>span{font-size:40px}.v64-entrance.v64-intro-running>span{animation:v64-fly 2.3s ease-in-out both}.v64-entrance button{margin-left:auto} @keyframes v64-fly{0%{transform:translateX(-90px) rotate(-20deg);opacity:0}45%{opacity:1}85%{transform:translateX(15px) rotate(12deg)}100%{transform:translateX(0)}} @media(max-width:450px){.v64-entrance{flex-wrap:wrap}.v64-entrance button{margin-left:0}} @media(prefers-reduced-motion:reduce){.v64-mascot-face,.v64-entrance>span{animation:none!important}} /* V65 isolated owner preview */ body.v65-preview-open{overflow:hidden}.v65-preview{position:fixed;inset:0;z-index:99990;background:rgba(10,16,19,.86);padding:12px;display:flex;align-items:center;justify-content:center}.v65-preview.hidden{display:none!important}.v65-shell{background:var(--surface,#fffdf7);color:var(--ink,#24332a);width:min(100%,550px);height:min(94dvh,900px);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px #0007}.v65-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px;border-bottom:1px solid #aaa5}.v65-head small{display:block;font-size:10px;letter-spacing:.08em}.v65-head button{font-size:12px}.v65-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:8px}.v65-nav button{padding:10px 2px;font-size:12px;border-radius:10px}.v65-nav button.active{outline:2px solid #a98138}.v65-body{overflow:auto;flex:1;padding:14px}.v65-body h2{font-size:1.35rem}.v65-items{display:grid;gap:10px}.v65-item,.v65-box{padding:14px;border:1px solid #9995;border-radius:14px;margin:10px 0}.v65-item p{margin:6px 0}.v65-item button{float:right}.v65-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #aaa5}.v65-line small{display:block}.v65-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v65-stats>div{background:#b49a6826;border-radius:12px;padding:18px;text-align:center}.v65-stats strong{font-size:1.6rem}.v65-stats small{display:block}.v65-drop{font-size:56px;text-align:center;padding:30px 0}.v65-drop div{font-size:26px}.v65-foot{font-size:11px;text-align:center;padding:10px;background:#bb9d5120}@media(max-width:420px){.v65-head{padding:9px}.v65-nav button{font-size:11px}.v65-preview{padding:4px}.v65-shell{height:98dvh}} /* V67: preserve full-size Bistro visuals in preview, with seasonal animations. */ .v65-shell{width:min(100%,850px)}.v65-body .welcome{margin-bottom:18px}.v65-body .menu-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.v65-body .drop-board{margin:12px auto;max-width:650px}.v65-body .drop-sky{min-height:380px}.v65-body .drop-season-ornament{z-index:5}.v65-body .order-card{margin:12px 0}.v65-body .v61-board-decor{pointer-events:none}.v65-body .menu-details select{width:100%}.v65-body .v59-wallet{margin:12px 0} /* V68 true customer view: existing app UI, no modal. */ .v68-return{position:fixed;z-index:9998;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#222;color:white;border:2px solid #e9b957;border-radius:30px;padding:12px 18px;font-weight:800;box-shadow:0 4px 20px #0007;max-width:95vw;} .v68-return.hidden{display:none!important;} .v68-preview-mode #appView{padding-bottom:75px;} /* V69: archived mascots remain still; only a fresh Ready transition celebrates. */ .v64-mascot-face{animation:none} .v64-preparing .v64-mascot-face{animation:v64-mascot-bob 1.4s ease-in-out infinite} .v64-ready .v64-mascot-face,.v64-completed .v64-mascot-face,.v64-declined .v64-mascot-face{animation:none} .v69-ready-celebrate .v64-mascot-face{animation:v64-mascot-party .75s ease-in-out 4;animation-fill-mode:none} @media(prefers-reduced-motion:reduce){.v69-ready-celebrate .v64-mascot-face{animation:none}} /* V70: Daily Drop achievements and subtle seasonal atmosphere */ .v70-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .v70-achievement{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:14px 8px;border:1px solid rgba(190,150,78,.35);border-radius:15px;background:linear-gradient(140deg,rgba(245,207,117,.13),rgba(255,255,255,.03));min-height:110px} .v70-achievement .v70-badge-icon{font-size:27px;line-height:1.2} .v70-achievement strong{font-size:.88rem}.v70-achievement small{font-size:.73rem;opacity:.8} .v70-achievement.locked{filter:grayscale(.85);opacity:.58} .v70-achievement.earned{box-shadow:0 0 15px rgba(227,183,79,.13)} @media(min-width:650px){.v70-achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} /* Ambient visual details do not affect ball collisions or prize selection. */ html[data-season="winter"] #dropBoard::before,html[data-season="autumn"] #dropBoard::before{content:'❄️ ✦ ❄️';position:absolute;top:7px;right:15px;pointer-events:none;opacity:.6;animation:v70-float 6s ease-in-out infinite;z-index:1} html[data-season="autumn"] #dropBoard::before{content:'🍂 ✦ 🍁';animation-duration:7s} #dropBoard{position:relative} @keyframes v70-float{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(8px);opacity:.75}} @media(prefers-reduced-motion:reduce){html[data-season] #dropBoard::before{animation:none}} /* V71 Living Seasons: CSS-only, no backend, timers or extra downloads. */ .topbar,.welcome{isolation:isolate} .v71-header-magic,.v71-welcome-magic{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .v71-header-magic>* ,.v71-welcome-magic>*{position:absolute;display:none;pointer-events:none} .topbar>:not(.v71-header-magic):not(.winter-snow):not(.autumn-leaves),.welcome>:not(.v71-welcome-magic){position:relative;z-index:2} html[data-season="autumn"] .v71-bat,html[data-season="autumn"] .v71-wanderghost{display:block} html[data-season="winter"] .v71-sleigh,html[data-season="winter"] .v71-lightstrand,html[data-season="winter"] .v71-snowman,html[data-season="winter"] .v71-frost{display:block} .v71-bat{top:8%;left:-12%;font-size:18px;opacity:0;animation:v71BatFly 17s linear infinite} .v71-bat-b{top:43%;animation-delay:-8s;font-size:14px} @keyframes v71BatFly{0%,15%{transform:translateX(0) translateY(0) scale(.7);opacity:0}19%{opacity:.85}70%{transform:translateX(60vw) translateY(-12px) scale(1);opacity:.9}94%{transform:translateX(115vw) translateY(8px) scale(.8);opacity:0}100%{opacity:0}} .v71-wanderghost{top:14%;left:-14%;font-size:29px;opacity:0;filter:drop-shadow(0 2px 4px #3d2a5680);animation:v71GhostWander 15s ease-in-out infinite} @keyframes v71GhostWander{0%,12%{opacity:0;transform:translate(0,10px)}17%{opacity:.75}70%{opacity:.85;transform:translate(54vw,-12px)}95%{opacity:0;transform:translate(110vw,6px)}100%{opacity:0}} /* Lightning is a low-opacity flash confined to the decorative haunted house. */ html[data-season="autumn"] .autumn-haunted-house::after{content:"";position:absolute;inset:0;z-index:8;background:#d9d8ff;opacity:0;pointer-events:none;mix-blend-mode:screen;animation:v71Lightning 19s linear infinite} html[data-season="autumn"] .haunt-window{animation:v71WindowFlicker 6s steps(1,end) infinite} @keyframes v71Lightning{0%,81%,82%,83%,84%,100%{opacity:0}81.3%,82.5%{opacity:.16}} @keyframes v71WindowFlicker{0%,72%,74%,100%{filter:brightness(1)}73%{filter:brightness(.45)}75%{filter:brightness(1.35)}} .v71-lightstrand{top:1px;left:15%;right:15%;text-align:center;font-size:13px;letter-spacing:9px;white-space:nowrap;opacity:.65;animation:v71Twinkle 1.9s ease-in-out infinite alternate} @keyframes v71Twinkle{from{opacity:.35;filter:brightness(.8)}to{opacity:.95;filter:brightness(1.45) drop-shadow(0 0 4px #fff4a5)}} .v71-snowman{bottom:2px;right:2%;font-size:30px;transform-origin:bottom center;animation:v71SnowmanWave 7s ease-in-out infinite} @keyframes v71SnowmanWave{0%,65%,82%,100%{transform:rotate(0)}70%,78%{transform:rotate(-14deg)}74%{transform:rotate(12deg)}} .v71-sleigh{top:8%;left:-35%;white-space:nowrap;font-size:21px;opacity:0;animation:v71SleighFly 24s linear infinite} @keyframes v71SleighFly{0%,28%{opacity:0;transform:translateX(0) translateY(0)}32%{opacity:.9}94%{opacity:.9;transform:translateX(145vw) translateY(-12px)}99%,100%{opacity:0}} .v71-frost{inset:auto 0 0 0;text-align:center;letter-spacing:12px;font-size:13px;color:#e7faff;text-shadow:0 0 8px #c8f7ff;opacity:.55;animation:v71Frost 3.1s ease-in-out infinite alternate} @keyframes v71Frost{from{opacity:.25}to{opacity:.75}} @media(max-width:480px){.v71-lightstrand{font-size:9px;letter-spacing:4px;left:3%;right:3%}.v71-snowman{font-size:22px}.v71-wanderghost{font-size:22px}.v71-frost{font-size:10px;letter-spacing:6px}} @media(prefers-reduced-motion:reduce){.v71-header-magic *, .v71-welcome-magic *,html[data-season="autumn"] .autumn-haunted-house::after,html[data-season="autumn"] .haunt-window{animation:none!important}.v71-bat,.v71-wanderghost,.v71-sleigh{display:none!important}} /* V73: Keep decorative layers visible while preserving click-through. */ .topbar{isolation:isolate} .welcome{position:relative;isolation:isolate} .v71-header-magic,.v71-welcome-magic{z-index:3} .v71-header-magic *,.v71-welcome-magic *{pointer-events:none} .v71-wanderghost,.v71-bat,.v71-sleigh{will-change:transform,opacity} /* V74: restore the full-size absolute header effects layer despite earlier seasonal .topbar > * rules; remove lightning by request. */ html[data-season="autumn"] .topbar > .v71-header-magic, html[data-season="winter"] .topbar > .v71-header-magic { position:absolute; inset:0; z-index:3; width:100%; height:100%; overflow:hidden; pointer-events:none; } html[data-season="autumn"] .autumn-haunted-house::after { content:none!important; animation:none!important; } /* More readable, genuinely visible silhouettes against the header. */ html[data-season="autumn"] .v71-bat { color:#f1d5ff; font-size:23px; filter:drop-shadow(0 1px 3px #000); } html[data-season="autumn"] .v71-bat-b { font-size:19px; } html[data-season="winter"] .v71-sleigh { font-size:25px; filter:drop-shadow(0 2px 3px #092b35); } html[data-season="winter"] .v71-lightstrand { top:3px; left:6%; right:6%; font-size:16px; opacity:.9; } html[data-season="winter"] .v71-snowman { bottom:3px; right:3%; font-size:35px; filter:drop-shadow(0 2px 3px #0b3944); } html[data-season="winter"] .v71-frost { bottom:2px; font-size:16px; opacity:.85; } @media(max-width:480px){html[data-season="winter"] .v71-lightstrand{font-size:12px;letter-spacing:3px}html[data-season="winter"] .v71-snowman{font-size:28px}} /* V75: irregular bat flight and richer winter decorations. */ html[data-season="autumn"] .v71-bat-a{animation:v75BatZigzag 17s linear infinite!important} html[data-season="autumn"] .v71-bat-b{animation:v75BatZigzagB 17s linear infinite -8s!important} @keyframes v75BatZigzag{ 0%,13%{transform:translate(0,7px) rotate(-13deg) scale(.75);opacity:0} 17%{opacity:.9}24%{transform:translate(18vw,-10px) rotate(18deg) scale(.95)} 33%{transform:translate(33vw,14px) rotate(-24deg) scale(.8)} 44%{transform:translate(49vw,-17px) rotate(25deg) scale(1.06)} 55%{transform:translate(66vw,12px) rotate(-15deg) scale(.92)} 69%{transform:translate(86vw,-12px) rotate(16deg) scale(1.02)} 81%{transform:translate(113vw,8px) rotate(-20deg) scale(.85);opacity:.85} 85%,100%{transform:translate(124vw,-6px) rotate(4deg) scale(.7);opacity:0} } @keyframes v75BatZigzagB{ 0%,12%{transform:translate(0,-4px) rotate(15deg) scale(.8);opacity:0} 18%{opacity:.9}27%{transform:translate(21vw,15px) rotate(-23deg) scale(1)} 38%{transform:translate(36vw,-14px) rotate(18deg) scale(.85)} 48%{transform:translate(53vw,11px) rotate(-26deg) scale(1.04)} 59%{transform:translate(71vw,-18px) rotate(24deg) scale(.9)} 73%{transform:translate(95vw,12px) rotate(-15deg) scale(1.1)} 84%{transform:translate(123vw,-8px) rotate(18deg) scale(.8);opacity:.85} 88%,100%{opacity:0} } html[data-season="winter"] .v75-lightstrand{ top:0!important;left:8%!important;right:8%!important;width:84%;height:58px; opacity:1!important;letter-spacing:normal;animation:none!important;overflow:visible } .v75-lightstrand svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px #122b30)} .v75-bulb{animation:v75BulbGlow 2.3s ease-in-out infinite alternate;animation-delay:var(--phase);transform-box:fill-box;transform-origin:center} @keyframes v75BulbGlow{0%,100%{opacity:.65;filter:brightness(.75)}50%{opacity:1;filter:brightness(1.7) drop-shadow(0 0 4px #ffe5a0)}} html[data-season="winter"] .v75-sleigh{top:5%!important;left:-270px!important;width:245px;height:80px;font-size:initial!important;filter:drop-shadow(0 2px 2px #092b35);animation:v75SleighPass 24s linear infinite!important} .v75-sleigh svg{width:100%;height:100%;overflow:visible;display:block} .v75-deer{animation:v75DeerGallop .58s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center} .v75-deer-1,.v75-deer-3{animation-delay:-.29s} @keyframes v75DeerGallop{to{translate:0 -3px;rotate:1.5deg}} @keyframes v75SleighPass{0%,27%{transform:translate(0,4px);opacity:0}31%{opacity:1}45%{transform:translate(calc(40vw + 70px),-7px)}67%{transform:translate(calc(75vw + 125px),2px)}94%{transform:translate(calc(125vw + 275px),-12px);opacity:1}99%,100%{opacity:0}} @media(max-width:480px){html[data-season="winter"] .v75-lightstrand{height:43px;left:4%!important;right:4%!important;width:92%}html[data-season="winter"] .v75-sleigh{width:204px;height:63px;left:-225px!important}} @media(prefers-reduced-motion:reduce){html[data-season="autumn"] .v71-bat,html[data-season="winter"] .v75-sleigh{animation:none!important;display:none!important}.v75-bulb,.v75-deer{animation:none!important}} /* V76: fewer bat passes, readable holiday header, open sleigh behind the reindeer. */ html[data-season="autumn"] .v71-bat-a{animation-duration:32s!important} html[data-season="autumn"] .v71-bat-b{animation-duration:32s!important;animation-delay:-16s!important} /* Light string stays behind brand and controls, but remains decorative and visible. */ html[data-season="winter"] .topbar > .v71-header-magic{z-index:1!important} html[data-season="winter"] .topbar > :not(.v71-header-magic):not(.winter-snow):not(.autumn-leaves){position:relative;z-index:4!important} html[data-season="winter"] .v75-lightstrand{opacity:.58!important;top:0!important} html[data-season="winter"] .v75-bulb{opacity:.7} /* The reindeer are now ahead of the open sleigh, all facing right. */ /* V78: earned milestones and selected title, displayed beneath the board */ .v78-featured-panel{margin-top:12px} .v78-featured-badge{display:flex;align-items:center;justify-content:center;min-height:82px;padding:10px;border:1px dashed rgba(194,151,74,.5);border-radius:16px;background:linear-gradient(115deg,rgba(233,189,92,.13),rgba(255,255,255,.03))} .v78-featured-choice{display:flex;align-items:center;gap:14px;text-align:left;background:transparent;color:inherit;border:0;padding:6px 12px;cursor:pointer;max-width:100%} .v78-featured-icon{font-size:42px;line-height:1.1;filter:drop-shadow(0 2px 6px rgba(221,172,75,.4))} .v78-featured-choice strong{display:block;font-size:1.2rem} .v78-featured-choice small{display:block;opacity:.75;font-size:.76rem;margin-top:4px} .v70-achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .v70-achievement{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:14px 8px;border:1px solid rgba(190,150,78,.35);border-radius:15px;background:linear-gradient(140deg,rgba(245,207,117,.13),rgba(255,255,255,.03));min-height:110px;color:inherit;font:inherit;cursor:pointer} .v70-achievement .v70-badge-icon{font-size:27px;line-height:1.2} .v70-achievement strong{font-size:.88rem}.v70-achievement small{font-size:.73rem;opacity:.8} .v70-achievement.locked{filter:grayscale(.85);opacity:.58;cursor:default} .v70-achievement.earned{box-shadow:0 0 15px rgba(227,183,79,.13)} .v70-achievement.v78-selected{border:2px solid #d9a342;box-shadow:0 0 12px rgba(227,183,79,.35)} @media(min-width:650px){.v70-achievement-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* V79 — colorful 7-lane Super Drop, no premature prize reveals */ .v79-super-panel{max-width:780px;margin:16px auto 22px;border:2px solid #dfb95b;background:linear-gradient(140deg,rgba(249,201,99,.12),rgba(105,119,226,.09))} .v79-count{border-radius:99px;padding:6px 12px;background:#6c398e;color:#fff;font-weight:800} .v79-tickets{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.v79-ticket{border:1px solid #d6a852;background:linear-gradient(120deg,#ffefb9,#e9b75c);color:#43275a;padding:10px;border-radius:12px;font-weight:800;cursor:pointer} .v79-super-board{margin:14px auto;max-width:700px;padding:12px;border-radius:20px;background:linear-gradient(130deg,#4d286f,#1b527c,#6d2a65);border:4px solid #f7d578;box-shadow:0 0 22px #eeb4ff80} .v79-super-title{text-align:center;color:#fff0a5;font-weight:900;letter-spacing:.07em;padding:12px 0;text-shadow:0 0 13px #f4c6ff} .v79-super-sky{height:750px;background:radial-gradient(ellipse at 50% 25%,#6d3ca3 0%,#183c78 53%,#3b155d 100%);border:5px solid #e8b853;box-shadow:inset 0 0 40px #8cdef666,0 0 24px #d5a9ff80;overflow:hidden} .v79-super-sky .drop-peg{width:10px;height:10px;background:radial-gradient(circle at 30% 30%,#fff,#f7d982 45%,#b8b1f8);box-shadow:0 0 7px 3px #ffd98188;animation:v79PegBreathe 2.7s ease-in-out infinite alternate} .v79-super-sky .drop-peg.v79-hit{animation:v79PegHit .35s ease-out} .v79-super-sky .drop-buckets{grid-template-columns:repeat(7,minmax(0,1fr));height:92px;gap:2px} .v79-super-sky .drop-bucket{font-size:clamp(8px,1.8vw,13px);padding:2px;background:linear-gradient(#1d789d,#244d7e);border-color:#a4e6ff} .v79-super-sky .drop-bucket:nth-child(2),.v79-super-sky .drop-bucket:nth-child(4),.v79-super-sky .drop-bucket:nth-child(6){background:linear-gradient(#ad4d91,#722f73);border-color:#ffe59b} .v79-super-sky .drop-bucket-art{font-size:clamp(16px,3.3vw,27px)} .v79-super-sky .drop-bucket.v59-winning{animation:v59SlotGlow .5s infinite alternate} .v79-super-sky .drop-season-ornament{font-size:38px;filter:drop-shadow(0 0 12px #ffe4a0)} .v79-super-sky.v79-party{animation:v79BoardCelebrate .25s ease-in-out 12 alternate} html[data-season="autumn"] .v79-super-sky{background:radial-gradient(ellipse at 40% 25%,#a74b83,#572c74 55%,#2a214e)} html[data-season="winter"] .v79-super-sky{background:radial-gradient(ellipse at 40% 25%,#4a98c3,#1c4c86 55%,#17375a)} @keyframes v79PegBreathe{to{box-shadow:0 0 12px 5px #a8e7ffbb;filter:hue-rotate(55deg)}} @keyframes v79PegHit{50%{transform:scale(1.9);box-shadow:0 0 18px 8px #fff4b0}} @keyframes v79BoardCelebrate{to{filter:brightness(1.25);transform:translateX(2px)}} @media(max-width:450px){.v79-super-sky{height:610px}.v79-super-sky .drop-bucket{border-width:1px}.v79-super-board{padding:5px}} @media(prefers-reduced-motion:reduce){.v79-super-sky .drop-peg,.v79-super-sky.v79-party{animation:none!important}} /* V80 collectible power-ups */ .v79-power-wallet{margin:12px 0;padding:12px;border:1px solid #e2c077;border-radius:14px;background:rgba(250,215,120,.09)} .v79-power-wallet h4{margin:0 0 8px}.v79-power-list{display:flex;flex-wrap:wrap;gap:7px}.v79-power-chip{padding:7px 10px;border-radius:99px;background:linear-gradient(110deg,#5b368f,#266c98);color:white;font-weight:700;font-size:.86rem} .v79-power-label{display:block;color:#fff2b8;font-weight:800;margin:8px 0}.v79-super-board select{display:block;width:100%;padding:12px;border-radius:10px;background:#fff;color:#25203a}.v79-super-board .muted{color:#eee4ff}.v79-choice{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;padding:12px;border:2px solid #ffe19b;border-radius:12px;background:#32174c}.v79-choice.hidden{display:none}.v79-choice p{width:100%;color:white}.v79-shielded{filter:grayscale(1);opacity:.45}.v79-shielded:after{content:'🛡️';position:absolute;inset:0;display:grid;place-items:center;background:#1c2d4ba8} /* V81: clear high-contrast Autumn Super Drop prize labels */ html[data-season="autumn"] .v79-super-sky .drop-bucket,html[data-season="autumn"] .v79-super-sky .drop-bucket span{color:#ffdc8a!important;text-shadow:0 1px 3px #180b20,0 0 4px #180b20!important;} html[data-season="autumn"] .v79-super-sky .drop-bucket:nth-child(2),html[data-season="autumn"] .v79-super-sky .drop-bucket:nth-child(4),html[data-season="autumn"] .v79-super-sky .drop-bucket:nth-child(6){color:#fff2bd!important;} /* V82: Super Drop result text remains legible on the dark Autumn panel. */ html[data-season="autumn"] .v79-super-board #v79Result, html[data-season="autumn"] .v79-super-board #v79PowerHint, html[data-season="autumn"] .v79-super-board #v79Choice, html[data-season="autumn"] .v79-super-board #v79Choice p, html[data-season="autumn"] .v79-super-board .v79-super-title { color:#ffdd8e !important; text-shadow:0 2px 4px #1d1029,0 0 8px #3b1a35 !important; } html[data-season="autumn"] .v79-super-board #v79Play, html[data-season="autumn"] .v79-super-board #v79Close {color:#fff4cc !important;text-shadow:0 1px 3px #261327 !important;} /* Both Double Trouble balls remain above their glowing winning buckets. */ .v79-super-sky .drop-season-ornament, .v79-super-sky .v80-second-ball {z-index:12 !important;pointer-events:none;} .v79-super-sky .drop-buckets {z-index:4;} .v79-super-sky .drop-bucket.v59-winning {z-index:5;} /* V83 Super Drop impact and suspense; no reward outcome is exposed early. */ .v79-super-sky{position:relative} .v79-super-sky .v83-peg-spark{position:absolute;z-index:6;width:10px;height:10px;border:2px solid #fff3a0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:v83Spark .5s ease-out forwards;box-shadow:0 0 11px 4px #fbe4a0aa} @keyframes v83Spark{0%{opacity:.95;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(calc(2.6 * var(--v83-scale,1)))}} .v79-super-sky.v83-impact{animation:v83ImpactShake .16s ease-out} @keyframes v83ImpactShake{0%,100%{filter:none}35%{filter:brightness(1.08)}65%{filter:brightness(1.03)}} .v79-super-sky.v83-final-suspense{box-shadow:inset 0 0 60px #0c123baa,0 0 32px #e9cfffbb} .v79-super-sky.v83-final-suspense .drop-peg{box-shadow:0 0 12px 5px #ffe9a9bb} @media(prefers-reduced-motion:reduce){.v79-super-sky.v83-impact,.v79-super-sky .v83-peg-spark{animation:none}.v79-super-sky .v83-peg-spark{display:none}} /* V84: game guide — overlays without replacing the real customer UI */ .v84-help-link{display:flex;justify-content:flex-end;margin:-.25rem 0 .65rem}.v84-help-link button{font-weight:700;text-decoration:underline;text-underline-offset:3px}.v84-help-overlay{position:fixed;inset:0;z-index:99999;background:rgba(10,14,24,.78);display:flex;align-items:center;justify-content:center;padding:12px}.v84-help-overlay.hidden{display:none!important}.v84-help-dialog{box-sizing:border-box;width:min(680px,100%);max-height:min(90dvh,900px);overflow:hidden;display:flex;flex-direction:column;background:#fff9eb;color:#302b30;border:3px solid #dca747;border-radius:18px;box-shadow:0 20px 70px #0008;padding:16px;gap:12px}.v84-help-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.v84-help-head h2{margin:0;font-size:1.2rem;color:#5a3153}.v84-help-head button{flex-shrink:0;color:#4c3441}.v84-help-body{overflow:auto;overscroll-behavior:contain;line-height:1.5;padding:0 4px 10px}.v84-help-body h3{margin:18px 0 5px;color:#80415a}.v84-help-body p{margin:5px 0 10px}.v84-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.v84-help-grid>div{display:flex;flex-direction:column;gap:3px;background:#f3e7d6;border:1px solid #e4cc9e;border-radius:10px;padding:9px}.v84-help-grid strong{color:#53344d}.v84-help-grid span{font-size:.84rem;color:#554955}.v84-help-dialog #v84HelpDone{flex-shrink:0}@media(max-width:440px){.v84-help-grid{grid-template-columns:1fr}.v84-help-dialog{padding:12px}.v84-help-head h2{font-size:1.05rem}} /* V85: Super Drop atmosphere. Decorations are noninteractive and sit behind pegs/balls. */ .v79-super-sky{isolation:isolate} .v85-ambient{position:absolute;inset:0 0 92px;z-index:0;pointer-events:none;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 17%,rgba(255,255,255,.035) 17.1% 17.3%,transparent 17.4% 33%)} .v85-arch{position:absolute;inset:4% 8% 7%;border:2px solid rgba(255,221,142,.26);border-bottom:0;border-radius:45% 45% 0 0;box-shadow:inset 0 0 35px rgba(255,220,122,.09),0 0 15px rgba(255,223,158,.15)} .v85-orb{position:absolute;color:#ffdf8d;font-size:30px;text-shadow:0 0 12px currentColor;animation:v85Twinkle 3.4s ease-in-out infinite alternate} .v85-orb-a{top:16%;left:9%}.v85-orb-b{top:34%;right:9%;animation-delay:-1.2s;color:#9ce7ff}.v85-orb-c{bottom:24%;left:12%;animation-delay:-2.2s;color:#f8a9ef}.v85-orb-d{bottom:42%;right:12%;animation-delay:-.7s} .v85-side{position:absolute;top:43%;display:flex;flex-direction:column;align-items:center;gap:8px;color:#f6d88d;opacity:.42;text-shadow:0 0 13px #f7d784;font-size:23px;letter-spacing:.13em} .v85-side small{font-size:11px;font-weight:900;writing-mode:vertical-rl}.v85-side-left{left:2%}.v85-side-right{right:2%} .v79-super-sky .drop-pegs{z-index:2}.v79-super-sky .drop-buckets{z-index:4} .v85-ghost{position:absolute;inset:6% 8% 19%;z-index:20;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(32px) scale(.72);filter:drop-shadow(0 0 26px #e3d5ff);} .v85-ghost svg{width:min(70%,290px);height:auto;max-height:75%;filter:drop-shadow(0 0 22px #c7b6ff)} .v85-ghost span{font-weight:1000;font-size:clamp(19px,5vw,35px);color:#fff3b3;text-shadow:0 0 18px #b45de9,0 3px 4px #301446;text-align:center} html[data-season]:not([data-season="autumn"]) .v85-ghost{display:none} .v79-super-sky.v85-ghost-show .v85-ghost{visibility:visible;animation:v85GhostEntrance 2.4s ease-in-out both} @keyframes v85GhostEntrance{0%{opacity:0;transform:translateY(42px) scale(.68)}20%{opacity:.63;transform:translateY(0) scale(1.02)}65%{opacity:.76;transform:translateY(-10px) scale(1.12)}85%{opacity:.65;transform:translateY(-17px) scale(1.15)}100%{opacity:0;transform:translateY(-30px) scale(1.28)}} @keyframes v85Twinkle{from{opacity:.25;transform:scale(.8)}to{opacity:.8;transform:scale(1.2)}} html[data-season="winter"] .v85-arch{border-color:rgba(180,230,255,.35)} html[data-season="winter"] .v85-side{color:#bcecff} @media(prefers-reduced-motion:reduce){.v85-orb{animation:none}.v79-super-sky.v85-ghost-show .v85-ghost{animation:none;opacity:.65;transform:none}} /* V86: readable Winter Super Drop status, completion, and prize copy. */ html[data-season="winter"] .v79-super-board #v79Result, html[data-season="winter"] .v79-super-board #v79PowerHint, html[data-season="winter"] .v79-super-board #v79Choice, html[data-season="winter"] .v79-super-board #v79Choice p, html[data-season="winter"] .v79-super-board .v79-super-title, html[data-season="winter"] .v79-super-board .v79-power-label {color:#6df2a2!important;text-shadow:0 1px 2px #062f23,0 2px 5px #102b35!important;} html[data-season="winter"] .v79-super-board #v79Play, html[data-season="winter"] .v79-super-board #v79Close {color:#146c42!important;text-shadow:0 1px 1px #fff!important;} html[data-season="winter"] .v79-super-sky .drop-bucket, html[data-season="winter"] .v79-super-sky .drop-bucket span {color:#9df5b9!important;text-shadow:0 2px 3px #15372d!important;} /* Santa is a Winter-only, non-interactive jackpot overlay, like the Autumn ghost. */ .v86-santa{position:absolute;inset:5% 5% 18%;z-index:21;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(42px) scale(.7);filter:drop-shadow(0 0 26px #fef4c0);} .v86-santa svg{width:min(75%,310px);height:auto;max-height:75%;filter:drop-shadow(0 0 25px #ffdf99)} .v86-santa span{font-weight:1000;font-size:clamp(19px,4.6vw,33px);color:#fff3d0;text-shadow:0 0 15px #f2263d,0 3px 5px #5b132b;text-align:center} html[data-season]:not([data-season="winter"]) .v86-santa{display:none} html[data-season="winter"] .v79-super-sky.v86-santa-show .v86-santa{visibility:visible;animation:v86SantaEntrance 2.6s ease-in-out both} @keyframes v86SantaEntrance{0%{opacity:0;transform:translateY(55px) scale(.68) rotate(-6deg)}20%{opacity:.7;transform:translateY(0) scale(1.02) rotate(3deg)}58%{opacity:.85;transform:translateY(-10px) scale(1.14) rotate(-2deg)}82%{opacity:.7;transform:translateY(-18px) scale(1.17) rotate(2deg)}100%{opacity:0;transform:translateY(-35px) scale(1.28) rotate(0)}} @media(prefers-reduced-motion:reduce){html[data-season="winter"] .v79-super-sky.v86-santa-show .v86-santa{animation:none;opacity:.7;transform:none}}