@font-face {
  font-family: klee;
  src: url("_KleeOne-SemiBold.ttf");
}

@font-face {
  font-family: notosansjp;
  src: url("_NotoSansJP.ttf");
}

@font-face {
  font-family: notoserifjp;
  src: url("_NotoSerifJP.ttf");
}

/* Custom Variables for Styling */
:root {
  /* ===== BASE SETTINGS ===== */
  /* Global */
  font-size: clamp(19px, 3vw, 24px); /* Scales with viewport, min 19px, max 24px */
  --base-size: clamp(19px, 3vw, 24px);
  --base-line-height: 1.5;
  --base-padding: 20px;
  --base-transition: 0.3s ease;
  --fast-transition: 0.2s ease;
  
  /* Fonts */
  --sans: hiragino kaku gothic proN, notosansjp, Noto Sans JP;
  --serif: klee, Klee One SemiBold, notoserifjp, Noto Serif JP;
  
  /* ===== COLORS ===== */
  /* Theme Colors */
  --light-bg: white;
  --light-text: black;
  --dark-bg: black;
  --dark-text: white;
  
  /* Pitch Accent Options */
  --pitch-style: default;            /* "alt" to change */
  --sentence-pitch-highlight: false; /* "true" to enable */
  --pitch-colors: true;              /* "false" to disable */

  /* Pitch Accent Colors */
  --pitch-red: #F5436D;
  --pitch-blue: #39C1FF;
  --pitch-orange: #fca311;
  --pitch-green: #40D4A6;
  --pitch-purple: #afa2ff;

  /* Devoiced Mora Color */
  --light-devoiced-color: RoyalBlue;
  --dark-devoiced-color: cornflowerBlue;

  /* Highlight Colors */
  --dark-highlight: #FCFF61;
  --light-highlight: #E20033;
  
  /* ===== BACKGROUND COLORS ===== */
  --card-bg: rgba(0,0,0,0.4);
  --buttons-bg: rgba(0,0,0,0.1);
  --buttons-bg-hover: rgba(0, 0, 0, 0.63);
  --lightbox-bg: rgba(0, 0, 0, 0.8);
  --frequency-bg-light: rgba(0, 0, 0, 0.8);
  --frequency-bg-dark: rgba(0, 0, 0, 0.63);
  
  /* ===== TEXT COLORS ===== */
  --text-color-light: rgba(105, 105, 105, 0.3);
  --text-color-dark: rgba(255, 255, 255, 0.2);
  --text-color-muted: rgba(105, 105, 105, 0.3);
  --text-color-muted-dark: rgba(255, 255, 255, 0.5);
  
  /* ===== LAYOUT & SPACING ===== */
  /* Default States */
  --audio-sentence-default-expanded: false; /* "true" to show sentence on audio cards immediately */
  --notes-default-expanded:          false; /* "true" to show notes immediately */
  --collect-glossary-images:         true;  /* "false" to disable image collection */

  /* Spacing Scale */
  --spacing-xs: 2px;
  --spacing-sm: 3px;
  --spacing-ms: 8px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxml: 27px;
  --spacing-xxxl: 34px;
  
  /* Layout Components */
  --card-max-width: 800px;
  --front-top-offset: 104px;
  --back-top-offset: 26px;
  --grid-gap: var(--spacing-xl);
  --grid-column-min-width: 390px;

  --grid-order: "word picture"; /* Options: "word picture" | "picture word" (flips layout) */
     --grid-columns: minmax(var(--grid-column-min-width), 1fr) auto;

  /* Substitue the above for "picture word" layout: */
  /* --grid-columns: auto minmax(var(--grid-column-min-width), 1fr); */
  
  /* Component Sizes */
  --button-size: 20px;
  --toggle-width-large: 60px;
  --toggle-width-medium: 20px;
  --picture-height: 220px;
  --lightbox-nav-width: 100px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-ms: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 12px;
  
  /* ===== TYPOGRAPHY ===== */
  /* Word Sizes */
  --word-size-base: 2.5rem;
  --word-size-4: 2.1rem; /* For 4-character words */
  --word-size-5: 2.0rem; /* For 5-character words */
  --word-size-6: 1.9rem; /* For 6-character words */
  --word-size-7: 1.8rem; /* For 7-character words */
  --word-size-8: 1.6rem; /* For 8-character words */
  --word-size-9: 1.5rem; /* For 9-character+ words */

  /* Sentence Sizes */
  --sentence-size: 1.3rem;
  --sentence-eng-size: 0.8rem;
  
  /* Definition Size */
  --definition-size: 0.8rem;
  
  /* Frequency Sizes */
  --frequency-size: 20px;
  --frequency-content-size: 14px;
  --frequency-max-height: 500px;

  /* Furigana Display */
  --furigana-display: initial;          /* "none" to hide */

  /* Dictionary Title */
  --definition-title-visibility: block; /* "none" to hide */
  --glossary-title-visibility:   block; /* "none" to hide */
  --dict-size: 0.5rem;
  --dict-display: inline-block;
  --light-dict-color: rgba(0, 0, 0, 0.4);
  --dict-color: rgba(255, 255, 255, 0.4);

  /* ===== HEADER ===== */
  --custom-dark-mode-visibility: flex;    /* "none"   to hide */
  --audio-visibility:            visible; /* "hidden" to hide */
  --freq-visibility:             visible; /* "hidden" to hide */

  /* ===== FOOTER ===== */
  /* Tags */
  --tag-visibility: flex; /* "none" to hide */
  --tag-font-size: 0.7rem;
  --tag-padding: 5px 10px;
  --tag-margin-top: 5px;
  --tag-margin-bottom: 0;
  --tag-border-radius: 5px;
  --tag-bg: var(--card-bg);
  --tag-color: white;
  --tags-container-gap: 0 5px;

  /* External Links */
  --external-links-visibility: flex; /* "none" to hide */
  --external-links-padding: 5px 10px;
  --external-links-margin-top: 5px;
  --external-links-margin-bottom: 0;
  --external-links-icon-size: 25px;

  /* Misc Info Size */
  --misc-info-size: 15px;
  
  /* ===== SHADOWS & Z-INDEX ===== */
  /* Shadows */
  --button-shadow: 0 0 5px 2.5px rgba(0, 0, 0, 0.1);
  --button-shadow-dark: 0 0 5px 2.5px rgba(255, 255, 255, 0.1);
  --lightbox-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  
  /* Z-index Layers */
  --z-index-base: 1;
  --z-index-toggle: 2;
  --z-index-lightbox: 1000;
  }

  /* ===== RESPONSIVE DESIGN ===== */
  /* Large Screens */
  @media (max-width: 1050px) {
  :root {
    /* Grid Columns */
    --grid-columns-large: repeat(2, 1fr); /* Two columns */

    /* Remove the comment markers around the block below to flip the layout (picture left, word right) */

    /*
    --grid-order: 
      "picture word";
    */

    }
  }

  /* Medium Screens */
  @media (max-width: 768px) {
  :root {
    /* Grid Columns */
    --grid-columns-medium: repeat(2, 1fr); /* Two columns */

    /* Remove the comment markers around the block below to flip the layout (picture left, word right) */

    /*
    --grid-order: 
      "picture word";
    */

    }
  }

  /* Small Screens */
  @media (max-width: 624px) {
  :root {
    /* Grid Columns */
    --grid-columns-small: repeat(1, 1fr); /* One column */

    /* Remove --grid-order entirely to enable a two-column layout */
    --grid-order: 
      "word"
      "picture";

    /* To flip the layout (picture above word), use this instead: */
    /*
    --grid-order: 
      "picture"
      "word";
    */

    /* Picture Height */
    --picture-height-small: 330px;    /* Max picture height */
    --picture-max-height-small: 100%; /* Max picture img height */
  }
}

