:root{
  /* Meydan Free Zone palette – see PALETTE.md for sources */
  --g-deep:#0c6141;   /* meydanfz.ae table headers / preheading; slide headings #075e3c */
  --g-emerald:#019855;/* in-module MFZ slides accent */
  --g-brand:#60a730;  /* logo "FZ" + ring (exact), site #61a60e */
  --g-light:#9ec64f;  /* logo ring light green */
  --g-lime:#a9c70d;   /* logo ring lime */
  --g-teal:#70c3c0;   /* logo ring teal-green */
  --g-mint:#f4f9f5;   /* slide background */
  --g-mint2:#e3f1e6;  /* tint of #60a730 on white */
  --paper:#ffffff; --cream:#f9f8f2; /* site section bg */
  --ink:#1c1c1c;      /* meydanfz.ae --foreground */
  --muted:#5e6662;    /* charcoal-grey for secondary text */
  --line:#d9d9d9;     /* site border grey */
  --red:#e1584c;      /* site --coral (errors only) */
  --card:#ffffff;--card-b:#dfe8e1;
  --r:18px;--shadow:0 16px 34px -20px rgba(12,97,65,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:radial-gradient(900px 520px at 100% -10%,rgba(169,199,13,.14),transparent 60%),radial-gradient(800px 520px at -10% 10%,rgba(112,195,192,.16),transparent 60%),var(--g-mint);background-attachment:fixed;min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif,.big,.stat b,.receipt,.cert{font-variant-numeric:lining-nums}
h1,h2,h3,.serif{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
a{color:var(--g-emerald);font-weight:700}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
/* top bar */
.top{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,255,255,.92);border-bottom:1px solid var(--card-b)}
.top .wrap{display:flex;align-items:center;gap:10px;height:62px}
.logo{display:flex;align-items:center}
.logo img{height:34px;display:block}
.spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--card-b);color:var(--g-deep);font-weight:700;font-size:14px;white-space:nowrap}
.chip.pri{background:var(--g-mint2);border-color:rgba(96,167,48,.45);color:var(--g-deep)}
.chip .n{font-variant-numeric:tabular-nums}
.chip.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}}
/* hero */
.hero{padding-top:34px;padding-bottom:10px;position:relative}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--g-emerald);font-weight:800}
.eyebrow:before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--g-teal),var(--g-brand));border-radius:2px}
.hero h1{font-size:clamp(32px,7vw,56px);line-height:1.05;margin:12px 0 10px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--g-emerald),var(--g-brand) 55%,var(--g-lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--muted);font-size:clamp(15px,2.3vw,18px);max-width:640px;margin:0 0 18px}
.hero-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){.hero-grid{grid-template-columns:1.25fr .9fr;align-items:end}}
.panel{background:#fff;border:1px solid var(--card-b);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.name-row{display:flex;gap:10px;flex-wrap:wrap}
.input{flex:1;min-width:180px;background:var(--g-mint);border:1px solid var(--card-b);border-radius:14px;padding:13px 14px;color:var(--ink);font:inherit;font-size:16px;outline:none;transition:border .2s}
.input:focus{border-color:var(--g-brand);box-shadow:0 0 0 3px rgba(96,167,48,.18)}
label.small{display:block;font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:14px;font-weight:800;font-size:15px;transition:transform .15s var(--ease),box-shadow .2s,opacity .2s;user-select:none}
.btn:active{transform:scale(.97)}
.btn-pri{background:linear-gradient(135deg,var(--g-emerald),var(--g-brand));color:#fff;box-shadow:0 10px 22px -10px rgba(1,152,85,.7)}
.btn-pri:hover{box-shadow:0 14px 28px -10px rgba(1,152,85,.85)}
.btn-ghost{background:#fff;border:1.5px solid var(--card-b);color:var(--g-deep)}
.btn[disabled]{opacity:.35;pointer-events:none;filter:grayscale(.4)}
.btn.block{width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background:var(--g-mint);border-radius:14px;padding:12px;text-align:center;border:1px solid var(--card-b)}
.stat b{display:block;font-size:22px;font-weight:800;color:var(--g-deep)}
.stat span{font-size:12px;color:var(--muted)}
.pbar{height:10px;border-radius:99px;background:var(--g-mint2);overflow:hidden;margin-top:14px}
.pbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--g-teal),var(--g-brand),var(--g-lime));transition:width .9s var(--ease)}
.pbar-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
/* level map */
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 14px}
.section-title h2{margin:0;font-size:26px}
.section-title span{color:var(--muted);font-size:13px}
.levels{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.levels{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.levels{grid-template-columns:1fr 1fr 1fr}}
.lvl{position:relative;text-align:left;display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--r);background:#fff;box-shadow:0 8px 20px -16px rgba(12,97,65,.4);border:1px solid var(--card-b);transition:transform .25s var(--ease),border-color .25s,background .25s;overflow:hidden;opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) forwards}
.lvl:hover{transform:translateY(-3px);border-color:var(--g-brand);box-shadow:0 14px 26px -16px rgba(12,97,65,.5)}
.lvl .ico{flex:0 0 54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--g-mint);border:1px solid var(--card-b)}
.lvl.done .ico{background:linear-gradient(145deg,var(--g-mint2),#fff);border-color:var(--g-brand)}
.lvl .num{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--g-emerald);text-transform:uppercase}
.lvl h3{margin:2px 0 4px;font-size:18px;line-height:1.2}
.lvl .meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stars{color:var(--g-brand);letter-spacing:1px;font-size:13px}
.stars .off{color:var(--line)}
.lvl .go{margin-left:auto;font-size:20px;color:var(--g-brand);transition:transform .25s}
.lvl:hover .go{transform:translateX(4px)}
.lvl.exam{background:linear-gradient(135deg,var(--g-mint2),#fff 70%);border-color:rgba(96,167,48,.5)}
.lvl.locked{opacity:.55!important}
.lvl.locked .go{content:"🔒"}
@keyframes rise{to{opacity:1;transform:none}}
.tag-new{position:absolute;top:10px;right:12px;font-size:10px;font-weight:800;letter-spacing:1px;background:var(--g-lime);color:var(--g-deep);padding:3px 7px;border-radius:99px}
.footer{color:var(--muted);font-size:12.5px;padding:34px 0 110px;text-align:center}
.footer button{text-decoration:underline;color:var(--muted)}
/* bottom nav */
.bnav{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:40;display:flex;gap:6px;padding:6px;border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--card-b);box-shadow:var(--shadow)}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);padding:7px 14px;border-radius:14px;transition:background .2s,color .2s}
.bnav button span{font-size:19px}
.bnav button:hover,.bnav button.on{background:var(--g-mint2);color:var(--g-deep)}
/* overlay / player */
.overlay{position:fixed;inset:0;z-index:60;background:var(--g-mint);display:flex;flex-direction:column;animation:fadeIn .35s var(--ease)}
@keyframes fadeIn{from{opacity:0}}
.ph{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--card-b);background:#fff}
.ph .x{width:40px;height:40px;border-radius:12px;background:var(--g-mint);color:var(--g-deep);border:1px solid var(--card-b);font-size:18px;flex:0 0 auto}
.ph .t{flex:1;min-width:0}
.ph .t small{display:block;color:var(--g-emerald);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.ph .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
.ph .pbar{margin-top:6px;height:6px}
.pbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 16px 30px}
.pbody .inner{max-width:760px;margin:0 auto}
.pfoot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--card-b);background:#fff}
.pfoot .inner{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:center}
.pfoot .hint{flex:1;color:var(--muted);font-size:13px}
.step{animation:slideIn .45s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}}
.step h2{font-size:clamp(22px,4.6vw,30px);margin:4px 0 14px;line-height:1.15}
.kicker{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--g-emerald)}
.kicker.pri{color:var(--g-brand)}
ul.bul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.bul li{background:#fff;border:1px solid var(--card-b);border-radius:14px;padding:13px 14px 13px 44px;position:relative;opacity:0;animation:rise .5s var(--ease) forwards}
ul.bul li:before{content:"✦";position:absolute;left:16px;top:12px;color:var(--g-brand)}
.video{border-radius:16px;overflow:hidden;border:1px solid var(--card-b);background:#000;margin:0 0 16px;box-shadow:var(--shadow)}
.video video{display:block;width:100%;max-height:52vh;background:#000}
.video.portrait video{max-height:60vh}
.vtoggle{margin-bottom:14px}
/* flip */
.fgrid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:700px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.flip{perspective:1000px;height:200px;opacity:0;animation:rise .5s var(--ease) forwards}
@media(min-width:700px){.flip{height:190px}}
.flip .in{position:relative;width:100%;height:100%;transition:transform .7s var(--ease);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .fa,.flip .fb{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;padding:14px;border:1px solid var(--card-b)}
.flip .fa{background:linear-gradient(150deg,var(--g-emerald),var(--g-deep));color:#fff;border-color:transparent;align-items:center;text-align:center}
.flip .fa .em{font-size:32px;margin-bottom:8px}
.flip .fa b{font-size:15.5px;line-height:1.25}
.flip .fa small{position:absolute;bottom:9px;font-size:10.5px;color:rgba(255,255,255,.75);letter-spacing:1px;text-transform:uppercase}
.flip .fb{transform:rotateY(180deg);background:#fff;border:2px solid var(--g-brand)!important;color:var(--ink);font-size:13px;line-height:1.42;overflow:auto;text-align:left;padding:12px 13px}
.flip .fb>div{margin:auto 0}
.flip .fb b{color:var(--g-deep)}
.flip .fb a{color:var(--g-emerald)}
.counter{font-size:13px;color:var(--muted);margin:-6px 0 14px}
/* options */
.q{font-size:clamp(18px,3.6vw,22px);font-weight:700;margin:0 0 16px;line-height:1.35}
.scen{background:linear-gradient(135deg,rgba(112,195,192,.22),rgba(112,195,192,.06));border:1px solid rgba(112,195,192,.6);border-radius:16px;padding:14px 16px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start}
.scen .av{font-size:28px}
.opts{display:grid;gap:10px}
.opt{text-align:left;padding:15px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--card-b);font-weight:600;transition:transform .15s,border-color .2s,background .2s;display:flex;gap:12px;align-items:center;opacity:0;animation:rise .45s var(--ease) forwards}
.opt .l{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--g-mint2);color:var(--g-deep);font-size:13px;font-weight:800}
.opt:hover{border-color:var(--g-brand)}
.opt.ok{border-color:var(--g-brand);background:var(--g-mint2)}
.opt.ok .l{background:var(--g-brand);color:#fff}
.opt.bad{border-color:var(--red);background:#fdeeec}
.opt.bad .l{background:var(--red);color:#fff}
.opts.locked .opt{pointer-events:none}
.fb-card{margin-top:14px;padding:14px 16px;border-radius:14px;font-size:14.5px;animation:rise .4s var(--ease) forwards;opacity:0}
.fb-card.ok{background:var(--g-mint2);border:1px solid rgba(96,167,48,.5)}
.fb-card.bad{background:#fdeeec;border:1px solid rgba(225,88,76,.45)}
.fb-card b.h{display:block;margin-bottom:3px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
/* tf */
.tfcard{background:linear-gradient(150deg,var(--g-emerald),var(--g-deep));color:#fff;border:0;border-radius:20px;padding:26px 20px;text-align:center;font-size:clamp(18px,3.8vw,22px);font-weight:700;min-height:140px;display:grid;place-items:center;box-shadow:var(--shadow);animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.tfbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tfbtns .btn{padding:16px;font-size:16px}
.btn-myth{background:#fdeeec;border:1.5px solid rgba(225,88,76,.6);color:#9b2f25}
.btn-fact{background:var(--g-mint2);border:1.5px solid rgba(96,167,48,.7);color:var(--g-deep)}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0}
.dots i{width:8px;height:8px;border-radius:9px;background:var(--line);transition:all .3s}
.dots i.on{background:var(--g-teal);width:20px}
.dots i.ok{background:var(--g-brand)}.dots i.bad{background:var(--red)}
/* sort */
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:50px;padding:12px;border-radius:16px;border:1.5px dashed var(--g-teal);background:#fff;margin-bottom:14px}
.item{padding:10px 13px;border-radius:12px;background:linear-gradient(150deg,var(--g-emerald),var(--g-deep));color:#fff;border:1.5px solid transparent;font-size:14px;font-weight:600;touch-action:none;user-select:none;transition:transform .15s,border-color .2s,box-shadow .2s}
.item.sel{border-color:var(--g-lime);box-shadow:0 0 0 3px rgba(169,199,13,.35);transform:translateY(-2px)}
.item.placed{background:var(--g-mint2);color:var(--g-deep);border-color:rgba(96,167,48,.6);pointer-events:none;animation:pop .35s var(--ease)}
.ghost{position:fixed;z-index:200;pointer-events:none;opacity:.92;transform:rotate(-3deg) scale(1.04);box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}
.buckets{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.buckets{grid-template-columns:repeat(var(--cols,2),1fr)}}
.bucket{border-radius:16px;padding:12px;min-height:96px;background:#fff;border:1.5px solid var(--card-b);transition:border-color .2s,background .2s,transform .2s;text-align:left;display:block;width:100%}
.bucket h4{margin:0 0 8px;font-size:14px;color:var(--g-deep);display:flex;justify-content:space-between}
.bucket .its{display:flex;flex-wrap:wrap;gap:6px}
.bucket.hot{border-color:var(--g-brand);background:var(--g-mint2);transform:scale(1.01)}
.bucket.armed{border-style:dashed;border-color:var(--g-brand)}
/* order */
.olist{display:grid;gap:8px}
.oit{text-align:left;padding:13px 14px;border-radius:13px;background:#fff;border:1.5px solid var(--card-b);font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:center;transition:all .25s var(--ease)}
.oit .k{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--g-mint2);color:var(--g-deep);font-weight:800;font-size:13px}
.oit.done{background:var(--g-mint2);border-color:rgba(96,167,48,.6);pointer-events:none}
.oit.done .k{background:var(--g-brand);color:#fff}
.oit.bad{border-color:var(--red)}
/* match */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcol{display:grid;gap:8px;align-content:start}
.mit{padding:12px;border-radius:13px;background:#fff;border:1.5px solid var(--card-b);font-size:13.5px;font-weight:600;text-align:left;transition:all .2s;min-height:52px;word-break:break-word}
.mit.l{background:linear-gradient(150deg,var(--g-emerald),var(--g-deep));color:#fff;border-color:transparent}
.mit.sel{border-color:var(--g-lime);box-shadow:0 0 0 3px rgba(169,199,13,.4)}
.mit.done{opacity:.9;pointer-events:none;border-color:rgba(96,167,48,.6);background:var(--g-mint2);color:var(--g-deep)}
.mit.done:after{content:" ✓";color:var(--g-brand)}
/* calc */
.cgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.cgrid{grid-template-columns:1fr 1fr}}
.brief{background:linear-gradient(135deg,var(--g-mint2),#fff);border:1px solid rgba(96,167,48,.5);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.brief small{color:var(--g-emerald);font-weight:800;letter-spacing:1.4px;font-size:11px;text-transform:uppercase}
.brief b{display:block;font-size:17px;margin-top:3px}
.ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid var(--card-b)}
.ctrl+.ctrl{margin-top:8px}
.ctrl .lb{font-size:14px;font-weight:600}
.ctrl .lb small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.stp{display:flex;align-items:center;gap:6px}
.stp button{width:36px;height:36px;border-radius:11px;background:var(--g-mint2);color:var(--g-deep);border:1px solid var(--card-b);font-size:19px;font-weight:800}
.stp button:active{transform:scale(.92)}
.stp output{min-width:28px;text-align:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.receipt{background:#fff;color:var(--ink);border:1px solid var(--card-b);border-top:5px solid var(--g-brand);border-radius:16px;padding:16px;font-size:13.5px;box-shadow:var(--shadow);position:relative}
.receipt h4{margin:0 0 8px;font-size:17px;color:var(--g-deep)}
.receipt .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.12);animation:pop .3s}
.receipt .row span:last-child{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.receipt .tot{display:flex;justify-content:space-between;margin-top:10px;font-size:20px;font-weight:800;color:var(--g-deep)}
.warn{margin-top:10px;font-size:13px;color:#9b2f25;background:#fdeeec;border-radius:10px;padding:8px 10px}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
.big{font-weight:800;font-size:clamp(34px,8vw,52px);color:var(--g-deep);text-align:center;margin:8px 0 2px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--g-brand);height:30px}
.vdots{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:0 4px}
/* groups */
.acts{display:grid;gap:8px}
.act{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:13px;background:#fff;border:1.5px solid var(--card-b);transition:all .2s}
.act code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--g-mint2);padding:3px 7px;border-radius:7px;color:var(--g-deep)}
.act .nm{flex:1;font-size:14px;font-weight:600}
.act .gp{font-size:11px;color:var(--muted)}
.act.on{border-color:var(--g-brand);background:var(--g-mint2)}
.act.on.extra{border-color:var(--red);background:#fdeeec}
.gbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.gslot{flex:1;min-width:70px;border-radius:12px;padding:8px;text-align:center;border:1.5px dashed var(--line);background:#fff;color:var(--g-deep);font-weight:800;font-size:15px;transition:all .3s}
.gslot small{display:block;font-size:10px;color:var(--muted);font-weight:700}
.gslot.f{border-style:solid;border-color:var(--g-brand);background:var(--g-mint2)}
.gslot.x{border-style:solid;border-color:var(--red);background:#fdeeec}
/* complete */
.done-wrap{text-align:center;padding:16px 0}
.medal{width:130px;height:130px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center;font-size:58px;background:radial-gradient(circle at 30% 30%,var(--g-light),var(--g-emerald) 70%,var(--g-deep));box-shadow:0 0 0 8px rgba(96,167,48,.18),0 0 60px rgba(112,195,192,.55);animation:medal 1s var(--ease)}
@keyframes medal{0%{transform:scale(.2) rotate(-90deg);opacity:0}70%{transform:scale(1.1) rotate(8deg)}}
.bigstars{font-size:40px;letter-spacing:6px;margin:4px 0}
.bigstars span{display:inline-block;opacity:0;animation:starIn .5s var(--ease) forwards}
.bigstars span.off{filter:grayscale(1);opacity:.25!important}
@keyframes starIn{from{transform:scale(0) rotate(-120deg)}to{opacity:1}}
.toast{position:fixed;z-index:300;pointer-events:none;font-weight:900;color:var(--g-emerald);font-size:20px;text-shadow:0 2px 0 #fff,0 4px 14px rgba(12,97,65,.3);animation:floatUp 1.1s var(--ease) forwards}
@keyframes floatUp{to{transform:translateY(-70px);opacity:0}}
.snack{pointer-events:none;position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:300;background:var(--g-deep);color:#fff;font-weight:800;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);animation:snack 2.8s var(--ease) forwards;white-space:nowrap}
@keyframes snack{0%{opacity:0;transform:translate(-50%,20px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:400}
/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(28,28,28,.45);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .25s}
@media(min-width:700px){.modal{align-items:center}}
.sheet{width:100%;max-width:720px;max-height:88vh;overflow:auto;background:#fff;border:1px solid var(--card-b);border-radius:22px 22px 0 0;padding:20px;animation:sheetUp .4s var(--ease)}
@media(min-width:700px){.sheet{border-radius:22px}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
.sheet h2{margin:0 0 12px}
.sheet .close{float:right;width:38px;height:38px;border-radius:12px;background:var(--g-mint);color:var(--g-deep);border:1px solid var(--card-b)}
.gl{display:grid;gap:8px}
.gl div{padding:11px 13px;border-radius:12px;background:var(--g-mint);border:1px solid var(--card-b);font-size:14px}
.gl div b{color:var(--g-deep);display:block;font-size:14.5px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.bdg{padding:14px 10px;border-radius:16px;text-align:center;background:var(--g-mint);border:1px solid var(--card-b);font-size:13px;font-weight:700}
.bdg .e{font-size:34px;display:block;margin-bottom:6px;filter:grayscale(1);opacity:.35}
.bdg.on{border-color:var(--g-brand);background:linear-gradient(150deg,var(--g-mint2),#fff)}
.bdg.on .e{filter:none;opacity:1}
.bdg small{display:block;color:var(--muted);font-weight:500;font-size:11px;margin-top:3px}
.reftab{width:100%;border-collapse:collapse;font-size:14px}
.reftab td{padding:9px 6px;border-bottom:1px solid var(--card-b);vertical-align:top}
.reftab td:last-child{text-align:right;font-weight:700;color:var(--g-deep)}
.sheet h3{font-size:17px;margin:18px 0 6px;color:var(--g-emerald)}
/* certificate */
.certwrap{padding:10px 0 20px}
.cert{position:relative;background:#fff;color:var(--ink);border-radius:8px;padding:clamp(22px,5vw,54px);text-align:center;box-shadow:var(--shadow);border:10px solid var(--g-deep);outline:2px solid var(--g-brand);outline-offset:-22px;overflow:hidden}
.cert:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 100% 0,rgba(169,199,13,.12),transparent),radial-gradient(500px 300px at 0 100%,rgba(112,195,192,.16),transparent);pointer-events:none}
.cert img{height:46px;margin-bottom:12px}
.cert .ct{font-weight:800;font-size:clamp(24px,5vw,40px);margin:4px 0;color:var(--g-deep)}
.cert .sub{letter-spacing:3px;text-transform:uppercase;font-size:11px;color:var(--g-emerald);font-weight:800}
.cert .nm{font-weight:800;font-size:clamp(28px,6.5vw,52px);color:var(--g-emerald);margin:12px 0 6px;border-bottom:2px solid var(--g-light);display:inline-block;padding:0 18px 4px;}
.cert p{margin:8px auto;max-width:560px;font-size:15px}
.cert .row3{display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap;margin-top:24px;font-size:13px}
.cert .row3 div b{display:block;font-size:15px;color:var(--g-deep)}
.cert .seal{position:absolute;right:34px;top:34px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--g-light),var(--g-emerald) 70%,var(--g-deep));color:#fff;font-weight:800;display:grid;place-items:center;font-size:34px;box-shadow:0 0 0 5px rgba(96,167,48,.2)}
.sig{font-style:italic;font-size:18px}
@media(max-width:560px){.cert .seal{display:none}}
@media print{
  @page{size:A4 landscape;margin:8mm}
  html,body{background:#fff!important;overflow:visible!important;height:auto}
  body>*:not(#certView){display:none!important}
  #certView{position:static;background:#fff;animation:none;display:block}
  #certView .ph,#certView .note{display:none!important}
  #certView .pbody{padding:0;overflow:visible}
  #certView .inner{max-width:none!important;padding:0}
  .cert{box-shadow:none;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid;height:192mm;display:flex;flex-direction:column;justify-content:center}
  .cert .row3{justify-content:space-evenly}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* emoji tint to MFZ green */
.tint,.lvl .ico,.flip .fa .em,.medal,.bdg .e,.bnav button span,.scen .av{filter:grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.6) brightness(.95)}
.flip .fa .em{filter:grayscale(1) brightness(10)}
.medal{filter:none}
.bdg .e{opacity:.35}.bdg.on .e{filter:grayscale(1) sepia(1) hue-rotate(55deg) saturate(2.6) brightness(.95);opacity:1}
.bigstars span{color:var(--g-brand)}
.bigstars span.off{color:var(--line);filter:none;opacity:1!important}
.bigstars{font-size:44px}
.stat span,.pbar-label,.counter,.note,.lvl .meta,.footer,.footer button,.hint,.ph .t b{color:var(--muted)}
.ph .t b{color:var(--ink)}
.lead{color:var(--muted)}