/* alweekend — Custom Night Builder (ركّب ليلتك بنفسك)
   The V1 escape-hatch for hosts who want full control over the 200-game library.
   SHELL CHROME ONLY — never restyles a game. All copy is Saudi/Khaleeji.
   Sunny funfair arcade palette, matches tokens.css + picker.js spirit.
   Scoped to .cb-* so it can't bleed into a running game. */

/* ── shell root + top bar ── */
.cb-root{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink);}
.cb-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2vh 4vw 1.4vh;border-bottom:3px solid var(--ink);flex:0 0 auto;}
.cb-back{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(14px,1.4vw,18px);padding:.5em 1em;border:3px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:.4em;box-shadow:var(--pop-sm);transition:transform .12s var(--bounce),background .12s;}
.cb-back:hover{transform:translateX(3px);background:var(--paper-3);}
.cb-back:active{transform:scale(.96);}
.cb-title{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,34px);line-height:1;text-align:center;color:var(--ink);}
.cb-title .cb-kicker{display:block;font-family:"Titan One",sans-serif;font-weight:400;font-size:clamp(9px,.95vw,12px);letter-spacing:.18em;color:var(--violet);text-transform:uppercase;direction:ltr;margin-bottom:.3em;}
.cb-queue-toggle{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(13px,1.3vw,16px);padding:.5em .9em;border:3px solid var(--ink);border-radius:99px;background:var(--mustard);color:var(--ink);cursor:pointer;display:none;align-items:center;gap:.4em;box-shadow:var(--pop-sm);}

/* ── main grid: 70/30 ── */
.cb-main{flex:1;display:grid;grid-template-columns:1fr clamp(280px,28vw,380px);min-height:0;overflow:hidden;}
.cb-left{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:2.4vh 3vw 4vh;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cb-left::-webkit-scrollbar{display:none;}
.cb-right{display:flex;flex-direction:column;border-inline-start:3px solid var(--ink);background:var(--paper-2);overflow:hidden;}

/* ── random hero card ── */
.cb-random{position:relative;border-radius:var(--r-lg);padding:2.4vh 3vw;background:var(--mustard);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--pop);overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2vw;flex-wrap:wrap;margin-bottom:2.2vh;min-height:96px;}
.cb-random::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(43,33,96,.4) 1px,transparent 1px);background-size:6px 6px;}
.cb-random-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:.6vh;}
.cb-random-title{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(24px,2.7vw,38px);line-height:1.22;display:flex;align-items:center;gap:.4em;padding-block:.08em;}
.cb-random-sub{font-family:"Alexandria",sans-serif;font-weight:500;font-size:clamp(13px,1.4vw,18px);opacity:.82;max-width:42ch;}
.cb-random-btn{position:relative;z-index:1;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(16px,1.8vw,22px);padding:.7em 1.6em;border:3px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--mustard);cursor:pointer;box-shadow:0 6px 0 rgba(43,33,96,.42);transition:transform .12s var(--bounce),box-shadow .12s,filter .12s;display:flex;align-items:center;gap:.5em;}
.cb-random-btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 rgba(43,33,96,.42);filter:brightness(1.12);}
.cb-random-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(43,33,96,.42);}

/* ── search + pill filter bar ── */
.cb-filter-bar{display:flex;flex-direction:column;gap:1.4vh;margin-bottom:2vh;}
.cb-search{display:flex;align-items:center;gap:.7em;padding:.7em 1.1em;border-radius:var(--r);background:#fff;border:3px solid var(--ink);box-shadow:var(--pop-sm);transition:border-color .15s;}
.cb-search:focus-within{border-color:var(--violet);}
.cb-search-ico{font-size:clamp(16px,1.6vw,20px);line-height:1;opacity:.7;}
.cb-search-in{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:clamp(15px,1.6vw,20px);text-align:right;}
.cb-search-in::placeholder{color:rgba(43,33,96,.4);font-weight:400;}
.cb-search-clear{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(14px,1.4vw,18px);width:1.7em;height:1.7em;border-radius:50%;border:2px solid var(--ink);background:transparent;color:rgba(43,33,96,.55);cursor:pointer;display:none;place-items:center;flex:0 0 auto;transition:all .12s;}
.cb-search-clear.on{display:grid;}
.cb-search-clear:hover{border-color:var(--red);color:var(--red);}

.cb-pills{display:flex;gap:8px;flex-wrap:wrap;}
.cb-pill{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:clamp(13px,1.35vw,17px);padding:.38em 1.05em;border-radius:999px;border:3px solid var(--ink);background:#fff;color:rgba(43,33,96,.7);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.4em;box-shadow:var(--pop-sm);}
.cb-pill:hover{color:var(--ink);transform:translateY(-1px);}
.cb-pill.on{background:var(--mustard);border-color:var(--ink);color:var(--ink);}
.cb-pill-count{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.8em;letter-spacing:.06em;opacity:.65;direction:ltr;}

/* ── grid + cards ── */
.cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,14vw,180px),1fr));gap:1.2vw;}
.cb-grid-empty{padding:4vh 2vw;text-align:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:clamp(15px,1.6vw,20px);color:rgba(43,33,96,.5);grid-column:1 / -1;}