/* Card Layout */
.front, .back {
  position: relative;
  padding: var(--base-padding);
  max-width: var(--card-max-width);
  margin: 0 auto;
}

.front { top: var(--front-top-offset); }
.back { top: var(--back-top-offset); }

.front::before, .back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius-lg);
  z-index: -1;
}

.front::before, .back::before {
  background: rgba(0,0,0,0.04);
}

.card.nightMode .front::before, 
.card.nightMode .back::before {
  background: var(--card-bg);
}

/* ===== FRONT ===== */
/* Word - Sentence */
.desktop-word-layout {
    display: block;
}
.mobile-word-layout {
    display: none;
}

.front #word {
  -webkit-tap-highlight-color: transparent;
}

.desktop-word-layout > #word {
  line-height: 0;
  margin-top: 2px;
  margin-bottom: 12px;
  padding-top: 40px;
  padding-bottom: 40px;
}

#word-wrapper,
#sentence-wrapper, 
#sentence-wrapper-audio {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  transition: max-height 0.3s ease,
              opacity 0.3s ease,
              margin 0.3s ease,
              padding 0.3s ease;
  box-sizing: content-box;
}

#word-wrapper.expanded,
#sentence-wrapper.expanded, 
#sentence-wrapper-audio.expanded {
  opacity: 1;
  pointer-events: auto;
  margin: revert;
  padding: revert;
}

.toggle-trigger {
  cursor: pointer;
}

/* Audio */
.front:has(#wordAudio) .highlight,
.front:has(#sentenceAudio) b {
  filter: blur(20px);
  cursor: pointer;
}

.front:has(#wordAudio) > #sentence-wrapper-audio,
.front:has(#sentenceAudio) > #sentence-wrapper-audio {
  width: 100%;
  text-align: center; 
  line-height: 1.2;
}

.front:has(#wordAudio) > #sentence-wrapper-audio.expanded,
.front:has(#sentenceAudio) > #sentence-wrapper-audio.expanded {
  opacity: 1;
  pointer-events: auto;
  margin: revert;
  padding: revert;
  margin-top: 20px;
}

.front:has(#wordAudio), 
.front:has(#sentenceAudio) {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#wordAudio {
  margin-right: 10px;
}

#wordAudio, #sentenceAudio, .playImage path {
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-ms);
  padding: var(--spacing-ms) var(--spacing-lg);
  cursor: pointer;
  transition: box-shadow var(--fast-transition), 
              background var(--fast-transition), 
              fill var(--fast-transition);
}

#wordAudio, #sentenceAudio {
  background: rgba(0,0,0,0.04);
}

.custom-dark-mode #wordAudio, 
.card.nightMode #wordAudio, 
.custom-dark-mode #sentenceAudio, 
.card.nightMode #sentenceAudio {
  background: rgba(0,0,0,0.4);
}

#wordAudio:hover, 
#sentenceAudio:hover, 
#wordAudio:hover .playImage path, 
#sentenceAudio:hover .playImage path {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  fill: var(--dark-text) !important;
}

.card.nightMode #wordAudio:hover, 
.card.nightMode #sentenceAudio:hover, 
.card.nightMode #wordAudio:hover .playImage path, 
.card.nightMode #sentenceAudio:hover .playImage path {
  background: var(--buttons-bg-hover);
}

.custom-dark-mode #wordAudio:hover,
.custom-dark-mode #sentenceAudio:hover,
.custom-dark-mode #wordAudio:hover .playImage path,
.custom-dark-mode #sentenceAudio:hover .playImage path {
  box-shadow: var(--button-shadow-dark);
  background: var(--light-bg) !important;
  fill: var(--light-text) !important;
}

#wordAudio circle, #sentenceAudio circle {
  display: none;
}

.front .playImage path {
  fill: rgba(105, 105, 105, 0.6) !important;
}

/* ===== BACK ===== */
/* Platform Specific */
.win, .mac, .linux, .mobile {
  text-align: center;
  display: block;
  width: 100%;
  margin: auto;
}

/* Card Base */
.card {
  display: unset;
  font-family: var(--sans);
  text-align: center;
  position: relative;
  margin: 0;
}

.card-a rt li {
  display: inline;
  font-weight: normal;
}

.card-b {
  font-size: var(--definition-size);
}

/* Hyperlinks */
a {
  color: currentColor;
  text-decoration: none;
}

/* Highlight Text */
b {
  color: var(--light-highlight);
  font-weight: normal;
}

.custom-dark-mode b, 
.card.nightMode b {
  color: var(--dark-highlight);
}

.highlight {
  color: var(--light-highlight);
}

.custom-dark-mode .highlight, 
.card.nightMode .highlight {
  color: var(--dark-highlight);
}

/* List Style */
ul, ol {
  list-style: none;
  padding-left: 0;
  display: inline;
}

.card-b li {
  list-style: none !important;
}

/* Custom Dark Mode */
.custom-dark-mode body {
  background: var(--dark-bg);
  color: var(--dark-text);
}

/* Audio Hint Toggle */
.audio-hint {
  position: fixed;
  top: 74px;
  left: var(--spacing-xxxl);
  padding: var(--spacing-ms) 17.5px;
  color: var(--text-color-muted);
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius-ms);
  user-select: none;
  font-size: var(--button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-index-base);
  background: var(--buttons-bg); 
  transition: box-shadow var(--fast-transition), 
              background var(--fast-transition), 
              color var(--fast-transition);
}

.audio-hint:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}

.audio-hint {
  background: rgba(0,0,0,0.04);
}

.custom-dark-mode .audio-hint, 
.card.nightMode .audio-hint {
  background: var(--buttons-bg); 
}

.card.nightMode .audio-hint:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}

.custom-dark-mode .audio-hint:hover {
  box-shadow: var(--button-shadow-dark);
  background: var(--light-bg);
  color: var(--light-text);
}

/* Dark Mode Toggle */
.toggle-custom-dark-mode {
  position: fixed;
  top: var(--spacing-xxl);
  left: var(--spacing-xxxl);
  padding: var(--spacing-ms) var(--spacing-lg);
  color: var(--text-color-muted);
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius-ms);
  user-select: none;
  font-size: var(--button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-index-base);
  transition: box-shadow var(--fast-transition), 
              background var(--fast-transition), 
              color var(--fast-transition);
}

.toggle-custom-dark-mode:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}


.toggle-custom-dark-mode {
  background: rgba(0,0,0,0.04);
}

.custom-dark-mode .toggle-custom-dark-mode, 
.card.nightMode .toggle-custom-dark-mode {
  background: var(--buttons-bg); 
}

.card.nightMode .toggle-custom-dark-mode:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}

.custom-dark-mode .toggle-custom-dark-mode.dark-mode:hover {
  box-shadow: var(--button-shadow-dark);
  background: var(--light-bg);
  color: var(--light-text);
}

/* Word + Grid Settings */
#word li:not(:first-child) {
  display: none;
}

