/* 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: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: 'exit counts' 'tools tools' !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)) .15rem .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 {
    grid-area: exit;
    align-self: start;
    justify-self: start;
    min-height: 40px !important;
    padding: .32rem .62rem !important;
    white-space: nowrap !important;
  }
  #srs-study-overlay .srs-queue-counts {
    grid-area: counts;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: .22rem .42rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  #srs-study-overlay .srs-queue-counts .srs-counter {
    min-width: 0 !important;
    max-width: min(44vw, 11rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #srs-study-overlay .srs-overlay-tools {
    grid-area: tools;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    scrollbar-width: none !important;
  }
  #srs-study-overlay .srs-overlay-tools::-webkit-scrollbar { display: none !important; }
  #srs-study-overlay .srs-overlay-tools > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: .3rem .28rem !important;
    font-size: .57rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !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; }
}

@media (max-width: 340px) {
  #srs-study-overlay .srs-overlay-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}