/* ============ مبرّد المحترف — Design tokens ============ */
:root{
  --bg:#F0F9FF;
  --bg-2:#E4F3FB;
  --card:#FFFFFF;
  --fg:#0F172A;
  --fg-soft:#334155;
  --muted:#64748B;
  --primary:#334155;
  --secondary:#475569;
  --accent:#0284C7;
  --accent-2:#06B6D4;
  --accent-soft:#E0F2FE;
  --success:#059669;
  --warn:#D97706;
  --danger:#DC2626;
  --border:#DCEAF3;
  --border-strong:#B4D7EA;
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-pill:999px;
  --sh-clay:0 8px 0 -3px rgba(51,65,85,.10), 0 20px 40px -18px rgba(2,132,199,.35);
  --sh-soft:0 10px 30px -14px rgba(15,23,42,.25);
  --sh-in:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(51,65,85,.05);
  --t:.22s cubic-bezier(.4,0,.2,1);
  --font-body:'Almarai',system-ui,'Segoe UI',sans-serif;
  --font-display:'Lalezar','Almarai',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);color:var(--fg);background:var(--bg);
  line-height:1.75;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer}
svg{display:block}
[data-icon] svg{width:1.15em;height:1.15em;stroke-width:1.9}

/* ============ Background & layout ============ */
.bg-glow{position:fixed;inset:-30% -20% auto -20%;height:75vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 60% 0%,rgba(6,182,212,.28),transparent 60%),
             radial-gradient(ellipse at 15% 10%,rgba(2,132,199,.20),transparent 55%)}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(2,132,199,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(2,132,199,.07) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%)}
.app{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:1.5rem 1.25rem 3.5rem;min-height:60vh}
.wrap-narrow{max-width:760px;margin:0 auto}

/* ============ Typography ============ */
h1,h2,h3{line-height:1.25}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:0}
h1.display{font-size:clamp(2.1rem,6vw,3.6rem)}
h2.display{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.lead{color:var(--muted);font-size:clamp(.98rem,1.6vw,1.12rem);max-width:64ch}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;color:var(--accent);background:var(--accent-soft);
  padding:.3rem .8rem;border-radius:var(--r-pill);border:1px solid var(--border-strong)}
.hint{font-size:.85rem;color:var(--muted)}

/* ============ Navbar ============ */
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.6rem 1.25rem;background:rgba(240,249,255,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-brand{display:flex;align-items:center;gap:.55rem;font-weight:800}
.nav-logo-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;font-size:1.1rem;
  color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:var(--sh-soft)}
.nav-title{font-family:var(--font-display);font-size:1.25rem}
.nav-hud{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hud-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--fg-soft);
  background:#fff;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.25rem .7rem}
.hud-chip b{color:var(--accent)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;border:1.5px solid var(--border);
  background:#fff;color:var(--fg-soft);transition:transform var(--t),border-color var(--t),color var(--t)}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.icon-btn.off{color:var(--muted);opacity:.6}

/* ============ Clay surfaces ============ */
.clay{background:var(--card);border:2px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-clay),var(--sh-in);padding:1.4rem}
.clay-sm{background:var(--card);border:2px solid var(--border);border-radius:var(--r);
  box-shadow:0 6px 0 -3px rgba(51,65,85,.08),0 14px 30px -18px rgba(2,132,199,.35),var(--sh-in);padding:1.1rem}
.lift{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.lift:hover{transform:translateY(-4px);border-color:var(--border-strong);
  box-shadow:0 12px 0 -3px rgba(51,65,85,.10),0 28px 50px -20px rgba(2,132,199,.45),var(--sh-in)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.5rem;
  border-radius:var(--r-pill);font-size:.95rem;font-weight:800;border:2px solid transparent;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 8px 0 -3px rgba(2,132,199,.35),0 18px 34px -14px rgba(2,132,199,.6)}
.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 0 -3px rgba(2,132,199,.35),0 26px 46px -14px rgba(2,132,199,.65)}
.btn-dark{background:var(--primary);color:#fff;box-shadow:0 8px 0 -3px rgba(51,65,85,.3)}
.btn-dark:hover:not(:disabled){transform:translateY(-3px)}
.btn-ghost{background:#fff;border-color:var(--border-strong);color:var(--fg-soft)}
.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-lg{padding:.9rem 2rem;font-size:1.05rem}
.btn-sm{padding:.45rem 1rem;font-size:.85rem}
.btn-block{width:100%}

/* ============ Badges / chips ============ */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:700;
  padding:.22rem .65rem;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);border:1px solid var(--border-strong)}