#word {
  position: relative;
  font-family: var(--serif);
  font-size: var(--word-size-base);
  text-align: center;
}

#word.length-4 { font-size: var(--word-size-4); }
#word.length-5 { font-size: var(--word-size-5); }
#word.length-6 { font-size: var(--word-size-6); }
#word.length-7 { font-size: var(--word-size-7); }
#word.length-8 { font-size: var(--word-size-8); }
#word.length-9 { font-size: var(--word-size-9); }

#word ruby {
  line-height: 1.4;
}

#word rt {
  line-height: 1.5;
}

#word ruby rt {
  font-family: var(--sans);
  font-size: 1rem;
}

.grid-container {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
  grid-template-columns: var(--grid-columns);
  grid-template-areas: var(--grid-order);
}

.grid-container:not(:has(> .picture-container > img)) {
  grid-template-columns: repeat(1, 1fr);
  gap: unset;
}

.background-box {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-ms);
  border-radius: var(--border-radius-ms);
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  min-width: min-content;
}

.background-box {
  background: rgba(0,0,0,0.04);
  grid-area: word;
}

.card.nightMode .background-box {
  background: var(--card-bg);
}

/* Picture Container */
img {
  max-width: 100%;
  height: auto;
  user-select: none;
}

.lightbox img {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  box-shadow: var(--lightbox-shadow);
  transition: transform var(--base-transition);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: var(--lightbox-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-index-lightbox);
  touch-action: none;
  transition: opacity var(--base-transition), 
              visibility var(--base-transition);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.picture-container {
  grid-area: picture;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card-bg);
  border-radius: var(--border-radius-ms);
  overflow: hidden;
}

.picture-container img {
  display: none;
  max-width: 100%;
  max-height: var(--picture-height);
  min-height: var(--picture-height);
  object-fit: cover;
  cursor: pointer;
  user-select: none;
}

.picture-container img:first-of-type {
  display: block;
}

/* Navigation Arrows */
.nav-arrow {
  position: absolute;
  width: 50px;
  height: 100%;
  border-radius: var(--border-radius-ms);
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--base-transition);
}

.nav-arrow.hidden {
  display: none;
}

.nav-arrow:hover {
  opacity: 1;
}

.nav-arrow.left {
  left: 0; 
  -webkit-mask-image: linear-gradient(to right, 
                      rgba(0,0,0,1), rgba(0,0,0,0));
}

.nav-arrow.right {
  right: 0; 
  -webkit-mask-image: linear-gradient(to left, 
                      rgba(0,0,0,1), rgba(0,0,0,0));
}

/* Lightbox Navigation */
.lightbox .lightbox-nav {
  position: absolute;
  width: var(--lightbox-nav-width);
  height: 100%;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--base-transition);
}

.lightbox-nav.hidden {
  display: none;
}

.lightbox .lightbox-nav:hover {
  opacity: 1;
}

.lightbox .lightbox-nav.left {
  left: 0; 
  -webkit-mask-image: linear-gradient(to right, 
                      rgba(255,255,255,1), rgba(0,0,0,0));
}

.lightbox .lightbox-nav.right {
  right: 0; 
  -webkit-mask-image: linear-gradient(to left, 
                      rgba(255,255,255,1), rgba(0,0,0,0));
}

/* Lightbox Grid Toggle */
.lightbox-grid-toggle {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(0,0,0,0.2);
  color: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  z-index: 1001;
  transition: background var(--base-transition), 
              color var(--base-transition);
}

.lightbox-grid-toggle:hover {
  color: var(--dark-text);
  background: rgba(0,0,0,0.7);
  border: none;
}

/* Lightbox Grid View */
.lightbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 20px;
  width: 90%;
  height: 80%;
  margin: 0 auto;
  place-items: center;
  overflow: hidden;
}

.lightbox-grid img {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.lightbox-grid img:hover {
  transform: scale(1.05);
}

/* NSFW Content */
[class*=" nsfw" i] {
  overflow: hidden;
  border-radius: var(--border-radius-md); 
}

[class*=" nsfw" i] img {
  filter: blur(20px);
  transition: filter var(--base-transition);
}

[class*=" nsfw" i] img.clicked {
  filter: blur(0);
}

/* Sentence */
.sentence-container {
  margin: var(--spacing-xl) 0;
  text-align: center; 
  direction: rtl; 
  unicode-bidi: bidi-override; 
  margin-left: 5px;
  margin-right: 5px;
}

#sentence, 
#sentence-audio {
  font-size: var(--sentence-size);
  display: inline-block; 
  direction: ltr;
  unicode-bidi: normal; 
  text-align: left;
}

.sentence-container:has(#sentence rb) {
  margin-top: 8px;
}

#sentence rb {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

#sentence rt {
  transform: translateY(0.23em);
  opacity: 0;
  transition: opacity var(--fast-transition);
}

#sentence ruby:hover rt {
  opacity: 1;
}

#sentenceEng {
  font-size: var(--sentence-eng-size);
  max-height: 0;
  overflow: hidden;
  will-change: max-height;
  display: flex;
  justify-content: center;
  direction: ltr;
  unicode-bidi: normal;
  visibility: visible;
  text-align: left;
  transition: max-height var(--base-transition);
}

#sentenceEng:has(> b) {
  text-align: center;
  display: block;
}

#formattedSentence.is-clickable {
  cursor: pointer;
}

/* Notes */
.notes {
  position: relative;
  padding: var(--spacing-lg); 
  border-radius: var(--border-radius-ms);
  background: rgba(0,0,0,0.04);
  margin-bottom: 5px;
  max-height: 0;
  overflow: hidden;
  font-size: var(--definition-size);
  display: flex;
  justify-content: center;
  direction: ltr;
  unicode-bidi: normal;
  text-align: left;
  transition: all var(--base-transition);
}

.notes.is-collapsed {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  opacity: 0;
}

.card.nightMode .notes {
  background: var(--card-bg);
}

/* Definition + Glossary */
#selectionText {
  text-align: left;
}

#selectionText.show {
  display: block;
}

#selectionText {
  display: none;
}

#glossary {
  display: grid;
  place-items: left;
  text-align: center;
  line-height: var(--base-line-height);
}

#definition, #glossary {
  position: relative;
  display: none;
}

#definition.show, #glossary.show {
  display: block;
}

.glossary-box, .definition-box {
  position: relative;
  padding: var(--spacing-lg); 
  border-radius: var(--border-radius-ms);
  will-change: transform;
}

.glossary-box, .definition-box {
  background: rgba(0,0,0,0.04);
}

.card.nightMode .glossary-box, 
.card.nightMode .definition-box {
  background: var(--card-bg);
}

/* Toggle Areas */
.toggle-area {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--toggle-width-medium);
  z-index: var(--z-index-toggle);
  opacity: 1;
  border-radius: var(--border-radius-ms);
  cursor: pointer;
  transition: background var(--base-transition);
}

.toggle-area:hover {
  background: rgba(0, 0, 0, 0.8);
}

.custom-dark-mode .toggle-area:hover, 
.card.nightMode .toggle-area:hover {
  background: rgba(255, 255, 255, 0.8);
  transition: background var(--base-transition);
}

.toggle-area.left { left: -20px; }
.toggle-area.right { right: -20px; }

/* Toggle Areas Larger */
.toggle-area.left-larger,
.toggle-area.right-larger {
  opacity: 0.1;
  width: var(--toggle-width-large);
  transition: opacity var(--base-transition);
}

