/* Court Gifts and the Revel (M11 track O): the moon by the clock, your Gift's badge and the glide
   button, the Revel's banner and the dance HUD, and the panels (the Moonwell, the fae folk,
   Sorrel's finery, wish lanterns). See public/js/revel.ts. */
#status { position: relative; }
#rv-moon { position: absolute; left: -36px; top: 3px; width: 30px; height: 30px; image-rendering: pixelated; cursor: pointer; border-radius: 50%; background: radial-gradient(circle, rgba(28, 26, 52, .82) 58%, rgba(28, 26, 52, 0) 72%); }
#rv-moon.rv-revel-on { box-shadow: 0 0 0 2px #c8b0ff, 0 0 12px rgba(200, 176, 255, .9); animation: rv-glow 2.4s ease-in-out infinite alternate; }
#rv-gift { position: absolute; left: -36px; top: 37px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
#rv-gift canvas { width: 30px; height: 30px; image-rendering: pixelated; display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
@keyframes rv-glow { from { box-shadow: 0 0 0 2px #c8b0ff, 0 0 4px rgba(200, 176, 255, .5); } to { box-shadow: 0 0 0 2px #e8dcff, 0 0 14px rgba(200, 176, 255, 1); } }

#rv-glide { right: calc(64px + var(--safe-r)); bottom: calc(86px + var(--safe-b)); width: 46px; height: 46px; border-radius: 50%; font-size: 22px; padding: 0; background: radial-gradient(circle at 40% 35%, #4a4a8a, #1e1e48); border: 3px solid #c8c0ff; box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 10px rgba(200, 192, 255, .45); pointer-events: auto; }
#rv-glide.cooling { opacity: .45; filter: saturate(.4); }
body.touch #rv-glide { right: calc(98px + var(--safe-r)); bottom: calc(96px + var(--safe-b)); width: 54px; height: 54px; }

#rv-banner { top: calc(62px + var(--safe-t)); left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 10px; background: rgba(22, 18, 44, .78); border: 2px solid #9a80d8; color: #f0eaff; font-size: 13px; white-space: nowrap; text-shadow: 0 1px 0 #000; pointer-events: auto; }
@media (max-width: 600px) { #rv-banner { top: calc(100px + var(--safe-t)); left: auto; right: calc(62px + var(--safe-r)); transform: none; font-size: 11px; white-space: normal; max-width: 52vw; text-align: right; } }

#rv-dance { left: 50%; transform: translateX(-50%); bottom: calc(86px + var(--safe-b)); display: none; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; background: rgba(28, 24, 56, .9); border-color: #9a80d8; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px #4a3a7a; color: #f0eaff; pointer-events: auto; }
#rv-dance .rv-beat { width: 56px; height: 56px; flex: none; }
#rv-dance .rv-dmid { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
#rv-dance .rv-dinfo { font-size: 12.5px; color: #d8d0f0; white-space: nowrap; }
#rv-dance .rv-step { font-size: 17px; padding: 8px 18px; background: #8a6ae0; border-color: #c8b0ff; }
body.touch #rv-dance { bottom: calc(176px + var(--safe-b)); }
body.touch #rv-dance .rv-step { font-size: 20px; padding: 12px 26px; }
@media (max-width: 420px) { #rv-dance { gap: 6px; padding: 5px 8px; } #rv-dance .rv-dinfo { font-size: 11px; white-space: normal; max-width: 150px; } }

/* panels */
.rv-ico { image-rendering: pixelated; width: 32px; height: 32px; flex: none; }
.rv-moonpic { image-rendering: pixelated; width: 72px; height: 72px; flex: none; border-radius: 50%; background: radial-gradient(circle, #1e1e40 55%, #2e2a58); padding: 4px; }
.rv-row { display: flex; align-items: center; gap: 10px; }
.rv-row .grow { flex: 1; min-width: 0; }
.rv-well .letter, .rv-faepanel .letter { margin: 2px 0 6px; }
.rv-revel-line { padding: 6px 10px; border-radius: 8px; background: #efe8ff; border: 2px solid #c8b8f0; }
.rv-card { --rv-glow: #c8c0ff; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: #fffaf0; border: 2px solid #e0d0b0; box-shadow: inset 4px 0 0 var(--rv-glow); }
.rv-card.mine { background: #f6f0ff; border-color: var(--rv-glow); box-shadow: inset 4px 0 0 var(--rv-glow), 0 0 10px color-mix(in srgb, var(--rv-glow) 45%, transparent); }
.rv-card.unmet { opacity: .7; border-style: dashed; box-shadow: none; }
.rv-card p { margin: 4px 0; }
.rv-fx { font-size: 13px; line-height: 1.45; margin: 4px 0 6px; color: var(--ink); }
.rv-yours { font-weight: 700; color: #6a4ab0; margin-right: 8px; }
.rv-need { font-style: italic; }
.rv-badge-big canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.rv-portrait { image-rendering: pixelated; height: 64px; width: auto; flex: none; background: radial-gradient(circle at 50% 70%, #3a3a6a, #1e1a38); border-radius: 10px; padding: 4px; }
.rv-trade { padding: 6px 10px; margin: 4px 0 8px; border-radius: 8px; background: #f4eedc; border: 2px dashed #c8b080; line-height: 1.5; }
.rv-song { margin: 6px 0; }
.rv-notes { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.rv-notes .btn { min-width: 34px; font-size: 16px; }
.rv-notes .btn:nth-child(1) { background: #f0d8ff; } .rv-notes .btn:nth-child(2) { background: #e4d8ff; } .rv-notes .btn:nth-child(3) { background: #d8d8ff; } .rv-notes .btn:nth-child(4) { background: #d0e0ff; }
.rv-notes .btn:nth-child(5) { background: #c8e8ff; } .rv-notes .btn:nth-child(6) { background: #c8f0f0; } .rv-notes .btn:nth-child(7) { background: #d0f4e0; } .rv-notes .btn:nth-child(8) { background: #e0f8d8; }
.rv-chosen { display: flex; align-items: center; gap: 10px; font-size: 16px; min-height: 28px; color: #6a4ab0; }
.rv-fine { gap: 10px; align-items: center; padding: 4px 0; border-top: 1px solid #e8dcc0; }
.rv-doll { image-rendering: pixelated; width: 48px; height: 56px; flex: none; background: radial-gradient(circle at 50% 80%, #d8d0f0, #f4f0ff); border-radius: 8px; }
.rv-wishtext { min-height: 3.2em; }
.rv-bargains h4 { margin: 10px 0 4px; }
.rv-bargains .rv-row { gap: 8px; padding: 3px 0; }
.rv-rite p.letter { font-style: italic; }
@media (max-width: 480px) {
  .rv-moonpic { width: 56px; height: 56px; }
  .rv-portrait { height: 52px; }
}
@media (prefers-reduced-motion: reduce) { #rv-moon.rv-revel-on { animation: none; } }
.rv-friend { margin-top: 6px; gap: 6px; }