/* Hebrew interface direction is independent of game geometry and handedness. */
html[dir="rtl"] body {
  text-align: right;
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
}
html[dir="rtl"] .luckiest-guy {
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
}

/* The LTR menu's negative left margin overflows the RTL page on small screens. */
html[dir="rtl"] .row.menu-buttons {
  margin-inline: 0;
}

/* Bootstrap's button groups use physical LTR corners and border overlap.
   Keep the exposed ends round after the variations reverse in RTL, matching
   the 8px menu-button radius in style.css rather than Bootstrap's defaults. */
html[dir="rtl"] .btn-group.turn-btns > .btn {
  border-radius: 8px;
  margin-inline: 0 !important;
}
html[dir="rtl"] .btn-group.turn-btns > .btn:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px !important;
}
html[dir="rtl"]
  .btn-group.turn-btns
  > .btn:not(:last-child):not(.dropdown-toggle) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Classic menus stack their variations into separate buttons in landscape.
   SGG menus stay horizontal at this breakpoint. */
@media (max-width: 919px) and (max-height: 420px) {
  html[dir="rtl"]
    div:not(.sgg-container)
    > .timer_container
    .btn-group.turn-btns
    > .btn {
    border-radius: 6px;
    margin-inline: 0 !important;
  }
}
html[dir="rtl"] #info-box .report-bug {
  padding-left: 0;
  padding-inline-start: 10px;
}

/* The board keeps its LTR geometry and right-hand ad rail. Align the RTL
   toolbar with the board rather than underneath that rail's hit area.
   Use the rail's measured width, including any minimum imposed by its content. */
@media (min-width: 920px) {
  html[dir="rtl"] #timerContainer.rtl-game-toolbar {
    width: calc(100% - var(--game-sidebar-width));
    margin-left: 0;
    margin-right: auto;
  }
}

/* The landscape toolbar occupies the physical right. The parent's RTL flex
   alignment must not move the narrowed board into that reserved space. */
@media (max-width: 919px) and (max-height: 420px) {
  html[dir="rtl"] #gameRow {
    margin-left: 0;
    margin-right: auto;
  }
}

/* These surfaces contain coordinate-based cards or English puzzle grids. */
html[dir="rtl"]
  :is(
    #gameRow,
    .gameRow,
    #canvasContainer,
    #panel-play,
    #game-area,
    #gameSurface,
    .classic-game-main,
    #keyboard-container,
    #wordhunt-container,
    .wordhunt-row,
    .crossword-container,
    iframe,
    canvas
  ) {
  direction: ltr;
}

/* Restore text direction within otherwise unchanged game shells. */
html[dir="rtl"]
  :is(
    .modal,
    #menu-nav,
    #timerContainer,
    #timerContainerBottom,
    #wordgame-nav,
    .classic-game-side,
    .classic-inline-actions,
    .classic-status,
    #gameStatusMessage,
    .sidebar,
    .game-sidebar
  ) {
  direction: rtl;
}
html[dir="rtl"] :is(.dropdown-menu, .modal-content, .classic-game-side) {
  text-align: start;
}
html[dir="rtl"] .dropdown-menu:not([x-placement]) {
  left: auto;
  right: 0;
}
html[dir="rtl"] .dropdown-menu-right:not([x-placement]) {
  right: auto;
  left: 0;
}
html[dir="rtl"] .dropdown-toggle::after {
  margin-left: 0;
  margin-inline-start: 0.255em;
}
html[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}
html[dir="rtl"] .modal-footer > :not(:first-child) {
  margin-left: 0;
  margin-inline-start: 0.25rem;
}
html[dir="rtl"] .modal-footer > :not(:last-child) {
  margin-right: 0;
  margin-inline-end: 0.25rem;
}
html[dir="rtl"] .form-check {
  padding-left: 0;
  padding-inline-start: 1.25rem;
}
html[dir="rtl"] .form-check-input {
  margin-left: 0;
  margin-inline-start: -1.25rem;
}
html[dir="rtl"] :is(.modal, footer, .post, .classic-rules-list) {
  line-height: 1.6;
}
html[dir="rtl"] :is(.modal, .post) :is(ul, ol) {
  padding-left: 0;
  padding-inline-start: 2rem;
}
html[dir="rtl"] #site-header .navbar-nav {
  margin-left: 0 !important;
  margin-inline-start: auto !important;
}
html[dir="rtl"] #site-header .navbar-brand {
  margin-right: 0;
  margin-inline-end: 1rem;
}
html[dir="rtl"] .dropdown-item {
  white-space: normal;
}
html[dir="rtl"]
  :is(
    input[type="email"],
    input[type="url"],
    input[type="number"],
    .stopwatch,
    .info-metric-yellow,
    .coin-balance-amount,
    [data-bidi="ltr"]
  ) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Limit Bootstrap spacing corrections to interface chrome, never card surfaces. */
html[dir="rtl"] :is(#site-header, footer, .modal) .mr-1 {
  margin-right: 0 !important;
  margin-inline-end: 0.25rem !important;
}
html[dir="rtl"] :is(#site-header, footer, .modal) .mr-3 {
  margin-right: 0 !important;
  margin-inline-end: 1rem !important;
}
html[dir="rtl"] :is(#site-header, footer, .modal) .ml-4 {
  margin-left: 0 !important;
  margin-inline-start: 1.5rem !important;
}
html[dir="rtl"] :is(footer, .modal) .text-right {
  text-align: end !important;
}
html[dir="rtl"] :is(footer, .modal) .text-left {
  text-align: start !important;
}