.toggle-area.left-larger {
  left: -20px;
  -webkit-mask-image: linear-gradient(to right, 
                      rgba(0,0,0,1), rgba(0,0,0,0));
  transition: background var(--base-transition);
}

.toggle-area.right-larger {
  right: -20px;
  -webkit-mask-image: linear-gradient(to left, 
                      rgba(0,0,0,1), rgba(0,0,0,0));
  transition: background var(--base-transition);
}

.toggle-area.left-larger:hover ~ .toggle-area.left:not(.left-larger):not(.right-larger),
.toggle-area.right-larger:hover ~ .toggle-area.right:not(.left-larger):not(.right-larger) {
  background: rgba(0, 0, 0, 0.8);
  transition: background var(--base-transition);
}

.custom-dark-mode .toggle-area.left-larger:hover ~ .toggle-area.left:not(.left-larger):not(.right-larger),
.custom-dark-mode .toggle-area.right-larger:hover ~ .toggle-area.right:not(.left-larger):not(.right-larger), 
.card.nightMode .toggle-area.left-larger:hover ~ .toggle-area.left:not(.left-larger):not(.right-larger),
.card.nightMode .toggle-area.right-larger:hover ~ .toggle-area.right:not(.left-larger):not(.right-larger) {
  background: rgba(255, 255, 255, 0.8);
  transition: background var(--base-transition);
}


/* Audio */
.audio, .sentenceaudio, .playImage path {
  position: fixed;
  width: var(--button-size);
  height: var(--button-size);
  top: 74px;
  left: var(--spacing-xxxl);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-ms);
  padding: var(--spacing-ms) var(--spacing-lg);
  cursor: pointer;
  transition: box-shadow var(--fast-transition), 
              background var(--fast-transition), 
              fill var(--fast-transition);
}

.audio, .sentenceaudio {
  background: rgba(0,0,0,0.04);
}

.custom-dark-mode .audio, 
.card.nightMode .audio, 
.custom-dark-mode .sentenceaudio, 
.card.nightMode .sentenceaudio {
  background: var(--buttons-bg);
}

.sentenceaudio {
  top: 124px;
}

.back:not(:has(.audio)) .sentenceaudio {
  top: 74px;
}

.audio:hover, 
.sentenceaudio:hover, 
.audio:hover .playImage path, 
.sentenceaudio:hover .playImage path {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  fill: var(--dark-text) !important;
}

.card.nightMode .audio:hover, 
.card.nightMode .sentenceaudio:hover, 
.card.nightMode .audio:hover .playImage path, 
.card.nightMode .sentenceaudio:hover .playImage path {
  background: var(--buttons-bg-hover);
}

.custom-dark-mode .audio:hover,
.custom-dark-mode .sentenceaudio:hover,
.custom-dark-mode .audio:hover .playImage path,
.custom-dark-mode .sentenceaudio:hover .playImage path {
  box-shadow: var(--button-shadow-dark);
  background: var(--light-bg) !important;
  fill: var(--light-text) !important;
}

.audio circle, .sentenceaudio circle {
  display: none;
}

.playImage path {
  fill: var(--text-color-muted) !important;
}

.replay-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

.replay-button svg {
  width: 29px;
  height: 29px;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

#wordAudio,
#sentenceAudio,
.audio,
.sentenceaudio,
.playImage,
.soundLink,
.replaybutton,
.soundplaying,
.playing {
  outline: 2px solid transparent !important;
  outline-offset: -2px;
}

/* Notes Toggle */
.toggle-notes {
  position: fixed;
  top: 174px;
  left: var(--spacing-xxxl);
  cursor: pointer;
  border: none;
  border-radius: var(--border-radius-ms);
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-index-base);
  transition: box-shadow var(--fast-transition),
              background var(--fast-transition),
              filter var(--fast-transition),
              opacity var(--fast-transition);
}

.toggle-notes .toggle-notes-svg {
  height: var(--button-size);
  padding: var(--spacing-ms) 16px;
  filter: invert(42%) sepia(0%) saturate(0%) hue-rotate(40deg) brightness(96%) contrast(93%);
  opacity: 0.3;
  transition: filter var(--fast-transition),
              opacity var(--fast-transition);
}

.toggle-notes:hover .toggle-notes-svg:hover {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.toggle-notes:hover .toggle-notes {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.custom-dark-mode .toggle-notes:hover .toggle-notes {
  filter: brightness(0%);
  opacity: 1;
}

.toggle-notes:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}

.toggle-notes {
  background: rgba(0,0,0,0.04);
}

.custom-dark-mode .toggle-notes, 
.card.nightMode .toggle-notes {
  background: var(--buttons-bg); 
}

.card.nightMode .toggle-notes:hover {
  box-shadow: var(--button-shadow);
  background: var(--buttons-bg-hover);
  color: var(--dark-text);
}

.custom-dark-mode .toggle-notes:hover {
  box-shadow: var(--button-shadow-dark);
  background: var(--light-bg);
  color: var(--light-text);
}

/* Pitch Accent Colors */
.pitch .heiban span[style*="border-color:currentColor"],
.pitch-number.heiban,
#word.alt .heiban,
#formattedSentence.alt-highlight.heiban .highlight,
#formattedSentence.alt-highlight.heiban b { 
  color: var(--pitch-blue); 
}

.pitch .atamadaka span[style*="border-color:currentColor"],
.pitch-number.atamadaka,
#word.alt .atamadaka,
#formattedSentence.alt-highlight.atamadaka .highlight,
#formattedSentence.alt-highlight.atamadaka b {
  color: var(--pitch-red); 
}

.pitch .nakadaka span[style*="border-color:currentColor"],
.pitch-number.nakadaka,
#word.alt .nakadaka,
#formattedSentence.alt-highlight.nakadaka .highlight,
#formattedSentence.alt-highlight.nakadaka b { 
  color: var(--pitch-orange); 
}

.pitch .odaka span[style*="border-color:currentColor"],
.pitch-number.odaka,
#word.alt .odaka,
#formattedSentence.alt-highlight.odaka .highlight, 
#formattedSentence.alt-highlight.odaka b { 
  color: var(--pitch-green); 
}

.pitch .kifuku span[style*="border-color:currentColor"],
.pitch-number.kifuku,
#word.alt .kifuku,
#formattedSentence.alt-highlight.kifuku .highlight,
#formattedSentence.alt-highlight.kifuku b { 
  color: var(--pitch-purple); 
}

#word.alt > :is(.heiban, .atamadaka, .nakadaka, .odaka, .kifuku) .pronunciation {
  --pronunciation-annotation-color: var(--active-pitch-color);
  color: var(--active-pitch-color);
}

/* Pitch Accent Colors (Disabled) */
.pitch.colors :is(.heiban, .atamadaka, .nakadaka, .odaka, .kifuku) span[style*="border-color:currentColor"],
.colors .pitch-number:is(.heiban, .atamadaka, .nakadaka, .odaka, .kifuku) {
  color: var(--light-highlight);
}

:is(.card.nightMode, .custom-dark-mode)
  .pitch.colors
  :is(.heiban, .atamadaka, .nakadaka, .odaka, .kifuku)
  span[style*="border-color:currentColor"],

:is(.card.nightMode, .custom-dark-mode)
  .colors
  .pitch-number:is(.heiban, .atamadaka, .nakadaka, .odaka, .kifuku) {
  color: var(--dark-highlight);
}

