/* Instruções compartilhadas pela abertura e pelos botões de ajuda. */
#help {
  color-scheme: light;
  color: #242424;
  background: #fbf9f5;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  padding: 0;
  width: min(940px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 90px #0005;
}
#help::backdrop { background: #18140f66; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.welcome-card { padding: 36px 40px 24px; text-align: center; }
#help h2 { margin: 0; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; }
#helpSubtitle { margin: 12px 0 0; color: #73716f; font-size: 18px; line-height: 1.4; }
.welcome-guides { margin: 32px 0 28px; }
.welcome-desktop { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.welcome-desktop section { padding: 0 22px; }
.welcome-desktop section:first-child { padding-left: 0; }
.welcome-desktop section:last-child { border-left: 1px solid #ded7cd; padding-right: 0; }
#help h3 { margin: 0 0 9px; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; font-weight: 650; }
#help section p { margin: 0; color: #686561; font-size: 16px; line-height: 1.5; }
.keyboard-options { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 26px 0 22px; }
.key-cluster { display: grid; grid-template-columns: repeat(3, 43px); gap: 5px; }
#help kbd { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(#fff,#f1ece5); border: 1px solid #d5cec3; color: #292724; border-radius: 7px; font-family: inherit; }
.key-cluster kbd { width: 43px; height: 43px; font-size: 22px; box-shadow: 0 3px 5px #4a35251b; }
.key-cluster kbd:first-child { grid-column: 2; }
.key-cluster kbd:nth-child(2) { grid-column: 1; }
.key-or { color: #74706b; font-size: 15px; }
.key-legend { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.key-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.key-legend kbd { width: 25px; height: 28px; font-size: 13px; border-radius: 5px; }
#help svg { fill: none; stroke: #82694f; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.mouse-icon { width: 180px; height: 148px; margin-top: 16px; }
.welcome-mobile { display: none; }
#bHelpOk { display: block; width: 100%; min-height: 56px; border: 0; border-radius: 11px; padding: 14px 18px; background: #735438; color: #fff; font: 600 19px/1.3 "Segoe UI",system-ui,sans-serif; cursor: pointer; transition: background .15s; }
#bHelpOk:hover { background: #60432a; }
#bHelpOk:focus-visible { outline: 3px solid #a58058; outline-offset: 4px; }
.welcome-arrow { margin-left: 14px; font-size: 24px; vertical-align: -1px; }
.welcome-footer { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #77736e; }
.welcome-signature { margin: 10px 0 0; font-size: 11px; line-height: 1.4; letter-spacing: .025em; color: #8a8177; }
#loading .loading-signature { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.55); font-size: 11px; font-weight: 400; letter-spacing: .025em; }
.help-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid #b7afa3; border-radius: 50%; font-size: 11px; font-weight: 600; }
#bHelpFloat { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 6; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff80; border-radius: 50%; color: #fff; background: #503d2d80; backdrop-filter: blur(6px); font: 600 24px "Segoe UI",sans-serif; cursor: pointer; }
#bHelpFloat:hover { background: #735438; }
#bHelpFloat:focus-visible { outline: 3px solid #d8c3a0; outline-offset: 3px; }
body.touch #help { width: min(440px, calc(100% - 32px)); }
body.touch .welcome-desktop { display: none; }
body.touch .welcome-mobile { display: grid; }
body.touch .welcome-card { padding: 26px 24px 20px; }
body.touch #help h2 { font-size: 32px; }
body.touch #helpSubtitle { margin-top: 9px; font-size: 17px; }
body.touch .welcome-guides { margin: 20px 0 24px; }
.welcome-mobile section { padding: 10px 0 18px; }
.welcome-mobile section + section { padding: 18px 0 0; border-top: 1px solid #ded7cd; }
.welcome-mobile svg { width: 96px; height: 85px; margin: 0 0 8px; }
.welcome-mobile .joystick-icon { width: 86px; }
#help .icon-fill { fill: #82694f; stroke: none; }
body.touch #help h3 { font-size: 21px; }
body.touch #help section p { font-size: 15px; }
body.touch #bHelpOk { font-size: 17px; min-height: 52px; }
body.touch .welcome-arrow { display: none; }
body.touch .welcome-footer { font-size: 12px; margin-top: 13px; }
@media (max-width: 720px) {
  body:not(.touch) .welcome-card { padding: 24px; }
  body:not(.touch) .welcome-desktop { grid-template-columns: 1fr; gap: 24px; }
  body:not(.touch) .welcome-desktop section { padding: 0; border-left: 0; }
  body:not(.touch) .mouse-icon { width: 100px; height: 80px; }
}
@media (max-height: 700px) {
  body.touch .welcome-card { padding: 20px; }
  body.touch #help h2 { font-size: 28px; }
  body.touch .welcome-guides { margin: 18px 0; }
  .welcome-mobile section { display: flex; align-items: center; gap: 16px; text-align: left; padding: 8px 0 16px; }
  .welcome-mobile section + section { padding: 16px 0 0; }
  .welcome-mobile svg { flex: 0 0 66px; width: 66px; height: 68px; margin: 0; }
  body.touch #help h3 { font-size: 19px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  body.touch #help { width: min(720px, calc(100% - 32px)); }
  body.touch .welcome-card { padding: 18px 24px; }
  body.touch .welcome-mobile { grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0; }
  .welcome-mobile section, .welcome-mobile section + section { padding: 0; border: 0; }
  body.touch #helpSubtitle { font-size: 14px; margin-top: 4px; }
  body.touch #help h3 { font-size: 17px; }
  body.touch #help section p { font-size: 14px; }
  body.touch .welcome-footer { margin-top: 9px; }
}