:root {
  --ground: #050806;
  --ivory: #efe8d6;
  --ivory-2: #b3ac99;
  --gold: #c8a24b;
  --gold-hi: #dcb862;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; color: var(--ivory); }
html { background: var(--ground); }
body { font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; }

/* Cash rain */
.cash { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }

.bill { position: absolute; top: -90px; width: 120px; height: auto; }

/* The definition */
.entry {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  padding: 48px clamp(20px, 6vw, 96px);
  z-index: 2;
}
.entry > * { animation: rise .8s var(--ease) backwards; }
.entry > .def-block { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.mav {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mav img {
  display: block;
  height: min(56vh, 480px);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 100%;
  transition: transform .35s var(--ease);
}
.mav:hover img { transform: scale(1.03); }
.mav:active img { transform: scale(.97); transition-duration: .1s; }
.mav:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 8px; }
.mav.is-paid img { animation: paid .5s var(--ease); }
@keyframes paid { 30% { transform: scale(1.08) rotate(-2deg); } 60% { transform: scale(.98) rotate(1deg); } }
.def-block { max-width: 560px; min-width: 0; }

.kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.kicker b { font-weight: 700; }
.word { margin: 0; font: 500 clamp(56px, 8vw, 112px)/1 var(--serif); letter-spacing: -0.015em; color: var(--gold-hi); }
.pos { margin: 8px 0 0; font-size: 15px; }
.ipa { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
.ipa span { font-weight: 400; color: var(--ivory-2); margin-left: 6px; }
.sense-label {
  margin: 24px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--gold);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.sense-label i { font-weight: 400; }
.def { margin: 16px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; font-weight: 700; }
.examples { margin: 16px 0 0; padding: 0; list-style: none; }
.examples li { position: relative; padding-left: 18px; font-style: italic; color: var(--ivory-2); }
.examples li + li { margin-top: 8px; }
.examples li::before { content: "\2022"; position: absolute; left: 2px; font-style: normal; color: var(--gold); }

.worth { margin-top: 28px; display: grid; gap: 2px; }
.worth-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-2); }
.worth-value { font: 700 clamp(26px, 3vw, 40px)/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--gold-hi); letter-spacing: -0.01em; overflow-wrap: anywhere; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ca {
  flex: 1 1 260px;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(239, 232, 214, .3);
  border-radius: 4px;
  background: rgba(5, 8, 6, .4);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s var(--ease);
}
.ca:hover { border-color: var(--gold); }
.ca-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--gold); }
.ca-value { font: 500 14px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { font-size: 12px; font-weight: 700; color: var(--gold); }
.btn {
  display: inline-grid;
  place-items: center;
  height: 44px;
  min-width: 96px;
  padding: 0 20px;
  border-radius: 4px;
  border: 1px solid var(--ivory);
  color: var(--ivory);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { background: var(--ivory); color: var(--ground); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ground); }
.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn[aria-disabled="true"] { pointer-events: none; background: transparent; border-color: rgba(239, 232, 214, .2); color: rgba(239, 232, 214, .4); }

/* The edit: a small window you drag around */
.pip {
  position: fixed;
  border: 1px solid rgba(200, 162, 75, .6);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .85);
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 3;
}
.pip.is-dragging { cursor: grabbing; box-shadow: 0 32px 80px -12px rgba(0, 0, 0, .95); }
.pip video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pip-sound {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  color: var(--ivory);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pip-sound:hover { background: rgba(0, 0, 0, .9); }
@keyframes fade { from { opacity: 0; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ground);
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 4;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Phone: Maverick above the definition */
@media (max-width: 760px) {
  .entry { flex-direction: column; justify-content: flex-start; gap: 16px; padding: 24px 20px 32px; overflow-y: auto; }
  .mav img { height: 28vh; }
  .examples li:first-child { display: none; }
  .actions { margin-top: 20px; }
  .ca { flex-basis: 100%; }
  .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cash { display: none; }
}