/* Tutorial guiado (tutorial.js, Leo 04/10/2026): tela escurecida com um recorte no alvo, anel pulsante e cartão com o passo.
   Os blocos escuros cobrem tudo menos o alvo, então o jogador só consegue clicar no que o passo pede. */
.tutRoot{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.tutRoot[hidden]{display:none}
.tutShade{position:absolute;background:rgba(6,4,12,.78);pointer-events:auto;cursor:not-allowed}
.tutShade[hidden]{display:none}
.tutRing{position:absolute;border-radius:12px;border:2px solid #ffd98a;box-shadow:0 0 0 4px #ffd98a33,0 0 28px #ffd98a88,inset 0 0 18px #ffd98a33;pointer-events:none;animation:tutPulse 1.6s ease-in-out infinite;transition:left .25s,top .25s,width .25s,height .25s}
.tutRing[hidden]{display:none}
.tutCard{position:absolute;width:min(430px,calc(100vw - 24px));display:grid;gap:10px;padding:16px 18px 16px;border-radius:14px;pointer-events:auto;
 background:linear-gradient(180deg,#221a2f,#140e1c);border:1px solid #e8c98b88;box-shadow:0 22px 60px #000d,0 0 0 1px #0009;color:#f1ecdf}
.tutHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tutStep{font-size:12px;letter-spacing:2.4px;color:#e8c98b}
.tutTitle{margin:0;font:700 clamp(22px,2vw,28px)/1.1 var(--e-display,Georgia,serif);color:#fff3d6}
.tutText{margin:0;font-size:17px;line-height:1.55;color:#e4dbd0}
.tutActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.tutHint{font-size:14px!important;letter-spacing:.2px!important;color:#b9aec6!important;line-height:1.4}
.tutNext{padding:10px 20px;border-radius:9px;font-weight:700;background:linear-gradient(120deg,#bd8d4c,#ead5a0);color:#261b1d;border:1px solid #f2d595;box-shadow:0 4px 20px #c6984240}
.tutNext:hover:not(:disabled){background:#f2d595}
.tutGhost{padding:10px 18px;border-radius:9px;background:transparent;border:1px solid #ffffff33;color:#d8ccdf}
.tutExit{padding:4px 10px!important;font-size:13px!important;border-radius:999px;background:transparent;border:1px solid #ffffff22;color:#b9aec6}
.tutExit:hover:not(:disabled){border-color:#ef8e9c;color:#ffd5db;background:#ef8e9c14}
@keyframes tutPulse{50%{box-shadow:0 0 0 7px #ffd98a22,0 0 40px #ffd98acc,inset 0 0 22px #ffd98a44}}
.reduced .tutRing,.reduced .tutShade{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){.tutRing{animation:none;transition:none}}
@media(max-width:700px){.tutText{font-size:16px}.tutCard{padding:14px}}

.tutShade.hole{background:transparent}

/* Cartão de boas-vindas: maior, com a arte de uma carta ao lado (só ele tem arte) */
.tutArt{display:none}
.tutCard.intro{width:min(780px,calc(100vw - 32px));grid-template-columns:minmax(200px,270px) 1fr;column-gap:22px;padding:18px;align-items:start}
.tutCard.intro .tutArt{display:flex;align-items:flex-end;grid-row:1/span 4;min-height:340px;border-radius:12px;background:#120e18 center/cover no-repeat;border:2px solid #e8c98b88;box-shadow:0 14px 34px #000a,0 0 30px #ffd98a33}
.tutCard.intro .tutArt b{display:block;width:100%;padding:28px 12px 10px;border-radius:0 0 10px 10px;background:linear-gradient(transparent,#0b0810f2);font:700 17px var(--e-display,Georgia,serif);color:#fff3d6;text-shadow:0 2px 8px #000}
.tutCard.intro .tutTitle{font-size:clamp(30px,3vw,42px);align-self:end}
.tutCard.intro .tutText{font-size:19px}
.tutCard.intro .tutNext{padding:13px 26px;font-size:18px}
@media(max-width:700px){.tutCard.intro{grid-template-columns:1fr}.tutCard.intro .tutArt{grid-row:auto;min-height:190px}}