/* Porquito de Ouro — tela do jogo. Celular primeiro: ocupa a tela toda; no computador vira uma janela central. */
html.pq-open,html.pq-open body{overflow:hidden}
.pq-scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80}
.pq{--cell:min(calc((100vw - 64px) / 3),118px);
  position:fixed;inset:0;z-index:81;display:flex;flex-direction:column;gap:10px;overflow:auto;
  padding:max(10px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
  background:radial-gradient(520px 340px at 50% 18%,rgba(243,194,79,.20),transparent 70%),radial-gradient(800px 600px at 50% 110%,#123F2C,transparent 70%),#081A12;color:var(--fg)}
@media (min-width:640px){.pq{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:14px 18px 18px}}
.pq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.pq-top h2{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:118%;font-size:22px;line-height:1;letter-spacing:-.01em}
.pq-logo{background:linear-gradient(180deg,#FFEDB0,#F3C24F 55%,#B57E26);-webkit-background-clip:text;background-clip:text;color:transparent}
.pq-logo2{color:var(--fg);font-weight:700;font-size:.78em}
.pq-tbtns{display:flex;gap:6px}
.pq-ib{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 80%,transparent);color:var(--fg);display:grid;place-items:center;font-size:24px;line-height:1;padding:0}
.pq-ib svg{width:20px;height:20px}
.pq-ib:hover{border-color:var(--gold)}
.pq-ib:disabled{opacity:.35;cursor:not-allowed}
.pq-ib.sm{width:34px;height:34px;font-size:20px}

/* personagem + cofre */
.pq-stage{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;justify-content:center}
.pq-hero{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:12px;align-items:center;position:relative}
.pq-pig{width:100%;max-width:150px;transform-origin:50% 92%;animation:pq-breathe 3.2s ease-in-out infinite}
.pq-pig-svg{width:100%;height:auto;display:block;overflow:visible}
.pq-happy,.pq-cracks{opacity:0}
.pq-cracks path{stroke-dasharray:120;stroke-dashoffset:120}
.pq-pig.spin{animation:pq-wiggle .45s ease-in-out 2}
.pq-pig.spin .pq-pupil{transform:translateY(-3px)}
.pq-pig.win{animation:pq-hop .55s cubic-bezier(.3,1.6,.5,1) 2}
.pq-pig.win .pq-eyes{opacity:0}.pq-pig.win .pq-happy{opacity:1}
.pq-pig.big{animation:pq-hop .5s cubic-bezier(.3,1.6,.5,1) 4}
.pq-pig.break{animation:pq-shake .5s linear 1,pq-pop 1.2s .5s ease-in 1}
.pq-pig.break .pq-cracks{opacity:1}.pq-pig.break .pq-cracks path{animation:pq-crack .45s .15s ease-out forwards}
.pq-pig.break .pq-eyes{opacity:0}.pq-pig.break .pq-happy{opacity:1}
@keyframes pq-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes pq-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes pq-hop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-18px) scale(1.04,.96)}70%{transform:translateY(0) scale(1.06,.94)}}
@keyframes pq-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-3deg)}40%{transform:translateX(6px) rotate(3deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes pq-pop{0%{transform:scale(1);opacity:1}35%{transform:scale(1.18);opacity:1}55%{transform:scale(.6);opacity:0}80%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pq-crack{to{stroke-dashoffset:0}}
.pq-burst{position:absolute;left:75px;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.pq-burst i{position:absolute;width:26px;height:26px;margin:-13px;animation:pq-coin 1.3s cubic-bezier(.2,.7,.4,1) forwards}
.pq-burst svg,.pq-fly svg{width:100%;height:100%}
@keyframes pq-coin{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 140px)) rotate(var(--r)) scale(1);opacity:0}}
.pq-fly{position:fixed;width:28px;height:28px;z-index:90;pointer-events:none;animation:pq-fly .8s cubic-bezier(.5,0,.4,1) forwards}
@keyframes pq-fly{0%{transform:translate(0,0) scale(1)}60%{transform:translate(calc(var(--tx) * .6),calc(var(--ty) * .6 - 40px)) scale(1.1)}100%{transform:translate(var(--tx),var(--ty)) scale(.5);opacity:.2}}
.pq-bank{background:rgba(0,0,0,.28);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.pq-bank-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pq-bank-h span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pq-bank-h strong{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--gold-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.pq-meter{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.pq-meter i{height:10px;border-radius:3px;background:rgba(255,255,255,.08);transition:background .3s}
.pq-meter i.on{background:linear-gradient(180deg,#FFE9A3,#E0A93C);box-shadow:0 0 6px rgba(243,194,79,.6)}
.pq-bank small{color:var(--muted);font-size:11.5px}

/* rolos */
.pq-machine{display:flex;flex-direction:column;align-items:center;gap:8px}
.pq-reels{position:relative;display:grid;grid-template-columns:repeat(3,var(--cell));gap:8px;padding:10px;border-radius:20px;
  background:linear-gradient(180deg,#F6D47A,#B57E26);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 14px 30px rgba(0,0,0,.45)}
.pq-reel{height:calc(var(--cell) * 3);overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#0B2219,#12382A 50%,#0B2219);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 10px 14px rgba(0,0,0,.45),inset 0 -10px 14px rgba(0,0,0,.45)}
.pq-strip{display:flex;flex-direction:column}
.pq-cell{height:var(--cell);display:grid;place-items:center;position:relative}
.pq-cell svg{width:74%;height:74%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.pq-wtag{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;font-size:clamp(8px,2.3vw,10.5px);letter-spacing:.08em;
  background:#B8322A;color:#fff;padding:1px 6px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 0 #6E1A14}
.pq-reel.spinning .pq-strip{animation:pq-roll .32s linear infinite;filter:blur(1.5px)}
@keyframes pq-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.pq-reel.land .pq-strip{animation:pq-land .28s cubic-bezier(.3,1.5,.6,1)}
@keyframes pq-land{0%{transform:translateY(-14%)}100%{transform:translateY(0)}}
.pq-cell.hit{animation:pq-glow .8s ease-in-out infinite alternate}
.pq-cell.hit::after{content:"";position:absolute;inset:6%;border-radius:12px;border:2px solid var(--gold-hi);box-shadow:0 0 14px rgba(243,194,79,.7)}
@keyframes pq-glow{from{transform:scale(1)}to{transform:scale(1.07)}}
.pq-lines{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;overflow:visible}
.pq-lines polyline{fill:none;stroke:#FFE07A;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.85;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,210,90,.9))}
.pq-msg{min-height:24px;font-weight:700;font-size:14px;text-align:center;color:var(--muted)}
.pq-msg.ok{color:var(--gold-hi)}
.pq-msg.big{color:#FFE07A;font-family:var(--f-display);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;animation:pq-hop .6s ease 2}
.pq-msg.err{color:var(--down)}

/* barra de valores e controles */
.pq-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:14px;padding:8px 12px;flex:none}
.pq-stat{display:flex;flex-direction:column;min-width:0}
.pq-stat.r{align-items:flex-end}
.pq-bar small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pq-bar strong{font-family:var(--f-display);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pq-stat strong.pos{color:var(--up)}
.pq-stake{display:flex;flex-direction:column;align-items:center}
.pq-stake-row{display:flex;align-items:center;gap:8px}
.pq-stake-row strong{min-width:76px;text-align:center;font-size:18px;color:var(--gold-hi)}
.pq-ctrl{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;flex:none}
.pq-pill{height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px}
.pq-pill svg{width:16px;height:16px}
.pq-pill:hover{border-color:var(--gold)}
.pq-pill[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 22%,var(--surface-2));border-color:var(--gold);color:var(--gold-hi)}
.pq-pill:disabled{opacity:.4;cursor:not-allowed}
.pq-auto{position:relative;justify-self:start}
.pq-ctrl > .pq-pill{justify-self:end}
.pq-automenu{position:absolute;bottom:calc(100% + 8px);left:0;display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:5}
.pq-automenu button{width:64px;height:38px;border-radius:8px;border:0;background:var(--surface-2);color:var(--fg);font-family:var(--f-display);font-weight:800;font-size:15px}
.pq-automenu button:hover{background:var(--gold);color:var(--ink)}
.pq-spin{height:68px;min-width:150px;border-radius:999px;border:0;font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:.02em;color:var(--ink);
  background:radial-gradient(120% 140% at 50% 0%,#FFF0B8,#F3C24F 50%,#C48A2E);box-shadow:0 6px 0 #8A5B16,0 12px 24px rgba(0,0,0,.45);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;transition:transform .08s}
.pq-spin svg{width:22px;height:22px}
.pq-spin:active{transform:translateY(4px);box-shadow:0 2px 0 #8A5B16,0 6px 14px rgba(0,0,0,.45)}
.pq-spin:disabled{filter:grayscale(.5);opacity:.6;cursor:not-allowed}
.pq-spin.stop{background:radial-gradient(120% 140% at 50% 0%,#FFB4A8,#E0533F 55%,#9E2A1E);color:#fff;box-shadow:0 6px 0 #6E1A14,0 12px 24px rgba(0,0,0,.45)}
.pq-spin.sm{height:44px;min-width:0;font-size:15px;box-shadow:0 4px 0 #8A5B16}

/* folha de regras / lembrete */
.pq-sheet{position:absolute;inset:auto 0 0 0;max-height:82%;overflow:auto;background:var(--surface);border-top:1px solid var(--gold);border-radius:20px 20px 0 0;padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 -18px 40px rgba(0,0,0,.5)}
@media (min-width:640px){.pq-sheet{position:absolute;border-radius:20px}}
.pq-sheet h3{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:20px}
.pq-sheet h4{margin:14px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pq-sheet p{margin:0 0 8px;font-size:13.5px;line-height:1.5}
.pq-sh-head{display:flex;justify-content:space-between;align-items:center}
.pq-mute{color:var(--muted)}
.pq-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.pq-pay-r{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:10px;padding:6px 10px}
.pq-pay-s{display:flex}
.pq-pay-s svg{width:26px;height:26px;margin-right:-4px}
.pq-pay-r strong{font-family:var(--f-display);font-variant-numeric:tabular-nums;color:var(--gold-hi)}
.pq-lmap{display:flex;gap:10px;flex-wrap:wrap}
.pq-lm{display:flex;flex-direction:column;align-items:center;gap:3px}
.pq-lm-g{display:grid;grid-template-columns:repeat(3,12px);gap:2px}
.pq-lm-g i{width:12px;height:12px;border-radius:3px;background:var(--surface-2)}
.pq-lm-g i.on{background:var(--gold)}
.pq-lm small{color:var(--muted);font-size:11px}
.pq-reality p{font-size:15px;font-weight:600}
.pq-row{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

@media (max-height:700px) and (max-width:639px){.pq{--cell:min(calc((100vw - 64px) / 3),92px)}.pq-hero{grid-template-columns:minmax(0,110px) minmax(0,1fr)}.pq-spin{height:58px}}
@media (prefers-reduced-motion:reduce){.pq-pig,.pq-pig.spin,.pq-pig.win,.pq-pig.big,.pq-pig.break,.pq-cell.hit,.pq-msg.big{animation:none!important}.pq-reel.spinning .pq-strip{animation-duration:1.2s}}