/* alweekend — Bundle Picker hero UI.
   Sunny funfair arcade aesthetic. Reuses tokens from night.html
   (--paper, --ink, --red, --mint, --mustard, --gold, --violet, --pink, --ink-2).
   Cards: compact TV tiles, chunky toy shadow, flip on tap. Mounted inside #picker
   which itself sits on the sunny stage; this layer drops a cream bg
   over that so the polka texture reads. */

.bp-root{
  position:relative;
  min-height:100%;
  width:100%;
  padding:clamp(14px,2.2vh,26px) clamp(18px,3vw,46px) clamp(58px,6vh,76px);
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.35vh,18px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.bp-root::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(rgba(43,33,96,.10) 1.5px,transparent 1.5px),
    radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:46px 46px,46px 46px;background-position:0 0,23px 23px;
}
.bp-root > *{position:relative;z-index:1;}

/* ─── header row ─── */
.bp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:nowrap;}
.bp-brand{display:flex;flex-direction:column;gap:6px;flex:1;min-width:240px;}
.bp-brand h1{
  font-family:"Marhey",sans-serif;font-weight:700;
  font-size:clamp(32px,4.6vw,68px);line-height:.92;color:var(--ink);
  text-shadow:3px 3px 0 var(--mustard),6px 6px 0 var(--pink);
  transform:rotate(-1.5deg);
  letter-spacing:-.5px;
}
.bp-brand h1 .latin{
  display:block;font-family:"Titan One",sans-serif;
  font-weight:400;font-size:clamp(11px,1.2vw,15px);
  letter-spacing:.34em;color:var(--violet);
  text-shadow:none;direction:ltr;margin-bottom:8px;transform:rotate(1deg);
}
.bp-brand p{
  font-family:"Alexandria",sans-serif;font-weight:500;
  font-size:clamp(14px,1.55vw,20px);color:rgba(43,33,96,.7);
  margin-top:2px;line-height:1.25;
}

/* qr-corner */
.bp-qr{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px;background:#fff;border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--pop-sm);
}
.bp-qr .bp-qr-svg{width:108px;height:108px;width:clamp(74px,7vw,108px);height:clamp(74px,7vw,108px);background:#fff;border-radius:12px;overflow:hidden;display:flex;}
.bp-qr .bp-qr-svg svg{width:100%;height:100%;display:block;}
.bp-qr .bp-room{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:18px;font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.18em;color:var(--ink);direction:ltr;
}
.bp-qr .bp-room-label{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.2em;color:rgba(43,33,96,.55);
  direction:ltr;text-transform:uppercase;
}

/* ─── divider ─── */
.bp-divider{
  display:flex;align-items:center;gap:14px;
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:10px;letter-spacing:.18em;
  color:rgba(43,33,96,.45);text-transform:uppercase;direction:ltr;
  text-align:center;justify-content:center;
}
.bp-divider::before,.bp-divider::after{
  content:"";flex:1;height:3px;background:rgba(43,33,96,.2);max-width:120px;border-radius:2px;
}

/* ─── card grid (8 nights + in-season seasonal cards) ─── */
.bp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.15vw,18px);
  width:100%;
}
@media (max-width:900px){ .bp-grid{ grid-template-columns:1fr; gap:14px; } }

/* card wrapper — preserves perspective for the 3d flip */
.bp-card{
  perspective:1400px;
  height:clamp(168px,18vh,216px);
  cursor:pointer;
  position:relative;
}
.bp-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .5s var(--bounce);
}
.bp-card.flipped .bp-card-inner{ transform:rotateY(180deg); }

.bp-face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:var(--r);
  border:3px solid var(--ink);
  box-shadow:var(--pop);
  overflow:hidden;
  transition:transform .14s var(--bounce),box-shadow .14s var(--bounce);
  display:flex;flex-direction:column;
  padding:clamp(12px,1.25vw,20px);
}
.bp-card:not(.flipped):hover .bp-face.front{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 9px 0 var(--ink-2);}
.bp-card:focus-visible{outline:none;}
.bp-card:focus-visible .bp-face.front{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 9px 0 var(--ink-2);outline:3px dashed var(--ink);outline-offset:4px;}

