/* --------------------------------
   5 Spice Outlet Selector (UI Only)
---------------------------------- */

:root{
  --bg0:#07090d;
  --bg1:#0b0f14;
  --glow: rgba(255, 145, 64, 0.55);
  --glow2: rgba(255, 120, 32, 0.35);
  --line: rgba(255, 160, 70, 0.22);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.60);

  --pillH: 44px;
  --pillPadX: 18px;
  --pillRadius: 999px;

  /* orbit size (JS will update these too if needed) */
  --orbitW: min(88vw, 520px);
  --orbitH: min(70vh, 560px);
}

/* ✅ Nudge touching pairs (Desktop + Mobile) */
.pill[data-id="hyfun-fries"]{ --nx: -16px; }
.pill[data-id="skylark-frozen"]{ --nx: 16px; }

.pill[data-id="imported-cheese"]{ --nx: -18px; }
.pill[data-id="olives-pasta"]{ --nx: 18px; }

@media (max-width: 420px){
  .pill[data-id="hyfun-fries"]{ --nx: -20px; }
  .pill[data-id="skylark-frozen"]{ --nx: 20px; }

  .pill[data-id="imported-cheese"]{ --nx: -22px; }
  .pill[data-id="olives-pasta"]{ --nx: 22px; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(60% 60% at 50% 36%, rgba(255,140,60,0.13), transparent 60%),
              radial-gradient(90% 80% at 50% 100%, rgba(255,120,40,0.10), transparent 65%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* full screen */
}

/* Screen layout */
.screen{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding: 18px 16px 18px;
}

/* Header */
.screen-header{
  width:100%;
  display:flex;
  justify-content:center;
  padding-top: 6px;
}
.screen-title{
  margin:0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 0 18px rgba(255,140,60,0.18);
}

/* Center stage */
.stage{
  position:relative;
  width:100%;
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Orbit frame */
.orbit{
  position:relative;
  width: var(--orbitW);
  height: var(--orbitH);
  max-width: 560px;
  max-height: 620px;
}

/* Optional subtle “orbit” guide */
.orbit::before{
  content:"";
  position:absolute;
  inset: 8%;
  border: 1px solid var(--line);
  border-radius: 999px;
  filter: blur(0.1px);
  opacity: 0.65;
}

/* Center logo */
.center{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.brand-logo{
  width: 140px;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.5));
  user-select: none;
}

/* Large phones / small tablets */
@media (max-width: 420px){
  .brand-logo{
    width: 135px;
  }
}

/* Small phones (5.5" class) */
@media (max-width: 360px){
  .brand-logo{
    width: 125px;
  }
}

/* Outlet pill button */
.pill{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  height: var(--pillH);
  padding: 0 var(--pillPadX);
  border-radius: var(--pillRadius);
  border: 1px solid rgba(255, 160, 70, 0.38);
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(6px);
  
   /* ✅ Mobile nudge support (default = no move) */
  --nx: 0px;   /* nudge X */
  --ny: 0px;   /* nudge Y */
  
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  letter-spacing: 0.2px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  cursor:pointer;
  user-select:none;

  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 18px rgba(255, 120, 32, 0.08);
  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

/* tiny dot (optional) */
.pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(255,160,70,0.55);
  box-shadow: 0 0 10px rgba(255,140,60,0.25);
}

.pill:hover{
  box-shadow:
    0 0 22px rgba(255, 140, 60, 0.14),
    0 0 34px rgba(255, 120, 32, 0.10);
  border-color: rgba(255, 170, 90, 0.60);
}

.pill:active{
  transform: translate(-50%,-50%) scale(0.98);
}

/* Selected outlet */
.pill.selected{
  border-color: rgba(255, 170, 90, 0.95);
  background: rgba(255, 140, 60, 0.10);
  box-shadow:
    0 0 24px var(--glow2),
    0 0 46px rgba(255, 130, 50, 0.16);
}

/* Footer */
.screen-footer{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding-bottom: 8px;
}

.cta{
  width: min(520px, 92vw);
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 160, 70, 0.35);
  background: rgba(12, 14, 18, 0.65);
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor:not-allowed;
  transition: transform 160ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Enabled state */
.cta.enabled{
  cursor:pointer;
  background: rgba(255, 140, 60, 0.14);
  border-color: rgba(255, 170, 90, 0.85);
  box-shadow:
    0 0 20px rgba(255, 140, 60, 0.18),
    0 0 44px rgba(255, 120, 32, 0.12);
  color: rgba(255,255,255,0.95);
}

.cta.enabled:hover{
  box-shadow:
    0 0 26px rgba(255, 140, 60, 0.22),
    0 0 58px rgba(255, 120, 32, 0.14);
}

.cta.enabled:active{
  transform: scale(0.99);
}

.hint{
  margin:0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.72);
}

@media (max-width: 420px){
  :root{
    --pillH: 40px;
    --pillPadX: 14px;

    --orbitW: 92vw;   /* ⬅️ reduce side empty gap */
    --orbitH: 56vh;   /* ⬅️ stop bottom touching the button */
  }
}

/* ✅ Fix touching outlets on mobile */
@media (max-width: 420px){
  /* Top pair */
  .pill[data-id="vashi"]{ --nx: -10px; }
  .pill[data-id="sakinaka"]{ --nx: 10px; }

  /* Bottom pair */
  .pill[data-id="kharghar"]{ --nx: -10px; }
  .pill[data-id="thane"]{ --nx: 10px; }
}

/* ✅ Extra safety for small phones (5.5 inch class) */
@media (max-width: 360px){
  :root{
    --pillH: 38px;
    --pillPadX: 12px;
    --orbitH: 54vh;
  }

  /* slightly stronger nudge only on very small screens */
  .pill[data-id="vashi"]{ --nx: -14px; }
  .pill[data-id="sakinaka"]{ --nx: 14px; }

  .pill[data-id="kharghar"]{ --nx: -14px; }
  .pill[data-id="thane"]{ --nx: 14px; }
}