.sentence-token {
  position: relative;
  appearance: none;
  border: 0;
  border-bottom: 1px dotted #9fafc9;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0 1px;
  margin: 0;
  cursor: pointer;
}
.sentence-token::after {
  content: attr(data-token-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 50;
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 8px 11px;
  border: 1px solid #887348;
  border-radius: 9px;
  background: #0b1322;
  color: #f6edda;
  box-shadow: 0 10px 30px #0009;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .12s ease, transform .12s ease;
}
.sentence-token:hover::after,
.sentence-token:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sentence-token:hover,
.sentence-token:focus {
  color: #fff0aa;
  border-bottom-color: var(--gold);
  background: #e7bd6714;
  border-radius: 4px;
  outline: none;
}
.sentence-token.target-token {
  color: var(--gold);
  font-weight: 850;
  border-bottom-color: var(--gold);
}
.token-card-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #050913b8;
  backdrop-filter: blur(5px);
}
.token-card {
  position: relative;
  width: min(430px, 100%);
  padding: 25px;
  background: linear-gradient(155deg, #213250, #101a2d);
  border: 1px solid #8b7449;
  border-radius: 20px;
  box-shadow: 0 28px 90px #000b;
}
.token-card-close {
  position: absolute;
  right: 13px;
  top: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 30px;
  cursor: pointer;
}
.token-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.token-card-head h2 { font-size: 38px; margin: 9px 0 0; color: var(--cream); }
.token-card-head p { margin: 1px 0; color: var(--muted); font-size: 17px; }
.token-sound {
  flex: none;
  width: 49px;
  height: 49px;
  border: 1px solid #75633f;
  border-radius: 50%;
  background: #2c261c;
  color: var(--gold);
  font-size: 21px;
  cursor: pointer;
}
.token-card-pos { color: var(--muted); font-size: 14px; margin: 11px 0 7px; }
.token-card-meaning { display: block; color: var(--gold); font-size: 25px; line-height: 1.4; }
.token-card-en { font-size: 16px; line-height: 1.5; margin: 8px 0; color: var(--cream); }
.token-card-note { color: var(--muted); background: #101827; border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.token-card-example { margin-top: 17px; padding: 13px 15px; border-radius: 11px; background: #101827; }
.token-card-example span { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.token-card-example p { margin: 6px 0 3px; font-size: 17px; line-height: 1.45; }
.token-card-example small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.token-report {
  appearance: none;
  border: 0;
  background: transparent;
  color: #aeb9cc;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 0;
  margin-top: 8px;
  cursor: pointer;
}
.token-report:disabled { opacity: .6; cursor: default; }
.token-report-status { min-height: 20px; margin: 2px 0 0; color: var(--green); font-size: 13px; }