:root{--u:calc(100cqw/540);--a:#e8641b;--a2:#ffb43a;--bg:#14100d;--fg:#f7eee2;--mut:#c4b29b;--card:rgba(32,24,17,.92);--ok:#7ad37f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0806;overflow:hidden;overscroll-behavior:none}
body{font-family:ui-rounded,"Avenir Next","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--fg);
  background:#0b0806 url(assets/grillane-banner.jpg) center/cover no-repeat;-webkit-user-select:none;user-select:none}
body:before{content:"";position:fixed;inset:0;background:rgba(8,5,3,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#stage{position:relative;container-type:inline-size;width:min(100vw,calc(100dvh*.5625));height:min(100dvh,calc(100vw/.5625));
  margin:0 auto;top:50%;transform:translateY(-50%);overflow:hidden;background:#14100d;box-shadow:0 0 60px rgba(0,0,0,.6)}
#c{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.hidden{display:none!important}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(30*var(--u));gap:calc(12*var(--u))}
#menu{background:linear-gradient(180deg,rgba(14,9,6,.55),rgba(14,9,6,.9)),url(assets/grillane-banner.jpg) 18% center/cover}
.scr.dim{background:rgba(10,7,4,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.logo{width:calc(170*var(--u));height:calc(170*var(--u));border-radius:calc(38*var(--u));box-shadow:0 calc(10*var(--u)) calc(40*var(--u)) rgba(232,100,27,.45);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(calc(-8*var(--u)))}}
h1{font-size:calc(64*var(--u));margin:calc(6*var(--u)) 0 0;letter-spacing:-.02em;text-shadow:0 calc(4*var(--u)) calc(24*var(--u)) rgba(232,100,27,.6)}
h2{font-size:calc(42*var(--u));margin:0 0 calc(6*var(--u))}
.tag{font-size:calc(26*var(--u));margin:0 0 calc(18*var(--u));color:var(--a2);font-weight:700}
.col{display:flex;flex-direction:column;gap:calc(14*var(--u));width:calc(380*var(--u))}
.btn{font:inherit;font-weight:800;font-size:calc(28*var(--u));color:#fff;border:0;border-radius:999px;padding:calc(18*var(--u)) calc(28*var(--u));cursor:pointer;
  background:linear-gradient(180deg,#ff8a3a,#e8561b);box-shadow:0 calc(6*var(--u)) 0 #9b3410,0 calc(12*var(--u)) calc(24*var(--u)) rgba(0,0,0,.4);transition:transform .08s}
.btn:active{transform:translateY(calc(4*var(--u)));box-shadow:0 calc(2*var(--u)) 0 #9b3410}
.btn.sec{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.22);font-size:calc(24*var(--u));padding:calc(14*var(--u)) calc(24*var(--u))}
.btn[disabled]{opacity:.45;cursor:default}
.btn:focus-visible,.chip:focus-visible{outline:calc(3*var(--u)) solid var(--a2);outline-offset:calc(3*var(--u))}
.chip{position:absolute;top:calc(18*var(--u));font:inherit;font-weight:800;font-size:calc(22*var(--u));color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:999px;
  min-width:calc(64*var(--u));height:calc(52*var(--u));padding:0 calc(16*var(--u));cursor:pointer}
.chip.lang{left:calc(18*var(--u))}.chip.snd{right:calc(18*var(--u))}
.stat{display:flex;gap:calc(26*var(--u));font-size:calc(22*var(--u));color:var(--mut);margin:calc(10*var(--u)) 0 0}.stat b{color:#fff}
.foot{position:absolute;bottom:calc(16*var(--u));left:0;right:0;font-size:calc(15*var(--u));color:var(--mut);margin:0}
.foot a{color:var(--a2)}
.steps{list-style:none;padding:0;margin:0 0 calc(10*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u));text-align:left;width:100%}
.steps li{display:flex;gap:calc(14*var(--u));align-items:center;background:var(--card);border-radius:calc(20*var(--u));padding:calc(14*var(--u)) calc(18*var(--u));font-size:calc(21*var(--u));line-height:1.3}
.steps b{color:var(--a2)}
.n{flex:none;width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;background:var(--a);display:grid;place-items:center;font-weight:900;font-size:calc(24*var(--u))}
.card{background:var(--card);border-radius:calc(26*var(--u));padding:calc(22*var(--u)) calc(26*var(--u));width:calc(430*var(--u));margin-bottom:calc(8*var(--u))}
.big{font-size:calc(46*var(--u));font-weight:900}
.bar{height:calc(16*var(--u));background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin:calc(10*var(--u)) 0}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb43a,#7ad37f);border-radius:99px;transition:width .8s}
#resLines{margin:calc(8*var(--u)) 0 0;font-size:calc(21*var(--u));line-height:1.5;color:var(--mut)}#resLines b{color:#fff}
#shopList{display:flex;flex-direction:column;gap:calc(12*var(--u));width:100%}
.row{display:flex;align-items:center;gap:calc(14*var(--u));background:var(--card);border-radius:calc(20*var(--u));padding:calc(12*var(--u)) calc(16*var(--u));text-align:left}
.row .ic{font-size:calc(40*var(--u));width:calc(54*var(--u));text-align:center}
.row .tx{flex:1;font-size:calc(19*var(--u));line-height:1.25;color:var(--mut)}.row .tx b{display:block;color:#fff;font-size:calc(23*var(--u))}
.pips{display:flex;gap:calc(5*var(--u));margin-top:calc(5*var(--u))}.pips i{width:calc(20*var(--u));height:calc(8*var(--u));border-radius:9px;background:rgba(255,255,255,.2)}.pips i.on{background:var(--a2)}
.row .btn{font-size:calc(21*var(--u));padding:calc(12*var(--u)) calc(18*var(--u));min-width:calc(112*var(--u));box-shadow:0 calc(4*var(--u)) 0 #9b3410}
@media (prefers-reduced-motion:reduce){.logo{animation:none}}