/* Jogo da Velha do Salsicha (Claude, 17/10/2026). Padrão visual do site: marrons, creme e Inter. */
:root{
  --jv-bg:#fff7ea; --jv-panel:#ffffff; --jv-line:rgba(123,68,38,.14);
  --jv-text:#322820; --jv-title:#3c2115; --jv-muted:#6b5b50; --jv-accent:#7b4426; --jv-caramel:#c98245;
  --jv-grass:#7fae5a; --jv-grass-2:#6a9a4a; --jv-hole:#6b4126; --jv-hole-2:#4a2b18; --jv-rim:#a7c97f;
  --jv-overlay:rgba(255,247,234,.97);
}
:root[data-theme="night"]{
  --jv-bg:#1f130c; --jv-panel:#2b1b12; --jv-line:rgba(255,212,164,.14);
  --jv-text:#f4e5cf; --jv-title:#fff7ea; --jv-muted:#c9ae92; --jv-accent:#c98245; --jv-caramel:#d99559;
  --jv-grass:#2f4d2b; --jv-grass-2:#263f23; --jv-hole:#3a2416; --jv-hole-2:#22150d; --jv-rim:#45683c;
  --jv-overlay:rgba(31,19,12,.96);
}
html,body,:root[data-theme="night"] body{background:var(--jv-bg)}
:root[data-theme="night"] .games-footer{background:#170e08}
body{color:var(--jv-text)}
[hidden]{display:none!important}

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

/* área de jogo */
.jv-play{padding:22px 16px 10px}
.jv-stage{position:relative;width:min(100%,520px);margin:0 auto;background:var(--jv-panel);border:1px solid var(--jv-line);border-radius:24px;padding:16px;box-shadow:0 18px 50px rgba(76,40,20,.13)}
.jv-players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.jv-player{display:grid;grid-template-columns:auto auto;grid-template-areas:"dog dog" "piece name" "piece wins";column-gap:8px;justify-items:start;align-items:center;padding:8px 10px;border-radius:16px;border:2px solid transparent;transition:border-color .2s,background .2s}
.jv-player--b{justify-items:end;grid-template-columns:auto auto;grid-template-areas:"dog dog" "name piece" "wins piece"}
.jv-player.is-turn{border-color:var(--jv-caramel);background:color-mix(in srgb,var(--jv-caramel) 12%,transparent)}
.jv-dog{grid-area:dog;width:96px;height:48px;background:url(../shared/assets/dachshund/poses-v2.png) 0 0/288px 96px no-repeat}
.jv-dog--rival{transform:scaleX(-1);filter:brightness(.45) saturate(.7) contrast(1.2)}
.jv-player.is-happy .jv-dog{background-position:-96px 0}
.jv-player.is-sad .jv-dog{background-position:-192px 0}
.jv-piece-mini{grid-area:piece;width:30px;height:30px}
.jv-player b{grid-area:name;white-space:nowrap;font-weight:800;color:var(--jv-title);font-size:.95rem;line-height:1.1}
.jv-player em{grid-area:wins;font-style:normal;font-weight:900;font-size:1.3rem;color:var(--jv-accent);font-variant-numeric:tabular-nums;line-height:1}
.jv-draws{display:grid;justify-items:center}
.jv-draws small{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--jv-muted)}
.jv-draws em{font-style:normal;font-weight:900;font-size:1.2rem;color:var(--jv-muted)}
.jv-turn{text-align:center;margin:6px 0 10px;font-weight:800;color:var(--jv-accent);min-height:1.6em}

/* tabuleiro: quintal com nove buracos */
.jv-board-wrap{position:relative;aspect-ratio:1;max-width:100%}
.jv-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4%;padding:4%;border-radius:22px;
  background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.18) 0 8%,transparent 9%),repeating-linear-gradient(115deg,var(--jv-grass) 0 14px,var(--jv-grass-2) 14px 28px);
  box-shadow:inset 0 0 0 4px var(--jv-rim),inset 0 -10px 0 rgba(0,0,0,.08)}
.jv-cell{position:relative;border:0;border-radius:50%;cursor:pointer;padding:0;
  background:radial-gradient(ellipse at 50% 60%,var(--jv-hole-2) 0 45%,var(--jv-hole) 62%,color-mix(in srgb,var(--jv-hole) 70%,var(--jv-grass)) 72%,transparent 74%);
  transition:transform .12s}
