/* Rakata production styles = v21 demo CSS (both <style> blocks, verbatim)
   + production overrides at the end (phone frame -> full screen, no zoom). */
:root{
  --maroon:#8A1F08; --yellow:#E4BC32; --white:#fff; --pale:rgba(228,188,50,.15);
  --pale2:rgba(228,188,50,.32); --ink:#8A1F08; --ink70:rgba(138,31,8,.7); --ink50:rgba(138,31,8,.5);
  --line:rgba(138,31,8,.18); --green:#2F7D32; --gray:#DAD4C9; --graytx:#B9B2A6;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,sans-serif;background:#F3EAD3;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:Marcellus,serif;font-weight:400}
button{font-family:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
/* ===== Top chrome (outside phone) ===== */
.topbar{position:sticky;top:0;z-index:60;background:var(--maroon);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar .brand img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:8px;padding:2px}
.topbar .sub{font-size:12px;color:rgba(255,255,255,.78)}
.topbar .sp{flex:1}
.btn-adminlink{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:999px}
.toc{background:#fff;border-bottom:4px solid var(--yellow);padding:8px 16px 10px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.toc .grp{min-width:0}
.toc .toc-title{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink50);margin:2px 0 6px}
.toc-row{display:flex;gap:5px;flex-wrap:wrap}
.toc-row button{border:2px solid var(--line);background:#fff;color:var(--ink70);font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:999px}
.toc-row button.on{background:var(--maroon);border-color:var(--maroon);color:#fff}
.toc-row button.adm{border-color:var(--yellow);background:var(--pale)}
/* ===== Stage / phone ===== */
.stage{max-width:1180px;margin:16px auto 44px;padding:0 16px;display:flex;justify-content:center}
.phone{width:390px;max-width:100%;background:#fff;border:4px solid var(--maroon);border-radius:30px;overflow:hidden;position:relative;box-shadow:0 18px 0 rgba(138,31,8,.12)}
.phone-inner{height:780px;overflow:hidden;position:relative}
@media(max-width:480px){.phone{border-radius:0;border-left:0;border-right:0}.phone-inner{height:calc(100dvh - 190px);min-height:560px}}
.screen{display:none;height:100%;flex-direction:column;position:relative;background:#fff}
.screen.active{display:flex}
.scrollbody{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin}
/* ===== Shared phone components ===== */
.band{position:relative;background:var(--maroon);color:#fff;padding:18px 20px 20px;overflow:hidden}
.band .circ{position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:var(--yellow)}
.band .circ2{position:absolute;right:26px;bottom:-52px;width:84px;height:84px;border-radius:50%;border:10px solid var(--yellow);background:transparent}
.band h2{margin:0;font-size:26px;line-height:1.15;position:relative;z-index:2;max-width:250px}
.band p{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.85);position:relative;z-index:2;max-width:250px;line-height:1.5}
.minihead{background:var(--maroon);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;flex:none}
.minihead img{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:7px;padding:2px;position:relative;z-index:2}
.minihead .t{font-family:Marcellus,serif;font-size:17px;letter-spacing:.03em;position:relative;z-index:2}
.minihead .step{margin-left:auto;font-size:11px;font-weight:700;background:var(--yellow);color:var(--maroon);padding:4px 9px;border-radius:999px;position:relative;z-index:2}
.minihead .backbtn{background:var(--yellow);border:2px solid var(--maroon);border-radius:9px;font-weight:800;color:var(--maroon);padding:5px 10px;position:relative;z-index:2;font-size:13px}
.sec{padding:16px}
.sec-pale{background:var(--pale);padding:16px}
.sec-yellow{background:var(--yellow);padding:16px}
.sec-maroon{background:var(--maroon);color:#fff;padding:16px}
.sec h3,.sec-pale h3,.sec-yellow h3{margin:0 0 10px;font-size:19px}
.lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink50)}
.sec-maroon .lbl{color:rgba(255,255,255,.65)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:14px;padding:13px 16px;min-height:47px;font-size:15px;font-weight:800;border:3px solid var(--maroon);text-align:center;text-decoration:none}
.btn-maroon{background:var(--maroon);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--maroon)}
.btn-outline{background:#fff;color:var(--maroon)}
.btn-white{background:#fff;color:var(--maroon);border-color:#fff}
.btn:active{transform:translateY(1px)}
.btn.small{padding:9px 12px;min-height:40px;font-size:13px;border-radius:11px}
.btn-off{background:var(--gray);color:#fff;border-color:var(--gray);pointer-events:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:3px solid var(--maroon);background:#fff;color:var(--maroon);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px}
.chip.on{background:var(--maroon);color:#fff}
.chip.yon{background:var(--yellow)}
.chip.sm{border-width:2px;font-size:12px;padding:6px 11px}
.card{background:#fff;border:3px solid var(--maroon);border-radius:16px;overflow:hidden}
.card .bd{padding:12px 14px}
.price{font-family:Marcellus,serif;font-size:19px}
.mut{color:var(--ink70);font-size:13px;line-height:1.55}
.mut50{color:var(--ink50);font-size:12px;line-height:1.5}
.prod{display:flex;gap:12px;align-items:center;background:#fff;border:3px solid var(--maroon);border-radius:16px;padding:10px;margin-bottom:10px}
.prod img{width:76px;height:76px;object-fit:cover;border-radius:10px;flex:none}
.prod .nm{font-weight:800;font-size:15px}
.prod .pr{font-family:Marcellus,serif;font-size:17px;margin-top:2px}
.addbtn{margin-left:auto;flex:none;background:var(--yellow);border:3px solid var(--maroon);color:var(--maroon);font-weight:800;font-size:13px;padding:9px 12px;border-radius:11px}
.stepper{display:flex;align-items:center;flex:none;border:3px solid var(--maroon);border-radius:11px;overflow:hidden;background:#fff}
.stepper button{width:34px;height:36px;border:0;background:var(--yellow);color:var(--maroon);font-size:18px;font-weight:800}
.stepper .n{width:32px;text-align:center;font-weight:800;font-size:15px;background:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .card img{width:100%;height:104px;object-fit:cover}
.bottomnav{flex:none;background:#fff;border-top:4px solid var(--maroon);display:grid;grid-template-columns:repeat(4,1fr)}
.bottomnav button{background:none;border:0;padding:9px 2px 10px;font-size:10.5px;font-weight:700;color:var(--ink50);display:flex;flex-direction:column;align-items:center;gap:4px}
.bottomnav button.on{color:var(--maroon)}
.bottomnav .ic{width:26px;height:26px;border-radius:8px;background:var(--pale);display:flex;align-items:center;justify-content:center}
.bottomnav button.on .ic{background:var(--yellow)}
.bottomnav.admin{grid-template-columns:repeat(5,1fr)}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink70);margin-bottom:6px}
.field label .req{color:var(--maroon)}
.field input,.field textarea{width:100%;border:3px solid var(--yellow);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--maroon)}
.field .hint{font-size:11.5px;color:var(--ink50);margin-top:5px}
.radio2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio2 button{border:3px solid var(--maroon);border-radius:14px;background:#fff;padding:14px 10px;font-weight:800;font-size:14px;color:var(--maroon)}
.radio2 button.on{background:var(--maroon);color:#fff}
.radio2 button small{display:block;font-weight:500;font-size:11.5px;opacity:.75;margin-top:3px}
.totalrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;gap:10px}
.totalrow.grand{border-top:3px solid var(--maroon);margin-top:6px;padding-top:12px;font-weight:800;font-size:16px}
.cartbar{flex:none;background:var(--maroon);color:#fff;padding:11px 16px;display:flex;align-items:center;gap:12px}
.cartbar .amt{font-family:Marcellus,serif;font-size:20px;line-height:1.1}
.cartbar .viewbtn{margin-left:auto;background:var(--yellow);border:0;color:var(--maroon);font-weight:800;padding:11px 16px;border-radius:11px;font-size:14px;position:relative}
.cartbar .qbadge{position:absolute;top:-9px;right:-7px;background:#fff;color:var(--maroon);border:2.5px solid var(--maroon);min-width:23px;height:23px;border-radius:999px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* tracker */
.track{position:relative;padding:2px 0 0;overflow:hidden}
.tstep{display:flex;gap:14px;position:relative;padding:10px 0;background:none;border:0;text-align:left;width:100%;font-family:inherit}
.tstep::before{content:"";position:absolute;left:15px;top:27px;bottom:-27px;width:4px;border-radius:2px;background:var(--pale2)}
.tstep.done::before{background:var(--maroon)}
.tstep:last-child::before{display:none}
.tstep>span:last-child{min-width:0}
.tstep .tt{overflow-wrap:break-word}
.tstep .medal{width:34px;height:34px;flex:none;border-radius:50%;border:3px solid var(--maroon);background:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.tstep.done .medal{background:var(--maroon)}
.tstep.now .medal{background:var(--yellow)}
.tstep .tt{font-weight:800;font-size:14.5px;color:var(--ink)}
.tstep .ts{font-size:12px;color:var(--ink50)}
.tstep.off{opacity:.45}
/* QR */
.qrwrap{background:#fff;border:4px solid var(--maroon);border-radius:18px;padding:18px;text-align:center;position:relative}
.qrgrid{display:grid;grid-template-columns:repeat(21,1fr);gap:1.5px;width:230px;height:230px;margin:6px auto}
.qrgrid i{background:#fff;border-radius:1px}
.qrgrid i.f{background:var(--maroon)}
.qrgrid.exp i.f{background:#B9B2AC}
.qr-corner{position:absolute;width:22px;height:22px;border:4px solid var(--maroon)}
.count{font-family:Marcellus,serif;font-size:34px;letter-spacing:.06em}
.queue-big{font-family:Marcellus,serif;font-size:92px;line-height:1;color:var(--maroon);text-align:center}
.statusline{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:9px 0;border-bottom:2px solid var(--line)}
.statusline:last-child{border-bottom:0}
.dotst{width:10px;height:10px;border-radius:50%;flex:none}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink50);padding:8px 6px;border-bottom:3px solid var(--maroon)}
td{padding:10px 6px;border-bottom:2px solid var(--line);vertical-align:top}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff;border:3px solid var(--maroon);border-radius:14px;padding:13px 14px}
.stat .v{font-family:Marcellus,serif;font-size:26px}
.stat .k{font-size:11.5px;font-weight:700;color:var(--ink50);text-transform:uppercase;letter-spacing:.07em}
.splitbar{display:flex;height:30px;border:3px solid var(--maroon);border-radius:9px;overflow:hidden}
.splitbar .a{background:var(--maroon);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.splitbar .b{background:var(--yellow);color:var(--maroon);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.placeholder-box{border:4px dashed var(--maroon);background:var(--pale);border-radius:16px;padding:22px 18px;text-align:center}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.confetti i{position:absolute;top:-16px;animation:fall 2.6s ease-in forwards}
@keyframes fall{to{transform:translateY(760px) rotate(560deg);opacity:.9}}
.confetti.zone i{animation:fallZone 2.4s ease-in forwards}
@keyframes fallZone{to{transform:translateY(450px) rotate(560deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.confetti i{animation:none;display:none}.skel{animation:none}}
.toast{position:absolute;left:16px;right:16px;bottom:148px;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:700;z-index:40;display:none;box-shadow:0 10px 24px rgba(138,31,8,.25);align-items:center;gap:9px}
.toast.show{display:flex}
.toast.ok{background:var(--green);color:#fff}
.toast.info{background:var(--maroon);color:#fff}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps3 .st{background:#fff;border:3px solid var(--maroon);border-radius:13px;padding:11px 8px;text-align:center}
.steps3 .st .n{width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--maroon);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.steps3 .st b{font-size:12.5px;display:block}
.steps3 .st span{font-size:11px;color:var(--ink50);line-height:1.4;display:block;margin-top:2px}
/* ===== Homepage carousel / showcase ===== */
.greet{display:flex;align-items:center;gap:10px;padding:7px 16px 4px}
.greet .hi{font-family:Marcellus,serif;font-size:23px}
.bellbtn{margin-left:auto;width:42px;height:42px;flex:none;border-radius:50%;border:3px solid var(--maroon);background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.bellbtn .bdot{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--maroon);border:2px solid #fff}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.cslide{min-width:100%;scroll-snap-align:start;padding:12px 16px 4px}
.cslide .inner{border-radius:18px;overflow:hidden;border:3px solid var(--maroon);position:relative}
.cslide img{width:100%;height:168px;object-fit:cover}
.cslide .cap{position:absolute;left:0;right:0;bottom:0;background:var(--maroon);color:#fff;padding:9px 14px;font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px}
.cslide .cap small{font-weight:500;font-size:11.5px;color:rgba(255,255,255,.8);margin-left:auto;text-align:right}
.dots{display:flex;gap:6px;justify-content:center;padding:6px 0 0}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--pale2)}
.dots i.on{background:var(--maroon);width:20px;border-radius:99px}
.outletcard{margin:10px 16px 0;border:3px solid var(--maroon);border-radius:16px;padding:13px 14px;display:flex;gap:12px;align-items:center;background:#fff}
.outletcard .pin{width:42px;height:42px;flex:none;border-radius:12px;background:var(--yellow);border:3px solid var(--maroon);display:flex;align-items:center;justify-content:center}
.modecards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 16px 0}
.modecard{border:3px solid var(--maroon);border-radius:16px;background:#fff;padding:14px 12px;text-align:left}
.modecard .ic{width:40px;height:40px;border-radius:50%;background:var(--pale);border:2.5px solid var(--maroon);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.modecard b{font-size:15px;display:block}
.modecard span{font-size:12px;color:var(--ink70);line-height:1.45;display:block;margin-top:2px}
.showcard{border:3px solid var(--maroon);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;text-align:left;width:100%;padding:0}
.showcard img{width:100%;height:96px;object-fit:cover}
.showcard .bd{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1}
.showcard .nm{font-weight:800;font-size:13.5px;line-height:1.3;min-height:35px}
.showcard .pr{font-family:Marcellus,serif;font-size:16px;margin-top:auto;padding-top:4px}
.infocard{border:3px solid var(--maroon);border-radius:16px;background:#fff;padding:14px;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left}
.infocard .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--yellow);border:3px solid var(--maroon);display:flex;align-items:center;justify-content:center}
.infocard b{font-size:14.5px;display:block}
.infocard span{font-size:12.5px;color:var(--ink70);line-height:1.5;display:block;margin-top:2px}
.bellpanel{position:absolute;top:64px;right:12px;left:12px;z-index:35;background:#fff;border:3px solid var(--maroon);border-radius:16px;padding:14px 16px;box-shadow:0 14px 30px rgba(138,31,8,.22);display:none}
.bellpanel.show{display:block}
.bellpanel .item{padding:9px 0;border-bottom:2px solid var(--line)}
.bellpanel .item:last-child{border-bottom:0}
/* ===== Menu layout: rail + grid, independent scroll ===== */
.modepills{display:flex;background:var(--pale);border:3px solid var(--maroon);border-radius:999px;padding:4px;gap:4px}
.modepills button{flex:1;border:0;background:transparent;border-radius:999px;padding:9px 6px;font-weight:800;font-size:13.5px;color:var(--maroon);display:flex;align-items:center;justify-content:center;gap:6px}
.modepills button.on{background:var(--maroon);color:#fff}
.searchbar{display:flex;align-items:center;gap:9px;border:3px solid var(--yellow);border-radius:999px;padding:10px 15px;background:#fff}
.searchbar:focus-within{border-color:var(--maroon)}
.searchbar input{border:0;outline:none;font:inherit;font-size:14.5px;flex:1;color:var(--ink);background:transparent;min-width:0}
.menulayout{display:flex;flex:1;min-height:0;border-top:3px solid var(--line)}
.catrail{width:25%;flex:none;overflow-y:auto;border-right:3px solid var(--line);background:var(--pale);scrollbar-width:thin}
.catrail button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:2px solid var(--line);padding:14px 10px;font-size:12.5px;font-weight:700;color:var(--ink70);line-height:1.35;position:relative}
.catrail button.on{background:#fff;color:var(--maroon)}
.catrail button.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--maroon)}
.prodgrid{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;scrollbar-width:thin}
.mcard{border:3px solid var(--maroon);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;text-align:left;padding:0;width:100%;position:relative}
.mcard .imgwrap{position:relative}
.mcard img{width:100%;height:88px;object-fit:cover}
.mcard .bd{padding:8px 10px 10px;display:flex;flex-direction:column;flex:1}
.mcard .nm{font-weight:800;font-size:13px;line-height:1.3;min-height:34px;color:var(--ink)}
.mcard .pr{font-family:Marcellus,serif;font-size:15.5px;margin-top:auto;padding-top:5px;color:var(--ink)}
.qtybadge{position:absolute;top:6px;right:6px;background:var(--maroon);color:#fff;border:2.5px solid #fff;min-width:25px;height:25px;border-radius:999px;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 6px;z-index:2}
/* ===== Detail / customize ===== */
.bbar{flex:none;background:#fff;border-top:3px solid var(--maroon);padding:10px 14px;display:flex;align-items:center;gap:10px}
.bbar .prblk{flex:none}
.bbar .prblk .pr{font-family:Marcellus,serif;font-size:20px;line-height:1.1}
.bbar .cta{flex:1}
.optgroup{margin-bottom:16px}
.optgroup .gh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.optgroup .gh b{font-size:15px}
.optgroup .gh span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--maroon);border-radius:99px;padding:3px 8px}
.optrow{display:flex;align-items:center;gap:11px;border:3px solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:8px;background:#fff;width:100%;text-align:left;font-size:14px;font-weight:600;color:var(--ink)}
.optrow .rd{width:20px;height:20px;flex:none;border-radius:50%;border:3px solid var(--maroon);position:relative}
.optrow.on{border-color:var(--maroon);background:var(--pale)}
.optrow.on .rd:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--maroon)}
.optrow.dis{opacity:.55}
.slotcard{border:3px solid var(--maroon);border-radius:16px;padding:13px 14px;margin-bottom:12px;background:#fff}
.slotcard .sh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.slotcard .sh b{font-size:15.5px}
.slotcard .editbtn{margin-left:auto;background:var(--yellow);border:2.5px solid var(--maroon);border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.iconbtn{background:#fff;border:2.5px solid var(--maroon);border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.iconbtn.red{background:var(--maroon)}
.charct{font-size:11px;color:var(--ink50);text-align:right;margin-top:4px}
/* skeleton loading */
.skel{background:#E7E1D4;border-radius:10px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* checkout */
.tnc{background:var(--maroon);color:#fff;border-radius:14px;padding:13px 15px;display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.55}
.tnc b{text-decoration:underline}
.payradio{display:flex;align-items:center;gap:12px;border:3px solid var(--line);border-radius:14px;padding:14px;background:#fff;width:100%;text-align:left;margin-bottom:10px}
.payradio .rd{width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--maroon);position:relative}
.payradio.on{border-color:var(--maroon);background:var(--pale)}
.payradio.on .rd:after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--maroon)}
.payradio b{font-size:15.5px;color:var(--ink);display:block}
.payradio span{font-size:12px;color:var(--ink70);display:block;margin-top:1px}
.reviewrow{display:flex;gap:11px;background:#fff;border:3px solid var(--maroon);border-radius:16px;padding:10px;margin-bottom:10px;align-items:flex-start}
.reviewrow img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.custlink{color:var(--maroon);font-weight:800;text-decoration:underline;text-underline-offset:2px;background:none;border:0;font:inherit;padding:0;text-align:left}
/* report */
.repnav{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:12px 0 2px}
.repnav .arrow{width:38px;height:38px;border-radius:50%;border:3px solid var(--maroon);background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.repnav .plabel{text-align:center}
.repnav .plabel b{font-size:14.5px;display:block}
.repnav .plabel span{font-size:12px;color:var(--ink50)}
.calwrap{border:3px solid var(--maroon);border-radius:16px;padding:14px;background:#fff;margin-top:12px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.calgrid .dow{font-size:10.5px;font-weight:800;text-align:center;color:var(--ink50);padding:4px 0}
.calgrid .day{border:0;background:none;font-size:13px;font-weight:600;color:var(--ink);height:34px;border-radius:50%;position:relative}
.calgrid .day.inrange{background:var(--pale2);border-radius:8px}
.calgrid .day.end{background:var(--maroon);color:#fff;font-weight:800}
.calgrid .day.dim{color:var(--graytx);pointer-events:none}
.wamsg{background:var(--pale);border:3px solid var(--maroon);border-radius:14px;padding:13px 15px;font-size:13px;line-height:1.65;white-space:pre-line}
/* ===== RESTYLE: bahasa desain Janji Jiwa, palet & data Rakata ===== */
:root{
  --ink:#2A2320; --ink70:rgba(42,35,32,.66); --ink50:rgba(42,35,32,.45);
  --line:rgba(42,35,32,.10); --cardline:#EFE9DC;
  --shadow:0 4px 16px rgba(80,45,15,.07); --shadow-lg:0 10px 28px rgba(80,45,15,.12);
}
h1,h2,h3,.serif,.price,.count,.queue-big,.stat .v{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
.screen{background:#fff}
.scrollbody{background:#FCFBF8}
.menulayout{background:#FCFBF8;border-top:1px solid var(--line)}
/* header layar: putih bersih ala JJ */
.minihead{background:#fff;color:var(--ink);border-bottom:1px solid #F1ECE1;padding:12px 16px}
.minihead .t{font-family:Inter;font-weight:800;font-size:16.5px;letter-spacing:0}
.minihead img{box-shadow:none}
.minihead .step{background:var(--pale);color:var(--maroon)}
.minihead .backbtn{background:#fff;border:1.5px solid #E2DACB;border-radius:999px;color:var(--ink);font-weight:700;padding:6px 13px}
/* band promo: kartu membulat, tanpa lingkaran dekoratif */
.band{margin:12px 16px 4px;border-radius:20px;box-shadow:var(--shadow-lg);padding:20px}
.band .circ,.band .circ2{display:none}
.band h2{font-size:24px;max-width:none}
.band p{max-width:none}
/* tombol pil besar */
.btn{border:none;border-radius:999px;min-height:50px;box-shadow:none;font-size:15px}
.btn.small{min-height:42px;border-radius:999px}
.btn-maroon{background:var(--maroon);color:#fff;box-shadow:0 8px 18px rgba(138,31,8,.22)}
.btn-yellow{background:var(--yellow);color:var(--maroon)}
.btn-outline{background:#fff;color:var(--ink);border:1.5px solid #DCD4C3}
.btn-white{background:#fff;color:var(--maroon);border:1.5px solid #EFE9DC}
.btn-off{background:#E4E1DB;color:#A79E92;border:none}
/* kartu putih soft-shadow */
.card,.prod,.slotcard,.reviewrow,.stat,.infocard,.modecard,.outletcard,.calwrap{border:1px solid var(--cardline);box-shadow:var(--shadow);border-radius:18px}
.mcard,.showcard{border:1px solid var(--cardline);box-shadow:var(--shadow);border-radius:16px}
.qrwrap{border:1px solid var(--cardline);box-shadow:var(--shadow);border-radius:20px}
.prod{border-radius:16px}
.addbtn{border:none;border-radius:999px;box-shadow:none}
.iconbtn{border:1.5px solid #E2DACB}
.chip{border:1.5px solid #E2DACB;color:var(--ink)}
.chip.on{background:var(--maroon);border-color:var(--maroon);color:#fff}
.placeholder-box{border:2px dashed #D9CFB8;background:#FBF7EC;border-radius:18px}
/* stepper lingkaran ala JJ */
.stepper{border:none;background:transparent;gap:9px;overflow:visible}
.stepper button{width:34px;height:34px;border-radius:50%;border:1.5px solid #CFC8BA;background:#fff;color:var(--ink);font-size:17px;display:flex;align-items:center;justify-content:center}
.stepper .n{width:auto;min-width:22px;background:transparent}
/* navigasi bawah */
.bottomnav{border-top:1px solid #F1ECE1;box-shadow:0 -6px 18px rgba(80,45,15,.05)}
.bottomnav button{color:var(--ink50)}
.bottomnav button.on{color:var(--maroon)}
.bottomnav .ic{background:transparent}
.bottomnav button.on .ic{background:var(--pale)}
/* bar keranjang melayang ala JJ */
.cartbar{background:#fff;color:var(--ink);box-shadow:0 -8px 22px rgba(80,45,15,.12);padding:12px 16px}
.cartbar .amt{font-family:Inter;font-weight:800;color:var(--ink);font-size:19px}
.cartbar .viewbtn{background:var(--maroon);color:#fff;border-radius:999px;padding:12px 18px}
.cartbar .qbadge{background:var(--yellow);color:var(--maroon);border:none}
/* bar aksi bawah (detail) */
.bbar{background:#fff;border-top:1px solid #F1ECE1;box-shadow:0 -8px 22px rgba(80,45,15,.08)}
.bbar .prblk .pr{font-family:Inter;font-weight:800}
/* segmented control mode */
.modepills{background:#F1EFE9;border:none;border-radius:999px}
.modepills button{color:var(--ink70)}
.modepills button.on{background:var(--maroon);color:#fff;box-shadow:0 4px 10px rgba(138,31,8,.25)}
.searchbar{border:1.5px solid #E9E4D8;box-shadow:var(--shadow)}
.searchbar:focus-within{border-color:var(--maroon)}
/* rel kategori */
.catrail{background:#F7F5F1;border-right:1px solid var(--line)}
.catrail button{border-bottom:1px solid var(--line);color:var(--ink70)}
.catrail button.on{background:#fff;color:var(--maroon)}
/* radio-card opsi */
.optrow{border:1.5px solid #E8E2D6;border-radius:14px}
.optrow.on{border-color:var(--maroon);background:#FFF9EC}
.optrow .rd{border:2.5px solid #C9C2B4}
.optrow.on .rd{border-color:var(--maroon)}
.payradio{border:1.5px solid #E8E2D6;border-radius:16px}
.payradio.on{border-color:var(--maroon);background:#FFF9EC}
.payradio .rd{border:2.5px solid #C9C2B4}
.payradio.on .rd{border-color:var(--maroon)}
.slotcard .editbtn{border:1.5px solid #E2DACB}
.field input,.field textarea{border:1.5px solid #E3DED2;border-radius:14px}
.field input:focus,.field textarea:focus{border-color:var(--maroon)}
.radio2 button{border:1.5px solid #E8E2D6;border-radius:16px;background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.radio2 button.on{background:#FFF9EC;border-color:var(--maroon);color:var(--maroon)}
/* sapaan, lonceng, carousel, tile mode */
.greet .hi{font-family:Inter;font-weight:800;font-size:22px;color:var(--ink)}
.bellbtn{border:1px solid var(--cardline);box-shadow:var(--shadow)}
.cslide .inner{border:none;box-shadow:var(--shadow-lg);border-radius:18px}
.modecard .ic,.outletcard .pin,.infocard .ic{background:var(--yellow);border:none}
.sec-pale{background:#FAF6EC}
.sec-yellow{background:#FFF3C4}
.track .medal{border-width:2.5px}
.tnc{border-radius:16px}
.toast{border-radius:16px}
.skel{background:#E9E6DF}
.splitbar{border:1px solid var(--cardline)}
.wamsg{border:1px solid var(--cardline)}
.repnav .arrow{border:1.5px solid #E2DACB}
th{border-bottom:2px solid var(--line)}
.queue-big{color:var(--maroon)}
/* Batch 66: nomor antrean di Lacak Pesanan tampil sebagai panel marun terangkat di
   tengah: angka besar krem di atas marun, aksen garis emas di tepi atas, ring emas
   lembut di dalam, dan bayangan halus. */
.queuepanel{background:var(--maroon);border-radius:16px;padding:15px 12px 13px;text-align:center;border-top:5px solid var(--yellow);box-shadow:0 10px 22px rgba(94,18,2,.28),inset 0 0 0 2px rgba(228,188,50,.35)}
.queuepanel .qplbl{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.queuepanel .queue-big{font-size:84px;color:#FFF6DC;line-height:1.04;margin-top:2px}
/* tab Ongoing / History ala JJ */
.ordertabs{display:flex;background:#fff;border-bottom:2px solid #F1ECE1;flex:none}
.ordertabs button{flex:1;background:none;border:0;padding:13px 8px 11px;font-size:15px;font-weight:700;color:var(--ink50);border-bottom:3px solid transparent;margin-bottom:-2px}
.ordertabs button.on{color:var(--maroon);border-bottom-color:var(--maroon)}
/* kartu riwayat: header berwarna + tombol pil */
.histcard{background:#fff;border:1px solid var(--cardline);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px}
.histcard .hh{background:var(--maroon);color:#fff;font-weight:800;font-size:15.5px;padding:12px 16px}
.histcard .hb{padding:13px 16px 15px}
.histcard .hrow{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:3px 0}
.histcard .hbtns{display:flex;gap:10px;margin-top:12px}
.histcard .hbtns .btn{flex:1}
/* ===== Batch 18–20: switch, state nonaktif, animasi, token ===== */
.field select{width:100%;border:1.5px solid #E3DED2;border-radius:14px;padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink);outline:none}
.field select:focus{border-color:var(--maroon)}
/* field dengan ikon (Login Admin): status fokus jelas di bingkai field */
.iconfield{display:flex;align-items:center;gap:10px;border:1.5px solid #E3DED2;border-radius:14px;background:#fff;padding:0 8px 0 13px;transition:border-color .18s ease,box-shadow .18s ease}
.iconfield:focus-within{border-color:var(--maroon);box-shadow:0 0 0 3px var(--pale)}
.iconfield>svg{flex:none}
.iconfield input{flex:1;min-width:0;border:0;background:transparent;padding:12px 0;font:inherit;font-size:15px;color:var(--ink);outline:none}
.pinEye{flex:none;width:38px;height:38px;border:0;background:var(--pale);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.switch{width:58px;height:34px;border-radius:999px;background:#D8D2C6;border:none;position:relative;transition:background .25s ease;flex:none;padding:0}
.switch i{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;transition:left .25s ease;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.switch.on{background:var(--green)}
.switch.on i{left:27px}
.modepills button.dis{opacity:.45}
.radio2 button.dis{opacity:.5}
.modecard .delivOffNote{display:none;color:#B3261E;font-weight:700;font-size:12px}
.modecard.off{opacity:.6}
.modecard.off .delivOffNote{display:block}
.btn{transition:transform .16s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.98)}
.chip,.optrow,.payradio,.mcard,.showcard,.modecard{transition:border-color .18s ease,background .18s ease,transform .16s ease}
.screen.active{animation:scrIn .32s ease both}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qbadge{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.toast.show{animation:tin .3s ease both}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.screen.active,.qbadge,.toast.show{animation:none}}
.stepper button{width:38px;height:38px}
.bottomnav button{padding:10px 2px 11px}
.mcard,.showcard{border-radius:18px}
select.paypick{border:1.5px solid #E3DED2;border-radius:12px;padding:10px;font:inherit;background:#fff;color:var(--ink)}
/* ===== Batch 17: poles lanjutan ===== */
/* bar aksi dua baris ala JJ: harga + stepper di atas, CTA pil penuh di bawah */
.bbar.stack{flex-wrap:wrap}
.bbar.stack .stepper{margin-left:auto}
.bbar.stack .cta{flex:1 1 100%;order:3;margin-top:10px;width:100%}
/* foto detail & paket jadi kartu membulat melayang ala JJ */
.screen[data-screen="detail"] .scrollbody>img,.screen[data-screen="detailPaket"] .scrollbody>img{width:calc(100% - 32px)!important;margin:14px 16px 2px;border-radius:20px;box-shadow:var(--shadow-lg)}
/* judul section tebal ala JJ */
.sectitle{font-size:19px;font-weight:800;color:var(--ink);margin:0}
/* rel horizontal Untuk Kamu (geser kanan) di Homepage dua sumbu.
   scroll-padding menjaga kartu pertama berhenti sejauh margin halaman (16px) dari tepi kiri, tidak mepet tepi. */
.hrail{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 10px;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding-left:16px;scroll-padding-right:16px}
.hrail::-webkit-scrollbar{display:none}
.hrail .showcard{flex:0 0 148px;scroll-snap-align:start}
.hrail .showcard img{height:92px}
/* badge status admin: selalu tertulis jelas */
.badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;vertical-align:middle;white-space:nowrap}
.badge.on{background:#E3F1E3;color:var(--green)}
.badge.off{background:#E9E2D6;color:#8A7A6A}
.badge.out{background:var(--yellow);color:var(--maroon)}
.badge.free{background:var(--pale);color:var(--maroon)}
.admrowbtns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;width:100%}
.admrowbtns .addbtn{margin-left:0}
/* ===== Batch 30/31: status ganda, pending COD, additional per item ===== */
.statchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.statchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--pale);color:var(--maroon)}
.statchip.pay{background:#FAF6EC;color:var(--ink70);border:1.5px solid #E8DFC8}
.statchip.pay.unpaid{background:#FBEAEA;color:#B3261E;border-color:#EFC9C4}
.statchip.pay.paid{background:#E3F1E3;color:var(--green);border-color:#BCD8BC}
.wanum{display:block;font-size:13px;font-weight:700;color:var(--ink70);margin-top:6px}
.miniswitch{width:44px;height:26px;border-radius:999px;background:#D8D2C6;border:none;position:relative;flex:none;padding:0;transition:background .25s ease}
.miniswitch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .25s ease;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.miniswitch.on{background:var(--green)}
.miniswitch.on i{left:21px}
.addoptrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:2px solid var(--line)}
.addoptrow:first-of-type{border-top:0}
.addgroupbox{border:1px solid var(--cardline);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:#fff}
.grpreq{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:var(--maroon);color:#fff;text-transform:uppercase}
.grpopt{font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:var(--pale);color:var(--maroon);text-transform:uppercase}
/* ===== Splash final: tiga band miring ===== */
.sp-band{position:relative}
.sp-bg,.sp-line{position:absolute;inset:0}
.sp-line{background:var(--yellow);transform:translateY(3px)}
.sp-in{position:relative;z-index:1;height:100%}
.sp-top{flex:0 0 30%;z-index:3}
.sp-top .sp-bg,.sp-top .sp-line{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 26px))}
.sp-mid{flex:0 0 calc(29% + 26px);margin-top:-26px;z-index:2}
.sp-mid .sp-bg,.sp-mid .sp-line{clip-path:polygon(0 0,100% 26px,100% 100%,0 calc(100% - 26px))}
.sp-bot{flex:1 1 auto;min-height:0;margin-top:-26px;z-index:1}
.sp-bot .sp-bg{clip-path:polygon(0 0,100% 26px,100% 100%,0 100%)}
.sp-ledakan{font-size:62px;font-weight:800;color:var(--yellow);line-height:.98}
.sp-rasa{font-size:50px;font-weight:800;color:var(--yellow);line-height:1;margin:-4px 0 0;transform:rotate(-5deg)}
@media(max-width:480px){.sp-ledakan{font-size:50px}.sp-rasa{font-size:40px}}
/* ===== Batch 34: node Selesai hijau, kartu stok, kartu statistik laporan ===== */
/* node terminal Selesai pada Lacak Pesanan: lingkaran hijau berisi centang putih */
.tstep.finaldone .medal{background:var(--green);border-color:var(--green)}
/* kartu stok admin: mirip kartu Menu, berkelompok per kategori */
.stockgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stockcard{border:3px solid var(--maroon);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.stockcard>img{width:100%;height:88px;object-fit:cover}
.stockcard .bd{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1;gap:5px}
.stockcard .nm{font-weight:800;font-size:13.5px;line-height:1.3;color:var(--ink)}
.stockcard .tp{font-size:11.5px;color:var(--ink50);font-weight:600}
.stockcard select.paypick{width:100%;padding:8px 9px;font-size:12.5px;border-radius:10px;margin-top:auto}
.stockcard.off{opacity:.62;border-color:rgba(138,31,8,.35)}
.stockcard .codechip{align-self:flex-start;background:var(--yellow);border:2.5px solid var(--maroon);border-radius:9px;font-weight:800;font-size:11.5px;padding:3px 8px;color:var(--maroon)}
.stockgroup{margin-top:18px}
.stockgroup:first-child{margin-top:4px}
.stockgroup .gh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.stockgroup .gh b{font-size:16px}
.stockgroup .gh span{font-size:12px;color:var(--ink50)}
/* kartu statistik laporan: label kecil di atas, angka sedang satu baris penuh */
.stat.repstat{display:flex;flex-direction:column;justify-content:center;gap:3px}
.stat.repstat .v{font-size:21px;white-space:nowrap;line-height:1.15}
/* titik grafik laporan bisa diklik */
#repChart circle.reppoint{cursor:pointer}
/* ===== Batch 49: nav customer aktif maroon, badge mode admin ===== */
/* Item navigasi bawah customer yang aktif: latar maroon, teks putih, ikon putih.
   Hanya nav customer (data-nav); nav admin (data-anav) tidak berubah. */
.bottomnav[data-nav] button.on{background:var(--maroon);color:#fff}
.bottomnav[data-nav] button .ic{color:var(--maroon)}
.bottomnav[data-nav] button.on .ic{background:transparent;color:#fff}
/* badge mode pesanan di admin: Diantar vs Ambil Langsung */
.badge.modeD{background:var(--maroon);color:#fff}
.badge.modeP{background:var(--pale2);color:var(--maroon)}
/* ===== Batch 53: sosial media, bahasa spanduk, game Rakata Blast ===== */
/* strip Ikuti Rakata: lingkaran maroon, glyph putih, label di bawah */
.socialrow{display:flex;gap:18px;justify-content:center;padding:4px 0 2px}
.socialbtn{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;color:var(--ink)}
.socialbtn .scirc{width:52px;height:52px;border-radius:50%;background:var(--maroon);display:flex;align-items:center;justify-content:center}
.socialbtn span{font-size:12px;font-weight:700}
/* Batch 66: strip Ikuti Rakata di Tentang Kami hanya menampilkan ikon + nama kanal.
   Teks handle (@...) dihilangkan: ketukan pada kanal langsung membuka tujuannya. */
/* bahasa desain spanduk: blok sorot kuning + nama bergaris bawah kuning */
.hlblock{background:var(--yellow);color:var(--maroon);padding:3px 10px;border-radius:7px;font-weight:800;display:inline-block}
.hl-name{border-bottom:5px solid var(--yellow);padding-bottom:1px}
/* maskot tahap di Lacak */
.trackmascot{border-radius:16px;overflow:hidden;border:1px solid var(--cardline);margin-bottom:14px;background:#FDF6D8}
.trackmascot img{width:100%;height:168px;object-fit:cover}
.trackmascot .tm-t{padding:10px 14px 12px}
.trackmascot .tm-t b{font-size:16.5px;display:block}
.trackmascot .tm-t span{font-size:12.5px;color:var(--ink70);line-height:1.5;display:block;margin-top:2px}
/* strip status pesanan di layar game */
.ordstrip{display:flex;align-items:center;gap:10px;background:var(--maroon);color:#fff;border-radius:14px;padding:10px 12px;margin-bottom:12px}
.ordstrip .os-t{flex:1;min-width:0;font-size:13px;line-height:1.45}
.ordstrip .os-t b{display:block;font-size:13.5px}
.ordstrip button{flex:none;background:var(--yellow);color:var(--maroon);border:0;font-weight:800;font-size:12.5px;padding:9px 13px;border-radius:999px}
/* papan Rakata Blast */
.gboard{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;background:#F1EFE9;border:1.5px solid #E8E2D6;border-radius:14px;padding:6px;touch-action:none;position:relative}
.gcell{aspect-ratio:1;border-radius:7px;background:#E7E1D2;display:flex;align-items:center;justify-content:center;position:relative}
.gcell.fill{border:1.5px solid rgba(42,35,32,.18)}
.gcell.ghostok{background:#BFE3C0}
.gcell.ghostbad{background:#F3C1BA}
.gtray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.gslot{background:#F7F5F1;border:1.5px solid #E8E2D6;border-radius:14px;min-height:104px;display:flex;align-items:center;justify-content:center;padding:8px}
.gslot.empty{opacity:.45}
.gpiece{display:grid;gap:2.5px;cursor:grab;touch-action:none;position:relative}
/* Batch 66: area sentuh keping Blast diperluas 10px ke segala arah lewat ::after
   transparan, jadi keping kecil tetap gampang kepegang jari. */
.gpiece::after{content:"";position:absolute;inset:-10px}
.gpiece.sel{outline:3px solid var(--yellow);outline-offset:4px;border-radius:6px}
.gpcell{border-radius:4.5px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(42,35,32,.18)}
.gcombo{position:absolute;top:118px;left:50%;transform:translate(-50%,-8px);z-index:30;display:none;background:var(--maroon);color:#fff;border-radius:999px;padding:10px 20px;text-align:center;box-shadow:0 8px 22px rgba(94,18,2,.35);pointer-events:none;white-space:nowrap}
.gcombo.show{display:block;animation:gcombopop .28s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes gcombopop{0%{transform:translate(-50%,-8px) scale(.8);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.gcombo.show{animation:none}.gcell.pop,.gcell.flashc,.gboard.allflash{animation:none}}
.gover{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(255,255,255,.94);text-align:center;padding:24px}
.gover.show{display:flex}
.addthumb{width:40px;height:40px;object-fit:cover;border-radius:9px;flex:none;border:1px solid var(--cardline)}
.optrow .addthumb{width:36px;height:36px}
/* ===== Batch 54: caption di bawah foto, tombol game melayang, hub 3 game, poles game ===== */
/* Caption carousel: bar maroon solid DI BAWAH foto, tidak menutupi makanan. Judul Marcellus, teks kecil Inter. */
.cslide .inner{display:flex;flex-direction:column}
.cslide .cap{position:static;font-family:Marcellus,serif;font-weight:400;font-size:15px;padding:8px 14px;line-height:1.35}
.cslide .cap small{font-family:Inter,sans-serif;font-size:11px}
/* tombol game melayang: fixed terhadap frame Beranda, tidak ikut scroll konten */
.gamefab{position:absolute;right:14px;bottom:86px;z-index:26;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.gamefab .gfcirc{width:52px;height:52px;border-radius:50%;background:var(--maroon);border:3px solid #fff;box-shadow:0 8px 20px rgba(94,18,2,.35);display:flex;align-items:center;justify-content:center}
.gamefab .gflab{background:#fff;color:var(--maroon);font-weight:800;font-size:11px;padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(94,18,2,.22);border:1px solid var(--cardline)}
.gamefab:active .gfcirc{transform:scale(.94)}
.sosmedfab{position:absolute;right:14px;bottom:172px;z-index:27;display:flex;flex-direction:column;align-items:center;gap:10px}
.sosmedmain{background:none;border:0;padding:0;width:52px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-family:inherit}
.sosmedmain .smcirc{width:52px;height:52px;border-radius:50%;background:var(--maroon);border:3px solid #fff;box-shadow:0 8px 20px rgba(94,18,2,.35);display:flex;align-items:center;justify-content:center}
.sosmedmain .smlab{background:#fff;color:var(--maroon);font-weight:800;font-size:11px;padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(94,18,2,.22);border:1px solid var(--cardline)}
.sosmedmain:active .smcirc{transform:scale(.94)}
/* Batch 62: fan sosmed jadi BAR HORIZONTAL PUTIH di atas FAB Sosmed, memanjang ke kiri.
   Batch 64: label kanal pindah ke BAWAH logo (permintaan user), jadi tiap item adalah
   tumpukan vertikal lingkaran logo + label kecil di bawahnya di dalam bar putih yang
   sama. Bar jadi lebih ramping sehingga tidak lagi melebar keluar frame. Urutan dari
   kanan (terdekat FAB) ke kiri tetap: WA, IG, TikTok. */
.sosmedfan{position:absolute;bottom:calc(100% + 10px);right:0;display:flex;flex-direction:row;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--cardline);border-radius:26px;padding:10px 16px;box-shadow:0 10px 26px rgba(94,18,2,.26);pointer-events:none;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.sosmedfab.open .sosmedfan{opacity:1;visibility:visible;transform:none;transition:opacity .24s ease,transform .24s ease,visibility 0s}
.fanitem{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-family:inherit;pointer-events:none;opacity:0;visibility:hidden;transform:translateX(10px) scale(.92);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.sosmedfab.open .fanitem{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .24s ease,transform .24s ease,visibility 0s;transition-delay:var(--d,0s)}
.fancirc{width:40px;height:40px;flex:none;border-radius:50%;background:var(--maroon);border:2.5px solid #fff;box-shadow:0 4px 10px rgba(94,18,2,.3);display:flex;align-items:center;justify-content:center}
.fanitem:active .fancirc{transform:scale(.93)}
.fanlab{color:var(--ink);font-weight:800;font-size:11px;white-space:nowrap;line-height:1}
.fannote{display:block;color:var(--ink50);font-size:12px;font-weight:700;padding:2px 2px;white-space:nowrap}
.sosmedfab .sosmedfan .fannote{pointer-events:none}
@media (prefers-reduced-motion: reduce){.fanitem,.sosmedfab.open .fanitem,.sosmedfan,.sosmedfab.open .sosmedfan{transition:none}}
/* panel maskot game: latar krem pucat menyatu dengan background gambar maskot */
.mascotpanel{background:#FCF7EC;border:1px solid var(--cardline);border-radius:18px;padding:10px 12px 4px;text-align:center}
.mascotpanel img{width:150px;max-width:60%;height:auto;display:block;margin:0 auto}
/* kartu hub game */
.hubcard{display:flex;gap:13px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--cardline);box-shadow:var(--shadow);border-radius:18px;padding:14px;margin:0 0 12px;cursor:pointer}
.hubcard .hic{width:52px;height:52px;flex:none;border-radius:14px;background:var(--pale);border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center}
.hubcard b{font-size:16.5px;display:block}
.hubcard span.d{font-size:12.5px;color:var(--ink70);line-height:1.45;display:block;margin-top:2px}
.hubcard .play{flex:none;background:var(--yellow);color:var(--maroon);font-weight:800;font-size:13px;padding:9px 15px;border-radius:999px}
/* papan Blast: kedalaman balok + ghost palet Rakata + shake multi-clear + burst */
.gcell.fill{box-shadow:inset 0 -3px 0 rgba(42,35,32,.22),inset 0 3px 0 rgba(255,255,255,.32)}
.gcell.alt{background:#E9DFC6}
.gcell.fill::after{content:'';position:absolute;right:4px;bottom:4px;width:4.5px;height:4.5px;border-radius:50%;background:rgba(255,255,255,.4)}
.gcell.pop{animation:gpop .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes gpop{0%{transform:scale(.55)}100%{transform:scale(1)}}
.gcell.flashc{animation:gflash .38s ease-out forwards}
@keyframes gflash{0%{opacity:1}55%{opacity:1}100%{opacity:.15}}
.gboard.allflash{animation:gallflash .3s ease}
@keyframes gallflash{0%{background:#F5E3A0}100%{background:#F1EFE9}}
.gcell.ghostok{background:#F7EBC0;box-shadow:inset 0 0 0 2px var(--maroon)}
.gcell.ghostbad{background:rgba(138,31,8,.12);box-shadow:none}
.gboard.shake{animation:gshake .28s ease}
@keyframes gshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.gburst{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.gburst i{position:absolute;width:8px;height:8px;border-radius:2.5px;animation:gburstfly .5s ease-out forwards}
@keyframes gburstfly{to{transform:translate(var(--bx),var(--by)) rotate(160deg) scale(.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.gboard.shake{animation:none}.gburst i{animation:none;display:none}}
/* panggung game canvas (Stack Ball & Fruit Ninja Rakata) */
.gamecvwrap{position:relative;border:1.5px solid #E8E2D6;border-radius:14px;background:#F7F2E4;overflow:hidden;touch-action:none}
/* Batch 66, audit sentuhan game: canvas di dalam bungkus permainan juga dinyatakan
   touch-action:none secara eksplisit (elemen yang benar-benar disentuh jari), layar
   game menghentikan rantai scroll ke leluhur supaya gerakan yang sudah tertangkap
   permainan tidak direbut scroll halaman, dan semua tombol di layar game memberi
   umpan balik tekan yang terlihat (mengecil sesaat). */
.gamecvwrap canvas{touch-action:none;display:block}
.screen[data-screen="game"] .scrollbody,.screen[data-screen="stackGame"] .scrollbody,.screen[data-screen="ninjaGame"] .scrollbody{overscroll-behavior:none}
.screen[data-screen="gameHub"] .btn:active,.screen[data-screen="gameStart"] .btn:active,.screen[data-screen="game"] .btn:active,.screen[data-screen="stackStart"] .btn:active,.screen[data-screen="stackGame"] .btn:active,.screen[data-screen="ninjaStart"] .btn:active,.screen[data-screen="ninjaGame"] .btn:active{transform:scale(.97)}
.screen[data-screen="gameHub"] .backbtn:active,.screen[data-screen="gameStart"] .backbtn:active,.screen[data-screen="game"] .backbtn:active,.screen[data-screen="stackStart"] .backbtn:active,.screen[data-screen="stackGame"] .backbtn:active,.screen[data-screen="ninjaStart"] .backbtn:active,.screen[data-screen="ninjaGame"] .backbtn:active{transform:scale(.94)}
.hubcard:active{transform:scale(.99)}
/* Batch 64: target sentuh tombol kembali di semua layar game minimal 44px tinggi,
   supaya tidak terasa "tidak kepencet" di HP. Hanya layar game, layar lain tidak berubah. */
.screen[data-screen="gameHub"] .backbtn,.screen[data-screen="gameStart"] .backbtn,.screen[data-screen="game"] .backbtn,.screen[data-screen="stackStart"] .backbtn,.screen[data-screen="stackGame"] .backbtn,.screen[data-screen="ninjaStart"] .backbtn,.screen[data-screen="ninjaGame"] .backbtn{min-height:44px;display:inline-flex;align-items:center}
/* kartu mode di layar mulai Stack Ball Rakata */
.modecard{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--cardline);box-shadow:var(--shadow);border-radius:18px;padding:14px 16px;margin-top:12px}
.modecard .mhead{display:flex;align-items:center;gap:8px}
.modecard .mhead b{font-size:16.5px}
.modebadge{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--pale2);color:var(--maroon);padding:4px 9px;border-radius:999px}
.modecard .mhow{font-size:12.5px;color:var(--ink70);line-height:1.55;margin:8px 0 0}
.modecard .mbest{font-size:12.5px;color:var(--ink70);margin:8px 0 0}
.modecard .mbest b{color:var(--maroon)}
/* Batch 69: pilihan skin bola Stack Ball (Kentang Bulat / Ayam Rakata) */
.skinrow{display:flex;gap:10px}
.skinchip{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:#FFFDF6;border:1.5px solid var(--cardline);border-radius:14px;padding:10px 8px 9px;cursor:pointer;font:inherit;color:var(--ink)}
.skinchip b{font-size:13px}
.skinchip span{font-size:11px;color:var(--ink50);text-align:center;line-height:1.35}
.skinchip.on{border-color:var(--maroon);background:var(--pale2);box-shadow:0 0 0 1.5px var(--maroon) inset}
.skinchip:active{transform:scale(.97)}
.gamecvwrap canvas{display:block;width:100%;height:auto}
.gcover{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(253,246,216,.96);text-align:center;padding:22px}
.gcover.show{display:flex}
.ghud{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ghud .gv{font-size:30px;font-weight:800;line-height:1.1}
.ghud .gk{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink50)}
.livesic{display:inline-flex;gap:4px;vertical-align:middle}
/* ===== Batch 55: rebuild 3 game. Layar mulai per game, legenda, kombo Blast, float skor ===== */
.lgrow{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--cardline)}
.lgrow:last-child{border-bottom:0;padding-bottom:2px}
.lgic{width:48px;height:48px;flex:none;border-radius:12px;background:#FCF7EC;border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center}
.lgrow b{font-size:14.5px;display:block}
.lgrow span{font-size:12.5px;color:var(--ink70);line-height:1.45;display:block;margin-top:1px}
.combochip{display:none;align-items:center;gap:6px;background:var(--maroon);color:#fff;font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:999px}
.combochip.show{display:inline-flex}
.combochip b{color:var(--yellow);font-size:14px}
.gcell.willclear{background:#F5E3A0;box-shadow:inset 0 0 0 3px var(--maroon)}
.gpcell{border:2px solid rgba(94,18,2,.5)}
.gpcell:nth-child(odd){border-radius:6px 4px 6px 4px}
.gpcell:nth-child(even){border-radius:4px 6px 4px 6px}
.gpiece{will-change:transform}
.gbtn-float{position:absolute;bottom:10px;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--cardline);box-shadow:0 4px 12px rgba(94,18,2,.22);display:flex;align-items:center;justify-content:center;z-index:7;cursor:pointer;padding:0}
.gbtn-float:active{transform:scale(.93)}
.gfloat{position:absolute;z-index:8;pointer-events:none;font-weight:800;font-size:19px;color:var(--maroon);text-shadow:0 1px 0 #fff,0 0 6px rgba(255,255,255,.8);opacity:0}
.gfloat.go{animation:gfloatup 1s ease-out forwards}
@keyframes gfloatup{0%{opacity:0;transform:translateY(6px)}18%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
@media(prefers-reduced-motion:reduce){.gfloat.go{animation:none}}
.startmascot{max-width:210px;margin:0 auto}
.startmascot img{width:132px}
/* ===== Batch 57: popup promo setelah splash + carousel hero full-bleed ===== */
/* Popup: backdrop gelap semi-transparan (Beranda redup terlihat di baliknya, bukan blok solid),
   kartu membulat 20px dengan overflow hidden supaya gambar terpotong mengikuti sudut.
   Animasi hanya transform + opacity: masuk 300ms ease-out, keluar 180ms. */
/* Batch 62: kolom popup = kartu gambar + tombol X DI BAWAH gambar, di tengah, di luar
   kartu sepenuhnya (jarak 12px, tidak pernah menimpa gambar). Tinggi gambar dibatasi
   maks 48vh dengan object-fit contain: gambar panjang/portrait mengecil utuh dengan
   aspek terjaga, tidak meluber dan tidak terpotong seenaknya. Lebar kartu tetap.
   Gambar (maks 48vh) + jarak 12px + X 44px selalu muat jauh di dalam 90vh, jadi X
   selalu terlihat dan kolom tetap terpusat vertikal untuk gambar admin apa pun. */
.promo-pop{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease-out}
.promo-pop[hidden]{display:none}
.promo-pop.show{opacity:1}
.promo-pop.closing{transition-duration:.18s}
.promo-card{position:relative;width:100%;max-width:318px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;transform:scale(.94);transition:transform .3s ease-out,opacity .3s ease-out}
.promo-pop.show .promo-card{opacity:1;transform:scale(1)}
.promo-pop.closing .promo-card{transition-duration:.18s}
.promo-card img{display:block;width:100%;height:auto;max-height:48vh;object-fit:contain;background:#fff}
.promo-x{flex:none;margin-top:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transform:scale(.94);transition:transform .3s ease-out,opacity .3s ease-out}
.promo-pop.show .promo-x{opacity:1;transform:scale(1)}
.promo-pop.closing .promo-x{transition-duration:.18s}
.promo-x:active{transform:scale(.92)}
/* Carousel hero Beranda (Batch 62): FULL-BLEED PURE GAMBAR. Menggantikan peek Batch 59
   yang membuat dua slide + caption bertabrakan terlihat seperti bug. Slide kini selebar
   100% viewport, edge-to-edge tanpa gap dan tanpa sliver, dan TANPA teks apa pun: caption
   bar disembunyikan khusus di hero (data slide admin tetap utuh; carousel Homepage Pesanan
   Aktif dan Highlight tidak berubah). Track digerakkan transform saja dengan langkah =
   lebar slide penuh terukur; viewport overflow hidden sehingga tidak ada dua slide diam
   terlihat sekaligus dan tidak ada overflow horizontal halaman. */
.herocar{display:block;position:relative;overflow:hidden;width:100%;padding:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab}
/* Batch 64: touch-action dinyatakan juga di track, slide, dan gambar (elemen yang
   benar-benar disentuh jari), supaya nilai pan-y tidak terdilusi rantai ancestor dan
   geseran horizontal selalu sampai ke handler drag, tidak direbut scroll halaman. */
.herocar .ctrack,.herocar .cslide,.herocar .cslide .inner,.herocar .cslide img{touch-action:pan-y}
.herocar:active{cursor:grabbing}
.herocar .ctrack{display:flex;gap:0}
.herocar .cslide{flex:0 0 100%;min-width:0;padding:0}
.herocar .cslide .inner{border:0;border-radius:0}
.herocar .cslide .cap{display:none}
.herocar .cslide img{-webkit-user-drag:none;user-select:none}
/* Batch 67: varian hero geser untuk Homepage Pesanan Aktif. Bahasa desainnya sama
   dengan hero Beranda (gambar penuh tanpa teks, tanpa bingkai), wadahnya tetap
   carousel geser bawaan supaya slide dari admin tampil apa adanya. */
.carousel.herocar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto}
/* Dots hero menumpang di area bawah hero (di dalam viewport carousel, kanan bawah),
   di atas kartu sapaan yang menimpa hero, jadi tidak pernah tertutup kartu. */
#carDots{position:absolute;right:14px;bottom:10px;z-index:5;padding:0}
/* Kartu sapaan Beranda (Batch 62, pola Tomoro/Janji Jiwa): kartu putih NAIK menimpa
   tepi bawah hero dengan margin atas negatif, sudut membulat, bayangan halus. Isi kartu
   tidak berubah: sapaan admin-editable + sub + bel. */
.greetcard{position:relative;z-index:2;margin:-18px 14px 0;background:#fff;border:1px solid var(--cardline);border-radius:18px;box-shadow:0 10px 24px rgba(94,18,2,.14);padding:13px 16px 11px}
/* Dots carousel sebagai tombol (bisa diketuk + aria), area sentuh diperluas lewat ::after */
.dots button{width:8px;height:8px;border-radius:50%;background:var(--pale2);border:0;padding:0;cursor:pointer;position:relative;transition:width .25s ease,background .25s ease;font:inherit;box-shadow:0 1px 4px rgba(60,20,5,.35)}
.dots button.on{background:var(--maroon);width:20px;border-radius:99px}
.dots button::after{content:"";position:absolute;inset:-10px}
@media(prefers-reduced-motion:reduce){.promo-pop,.promo-card,.promo-pop.show .promo-card,.promo-x,.promo-pop.show .promo-x,.dots button{transition:none}.herocar .ctrack{transition:none!important}}

/* ===== Perbaikan 2026-10-29 Tugas 2: ruang bawah layar game, tidak tertutup bottom nav =====
   Bottom nav adalah saudara flex .scrollbody (bukan overlay); yang membuat papan, baki,
   dan menara "tertutup" adalah isi layar game yang lebih tinggi dari scrollbody di HP.
   gameFitLayout (JS) mengecilkan papan/kanvas mengikuti tinggi terukur; CSS di bawah
   merapatkan jarak vertikal dan memberi ruang bawah tetap. */
.screen[data-screen="game"] .scrollbody>.sec,.screen[data-screen="stackGame"] .scrollbody>.sec,.screen[data-screen="ninjaGame"] .scrollbody>.sec{padding-top:12px;padding-bottom:20px}
.screen[data-screen="gameHub"] .scrollbody>.sec,.screen[data-screen="gameStart"] .scrollbody>.sec,.screen[data-screen="stackStart"] .scrollbody>.sec,.screen[data-screen="ninjaStart"] .scrollbody>.sec{padding-bottom:24px}
.gcombo-slot{flex:1;min-width:0;display:flex;justify-content:center;align-self:center}
.gcombo-slot .combochip{white-space:nowrap}
.gboard,#stackWrap,#ninjaWrap{max-width:100%;margin-left:auto;margin-right:auto}
.ghint{margin:8px 0 0;text-align:center;line-height:1.45}
.gtray{margin-top:10px}
.gslot{min-height:96px}
.gfoot{margin-top:10px}
.gfoot .btn{margin-top:0}
.gcover{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start;padding:16px 18px}
.gcover>*:first-child{margin-top:auto!important}
.gcover>*:last-child{margin-bottom:auto!important}
.gover{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start}
.gover>*:first-child{margin-top:auto!important}
.gover>*:last-child{margin-bottom:auto!important}
/* Tugas 4: skor terbaik di samping tombol mulai */
.gstartrow{display:flex;gap:10px;align-items:stretch;margin-top:14px}
.gstartrow .btn{flex:1;min-width:0;margin:0;min-height:56px}
.gbestbox{flex:none;min-width:104px;display:flex;flex-direction:column;justify-content:center;background:#FDF6D8;border:1.5px solid var(--yellow);border-radius:14px;padding:6px 12px;line-height:1.15}
.gbestbox .gbk{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--maroon);text-transform:uppercase}
.gbestbox b{font-size:22px;font-weight:800;color:var(--ink)}
.gbestbox .gbn{font-size:10.5px;color:var(--ink50);margin-top:1px}
.modecard .gstartrow{margin-top:12px}
/* Tugas 5: seluruh slot baki adalah area sentuh seret, tanpa scroll atau seleksi teks */
.gtray,.gslot{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gslot{cursor:grab}
.gslot.empty{cursor:default}
.gghost .gpcell{box-shadow:0 6px 10px rgba(94,18,2,.28)}
/* Tugas 7: hub ringkas, tiga kartu dalam satu layar 390x844 */
.screen[data-screen="gameHub"] .scrollbody>.sec{padding-top:12px}
.hubhead{display:flex;align-items:center;gap:12px;background:#FCF7EC;border:1px solid var(--cardline);border-radius:18px;padding:6px 14px 6px 8px;margin-bottom:12px}
.hubhead .hubmascot{width:62px;height:92px;object-fit:contain;flex:none;display:block}
.hubhead-t{flex:1;min-width:0}
.hubhead-t h2{font-family:Marcellus,serif;font-weight:400;font-size:19px;line-height:1.25;margin:0;color:var(--ink)}
.hubhead-t p{margin:3px 0 0;font-size:13px;line-height:1.4;color:var(--ink70)}
.hubcard{padding:12px;gap:12px;margin:0 0 10px;min-height:76px}
.hubcard .hic{width:48px;height:48px}
.hubtx{flex:1;min-width:0;display:block}
.hubcard .hubtx>b{font-size:16px;line-height:1.25}
.hubcard .hubtx span.d{margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubcard .hubtx .hb{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink50)}
.hubcard .hubtx .hb b{display:inline;font-size:12.5px;color:var(--maroon)}
.hubcard .play{min-height:44px;min-width:64px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px}
.hubback{margin-top:2px}
/* PROMO_HAND_GAP Tugas 2 (2026-10-29): menggantikan sisa CSS Tugas 8 (padding bawah
   172px untuk tombol Game promo yang sudah dihapus) yang menggeser kolom promo.
   Lapisan promo flex terpusat penuh dengan padding simetris; kartu selebar
   min(318px, lebar lapisan, 100vw - 32px) di tengah horizontal; gambar contain
   dengan tinggi maksimum dari tinggi lapisan (cqh) supaya kartu + jarak 12px + X 44px
   selalu muat; fallback vh untuk browser tanpa container query. Di HP (<=480px)
   lapisan fixed ke viewport sehingga terpusat pada layar HP dan menutupi seluruh
   halaman, bukan hanya bingkai phone-inner. */
.promo-pop{padding:16px;box-sizing:border-box;align-items:center;justify-content:center;overflow:hidden;container-type:size}
.promo-card{flex:none;align-self:center;box-sizing:border-box;width:min(318px,100%,calc(100vw - 32px));max-width:100%;margin:0 auto}
.promo-card img{width:100%;max-width:100%;max-height:min(48vh,470px);max-height:min(470px,calc(100cqh - 72px))}
.promo-x{min-width:44px;min-height:44px;position:relative;z-index:1}
@media(max-width:480px){.promo-pop{position:fixed;inset:0;z-index:1000;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));touch-action:none;overscroll-behavior:contain}.promo-card img{max-height:calc(100vh - 136px);max-height:min(calc(100dvh - 136px),calc(100cqh - 72px))}}
/* Tugas 9: papan Blast = panggung gelap marun, keping makanan bertekstur tetap paling terang */
.gboard{background:#4A0F04;border-color:#2E0802}
.gcell{background:#5E1202}
.gcell.alt{background:#661A0A}
.gcell.fill{border:1.5px solid rgba(30,6,2,.55);overflow:hidden}
.gcell .gtex,.gpcell .gtex{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gpcell{position:relative;overflow:hidden}
.gcell.ghostok{background:#8A5A14;box-shadow:inset 0 0 0 2px #E4BC32}
.gcell.ghostbad{background:#2A0602;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.gcell.willclear{background:#B88A1E;box-shadow:inset 0 0 0 3px #FFFFFF}
.gboard.allflash{animation:gallflash2 .3s ease}
@keyframes gallflash2{0%{background:#E4BC32}100%{background:#4A0F04}}
/* PROMO_HAND_GAP Tugas 1: tombol melayang tidak terlihat selama promo terbuka */
body.promo-fabs-off .gamefab,body.promo-fabs-off .sosmedfab{display:none!important}
/* Tugas 10: layar awal game, satu pola untuk Blast, Stack, Ninja */
.gstart-hero{text-align:center;padding:2px 0 0}
.gstart-hero .startmascot img{width:104px}
.gst-title{font-size:30px;line-height:1.15;margin:8px 0 2px}
.gst-sub{margin:0 auto;max-width:300px;font-size:14px;line-height:1.45;color:var(--ink70)}
.gsoundrow{display:flex;justify-content:flex-end;margin-top:8px}
.gsound{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--cardline);background:#fff;color:var(--maroon);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.gsound .gsi{display:inline-flex}
.gsound:active{transform:scale(.96)}
.gst-card{margin-top:12px}
.gst-card .bd{padding:12px 16px 12px}
.gst-card .lbl{margin:0 0 6px}
.gsteps{margin:0;padding-left:22px;font-size:14px;line-height:1.5;color:var(--ink)}
.gsteps li{margin:3px 0;padding-left:2px}
.gsteps li::marker{color:var(--maroon);font-weight:800}
.gst-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink70)}
.gst-card .lgrow{align-items:center;padding:7px 0}
.lgtx{flex:1;min-width:0}
.lgtx b{font-size:14px}
.lgtx span{font-size:12.5px}
.lgsw{width:30px;height:30px;border-radius:7px;display:block}
.lgsw.lg-ok{background:#8A5A14;box-shadow:inset 0 0 0 2px #E4BC32}
.lgsw.lg-bad{background:#2A0602;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.lgsw.lg-clear{background:#B88A1E;box-shadow:inset 0 0 0 3px #FFFFFF}
.lgsw3{display:flex;gap:2px;background:#4A0F04;padding:4px;border-radius:9px}
.lgsw3 i{width:11px;height:24px;border-radius:3px;display:block}
.gst-back{margin-top:14px}
.gcov-p{margin:6px 0 0;max-width:260px}
.screen[data-screen="gameHub"] .btn,.screen[data-screen="gameStart"] .btn,.screen[data-screen="game"] .btn,.screen[data-screen="stackStart"] .btn,.screen[data-screen="stackGame"] .btn,.screen[data-screen="ninjaStart"] .btn,.screen[data-screen="ninjaGame"] .btn{min-height:52px}
.screen[data-screen="gameStart"] .lgic,.screen[data-screen="stackStart"] .lgic,.screen[data-screen="ninjaStart"] .lgic{width:44px;height:44px}
/* Tugas 6: teks skor melayang sebagai pil solid (tanpa glow), jalur naik 30px di dalam papan */
.gfloat{background:#fff;color:var(--maroon);border:2px solid var(--yellow);border-radius:999px;padding:2px 10px;font-size:16px;line-height:1.2;text-shadow:none;white-space:nowrap}
/* ===== Tambahan E1 2026-10-29: efek dari audit pola TikTok (pola saja, aset game lain tidak disalin) ===== */
.gcell.wcr::before,.gcell.wcc::before{content:'';position:absolute;z-index:3;pointer-events:none;background-color:rgba(94,18,2,.6);border-radius:3px;animation:gpowline .9s linear infinite}
.gcell.wcr::before{left:0;right:0;top:50%;height:6px;margin-top:-3px;background-image:url("/assets/demo/blast-bubuk-h.svg");background-size:12px 6px}
.gcell.wcc::before{top:0;bottom:0;left:50%;width:6px;margin-left:-3px;background-image:url("/assets/demo/blast-bubuk-v.svg");background-size:6px 12px}
@keyframes gpowline{to{background-position:12px 12px}}
.gboard.clrflash::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#FFF6DC;pointer-events:none;z-index:4;opacity:0;animation:gclrflash .26s ease-out}
@keyframes gclrflash{0%{opacity:.45}100%{opacity:0}}
.gbeams{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden;border-radius:inherit}
.gbeam{position:absolute;display:block;background:#FFF6DC;box-shadow:0 0 0 2px #E4BC32;opacity:0}
.gbeam.h{left:0;right:0;height:10px;margin-top:-5px;animation:gbeamh .44s ease-out forwards}
.gbeam.v{top:0;bottom:0;width:10px;margin-left:-5px;animation:gbeamv .44s ease-out forwards}
@keyframes gbeamh{0%{opacity:.95;transform:scaleX(.08)}35%{opacity:.95;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1) scaleY(.25)}}
@keyframes gbeamv{0%{opacity:.95;transform:scaleY(.08)}35%{opacity:.95;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1) scaleX(.25)}}
.gburst i.gcr{border-radius:1px}
.gburst i.gcr0{clip-path:polygon(0 30%,35% 0,100% 18%,88% 80%,40% 100%,6% 78%)}
.gburst i.gcr1{clip-path:polygon(10% 0,100% 12%,80% 100%,0 84%)}
.gburst i.gcr2{clip-path:polygon(0 50%,30% 4%,92% 22%,100% 70%,48% 100%)}
.gburst i.gpd{width:3px;height:3px;border-radius:1px;animation:gburstfly .62s ease-out forwards}
.gburst b.gdust{position:absolute;width:44px;height:28px;border-radius:50%;background:#E9DFC6;opacity:0;animation:gdust .62s ease-out forwards}
@keyframes gdust{0%{opacity:.4;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.gshaker{position:absolute;z-index:7;pointer-events:none;width:30px;height:44px;margin-left:-15px;transform-origin:50% 40%;animation:gshk .9s ease-in-out forwards}
@keyframes gshk{0%{opacity:0;transform:translateY(-8px) rotate(-150deg) scale(.7)}15%{opacity:1;transform:translateY(0) rotate(-145deg) scale(1)}32%{transform:rotate(-124deg)}48%{transform:rotate(-150deg)}64%{transform:rotate(-126deg)}80%{opacity:1;transform:rotate(-146deg)}100%{opacity:0;transform:rotate(-120deg) scale(.9)}}
.gboard i.gpw{position:absolute;z-index:6;width:3px;height:3px;border-radius:1px;opacity:0;pointer-events:none;animation:gpwfall .7s ease-in forwards}
@keyframes gpwfall{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.gcombo.t1 #gameComboTxt{font-size:19px}
.gcombo.t2 #gameComboTxt{font-size:23px}
.gcombo.t3{border:2px solid #E4BC32}
.gcombo.t3 #gameComboTxt{font-size:28px;letter-spacing:.02em}
.gcombo.t4{background:#E4BC32;color:#5E1202;border:2px solid #8A1F08}
.gcombo.t4 #gameComboTxt{font-size:33px}
.gcombo.t4 #gameComboSub{color:#5E1202 !important}
.gcombo.t3.show,.gcombo.t4.show{animation:gcombopop2 .34s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes gcombopop2{0%{transform:translate(-50%,-8px) scale(.6);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
.gfloat.big{font-size:20px;background:#E4BC32;color:#5E1202;border-color:#8A1F08}
.gfloat.huge{font-size:24px}
#gameScore.gscpop{transform-origin:left center;animation:gscpop .24s cubic-bezier(.34,1.56,.64,1)}
@keyframes gscpop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
#ninjaBest.njbestpop{display:inline-block;transform-origin:right center;animation:njbestpop .5s cubic-bezier(.34,1.56,.64,1);color:#8A1F08;background:#E4BC32;border-radius:6px;padding:0 5px}
@keyframes njbestpop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.njtime{font-size:19px;font-weight:800;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums;min-width:44px}
/* ===== Tambahan E2 2026-10-29: HUD Ulti Gunting (DOM di atas kanvas, hanya Ninja) ===== */
.njulti-row{display:flex;align-items:center;gap:10px;margin:8px 0 0;min-height:52px}
.njbar-wrap{flex:1;min-width:0}
.njbar-k{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:800;letter-spacing:.08em;color:#5E1202;margin-bottom:4px}
.njbar-k b{font-size:13px;font-variant-numeric:tabular-nums}
.njbar{position:relative;height:12px;border-radius:6px;background:#4A0F04;overflow:hidden;box-shadow:inset 0 0 0 1.5px #2E0802}
.njbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#E4BC32;border-radius:6px}
.njbar i::after{content:'';position:absolute;right:2px;top:2px;width:4px;height:4px;border-radius:2px;background:#FFF6DC}
.njbar s{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#4A0F04}
.njulti{min-width:84px;min-height:52px;border-radius:14px;border:2px solid #8A1F08;background:#F1EFE9;color:#8A1F08;font:800 14px Inter,sans-serif;letter-spacing:.08em;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;opacity:.55;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.njulti.near{opacity:.8;animation:njnear 1.4s ease-in-out infinite}
.njulti.ready{opacity:1;background:#8A1F08;color:#FFFFFF;border-color:#E4BC32;animation:njready 1.1s ease-in-out infinite}
.njulti.busy{opacity:.45;animation:none}
@keyframes njnear{50%{opacity:.95}}
@keyframes njready{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.njcameo{position:absolute;left:8px;bottom:58px;width:58px;height:auto;z-index:5;pointer-events:none;opacity:0;transform:translateY(16px)}
.njcameo.show{animation:njcameo 1s ease-out forwards}
@keyframes njcameo{0%{opacity:0;transform:translateY(16px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(10px) scale(.95)}}
@media(prefers-reduced-motion:reduce){.njulti.near,.njulti.ready,.njcameo.show{animation:none}.njcameo.show{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gcell.wcr::before,.gcell.wcc::before,.gbeam,.gshaker,.gboard i.gpw,#gameScore.gscpop,#ninjaBest.njbestpop{animation:none}.gshaker,.gboard i.gpw,.gbeams{display:none}}
/* ===== REVISI 2026-10-30 Tugas 1: tema Rakata di hub dan layar awal game =====
   Warna datar saja: marun #8A1F08, kuning #E4BC32, putih #FFFFFF, satu aksen kuning pucat
   #F2E2AC. Tanpa gradasi CSS, tanpa cahaya pendar, tanpa kabur, tanpa kaca buram. Aturan lama tetap; aturan di
   bawah menang lewat spesifisitas .screen[data-screen=...]. Logo = logo topbar asli. */
.screen[data-screen="gameHub"],.screen[data-screen="gameStart"],.screen[data-screen="stackStart"],.screen[data-screen="ninjaStart"]{background:#8A1F08}
.screen[data-screen="gameHub"] .scrollbody,.screen[data-screen="gameStart"] .scrollbody,.screen[data-screen="stackStart"] .scrollbody,.screen[data-screen="ninjaStart"] .scrollbody{background:#8A1F08}
.screen[data-screen="gameHub"] .minihead,.screen[data-screen="gameStart"] .minihead,.screen[data-screen="stackStart"] .minihead,.screen[data-screen="ninjaStart"] .minihead{background:#8A1F08;color:#FFFFFF;border-bottom:3px solid #E4BC32}
.screen[data-screen="gameHub"] .minihead .backbtn,.screen[data-screen="gameStart"] .minihead .backbtn,.screen[data-screen="stackStart"] .minihead .backbtn,.screen[data-screen="ninjaStart"] .minihead .backbtn{background:#F2E2AC;border:1.5px solid #E4BC32;color:#8A1F08}
.screen[data-screen="gameHub"] .minihead .step,.screen[data-screen="gameStart"] .minihead .step,.screen[data-screen="stackStart"] .minihead .step,.screen[data-screen="ninjaStart"] .minihead .step{background:#E4BC32;color:#8A1F08}
.screen[data-screen="gameHub"] .ordstrip,.screen[data-screen="gameStart"] .ordstrip,.screen[data-screen="stackStart"] .ordstrip,.screen[data-screen="ninjaStart"] .ordstrip{border:2px solid #E4BC32}
.screen[data-screen="gameHub"] .btn-outline,.screen[data-screen="gameStart"] .btn-outline,.screen[data-screen="stackStart"] .btn-outline,.screen[data-screen="ninjaStart"] .btn-outline{background:#FFFFFF;color:#8A1F08;border:1.5px solid #E4BC32}
.rv30-logo{flex:none;display:flex;align-items:center;justify-content:center;background:#FFFFFF;border:2px solid #E4BC32;border-radius:12px;padding:4px;box-sizing:border-box}
.rv30-logo img{display:block;width:100%;height:auto}
.rv30-logo img:not([src]){visibility:hidden}
/* hub: panel kepala kuning pucat (maskot berbingkai, judul, logo), kartu putih bertepi kuning */
.screen[data-screen="gameHub"] .hubhead{background:#F2E2AC;border:2px solid #E4BC32;padding:6px 8px;gap:10px}
.screen[data-screen="gameHub"] .hubhead .hubmascot{width:56px;height:84px;object-fit:cover;border-radius:10px;border:2px solid #FFFFFF;box-sizing:border-box}
.screen[data-screen="gameHub"] .hubhead-t h2{color:#8A1F08;font-size:17px}
.screen[data-screen="gameHub"] .hubhead-t p{color:#8A1F08;font-size:12.5px}
.screen[data-screen="gameHub"] .rv30-logo-hub{width:100px}
.screen[data-screen="gameHub"] .hubcard{background:#FFFFFF;border:2px solid #E4BC32;box-shadow:none;gap:10px}
.screen[data-screen="gameHub"] .hubcard .hic.rv30-thumb{width:60px;height:60px;padding:0;overflow:hidden;background:#8A1F08;border:0;border-radius:12px}
.rv30-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* REVISI 2026-10-31 delta v10 (a): kartu hub Ninja = banner lebar penuh (thumbnail gunting di dojo) */
.screen[data-screen="gameHub"] .hubcard[data-onclick="openNinja()"]{flex-wrap:wrap;padding:0 0 12px;overflow:hidden;gap:10px 12px}
.screen[data-screen="gameHub"] .hubcard[data-onclick="openNinja()"] .hic.rv30-thumb{width:100%;height:auto;aspect-ratio:16/7;border-radius:16px 16px 0 0}
.screen[data-screen="gameHub"] .hubcard[data-onclick="openNinja()"] .hubtx{flex:1;min-width:0;padding-left:12px}
.screen[data-screen="gameHub"] .hubcard[data-onclick="openNinja()"] .play{margin-right:12px}
/* layar awal: logo + maskot berdampingan, judul putih, tombol mulai kuning */
.screen[data-screen="gameStart"] .gstart-hero,.screen[data-screen="stackStart"] .gstart-hero,.screen[data-screen="ninjaStart"] .gstart-hero{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;padding:4px 0 0}
.screen[data-screen="gameStart"] .gstart-hero>.gst-title,.screen[data-screen="stackStart"] .gstart-hero>.gst-title,.screen[data-screen="ninjaStart"] .gstart-hero>.gst-title,.screen[data-screen="gameStart"] .gstart-hero>.gst-sub,.screen[data-screen="stackStart"] .gstart-hero>.gst-sub,.screen[data-screen="ninjaStart"] .gstart-hero>.gst-sub{flex:0 0 100%}
.screen[data-screen="gameStart"] .gstart-hero .startmascot,.screen[data-screen="stackStart"] .gstart-hero .startmascot,.screen[data-screen="ninjaStart"] .gstart-hero .startmascot{flex:none;max-width:none;margin:0;border:2px solid #E4BC32}
.screen[data-screen="gameStart"] .rv30-logo-start,.screen[data-screen="stackStart"] .rv30-logo-start,.screen[data-screen="ninjaStart"] .rv30-logo-start{width:128px}
.screen[data-screen="gameStart"] .gst-title,.screen[data-screen="stackStart"] .gst-title,.screen[data-screen="ninjaStart"] .gst-title{color:#FFFFFF;margin:2px 0 0}
.screen[data-screen="gameStart"] .gst-sub,.screen[data-screen="stackStart"] .gst-sub,.screen[data-screen="ninjaStart"] .gst-sub{color:#F2E2AC}
.screen[data-screen="gameStart"] .gstartrow .btn-maroon,.screen[data-screen="stackStart"] .gstartrow .btn-maroon,.screen[data-screen="ninjaStart"] .gstartrow .btn-maroon{background:#E4BC32;color:#8A1F08;box-shadow:none}
.screen[data-screen="gameStart"] .gbestbox,.screen[data-screen="stackStart"] .gbestbox,.screen[data-screen="ninjaStart"] .gbestbox{background:#F2E2AC;border-color:#E4BC32}
.screen[data-screen="gameStart"] .gsound,.screen[data-screen="stackStart"] .gsound,.screen[data-screen="ninjaStart"] .gsound{border-color:#E4BC32}
/* BATCH 1104 E9: baris suara Ninja memuat tombol Tes bunyi Shing di samping tombol suara */
.screen[data-screen="ninjaStart"] .gsoundrow{flex-wrap:wrap;gap:8px}
.screen[data-screen="gameStart"] .gst-card,.screen[data-screen="stackStart"] .gst-card,.screen[data-screen="ninjaStart"] .gst-card{border:2px solid #E4BC32;box-shadow:none}

/* ===================================================================
   PRODUCTION OVERRIDES (not in the demo). The demo draws a 390x844 phone
   mockup inside a desktop page (topbar + screen index + bordered frame).
   Production IS the phone screen: the frame becomes the full viewport,
   mobile first, no desktop layout in this pass.
   =================================================================== */
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{touch-action:manipulation}
.stage{max-width:none;margin:0;padding:0;display:block}
.phone{width:100%;max-width:480px;margin:0 auto;border:0;border-radius:0;box-shadow:none}
.phone-inner{height:100vh;height:100dvh;min-height:0}
@media(max-width:480px){.phone{border-radius:0;border:0}.phone-inner{height:100vh;height:100dvh;min-height:0}}
/* Home indicator / gesture bar on notched phones: last bar of every screen. */
.bottomnav{padding-bottom:env(safe-area-inset-bottom)}
.minihead{padding-top:max(10px,env(safe-area-inset-top))}
/* Inputs at 16px stop iOS from auto-zooming on focus (viewport is locked anyway). */
.field input,.field textarea,.field select,input.search,#menuSearch{font-size:16px}
/* Real QRIS image from the gateway proxy in the demo QR frame. */
.rk-qrimg{display:block;width:230px;height:230px;margin:6px auto;object-fit:contain;image-rendering:pixelated;background:#fff}
/* Ninja chicken: the demo bakes it to a data: URL for <img>; CSP blocks data:,
   so the same bake is shown as a canvas with the img's sizing rules. */
.mascotpanel canvas[data-njchick]{width:150px;max-width:60%;height:auto;display:block;margin:0 auto}
.startmascot canvas[data-njchick]{width:132px;height:auto}
.gstart-hero .startmascot canvas[data-njchick]{width:104px}
.njcameo[data-njchick]{height:auto}
/* Empty data (outlet etc. not set in Kelola Informasi): hide instead of faking. */
.outletcard.rk-empty,.cap.rk-empty{display:none}
.rk-note{background:#FBF7EC;border:1.5px solid #E8DFC8;border-radius:14px;padding:12px 14px;font-size:13.5px;color:var(--ink70)}
/* Spin popup (production feature) inside the demo promo-pop shell. */
.rk-spincard{background:#fff;border-radius:20px;padding:18px 16px 16px;width:100%;max-width:358px;max-height:calc(100dvh - 120px);overflow:auto;text-align:center;box-sizing:border-box}
.rk-wheel{position:relative;width:min(280px,72vw);aspect-ratio:1;margin:0 auto 10px}
.rk-wheel canvas{width:100%;height:100%;display:block;border-radius:50%;border:4px solid var(--maroon);box-sizing:border-box;background:#fff}
.rk-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--maroon);z-index:2}
.rk-hub{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);background:#fff;border:3px solid var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.rk-hub img{width:48px;height:auto}
.rk-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px;font-size:12px}
.rk-legend span{background:var(--pale);border-radius:999px;padding:4px 10px;font-weight:700;color:var(--maroon)}
.rk-result{border:2px solid var(--yellow);border-radius:14px;padding:12px 14px;margin:0 0 10px;text-align:left}