/* Shell overlays. Boxes measured off Storyboard 2a Part 1:
   badges drawer p6/p7, glossary p8, help p10, earn-a-badge p11, unlocked p28. */

/* Dims the page but never the footer toolbar (storyboard p6). */
.scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: var(--footer-top);
  background: rgba(0, 0, 0, 0.067);
  z-index: 20;
}

.overlay-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
}

.overlay-x svg {
  width: 28px;
  height: 28px;
}

.overlay-x:hover svg rect {
  fill: var(--teal-hover);
}

/* ---------- Badges drawer ---------- */

.drawer {
  position: absolute;
  top: 0;
  left: 767px;
  width: 513px;
  height: var(--footer-top);
  z-index: 30;
  background: var(--white);
  border-left: 1px solid #d5d5d5;
  padding: 16px 22px 12px 20px;
  overflow: hidden;
}

.drawer.is-enter {
  animation: drawer-in 0.22s ease-out;
}

@keyframes drawer-in {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
}

.drawer h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
}

.drawer-lead {
  margin: 0 0 22px;
  padding-right: 34px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
}

/* 68px art + 28px gap reproduces the storyboard's ~100px row pitch. */
.badge-list {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge-list li {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 14px;
}

.badge-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 68px;
}

/* Face and lock share one viewBox, so the lock stacks on the same box. */
.badge-art img {
  grid-area: 1 / 1;
  width: 59px;
  height: 68px;
  object-fit: contain;
}

.badge-list li.is-locked .badge-face {
  opacity: 0.3;
}

/* The faded face is its own stacking context and would paint over a
   non-positioned lock. */
.badge-art .badge-lock {
  position: relative;
}

.badge-list strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}

.badge-list p {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  line-height: 1.25;
}

/* ---------- Caret popovers (Glossary, Help) ---------- */

.popover {
  position: absolute;
  z-index: 30;
  background: var(--white);
  border: 1px solid #8f8f8f;
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 20px 26px;
}

.popover.is-enter {
  animation: pop-in 0.18s ease-out;
}

@keyframes pop-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}

.popover-glossary {
  left: 19px;
  top: 295px;
  width: 756px;
  height: 302px;
}

.popover-help {
  left: 19px;
  top: 75px;
  width: 1243px;
  height: 522px;
  padding-top: 32px;
  padding-left: 27px;
}

/* Downward caret, positioned over the owning toolbar button. */
.popover-caret {
  position: absolute;
  top: 100%;
  width: 30px;
  height: 22px;
  margin-left: -15px;
  overflow: hidden;
}

.popover-caret::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: var(--white);
  border: 1px solid #8f8f8f;
  transform: rotate(45deg);
}

.popover h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
}

/* Lands the How to Use block at the same y as the standalone page. */
.popover-help h2 {
  margin-bottom: 20px;
}

.glossary-list {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

.glossary-list dt {
  display: inline;
  font-weight: 600;
}

.glossary-list dd {
  display: inline;
  margin: 0;
}

.glossary-list a {
  color: var(--navy);
  font-weight: 400;
  text-decoration: underline;
}

.glossary-list dd::after {
  content: "";
  display: block;
}

.glossary-visit {
  margin: 18px 0 0;
  font-size: var(--fs-body);
  font-weight: 600;
}

.glossary-visit a {
  color: var(--navy);
}

/* ---------- How to Use grid (Help popover + standalone page) ---------- */

/* Column widths, gaps and row heights measured off the standalone page (p4);
   the Help popover reuses the same block at a different y. */
.htu {
  display: grid;
  grid-template-columns: 578px 318px 251px;
  grid-template-rows: 184px 187px;
  column-gap: 20px;
  row-gap: 25px;
}

.htu-row2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 528px 634px;
  gap: 25px;
}

.htu-card {
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 16px 18px;
  border-radius: 6px;
  background: var(--mint);
  font-size: 17px;
  line-height: 1.3;
}

.htu-card p {
  margin: 0;
}

.htu-stack {
  display: grid;
  gap: 12px;
}