.jv-cell:hover:not([aria-disabled="true"]){transform:scale(1.04)}
.jv-cell:focus-visible{outline:4px solid var(--jv-caramel);outline-offset:2px}
.jv-cell svg{position:absolute;inset:12%;width:76%;height:76%;animation:jv-pop .28s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 4px 0 rgba(0,0,0,.22))}
.jv-cell.is-dust::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:6px dotted color-mix(in srgb,var(--jv-hole) 60%,#c9a27a);animation:jv-dust .4s ease-out both;pointer-events:none}
.jv-cell.is-win svg{animation:jv-wiggle .5s ease-in-out 2}
@keyframes jv-pop{from{transform:scale(.2) translateY(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes jv-dust{from{transform:scale(.6);opacity:.9}to{transform:scale(1.15);opacity:0}}
@keyframes jv-wiggle{50%{transform:rotate(-10deg) scale(1.08)}}
.jv-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* telas por cima do tabuleiro */
.jv-overlay{position:absolute;inset:0;z-index:5;border-radius:24px;background:var(--jv-overlay);display:grid;align-content:safe center;justify-items:center;gap:12px;padding:22px;text-align:center;overflow:auto;overscroll-behavior:contain}
.jv-overlay h1,.jv-overlay h2{margin:0;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--jv-title)}
.jv-overlay h1{font-size:clamp(1.7rem,6vw,2.3rem)}
.jv-overlay h2{font-size:clamp(1.8rem,7vw,2.6rem)}
.jv-overlay p{margin:0;color:var(--jv-muted);max-width:34ch}
.jv-sub{margin-bottom:4px!important}
.jv-choice{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jv-choice legend{width:100%;text-align:center;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--jv-muted);margin-bottom:4px}
.jv-choice label{position:relative}
.jv-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.jv-choice span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid #e8cfaf;background:var(--jv-panel);font-weight:700;color:var(--jv-text)}
:root[data-theme="night"] .jv-choice span{border-color:rgba(255,212,164,.2)}
.jv-choice input:checked+span{background:var(--jv-accent);border-color:var(--jv-accent);color:#fff}
:root[data-theme="night"] .jv-choice input:checked+span{color:#3c2115}
.jv-choice input:focus-visible+span{outline:3px solid var(--jv-caramel);outline-offset:2px}
.jv-ico{display:inline-block;width:22px;height:22px;background-size:contain;background-repeat:no-repeat}
.jv-main{min-width:200px}
:root[data-theme="night"] .jv-main{background:var(--jv-caramel);color:#3c2115}
.jv-result-kicker{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--jv-accent)!important}
.jv-record-line{font-weight:800;color:var(--jv-accent)!important}
.jv-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.jv-overlay--result{background:color-mix(in srgb,var(--jv-overlay) 88%,transparent);backdrop-filter:blur(2px)}
.jv-share-status{min-height:1.2em;font-size:.9rem}
.jv-live{width:min(100%,520px);margin:10px auto 0;font-size:.9rem;color:var(--jv-muted);text-align:center}

/* Sumiço: a peça que vai sair fica meio apagada; a do jogador da vez ganha um contorno pontilhado */
.jv-cell.is-old svg{opacity:.38;transform:scale(.84);filter:grayscale(.35) drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.jv-cell.is-next-out::before{content:"";position:absolute;inset:6%;border-radius:50%;border:3px dashed var(--jv-caramel);animation:jv-spin 6s linear infinite;pointer-events:none}
.jv-cell.is-dig::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--jv-hole) 40%,#c9a27a) 0 30%,transparent 62%);animation:jv-dig .45s ease-out both;pointer-events:none}
@keyframes jv-spin{to{transform:rotate(1turn)}}
@keyframes jv-dig{from{transform:scale(.4);opacity:1}to{transform:scale(1.3);opacity:0}}
.jv-variant-note{font-size:.88rem;margin:0 0 8px!important;line-height:1.4}
.jv-selo-line{font-weight:800;color:var(--jv-title)!important;background:color-mix(in srgb,var(--jv-caramel) 22%,transparent);border-radius:999px;padding:6px 14px}

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

@media (max-width:560px){
  .jv-header-in{min-height:60px;gap:8px}
  .jv-logo small{display:none}
  .jv-logo strong{white-space:nowrap;font-size:.95rem}
  .jv-player{padding:6px;column-gap:6px}
  .jv-player b{font-size:.85rem}
  .jv-piece-mini{width:24px;height:24px}
  .jv-score span{min-width:56px;padding:2px 8px}
  .jv-icon{width:40px;height:40px}
  .jv-play{padding:14px 10px 6px}
  .jv-overlay{gap:8px;padding:16px 12px}
  .jv-overlay h1{font-size:1.5rem}
  [data-start] .jv-sub{display:none}
  .jv-choice span{padding:8px 13px;font-size:.92rem}
  .jv-variant-note{font-size:.8rem}
  .jv-stage{padding:12px;border-radius:20px}
  .jv-dog{width:76px;height:38px;background-size:228px 76px}
  .jv-player.is-happy .jv-dog{background-position:-76px 0}
  .jv-player.is-sad .jv-dog{background-position:-152px 0}
}
@media (max-width:440px){
  .jv-logo>span:last-child{display:none}
  .jv-logo-dog{width:60px;height:30px;background-size:180px 60px}
  .jv-score span{min-width:52px;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){
  .jv-cell.is-next-out::before,.jv-cell.is-dig::after{animation:none}
  .jv-cell svg,.jv-cell.is-dust::after,.jv-cell.is-win svg{animation:none}
}

/* ===================================================================================
   Tela de título e telas de resultado (Claude, 19/10/2026)
   Conceito: "caixa de jogo" — fundo de terra escura com ossinhos, logo inclinado com
   volume (mesma fonte dos pôsteres), o salsicha comprido esticando no quintal e botões
   físicos que afundam ao tocar. Um visual só, igual de dia e de noite, como uma tela 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}
.jv-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-grass:#6f9e4c; --g-grass-2:#557f39; --g-red:#b4473f; --g-green:#48634c;
  --g-display:"Caixa","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
}
.jv-stage .jv-title,.jv-stage .jv-overlay--result{color:var(--g-cream)}

/* fundo de terra com ossinhos espalhados */
.jv-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%);
  align-content:start; gap:10px; padding:20px 18px 18px; border:0;
}
.jv-title-logo{display:grid;justify-items:center;margin-top:4px;animation:jv-logo-in .7s cubic-bezier(.2,1.4,.4,1) both}
.jv-title h1{margin:0;display:grid;justify-items:center;line-height:.86;transform:rotate(-4deg);letter-spacing:0}
.jv-logo-top{font:700 italic clamp(1.05rem,4.6vw,1.45rem)/1 var(--g-display);color:var(--g-peach);text-transform:uppercase;letter-spacing:.04em;
  -webkit-text-stroke:5px var(--g-earth);paint-order:stroke fill}
.jv-logo-main{font:700 italic clamp(3.1rem,15vw,4.6rem)/.9 var(--g-display);color:var(--g-cream);letter-spacing:-.01em;
  -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),8px 8px 0 var(--g-earth)}
@keyframes jv-logo-in{from{opacity:0;transform:scale(.6) translateY(-10px)}to{opacity:1;transform:none}}

/* quintal com o salsicha que estica e encolhe */
.jv-yard{position:relative;width:100%;height:86px;margin:2px 0;display:grid;place-items:end center;
  background:radial-gradient(60% 34% at 50% 100%,var(--g-grass) 0 98%,transparent 100%)}
.jv-longdog{display:flex;align-items:flex-start;height:72px;margin-bottom:6px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.jv-longdog img{height:72px;width:auto;flex:none;position:relative;z-index:1}
.jv-longdog img:first-child{margin-right:-8px}
.jv-longdog img:last-child{margin-left:-8px}
.jv-longdog-body{flex:none;align-self:flex-start;margin-top:32.6px;height:24px;width:46px;
  background:linear-gradient(#2d0f02 0 7%,#9a4326 10%,#86391c 20% 58%,#712f15 64%,#6d2e15 84%,#b25d2d 88% 93%,#2d0f02 95%);
  animation:jv-stretch 2.6s ease-in-out infinite alternate}
@keyframes jv-stretch{0%,15%{width:20px}85%,100%{width:min(150px,30vw)}}
.jv-yard-piece{position:absolute;bottom:2px;width:30px;height:30px;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3))}
.jv-yard-piece--osso{left:10%;transform:rotate(-12deg)}
.jv-yard-piece--bola{right:10%;animation:jv-ball 1.6s ease-in-out infinite}
@keyframes jv-ball{0%,100%{transform:translateY(0)}45%{transform:translateY(-16px)}55%{transform:translateY(-16px) scaleY(1)}}

/* escolhas como botões segmentados de console */
.jv-setup{width:100%;max-width:420px;display:grid;gap:8px}
.jv-seg{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:10px}
.jv-seg-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--g-peach);text-align:right;opacity:.85}
.jv-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),0 1px 0 rgba(255,212,164,.08)}
.jv-seg-opts label{position:relative;flex:1;min-width:0}
.jv-seg-opts input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.jv-seg-opts span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:4px 6px;border-radius:10px;
  font-weight:800;font-size:.86rem;color:var(--g-peach);text-align:center;line-height:1.1;transition:background .15s,color .15s,transform .1s}