/* color variants — light vs dark text */
.bp-face[data-c="mint"]   { background:var(--mint);    color:var(--ink); }
.bp-face[data-c="mustard"]{ background:var(--mustard); color:var(--ink); }
.bp-face[data-c="red"]    { background:var(--red);     color:#fff; }
.bp-face[data-c="gold"]   { background:var(--gold);    color:var(--ink); }
.bp-face[data-c="violet"] { background:var(--violet);  color:#fff; }
.bp-face[data-c="pink"]   { background:var(--pink);    color:var(--ink); }
.bp-face[data-c="blue"]   { background:var(--blue);    color:#fff; }

/* ─── front face ─── */
.bp-face.front{
  align-items:center;justify-content:space-between;text-align:center;
}
/* in-season gold ribbon (eid/ramadan cards inside their date window) */
.bp-face.front .bp-season-badge{
  position:absolute;top:10px;inset-inline-start:10px;
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:clamp(10px,1vw,13px);line-height:1.2;
  padding:5px 11px;border-radius:99px;
  background:var(--gold);color:var(--ink);
  border:2px solid var(--ink);box-shadow:var(--pop-sm);
  transform:rotate(-3deg);z-index:2;
}

.bp-face.front .bp-emoji{
  font-size:clamp(36px,4.2vw,62px);line-height:1;
  margin-top:4px;
  filter:drop-shadow(0 4px 0 rgba(43,33,96,.18));
}
.bp-face.front .bp-name-block{display:flex;flex-direction:column;gap:6px;align-items:center;}
.bp-face.front .bp-name{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:clamp(20px,2vw,30px);line-height:1;
}
.bp-face.front .bp-sub{
  font-family:"Alexandria",sans-serif;font-weight:500;
  font-size:clamp(12px,1.2vw,16px);opacity:.82;line-height:1.3;
}
.bp-face.front .bp-badge{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:clamp(10px,1vw,13px);letter-spacing:.14em;
  line-height:1.2;
  padding:6px 12px;border-radius:99px;border:2px solid var(--ink);
  background:rgba(255,255,255,.55);direction:ltr;
  display:inline-flex;align-items:center;gap:6px;
}
.bp-face[data-c="red"]    .bp-badge,
.bp-face[data-c="violet"] .bp-badge,
.bp-face[data-c="blue"]   .bp-badge{ background:rgba(43,33,96,.28); color:#fff; border-color:rgba(255,255,255,.5); }
.bp-face.front .bp-flip-hint{
  display:none;
}

/* ─── back face ─── */
.bp-face.back{
  transform:rotateY(180deg);
  justify-content:space-between;
  padding:clamp(16px,1.8vw,24px);
}
.bp-face.back .bp-back-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:8px;border-bottom:2px solid rgba(43,33,96,.28);
}
.bp-face[data-c="red"]    .bp-back-head,
.bp-face[data-c="violet"] .bp-back-head,
.bp-face[data-c="blue"]   .bp-back-head{ border-bottom-color:rgba(255,255,255,.4); }
.bp-face.back .bp-back-title{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(16px,1.7vw,21px);line-height:1;}
.bp-face.back .bp-back-meta{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:10px;letter-spacing:.14em;opacity:.7;direction:ltr;}
.bp-face.back .bp-format-note{
  font-family:"Alexandria",sans-serif;font-weight:700;
  font-size:clamp(10px,1vw,13px);line-height:1.5;
  padding:5px 2px 0;opacity:.85;
}
.bp-face.back .bp-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:clamp(4px,.6vh,8px);
  flex:1;overflow:hidden;
}
.bp-face.back .bp-list li{
  display:flex;align-items:center;gap:8px;
  font-family:"Alexandria",sans-serif;font-weight:500;
  font-size:clamp(12px,1.25vw,16px);line-height:1.2;
  padding:2px 0;
}
.bp-face.back .bp-list li.climax{font-weight:700;}
.bp-face.back .bp-list .bp-num{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:clamp(11px,1.05vw,13px);
  opacity:.6;min-width:22px;direction:ltr;
}
.bp-face.back .bp-list .bp-star{font-size:1.05em;line-height:1;}
.bp-face.back .bp-list .bp-gn{flex:1;}

.bp-face.back .bp-start{
  width:100%;
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;
  font-size:clamp(17px,1.9vw,24px);
  padding:.55em 1em;border:2px solid var(--ink);border-radius:16px;cursor:pointer;
  background:var(--ink);color:#fff;
  box-shadow:0 5px 0 rgba(43,33,96,.35);
  transition:transform .14s var(--bounce),box-shadow .14s var(--bounce);
  margin-top:8px;
}
.bp-face.back .bp-start:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(43,33,96,.4);}
.bp-face.back .bp-start:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(43,33,96,.35);}
/* on dark cards, flip start-btn polarity */
.bp-face[data-c="red"]    .bp-start,
.bp-face[data-c="violet"] .bp-start,
.bp-face[data-c="blue"]   .bp-start{ background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 5px 0 rgba(255,255,255,.3); }
.bp-face[data-c="red"]    .bp-start:hover,
.bp-face[data-c="violet"] .bp-start:hover,
.bp-face[data-c="blue"]   .bp-start:hover{ box-shadow:0 7px 0 rgba(255,255,255,.4); }

