/* Entrada do jogo: a mão com os quatro níveis de animação. Reaproveita tokens e a carta de game.css. */
.lab-root{position:absolute;inset:0;z-index:1;text-align:left}
/* A entrada ocupa exatamente a tela (100dvh do #loading), sem rolagem: cabeçalho, herói e dica têm
   altura própria e a mão fica com o resto. "home" mede essa área para as consultas de contêiner. */
.lab-home{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;container:home/size}
/* Com o palco cobrindo a tela, a mão de trás para de pintar e animar. */
.lab-root.is-covered .lab-home{visibility:hidden}
.lab-root.is-covered .lab-home *,.lab-root.is-covered .lab-home *::before,.lab-root.is-covered .lab-home *::after{animation-play-state:paused}
.loading-state.screen-leaving .lab-root{animation:lab-leave .32s ease-in both}
@keyframes lab-leave{to{opacity:0;transform:scale(1.02)}}
.lab-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:env(safe-area-inset-top,0px) max(clamp(16px,4vw,34px),env(safe-area-inset-right,0px)) 0 max(clamp(16px,4vw,34px),env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:rgba(9,18,16,.82);backdrop-filter:blur(6px)}
.lab-header-actions{display:flex;align-items:center;gap:10px}
/* Som: ícone + rótulo; "Ativar som" pulsa enquanto o navegador ainda não liberou o áudio. */
.lab-sound{display:inline-flex;align-items:center;gap:8px;min-height:40px;min-width:40px;justify-content:center;background:#0e1d17cc;border:1px solid var(--line);border-radius:999px;padding:0 14px 0 12px;color:#d9d3b8;font-size:11px;letter-spacing:.04em}
.lab-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lab-sound[aria-pressed=true]{color:#f0dca8;border-color:#cfad6d}
.lab-sound.is-waiting{color:#e2c68a;border-color:#cfad6d;animation:lab-enter-pulse 2.2s ease-in-out infinite}
.lab-stage-actions .lab-sound{padding:0;width:38px;min-height:38px}
.lab-stage-actions .lab-sound-text{display:none}
.lab-motion svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;vertical-align:-3px}
.lab-chip-short svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;vertical-align:middle}
.lab-skip{display:inline-flex;align-items:center;gap:8px;min-height:40px;background:#0e1d17cc;border:1px solid var(--line);border-radius:999px;padding:0 16px;color:#e2c68a;font-size:11px;letter-spacing:.06em}
.lab-skip:hover:not(:disabled){border-color:#cfad6d}
.lab-skip span{font-size:15px;line-height:1}
/* O grupo herói + mão + dica fica centrado, um pouco acima do meio (respiro maior embaixo). */
.lab-main{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,3cqh,40px);padding:clamp(8px,3.5cqh,48px) max(16px,env(safe-area-inset-right,0px)) max(clamp(12px,5.5cqh,72px),env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lab-hero{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:720px}
.lab-hero .eyebrow{letter-spacing:.34em;font-size:10px}
.lab-hero h1{font:400 clamp(24px,min(5.4cqw + 16px,9cqw,6.6cqh),68px)/1.03 var(--serif);letter-spacing:-.02em;margin:clamp(8px,1.6cqh,16px) 0 clamp(8px,1.4cqh,14px);color:#f1ecda;text-wrap:balance}
.lab-hero p{font-size:14px;line-height:1.6;color:#c9cdbf;max-width:520px;text-wrap:balance}
.lab-hint{flex:none;font-size:10px;letter-spacing:.08em;line-height:1.4;color:var(--muted);text-align:center;text-wrap:balance}
.lab-hint b{color:#e2c68a;font-weight:600}

/* Mão: a área .lab-deck recebe a sobra de altura (até o que as cartas pedem pela largura) e as cartas
   se medem por ela, pela largura E pela altura. --lab-card-w é a largura da carta, em px, herdada pelos filhos. */
@property --lab-card-w{syntax:'<length>';inherits:true;initial-value:200px}
.lab-deck{flex:1 1 0;min-height:0;align-self:stretch;display:flex;align-items:center;justify-content:center;container:deck/size;
  max-height:calc(32px + 1.67 * min(264px,(100cqw - 40px) / 4.15))}
/* Leque: 4 cartas sobrepostas ocupam ~4,15 larguras; embaixo sobram ~0,17 da largura pela rotação e o
   topo reserva --top (selo "Sua última escolha") + 0,1 da largura para a carta subir no hover. */
.lab-hand{--top:32px;--lab-card-w:min(264px,calc((100cqw - 8px) / 4.15),calc((100cqh - var(--top)) / 1.67));list-style:none;margin:0;padding:calc(var(--top) + var(--lab-card-w) * .1) 0 calc(var(--lab-card-w) * .17);display:flex;justify-content:center;align-items:flex-end;perspective:1400px}
.lab-hand>li{--mid:calc((var(--n) - 1) / 2);--offset:calc(var(--i) - var(--mid));position:relative;margin:0 calc(var(--lab-card-w) * -.06);transform:translateY(calc(var(--offset) * var(--offset) * var(--lab-card-w) * .038)) rotate(calc(var(--offset) * 6deg));transform-origin:50% 130%;transition:transform .45s cubic-bezier(.34,1.56,.64,1);z-index:calc(1 + var(--i))}
.lab-hand>li:hover,.lab-hand>li:focus-within{transform:translateY(calc(var(--lab-card-w) * -.07)) rotate(0deg) scale(1.03);z-index:10}
.lab-last{position:absolute;z-index:5;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#213023;background:linear-gradient(125deg,#e2c68a,#b89554);border-radius:999px;padding:4px 10px;box-shadow:0 4px 14px #0008}
.lab-card-button{display:block;background:none;padding:0;border-radius:9px;width:var(--lab-card-w);aspect-ratio:5/7;container:labcard/inline-size}
.lab-card-button:hover:not(:disabled){filter:none}
.lab-card-button:focus-visible{outline:2px solid #e2c780;outline-offset:6px}

.lab-card.battle-card{--tilt-x:0deg;--tilt-y:0deg;--glare-x:50%;--glare-y:30%;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .3s;box-shadow:0 18px 38px #000a,0 0 0 1px #0006,inset 0 0 0 1px #394934;border-width:2px}
.lab-hand>li:hover .lab-card{box-shadow:0 30px 60px #000c,0 0 34px color-mix(in srgb,var(--element) 45%,transparent),inset 0 0 0 1px #394934}
.lab-hand>li.is-last .lab-card{outline:2px solid #e2c68a;outline-offset:3px}
/* Tipografia em cqw: a carta mantém a proporção em qualquer largura. */
.lab-card .card-cost{width:17cqw;height:19.5cqw;left:-4cqw;top:-4.5cqw;font-size:11cqw}
.lab-card .card-art{height:44%;min-height:44%}
.lab-card .card-name{font-size:9.6cqw;margin:4cqw 1cqw .6cqw}
.lab-card .card-subtitle{font-size:4.6cqw;margin-bottom:2.6cqw}
.lab-card .card-type-line{font-size:3.4cqw;letter-spacing:.14em;padding:1.6cqw 0}
.lab-card .card-ability{font-size:4.5cqw;line-height:1.42;padding:2.6cqw 3.2cqw 13cqw;text-align:center}
.lab-card .card-stats{position:absolute;display:flex;justify-content:space-between;left:3cqw;right:3cqw;bottom:2.6cqw;font-size:4.2cqw;font-weight:600}
.lab-card .card-stats span{display:inline-flex;align-items:center;gap:1.6cqw;background:#172a20e6;color:#efe3bd;border:1px solid #c9ad6a66;border-radius:3px;padding:1.2cqw 2.8cqw}
.lab-card .card-stats em{font-style:normal;font-size:4.2cqw;color:#d9bd7c}
.lab-card .card-rarity{position:absolute;right:50%;transform:translateX(50%);bottom:3cqw;font-size:5cqw}
.lab-card[data-rarity=common] .card-rarity{color:#5d6b58}
.lab-card[data-rarity=rare] .card-rarity{color:#4f86a3}
.lab-card[data-rarity=epic] .card-rarity{color:#8a5ea3}
.lab-card[data-rarity=legendary] .card-rarity{color:#d39b35;text-shadow:0 0 8px #f2c76a}
.lab-card-glare{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--glare-x) var(--glare-y),#fff6d855,transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.lab-hand>li:hover .lab-card-glare{opacity:1}

/* Miniaturas vivas na arte de cada carta (só CSS, custo quase zero) */
.lab-art-seal{position:relative;z-index:1;width:70%;fill:none;stroke:#e2c68a;stroke-width:3}
.lab-art-seal polygon{stroke-dasharray:760;stroke-dashoffset:760;animation:lab-draw 3.6s cubic-bezier(.65,0,.35,1) infinite}
.lab-art-seal polygon:nth-child(2){animation-delay:.25s;stroke-width:4}
.lab-art-seal .core{fill:#e2c68a33;animation-delay:.5s}
@keyframes lab-draw{0%{stroke-dashoffset:760;opacity:0}12%{opacity:1}55%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.lab-art-deal{position:relative;z-index:1;width:60%;height:60%}
.lab-art-deal i{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:5/7;margin:-24% 0 0 -17%;border-radius:3px;background:linear-gradient(145deg,#e1dbc0,#a6b399);border:1px solid #d9c58f;box-shadow:0 4px 10px #0008;animation:lab-deal 3.2s cubic-bezier(.34,1.56,.64,1) infinite}
.lab-art-deal i:nth-child(1){--r:-18deg;--x:-70%}
.lab-art-deal i:nth-child(2){--r:0deg;--x:0%;animation-delay:.15s}
.lab-art-deal i:nth-child(3){--r:18deg;--x:70%;animation-delay:.3s}
@keyframes lab-deal{0%,8%{transform:translate(0,40%) rotate(0) scale(.6);opacity:0}30%,80%{transform:translate(var(--x),0) rotate(var(--r)) scale(1);opacity:1}100%{transform:translate(var(--x),-10%) rotate(var(--r)) scale(1);opacity:0}}
.lab-art-embers{position:absolute;inset:0;z-index:1}
.lab-art-embers i{position:absolute;bottom:-6px;left:calc(8% + var(--k,0) * 6%);width:4px;height:4px;border-radius:50%;background:#ffcf7a;box-shadow:0 0 8px 2px #ff8a3d;animation:lab-ember 2.8s ease-in infinite}
.lab-art-embers i:nth-child(n){--k:0}
.lab-art-embers i:nth-child(2){--k:1;animation-delay:.4s}.lab-art-embers i:nth-child(3){--k:2;animation-delay:1.1s}.lab-art-embers i:nth-child(4){--k:3;animation-delay:.2s}.lab-art-embers i:nth-child(5){--k:4;animation-delay:1.6s}.lab-art-embers i:nth-child(6){--k:5;animation-delay:.9s}.lab-art-embers i:nth-child(7){--k:6;animation-delay:2.1s}.lab-art-embers i:nth-child(8){--k:7;animation-delay:.6s}.lab-art-embers i:nth-child(9){--k:8;animation-delay:1.3s}.lab-art-embers i:nth-child(10){--k:9;animation-delay:2.4s}.lab-art-embers i:nth-child(11){--k:10;animation-delay:.3s}.lab-art-embers i:nth-child(12){--k:11;animation-delay:1.8s}.lab-art-embers i:nth-child(13){--k:12;animation-delay:1s}.lab-art-embers i:nth-child(14){--k:13;animation-delay:2.6s}
@keyframes lab-ember{0%{transform:translate(0,0) scale(1);opacity:0}15%{opacity:1}100%{transform:translate(calc((var(--k) - 6) * 3px),-150px) scale(.2);opacity:0}}
.lab-art-shader{position:absolute;inset:0;z-index:1;background:conic-gradient(from var(--spin,0deg) at 50% 55%,#ab8cad00,#d7b8ff66,#8fe3ff55,#ffe0a055,#ab8cad00 70%),radial-gradient(circle at 50% 60%,#e8cd8633,transparent 60%);filter:blur(6px);animation:lab-spin 6s linear infinite;mix-blend-mode:screen}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lab-spin{to{--spin:360deg}}

/* Palco em tela cheia */
.lab-stage{position:fixed;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--stage-element,#83966a) 22%,#06120b),#06120b 70%);color:var(--text);overflow:hidden}
.lab-stage[data-element=ar]{--stage-element:#a7aea0}.lab-stage[data-element=terra]{--stage-element:#83966a}.lab-stage[data-element=fogo]{--stage-element:#b67b4a}.lab-stage[data-element=eter]{--stage-element:#ab8cad}
.lab-stage-root{position:absolute;inset:0;overflow:hidden}
.lab-stage-bar{position:absolute;z-index:40;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top,0px)) max(clamp(12px,3vw,24px),env(safe-area-inset-right,0px)) 12px max(clamp(12px,3vw,24px),env(safe-area-inset-left,0px));background:linear-gradient(#06120bd9,#06120b00);pointer-events:none}
.lab-stage-bar>*{pointer-events:auto}
/* Anterior/próximo nível em volta do título. */
.lab-stage-left{display:flex;align-items:center;gap:10px;min-width:0}
.lab-nav{flex:none;width:34px;height:34px;border-radius:50%;background:#0e1d17cc;border:1px solid var(--line);color:#f1ecda;font-size:20px;line-height:1;padding:0 0 2px}
.lab-nav:hover:not(:disabled){border-color:#cfad6d;filter:none}
.lab-stage-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.lab-stage-title strong{font:500 22px/1 var(--serif);color:#f1ecda;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-stage-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lab-stage-meta{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.lab-fps{display:inline-block;min-width:6ch;font:600 9px var(--sans);letter-spacing:.12em;color:#9fb3a3;font-variant-numeric:tabular-nums}
.lab-chip{background:#0e1d17cc;border:1px solid var(--line);color:#d9d3b8;border-radius:999px;padding:7px 12px;font-size:11px}
.lab-chip[aria-pressed=true]{border-color:#cfad6d;color:#f0dca8}
.lab-chip-short{display:none}
/* Iniciar de verdade: o mesmo dourado do botão de entrada do jogo. */
.lab-enter{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:38px;padding:5px 18px;border-radius:999px;background:linear-gradient(125deg,#e2c68a,#b89554);border:1px solid #e4cc95;color:#213023;box-shadow:0 4px 16px #0006}
.lab-enter strong{font:700 12px/1.1 var(--sans);letter-spacing:.04em}
.lab-enter small{font-size:8.5px;letter-spacing:.06em;opacity:.75}
.lab-enter-icon{display:none;width:18px;height:18px;fill:currentColor}
.lab-enter.is-ready{animation:lab-enter-pulse 2.2s ease-in-out infinite}
@keyframes lab-enter-pulse{0%,100%{box-shadow:0 4px 16px #0006,0 0 0 0 #e2c68a80}50%{box-shadow:0 4px 16px #0006,0 0 0 9px #e2c68a00}}
.lab-close{width:36px;height:36px;border-radius:50%;background:#0e1d17cc;border:1px solid var(--line);color:#f1ecda;font-size:15px}
.lab-stage-loading{position:absolute;z-index:30;inset:auto 0 50% 0;text-align:center;font:italic 18px var(--serif);color:#cfc6a6;pointer-events:none}

@media(max-width:760px){
  .lab-header{min-height:60px}
  .lab-header .game-brand em{display:none}
  .lab-skip{padding:0 12px;font-size:10px}
  .lab-header-actions{gap:6px}
  .lab-header .lab-sound-text{display:none}
  .lab-header .lab-sound{padding:0}
}
/* Barra do palco compacta (só ícones) em telas estreitas e no celular deitado: sempre numa linha,
   com altura estável para as demonstrações que se medem por ela. */
@media(max-width:900px),(max-height:500px){
  .lab-stage-bar{gap:8px}
  .lab-stage-title strong{font-size:16px}
  .lab-stage-actions .lab-sound{width:40px;min-height:40px}
  .lab-chip{min-height:40px;min-width:40px;padding:0 10px;font-size:10px}
  .lab-restart{min-width:40px}
  .lab-stage-left{gap:6px}
  /* Sem espaço para o nome: fica o nível e, embaixo, o fps (o nome já aparece na demonstração). */
  .lab-stage-title{overflow:hidden}
  .lab-stage-title strong{display:none}
  .lab-stage-meta{flex-direction:column;align-items:flex-start;gap:3px}
  .lab-nav{width:32px;height:40px;border-radius:999px;font-size:18px}
  .lab-chip-long,.lab-chip-text,.lab-level-sub,.lab-enter small{display:none}
  .lab-chip-short{display:inline}
  .lab-stage-actions{flex-wrap:nowrap;gap:5px}
  /* No celular, só ícones: o Iniciar vira um botão dourado redondo com o triângulo de jogar. */
  .lab-enter{width:40px;min-height:40px;padding:0;border-radius:50%;flex:none}
  .lab-enter strong{display:none}
  .lab-enter-icon{display:block}
  .lab-close{width:40px;height:40px;flex:none}
}
/* Telas em pé (celular, tablet vertical): mão 2x2, que rende cartas maiores que o leque. O selo da
   última escolha monta na borda de cima da carta para não pedir espaço entre as linhas. */
@container home (aspect-ratio < 7/8){
  .lab-deck{max-height:calc(30px + 2.8 * min(240px,(100cqw - 46px) / 2))}
  .lab-hand{--top:10px;--lab-card-w:min(240px,calc((100cqw - 14px) / 2),calc((100cqh - 30px) / 2.8));display:grid;grid-template-columns:repeat(2,var(--lab-card-w));gap:14px;padding:var(--top) 0 6px}
  .lab-hand>li,.lab-hand>li:hover,.lab-hand>li:focus-within{margin:0;transform:none}
  .lab-last{top:-9px;font-size:clamp(6.5px,calc(var(--lab-card-w) * .062),8px);letter-spacing:.1em;padding:3px 9px}
  .lab-last-own{display:none}
}
@container home (aspect-ratio < 7/8) and (height < 880px){
  .lab-hero p{display:none}
}
@container home (height < 700px){
  .lab-hero p{display:none}
}
/* Baixinhas (celular deitado, janelas curtas): cabeçalho fino, título numa linha, selo na borda. */
@container home (height < 560px){
  .lab-header{min-height:52px}
  .lab-hero .eyebrow{display:none}
  .lab-hero h1{margin:0}
}
@container home (height < 560px) and (aspect-ratio >= 7/8){
  .lab-hero h1 br{display:none}
  .lab-hand{--top:12px}
  .lab-deck{max-height:calc(12px + 1.67 * min(264px,(100cqw - 40px) / 4.15))}
  .lab-last{top:-9px;font-size:clamp(6.5px,calc(var(--lab-card-w) * .062),8px);letter-spacing:.1em;padding:3px 9px}
  .lab-last-own{display:none}
}
@container home (aspect-ratio < 7/8) and (height < 700px){
  .lab-hero .eyebrow{display:none}
  .lab-hero h1{margin-top:0}
}
/* Cartas pequenas: some o texto da habilidade e a arte cresce; o resto nunca fica abaixo do legível. */
@container labcard (width < 150px){
  .lab-card .card-ability{display:none}
  .lab-card .card-art{height:57%;min-height:57%}
  .lab-card .card-name{margin-top:6cqw}
}
.lab-card .card-subtitle{font-size:max(6.5px,4.6cqw)}
.lab-card .card-type-line{font-size:max(5.5px,3.4cqw)}
.lab-card .card-stats,.lab-card .card-stats em{font-size:max(6.5px,4.2cqw)}
@media(prefers-reduced-motion:reduce){
  .lab-hand>li,.lab-card.battle-card{transition:none}
}
.lab-root.is-reduced .lab-art-seal polygon,.lab-root.is-reduced .lab-art-deal i,.lab-root.is-reduced .lab-art-embers i,.lab-root.is-reduced .lab-art-shader,.lab-root.is-reduced .lab-enter.is-ready{animation:none;stroke-dashoffset:0;opacity:1}