.colors :is(
  .pronunciation.heiban,
  .pronunciation.atamadaka,
  .pronunciation.nakadaka,
  .pronunciation.odaka,
  .pronunciation.kifuku
) {
  --pronunciation-annotation-color: var(--light-highlight);
}

:is(.card.nightMode, .custom-dark-mode) .colors :is(
  .pronunciation.heiban,
  .pronunciation.atamadaka,
  .pronunciation.nakadaka,
  .pronunciation.odaka,
  .pronunciation.kifuku
) {
  --pronunciation-annotation-color: var(--dark-highlight);
}

/* ===== Pitch Accent Fallback ===== */
.pronunciation-mora {
  position: relative;
  display: inline-block;
}

.pronunciation-mora[data-pitch="high"][data-pitch-next="low"] {
  position: relative;
  display: inline-block;
  padding-right: 0.1em;
  margin-right: 0.1em;
}

.pronunciation-mora-line {
  display: block;
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.1em;
  border-top-width: 0.1em;
  border-top-style: solid;
  border-color: transparent; /* Hidden by default */
}

.pronunciation-mora[data-pitch=high] > .pronunciation-mora-line {
  border-top-color: var(--pronunciation-annotation-color);
}

.pronunciation-mora[data-pitch=high] + .pronunciation-mora[data-pitch=high] > .pronunciation-mora-line {
  left: -0.15em;
}

.pronunciation-mora[data-pitch=high]:has(+ .pronunciation-mora[data-pitch=high]) > .pronunciation-mora-line {
  right: -0.15em;
}

.pronunciation-mora[data-pitch=high][data-pitch-next=low] > .pronunciation-mora-line {
  right: -0.1em;
  height: 0.4em;
  border-right: 0.1em solid transparent;
  border-right-color: var(--pronunciation-annotation-color);
  border-top-color: var(--pronunciation-annotation-color);
}

.pronunciation.heiban { --pronunciation-annotation-color: var(--pitch-blue); }
.pronunciation.atamadaka { --pronunciation-annotation-color: var(--pitch-red); }
.pronunciation.nakadaka { --pronunciation-annotation-color: var(--pitch-orange); }
.pronunciation.odaka { --pronunciation-annotation-color: var(--pitch-green); }
.pronunciation.kifuku { --pronunciation-annotation-color: var(--pitch-purple); }

/* Nasal Mora */
span[style*="border:1.5px solid #c83c28"] {
  border: 0.1em solid #FF4936 !important;
  margin: 2px 0px;
  width: 0.30rem !important;
  height: 0.30rem !important;
}

/* Devoiced Mora */
span[style*="border:1.5px dotted #c83c28"] {
  display: none !important;
}

span[style*="display:inline-block;position:relative;"] > 
span[style*="display:inline"]:has(+ span[style*="border:1.5px dotted #c83c28"]) {
  color: var(--light-devoiced-color) !important;
}

.card.nightMode span[style*="display:inline-block;position:relative;"] > 
span[style*="display:inline"]:has(+ span[style*="border:1.5px dotted #c83c28"]),
.custom-dark-mode span[style*="display:inline-block;position:relative;"] > 
span[style*="display:inline"]:has(+ span[style*="border:1.5px dotted #c83c28"]) {
  color: var(--dark-devoiced-color) !important;
}

/* Pitch Position */
#position {
  font-family: var(--sans);
  font-weight: bold;
  color: var(--dark-text);
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--spacing-ms);
  font-size: 0.5rem;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  z-index: var(--z-index-base);
  text-align: center;
  line-height: 16px;
  background: rgba(0,0,0,0.8);
  white-space: nowrap;
}

.card.nightMode #position {
  background: rgba(0,0,0,0.2);
}

#position:empty {
  display: none;
}

/* Pitch Categories */
#categories {
  font-family: var(--sans);
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--spacing-ms);
  font-size: 0.5rem;
  padding: 5px 5px 5px 5px;
  border-radius: var(--border-radius-sm);
  color: var(--text-color-muted);
  z-index: var(--z-index-base);
  text-align: center;
  line-height: 16px;
  opacity: 0; 
  visibility: hidden;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--base-transition), 
              transform var(--base-transition), 
              visibility var(--base-transition), 
              background var(--base-transition), 
              color var(--base-transition);
}

#position:hover + #categories,
#categories:hover {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1);
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}

.custom-dark-mode #position:hover + #categories,
.card.nightMode #position:hover + #categories,
.custom-dark-mode #categories:hover,
.card.nightMode #categories:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  opacity: 1 !important;
  visibility: visible !important;
  transform: scaleX(1);
}

#categories:empty {
  display: none;
}

/* Dictionary Counter */
.dictionary-counter {
  position: absolute;
  display: var(--dict-display);
  top: 0;
  right: 0;
  font-size: var(--dict-size);
  color: var(--light-dict-color);
  line-height: 1;
  padding: 15px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity var(--fast-transition);
}

.card.nightMode .dictionary-counter,
.custom-dark-mode .dictionary-counter {
  color: var(--dict-color);
}

.back.dict-toggled-once #selectionText.show .dictionary-counter,
.back.dict-toggled-once #definition.show .dictionary-counter,
.back.dict-toggled-once #glossary.show .dictionary-counter {
    opacity: 1;
}

/* Dictionary Title */
.dictionary-title,
.yomitan-glossary i {
  line-height: 1;
  font-size: var(--dict-size);
  display: var(--dict-display);
  color: var(--light-dict-color);
  padding: 0 0 10px;
  font-style: normal;
}

.card.nightMode .dictionary-title,
.custom-dark-mode .dictionary-title,
.card.nightMode .yomitan-glossary i,
.custom-dark-mode .yomitan-glossary i {
  color: var(--dict-color);
}

.definition-box .dictionary-title,
.definition-box .yomitan-glossary i {
  display: var(--definition-title-visibility);
}

.glossary-box .dictionary-title,
.glossary-box .yomitan-glossary i {
  display: var(--glossary-title-visibility);
}

.yomitan-glossary:has(.dictionary-title) i {
  display: none;
}

.glossary-box .yomitan-glossary li[data-dictionary]:not(:has(> .dictionary-title))::before {
  content: attr(data-dictionary);
  display: block; 
  line-height: 1;
  font-size: var(--dict-size);
  color: var(--light-dict-color);
  padding: 0 0 10px;
  font-style: normal;
}

.card.nightMode .yomitan-glossary li[data-dictionary]:not(:has(> .dictionary-title))::before,
.custom-dark-mode .yomitan-glossary li[data-dictionary]:not(:has(> .dictionary-title))::before {
  color: var(--dict-color);
}

/* Jitendex Settings */
li > span > div > span[data-sc-code] + ol > li,
ol > li:has(> span[data-sc-code] + ol) > ol > li,
ul > li:has(> span[data-sc-code] + ol) > ol > li {
  display: inline;
  padding-left: 0 !important;
}

[data-sc-content="example-sentence-a"],
[data-sc-content="xref"],
[data-sc-content="antonym"],
[data-sc-content="sense-note"],
[data-sc-content="info-gloss"],
[data-sc-content="lang-source"] {
  opacity: 0.5;
}

[data-sc-content="example-sentence-a"]:hover {
  opacity: 1;
}

