/* UI v2 (13 Nov 2026): the reference look. Soft cards, thin light borders, soft shadows, lime pill actions, lilac day / deep-violet night.
   Loaded after style.css and active only under <html data-ui="2">, so a page or game that has not moved over keeps its current look.
   No backdrop-filter (weak TVs): the "glass" is a static gradient. Decision by Mohamed, 13 Nov 2026, overriding the thick-ink rule. */
html[data-ui="2"]{
 --ink:#1B1440;                       /* text-dark and the line colour of what is still inked (dice faces, avatars) */
 --card:linear-gradient(180deg,#FFFFFF,#F5F1FF);--card-bd:rgba(118,70,255,.16);--card-sh:0 12px 32px rgba(70,40,160,.14),0 2px 0 rgba(255,255,255,.9) inset;
 --tx:#1F1457;--mut:#6B5FA8;--soft:#ECE6FF;--soft2:#F1ECFF;--dim:#E6DEFF;--dim-tx:#8B80BD;--dis-bg:#E4DEF7;--dis-tx:#9A90C4;
 --pill:#E6DDFF;--pill-tx:#4B2FB8;
 --act:linear-gradient(180deg,#E4FF7A,#CCFF43 55%,#BDEF25);--act-sh:0 4px 0 rgba(21,18,46,.32),inset 0 -4px 0 rgba(0,0,0,.10),inset 0 2px 0 rgba(255,255,255,.55);
 --page:radial-gradient(70% 60% at 100% 0%,#FFFFFF90,transparent 70%),radial-gradient(60% 50% at 0% 100%,#D9C9FF,transparent 70%),linear-gradient(160deg,#F3EFFF,#E9E1FF 55%,#DFD3FF);
 --bar:rgba(255,255,255,.7);
}
html[data-ui="2"][data-look=night]{
 --ink:#0E0A26;
 --card:linear-gradient(180deg,#3B2E82,#2F2570);--card-bd:rgba(255,255,255,.13);--card-sh:0 14px 34px rgba(8,4,32,.45),0 1px 0 rgba(255,255,255,.12) inset;
 --tx:#FFFFFF;--mut:#CFC6F5;--soft:#43368F;--soft2:#43368F;--dim:#43368F;--dim-tx:#A79EDB;--dis-bg:#3B2F82;--dis-tx:#8F85C9;
 --pill:#43368F;--pill-tx:#EDE8FF;
 --act-sh:0 4px 0 rgba(0,0,0,.35),inset 0 -4px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.5);
 --page:radial-gradient(60% 50% at 100% 0%,#4B3AA866,transparent 70%),radial-gradient(60% 55% at 0% 100%,#3A2A8A66,transparent 70%),linear-gradient(160deg,#2B2168,#211A55 55%,#181246);
 --bar:rgba(44,34,110,.72);
}
html[data-ui="2"] body{color:var(--tx)}
html[data-ui="2"] body::before{background:var(--bg,var(--page))}
html[data-ui="2"][data-theme]:not([data-theme=funky]) body::before{background:var(--bg)}
html[data-ui="2"] body::after{display:none}
html[data-ui="2"] .card{background:var(--card);color:var(--tx);border:1.5px solid var(--card-bd);border-radius:28px;box-shadow:var(--card-sh)}
html[data-ui="2"] .btn{color:#1B1440;background:var(--act);border:0;border-radius:999px;padding:13px 26px;box-shadow:var(--act-sh)}
html[data-ui="2"] .btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 rgba(21,18,46,.32),inset 0 -2px 0 rgba(0,0,0,.1)}
html[data-ui="2"] .btn:disabled{background:var(--dis-bg);color:var(--dis-tx);border:0;box-shadow:none}
html[data-ui="2"] .btn.v{background:linear-gradient(180deg,#8A5CFF,#6A3BF2);color:#fff;box-shadow:0 4px 0 rgba(21,18,46,.4),inset 0 -4px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.3)}
html[data-ui="2"] .btn.soft{background:var(--pill);color:var(--pill-tx);box-shadow:inset 0 0 0 1.5px var(--card-bd)}
html[data-ui="2"] .tag{border:0;background:var(--pill);color:var(--pill-tx);font-weight:700}
html[data-ui="2"] .chip{border:1.5px solid var(--card-bd);background:var(--card);color:var(--tx);box-shadow:none;font-weight:700}
html[data-ui="2"] .chip.on{background:var(--act);color:#1B1440;border-color:transparent;box-shadow:var(--act-sh),0 0 0 3px #fff,0 0 12px 4px rgba(255,255,255,.22)}
html[data-ui="2"] input{background:var(--soft2)!important;color:var(--tx)!important;border:1.5px solid var(--card-bd)!important;box-shadow:none!important}
html[data-ui="2"] input:focus{border-color:#8A5CFF!important;box-shadow:0 0 0 4px rgba(138,92,255,.25)!important}
/* the TV remote / keyboard focus: a clear white ring + a soft lime glow (glow-off = the ring only) */
html[data-ui="2"] :is(.g,.chip,.btn,.links a,.x,#homeb,#spk,#lookb):focus-visible{outline:4px solid #fff;outline-offset:4px;box-shadow:0 0 0 8px #8A5CFF,0 0 16px 8px rgba(138,92,255,.3)}
/* ---- home */
html[data-ui="2"] nav{background:var(--bar);border:1.5px solid var(--card-bd);border-radius:26px;box-shadow:var(--card-sh)}
html[data-ui="2"] nav .logo{text-shadow:none}
html[data-ui="2"] .links a{color:var(--tx);border:0;font-weight:700}
html[data-ui="2"] .links a.on{background:var(--act);color:#1B1440;box-shadow:var(--act-sh)}
html[data-ui="2"] nav .btn{box-shadow:var(--act-sh)}
html[data-ui="2"] nav .btn.v{box-shadow:0 4px 0 rgba(21,18,46,.4),inset 0 2px 0 rgba(255,255,255,.3)}
html[data-ui="2"] h1{color:var(--tx);text-shadow:none;position:relative}
html[data-ui="2"] h1 em{color:var(--tx);display:inline-block;line-height:.95;background:radial-gradient(ellipse 50% 100% at 50% 50%,#CCFF43 0 62%,transparent 100%) 0 92%/100% 30% no-repeat;padding:0 .1em}
html[data-ui="2"] .sub{color:var(--mut);text-shadow:none}
html[data-ui="2"] h2{color:var(--tx);text-shadow:none}
html[data-ui="2"] :is(#over,#results,#sover,.jcard,.scard) h2{color:var(--ink)}   /* result cards stay cream in night, so their title is ink, not the page text colour */
html[data-ui="2"] .hero .tag{background:var(--pill)}
html[data-ui="2"] .art svg{filter:drop-shadow(0 22px 26px rgba(70,40,160,.28))}
html[data-ui="2"] .chips{margin:0 0 48px}
html[data-ui="2"] #games h2{margin-bottom:22px}
html[data-ui="2"] .games{row-gap:34px;padding:16px 14px 22px}
html[data-ui="2"] .g{border:0;border-radius:26px;box-shadow:0 12px 26px rgba(70,40,160,.22),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(0,0,0,.08);color:#1B1440;overflow:hidden}
html[data-ui="2"] .g::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 55% at 50% 0%,rgba(255,255,255,.5),transparent 70%);pointer-events:none}
html[data-ui="2"] .g .ic{filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}
/* the button on a coloured game card is ink + cream: lime clashed with lime/yellow/pink cards (13 Nov 2026) */
html[data-ui="2"] .g .btn{background:#1B1440;color:#FFFDF7;box-shadow:0 4px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.14);position:relative}
html[data-ui="2"] .g .cat{background:rgba(255,255,255,.85);color:#1B1440}
html[data-ui="2"] .g .tag{background:#FF4F93;color:#fff}
html[data-ui="2"] .n{background:var(--act);color:#1B1440;border:0;box-shadow:var(--act-sh)}
html[data-ui="2"] #upd{border:0;border-radius:18px;box-shadow:var(--card-sh)}
html[data-ui="2"] dialog{border:1.5px solid var(--card-bd);border-radius:30px;background:var(--card);box-shadow:0 24px 60px rgba(20,10,60,.45)}
html[data-ui="2"] dialog::backdrop{background:rgba(20,12,60,.72)}
html[data-ui="2"] #qr{border:0;border-radius:20px;box-shadow:0 8px 22px rgba(70,40,160,.2)}
html[data-ui="2"] #detail{background:rgba(20,12,60,.72)}
html[data-ui="2"] #detail .x,html[data-ui="2"] #lookb,html[data-ui="2"] #homeb,html[data-ui="2"] #spk{border:1.5px solid var(--card-bd);background:var(--card);box-shadow:var(--card-sh);color:var(--tx)}
html[data-ui="2"] footer{color:var(--mut)}

/* cards: icon, name and text centred in their own box; the name box keeps the same height on every card so rows line up */
html[data-ui="2"] .g{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
html[data-ui="2"] .g .ic{min-height:1.15em;display:flex;align-items:center;justify-content:center}
html[data-ui="2"] .g h3{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:1.9em;margin:4px 0 0;line-height:1.15}
html[data-ui="2"] .g p{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;flex:1 1 auto}
html[data-ui="2"] .chip,html[data-ui="2"] .tag,html[data-ui="2"] .links a,html[data-ui="2"] .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
html[data-ui="2"] .g .btn{display:inline-flex}
html[data-ui="2"] .s h3,html[data-ui="2"] .s p{text-align:center}

/* "zoom out" pass (13 Nov 2026): smaller type, more air between hero blocks and between game cards. TV-first. */
html[data-ui="2"] h1{font-size:clamp(48px,6.8vw,120px)}
html[data-ui="2"] .sub{font-size:clamp(14px,1.3vw,20px);margin:clamp(14px,2.6vh,28px) 0 clamp(18px,3.4vh,38px);max-width:500px}
html[data-ui="2"] .cta{gap:22px}
html[data-ui="2"] .cta .btn{font-size:clamp(19px,1.9vw,28px);padding:clamp(7px,1.3vh,12px) clamp(20px,2.2vw,32px)}
html[data-ui="2"] .hero{margin-top:clamp(22px,5vh,56px);gap:40px}
html[data-ui="2"] .hero .art{max-width:min(480px,30vw)}
html[data-ui="2"] section{margin-top:clamp(44px,9vh,110px)}
html[data-ui="2"] h2{font-size:clamp(26px,2.8vw,42px);margin-bottom:clamp(16px,3vh,32px)}
html[data-ui="2"] .chips{gap:16px}
html[data-ui="2"] .chip{font-size:clamp(16px,1.55vw,21px);padding:3px 20px}
html[data-ui="2"] .games{gap:clamp(12px,1.6vw,24px)}
html[data-ui="2"] .g{padding:clamp(12px,1.9vh,20px) clamp(12px,1.3vw,22px) clamp(12px,1.8vh,20px);aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center}
html[data-ui="2"] .g .ic{font-size:clamp(38px,4vw,66px)}
html[data-ui="2"] .g h3{font-size:clamp(19px,1.9vw,28px);margin-top:10px}
html[data-ui="2"] .g p{font-size:clamp(12px,1.05vw,16px);margin-bottom:clamp(8px,1.5vh,16px);min-height:0}
html[data-ui="2"] .g .btn{font-size:clamp(14px,1.3vw,19px)}
html[data-ui="2"] .steps{gap:clamp(20px,2.6vw,40px)}
html[data-ui="2"] nav .logo-day,html[data-ui="2"] nav .logo-night{height:32px!important}
html[data-ui="2"] .links{font-size:clamp(15px,1.45vw,19px)}