/* Fonts are bundled (assets/fonts): the platform works with no internet, e.g. a TV on a local network. */
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/baloo-bhaijaan-2-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/baloo-bhaijaan-2-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/baloo-bhaijaan-2-arabic-800-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/baloo-bhaijaan-2-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/rubik-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/rubik-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/rubik-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/rubik-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rubik-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rubik-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--v:#7646FF;--l:#CCFF43;--o:#FF6B32;--p:#FF4F93;--c:#43D7FA;--ink:#15122E;--w:#FFFDF7;--y:#FFC928;--disp:'Baloo Bhaijaan 2','Rubik',system-ui,sans-serif;
 /* look tokens (sdk/mode.js): نهاري = the original brand; ليلي overrides them below. The ink (#15122E) for borders and hard shadows never changes. */
 --card:#FFFDF7;--tx:#15122E;--mut:#6b6590;--soft:#e9e3ff;--soft2:#F3EEFF;--dim:#ddd6f7;--dim-tx:#7d74a8;--dis-bg:#d8d2ee;--dis-tx:#8c85b0;
 /* action buttons: a light lime gradient (a flat lime on other themes: see html[data-theme] below) */
 --act:linear-gradient(180deg,#E4FF7A,#CCFF43 55%,#B8EC1F);
 /* highlight (decisions 13 Nov 2026): a chosen / focused / main-action element gets a solid ring plus a VERY faint soft glow (blur <= 14px, alpha <= .3). No big halo anywhere. The --g-* names stay so old rules keep working. */
 --g-sm:0 0 0 4px rgba(204,255,67,.95),0 0 12px 2px rgba(204,255,67,.28);--g-md:0 0 0 4px rgba(204,255,67,.95),0 0 12px 2px rgba(204,255,67,.28);--g-lg:0 0 0 5px rgba(204,255,67,.95),0 0 14px 3px rgba(204,255,67,.28);--g-cream:0 0 0 4px rgba(255,253,247,.95),0 0 12px 2px rgba(255,253,247,.22);--g-focus:0 0 14px 6px rgba(204,255,67,.22)}
html[data-theme]:not([data-theme=funky]){--act:var(--l)}
/* ليلي: the same shapes in deep violet. Only the default theme gets the night page; other themes keep their own background (neon is already dark). */
html[data-look=night]{--card:#3A2D80;--tx:#FFFDF7;--mut:#CFC6F5;--soft:#4A3B9A;--soft2:#4A3B9A;--dim:#4A3B9A;--dim-tx:#A79EDB;--dis-bg:#4A3B9A;--dis-tx:#A79EDB}
html[data-look=night]:not([data-theme]),html[data-look=night][data-theme=funky]{--bg:linear-gradient(160deg,#2E2370,#231B52 60%,#1B1440)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'Rubik',system-ui,Tahoma,sans-serif;background:var(--v)}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bg,
 radial-gradient(60% 50% at 0% 100%,#FF4F9370,transparent 70%),radial-gradient(50% 45% at 100% 0%,#CCFF4350,transparent 70%),
 linear-gradient(160deg,#8A5CFF,#6A3BF2 55%,#5B2FE0))}
body::after{content:"";position:fixed;right:0;bottom:0;width:min(34vw,260px);height:min(18vw,130px);z-index:-1;
 background:repeating-conic-gradient(var(--ink) 0 25%,var(--w) 0 50%) 0 0/26px 26px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.disp{font-family:var(--disp);font-weight:800}
.card{background:var(--card);color:var(--tx);border:4px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink)}
.btn{display:block;width:100%;font:800 24px/1.2 var(--disp);color:var(--ink);background:var(--l);background:var(--act);border:4px solid var(--ink);border-radius:999px;
 padding:12px 22px;box-shadow:0 7px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.btn:disabled{background:var(--dis-bg);color:var(--dis-tx);border-color:var(--dis-tx);box-shadow:0 7px 0 var(--dis-tx);cursor:default}
.tag{display:inline-block;font:800 15px var(--disp);background:var(--l);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:1px 12px}
.logo{display:flex;align-items:center;justify-content:center;gap:12px;font:800 44px/1 var(--disp);color:var(--w);
 text-shadow:3px 4px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.logo span{display:grid;grid-template:1fr 1fr/1fr 1fr;gap:3px;width:36px;height:36px;filter:drop-shadow(0 3px 0 var(--ink))}
.logo span i{border-radius:50%;border:2px solid var(--ink)}
.logo span i:nth-child(1){background:var(--p)}.logo span i:nth-child(2){background:var(--o)}
.logo span i:nth-child(3){background:var(--c)}.logo span i:nth-child(4){background:var(--l)}
.die{width:var(--s,110px);height:var(--s,110px);background:#fff;border:4px solid var(--ink);border-radius:26%;box-shadow:0 8px 0 var(--ink);
 display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:calc(var(--s,110px)*.15);gap:calc(var(--s,110px)*.04);margin:0 auto}
.die i{border-radius:50%}.die i.on{background:var(--ink)}
.die.roll{animation:roll .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes roll{0%{transform:rotate(0) scale(.5)}100%{transform:rotate(360deg) scale(1)}}
.die.empty::after{content:'?';grid-area:1/1/4/4;display:grid;place-items:center;font:800 calc(var(--s,110px)*.55) var(--disp);color:#c4bce6}

html[data-look=night] .logo-day{display:none!important}html[data-look=night] .logo-night{display:block!important}   /* the logo for a light background (day) / for a purple one (night): BRAND.md section 1 */
input::placeholder{color:var(--mut);opacity:.8}
/* the typing field gets a soft cream glow; the focused / chosen element a lime one (set per page below) */
input:focus{box-shadow:0 6px 0 var(--ink),var(--g-cream)}