[data-sc-content="example-sentence-a"] + *,
[data-sc-content="xref"] [data-sc-content="xref-glossary"],
[data-sc-content="antonym"] [data-sc-content="antonym-glossary"],
[data-sc-content="sense-note"] > div:last-child,
[data-sc-content="info-gloss"] > div:last-child,
[data-sc-content="lang-source"] > div:last-child {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

ol > li:last-child > ul[data-sc-content="glossary"]:last-child {
  margin-bottom: -4px !important;
}

[data-sc-content="example-sentence"],
[data-sc-content="antonym"],
[data-sc-content="sense-note"],
[data-sc-content="xref"] {
  margin-bottom: 0 !important;
}

ol > li:not(:last-child) :is(
  [data-sc-content="example-sentence"],
  [data-sc-content="antonym"],
  [data-sc-content="sense-note"],
  [data-sc-content="xref"]
) {
  margin-bottom: 0.5rem !important;
}

[data-sc-content="example-sentence-a"],
[data-sc-content="antonym"],
[data-sc-content="sense-note"],
[data-sc-content="xref"] {
  opacity: 0.5;
}

[data-sc-content="example-sentence-a"], 
[data-sc-content="example-sentence-b"] {
  font-size: 1em !important;
}

[data-sc-content="example-sentence"] span {
  background: unset !important;
  color: var(--light-highlight) !important;
  font-size: unset !important;
}

.card.nightMode [data-sc-content="example-sentence"] span,
.custom-dark-mode [data-sc-content="example-sentence"] span {
  color: var(--dark-highlight) !important;
}

[data-sc-content="example-sentence"] {
  border-color: rgba(3, 3, 3, 0.5) !important;
  transition: border-color var(--base-transition), 
              opacity var(--base-transition);
}

[data-sc-content="example-sentence"]:hover {
  border-color: rgba(3, 3, 3, 0.8) !important;
}

.card.nightMode [data-sc-content="example-sentence"],
.custom-dark-mode [data-sc-content="example-sentence"] {
  border-color: rgba(252, 252, 252, 0.5) !important;
}

.card.nightMode [data-sc-content="example-sentence"]:hover,
.custom-dark-mode [data-sc-content="example-sentence"]:hover {
  border-color: rgba(252, 252, 252, 0.8) !important;
}

[data-sc-content="example-sentence"].sentence-active {
  border-color: var(--light-highlight) !important;
}

.card.nightMode [data-sc-content="example-sentence"].sentence-active,
.custom-dark-mode [data-sc-content="example-sentence"].sentence-active {
  border-color: var(--dark-highlight) !important;
}

[data-sc-content="glossary"] {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

[data-sc-content="glossary"] li:not(:last-child)::after {
  content: "|";
  color: var(--text-color-muted);
  margin: 0 var(--spacing-ms);
}

.card.nightMode [data-sc-content="glossary"] li:not(:last-child)::after,
.custom-dark-mode [data-sc-content="glossary"] li:not(:last-child)::after {
  color: var(--text-color-muted-dark);
}

[data-sc-content="example-sentence"] rt {
  opacity: 0;
  transition: opacity var(--base-transition);
}

[data-sc-content="example-sentence"]:hover rt {
  opacity: 1;
}

span[data-sc-content="example-keyword"] {
  color: var(--light-highlight) !important;
  text-decoration: none !important;
}

.custom-dark-mode span[data-sc-content="example-keyword"], 
.card.nightMode span[data-sc-content="example-keyword"] {
  color: var(--dark-highlight) !important;
}

div[data-sc-content="attribution"] {
  display: none;
}

[data-sc-content|="forms"]{
  opacity: 0;
  display: none;
  transition: opacity var(--base-transition);
}

[data-sc-content|="forms"]:hover {
  opacity: 1;
  display: none;
}

/* Hide dict version date */
/* Jitendex */
[data-dictionary^="Jitendex"] .dictionary-title {
  font-size: 0;
}
[data-dictionary^="Jitendex"] .dictionary-title::after {
  content: "Jitendex";
  font-size: var(--dict-size);
}

/* Pixiv */
[data-dictionary^="Pixiv"] .dictionary-title {
  font-size: 0;
}
[data-dictionary^="Pixiv"] .dictionary-title::after {
  content: "Pixiv";
  font-size: var(--dict-size);
}

/* 素材辞典 */
[data-dictionary^="素材辞典"] .dictionary-title {
  font-size: 0;
}
[data-dictionary^="素材辞典"] .dictionary-title::after {
  content: "素材辞典";
  font-size: var(--dict-size);
}

/* Other Dictionaries */
#glossary.yomitan-glossary .example a {
  color: var(--light-highlight);
  text-decoration: none;
}

.custom-dark-mode #glossary.yomitan-glossary .example a, 
.card.nightMode #glossary.yomitan-glossary .example a {
  color: var(--dark-highlight);
}

#glossary.yomitan-glossary .yomitan-word {
  font-weight: bold;
  color: #333;
}

#glossary.yomitan-glossary .accent {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

#glossary.yomitan-glossary a {
  color: var(--light-highlight);
}

.custom-dark-mode #glossary.yomitan-glossary a, 
.card.nightMode #glossary.yomitan-glossary a {
  color: var(--dark-highlight);
}

#glossary.yomitan-glossary img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: none;
  outline: none;
}

#glossary.yomitan-glossary .example {
  margin-left: 1.5em;
  font-size: 0.9em;
  color: #555;
}

[style="font-weight: bold; color: red;"] {
  color: var(--light-highlight) !important;
}

.card.nightMode [style="font-weight: bold; color: red;"],
.custom-dark-mode [style="font-weight: bold; color: red;"] {
  color: var(--dark-highlight) !important;
  font-weight: normal !important;
}

[data-sc-iwakoku8="blksho"] {
  margin-left: 0 !important;
}

[data-sc-iwakoku8="onkun_onlist"] li[data-sc-iwakoku8="onkun_on"] {
  display: inline;
}

[data-sc-iwakoku8="onkun_onlist"] li[data-sc-iwakoku8="onkun_on"]:not(:last-child)::after {
  content: " / ";
  color: var(--dict-color);
}

[data-dictionary="YOJI-JUKUGO"] i + br {
  display: none;
}

/* Yomitan Links */
[data-dictionary="新選国語辞典　第十版"] a, [data-dictionary="漢検漢字辞典　第二版"] a, [data-dictionary="岩波国語辞典　第八版"] a, [data-dictionary="大辞林　第四版"] a, [data-dictionary="明鏡国語辞典　第二版"] a, [data-dictionary="現代国語例解辞典　第五版"] a {
  color: inherit !important;
}

[style="color: rgb(229, 0, 127);"]::before {
  content: "\A";
  white-space: pre;
}

/* 大辞林　第四版 - 新明解国語辞典　第八版 */
:is(
  li[data-dictionary="大辞林　第四版"],
  li[data-dictionary="新明解国語辞典　第八版"]
) .consolidated-entry-separator:has(+ span > a[href="#"]),
:is(
  li[data-dictionary="大辞林　第四版"],
  li[data-dictionary="新明解国語辞典　第八版"]
) .consolidated-entry-separator + span:has(> a[href="#"]),
:is(
  li[data-dictionary="大辞林　第四版"],
  li[data-dictionary="新明解国語辞典　第八版"]
) .consolidated-entry-separator:has(+ i + span > a[href="#"]),
:is(
  li[data-dictionary="大辞林　第四版"],
  li[data-dictionary="新明解国語辞典　第八版"]
) .consolidated-entry-separator + i + span:has(> a[href="#"]),

