/* RikiMaru Kioku — authoritative responsive study layout.
   Presentation-only: no application state, no persistence and no SRS writes. */

#srs-study-overlay .srs-flip-furi {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  line-height: 1.45;
  font-size: .62rem;
  color: var(--gold);
}

/* Inline ruby is the single visual authority whenever it exists.  Some legacy
   card CSS positioned rt absolutely and could detach the base kanji/reading;
   reset the complete ruby formatting context here, not only the font size. */
#srs-study-overlay .srs-flip-jp ruby {
  display: ruby !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  ruby-position: over !important;
  ruby-align: center !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}
#srs-study-overlay .srs-flip-jp ruby > rt {
  display: ruby-text !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: .48em !important;
  line-height: 1 !important;
}
/* CSS-level race guard: even if an older renderer toggles the historical full
   kana field after our JS observer, it cannot coexist with canonical ruby. */
#srs-study-overlay:has(#srs-front-jp ruby > rt) #srs-front-furi,
#srs-study-overlay:has(#srs-back-jp ruby > rt) #srs-back-furi {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 820px), (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  #srs-study-overlay {
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    padding: max(.5rem, env(safe-area-inset-top)) clamp(.65rem, 3vw, 1.5rem) max(1rem, env(safe-area-inset-bottom)) !important;
  }
  #srs-study-overlay .srs-overlay-header {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: .4rem .5rem !important;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: max(.45rem, env(safe-area-inset-top)) .5rem .45rem !important;
    box-sizing: border-box !important;
    background: var(--ink) !important;
    z-index: 2 !important;
    overflow: visible !important;
  }
  #srs-study-overlay .srs-overlay-header > .srs-overlay-close:first-child,
  #srs-study-overlay .srs-header-exit-btn {
    align-self: center;
    justify-self: start;
    min-height: 34px !important;
    height: 34px !important;
    padding: .25rem .62rem !important;
    white-space: nowrap !important;
    font-size: .72rem !important;
  }
  #srs-study-overlay .srs-queue-counts {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .25rem .45rem !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    overflow: hidden !important;
  }
  #srs-study-overlay .srs-queue-counts .srs-counter {
    min-width: 0 !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #srs-study-overlay .srs-overlay-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: .3rem !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #riki-kioku-modebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto .35rem !important;
    padding: .35rem .25rem !important;
    box-sizing: border-box !important;
    gap: .3rem !important;
  }
  #riki-kioku-modebar .rkm-label { display: none !important; }
  #riki-kioku-modebar button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: .42rem .3rem !important;
    font-size: .62rem !important;
    white-space: nowrap !important;
  }
  #srs-study-overlay .srs-progress-bar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: .05rem auto .22rem !important;
  }
  #srs-study-overlay .srs-flip-wrap {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: clamp(.75rem, 2.4vh, 1.5rem) auto .65rem !important;
  }
  #srs-study-overlay .srs-flip-face {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #srs-study-overlay .srs-flip-jp,
  #srs-study-overlay .srs-flip-back-text,
  #srs-study-overlay .srs-flip-notes {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  #srs-study-overlay #srs-flip-hint { margin-top: .35rem !important; }
  #srs-study-overlay #riki-kioku-show-answer { margin-top: .65rem !important; }
}