/* Ponte de Salsicha (refeito pelo Claude em 19/10/2026). Padrão do site (marrons, creme, Inter) com telas de jogo. */
@font-face{font-family:"Caixa";src:url(../shared/fonts/display-bolditalic.woff) format("woff");font-weight:700;font-style:italic;font-display:swap}
:root{
  --pt-bg:#fff7ea; --pt-panel:#ffffff; --pt-line:rgba(123,68,38,.14);
  --pt-text:#322820; --pt-title:#3c2115; --pt-muted:#6b5b50; --pt-accent:#7b4426; --pt-caramel:#c98245;
}
:root[data-theme="night"]{
  --pt-bg:#1f130c; --pt-panel:#2b1b12; --pt-line:rgba(255,212,164,.14);
  --pt-text:#f4e5cf; --pt-title:#fff7ea; --pt-muted:#c9ae92; --pt-accent:#c98245; --pt-caramel:#d99559;
}
html,body,:root[data-theme="night"] body{background:var(--pt-bg)}
body{color:var(--pt-text)}
:root[data-theme="night"] .games-footer{background:#170e08}
[hidden]{display:none!important}

/* topo */
.pt-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--pt-bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--pt-line)}
.pt-header-in{width:min(calc(100% - 32px),1120px);margin:auto;min-height:68px;display:flex;align-items:center;gap:14px}
.pt-logo{display:flex;align-items:center;gap:10px;min-width:0}
.pt-logo-dog{width:52px;height:26px;background:url(../shared/assets/dachshund/poses-v2.png) 0 0/156px 52px no-repeat;flex:none}
.pt-logo strong{display:block;font-weight:900;letter-spacing:-.03em;color:var(--pt-title);line-height:1.1;white-space:nowrap}
.pt-logo small{display:block;font-size:.75rem;color:var(--pt-muted);font-weight:700}
.pt-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.pt-score{display:flex;gap:2px;background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:14px;padding:4px}
.pt-score span{display:grid;justify-items:center;padding:2px 12px;min-width:70px}
.pt-score small{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pt-muted)}
.pt-score strong{font-weight:900;font-size:1.1rem;color:var(--pt-accent);font-variant-numeric:tabular-nums;line-height:1.2}
.pt-icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--pt-line);background:var(--pt-panel);color:var(--pt-text);cursor:pointer;display:grid;place-items:center;font-size:1.05rem}

/* palco */
.pt-play{padding:22px 16px 10px}
.pt-stage{
  --g-earth:#24130b; --g-earth-2:#3c2115; --g-earth-3:#5a311b;
  --g-cream:#fff3dc; --g-peach:#ffd4a4; --g-caramel:#c98245; --g-caramel-2:#e09a57; --g-shadow:#5b2f17;
  --g-display:"Caixa","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  position:relative;width:min(100%,480px);aspect-ratio:21/32;max-height:calc(100dvh - 120px);margin:0 auto;border-radius:24px;overflow:hidden;
  background:#ffe2bd;box-shadow:0 18px 50px rgba(76,40,20,.18);border:3px solid var(--g-earth);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pt-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.pt-stage canvas:focus-visible{box-shadow:inset 0 0 0 4px var(--g-caramel)}
.pt-live{width:min(100%,480px);margin:10px auto 0;font-size:.9rem;color:var(--pt-muted);text-align:center}

/* telas por cima do palco */
.pt-overlay{position:absolute;inset:0;z-index:5;display:grid;align-content:safe center;justify-items:center;gap:10px;padding:20px 18px;text-align:center;overflow:auto;color:var(--g-cream)}
.pt-title{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffd4a4' opacity='.07'%3E%3Cg transform='translate(28 30) rotate(-30)'%3E%3Crect x='-12' y='-3.5' width='24' height='7' rx='3'/%3E%3Ccircle cx='-12' cy='-4' r='5'/%3E%3Ccircle cx='-12' cy='4' r='5'/%3E%3Ccircle cx='12' cy='-4' r='5'/%3E%3Ccircle cx='12' cy='4' r='5'/%3E%3C/g%3E%3Ccircle cx='88' cy='86' r='9'/%3E%3Ccircle cx='96' cy='22' r='3'/%3E%3Ccircle cx='20' cy='96' r='4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 0%,var(--g-earth-3) 0%,var(--g-earth-2) 45%,var(--g-earth) 100%)}
.pt-title-logo{display:grid;justify-items:center;animation:pt-logo-in .7s cubic-bezier(.2,1.4,.4,1) both}
.pt-title h1{margin:0;display:grid;justify-items:center;line-height:.86;transform:rotate(-4deg)}
.pt-logo-top{font:700 italic clamp(.95rem,4vw,1.2rem)/1 var(--g-display);color:var(--g-peach);text-transform:uppercase;letter-spacing:.06em;-webkit-text-stroke:5px var(--g-earth);paint-order:stroke fill;margin-bottom:6px}
.pt-logo-main{font:700 italic clamp(2.6rem,12vw,3.6rem)/.9 var(--g-display);color:var(--g-cream);-webkit-text-stroke:9px var(--g-earth);paint-order:stroke fill;
  text-shadow:1px 1px 0 var(--g-shadow),2px 2px 0 var(--g-shadow),3px 3px 0 var(--g-shadow),4px 4px 0 var(--g-shadow),5px 5px 0 var(--g-shadow),6px 6px 0 var(--g-shadow),7px 7px 0 var(--g-earth)}