li[data-dictionary="大辞林　第四版"]:has(a[href="#"]) .consolidated-entry-separator:has(~ ul),
li[data-dictionary="大辞林　第四版"]:has(a[href="#"]) .consolidated-entry-separator ~ ul,
li[data-dictionary="新明解国語辞典　第八版"]:has(a[href="#"]) .consolidated-entry-separator:has(~ ul),
li[data-dictionary="新明解国語辞典　第八版"]:has(a[href="#"]) .consolidated-entry-separator ~ ul {
  display: none;
}

/* 岩波国語辞典　第八版 */
[data-sc-iwakoku8="blkhu"]:not(:has([style="vertical-align: text-bottom;"])) {
  display: none;
}

/* 漢検漢字辞典　第二版 */
[data-sc-subentries="子項目"], [data-sc-subentries="孫項目"] {
  display: none !important;
}

/* Pixiv */
[data-sc-pixiv="related-tags"], [data-sc-pixiv="parent-link"] {
  display: none;
}

/* Stroke Order */
/* 旺文社国語辞典 第十一版 */
li[data-dictionary="旺文社国語辞典 第十一版"] a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img) {
  vertical-align: top;
  max-height: 40px;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

li[data-dictionary="旺文社国語辞典 第十一版"] a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img)::before {
  content: "stroke order";
  color: black;
  font-size: 0.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
  font-family: var(--sans);
}

li[data-dictionary="旺文社国語辞典 第十一版"] a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img):hover {
  max-height: 100vh;
}

li[data-dictionary="旺文社国語辞典 第十一版"] a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img):hover::before {
  display: none;
}

/* 漢検漢字辞典　第二版 */
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img),
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img) {
  height: 50px;
  min-width: 2.65rem;
  cursor: pointer;
}

li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img) > span,
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img) > span {
  display: none !important;
}

li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img)::before,
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img)::before {
  content: "show stroke order";
  font-family: var(--sans);
  font-size: 0.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img):hover,
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img):hover {
  height: auto;
  width: auto;
  max-height: auto;
}

li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img):hover > span:first-child,
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img):hover > span:first-child {
  display: inline-block !important;
  width: auto;
  height: auto;
  max-height: auto;
}

li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".png"]:has(> span > img):hover::before,
li[data-dictionary="漢検漢字辞典　第二版"] table th[lang="ja"]:has(br):first-child:has(+ td:last-child) + td a[href*="yomitan_dictionary_media"][href$=".svg"]:has(> span > img):hover::before {
  display: none;
}

/* Hide default dictionary titles */
[data-dictionary] i { 
  display: none;
}

/* hr.consolidated-entry-separator */
#glossary .glossary-box hr.consolidated-entry-separator {
  background: rgba(0,0,0,0.2);
  border: none;
  height: 1px;
}

.card.nightMode #glossary .glossary-box hr.consolidated-entry-separator,
.custom-dark-mode #glossary .glossary-box hr.consolidated-entry-separator {
  background: rgba(255,255,255,0.15);
}

/* Frequency */
#frequency {
  position: fixed;
  right: var(--spacing-xxml);
  top: 55px;
  font-family: var(--sans);
  z-index: var(--z-index-base);
}

.freqbt {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-xxml);
  font-size: var(--frequency-size);
  padding: var(--spacing-ms);
  color: var(--text-color-light);
  cursor: pointer;
  transition: color var(--base-transition), 
              text-shadow var(--base-transition);
}

.custom-dark-mode .freqbt, 
.card.nightMode .freqbt {
  color: var(--text-color-dark);
}

.frequency-box:hover .freqbt {
  color: var(--light-text);
  text-shadow: 0 0 5px var(--light-bg);
}

.card.nightMode .frequency-box:hover .freqbt,
.custom-dark-mode .frequency-box:hover .freqbt {
  color: var(--dark-text);
  text-shadow: 0 0 5px var(--dark-bg);
}

.frequency-content {
  opacity: 0;
  max-height: 0;
  padding: 0 var(--spacing-lg);
  background: var(--frequency-bg-light);
  border-radius: var(--border-radius-ms);
  color: var(--dark-text);
  font-size: var(--frequency-content-size);
  overflow: hidden;
  will-change: opacity, max-height, padding;
  transition: opacity var(--base-transition), 
              max-height var(--base-transition), 
              padding var(--base-transition);
}

.card.nightMode .frequency-content,
.custom-dark-mode .frequency-content {
  background: var(--frequency-bg-dark);
}

.frequency-box:hover .frequency-content {
  opacity: 1;
  max-height: var(--frequency-max-height);
  padding: var(--spacing-lg);
}

/* Tags */
.tags {
  left: 0;
  font-size: var(--tag-font-size);
  margin-top: var(--tag-margin-top);
  margin-bottom: var(--tag-margin-bottom);
  padding: var(--tag-padding);
  border-radius: var(--tag-border-radius);
}

.tags-container {
  display: var(--tag-visibility);
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--tags-container-gap);
}

.tags:empty {
  display: none;
}

.tags {
  height: var(--base-size);
  line-height: clamp(18px, 3vw, 24px);
  background: rgba(0,0,0,0.04);
}

.card.nightMode .tags, 
.custom-dark-mode .tags {
  background: var(--tag-bg);
  color: var(--tag-color);
}

/* External Links */
.tags-and-links-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}

.external-links {
  display: flex;
  flex-wrap: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.light-icon {
  display: inline-block;
}

.card.nightMode .light-icon,
.custom-dark-mode .light-icon {
  display: none;
}

.dark-icon {
  display: none;
}

.card.nightMode .dark-icon,
.custom-dark-mode .dark-icon {
  display: inline-block;
}

.external-links a {
  margin-top: var(--external-links-margin-top);
  margin-bottom: var(--tag-margin-bottom);
  padding: var(--external-links-padding);
  display: var(--external-links-visibility);
  background: rgba(0,0,0,0.04);
  transition: filter var(--fast-transition);
}

.card.nightMode .external-links a,
.custom-dark-mode .external-links a {
  background: rgba(0,0,0,0.4);
}

.external-links img {
  background: transparent;
  width: var(--base-size);
  height: var(--base-size);
}

.external-links a:not(:hover) {
  filter: grayscale(1) opacity(0.5);
}

.external-links a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.external-links a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.tags-and-links-wrapper,
.external-links,
.light-icon,
.dark-icon,
.external-links a,
.external-links img {
  outline: 2px solid transparent !important;
  outline-offset: -2px;
}

/* Misc Info */
.misc-info {
  font-family: var(--sans);
  font-size: var(--misc-info-size);
  font-weight: bold;
  width: 100%;
  z-index: var(--z-index-base);
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
  direction: ltr;
  unicode-bidi: normal;
  text-align: left;
  transition: max-height var(--base-transition), 
              padding-top var(--base-transition), 
              opacity var(--base-transition);
}

.misc-info:has(> b) {
  text-align: center;
  display: block;
}

.misc-info b {
  margin: 0 0.25rem;
}

/* Kanji Hover */
#kanji-tooltip {
  position: absolute;
  display: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 10px 15px;
  z-index: 999;
  width: max-content;
  max-width: 500px;
  line-height: 1.4;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  color: #111;
  --tooltip-arrow-left: 10px;
  margin-top: 10px;
}