.jv-seg-opts input:hover+span{background:rgba(255,212,164,.08)}
.jv-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)}
.jv-seg-opts input:active+span{transform:translateY(2px)}
.jv-seg-opts input:focus-visible+span{outline:3px solid var(--g-cream);outline-offset:1px}
.jv-title .jv-variant-note{margin:-2px 0 2px 82px!important;max-width:none;text-align:left;font-size:.78rem;color:var(--g-peach);opacity:.8;line-height:1.35}

/* botão físico */
.jv-play-btn{position:relative;border:0;cursor:pointer;padding:0;border-radius:18px;background:var(--g-shadow);font:inherit;margin-top:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.35)}
.jv-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}
.jv-play-btn:hover span{transform:translateY(-7px);filter:brightness(1.05)}
.jv-play-btn:active span{transform:translateY(-1px)}
.jv-play-btn:focus-visible{outline:3px solid var(--g-cream);outline-offset:4px}
.jv-title .jv-play-btn span{animation:jv-breathe 2.4s ease-in-out infinite}
@keyframes jv-breathe{50%{filter:brightness(1.1)}}
.jv-play-btn--small{margin-top:0}
.jv-play-btn--small span{padding:12px 26px 10px;font-size:1.25rem}
.jv-title-hint{margin:2px 0 0!important;font-size:.74rem;color:var(--g-peach)!important;opacity:.65}