.pt-logo-main--2{font-size:clamp(3.2rem,15vw,4.5rem)}
@keyframes pt-logo-in{from{opacity:0;transform:scale(.6) translateY(-10px)}to{opacity:1;transform:none}}

/* demonstração: o salsicha vira ponte entre dois tocos */
.pt-demo{position:relative;width:100%;max-width:340px;height:110px;margin:4px 0}
.pt-demo-post{position:absolute;bottom:0;width:58px;height:46px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,#5f341a,#8a5129 40%,#6b3d1f);box-shadow:inset 0 6px 0 #6f9e4c}
.pt-demo-post--a{left:8%}
.pt-demo-post--b{right:8%}
.pt-demo-dog{position:absolute;left:calc(8% + 6px);bottom:46px;display:flex;align-items:flex-start;height:46px;transform-origin:4px 100%;animation:pt-demo 3.6s cubic-bezier(.5,0,.3,1) infinite}
.pt-demo-dog img{height:46px;width:auto;flex:none;position:relative;z-index:1}
.pt-demo-dog img:first-child{margin-right:-5px}
.pt-demo-dog img:last-child{margin-left:-5px}
.pt-demo-body{flex:none;margin-top:20.8px;height:15.5px;width:10px;background:linear-gradient(#2d0f02 0 7%,#9a4326 10%,#86391c 20% 58%,#712f15 64%,#6d2e15 84%,#b25d2d 88% 93%,#2d0f02 95%);animation:pt-demo-body 3.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes pt-demo{0%,8%{transform:rotate(-90deg)}40%{transform:rotate(-90deg)}55%,92%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
@keyframes pt-demo-body{0%,8%{width:4px}40%,92%{width:min(122px,26vw)}100%{width:4px}}

/* modo */
.pt-seg{width:100%;max-width:360px;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px}
.pt-seg-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--g-peach);text-align:right;opacity:.85}
.pt-seg-opts{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.32);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.pt-seg-opts label{position:relative;flex:1;min-width:0}
.pt-seg-opts input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.pt-seg-opts span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:4px 6px;border-radius:10px;font-weight:800;font-size:.86rem;color:var(--g-peach);transition:background .15s,transform .1s}
.pt-seg-opts input:checked+span{background:linear-gradient(var(--g-caramel-2),var(--g-caramel));color:var(--g-earth);box-shadow:0 3px 0 var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.35)}
.pt-seg-opts input:active+span{transform:translateY(2px)}
.pt-seg-opts input:focus-visible+span{outline:3px solid var(--g-cream);outline-offset:1px}
.pt-mode-note{margin:0;max-width:34ch;font-size:.8rem;color:var(--g-peach);opacity:.8;line-height:1.35;min-height:2.7em}