.card.nightMode #kanji-tooltip, 
.custom-dark-mode #kanji-tooltip{
  background: rgba(0, 0, 0, 0.9);
  color: #eee;
}

#kanji-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  color: rgba(255, 255, 255, 0.8);
  left: var(--tooltip-arrow-left);
  margin-left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(255, 255, 255, 0.9);
}

#kanji-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: var(--tooltip-arrow-left);
  margin-left: -8px; /* Slightly larger than ::before */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(0, 0, 0, 0.1); /* Shadow color */
  z-index: -1;
}

.card.nightMode #kanji-tooltip::before,
.custom-dark-mode #kanji-tooltip::before {
  border-bottom: 7px solid rgba(0, 0, 0, 0.9);
}

.kanji-highlight {
  color: var(--light-highlight);
}

.card.nightMode .kanji-highlight,
.custom-dark-mode .kanji-highlight {
  color: var(--dark-highlight);
}

#kanji-tooltip ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#kanji-tooltip li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.card.nightMode #kanji-tooltip li,
.custom-dark-mode #kanji-tooltip li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#kanji-tooltip li:last-child {
  border-bottom: none !important;
}

.related-sentence {
  font-size: 0.8rem;
  color: #333;
  margin-top: 4px;
}

.card.nightMode .related-sentence,
.custom-dark-mode .related-sentence {
  color: #ccc;
}

.related-sentence .highlight {
  opacity: 0.9;
}

.related-word-container ruby rt {
  font-size: 0.65rem;
}

.show-more-btn {
  background: rgba(0,0,0,0.02); 
  border: none; 
  color: black; 
  padding: 5px 10px; 
  cursor: pointer; 
  width: 100%; 
  margin: 0; 
  text-align: center; 
  box-sizing: border-box;
  transition: background var(--base-transition);
}

.show-more-btn:hover { 
  background: rgba(0,0,0,0.04); 
  border: none; 
}

.card.nightMode .show-more-btn,
.custom-dark-mode .show-more-btn {
  background: rgba(255,255,255,0.02); 
  color: var(--dark-text);

}

.card.nightMode .show-more-btn:hover, 
.custom-dark-mode .show-more-btn:hover { 
  background: rgba(255,255,255,0.03); 
}

#kanji-tooltip .position {
  font-family: var(--sans);
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--spacing-ms);
  font-size: 0.5rem;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  z-index: var(--z-index-base);
  text-align: center;
  line-height: 16px;
  background: rgba(0,0,0,0.8);
  white-space: nowrap;
}

.card.nightMode #kanji-tooltip .position,
.custom-dark-mode #kanji-tooltip .position {
  background: rgba(0,0,0,0.2);
}

#kanji-tooltip .position:empty {
  display: none;
}

#kanji-tooltip .categories {
  font-family: var(--sans);
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: var(--spacing-ms);
  font-size: 0.5rem;
  padding: 5px 5px 5px 5px;
  border-radius: var(--border-radius-sm);
  color: var(--text-color-muted);
  z-index: var(--z-index-base);
  text-align: center;
  line-height: 16px;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--base-transition), 
              transform var(--base-transition), 
              visibility var(--base-transition), 
              background var(--base-transition), 
              color var(--base-transition);
}

#kanji-tooltip .position:hover + .categories,
#kanji-tooltip .categories:hover {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1);
  background: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}

.custom-dark-mode #kanji-tooltip .position:hover + .categories,
.card.nightMode #kanji-tooltip .position:hover + .categories,
.custom-dark-mode #kanji-tooltip .categories:hover,
.card.nightMode #kanji-tooltip .categories:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
  opacity: 1 !important;
  visibility: visible !important;
  transform: scaleX(1);
}

#kanji-tooltip .categories:empty {
  display: none;
}

#kanji-tooltip .related-word-container { 
  position: relative;
  display: inline-block;
}

.related-word-container ruby rt {
  font-size: 0.65rem;
}

/* Tooltip Nasal Mora */
#kanji-tooltip span[style*="border:1.5px solid #c83c28"] {
  border: 1px solid #FF4936 !important;
  margin: 3px 1px !important;
  width: 0.20rem !important;
  height: 0.20rem !important;
}

/* Responsive Design */
.mobile .card, .mobile #content {
  margin: 0;
}

.mobile {
  overflow-x: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

.clickable {
  cursor: pointer;
}

@media (max-width: 1050px) {
  .dictionary-counter {
    padding: var(--spacing-md);
  }

  .front:not(:has(#wordAudio)) .toggle-custom-dark-mode { 
    position: unset;
  }

  .front:has(#wordAudio) .toggle-custom-dark-mode { 
    position: absolute;
  }

  .front:has(#sentence-wrapper) .toggle-custom-dark-mode { 
    position: absolute;
  }

  .front { top: 0; }
  .back { top: 0; }

  .grid-container {
    grid-template-columns: var(--grid-columns-large);
  }

  .header {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
  }

  .audio-hint {
    position: absolute;
    display: var(--custom-dark-mode-visibility);
    left: 75px;
    top: 20px;
  }

  .toggle-custom-dark-mode {
    position: absolute;
    display: var(--custom-dark-mode-visibility);
    left: 20px;
    top: 20px;
  }

  .back .toggle-custom-dark-mode {
    position: unset;
  }

  .back .audio {
    visibility: var(--audio-visibility);
    position: unset;
  }

  .back .sentenceaudio {
    visibility: var(--audio-visibility);
    position: unset;
  }

  .back:not(:has(.audio)) .sentenceaudio {
    top: 25px;
    left: 25px;
    position: unset;
  }

  .toggle-notes {
    position: unset;
  }

  #frequency {
    visibility: var(--freq-visibility);
    position: unset;
  }

  .freqbt {
    display: flex;
    gap: 5px;
    align-items: center;
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: var(--z-index-toggle);
  }

  .frequency-content {
    align-items: center;
    position: absolute;
    top: 61px;
    right: 20px;
    z-index: var(--z-index-toggle);
  }

  .glossary-box, .definition-box {
    padding: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: var(--grid-columns-medium);
  }

  .front::before,
  .back::before {
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important;
  }
}

@media (max-width: 624px) {
  .front:not(:has(#wordAudio)) .toggle-custom-dark-mode { 
    position: unset;
  }

  .front > .header {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
  }

  .sentence-front {
    padding-top: 10px;
  }

  .grid-container {
    grid-template-columns: var(--grid-columns-small);
  }

  .picture-container {
    max-height: var(--picture-height-small);
  }

  .picture-container img {
    max-height: var(--picture-max-height-small);
  }

  .front, .back {
    width: 100%;
    box-sizing: border-box;
  }

  .grid-container {
    gap: 10px;
  }

  .desktop-word-layout {
    display: none;
  }

  .mobile-word-layout {
    display: block;
  }

  .mobile-word-layout > .background-box {
    padding-top: 23.5px;
    padding-bottom: 27.5px;
  }
  .chrome:not(.win):not(.linux) .mobile-word-layout > .background-box {
    padding-top: 25px;
    padding-bottom: 29px;
  }
}

@supports (-webkit-touch-callout: none) {
  #sentenceEng {
    max-height: 0.5px;
  }
  .frequency-content {
    max-height: 0.5px;
  }
}