/* ---------- resultado ---------- */
.jv-overlay--result{background:color-mix(in srgb,var(--g-earth) 55%,transparent);backdrop-filter:blur(3px);padding:16px}
.jv-card{position:relative;width:min(100%,380px);display:grid;justify-items:center;gap:8px;padding:30px 20px 18px;border-radius:24px;text-align:center;
  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:jv-card-in .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes jv-card-in{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.jv-ribbon{position:absolute;top:-16px;left:50%;transform:translateX(-50%);margin:0!important;white-space:nowrap;max-width:none!important;
  padding:7px 22px;border-radius:8px;font:700 italic .95rem/1 var(--g-display)!important;text-transform:uppercase;letter-spacing:.06em;
  background:var(--ribbon,var(--g-caramel));color:var(--g-earth)!important;border:3px solid var(--g-earth);box-shadow:0 4px 0 var(--g-earth)}
.jv-result-dog{width:144px;height:72px;background:url(../shared/assets/dachshund/poses-v2.png) 0 0/432px 144px no-repeat;margin-top:2px}
.jv-result-title{margin:0!important;font:700 italic clamp(2.4rem,11vw,3.3rem)/.95 var(--g-display)!important;letter-spacing:0!important;text-transform:uppercase;
  color:var(--title,var(--g-cream))!important;-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)}
.jv-result-text{margin:0!important;color:var(--g-peach)!important;opacity:.9;font-size:.92rem;max-width:30ch}
.jv-tally{display:flex;gap:8px;width:100%;justify-content:center}
.jv-tally span{flex:1;max-width:150px;display:grid;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.jv-tally small{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--g-peach);opacity:.75}
.jv-tally strong{font:700 italic 1.7rem/1.1 var(--g-display);color:var(--g-cream);font-variant-numeric:tabular-nums}
.jv-card .jv-record-line{margin:0!important;color:var(--g-earth)!important;background:linear-gradient(#ffe08a,#f2b84b);border-radius:999px;padding:5px 14px;font-weight:800;box-shadow:0 3px 0 var(--g-shadow)}
.jv-card .jv-selo-line{margin:0!important;color:var(--g-cream)!important;background:rgba(72,99,76,.85);border:2px solid #8fb36f;border-radius:16px;max-width:none;padding:5px 14px}
.jv-card .jv-actions{margin-top:6px;align-items:center}
.jv-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}
.jv-ghost-btn:hover{background:rgba(255,212,164,.1)}
.jv-ghost-btn:focus-visible{outline:3px solid var(--g-cream);outline-offset:2px}
.jv-card .jv-share-status{margin:0!important;color:var(--g-peach)!important;font-size:.85rem}
.jv-card .jv-share-status:empty{display:none}

/* cada desfecho com a sua cara */
[data-outcome="win"] .jv-card{--ribbon:linear-gradient(#ffe08a,#f2b84b);--title:#fff3dc}
[data-outcome="win"] .jv-result-dog{background-position:-144px 0;animation:jv-hop .5s ease-in-out 3}
[data-outcome="tie"] .jv-card{--ribbon:#a9c58a;--title:#e9dcc4}
[data-outcome="lose"] .jv-card{--ribbon:#d9786f;--title:#f0c8bf;background:radial-gradient(110% 80% at 50% 0%,#4a2d22,#33201a 55%,#1d120c)}
[data-outcome="lose"] .jv-result-dog{background-position:-288px 0}
[data-outcome="tie"] .jv-result-dog{background-position:0 0}
@keyframes jv-hop{50%{transform:translateY(-10px)}}

/* ossinhos de confete na vitória */
.jv-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;display:none}
[data-outcome="win"] .jv-confetti{display:block}
.jv-confetti i{position:absolute;left:50%;top:38%;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:jv-burst 1.1s cubic-bezier(.15,.7,.4,1) .15s forwards}
.jv-confetti i:nth-child(even){background:#d4e157;width:10px;height:10px;border-radius:50%;box-shadow:none}
.jv-confetti i:nth-child(1){--x:-150px;--y:-120px;--r:200deg}.jv-confetti i:nth-child(2){--x:140px;--y:-130px;--r:-160deg}
.jv-confetti i:nth-child(3){--x:-180px;--y:-10px;--r:120deg}.jv-confetti i:nth-child(4){--x:175px;--y:-30px;--r:-220deg}
.jv-confetti i:nth-child(5){--x:-110px;--y:-170px;--r:300deg}.jv-confetti i:nth-child(6){--x:100px;--y:-180px;--r:-90deg}
.jv-confetti i:nth-child(7){--x:-200px;--y:-90px;--r:40deg}.jv-confetti i:nth-child(8){--x:205px;--y:-95px;--r:-40deg}
.jv-confetti i:nth-child(9){--x:-40px;--y:-200px;--r:180deg}.jv-confetti i:nth-child(10){--x:50px;--y:-205px;--r:-180deg}
@keyframes jv-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)}}

@media (max-width:440px){
  .jv-title{padding:16px 12px 14px;gap:8px}
  .jv-seg{grid-template-columns:50px 1fr;gap:6px}
  .jv-seg-label{font-size:.62rem;letter-spacing:.05em}
  .jv-title .jv-variant-note{margin:-2px 0 2px 56px!important;font-size:.74rem}
  .jv-seg-opts span{min-height:36px;font-size:.8rem;padding:4px 3px}
  .jv-ico{width:18px;height:18px}
  .jv-yard{height:74px}
  .jv-longdog,.jv-longdog img{height:60px}
  .jv-longdog-body{margin-top:27.2px;height:20px}
  .jv-play-btn span{padding:13px 48px 11px;font-size:1.7rem}
  .jv-title-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .jv-title-logo,.jv-longdog-body,.jv-yard-piece--bola,.jv-title .jv-play-btn span,.jv-card,.jv-result-dog,.jv-confetti i{animation:none!important}
  .jv-longdog-body{width:90px}
}

/* a tela de título ocupa o cartão inteiro e cresce com o conteúdo (sem rolagem interna) */
.jv-stage:has(> [data-start]:not([hidden])) > .jv-players,
.jv-stage:has(> [data-start]:not([hidden])) > .jv-turn,
.jv-stage:has(> [data-start]:not([hidden])) > .jv-board-wrap{display:none}
.jv-stage:has(> [data-start]:not([hidden])) > [data-start]{position:relative;inset:auto;margin:-16px;border-radius:24px}
@media (max-width:560px){.jv-stage:has(> [data-start]:not([hidden])) > [data-start]{margin:-12px;border-radius:20px}}