.badge.green{background:#DCFCE7;color:#047857;border-color:#A7F3D0}
.badge.red{background:#FEE2E2;color:#B91C1C;border-color:#FECACA}
.badge.amber{background:#FEF3C7;color:#B45309;border-color:#FDE68A}
.badge.grey{background:#F1F5F9;color:var(--muted);border-color:#E2E8F0}

/* ============ Progress ============ */
.progress{height:14px;border-radius:var(--r-pill);background:var(--bg-2);border:2px solid var(--border);
  overflow:hidden;box-shadow:inset 0 2px 4px rgba(51,65,85,.08)}
.progress > i{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s cubic-bezier(.4,0,.2,1)}
.progress-meta{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:.4rem;font-weight:700}

/* ============ Level path ============ */
.path{display:grid;gap:.85rem}
.path-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:var(--r);
  background:#fff;border:2px solid var(--border);box-shadow:0 6px 0 -3px rgba(51,65,85,.08),var(--sh-in)}
.path-item .num{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:16px;
  font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2))}
.path-item.locked{opacity:.62;background:#FAFDFF}
.path-item.locked .num{background:#CBD5E1}
.path-item.done .num{background:linear-gradient(140deg,#059669,#34D399)}
.path-body{flex:1;min-width:0}
.path-body h3{font-size:1.03rem;font-weight:800;display:flex;align-items:center;gap:.4rem}
.path-body p{font-size:.86rem;color:var(--muted)}
.stars{display:inline-flex;gap:.15rem;color:#F59E0B}
.stars .off{color:#D8E3EC}

/* ============ Hero ============ */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:2.5rem 0 1.5rem}
.hero-copy > * + *{margin-top:1rem}
.hero h1{background:linear-gradient(120deg,#0F172A 30%,var(--accent) 85%);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1.15}
.hero-art{position:relative;display:grid;place-items:center;min-height:290px}
.hero-art .ring{position:absolute;border-radius:50%;border:2px dashed rgba(2,132,199,.35);animation:spin 26s linear infinite}
.hero-art .ring.r1{width:250px;height:250px}
.hero-art .ring.r2{width:180px;height:180px;animation-direction:reverse;animation-duration:19s;
  border-style:solid;border-color:rgba(6,182,212,.28)}
.hero-core{position:relative;display:grid;place-items:center;width:130px;height:130px;border-radius:38% 62% 55% 45%/48% 42% 58% 52%;
  background:linear-gradient(150deg,#fff,var(--accent-soft));box-shadow:var(--sh-clay),var(--sh-in);font-size:3rem;color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat b{font-family:var(--font-display);font-size:1.9rem;color:var(--accent);line-height:1}
.stat span{font-size:.84rem;color:var(--muted);font-weight:700}
.ic-tile{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:1.25rem;
  color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:var(--sh-soft);margin-bottom:.6rem}
.ic-tile.green{background:linear-gradient(140deg,#059669,#34D399)}
.ic-tile.dark{background:linear-gradient(140deg,var(--primary),var(--secondary))}
.ic-tile.amber{background:linear-gradient(140deg,#D97706,#FBBF24)}

/* ============ Flip cards (intro) ============ */
.flip-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.flip{perspective:1400px;height:390px;cursor:pointer;background:none;border:none;padding:0;text-align:right}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .65s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);padding:1.3rem;
  display:flex;flex-direction:column;gap:.55rem;border:2px solid var(--border);background:#fff;
  box-shadow:var(--sh-clay),var(--sh-in);overflow-y:auto}
.flip-face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#F8FDFF,var(--accent-soft));
  border-color:var(--border-strong);justify-content:center}
.flip-face h3{font-family:var(--font-display);font-size:1.2rem;font-weight:400}
.flip-face p,.flip-face li{font-size:.88rem;color:var(--fg-soft);line-height:1.7}
.flip-face ul{padding-inline-start:1.1rem;display:grid;gap:.25rem}
.flip-cta{margin-top:auto;font-size:.78rem;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:.35rem}
.flip-num{position:absolute;top:-14px;inset-inline-start:14px;font-size:.75rem;font-weight:800;color:#fff;
  background:var(--primary);border-radius:var(--r-pill);padding:.15rem .6rem}

/* ============ Quiz ============ */
.q-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.q-count{font-weight:800;color:var(--muted);font-size:.88rem}
.q-text{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:800;line-height:1.6;margin-bottom:1.1rem}
.options{display:grid;gap:.6rem}
.option{display:flex;align-items:center;gap:.75rem;width:100%;text-align:right;padding:.85rem 1rem;
  border-radius:var(--r);border:2px solid var(--border);background:#fff;font-size:.95rem;font-weight:700;
  color:var(--fg-soft);transition:transform var(--t),border-color var(--t),background var(--t)}
.option:hover:not(:disabled){transform:translateX(-4px);border-color:var(--accent);background:#F7FCFF}
.option .key{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:10px;
  background:var(--bg-2);color:var(--accent);font-weight:800;font-size:.9rem}
.option.correct{border-color:#34D399;background:#ECFDF5}
.option.correct .key{background:#059669;color:#fff}
.option.wrong{border-color:#FCA5A5;background:#FEF2F2}
.option.wrong .key{background:var(--danger);color:#fff}
.option:disabled{cursor:default;opacity:1}
.explain{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r);font-size:.9rem;border:2px solid;
  display:flex;gap:.6rem;animation:fadeUp .35s ease}
.explain.ok{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.explain.no{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.explain b{display:block}
.explain[hidden]{display:none}

/* ============ Cycle order game ============ */
.cycle-svg{width:100%;height:auto;max-height:260px;margin-bottom:1rem}
.slots{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.slot{min-height:96px;border-radius:var(--r);border:2.5px dashed var(--border-strong);background:#FAFDFF;
  padding:.8rem;display:flex;flex-direction:column;gap:.3rem;transition:border-color var(--t),background var(--t),transform var(--t)}
.slot .slot-tag{font-size:.75rem;font-weight:800;color:var(--accent)}
.slot .slot-title{font-weight:800;font-size:.95rem;color:var(--muted)}
.slot.filled{border-style:solid;border-color:var(--accent);background:#fff;box-shadow:var(--sh-in)}
.slot.filled .slot-title{color:var(--fg)}
.slot.filled .slot-desc{font-size:.82rem;color:var(--muted)}
.slot.ok{border-color:#34D399;background:#ECFDF5}
.slot.bad{border-color:#FCA5A5;background:#FEF2F2}
.slot.hoverable{border-color:var(--accent);background:var(--accent-soft)}
.pool{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.pool-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-pill);
  border:2px solid var(--border);background:#fff;font-weight:700;font-size:.9rem;color:var(--fg-soft);
  box-shadow:0 5px 0 -3px rgba(51,65,85,.08);transition:transform var(--t),border-color var(--t),opacity var(--t)}
.pool-chip:hover:not(:disabled){transform:translateY(-3px);border-color:var(--accent);color:var(--accent)}
.pool-chip:disabled{opacity:.3;cursor:default}
.pool-chip.picked{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ============ Matching game ============ */
.match{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.match-col{display:grid;gap:.6rem;align-content:start}
.match-col h4{font-size:.8rem;font-weight:800;color:var(--muted);letter-spacing:.05em}
.match-item{padding:.75rem .95rem;border-radius:var(--r);border:2px solid var(--border);background:#fff;
  font-size:.9rem;font-weight:700;color:var(--fg-soft);text-align:right;transition:transform var(--t),border-color var(--t),background var(--t)}
.match-item:hover:not(:disabled){transform:translateY(-3px);border-color:var(--accent)}
.match-item.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 4px rgba(2,132,199,.14)}
.match-item.matched{border-color:#34D399;background:#ECFDF5;color:#065F46;cursor:default}
.match-item.shake{animation:shake .4s ease;border-color:#FCA5A5;background:#FEF2F2}
.match-item:disabled{opacity:1}
.match-score{font-weight:800;color:var(--accent)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ============ Scenarios ============ */
.scene{border-radius:var(--r-lg);border:2px solid var(--border);background:linear-gradient(160deg,#FFFFFF,#F6FCFF);
  box-shadow:var(--sh-clay),var(--sh-in);padding:1.4rem}
.scene-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:800;padding:.25rem .7rem;
  border-radius:var(--r-pill);background:#FEF3C7;color:#B45309;border:1px solid #FDE68A;margin-bottom:.7rem}
.scene-tag.danger{background:#FEE2E2;color:#B91C1C;border-color:#FECACA}
.scene p.situation{font-size:1rem;font-weight:700;color:var(--fg-soft);line-height:1.8}
.scene .options{margin-top:1rem}
.steps{display:grid;gap:.5rem;counter-reset:s;margin-top:.6rem}
.steps li{position:relative;padding-inline-start:2.2rem;font-size:.9rem;color:var(--fg-soft);list-style:none}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:0;top:.15rem;
  display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.75rem;font-weight:800;
  background:var(--accent);color:#fff}

/* ============ Level header & results ============ */
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);font-weight:700;margin-bottom:.8rem}
.crumbs button{background:none;border:none;color:var(--accent);font-weight:800;font-size:.85rem}
.level-head{margin-bottom:1.2rem}
.level-head h2{display:flex;align-items:center;gap:.6rem}
.result{text-align:center;padding:2rem 1.4rem}
.result .big{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;color:var(--accent)}
.result .medal{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 1rem;border-radius:30px;font-size:2.1rem;
  color:#fff;background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:var(--sh-clay)}
.result.gold .medal{background:linear-gradient(140deg,#D97706,#FBBF24)}
.result h2{margin-bottom:.4rem}

/* ============ Certificate ============ */
.cert{border-radius:var(--r-lg);padding:2.2rem 1.6rem;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fff,#F1FAFF);border:3px double var(--border-strong);box-shadow:var(--sh-clay)}
.cert::before,.cert::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.18),transparent 70%)}
.cert::before{top:-70px;inset-inline-end:-50px}
.cert::after{bottom:-80px;inset-inline-start:-60px}
.cert .seal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto .8rem;border-radius:50%;font-size:1.9rem;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 10px 26px -10px rgba(2,132,199,.8)}
.cert h2{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:400}
.cert .name{font-family:var(--font-display);font-size:clamp(1.8rem,5.5vw,2.6rem);color:var(--accent);margin:.4rem 0}
.cert .meta{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;font-size:.85rem;color:var(--muted);font-weight:700}

/* ============ Modal ============ */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);z-index:60;
  display:grid;place-items:center;padding:1rem;animation:fadeIn .2s ease}
.modal{background:#fff;border-radius:var(--r-lg);border:2px solid var(--border);padding:1.6rem;max-width:520px;width:100%;
  box-shadow:0 30px 70px -20px rgba(15,23,42,.5);animation:fadeUp .3s ease;max-height:88vh;overflow:auto}
.modal h3{font-family:var(--font-display);font-size:1.35rem;font-weight:400;margin-bottom:.6rem}
.modal p{color:var(--fg-soft);font-size:.92rem}

/* ============ Toast ============ */
.toast-wrap{position:fixed;bottom:1.4rem;inset-inline-start:1.4rem;z-index:80;display:grid;gap:.5rem}
.toast{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:var(--r);font-size:.9rem;font-weight:700;
  background:#fff;border:2px solid var(--border);box-shadow:var(--sh-soft);animation:fadeUp .3s ease}
.toast.success{border-color:#A7F3D0;color:#065F46;background:#ECFDF5}
.toast.error{border-color:#FECACA;color:#991B1B;background:#FEF2F2}
.toast.info{border-color:var(--border-strong);color:var(--accent);background:var(--accent-soft)}

/* ============ Footer ============ */
.footer{position:relative;z-index:1;text-align:center;padding:2rem 1.25rem 3rem;color:var(--muted);font-size:.85rem;
  border-top:1px solid var(--border);background:rgba(255,255,255,.5)}
.footer b{color:var(--accent)}
.foot-note{font-size:.78rem;margin-top:.35rem;opacity:.85}

/* ============ Animations ============ */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}
.anim{animation:fadeUp .45s ease both}
.anim.d1{animation-delay:.08s}.anim.d2{animation-delay:.16s}.anim.d3{animation-delay:.24s}.anim.d4{animation-delay:.32s}
.pop{animation:pop .35s ease both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ============ Responsive ============ */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:1.5rem}
  .hero-art{order:-1;min-height:210px}
  .match{grid-template-columns:1fr}
  .flip{height:410px}
}
@media (max-width:640px){
  .nav-title{display:none}
  .app{padding:1rem .85rem 2.5rem}
  .clay{padding:1.1rem}
  .cert{padding:1.5rem 1rem}
}
@media print{
  .navbar,.footer,.btn,.toast-wrap,.crumbs,.hint{display:none!important}
  body{background:#fff}
  .cert{box-shadow:none;border-color:#94A3B8}
}

/* ============ Lucide icon sizing ============ */
i[data-lucide]{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto}
svg.lucide{width:1.2em;height:1.2em;stroke-width:1.9;flex:0 0 auto}
.icon-btn svg.lucide{width:18px;height:18px}
.hud-chip svg.lucide{width:15px;height:15px}
.btn svg.lucide{width:1.1em;height:1.1em}
.flip-cta svg.lucide,.badge svg.lucide,.eyebrow svg.lucide{width:1em;height:1em}
.explain svg.lucide{width:1.3em;height:1.3em;flex:0 0 auto}
.option .key svg.lucide,.path-item .num svg.lucide{width:1em;height:1em}
.slot-tag svg.lucide{margin-inline-end:.2rem}
.stars svg.lucide{width:1.05em;height:1.05em}
@media (max-width:640px){.cert .meta{gap:.8rem;font-size:.78rem}}

/* ============ graceful icon degradation (if the icon CDN is blocked/offline) ============ */
html.no-icons i[data-lucide],
html.no-icons [data-icon]{display:none}
html.no-icons .nav-brand::before{
  content:'';width:22px;height:22px;border-radius:7px;display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))
}
html.no-icons .btn,html.no-icons .pool-chip,html.no-icons .match-item{gap:.35rem}