.cb-card{position:relative;cursor:pointer;border:none;padding:0;background:none;text-align:right;font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .14s var(--bounce),filter .14s ease;}
.cb-card:hover{transform:translateY(-4px);}
.cb-card:active{transform:scale(.97);}
.cb-thumb{position:relative;width:100%;aspect-ratio:5/6;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1vw,14px);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--pop-sm);transition:box-shadow .14s,outline .14s;outline:0px solid transparent;outline-offset:-3px;}
.cb-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:radial-gradient(rgba(43,33,96,.5) 1px,transparent 1px);background-size:4px 4px;}
.cb-card:hover .cb-thumb{box-shadow:0 7px 0 var(--ink-2);}
.cb-card.on .cb-thumb{outline:3px solid var(--mustard);box-shadow:var(--pop-sm);}
.cb-emoji{font-size:clamp(22px,2.4vw,32px);line-height:1;filter:drop-shadow(2px 2px 0 rgba(43,33,96,.18));position:relative;z-index:1;}
.cb-gname{position:relative;z-index:1;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;line-height:1.04;font-size:clamp(15px,1.55vw,21px);text-shadow:2px 2px 0 rgba(255,255,255,.35);}
.cb-vibe{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.3em;font-family:"Alexandria",sans-serif;font-weight:700;font-size:clamp(10px,1.05vw,13px);padding:.22em .5em;border-radius:8px;background:rgba(255,255,255,.5);border:2px solid var(--ink);color:var(--ink);align-self:flex-start;margin-top:.4em;}
.cb-add{position:relative;z-index:1;margin-top:.6em;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(11px,1.1vw,14px);padding:.36em .8em;border-radius:10px;background:var(--ink);color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;gap:.3em;transition:background .14s;}
.cb-card.on .cb-add{background:var(--mustard);color:var(--ink);outline:2px solid var(--ink);}

/* ── right pane queue ── */
.cb-q-head{padding:2.2vh 1.6vw 1.2vh;border-bottom:3px solid var(--ink);display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex:0 0 auto;}
.cb-q-title{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(20px,2.2vw,28px);line-height:1;color:var(--ink);}
.cb-q-count{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(11px,1.1vw,14px);letter-spacing:.1em;color:var(--violet);direction:ltr;}
.cb-q-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.4vh 1.6vw;display:flex;flex-direction:column;gap:.8vh;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cb-q-list::-webkit-scrollbar{display:none;}
.cb-q-empty{padding:3vh 1vw;text-align:center;font-family:"Alexandria",sans-serif;font-size:clamp(13px,1.3vw,16px);color:rgba(43,33,96,.5);line-height:1.5;}
.cb-q-empty .cb-q-empty-big{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(36px,4vw,52px);line-height:1;margin-bottom:.6vh;color:rgba(43,33,96,.25);}

.cb-q-item{display:flex;align-items:center;gap:.7em;padding:.7em .9em;border-radius:14px;background:#fff;border:3px solid var(--ink);box-shadow:var(--pop-sm);font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;font-size:clamp(13px,1.3vw,16px);color:var(--ink);cursor:grab;transition:background .14s,border-color .14s,transform .12s;}
.cb-q-item:hover{background:var(--paper-3);}
.cb-q-item.dragging{opacity:.4;cursor:grabbing;}
.cb-q-item.over{border-color:var(--mustard);background:var(--paper-2);}
.cb-q-num{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.9em;color:var(--violet);direction:ltr;min-width:1.4em;text-align:start;}
.cb-q-name{flex:1;line-height:1.2;overflow:hidden;text-overflow:ellipsis;}
.cb-q-rm{flex:0 0 auto;width:1.6em;height:1.6em;border-radius:50%;border:2px solid var(--ink);background:transparent;color:rgba(43,33,96,.55);font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.8em;cursor:pointer;display:grid;place-items:center;transition:all .12s;}
.cb-q-rm:hover{border-color:var(--red);color:var(--red);transform:scale(1.1);}

.cb-q-foot{padding:1.6vh 1.6vw 2.2vh;border-top:3px solid var(--ink);flex:0 0 auto;}
.cb-go{width:100%;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(18px,2vw,26px);padding:.7em 1em;border:3px solid var(--ink);border-radius:var(--r);background:var(--red);color:#fff;cursor:pointer;box-shadow:var(--pop);transition:transform .12s var(--bounce),box-shadow .12s,filter .12s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:.5em;}
.cb-go:not(:disabled):hover{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 9px 0 var(--ink-2);filter:saturate(1.1);}
.cb-go:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink-2);}
.cb-go:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 3px 0 var(--ink-2);}
.cb-go-hint{margin-top:.7vh;font-family:"Alexandria",sans-serif;font-size:clamp(11px,1.1vw,14px);color:rgba(43,33,96,.5);text-align:center;}

/* ── mobile: stack + drawer ── */
@media (max-width:760px){
  .cb-main{grid-template-columns:1fr;}
  .cb-queue-toggle{display:flex;}
  .cb-right{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:50;transform:translateX(100%);transition:transform .3s var(--bounce);box-shadow:-12px 0 40px rgba(43,33,96,.3);background:var(--paper);}
  .cb-root.q-open .cb-right{transform:translateX(0);}
  .cb-root.q-open::before{content:"";position:absolute;inset:0;background:rgba(43,33,96,.4);z-index:49;}
  .cb-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
}