.howto-dialog { width: min(360px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); box-sizing: border-box; padding: 20px; border: 1px solid #536774; border-radius: 24px; color: #eaf2f0; background: #16232b; overflow-y: auto; }
.howto-dialog::backdrop { background: rgba(0,0,0,.78); }
.howto-header { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.howto-header > p { font-size: .75rem; color: #b4c6c8; margin: 0; }
.howto-header .pill { padding: 7px 10px; font-size: .75rem; }
.howto-dialog h2 { font-size: 1.3rem; margin: 18px 0 8px; line-height: 1.3; }
#howto-description { font-size: .9rem; line-height: 1.5; margin: 0 0 12px; }
.howto-board { display: block; width: min(100%, 230px); max-height: 32dvh; margin: auto; pointer-events: none; }
.howto-comparison { display: flex; align-items: flex-start; gap: 10px; }
.howto-comparison figure { flex: 1; min-width: 0; margin: 0; }
.howto-comparison .howto-board { width: 100%; }
.howto-comparison figcaption { color: #bceaca; text-align: center; font-size: .8rem; line-height: 1.4; margin-top: 8px; }
.howto-step[hidden] { display: none; }
.howto-step p { text-align: center; color: #bceaca; font-size: .85rem; margin: 12px 0; }
.howto-note { color: #afc0c5; font-size: .7rem; text-align: center; }
.howto-actions { display: flex; gap: 10px; margin-top: 16px; }
.howto-actions button { flex: 1; white-space: normal; }
.howto-actions button:disabled { opacity: .35; }
/* The heading receives reading focus; interactive controls retain visible focus. */
#howto-title:focus { outline: none; }
.howto-dialog button:focus-visible { outline: 2px solid #f2d487; outline-offset: 3px; }
.isaan-guide { display: block; margin: 8px auto; padding: 10px 18px; border: 1px solid #b39a77; border-radius: 24px; color: #70402a; background: transparent; font: inherit; cursor: pointer; }
/* Four game actions remain reachable on narrow phones. */
.game-actions { flex-wrap: wrap; }
@media (max-width: 380px) {
  .game-actions .pill { flex: 1 1 calc(50% - 10px); min-width: 0; white-space: normal; }
}
#analytics-dialog p { font-size: .9rem; line-height: 1.5; }
#analytics-close { margin-top: 12px; }