/* Tutorial do Professor Oak (PC): foco no alvo, Oak e balão de fala com texto digitado. */
.tut-root { position: fixed; inset: 0; z-index: 5000; animation: tutIn .3s ease; }
.tut-root.is-leaving { opacity: 0; transition: opacity .25s; }
.tut-root.is-moving .tut-guide { opacity: .0; }
.tut-dim { position: absolute; inset: 0; background: transparent; }
.tut-root.is-centered .tut-dim { background: radial-gradient(circle at 50% 45%, #0b1630cc, #03060fee); }
.tut-hole { position: fixed; border-radius: .8rem; pointer-events: none; transition: left .35s cubic-bezier(.3, 1.2, .5, 1), top .35s cubic-bezier(.3, 1.2, .5, 1), width .35s, height .35s; box-shadow: 0 0 0 100vmax #03060fcc, 0 0 0 3px #fbbf24, 0 0 1.6rem #fbbf24aa, inset 0 0 1rem #fbbf2433; animation: tutPulse 1.6s ease-in-out infinite; }
.tut-hole[hidden] { display: none; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 100vmax #03060fcc, 0 0 0 3px #fde68a, 0 0 2.4rem #fbbf24, inset 0 0 1.4rem #fbbf2455; } }
@keyframes tutIn { from { opacity: 0; } to { opacity: 1; } }
.tut-guide { position: fixed; left: 50%; bottom: 5.4rem; display: flex; align-items: flex-end; gap: .6rem; width: min(40rem, calc(100vw - 2rem)); transform: translateX(-50%); transition: opacity .2s; animation: tutGuide .45s cubic-bezier(.2, 1.4, .4, 1); }
.tut-guide.is-top { bottom: auto; top: 4.6rem; }
.tut-root.is-centered .tut-guide { bottom: 50%; transform: translate(-50%, 50%); }
@keyframes tutGuide { from { opacity: 0; margin-bottom: -1.5rem; } to { opacity: 1; margin-bottom: 0; } }
.tut-oak { flex: none; display: grid; place-items: end center; width: 6.6rem; height: 9rem; }
.tut-oak img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 .5rem .4rem #000a); animation: tutOak 2.4s ease-in-out infinite; }
.tut-oak-fallback { font-size: 4.5rem; }
@keyframes tutOak { 50% { transform: translateY(-.25rem); } }
.tut-bubble { position: relative; flex: 1; min-width: 0; padding: .9rem 1.1rem .8rem; border: 3px solid #2b3a67; border-radius: 1rem; color: #1b1b2f; background: linear-gradient(180deg, #fffdf2, #f3edd2); box-shadow: 0 0 0 3px #fffdf2, 0 0 0 6px #2b3a67, 0 1rem 2.4rem #000a; cursor: pointer; }
.tut-bubble::before { content: ""; position: absolute; left: -1.05rem; bottom: 2.2rem; width: 1.2rem; height: 1.2rem; background: #f3edd2; border-left: 3px solid #2b3a67; border-bottom: 3px solid #2b3a67; transform: rotate(45deg); }
.tut-name { position: absolute; top: -.85rem; left: 1rem; padding: .15rem .7rem; border-radius: .4rem; background: linear-gradient(180deg, #ef4444, #991b1b); color: #fff; border: 2px solid #fffdf2; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .12em; box-shadow: 0 .15rem 0 #450a0a; }
.tut-text { min-height: 3.6rem; margin: .35rem 0 .2rem; font: 700 .9rem/1.6 var(--font-pixel-ui); color: #1b1b2f; text-transform: none; }
.tut-more { position: absolute; right: 1.1rem; bottom: 3.4rem; color: #c2410c; font-size: .8rem; opacity: 0; }
.tut-more.is-on { opacity: 1; animation: tutMore .7s steps(2) infinite; }
@keyframes tutMore { 50% { transform: translateY(.2rem); } }
.tut-foot { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
.tut-dots { display: flex; flex: 1; flex-wrap: wrap; gap: .22rem; }
.tut-dots i { width: .42rem; height: .42rem; border-radius: 50%; background: #c9c2a0; }
.tut-dots i.is-done { background: #2b3a67; }
.tut-dots i.is-on { background: #ef4444; box-shadow: 0 0 .4rem #ef4444; transform: scale(1.3); }
.tut-btn { min-height: 2rem; padding: 0 1rem; border-radius: .6rem; cursor: pointer; font: 800 .66rem var(--font-pixel-ui); letter-spacing: .1em; transition: transform .15s, filter .2s, box-shadow .2s; }
.tut-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tut-btn:active { transform: translateY(1px); }
.tut-btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.tut-skip { color: #4b5563; border: 2px solid #b8b194; background: #ebe5c8; }
.tut-next { color: #fff; border: 2px solid #fffdf2; background: linear-gradient(180deg, #34d399, #0f9d5b); box-shadow: 0 .2rem 0 #065f46, 0 0 1rem #22c55e55; text-shadow: 0 1px 0 #064e3b; }
@media (prefers-reduced-motion: reduce) { .tut-root, .tut-guide, .tut-oak img, .tut-hole, .tut-more.is-on { animation: none; transition: none; } }.tut-root .tut-text { text-transform: none !important; letter-spacing: 0; }

/* Help ("?") button next to the notification bell, and the topics modal */
html:not(.battlemon-mobile) .help-button { position:relative; flex-shrink:0; color:#fbbf24; border:1px solid #fbbf2480; background:#2a2010; }
html:not(.battlemon-mobile) #trainerProfileAnchor .help-button { width:2.125rem; height:2.125rem; min-height:0; padding:0; border-radius:.5rem; }
html:not(.battlemon-mobile) #homeTrainerProfileAnchor .help-button { width:3.5rem; height:3.5rem; min-height:0; border-radius:1rem; }
html:not(.battlemon-mobile) .help-button svg { width:1.1rem; height:1.1rem; }
html:not(.battlemon-mobile) #homeTrainerProfileAnchor .help-button svg { width:1.45rem; height:1.45rem; }
html:not(.battlemon-mobile) .help-button:hover { transform:scale(1.06); box-shadow:0 0 1rem #fbbf2466; }
html:not(.battlemon-mobile) #trainerProfileAnchor, html:not(.battlemon-mobile) #homeTrainerProfileAnchor { gap:.5rem; }
.help-card { width:min(40rem,94vw); }
.help-card .modal-header small { display:block; margin-top:.2rem; color:#94a3b8; font:700 .6rem var(--font-pixel-ui); letter-spacing:.05em; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; padding:.9rem 1rem; }
.help-topic { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border:1px solid #2e4063; border-radius:.6rem; background:#182238; color:#e2e8f0; text-align:left; cursor:pointer; transition:transform .15s,border-color .15s,box-shadow .15s; }
.help-topic:hover { transform:translateY(-2px); border-color:#fbbf24; box-shadow:0 0 .9rem #fbbf2433; }
.help-ico { display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.6rem; background:#0d1424; border:1px solid #334155; font-size:1.25rem; flex:none; }
.help-text { flex:1; min-width:0; }
.help-text strong { display:block; font:800 .82rem var(--font-pixel-ui); color:#fde68a; }
.help-text small { display:block; margin-top:.15rem; color:#94a3b8; font-size:.66rem; line-height:1.35; }
.help-topic i { color:#fbbf24; font-style:normal; font-size:1.2rem; }
.help-foot { display:flex; justify-content:center; padding:0 1rem 1rem; }


/* Menu inicial (PC): "?" e mudo da música com o mesmo tamanho e estilo, alinhados ao centro do botão de perfil */
html:not(.battlemon-mobile) #homeScreen :is(#btnHomeMusicMute, #btnHelpHome) { position: absolute; top: 1.5rem; z-index: 10; width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; border-radius: .8rem; display: inline-grid; place-items: center; color: #dff5ff; border: 1px solid #38bdf877; background: linear-gradient(135deg,#1b2b43f5,#0b1426f5); box-shadow: 0 .25rem 1rem #0006, inset 0 1px #ffffff15; }
html:not(.battlemon-mobile) #homeScreen #btnHomeMusicMute { right: 1rem; }
html:not(.battlemon-mobile) #homeScreen #btnHelpHome { right: 3.9rem; }
html:not(.battlemon-mobile) #homeScreen :is(#btnHomeMusicMute, #btnHelpHome) svg { width: 1.2rem; height: 1.2rem; }
html:not(.battlemon-mobile) #homeScreen #btnHelpHome:hover { border-color: #7dd3fc; box-shadow: 0 .25rem 1rem #0006, 0 0 1rem #38bdf840; }

/* Menu inicial (PC): perfil e notificações do mesmo tamanho dos botões "?" e música (2.5rem), centralizados na mesma linha */
html:not(.battlemon-mobile) #homeScreen .home-profile-anchor { top: 1.5rem; }
html:not(.battlemon-mobile) #homeScreen #homeTrainerProfileAnchor .home-profile-button { height: 2.5rem; min-height: 0; min-width: 0; gap: .5rem; padding: 0 .6rem 0 .3rem; border-radius: .8rem; }
html:not(.battlemon-mobile) #homeScreen #homeTrainerProfileAnchor .home-profile-button > img { width: 1.9rem; height: 1.9rem; border-radius: .55rem; }
html:not(.battlemon-mobile) #homeScreen .home-profile-text { gap: .1rem; }
html:not(.battlemon-mobile) #homeScreen .home-profile-text small { font-size: .45rem; }
html:not(.battlemon-mobile) #homeScreen .home-profile-text strong { font-size: .75rem; max-width: 9rem; }
html:not(.battlemon-mobile) #homeScreen .home-profile-button .trainer-level-chip { font-size: .5rem; padding: .06rem .3rem; }
html:not(.battlemon-mobile) #homeScreen .home-profile-button > svg { width: .9rem; height: .9rem; }
html:not(.battlemon-mobile) #homeScreen #homeTrainerProfileAnchor .reward-notifications-button { width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
html:not(.battlemon-mobile) #homeScreen #homeTrainerProfileAnchor .reward-notifications-button svg { width: 1.2rem; height: 1.2rem; }