/* alweekend — Night Shell tokens. ليلة الويكند 🎉
   SHELL ONLY. Never restyle a game with these — games keep their own look.

   IDENTITY: "Saudi funfair arcade" — candy-bright Mario-Party energy on a warm
   sunny stage. Chunky toy shapes, deep-indigo ink outlines, coin-gold sparkle,
   bouncy motion. Light, loud, pressable. Nothing dark, nothing paper-zine.

   Variable NAMES kept compatible with the old tokens.css so existing markup
   re-skins automatically; values + components are all new. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;700;800&family=Marhey:wght@500;700&family=Alexandria:wght@400;500;700&family=Titan+One&display=swap');

:root{
  /* stage */
  --paper:#FFF4DA;        /* sunny cream — the stage floor */
  --paper-2:#FFE9BC;      /* deeper sunshine */
  --ink:#2B2160;          /* deep indigo — outlines & text (never pure black) */
  --ink-2:#201849;

  /* candy set (saturated, TV-legible from the couch) */
  --red:#FF3D51;          /* funfair red — the START button */
  --blue:#2FA8FF;         /* sky arcade */
  --mustard:#FFC531;      /* coin gold */
  --mint:#2BCFA4;         /* turquoise pop */
  --coral:#FF7A45;        /* tangerine */
  --violet:#8A5CFF;       /* grape */
  --pink:#FF6FA5;         /* bubble-gum */
  --gold:#FFB020;         /* trophy */
  --lime:#8ED957;         /* 1-up green */

  --line:rgba(43,33,96,.16);
  --line-2:rgba(43,33,96,.08);
  --bg:var(--paper); --fg:var(--ink);

  /* toy shape language */
  --r:22px;               /* chunky radius */
  --r-lg:34px;
  --border:3px;           /* ink outline weight */
  --pop:0 6px 0 var(--ink-2);          /* pressable "toy" drop */
  --pop-sm:0 4px 0 var(--ink-2);
  --bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:var(--bg);color:var(--fg);font-family:"Alexandria","Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.display{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;line-height:1.02;}
.hype{font-family:"Marhey",sans-serif;font-weight:700;line-height:1.05;}   /* bouncy hype words */
.mono{font-family:"Baloo Bhaijaan 2",monospace;font-weight:800;letter-spacing:.10em;direction:ltr;} /* room codes: chunky, not techy */
.latin{font-family:"Titan One",sans-serif;letter-spacing:.02em;direction:ltr;}

/* funfair sky — floating candy blobs + confetti dots, replaces the riso grain */
.grain::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(46vmax 46vmax at 8% -10%, rgba(255,197,49,.35), transparent 60%),
    radial-gradient(40vmax 40vmax at 105% 12%, rgba(47,168,255,.28), transparent 62%),
    radial-gradient(36vmax 36vmax at -6% 96%, rgba(255,111,165,.26), transparent 60%),
    radial-gradient(42vmax 42vmax at 96% 104%, rgba(43,207,164,.30), transparent 62%);}
.grain::after{content:"";position:fixed;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;}
::selection{background:var(--mustard);color:var(--ink);}

/* screens (TV) */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4vh 4vw;opacity:0;pointer-events:none;transform:scale(.985);transition:opacity .45s ease,transform .45s var(--bounce);z-index:1;}
.screen.active{opacity:1;pointer-events:all;transform:scale(1);}

/* primary button — a pressable toy */
.btn{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:clamp(18px,2.2vw,26px);padding:.6em 1.5em;
  border:var(--border) solid var(--ink);border-radius:var(--r);background:var(--red);color:#fff;cursor:pointer;
  box-shadow:var(--pop);transition:transform .14s var(--bounce),box-shadow .14s,filter .14s;}
.btn:hover{transform:translateY(-3px) rotate(-.5deg) scale(1.02);filter:saturate(1.12);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink-2);}
.btn.ghost{background:#fff;color:var(--ink);}
.btn.mustard{background:var(--mustard);color:var(--ink);}
.btn.blue{background:var(--blue);}
.btn.mint{background:var(--mint);color:var(--ink);}

.chip{font-family:"Alexandria",sans-serif;font-size:12px;font-weight:700;letter-spacing:.10em;color:rgba(43,33,96,.55);
  text-transform:uppercase;direction:ltr;}

/* card — chunky sticker */
.card{background:#fff;border:var(--border) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--pop);}

/* player avatar bubble (shared shape) */
.p-circ{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:var(--border) solid var(--ink);
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:18px;color:var(--ink);box-shadow:var(--pop-sm);}

/* helpers */
@keyframes wk-bounce-in{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes wk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wk-wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes wk-pop-glow{0%,100%{box-shadow:var(--pop),0 0 0 0 rgba(255,61,81,.45)}50%{box-shadow:var(--pop),0 0 0 18px rgba(255,61,81,0)}}
.wk-bounce-in{animation:wk-bounce-in .5s var(--bounce) both;}
.wk-float{animation:wk-float 3.2s ease-in-out infinite;}
.wk-wiggle{animation:wk-wiggle 1.6s ease-in-out infinite;}

/* starburst badge (winner / climax marker) */
.starburst{clip-path:polygon(50% 0%,61% 12%,76% 6%,79% 22%,95% 24%,88% 38%,100% 50%,88% 62%,95% 76%,79% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,21% 78%,5% 76%,12% 62%,0% 50%,12% 38%,5% 24%,21% 22%,24% 6%,39% 12%);
  background:var(--mustard);display:grid;place-items:center;}

/* the 8 player colors live in state.js NightState.COLORS — new candy set:
   #FF3D51 #2FA8FF #FFC531 #2BCFA4 #FF7A45 #8A5CFF #FF6FA5 #8ED957 */