:root{ --ca-beige: #f4ead8; --icon-size: 128px; }

html, body { height:100%; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.ai-menu-wrap{
  background: var(--page-beige, var(--ca-beige));
  padding-inline: clamp(12px, 4vw, 36px);
  padding-bottom: 48px;
  min-height: 80vh;
  display: grid;
  align-items: start;
}

.credit{ margin: 16px 0 8px; color:#3a2e22; font-weight:500; }

#menu-orbit{
  position: relative;
  min-height: clamp(600px, 80vh, 1000px);
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Li'l Bit stays un-gemified */
.lilbit{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  height:145px; width:auto;
  z-index:5;
  image-rendering: -webkit-optimize-contrast;
}

/* Gem node */
.gem{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.5);
  opacity:.5;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius:20px;
  z-index:2;
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,.4));
}

/* Metallic bezel */
.gem::before,
.gem::after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
}
.gem::before{
  background:
    radial-gradient(circle at top left,
      #ffffff 10%, 
      #fff3a3 20%,        /* palest yellow highlight, 10% span */
      #e6c77a 40%,        /* light beige shifted darker */
      #704d06 80%,        /* rich gold (darkened) */
      #fff3a3 100%        /* deeper gold/beige for the rim */
    );
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(50% - 3px), black calc(50% - 2px));
  mask: radial-gradient(circle at 50% 50%, transparent calc(50% - 3px), black calc(50% - 2px));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.45);
}


.gem::after{
  inset:4px; border-radius:18px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.20), rgba(255,255,255,0) 45%),
    rgba(0,0,0,.22);
}

.gem img{
  position:absolute; inset:8px; width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: contain; border-radius:12px; z-index:5;
}

.gem .label{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%);
  font: 600 14px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#313131; text-align:center; white-space:nowrap;
  background: rgba(255,255,255,.55);
  padding:6px 10px; border-radius:12px; backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display:none;
}

/* Idle orbit */
/* idle-orbit base removed; using .idle-once */
@keyframes idleOrbit{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }

/* Idle breath */
.gem.idle-breath{ animation: idleBreath 3.6s ease-in-out infinite; }
@keyframes idleBreath{
  0%,100%{ transform: translate(var(--tx,0), var(--ty,0)) scale(1) }
  50%    { transform: translate(var(--tx,0), var(--ty,0)) scale(1.04) }
}

/* Hover affordance */
.gem:hover{ z-index:3; transform: translate(-50%,-50%) scale(1.03); transition: transform .2s ease; }

/* Two-rotation ease-out spin for the orbit wrapper */
/* spin2 removed; replaced by idle-once */

/* Tooltip for activity descriptions */
.gem .tooltip{
  position:absolute;
  bottom: 110%;
  left:50%; transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color:#fff; padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  font-size:13px;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  z-index:10;
}
.gem:hover .tooltip{ opacity:1; }

/* One-rotation ease-out spin, then stop */
.idle-once { z-index:2; animation: idleOrbit var(--idle-duration, 16s) ease-out 1 forwards; }

/* One-shot pulse when the menu finishes rotating */
/* Ensure a default var for every gem */
.gem { --pulse-scale: 1; }

/* Gentle hover polish */
.gem:hover {
  filter: brightness(1.12);
  transform: scale(1.04); /* scales from current position, not center */
  transition: transform 200ms ease, filter 200ms ease;
}

/* Glint animation: a diagonal sweep across the gem */
@keyframes glint {
  0%   { background-position: -150% -150%; }
  100% { background-position: 150% 150%; }
}
.gem:hover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
              rgba(255,255,255,0.0) 40%,
              rgba(255,255,200,0.6) 50%,
              rgba(255,255,255,0.0) 60%);
  background-size: 200% 200%;
  animation: glint 0.8s ease forwards;
}