.htu-stack .htu-line {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Asset107's frame (white card + corner arrows) at its storyboard size; the
   demo copy is centred in the asset's 298x80 text box. */
.htu-smallest {
  position: relative;
  flex: none;
  display: grid;
  place-content: center;
  width: 320.21px;
  height: 126.48px;
  padding: 23.28px 11.04px;
  background: url("../assets/svg/ui/htu-frame.svg") center / 100% 100% no-repeat;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.3;
}

.term-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 4px;
  background: #b8d537;
  box-shadow: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

/* Mobile swaps Hover → Tap (css/mobile.css). */
.htu-tip-tap {
  display: none;
}

.htu-badge {
  flex: none;
}

.htu-badge img {
  display: block;
  width: var(--badges-w);
  height: var(--badges-h);
}

.htu-toolbar {
  display: flex;
  gap: 14px;
}

.htu-toolbar .foot-btn {
  pointer-events: none;
}

/* ---------- Earn a badge / Badge Unlocked ---------- */

.top-panel {
  position: absolute;
  z-index: 30;
  background: var(--mint);
  border-radius: 14px;
  box-shadow: var(--shadow-panel);
}

.top-panel.is-enter:not(.panel-remind) {
  animation: pop-down 0.24s ease-out;
}

@keyframes pop-down {
  from {
    transform: translateY(-14px);
    opacity: 0;
  }
}

/* Both panels grow with their copy: the lead runs to one or two lines
   depending on the page, and the storyboard keeps the padding constant. */
.panel-earn {
  left: 230px;
  top: 14px;
  width: 820px;
  padding: 14px 26px 20px;
}

.panel-toast {
  left: 400px;
  top: 14px;
  width: 480px;
  padding: 14px 26px 20px;
  box-shadow: none;
}

.top-panel h2 {
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
}

.panel-toast h2 {
  font-weight: 600;
}

/* Capped well inside the panel so the lead wraps to the storyboard's two
   centred lines instead of running edge to edge. */
.panel-earn .top-panel-lead {
  width: 640px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.panel-define {
  margin: 8px auto 0;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  font-weight: 500;
}

.panel-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 500px;
  margin: 17px auto 0;
  padding: 16px 22px;
  border-radius: 10px;
  background: var(--white);
}

.panel-toast .panel-card {
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 6px 4px;
  background: none;
  justify-content: center;
}

.panel-card img {
  width: 58px;
  height: 66px;
  object-fit: contain;
  flex: none;
}

.panel-card strong {
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
}

.panel-toast .panel-card strong {
  font-weight: 600;
}

.panel-card p {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  line-height: 1.25;
}

/* ---------- FX ---------- */

/* Asset170 pieces thrown by burst(); motion comes from the Web Animations API. */
.confetti-piece {
  position: absolute;
  display: block;
  pointer-events: none;
}

.confetti-piece svg {
  display: block;
  overflow: visible;
}

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  margin: 0;
  pointer-events: none;
  opacity: 0.96;
  box-shadow: var(--shadow-pop);
  /* Width/height and wrapping come from the source clone — do not force
     nowrap here or care-board notes stretch to a single line. */
  /* Movement is applied via translate3d in JS — keep transforms off CSS. */
  animation: none !important;
  transition: none !important;
  will-change: transform;
  cursor: grabbing;
}

body.is-drag-active {
  cursor: grabbing;
  user-select: none;
}

body.is-drag-active * {
  cursor: grabbing !important;
}

/* Temporary wrong-answer flash from shake(). Scoped away from the Myth
   result tones, which reuse is-wrong for the bubble colour only. */
.is-wrong:not(.myth-statement):not(.myth-result) {
  animation: wiggle 0.4s ease-in-out 2;
  border-color: #da3832 !important;
  color: #da3832 !important;
}

@keyframes wiggle {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Filling the window (desktop) ----------
   Matches shell.css: the drawer and scrim run to the stage's right edge and
   down to the footer, popovers stay anchored above the footer toolbar, and
   the top panels stay centred over the content frame. */

html[data-viewport="desktop"] .scrim {
  width: 100%;
  height: calc(var(--footer-top) + var(--ex-h, 0px));
}

html[data-viewport="desktop"] .drawer {
  left: auto;
  right: 0;
  height: calc(var(--footer-top) + var(--ex-h, 0px));
}

/* Grows upward from the footer as the definitions lengthen. */
html[data-viewport="desktop"] .popover-glossary {
  top: auto;
  bottom: 123px;
  width: 1000px;
  height: auto;
}

html[data-viewport="desktop"] .popover-glossary .glossary-list {
  font-size: 16px;
  line-height: 1.5;
}

html[data-viewport="desktop"] .popover-glossary .glossary-list dd::after {
  margin-bottom: 6px;
}

html[data-viewport="desktop"] .popover-help {
  top: calc(75px + var(--ex-h, 0px));
}

html[data-viewport="desktop"] .panel-earn {
  left: calc(230px + var(--ex-w, 0px) / 2);
}

html[data-viewport="desktop"] .panel-toast {
  left: calc(400px + var(--ex-w, 0px) / 2);
}