/* ─── custom banner ─── */
.bp-custom{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(12px,1.6vh,18px) clamp(18px,2.4vw,30px);
  background:#fff;
  border:3px dashed var(--ink);
  border-radius:var(--r);cursor:pointer;
  font-family:inherit;color:var(--ink);text-align:start;
  transition:transform .14s var(--bounce),box-shadow .14s var(--bounce),background .14s;
  flex-wrap:wrap;
}
.bp-custom:hover{transform:translateY(-2px);box-shadow:var(--pop-sm);background:var(--paper-3);}
.bp-custom:active{transform:translateY(2px);}
.bp-custom-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:200px;}
.bp-custom-title{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(18px,2vw,28px);line-height:1;}
.bp-custom-sub{font-family:"Alexandria",sans-serif;font-weight:500;font-size:clamp(13px,1.4vw,17px);opacity:.75;}
.bp-custom-cta{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(14px,1.5vw,18px);
  padding:.55em 1.3em;background:var(--ink);color:#fff;
  border-radius:99px;white-space:nowrap;flex-shrink:0;
  box-shadow:var(--pop-sm);
}

/* ─── lobby strip ─── */
.bp-lobby{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:14px clamp(20px,3.6vw,56px);
  background:linear-gradient(0deg,var(--paper-2) 0%,rgba(255,233,188,0) 100%);
  z-index:2;
}
.bp-lobby-label{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:11px;letter-spacing:.16em;
  color:rgba(43,33,96,.55);direction:ltr;text-transform:uppercase;
  margin-inline-end:4px;
}
.bp-pchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px 6px 6px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:99px;box-shadow:var(--pop-sm);
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:14px;
  color:var(--ink);
  animation:bp-pop .42s var(--bounce);
}
@keyframes bp-pop{from{transform:scale(0) rotate(-12deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
.bp-pdot{
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--ink);
  font-size:10px;font-weight:800;color:var(--ink);
  background:var(--mustard);flex-shrink:0;
}
.bp-pchip.more{ background:var(--paper-2); font-family:"Baloo Bhaijaan 2",sans-serif; font-weight:800; font-size:13px; direction:ltr; }
.bp-pchip.empty{
  font-family:"Alexandria",sans-serif;font-weight:500;font-size:13px;
  color:rgba(43,33,96,.6);background:transparent;border:2px dashed rgba(43,33,96,.35);box-shadow:none;
}

@media (max-height:720px){
  .bp-root{padding-top:12px;padding-bottom:58px;gap:10px;}
  .bp-card{height:142px;}
  .bp-face.front .bp-emoji{font-size:clamp(30px,4vw,48px);}
  .bp-custom-sub{display:none;}
}

@media (max-width:900px){
  .bp-head{flex-wrap:wrap;}
}