/* v3: conquistas, sequência, anotações, modo cozinha e avisos (mesma linguagem escura e dourada do app) */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);opacity:0;z-index:10000;max-width:min(92vw,420px);background:linear-gradient(135deg,#2a2209,#14110a);border:1px solid #d4af37;color:#f0d760;border-radius:16px;padding:12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.6);font-size:15px;line-height:1.35;transition:opacity .35s ease,transform .45s cubic-bezier(.22,.61,.36,1);pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{display:block;font:600 17px Georgia,serif;margin-bottom:2px}
.streak{display:flex;align-items:center;gap:12px;margin-top:14px;border:1px solid #6d5a22;background:linear-gradient(90deg,rgba(212,175,55,.16),rgba(20,17,10,.85));border-radius:16px;padding:10px 14px;color:#f0d760}
.streak .fire{font-size:26px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,140,40,.55))}
.streak b{font:600 17px Georgia,serif}
.streak small{display:block;color:#cfc8b0}
.streak .btn{margin-left:auto;white-space:nowrap}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:12px}
.badge3{position:relative;border:1px solid #2e2a22;background:#151310;border-radius:16px;padding:14px 10px 12px;text-align:center;transition:transform .3s ease}
.badge3 .ic{font-size:30px;display:block;margin-bottom:6px;filter:grayscale(1) brightness(.6)}
.badge3 b{display:block;font:600 14px Georgia,serif;color:#8d877a}
.badge3 small{display:block;color:#6f6a5f;font-size:12px;margin-top:3px;line-height:1.3}
.badge3.won{border-color:#8a7330;background:radial-gradient(circle at 50% 0,rgba(212,175,55,.22),#151310 70%);box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.badge3.won .ic{filter:drop-shadow(0 0 10px rgba(212,175,55,.45))}
.badge3.won b{color:#f0d760}.badge3.won small{color:#cfc8b0}
.stats3{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.stats3 span{flex:1;min-width:90px;border:1px solid #2e2a22;background:#151310;border-radius:14px;padding:10px;text-align:center;color:#cfc8b0;font-size:12px}
.stats3 b{display:block;color:#f0d760;font:600 22px Georgia,serif}
/* anotações e marcadores */
.notes{margin-top:14px}
.notes textarea{width:100%;min-height:74px;resize:vertical}
.notes .nrow{display:flex;gap:10px;align-items:flex-start;border:1px solid #2e2a22;background:#151310;border-radius:14px;padding:10px 12px;margin-top:8px}
.notes .nrow p{margin:0;flex:1;white-space:pre-wrap;word-break:break-word;color:#e8e2cc}
.notes .tm{flex:none;border:1px solid #d4af37;color:#f0d760;background:#1d1a10;border-radius:99px;padding:4px 10px;font-size:13px;min-height:32px}
.notes .rm{flex:none;background:none;border:0;color:#8d877a;font-size:18px;min-width:36px;min-height:32px}
/* modo cozinha: tela acesa, letras e botões grandes */
.kbar{display:none;gap:10px;margin-top:12px}
body.kitchen .kbar{display:flex}
.kbar button{flex:1;min-height:64px;font-size:22px;border-radius:16px;border:1px solid #d4af37;background:#1d1a10;color:#f0d760}
body.kitchen .notes .nrow p{font-size:20px;line-height:1.45}
body.kitchen .notes .tm{font-size:17px;padding:6px 14px}
body.kitchen .kon{background:#d4af37;color:#140f02}
.cupom{display:flex;gap:8px;align-items:flex-end}
.cupom input{flex:1;text-transform:uppercase}
.cupom-ok{color:var(--green);margin-top:6px;font-size:14px}
.autorenew{border-color:#2f6b4c !important}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* ---- áreas da tela inicial ---- */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:4px}
.atile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px;border-radius:20px;border:1px solid #4a443c;color:#f4f4f4;text-align:left;background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 60%),linear-gradient(160deg,#2c2925,#191715);box-shadow:0 1px 0 #5b554b,0 4px 0 #171513,0 14px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;transition:transform .2s ease}
.atile:active{transform:scale(.97)}
.atile::after{content:"";position:absolute;left:14px;right:40%;bottom:12px;height:2px;background:linear-gradient(90deg,var(--ac),transparent)}
.atile .aic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 55%,transparent)}
.atile b{font:600 16px Georgia,serif;line-height:1.2}
.atile small{color:#cfc6b4;font-size:12px}
.blk.soon .win{display:grid;place-items:center}
.blk.soon .soonic{filter:drop-shadow(0 0 12px rgba(0,0,0,.6));opacity:.95}
.blk.soon{opacity:.92}
.cf-card .soonic{display:grid;place-items:center;height:100%}
.rowhead h2 .ahd{display:inline-grid;place-items:center;vertical-align:-3px;margin-right:8px}
/* botão do Instagram: mesmo tamanho, mas o fim da página termina acima dele (não cobre o rodapé nem o logo) */
.foot{margin-bottom:76px !important}
body:has(.rd) .tpill,body:has(.langsheet) .tpill,body:has(.inst-gate) .tpill,body:has(.toast.on) .tpill{display:none !important}
/* ---- cartões como BLOCOS DE CONCRETO: pesados, rústicos, com espessura de laje, quinas lascadas e sombra no chão ---- */
.blk,.atile{--lift:0px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;will-change:transform}
.cf .blk.cf-card{transform:none;will-change:auto} /* o carrossel 3D já move os próprios blocos */
.atile{background:#38352f url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .44  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 11 -6.6'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 .78  0 0 0 0 .75  0 0 0 0 .7  0 0 0 12 -7.4'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><path d='M310 0 L296 38 L312 66 L290 110 L304 150 M296 38 L270 52 M290 110 L262 124 L270 156' fill='none' stroke='rgba(0,0,0,.42)' stroke-width='1.6'/><path d='M20 400 L38 360 L24 330 L46 290' fill='none' stroke='rgba(0,0,0,.35)' stroke-width='1.4'/></svg>"),linear-gradient(155deg,#46423b,#2c2925 55%,#34312c) !important;background-blend-mode:overlay,normal,normal,normal,normal !important}
/* forma de bloco moldado à mão: quinas levemente irregulares */
.blk,.atile{border-radius:14px 19px 12px 17px / 17px 13px 19px 12px !important;border:3px solid !important;border-color:#8a8378 #3a3631 #1c1a17 #6b655c !important}
/* espessura de laje (8 camadas de concreto mais escuras) + sombra pesada no chão */
.blk,.atile{box-shadow:
  0 1px 0 #615b52,0 2px 0 #57524a,0 3px 0 #4e4943,0 4px 0 #46423c,0 5px 0 #3f3b36,0 6px 0 #38352f,0 7px 0 #322f2a,0 8px 0 #2b2925,0 9px 0 #252320,0 10px 0 #1e1c1a,
  0 12px 4px rgba(0,0,0,.55),0 20px 22px -2px rgba(0,0,0,.78),0 38px 52px -8px rgba(0,0,0,.65),
  inset 0 2px 0 rgba(255,255,255,.18),inset 2px 0 0 rgba(255,255,255,.06),inset 0 -5px 12px rgba(0,0,0,.6),inset -3px 0 10px rgba(0,0,0,.35) !important;margin-bottom:12px}
.cf-card.blk{box-shadow:0 2px 0 #57524a,0 4px 0 #46423c,0 6px 0 #38352f,0 8px 0 #2b2925,0 10px 0 #1e1c1a,0 14px 6px rgba(0,0,0,.55),0 28px 38px rgba(0,0,0,.8),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 14px rgba(0,0,0,.6) !important}
.cf-card.blk.active{box-shadow:0 2px 0 #615b52,0 4px 0 #4e4943,0 6px 0 #3f3b36,0 8px 0 #322f2a,0 10px 0 #252320,0 12px 0 #1a1816,0 16px 8px rgba(0,0,0,.6),0 34px 46px rgba(0,0,0,.85),0 0 36px rgba(212,175,55,.22),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -6px 14px rgba(0,0,0,.6) !important}
/* luz rasante de cima, poros e lascas nas quinas (sem brilho de vidro: concreto é fosco) */
.blk::before,.atile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:
   radial-gradient(circle at 7% 9%,rgba(0,0,0,.55) 0 3px,transparent 4px),radial-gradient(circle at 93% 6%,rgba(0,0,0,.45) 0 2px,transparent 3px),radial-gradient(circle at 96% 94%,rgba(0,0,0,.5) 0 4px,transparent 5px),radial-gradient(circle at 4% 92%,rgba(0,0,0,.4) 0 2.5px,transparent 3.5px),
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -7.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
   linear-gradient(172deg,rgba(255,250,235,.13) 0,rgba(255,250,235,.03) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.22) 100%),
   radial-gradient(90% 60% at var(--gx,30%) var(--gy,0%),rgba(255,236,190,.08),transparent 60%)}
/* a capa fica encaixada DENTRO do bloco, como uma janela recortada no concreto */
.blk .win{border-radius:10px 13px 9px 12px !important;box-shadow:0 0 0 2px #1a1816,0 1px 0 2px rgba(255,255,255,.1) !important}
.blk .win::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 10px 18px rgba(0,0,0,.7),inset 0 -3px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.7);pointer-events:none;z-index:2}
/* ao tocar: o bloco pesado se ergue um pouco e a sombra no chão aumenta */
.blk.lifted,.atile.lifted{--lift:-5px}
.blk.lifted:not(.cf-card),.atile.lifted{box-shadow:
  0 1px 0 #6d665c,0 2px 0 #5d574f,0 3px 0 #524d46,0 4px 0 #49453f,0 5px 0 #413d38,0 6px 0 #3a3732,0 7px 0 #33302b,0 8px 0 #2c2a26,0 9px 0 #262420,0 10px 0 #1f1d1a,
  0 16px 6px rgba(0,0,0,.5),0 30px 30px -2px rgba(0,0,0,.75),0 52px 66px -10px rgba(0,0,0,.65),
  inset 0 2px 0 rgba(255,255,255,.2),inset 0 -5px 12px rgba(0,0,0,.6) !important}
.hrow{padding-bottom:30px !important;padding-top:8px !important}
.agrid{gap:16px !important;padding-bottom:12px}
@media (prefers-reduced-motion:reduce){.blk,.atile{transition:none;transform:none}}
/* troca de tela mais rápida e elegante */
.vout{transition:opacity .11s ease,transform .11s ease !important}
.vin{animation-duration:.38s !important}
/* ---- carrossel leve e limpo no celular ----
   1) os blocos do carrossel animam só posição e transparência (a sombra pesada não é recalculada a cada quadro);
   2) sombra do bloco do carrossel com menos camadas;
   3) cada bloco vira uma camada própria da placa de vídeo (desliza sem engasgar). */
.cf .cf-card.blk{transition:transform 1.1s cubic-bezier(.19,.72,.22,1),opacity 1.1s ease !important;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf.drag .cf-card.blk{transition:none !important}
.cf .cf-card.blk,.cf .cf-card.blk.active{box-shadow:0 3px 0 #4e4943,0 6px 0 #38352f,0 9px 0 #252320,0 18px 26px rgba(0,0,0,.75) !important}
.cf .cf-card.blk.active{outline:2px solid rgba(212,175,55,.55);outline-offset:-2px}
.cf .cf-card.blk::before{background:linear-gradient(172deg,rgba(255,250,235,.12) 0,rgba(0,0,0,0) 45%,rgba(0,0,0,.25) 100%) !important}
.cf .cf-card .win::after{box-shadow:inset 0 8px 14px rgba(0,0,0,.6) !important}
.bn3d .bn-card{will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* ===== Apresentação de abertura (vídeo do Chef) ===== */
.intro{position:fixed;inset:0;z-index:11000;background:#000;overflow:hidden;opacity:0;transition:opacity .55s ease,transform .95s cubic-bezier(.76,0,.22,1),border-radius .95s cubic-bezier(.76,0,.22,1)}
.intro.in{opacity:1}
.intro.out{transform:translateY(-104%);border-radius:0 0 34px 34px;box-shadow:0 30px 60px rgba(0,0,0,.8)}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.intro.in video{transform:scale(1)}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 100%);pointer-events:none}
.intro-cap{position:absolute;left:22px;right:22px;bottom:calc(112px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font:600 clamp(21px,5.6vw,30px)/1.25 Georgia,"Times New Roman",serif;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.intro-cap span{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.intro-cap .ib{color:#f0d760;font-size:1.12em;display:block;margin-top:8px}
.intro.play .intro-cap .ia,.intro.two .intro-cap .ib{opacity:1;transform:none}
.intro:not(.play) .intro-cap .ia{transition-delay:.9s}
.intro.in:not(.play) .intro-cap .ia{opacity:1;transform:none}
.intro-snd{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:8px 14px;font:600 14px system-ui;min-height:40px;backdrop-filter:blur(6px)}
.intro-act{position:absolute;left:16px;right:16px;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;justify-content:space-between}
.intro-act button{min-height:48px;border-radius:14px;padding:0 18px;font:700 15px system-ui}
.intro-off{background:rgba(0,0,0,.45);color:#e8e2cc;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.intro-skip{background:linear-gradient(180deg,#f0d760,#d4af37);color:#140f02;border:0;box-shadow:0 6px 18px rgba(212,175,55,.35);flex:0 0 auto}
/* a tela do app "sobe" por baixo enquanto o vídeo vai embora */
body.intro-on header.top,body.intro-on #main{opacity:0;transform:translateY(46px) scale(.95)}
body.intro-on nav.tabs{transform:translateY(100%)}
body.intro-reveal header.top,body.intro-reveal #main{transition:opacity .8s ease .2s,transform 1s cubic-bezier(.2,.75,.2,1) .12s}
body.intro-reveal nav.tabs{transition:transform .8s cubic-bezier(.2,.75,.2,1) .35s}
@media (prefers-reduced-motion:reduce){.intro,.intro video,.intro-cap span,body.intro-reveal header.top,body.intro-reveal #main,body.intro-reveal nav.tabs{transition-duration:.3s!important;transition-delay:0s!important}.intro.out{transform:none;opacity:0}.intro video{transform:none}}

/* ===== Abertura v2: entrada com som, chamada no aceno e tela que se abre em círculo ===== */
.intro video{transform-origin:50% 42%}
.intro.opening video{transform:scale(1.18)!important;filter:brightness(.55) blur(2px);transition:transform 1.7s cubic-bezier(.5,0,.2,1),filter 1.7s}
.intro.opening .intro-cap,.intro.opening .intro-skip2,.intro.opening .intro-bar{opacity:0;transition:opacity .4s}
.intro .intro-cap .ia{font-size:.82em}
.intro .intro-cap .ib{font-size:1.5em;font-weight:800;transform:translateY(14px) scale(.96);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.intro.two .intro-cap .ia{opacity:.55}
.intro-bar{position:absolute;left:14px;right:14px;top:calc(6px + env(safe-area-inset-top,0px));height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;z-index:2}
.intro-bar i{display:block;height:100%;width:0;background:#d4af37}
.intro-skip2{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top,0px));right:14px;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:8px 16px;font:600 14px system-ui;min-height:40px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.intro-gate{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:0 22px calc(18% + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.88));text-align:center;transition:opacity .4s}
.intro-gate b{font:700 clamp(26px,8vw,34px)/1.1 Georgia,"Times New Roman",serif;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.intro-go{min-height:52px;border-radius:99px;padding:0 28px;border:0;font:800 16px system-ui;color:#140f02;background:linear-gradient(180deg,#f0d760,#d4af37);box-shadow:0 8px 22px rgba(212,175,55,.4)}
.intro.started .intro-gate{opacity:0;pointer-events:none}
.intro.in:not(.play) .intro-cap .ia{opacity:0}
.intro-go:focus-visible,.intro-skip2:focus-visible{outline:2px solid #f0d760;outline-offset:2px}
body.intro-reveal header.top,body.intro-reveal #main{transition:opacity 1s ease .5s,transform 1.2s cubic-bezier(.2,.75,.2,1) .4s}
.intro-snd2{position:absolute;z-index:3;left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);min-height:46px;border-radius:99px;padding:0 22px;border:0;font:800 15px system-ui;color:#140f02;background:linear-gradient(180deg,#f0d760,#d4af37);box-shadow:0 8px 22px rgba(212,175,55,.4);animation:sndpulse 1.6s ease-in-out infinite}
@keyframes sndpulse{50%{box-shadow:0 8px 30px rgba(240,215,96,.75)}}
.intro.opening .intro-snd2{opacity:0;transition:opacity .3s}
.intro-off2{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top,0px));left:14px;background:rgba(0,0,0,.5);color:#e8e2cc;border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:8px 14px;font:600 13px system-ui;min-height:40px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.intro-off2:focus-visible{outline:2px solid #f0d760;outline-offset:2px}
.intro.opening .intro-off2{opacity:0;transition:opacity .3s}

/* ===== Prévias dos cursos (tela inicial, para todos) ===== */
.tz-card{position:relative;flex:0 0 auto;width:min(46vw,190px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid rgba(212,175,55,.35);background:#0b0906;padding:0;scroll-snap-align:start;box-shadow:0 16px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .25s ease}
.tz-card:active{transform:scale(.97)}
.tz-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tz-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 40%,rgba(0,0,0,.85))}
.tz-play{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#140f02;background:linear-gradient(180deg,#f0d760,#d4af37);box-shadow:0 4px 14px rgba(212,175,55,.45)}
.tz-txt{position:absolute;left:12px;right:12px;bottom:12px;text-align:left;color:#fff;display:flex;flex-direction:column;gap:3px}
.tz-txt b{font:700 16px/1.15 Georgia,"Times New Roman",serif;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.tz-txt small{font-size:12px;color:#e8e2cc;opacity:.85}
.tz-card:focus-visible{outline:2px solid #f0d760;outline-offset:3px}
.tz-full{position:fixed;inset:0;z-index:10500;background:#000;opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.tz-full.in{opacity:1;transform:none}
.tz-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.tz-fshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 55%,rgba(0,0,0,.85))}
.tz-bar{position:absolute;left:14px;right:14px;top:calc(8px + env(safe-area-inset-top,0px));height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.tz-bar i{display:block;height:100%;width:0;background:#d4af37}
.tz-x{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font-size:17px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tz-info{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#fff;pointer-events:none}
.tz-info > *{pointer-events:auto}
.tz-tag{font:700 11px system-ui;letter-spacing:.2em;text-transform:uppercase;color:#f0d760}
.tz-info b{font:700 clamp(22px,6.4vw,30px)/1.1 Georgia,"Times New Roman",serif;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.tz-info small{color:#e8e2cc;font-size:14px}
.tz-go{margin-top:10px;min-height:48px;border-radius:99px;padding:0 22px;border:0;font:800 15px system-ui;color:#140f02;background:linear-gradient(180deg,#f0d760,#d4af37);box-shadow:0 8px 22px rgba(212,175,55,.4)}
.tz-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#fff;background:rgba(5,5,5,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s}
.tz-end b{font:700 clamp(24px,7vw,32px)/1.15 Georgia,"Times New Roman",serif;color:#f0d760;max-width:22ch}
.tz-end p{margin:0;max-width:32ch;color:#e8e2cc;line-height:1.5}
.tz-go.big{min-height:54px;font-size:16px;padding:0 28px}
.tz-again{background:transparent;border:1px solid rgba(255,255,255,.3);color:#e8e2cc;border-radius:99px;min-height:42px;padding:0 18px;font:600 14px system-ui}
.tz-full.done .tz-end{opacity:1;pointer-events:auto}
.tz-full.done .tz-info{opacity:0}
.tz-go:focus-visible,.tz-x:focus-visible,.tz-again:focus-visible{outline:2px solid #f0d760;outline-offset:2px}