/* TwentyDZ design system (2026-10-03, Claude). Three looks the pupil switches between with one button
   (ui/look.js sets html[data-look]):
     clean  · نظيف ودافئ   light, white soft cards, one warm accent (Zero's orange), charcoal text
     night  · ليلة النجوم  dark night sky, glass cards, glowing orange gradient, game feel
     bold   · ألوان صاخبة  cream ground, saturated colour blocks, thick black outlines, hard shadows
   Tajawal is the text face everywhere; each look has its own heading face. Every component reads only the
   tokens below, so a page written once looks radically different in each look. */

/* the tokens of the three looks live in ui/tokens.css, loaded before this file */

/* ---------- base ---------- */
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font);font-size:17px;line-height:1.75;overflow-x:clip;
  background:var(--bg-img),var(--bg);background-color:var(--bg);background-attachment:fixed;transition:background-color .4s,color .4s}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:10px}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--head);font-weight:var(--head-w);line-height:1.25}
.num{font-family:var(--head);font-weight:var(--head-w);direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)}
.accent-text{color:var(--accent-text)}
html[data-look="night"] .grad{background:linear-gradient(90deg,#FFB36B,#FF6A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
html:not([data-look="night"]) .grad{color:var(--accent)}
html[data-look="bold"] .grad{color:var(--text);background:var(--accent-2);padding:0 .2em;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- surfaces ---------- */
.card{position:relative;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:18px;color:var(--text);text-decoration:none;display:block;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hi)}
html[data-look="bold"] a.card:hover{transform:translate(-2px,-2px)}
.card h3{font-size:19px}
.card p{margin:4px 0 0;color:var(--muted);font-size:15px;line-height:1.7}
.hero{position:relative;overflow:hidden;background:var(--hero);color:var(--hero-ink);border:var(--bw) solid var(--border);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:20px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-sm);border:var(--btn-bw) solid var(--border);
  background:var(--btn);color:var(--btn-ink);font-weight:800;font-size:16px;text-decoration:none;box-shadow:var(--btn-shadow);transition:transform .15s,box-shadow .15s}
.btn:active{transform:var(--press);box-shadow:none}
.btn.alt{background:var(--surface);color:var(--text);border:var(--bw) solid var(--border-2);box-shadow:var(--shadow)}
html[data-look="clean"] .btn.alt{border:2px solid var(--border-2);box-shadow:none}
.btn.accent{background:var(--accent-fill);color:var(--accent-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{color:var(--accent-text);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- small parts ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--accent-2);color:var(--accent-text)}
html[data-look="bold"] .tag{border:3px solid #111;border-radius:12px;background:var(--c,#2EC5FF);rotate:-2deg}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;border-radius:999px;border:var(--bw) solid var(--border-2);background:var(--surface);font-size:14px;font-weight:700;text-decoration:none;color:var(--text)}
html[data-look="clean"] .chip{border:2px solid var(--border-2)}
html[data-look="bold"] .chip{box-shadow:3px 3px 0 #111}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:transparent}
html[data-look="bold"] .chip[aria-pressed="true"]{border-color:#111}
.meter{height:8px;border-radius:8px;background:var(--track);overflow:hidden}
html[data-look="bold"] .meter{height:12px;border:2px solid #111}
.meter i{display:block;height:100%;border-radius:8px;background:var(--c,var(--accent-fill))}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
html[data-look="bold"] .av{border:3px solid #111}

/* a subject tile: icon card (clean), glowing gradient (night), solid colour block (bold) */
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:118px;padding:16px;border-radius:var(--r);text-decoration:none;color:var(--tile-ink);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.tile b{font-size:17px;font-weight:800;line-height:1.35}
.tile small{font-size:13px;font-weight:600;opacity:.85}
.tile .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:var(--head);font-weight:var(--head-w);font-size:20px}
.tile.soon{opacity:.5;filter:saturate(.3)}
.tile .badge{position:absolute;top:12px;inset-inline-end:12px;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px}
html[data-look="clean"] .tile{background:#fff;box-shadow:var(--shadow)}
html[data-look="clean"] .tile .ic{background:var(--c);color:#fff}
html[data-look="clean"] .tile .badge{background:var(--ok-bg);color:var(--ok-ink)}
html[data-look="clean"] .tile.soon .badge{background:var(--surface-2);color:var(--muted)}
html[data-look="night"] .tile{background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 35%,#0B0D1F));box-shadow:0 14px 30px -16px var(--c)}
html[data-look="night"] .tile .ic{background:rgba(255,255,255,.18)}
html[data-look="night"] .tile .badge{background:rgba(0,0,0,.28);color:#fff}
html[data-look="bold"] .tile{background:var(--c);border:3px solid #111;box-shadow:4px 4px 0 #111}
html[data-look="bold"] .tile .ic{background:#fff;border:3px solid #111}
html[data-look="bold"] .tile .badge{background:#fff;border:2px solid #111;color:#111}
a.tile:hover{transform:translateY(-4px)}
html[data-look="bold"] a.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}

/* entrance */
.rise>*{animation:tdz-rise .55s cubic-bezier(.22,1,.36,1) both}
.rise>*:nth-child(2){animation-delay:.05s}.rise>*:nth-child(3){animation-delay:.1s}.rise>*:nth-child(4){animation-delay:.15s}.rise>*:nth-child(n+5){animation-delay:.2s}
@keyframes tdz-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes tdz-bob{50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes tdz-shake{20%,60%{translate:-6px 0}40%,80%{translate:6px 0}}
.shake{animation:tdz-shake .32s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}