/* Approved multicolour paper bookmarks, scoped to Alphabet only. */
.alphabet-ribbons {
  --ribbon-size: clamp(44px, min(5vw, 8vh), 72px);
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.alphabet-ribbons[hidden] { display: none; }
.alphabet-letter-foreground { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 36; pointer-events: none; }
.alphabet-ribbons-left {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: max(2%, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: flex-start;
  gap: clamp(5px, .65vw, 10px);
  pointer-events: none;
}
.alphabet-ribbon {
  --ribbon-color: #367f70;
  position: relative;
  isolation: isolate;
  width: var(--ribbon-size);
  height: calc(var(--ribbon-size) * 1.18);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--ribbon-size) * .05);
  padding: calc(var(--ribbon-size) * .14) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff5d9;
  text-decoration: none;
  font: inherit;
  font-size: clamp(12px, calc(var(--ribbon-size) * .23), 17px);
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 2px #563c3438);
  transition: translate 120ms ease, opacity 120ms ease;
}
.alphabet-ribbon::before,
.alphabet-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 81% 98%, 50% 91%, 18% 98%, 0 92%);
  background: #fff3d7;
}
.alphabet-ribbon::after {
  inset: 0 2px 3px;
  z-index: -1;
  background-color: var(--ribbon-color);
  background-image: url('./ribbon-paper.svg'), linear-gradient(145deg, #ffffff16, transparent 48%, #21152d12);
  background-size: 110px 110px, cover;
}
.alphabet-ribbon svg { width: 45%; height: 38%; flex: none; fill: currentColor; overflow: visible; }
.alphabet-ribbon span { position: relative; white-space: nowrap; }
.ribbon-pick { --ribbon-color: #c55e24; }
.ribbon-listen { --ribbon-color: #616f9d; }
.ribbon-chinese {
  --ribbon-color: #91416e;
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: max(2%, env(safe-area-inset-right, 0px));
}
.ribbon-eye-slash { display: none; }
.ribbon-chinese[aria-pressed="false"] { --ribbon-color: #79616f; }
.ribbon-chinese[aria-pressed="false"] .ribbon-eye-slash { display: block; }
.alphabet-ribbon:disabled { cursor: default; }
.alphabet-ribbon:disabled svg, .alphabet-ribbon:disabled span { opacity: .58; }
.alphabet-ribbon:not(:disabled):active { translate: 0 3px; }
.alphabet-ribbon:focus-visible { outline: 3px solid #624732; outline-offset: 3px; }
/* A captured letter drag may travel across the corners without hitting UI. */
.alphabet-ribbons[data-dragging="true"] .alphabet-ribbon { pointer-events: none; opacity: .2; }
/* Replace both old entry points. Do not modify the shared portal/access code. */
body.alphabet-ribbon-ui #endless-portal-home { display: none !important; }
body.alphabet-ribbon-ui #videoControls [data-video-action="menu"],
body.alphabet-ribbon-ui #videoControls [data-video-action="definition"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .alphabet-ribbon { transition: none; }
}