/* Henrique · Ilha das Frutas — v3-v2 (revisão AAA, 02/10/2026)
   Pilha de fontes do sistema, arredondada; nada baixado. */
:root{--azul:#0f5f96;--azul-esc:#0a3d63;--amarelo:#ffe055;--amarelo-esc:#d9a21e;--creme:#f2fcff;--txt:#164c72;
 font-family:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold','Nunito','Varela Round',system-ui,sans-serif;color:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:#058dcc;overflow:hidden;-webkit-user-select:none;user-select:none}
button{font:inherit;cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:4px solid #fff;outline-offset:4px}
[hidden]{display:none!important}
#game{height:100svh;min-height:320px;position:relative;overflow:hidden;isolation:isolate}
#world,.vignette{position:absolute;inset:0}
canvas{width:100%;height:100%;display:block;touch-action:none}
/* pós leve feito no compositor (custa ~0 na GPU do celular): vinheta + leve calor no alto */
.vignette{pointer-events:none;z-index:1;background:radial-gradient(ellipse 120% 90% at 50% 55%,transparent 55%,rgba(4,40,70,.38) 100%),linear-gradient(180deg,rgba(255,236,190,.10),transparent 30%,transparent 72%,rgba(5,50,60,.22))}
#flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,230,.95),rgba(255,226,90,.55) 35%,rgba(255,180,60,0) 70%)}
#flash.on{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* ---------- topo ---------- */
header{position:absolute;z-index:6;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;pointer-events:none}
header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:2px;font-size:20px;line-height:1;text-shadow:0 2px 6px rgba(6,60,100,.55)}
.brand small{display:block;font-size:10px;letter-spacing:2.6px;margin-top:6px}
.bolt{font-size:50px;color:#ffe450;line-height:42px;transform:skew(-8deg);text-shadow:2px 3px #1574b9}
.top-actions{display:flex;gap:6px}
/* alvo de 72 px; o círculo visível é menor (::before) para não pesar na tela */
.icon{position:relative;width:72px;height:72px;border-radius:50%;background:transparent;color:#fff;font-size:26px;display:grid;place-items:center}
.icon::before{content:'';position:absolute;inset:7px;border-radius:50%;background:rgba(8,70,120,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.6);box-shadow:0 4px 0 rgba(6,50,90,.3);transition:transform .12s}
.icon:active::before{transform:scale(.92)}
.icon>span{position:relative;line-height:1}
#pause>span{font-size:22px;letter-spacing:-2px}
body.playing .brand{opacity:.0;pointer-events:none}

/* ---------- HUD ---------- */
.hud{position:absolute;z-index:5;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 4px);display:flex;align-items:center;gap:10px;padding-right:150px;pointer-events:none}
.fruit-score,.letter-score{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:7px;background:linear-gradient(180deg,#fff,#e8f7ff);border-radius:18px;padding:7px 13px 7px 10px;color:#17679e;box-shadow:0 4px 0 rgba(10,90,140,.28),0 8px 20px rgba(4,50,80,.18)}
.letter-score{background:linear-gradient(180deg,#fff7c9,#ffe577);color:#8a4b00}
.fruit-score>span,.letter-score>span{grid-row:span 2;font-size:26px}
.fruit-score b,.letter-score b{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.fruit-score small,.letter-score small{font-size:9px;font-weight:900;letter-spacing:1px}
.letter-score.pulo{animation:pulo .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pulo{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-4deg)}100%{transform:scale(1)}}
.journey{flex:1;min-width:0;text-shadow:0 1px 4px #03608d}
.journey>span{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.progress{position:relative;margin-top:6px;border-radius:20px;height:12px;background:rgba(6,70,120,.45);border:2px solid rgba(255,255,255,.7)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe254,#ffb02e);border-radius:20px}
.progress em{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-style:normal;color:#ffe450;font-size:22px;font-weight:900;text-shadow:0 0 4px #0b4d7a,0 2px 0 #1574b9}

/* ---------- menu ---------- */
.intro{position:absolute;z-index:3;top:13%;left:max(24px,6%);width:min(460px,calc(100% - 48px));text-shadow:0 2px 10px rgba(4,60,100,.55)}
.intro::before{content:'';position:absolute;z-index:-1;inset:-40px -60px -30px -80px;background:radial-gradient(ellipse at 35% 45%,rgba(6,80,140,.42),rgba(6,80,140,0) 70%);pointer-events:none}
.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:900;color:#e0fbff}
h1{font-size:clamp(42px,5.4vw,76px);line-height:.98;letter-spacing:-2px;margin:14px 0 18px;font-weight:950}
h1 em{font-style:normal;color:#ffdf43;text-shadow:0 3px 0 #c97f12,0 8px 20px rgba(120,60,0,.35)}
.fase-card{background:rgba(255,255,255,.94);color:var(--txt);border-radius:22px;padding:12px 14px 14px;box-shadow:0 6px 0 rgba(10,90,140,.25),0 14px 34px rgba(4,50,80,.22);text-shadow:none;max-width:400px}
.fase-top{display:flex;align-items:baseline;gap:10px;font-weight:900}
.fase-top b{font-size:13px;letter-spacing:1.5px;color:#0c88ab;text-transform:uppercase}
.fase-top span{font-size:17px}
.fase-stars{margin-left:auto;color:#f5b300;font-size:20px!important;letter-spacing:2px}
.fase-letras{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.chip{width:48px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:30px;font-weight:950;color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 3px 6px rgba(0,0,0,.12);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.chip.vazia{background:#dbe9f1!important;color:#9ab3c4;text-shadow:none}
.intro-buttons{display:flex;gap:12px;margin-top:18px;align-items:stretch;flex-wrap:wrap}
.play{display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(180deg,#ffe977,#ffd23a);color:#164363;box-shadow:0 6px 0 var(--amarelo-esc),0 14px 30px rgba(43,98,14,.22);border-radius:22px;min-height:76px;padding:14px 30px;font-weight:950;letter-spacing:1.5px;font-size:22px;transition:transform .15s,filter .15s;text-shadow:none}
.play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--amarelo-esc)}
.play:hover{filter:brightness(1.05)}
.play span{font-size:24px}
#play{min-width:200px;animation:respira 2.2s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.secondary-btn{min-height:72px;min-width:72px;padding:10px 18px;border-radius:20px;background:rgba(255,255,255,.92);color:#17679e;font-weight:900;font-size:17px;box-shadow:0 5px 0 rgba(10,90,140,.28);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-shadow:none}
.secondary-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(10,90,140,.28)}
.secondary-btn b{font-size:14px;background:#e3f3fb;border-radius:10px;padding:3px 7px}
.hoje{display:inline-block;margin-top:14px;font-size:14px;font-weight:800;background:rgba(8,60,105,.5);border-radius:12px;padding:5px 10px}
.instructions{display:flex;gap:16px;margin-top:14px;font-size:13px;font-weight:800;flex-wrap:wrap}
.instructions span{display:flex;align-items:center;gap:7px;background:rgba(8,60,105,.42);border-radius:12px;padding:4px 10px 4px 5px}
.instructions i{font-style:normal;border:1px solid rgba(255,255,255,.6);border-radius:9px;display:grid;place-items:center;width:30px;height:30px;font-size:18px;background:rgba(255,255,255,.18)}

/* ---------- mensagens e festa ---------- */
#message{position:absolute;z-index:5;top:24%;left:0;right:0;margin:0 auto;width:fit-content;max-width:92%;text-align:center;font-size:24px;font-weight:950;padding:8px 20px;border-radius:24px;background:rgba(8,60,105,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 2px 0 rgba(0,0,0,.25);pointer-events:none;transition:opacity .25s;opacity:0;white-space:nowrap}
#message:empty{display:none}
#festa{position:absolute;z-index:5;left:50%;top:40%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;pointer-events:none}
#festa.on{display:flex}
.festa-letra{font-size:min(38vmin,260px);line-height:.9;font-weight:950;color:#fff;-webkit-text-stroke:6px #0b4d7a;paint-order:stroke fill;text-shadow:0 10px 0 #0b4d7a,0 0 40px rgba(255,240,150,.95),0 0 90px rgba(255,200,60,.8)}
#festa.on .festa-letra{animation:festa-pop .7s cubic-bezier(.17,1.8,.4,1) both,festa-gira 1.6s ease-in-out .7s infinite}
.festa-palavra{margin-top:10px;background:linear-gradient(180deg,#fff,#e6f6ff);color:#0b4d7a;border-radius:999px;padding:8px 22px;font-size:28px;font-weight:900;box-shadow:0 6px 0 rgba(10,70,120,.3),0 14px 30px rgba(0,0,0,.2);white-space:nowrap}
.festa-palavra b{font-size:32px;letter-spacing:1px}
#festa-de{font-size:22px;opacity:.8}
#festa-nova{order:-1;margin-bottom:6px;background:#ff4d6d;color:#fff;font-weight:950;font-size:16px;letter-spacing:1px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 0 #b3203d}
#festa.on #festa-nova{animation:festa-sobe .4s .5s cubic-bezier(.2,1.5,.4,1) both}
#festa.on .festa-palavra{animation:festa-sobe .5s .35s cubic-bezier(.2,1.5,.4,1) both}
#festa.voa{animation:festa-voa .55s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes festa-pop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
@keyframes festa-gira{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.05)}}
@keyframes festa-sobe{0%{opacity:0;transform:translateY(30px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes festa-voa{to{transform:translate(calc(-50% + var(--tx,-40vw)),calc(-50% + var(--ty,-40vh))) scale(.08);opacity:.4}}
.seta-dica{position:absolute;z-index:4;top:60%;font-size:84px;line-height:1;color:#ffe450;-webkit-text-stroke:4px #0b4d7a;paint-order:stroke fill;text-shadow:0 6px 0 #0b4d7a;pointer-events:none;opacity:0;transition:opacity .2s}
.seta-dica.esq{left:8px}.seta-dica.dir{right:8px}
.seta-dica.on{opacity:1;animation:seta 0.7s ease-in-out infinite}
.seta-dica.esq.on{--d:-14px}.seta-dica.dir.on{--d:14px}
@keyframes seta{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--d))}}

/* ---------- controles: dois polegares; um dedo só já basta ---------- */
.controls{position:absolute;inset:0;pointer-events:none;z-index:2;user-select:none}
.tapzone{position:absolute;left:0;right:0;top:150px;bottom:0;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.tap-hint{position:absolute;top:38%;font-size:34px;opacity:.28;text-shadow:0 2px 6px #0b4d7a;animation:taphint 2.4s ease-in-out 3}
.tap-hint.left{left:14px}.tap-hint.right{right:14px}
@keyframes taphint{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
.steer{position:absolute;left:0;bottom:0;width:50%;height:170px;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;outline-offset:-5px}
.steer-track{position:absolute;bottom:max(60px,calc(env(safe-area-inset-bottom) + 46px));left:18px;right:18px;max-width:210px;height:76px;border:2px solid rgba(255,255,255,.7);border-radius:40px;background:rgba(8,91,151,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:22px;box-shadow:0 5px 0 rgba(22,92,139,.3)}
.steer-track #steer-knob{position:absolute;left:calc(50% - 29px);width:58px;height:58px;border-radius:50%;background:#e9fcff;color:#1573a2;display:grid;place-items:center;font-size:26px;box-shadow:0 3px 8px rgba(22,67,99,.35)}
.steer small{position:absolute;bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px));left:12px;right:12px;max-width:226px;text-align:center;font-size:10px;font-weight:900;text-shadow:0 2px 3px #164363}
.steer:focus-visible{outline:3px solid white}.steer.dragging .steer-track{background:rgba(8,120,185,.6)}
.controls .jump{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px));width:clamp(140px,40vw,190px);height:120px;border-radius:32px;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;background:linear-gradient(180deg,#ffe977,#ffd23a);color:#174769;border:3px solid #fff5a1;box-shadow:0 6px 0 #c59b2d,0 12px 26px rgba(0,0,0,.18)}
.controls .jump:active{transform:translateY(4px);box-shadow:0 2px 0 #c59b2d}
.jump span{font-size:34px;line-height:1;margin:0}.jump b{font-size:21px}.jump small{font-size:9px;letter-spacing:.3px}

/* ---------- janelas ---------- */
.modal{position:absolute;inset:0;z-index:8;background:rgba(6,62,107,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);display:grid;place-items:center;padding:12px}
.card{width:min(440px,100%);max-height:calc(100svh - 24px);overflow:auto;padding:26px 24px;border:2px solid rgba(255,255,255,.75);border-radius:32px;background:linear-gradient(180deg,#f6feff,#e2f5fc);color:var(--txt);text-align:center;box-shadow:0 20px 80px rgba(6,59,119,.4);animation:card-in .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes card-in{from{transform:translateY(30px) scale(.94);opacity:0}}
.card-icon{font-size:50px;margin-bottom:6px}
.card .eyebrow{color:#0c88ab;font-size:11px}
.card h2{font-size:30px;letter-spacing:-1px;margin:8px 0}
.card p{font-size:16px;margin:0 0 18px;font-weight:700}
.card .play{width:100%}
.card-row{display:flex;gap:10px;margin-top:14px;justify-content:center;flex-wrap:wrap}
.card-row .secondary-btn{flex:1 1 0;min-width:96px;background:#fff;font-size:16px;padding:8px 10px}
.toggle-row,.vol-voz{display:flex;align-items:center;gap:10px;margin:10px auto 0;font-size:15px;font-weight:850;color:#287da4;min-height:56px}
.toggle-row{min-height:72px;background:#fff;border-radius:18px;padding:0 16px;cursor:pointer}
.toggle-row span,.vol-voz span{white-space:nowrap}
.toggle-row input{margin-left:auto;width:52px;height:30px;accent-color:#149ee2}
.vol-voz input{flex:1;min-width:0;height:36px;accent-color:#149ee2}
.vol-voz output{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.stars{display:flex;justify-content:center;gap:10px;margin:8px 0 2px}
.stars i{font-style:normal;font-size:62px;line-height:1;color:#cfdde6;text-shadow:0 4px 0 #a9bcc8;transform:scale(.6)}
.stars i.on{color:#ffcf1f;text-shadow:0 4px 0 #d38a00,0 0 24px rgba(255,200,40,.75);animation:estrela .55s cubic-bezier(.2,1.8,.4,1) both}
.stars i:nth-child(2){font-size:78px;margin-top:-10px}
@keyframes estrela{0%{transform:scale(0) rotate(-120deg)}100%{transform:scale(1) rotate(0)}}
.fim-letras{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 12px;min-height:10px}
.fim-letras button.chip{width:72px;height:72px;font-size:40px;border-radius:18px}
.fim-totais{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.fim-totais span{background:#fff;border-radius:14px;padding:8px 12px;font-weight:850;font-size:15px}
.fim-totais b{font-size:19px}
.fim-prox{font-size:15px!important;margin-bottom:12px!important}
.card-album{width:min(720px,100%)}
.album-head{display:flex;align-items:center;gap:12px;text-align:left}
.album-head h2{margin:0!important;white-space:nowrap;font-size:26px!important}
.album-head>span{white-space:nowrap;font-weight:900;color:#0c88ab;background:#fff;border-radius:12px;padding:4px 10px}
.album-head .fechar{margin-left:auto;color:#fff;flex-shrink:0}
.album-dica{font-size:14px!important;margin:6px 0 12px!important;text-align:left}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.album-grid button{position:relative;height:92px;border-radius:18px;font-size:42px;font-weight:950;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:inset 0 -6px 0 rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.1);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.album-grid button small{font-size:20px;margin-top:4px;text-shadow:none}
.album-grid button em{position:absolute;top:4px;right:6px;font-style:normal;font-size:11px;background:rgba(255,255,255,.9);color:#0b4d7a;border-radius:8px;padding:1px 5px;text-shadow:none}
.album-grid button.vazia{background:#dfeaf1;color:#a4b9c7;text-shadow:none;box-shadow:inset 0 0 0 3px #cbdbe5}
.album-grid button.vazia small{opacity:.35;filter:grayscale(1)}
.album-hoje{margin-top:12px;font-weight:800;font-size:14px}
#loading{position:absolute;z-index:9;bottom:70px;left:0;right:0;text-align:center;font-size:15px;font-weight:800;text-shadow:0 2px 6px #0b4d7a}
#error{position:absolute;inset:0;background:#177fc4;padding:15%;z-index:20}

/* turbo */
.speedlines{position:absolute;inset:-10%;pointer-events:none;display:none;opacity:0;z-index:1;background:repeating-conic-gradient(from 0deg at 50% 58%,rgba(255,255,255,0) 0deg 4.2deg,rgba(255,255,255,.8) 4.2deg 4.7deg,rgba(255,255,255,0) 4.7deg 9.3deg);-webkit-mask-image:radial-gradient(ellipse at 50% 58%,transparent 36%,#000 80%);mask-image:radial-gradient(ellipse at 50% 58%,transparent 36%,#000 80%);animation:speedlines .24s steps(3) infinite}
@keyframes speedlines{0%{transform:rotate(0) scale(1.02)}100%{transform:rotate(3deg) scale(1.1)}}

/* ---------- celular em pé ---------- */
@media (max-width:700px){
 .brand{font-size:17px}.brand small{font-size:8px}.bolt{font-size:42px}
 .intro{top:max(96px,12%);left:20px;width:calc(100% - 40px)}
 h1{font-size:46px;letter-spacing:-1.5px;margin:10px 0 14px}
 .eyebrow{font-size:10px;letter-spacing:2px}
 .play{font-size:20px;min-height:76px}
 .intro-buttons{flex-wrap:nowrap;gap:10px}
 #play{flex:1 1 auto;min-width:0;padding:14px 18px;gap:12px}
 .intro-buttons .secondary-btn{flex:0 0 auto;padding:10px 12px;font-size:16px}
 .hud{padding-right:0;top:calc(max(12px,env(safe-area-inset-top)) + 80px);gap:8px}
 .fruit-score,.letter-score{padding:6px 10px 6px 8px;border-radius:16px}
 .fruit-score>span,.letter-score>span{font-size:22px}
 .fruit-score b,.letter-score b{font-size:21px}
 #message{font-size:20px;top:25%;white-space:normal}
 .card{padding:20px 16px}
 .stars i{font-size:54px}.stars i:nth-child(2){font-size:66px}
}
/* ---------- celular deitado (pouca altura) ---------- */
@media (max-height:520px) and (min-width:560px){
 header{top:8px}
 .bolt{font-size:38px;line-height:34px}.brand{font-size:16px}
 .intro{top:64px;left:max(20px,4%);width:min(520px,60%)}
 h1{font-size:30px;margin:0 0 8px;letter-spacing:-1px;white-space:nowrap}
 h1 br{display:none}
 h1 em{margin-left:.25em}
 .eyebrow,.instructions{display:none}
 .fase-card{padding:8px 12px 10px}
 .chip{width:40px;height:42px;font-size:24px}
 .intro-buttons{margin-top:10px;flex-wrap:nowrap}
 .play{min-height:72px;font-size:19px;padding:10px 22px}
 .hoje{margin-top:8px;font-size:13px}
 .hud{top:8px;left:max(200px,env(safe-area-inset-left));right:160px;padding-right:0}
 body.playing .hud{left:max(16px,env(safe-area-inset-left))}
 #message{top:22%}
 .tapzone{top:90px}
 .steer{height:130px}
 .steer-track{bottom:36px}
 .steer small{bottom:16px}
 .controls .jump{height:96px;width:170px;bottom:max(14px,env(safe-area-inset-bottom))}
 .seta-dica{font-size:64px;top:40%}
 .card{padding:14px 18px;border-radius:24px}
 .card-icon{display:none}
 .card h2{font-size:24px;margin:4px 0}
 .card p{margin-bottom:10px}
 .stars i{font-size:44px}.stars i:nth-child(2){font-size:54px;margin-top:-6px}
 .card-fim{width:min(780px,100%);display:flex;gap:20px;align-items:center;text-align:center}
 .fim-esq,.fim-dir{flex:1 1 0;min-width:0}
 .card-fim .eyebrow{display:block}
 .card-fim .card-row{margin-top:10px}
 .card-fim .card-row .secondary-btn{min-width:0;font-size:14px;padding:6px}
 .fim-letras button.chip{width:72px;height:72px;font-size:34px}
 .festa-letra{font-size:36vmin}
 #festa{top:54%}
 .festa-palavra{font-size:22px}.festa-palavra b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .speedlines{display:none!important}
 #play{animation:none}
}

/* ---------- melhorado-20261010 ---------- */
/* letras da fase no HUD: cinza até pegar; a que está vindo pisca */
.hud-letras{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.hud-letras i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.88);color:#7b8b99;font-size:16px;font-weight:950;text-shadow:none;box-shadow:0 2px 0 rgba(6,70,120,.35)}
.hud-letras i.pegou{background:var(--c);color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.35);paint-order:stroke fill}
.hud-letras i.vem{outline:3px solid #ffe450;outline-offset:1px;animation:hudvem .6s ease-in-out infinite alternate}
.hud-letras i.pop{animation:pulo .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes hudvem{from{transform:scale(1)}to{transform:scale(1.22)}}
/* tutorial */
.tutorial{position:absolute;inset:0;z-index:6;pointer-events:none}
.tut-txt{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));text-align:center;font-size:clamp(22px,4.6vw,34px);line-height:1.15;font-weight:950;color:#fff;background:rgba(8,60,105,.86);border:3px solid #ffe450;border-radius:24px;padding:14px 18px;box-shadow:0 8px 0 rgba(5,40,70,.35)}
.tut-mao{position:absolute;bottom:22%;font-size:84px;line-height:1;filter:drop-shadow(0 6px 0 rgba(5,40,70,.4));transition:left .35s,right .35s}
.tutorial[data-passo="0"] .tut-mao{left:16%;animation:tutmao 1s ease-in-out infinite}
.tutorial[data-passo="1"] .tut-mao{left:calc(84% - 84px);animation:tutmao 1s ease-in-out infinite}
.tutorial[data-passo="2"] .tut-mao{left:calc(50% - 42px);animation:tutsobe 1s ease-in-out infinite}
.tutorial[data-passo="3"] .tut-mao{display:none}
@keyframes tutmao{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(14px) scale(.9)}}
@keyframes tutsobe{0%{transform:translateY(40px);opacity:.2}60%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.tut-btn{display:inline-flex;align-items:center;gap:6px;min-height:56px;padding:0 16px;border:0;border-radius:18px;background:rgba(255,255,255,.95);color:#0c6f9a;font:inherit;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 rgba(10,90,140,.25)}
.instructions .tut-btn>span{display:inline;background:none;padding:0;border-radius:0}
.fim-extra{margin:6px 0 0;font-weight:900;color:#c24a1f;font-size:16px;min-height:0}
.fim-extra:empty{display:none}
#fim-letras .brilha{transform:scale(1.25);box-shadow:0 0 0 4px #ffe450,0 0 24px #ffe450;transition:transform .2s}
/* "Menos movimento" (pausa) faz o mesmo que o ajuste do sistema */
body.calmo .speedlines{display:none!important}
body.calmo #flash{display:none}
body.calmo .seta-dica.on,body.calmo .hud-letras i.vem,body.calmo .tut-mao{animation:none!important}
@media (max-height:520px) and (min-width:560px){
 .tut-txt{top:18%;font-size:22px;padding:10px 14px}
 .tut-mao{bottom:14%;font-size:64px}
 .hud-letras i{width:22px;height:22px;font-size:14px}
}
@media (max-height:520px) and (min-width:560px){
 .intro .instructions{display:flex!important;margin-top:8px}
 .intro .instructions span{display:none}
}