/* botões físicos */
.pt-play-btn{position:relative;border:0;cursor:pointer;padding:0;border-radius:18px;background:var(--g-shadow);font:inherit;margin-top:4px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.pt-play-btn span{display:block;padding:14px 56px 12px;border-radius:18px;transform:translateY(-6px);background:linear-gradient(#f0b070,var(--g-caramel) 60%,#b86f34);color:var(--g-earth);
  font:700 italic 1.9rem/1 var(--g-display);text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.12);transition:transform .08s}
.pt-play-btn:hover span{transform:translateY(-7px);filter:brightness(1.05)}
.pt-play-btn:active span{transform:translateY(-1px)}
.pt-play-btn:focus-visible{outline:3px solid var(--g-cream);outline-offset:4px}
.pt-title .pt-play-btn span{animation:pt-breathe 2.4s ease-in-out infinite}
@keyframes pt-breathe{50%{filter:brightness(1.1)}}
.pt-play-btn--small{margin-top:0}
.pt-play-btn--small span{padding:12px 24px 10px;font-size:1.2rem}
.pt-title-hint{margin:0;font-size:.74rem;color:var(--g-peach);opacity:.65}
.pt-ghost-btn{border:2px solid rgba(255,212,164,.45);background:transparent;color:var(--g-peach);border-radius:14px;padding:10px 16px;font:inherit;font-weight:800;cursor:pointer}
.pt-ghost-btn:hover{background:rgba(255,212,164,.1)}
.pt-ghost-btn:focus-visible{outline:3px solid var(--g-cream);outline-offset:2px}

/* resultado */
.pt-overlay--result{background:color-mix(in srgb,var(--g-earth) 55%,transparent);backdrop-filter:blur(3px);padding:16px}
.pt-card{position:relative;width:min(100%,380px);display:grid;justify-items:center;gap:8px;padding:30px 18px 16px;border-radius:24px;
  background:radial-gradient(110% 80% at 50% 0%,var(--g-earth-3),var(--g-earth-2) 55%,var(--g-earth));border:3px solid var(--g-earth);
  box-shadow:0 0 0 2px rgba(255,212,164,.18) inset,0 18px 40px rgba(0,0,0,.45);animation:pt-card-in .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pt-card-in{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.pt-ribbon{position:absolute;top:-16px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;padding:7px 22px;border-radius:8px;
  font:700 italic .95rem/1 var(--g-display);text-transform:uppercase;letter-spacing:.06em;background:#8fc3c9;color:var(--g-earth);border:3px solid var(--g-earth);box-shadow:0 4px 0 var(--g-earth)}
.pt-result-dog{width:144px;height:72px;background:url(../shared/assets/dachshund/poses-v2.png) -288px 0/432px 144px no-repeat}
.pt-result-title{margin:0;font:700 italic clamp(2.3rem,10vw,3.1rem)/.95 var(--g-display);text-transform:uppercase;color:var(--g-cream);-webkit-text-stroke:7px var(--g-earth);paint-order:stroke fill;
  text-shadow:1px 1px 0 var(--g-shadow),2px 2px 0 var(--g-shadow),3px 3px 0 var(--g-shadow),4px 4px 0 var(--g-shadow),5px 5px 0 var(--g-earth);transform:rotate(-3deg)}
.pt-result-text{margin:0;color:var(--g-peach);opacity:.9;font-size:.9rem;max-width:32ch}
.pt-tally{display:flex;gap:6px;width:100%;justify-content:center}
.pt-tally span{flex:1;max-width:110px;display:grid;padding:8px 6px;border-radius:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.pt-tally small{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--g-peach);opacity:.75}
.pt-tally strong{font:700 italic 1.6rem/1.1 var(--g-display);color:var(--g-cream);font-variant-numeric:tabular-nums}
.pt-record-line{margin:0;color:var(--g-earth);background:linear-gradient(#ffe08a,#f2b84b);border-radius:999px;padding:5px 14px;font-weight:800;box-shadow:0 3px 0 var(--g-shadow)}
.pt-selo-line{margin:0;color:var(--g-cream);background:rgba(72,99,76,.85);border:2px solid #8fb36f;border-radius:16px;padding:5px 14px;font-weight:800}
.pt-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:6px}
.pt-share-status{margin:0;color:var(--g-peach);font-size:.85rem}
.pt-share-status:empty{display:none}
.is-record .pt-ribbon{background:linear-gradient(#ffe08a,#f2b84b)}
.is-record .pt-result-dog{background-position:-144px 0;animation:pt-hop .5s ease-in-out 3}
@keyframes pt-hop{50%{transform:translateY(-10px)}}
.pt-confetti{position:absolute;inset:0;pointer-events:none;display:none}
.is-record .pt-confetti{display:block}
.pt-confetti i{position:absolute;left:50%;top:36%;width:16px;height:7px;border-radius:4px;background:var(--g-cream);opacity:0;
  box-shadow:-5px -2px 0 -1px var(--g-cream),-5px 2px 0 -1px var(--g-cream),5px -2px 0 -1px var(--g-cream),5px 2px 0 -1px var(--g-cream);animation:pt-burst 1.1s cubic-bezier(.15,.7,.4,1) .15s forwards}
.pt-confetti i:nth-child(even){background:#f2b84b;box-shadow:none;width:10px;height:10px;border-radius:50%}
.pt-confetti i:nth-child(1){--x:-150px;--y:-120px;--r:200deg}.pt-confetti i:nth-child(2){--x:140px;--y:-130px;--r:-160deg}
.pt-confetti i:nth-child(3){--x:-180px;--y:-10px;--r:120deg}.pt-confetti i:nth-child(4){--x:175px;--y:-30px;--r:-220deg}
.pt-confetti i:nth-child(5){--x:-110px;--y:-170px;--r:300deg}.pt-confetti i:nth-child(6){--x:100px;--y:-180px;--r:-90deg}
.pt-confetti i:nth-child(7){--x:-200px;--y:-90px;--r:40deg}.pt-confetti i:nth-child(8){--x:205px;--y:-95px;--r:-40deg}
@keyframes pt-burst{0%{opacity:1;transform:translate(-50%,0) rotate(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(var(--y) + 60px)) rotate(var(--r)) scale(1)}}

/* selos */
.pt-selos{width:min(calc(100% - 32px),480px);margin:18px auto 8px;display:grid;gap:10px}
.pt-selos-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pt-selos h2{margin:0;font-size:1.15rem;font-weight:900;letter-spacing:-.03em;color:var(--pt-title)}
.pt-selos-head span{font-weight:800;color:var(--pt-muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.pt-selos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pt-selos li{display:grid;gap:2px;padding:10px 12px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--pt-muted) 45%,transparent);background:var(--pt-panel);min-width:0}
.pt-selos li b{font-weight:800;color:var(--pt-muted);font-size:.92rem}
.pt-selos li small{color:var(--pt-muted);font-size:.78rem;line-height:1.3}
.pt-selos li em{font-style:normal;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--pt-muted);margin-top:4px}
.pt-selos li.is-got{border:1px solid var(--pt-caramel);background:color-mix(in srgb,var(--pt-caramel) 14%,var(--pt-panel))}
.pt-selos li.is-got b{color:var(--pt-title)}
.pt-selos li.is-got em{color:var(--pt-accent)}
.pt-selos li.is-got em::before{content:"✓ "}
.pt-selos>p{margin:0;font-size:.82rem;color:var(--pt-muted)}

@media (max-width:560px){
  .pt-header-in{min-height:60px;gap:8px}
  .pt-logo small{display:none}
  .pt-score span{min-width:56px;padding:2px 8px}
  .pt-icon{width:40px;height:40px}
  .pt-play{padding:12px 10px 6px}
  .pt-stage{border-radius:20px;max-height:calc(100dvh - 92px)}
}
@media (max-width:440px){
  .pt-logo>span:last-child{display:none}
  .pt-logo-dog{width:60px;height:30px;background-size:180px 60px}
  .pt-score span{min-width:50px;padding:2px 6px}
  .pt-title-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pt-title-logo,.pt-demo-dog,.pt-demo-body,.pt-title .pt-play-btn span,.pt-card,.pt-result-dog,.pt-confetti i{animation:none!important}
  .pt-demo-body{width:90px}
}