/* ZRT Games */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/outfit-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/outfit-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/outfit-900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--bg:#f7f5ff;--bg-2:#efeafd;--card:#fff;--text:#2b2547;--head:#170f3a;--muted:#6b6590;--nav:#4a4372;--link:#6c3cf0;
--accent:#6c3cf0;--accent-2:#ffc52e;--on-accent:#fff;--on-accent-2:#170f3a;--accent-soft:rgba(108,60,240,.12);--accent-text:#5b2ee0;
--line:#e3dcfa;--line-strong:#c9bdf5;--chip:#ece6ff;--track:#e3dcfa;--ok:#13a86b;--danger:#e0384e;--input-bg:#fff;
--header-bg:rgba(247,245,255,.85);--r:22px;--maxw:1160px;--card-shadow:0 10px 30px rgba(60,30,140,.06);
--cta-bg:linear-gradient(135deg,#6c3cf0,#9b4dff 60%,#ff7ab6);--cta-text:#fff;--cta-btn:#ffc52e;--cta-btn-text:#170f3a;--toast-bg:#170f3a;
--btn-shadow:0 10px 24px rgba(108,60,240,.25);--g-bg:#efeafd;--g-panel:#fff;--g-tile:#fff;--g-tile-text:#170f3a;--g-accent:#6c3cf0;--g-accent-2:#ffc52e;--g-text:#170f3a;--g-muted:#6b6590;--g-danger:#e0384e;--g-radius:14px;--g-font:var(--font)}
.hero{background:radial-gradient(900px 500px at 85% 20%,rgba(255,197,46,.25),transparent 60%),radial-gradient(800px 500px at 10% 0,rgba(108,60,240,.16),transparent 60%)}
.balls{position:absolute;inset:-30px -40px auto auto;width:260px;z-index:0;pointer-events:none}
.mock{z-index:1}
.marquee{background:#170f3a;--marquee-text:#fff}

:root{--font:'Outfit',system-ui,sans-serif;--display:'Outfit',system-ui,sans-serif}
/* Rewards site — base layout and components. Colours, fonts and radii come from the theme block (:root vars). */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--link)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0 0 .45em;color:var(--head);letter-spacing:var(--head-track,-.01em);font-weight:var(--head-weight,800)}
p{margin:0 0 1em}
[hidden]{display:none!important}
.wrap{width:min(var(--maxw,1160px),100% - 32px);margin-inline:auto}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--btn-r,999px);border:2px solid transparent;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:var(--btn-shadow,none);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text);box-shadow:none}
.btn.alt{background:var(--accent-2);color:var(--on-accent-2)}
.btn.sm{min-height:38px;padding:0 16px;font-size:14px}
.btn.lg{min-height:58px;padding:0 30px;font-size:18px}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--head);font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:var(--brand-track,-.02em)}
.brand svg{width:34px;height:34px}
.site-nav{display:flex;gap:4px;margin-left:12px}
.site-nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--nav);font-weight:700;font-size:15px}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--head);background:var(--chip)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.bal-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--chip);color:var(--head);font-weight:800;text-decoration:none;font-variant-numeric:tabular-nums}
.bal-pill i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.menu-btn{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:currentColor;margin:auto;position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
@media (max-width:980px){
  .menu-btn{display:block;order:3}
  .site-nav{position:absolute;left:0;right:0;top:70px;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--line);padding:10px 16px 16px;margin:0;display:none}
  .site-nav.open{display:flex}
  .top-right .hide-sm{display:none}
}

/* sections */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec.tight{padding:48px 0}
.eyebrow{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text,var(--accent));margin-bottom:12px}
.sec-title{max-width:720px;margin-bottom:34px}
.sec-title.center{text-align:center;margin-inline:auto}
.sec-title h2{font-size:clamp(30px,4.2vw,50px)}
.sec-title p{color:var(--muted);font-size:18px;margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--card-shadow,none)}

/* hero */
.hero{position:relative;padding:clamp(46px,7vw,90px) 0 clamp(40px,6vw,70px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--chip);color:var(--head);font-weight:800;font-size:14px;margin-bottom:20px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(46,204,113,.2)}
.hero h1{font-size:clamp(42px,6.6vw,80px)}
.hero h1 .hl{color:var(--accent-text,var(--accent))}
.hero .lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:0;color:var(--muted);font-weight:700;font-size:15px}
.checks li::before{content:"✓";color:var(--ok);font-weight:900;margin-right:7px}
.example-tag{position:absolute;top:-12px;left:20px;z-index:2;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* phone mock */
.mock{position:relative;max-width:400px;margin-inline:auto;width:100%}
.mock-card{position:relative;background:var(--mock-bg,var(--card));border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--mock-shadow,0 30px 60px rgba(0,0,0,.25))}
.mock-bal small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.mock-bal b{font-family:var(--display);font-size:38px;color:var(--head);font-variant-numeric:tabular-nums}
.mock-bal span{float:right;margin-top:-34px;font-weight:900;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text,var(--accent))}
.bar{height:10px;border-radius:99px;background:var(--track);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .6s}
.mock-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--row-bg,var(--bg-2));margin-top:10px}
.mock-row .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--chip)}
.mock-row .ico svg{width:28px;height:28px}
.mock-row b{display:block;color:var(--head);font-size:15px}
.mock-row small{color:var(--muted);font-weight:600;font-size:13px}
.mock-row em{font-style:normal;font-weight:900;color:var(--accent-text,var(--accent));background:var(--accent-soft);padding:4px 10px;border-radius:999px;font-size:14px}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--marquee-bg,var(--bg-2));padding:16px 0}
.marquee-track{display:flex;gap:34px;width:max-content;animation:mq 30s linear infinite;font-family:var(--display);font-weight:900;font-size:var(--mq-size,18px);letter-spacing:.06em;color:var(--marquee-text,var(--head));white-space:nowrap}
.marquee-track span::after{content:"✦";margin-left:34px;color:var(--accent)}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-size:clamp(32px,4vw,46px);color:var(--head);line-height:1}
.stat span{display:block;color:var(--muted);font-weight:700;margin-top:8px;font-size:15px}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st}
.step{position:relative;padding:30px 26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.step::before{counter-increment:st;content:"0" counter(st);display:block;font-family:var(--display);font-weight:900;font-size:44px;color:var(--accent-text,var(--accent));line-height:1;margin-bottom:14px}
.step h3{font-size:22px}
.step p{color:var(--muted);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* tabs */
.tablist{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--chip);margin-bottom:26px;flex-wrap:wrap}
.tablist [role=tab]{border:0;background:transparent;color:var(--nav);font:inherit;font-weight:800;padding:10px 18px;border-radius:999px;cursor:pointer}
.tablist [role=tab][aria-selected=true]{background:var(--accent);color:var(--on-accent)}
.panel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.panel-grid ul{padding-left:20px;color:var(--muted)}
.panel-grid li{margin-bottom:6px}
.big-num{display:grid;place-items:center;aspect-ratio:1;max-width:280px;margin-inline:auto;border-radius:var(--r);background:var(--accent-soft);text-align:center}
.big-num b{font-family:var(--display);font-size:clamp(54px,8vw,90px);color:var(--head);line-height:1}
.big-num em{font-style:normal;font-weight:900;color:var(--accent-text,var(--accent));font-size:22px}
@media (max-width:860px){.panel-grid{grid-template-columns:1fr}}

/* rate table */
.rates{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.rates th,.rates td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.rates th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--bg-2)}
.rates td b{color:var(--accent-text,var(--accent))}
.rates tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* estimator */
.est{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.est label{display:block;font-weight:800;margin-bottom:18px}
.est label output{float:right;color:var(--accent-text,var(--accent));font-family:var(--display);font-size:20px}
.est input[type=range]{width:100%;accent-color:var(--accent);margin-top:8px}
.est-out{display:flex;flex-direction:column;justify-content:center;text-align:center;border-radius:var(--r);background:var(--est-bg,var(--accent-soft));padding:24px}
.est-out small{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.est-out b{font-family:var(--display);font-size:clamp(34px,4vw,46px);color:var(--head)}
.est-out em{font-style:normal;font-weight:900;font-size:24px;color:var(--accent-text,var(--accent))}
.fine{font-size:13px;color:var(--muted);margin-top:14px}
@media (max-width:860px){.est{grid-template-columns:1fr}}

/* levels */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lvl{padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.lvl .num{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:900;font-size:22px;margin-bottom:14px}
.lvl h3{font-size:22px;margin-bottom:6px}
.lvl p{color:var(--muted);margin:0;font-size:15px}
@media (max-width:900px){.levels{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.levels{grid-template-columns:1fr}}

/* features */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.feat .fi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text,var(--accent));margin-bottom:14px}
.feat .fi svg{width:26px;height:26px}
.feat h3{font-size:19px}
.feat p{color:var(--muted);margin:0;font-size:15px}
@media (max-width:900px){.feats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feats{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:800;font-size:18px;color:var(--head);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--accent-text,var(--accent))}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);margin:0 0 20px}

/* final cta */
.cta{position:relative;overflow:hidden;border-radius:calc(var(--r) * 1.4);padding:clamp(36px,6vw,70px);text-align:center;background:var(--cta-bg);color:var(--cta-text)}
.cta h2{color:var(--cta-text);font-size:clamp(34px,5vw,60px)}
.cta p{font-size:19px;opacity:.9;max-width:560px;margin:0 auto 26px}
.cta .btn{background:var(--cta-btn);color:var(--cta-btn-text)}

/* note band */
.note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:15px}
.note b{color:var(--head)}

/* footer */
.foot{border-top:1px solid var(--line);padding:46px 0 30px;background:var(--foot-bg,var(--bg-2));margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.foot h4{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-family:var(--font)}
.foot a{display:block;color:var(--text);text-decoration:none;font-weight:600;margin-bottom:8px}
.foot a:hover{color:var(--accent-text,var(--accent))}
.foot .legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.age{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:50%;border:2px solid var(--danger);color:var(--head);font-weight:900;font-size:14px;margin-right:12px;float:left}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* page head */
.page-head{padding:56px 0 20px}
.page-head h1{font-size:clamp(36px,5vw,60px)}
.page-head p{font-size:19px;color:var(--muted);max-width:680px}
.prose{max-width:780px;padding-bottom:30px}
.prose h2{font-size:26px;margin-top:1.6em}
.prose p,.prose li{color:var(--text)}
.prose li{margin-bottom:6px}

/* forms */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:800;font-size:14px;color:var(--head)}
.form input,.form select,.form textarea{font:inherit;font-weight:600;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--input-bg);color:var(--text);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--accent-soft);border-color:var(--accent)}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.form .check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-msg{margin:0;min-height:1.3em;font-weight:800;font-size:14px}
.form-msg.err{color:var(--danger)}
.form-msg.ok{color:var(--ok)}
.hp{position:absolute!important;left:-9999px}
.auth-box{max-width:460px;margin:40px auto 60px}
.auth-box h1{font-size:34px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* dashboard */
.dash{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.dash .wide{grid-column:1/-1}
.d-bal b{font-family:var(--display);font-size:clamp(44px,6vw,64px);color:var(--head);line-height:1;font-variant-numeric:tabular-nums}
.d-bal small{color:var(--muted);font-weight:800}
.days{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.days li{text-align:center;padding:10px 4px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.days small{display:block;color:var(--muted);font-weight:800;font-size:11px}
.days b{color:var(--head);font-size:15px}
.days li.got{background:var(--accent-soft);border-color:var(--accent)}
.days li.now{border:2px solid var(--accent);transform:translateY(-3px)}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ms-card{display:block;padding:18px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.ms-card .ms-ico svg{width:34px;height:34px;margin-bottom:8px}
.ms-card b{color:var(--head)}
.ms-card ul{list-style:none;padding:0;margin:8px 0 0;font-size:14px}
.ms-card li{padding:4px 0;color:var(--muted)}
.ms-card li::before{content:"○ ";color:var(--muted)}
.ms-card li.done{color:var(--head);font-weight:700}
.ms-card li.done::before{content:"● ";color:var(--ok)}
.ms-card em{font-style:normal;font-weight:800;color:var(--accent-text,var(--accent))}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tbl .pos{color:var(--ok);font-weight:800}
.tbl .neg{color:var(--danger);font-weight:800}
.tbl .empty{color:var(--muted);text-align:center;padding:24px}
.tbl td.msg{max-width:420px;white-space:pre-wrap}
.st{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:var(--chip);color:var(--head)}
.st-paid{background:rgba(46,204,113,.18);color:var(--ok)}
.st-rejected{background:rgba(231,76,60,.16);color:var(--danger)}
.st-pending{background:var(--accent-soft);color:var(--accent-text,var(--accent))}
@media (max-width:760px){.dash{grid-template-columns:1fr}.days{grid-template-columns:repeat(4,1fr)}}

/* games */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.gcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .2s}
.gcard:hover{transform:translateY(-4px)}
.gcard .g-art{height:150px;display:grid;place-items:center;background:var(--gart-bg,var(--accent-soft))}
.gcard .g-art svg{width:84px;height:84px}
.gcard .g-body{padding:18px 20px 20px}
.gcard h3{font-size:21px;margin-bottom:4px}
.gcard p{color:var(--muted);font-size:14px;margin-bottom:10px}
.gcard .g-tiers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.gcard .g-tiers span{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--head)}
.gcard .g-state{font-size:13px;font-weight:800;color:var(--accent-text,var(--accent))}
.gcard.complete .g-state::before{content:"✓ ";color:var(--ok)}
.play-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.play-side{position:sticky;top:90px}
.milestones{list-style:none;padding:0;margin:12px 0}
.milestones li{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);margin-bottom:8px;font-weight:700}
.milestones li b{color:var(--accent-text,var(--accent))}
.milestones li.hit{border-color:var(--accent);background:var(--accent-soft)}
.milestones li.done{opacity:.75}
.milestones li.done span::before{content:"✓ ";color:var(--ok);font-weight:900}
.pstatus{font-size:14px;color:var(--muted);margin:10px 0 0}
.game-host{border-radius:var(--r);background:var(--game-host-bg,var(--bg-2));border:1px solid var(--line);padding:18px;min-height:420px}
@media (max-width:900px){.play-wrap{grid-template-columns:1fr}.play-side{position:static}}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;z-index:99;transform:translate(-50%,160%);padding:14px 20px;border-radius:14px;background:var(--toast-bg,#111);color:#fff;font-weight:700;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .35s;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast.ok{border-left:5px solid var(--ok)}
.toast.err{border-left:5px solid var(--danger)}

/* admin */
.admin-top{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.admin-stats div{padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.admin-stats b{display:block;font-size:28px;font-family:var(--display);color:var(--head)}
.admin-stats small{color:var(--muted);font-weight:700}
.admin-login{max-width:380px;margin:60px auto}
[data-admin] h2{margin-top:30px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/*
 * P2E mini-games, set C — match3, runner, shooter, simon, breakout.
 * Load after games.css (shell, HUD, buttons, overlays and .g-stage come from there).
 * Theme with the same --g-* variables. Every selector is scoped to its game.
 */

/* ---------- canvas stage proportions ---------- */
.g-runner .g-stage::before { padding-top: 72%; }
.g-shooter .g-stage::before { padding-top: 105%; }
.g-breakout .g-stage::before { padding-top: 125%; }
.g-runner .g-stage, .g-shooter .g-stage, .g-breakout .g-stage {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent), 0 0 24px color-mix(in srgb, var(--g-accent, #7c5cff) 14%, transparent);
}
.g-runner .g-stage {
  background: var(--g-panel, #1e2130);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-accent-2, #22d3ee) 10%, var(--g-panel, #1e2130)), color-mix(in srgb, var(--g-accent, #7c5cff) 22%, var(--g-panel, #1e2130)) 80%);
}
.g-shooter .g-stage { cursor: crosshair; }
@media (hover: hover) and (pointer: fine) {
  .g-shooter .g-stage { cursor: none; } /* the game draws its own neon reticle */
}
.g-breakout .g-stage { cursor: default; }
.g-breakout .g-stage { background: var(--g-panel, #1e2130); background: linear-gradient(180deg, var(--g-panel, #1e2130), color-mix(in srgb, var(--g-accent, #7c5cff) 14%, var(--g-panel, #1e2130))); }

/* ---------- match3 ---------- */
.g-match3 .g-m3-board {
  position: relative;
  touch-action: none;
  cursor: pointer;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-accent, #7c5cff) 30%, transparent), 0 0 24px color-mix(in srgb, var(--g-accent, #7c5cff) 14%, transparent);
}
.g-match3 .g-m3-board::before { content: ""; display: block; padding-top: 100%; }
.g-match3 .g-m3-layer {
  position: absolute;
  inset: 6px;
  overflow: hidden;
  border-radius: calc(var(--g-radius, 18px) * 0.5);
  background-image: repeating-conic-gradient(rgba(255, 255, 255, 0.035) 0 25%, transparent 0 50%);
  background-size: 25% 25%;
}
.g-match3 .g-m3-gem, .g-match3 .g-m3-cur, .g-match3 .g-m3-float {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  transform: translate(calc(var(--c, 0) * 100%), calc(var(--r, 0) * 100%));
}
.g-match3 .g-m3-gem { transition: transform 0.18s ease-in; }
.g-match3 .g-m3-in {
  position: absolute;
  inset: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background: rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, currentColor 16%, var(--g-tile, #2a2e42));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.15s ease;
}
.g-match3 .g-m3-in svg {
  width: 74%;
  height: 74%;
  display: block;
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px currentColor);
}
.g-match3 .g-m3-k0 { color: var(--g-accent, #7c5cff); }
.g-match3 .g-m3-k1 { color: var(--g-accent-2, #22d3ee); }
.g-match3 .g-m3-k2 { color: #ffd166; }
.g-match3 .g-m3-k3 { color: #5aa9ff; }
.g-match3 .g-m3-k4 { color: #ff9f43; }
.g-match3 .g-m3-k5 { color: #c38bff; }
.g-match3 .g-m3-gem.is-sel .g-m3-in {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--g-text, #eef0ff), 0 0 16px currentColor;
}
.g-match3 .g-m3-gem.is-hint .g-m3-in { animation: g-c-wiggle 0.9s ease-in-out infinite; }
.g-match3 .g-m3-gem.is-no .g-m3-in { animation: g-c-nope 0.25s ease; }
.g-match3 .g-m3-gem.is-gone .g-m3-in { transform: scale(0.1) rotate(45deg); opacity: 0; box-shadow: 0 0 30px currentColor; }
.g-match3 .g-m3-gem.is-new .g-m3-in { animation: g-pop-in 0.25s ease-out both; }
.g-match3 .g-m3-cur {
  z-index: 3;
  border-radius: 26%;
  box-shadow: inset 0 0 0 2px var(--g-accent-2, #22d3ee);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.g-match3 .g-m3-cur.is-on { opacity: 1; }
.g-match3 .g-m3-float {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5%;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 900;
  color: var(--g-text, #eef0ff);
  text-shadow: 0 0 10px var(--g-accent, #7c5cff), 0 2px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: g-c-rise 0.8s ease-out forwards;
}

/* ---------- simon ---------- */
.g-simon .g-sm-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: calc(var(--g-radius, 18px) * 0.9);
  background: var(--g-panel, #1e2130);
  touch-action: manipulation;
}
.g-simon .g-sm-pad {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 1.1);
  background: currentColor;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.28);
  opacity: 0.42;
  filter: saturate(0.75);
  transition: opacity 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.g-simon .g-sm-p0 { color: var(--g-accent, #7c5cff); border-bottom-right-radius: 34%; }
.g-simon .g-sm-p1 { color: var(--g-accent-2, #22d3ee); border-bottom-left-radius: 34%; }
.g-simon .g-sm-p2 { color: #ffd166; border-top-right-radius: 34%; }
.g-simon .g-sm-p3 { color: #5aa9ff; border-top-left-radius: 34%; }
.g-simon .g-sm-pad svg { width: 36%; height: 36%; fill: rgba(10, 10, 20, 0.55); color: rgba(10, 10, 20, 0.55); }
.g-simon .g-sm-key {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(10, 10, 20, 0.6);
}
.g-simon .g-sm-board.is-input .g-sm-pad { opacity: 0.62; }
.g-simon .g-sm-board.is-input .g-sm-pad:hover { opacity: 0.78; }
.g-simon .g-sm-pad:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 3px; }
.g-simon .g-sm-pad.is-lit {
  opacity: 1;
  filter: saturate(1.15) brightness(1.15);
  transform: scale(0.97);
  box-shadow: 0 0 34px currentColor, 0 0 0 3px rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.g-simon .g-sm-pad.is-bad { opacity: 1; color: var(--g-danger, #ff4d6d); animation: g-shake 0.32s ease; }
.g-simon .g-sm-pad.is-want { opacity: 1; filter: none; box-shadow: 0 0 0 4px var(--g-text, #eef0ff), 0 0 26px currentColor; animation: g-pulse 0.6s ease-in-out infinite; }
.g-simon .g-sm-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--g-bg, #14161f);
  box-shadow: 0 0 0 6px var(--g-panel, #1e2130), 0 0 22px color-mix(in srgb, var(--g-accent, #7c5cff) 40%, transparent);
  pointer-events: none;
}
.g-simon .g-sm-hub b { font-size: 26px; font-size: clamp(20px, 6vw, 32px); font-weight: 900; font-variant-numeric: tabular-nums; }
.g-simon .g-sm-board.is-win .g-sm-hub { animation: g-bump 0.35s ease-out; }

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  .g-match3 .g-m3-layer { inset: 4px; }
  .g-simon .g-sm-board { gap: 9px; padding: 9px; }
  .g-match3 .g-m3-float { font-size: 18px; }
}

/* ---------- keyframes (set C only) ---------- */
@keyframes g-c-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-9deg) scale(1.06); } 75% { transform: rotate(9deg) scale(1.06); } }
@keyframes g-c-nope { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
@keyframes g-c-rise { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -28px; } }

@media (prefers-reduced-motion: reduce) {
  .g-match3 .g-m3-gem, .g-match3 .g-m3-in, .g-simon .g-sm-pad { transition-duration: 1ms !important; }
  .g-match3 .g-m3-gem.is-hint .g-m3-in, .g-simon .g-sm-pad.is-want { animation: none !important; }
}

/*
 * P2E mini-games — shared styles for merge, stack, memory, catch, math.
 * Theme with: --g-bg --g-panel --g-tile --g-tile-text --g-accent --g-accent-2
 *             --g-text --g-muted --g-danger --g-radius --g-font
 */

/* ---------- shell ---------- */
.g-root {
  --g-mgap: 10px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--g-radius, 18px);
  background: var(--g-bg, #14161f);
  color: var(--g-text, #eef0ff);
  font-family: var(--g-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.g-root *, .g-root *::before, .g-root *::after { box-sizing: border-box; }
.g-root [hidden] { display: none !important; }
.g-root:focus-visible { box-shadow: 0 0 0 3px var(--g-accent, #7c5cff); }

/* ---------- HUD ---------- */
.g-hud { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.g-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 10px;
  border-radius: calc(var(--g-radius, 18px) * 0.6);
  background: var(--g-panel, #1e2130);
}
.g-stat-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--g-muted, #8a8fa8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-stat-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.g-lives { display: flex; gap: 5px; height: 23px; align-items: center; }
.g-life {
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) scale(0.85);
  background: var(--g-danger, #ff4d6d);
  transition: opacity 0.2s, transform 0.2s;
}
.g-life.is-off { opacity: 0.18; transform: rotate(-45deg) scale(0.6); }

.g-bar {
  height: 6px;
  margin: -2px 0 10px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--g-panel, #1e2130);
}
.g-bar-fill {
  height: 100%;
  transform-origin: left center;
  background: var(--g-accent, #7c5cff);
  background: linear-gradient(90deg, var(--g-accent, #7c5cff), var(--g-accent-2, #22d3ee));
  transition: transform 0.1s linear;
}
.g-bar-fill.is-low { background: var(--g-danger, #ff4d6d); }

.g-cap {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--g-muted, #8a8fa8);
}
.g-cap.g-cap-cta { color: var(--g-text, #eef0ff); font-weight: 700; animation: g-pulse 1.6s ease-in-out infinite; }

/* ---------- buttons ---------- */
.g-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--g-accent, #7c5cff);
  background: linear-gradient(135deg, var(--g-accent, #7c5cff), var(--g-accent-2, #22d3ee));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
.g-btn:hover { filter: brightness(1.08); }
.g-btn:active { transform: translateY(1px) scale(0.98); }
.g-btn:disabled { opacity: 0.35; cursor: default; filter: none; transform: none; }
.g-btn:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-btn-sm { flex: 0 0 auto; font-size: 13px; padding: 8px 14px; align-self: center; }

/* ---------- overlays ---------- */
.g-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: inherit;
  background: rgba(10, 11, 18, 0.66);
  background: color-mix(in srgb, var(--g-bg, #14161f) 70%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: g-fade 0.2s ease both;
}
.g-overlay-tap { cursor: pointer; }
.g-ov-card {
  width: 100%;
  max-width: 300px;
  padding: 22px 20px;
  text-align: center;
  border-radius: var(--g-radius, 18px);
  background: var(--g-panel, #1e2130);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  animation: g-rise 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
.g-ov-title { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.g-ov-sub { margin: 8px 0 18px; font-size: 14px; color: var(--g-muted, #8a8fa8); }
.g-ov-score {
  margin: 6px 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-muted, #8a8fa8);
}
.g-ov-score b {
  display: block;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--g-text, #eef0ff);
}

/* ---------- canvas stage (stack, catch) ---------- */
.g-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-accent, #7c5cff) 16%, var(--g-panel, #1e2130)), var(--g-panel, #1e2130) 75%);
}
.g-stage::before { content: ""; display: block; padding-top: 120%; }
.g-catch .g-stage { cursor: grab; }
.g-catch .g-stage::before { padding-top: 125%; }
.g-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- merge ---------- */
.g-merge .g-hud .g-stat { flex-basis: 0; }
.g-mg-board {
  position: relative;
  touch-action: none;
  container-type: inline-size;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
  cursor: grab;
}
.g-mg-board::before { content: ""; display: block; padding-top: 100%; }
.g-mg-layer { position: absolute; inset: var(--g-mgap); }
.g-mg-cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--g-mgap); }
.g-mg-cell {
  border-radius: calc(var(--g-radius, 18px) * 0.45);
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--g-text, #eef0ff) 6%, transparent);
}
.g-mg-tile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc((100% - 3 * var(--g-mgap)) / 4);
  height: calc((100% - 3 * var(--g-mgap)) / 4);
  transform: translate(calc(var(--c, 0) * (100% + var(--g-mgap))), calc(var(--r, 0) * (100% + var(--g-mgap))));
  transition: transform 0.12s ease-in-out;
}
.g-mg-tile.g-mg-dying { z-index: 1; }
.g-mg-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 0.45);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 28px;
  font-size: 11cqw;
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.g-d3 .g-mg-in { font-size: 24px; font-size: 9cqw; }
.g-d4 .g-mg-in { font-size: 19px; font-size: 7.2cqw; }
.g-d5 .g-mg-in { font-size: 16px; font-size: 6cqw; }
.g-mg-new .g-mg-in { animation: g-pop-in 0.18s 0.1s ease-out both; }
.g-mg-merged .g-mg-in { animation: g-bump 0.2s ease-out; }

/* tile ramp: tile colour -> accent -> accent-2 (flat fallbacks first) */
.g-t2 .g-mg-in { background: var(--g-tile, #2a2e42); background: color-mix(in srgb, var(--g-accent, #7c5cff) 12%, var(--g-tile, #2a2e42)); }
.g-t4 .g-mg-in { background: var(--g-tile, #2a2e42); background: color-mix(in srgb, var(--g-accent, #7c5cff) 24%, var(--g-tile, #2a2e42)); }
.g-t8 .g-mg-in { background: var(--g-accent, #7c5cff); background: color-mix(in srgb, var(--g-accent, #7c5cff) 40%, var(--g-tile, #2a2e42)); }
.g-t16 .g-mg-in { background: var(--g-accent, #7c5cff); background: color-mix(in srgb, var(--g-accent, #7c5cff) 56%, var(--g-tile, #2a2e42)); }
.g-t32 .g-mg-in { background: var(--g-accent, #7c5cff); background: color-mix(in srgb, var(--g-accent, #7c5cff) 74%, var(--g-tile, #2a2e42)); }
.g-t64 .g-mg-in { background: var(--g-accent, #7c5cff); }
.g-t128 .g-mg-in { background: var(--g-accent, #7c5cff); background: color-mix(in srgb, var(--g-accent-2, #22d3ee) 25%, var(--g-accent, #7c5cff)); }
.g-t256 .g-mg-in { background: var(--g-accent-2, #22d3ee); background: color-mix(in srgb, var(--g-accent-2, #22d3ee) 50%, var(--g-accent, #7c5cff)); }
.g-t512 .g-mg-in { background: var(--g-accent-2, #22d3ee); background: color-mix(in srgb, var(--g-accent-2, #22d3ee) 75%, var(--g-accent, #7c5cff)); }
.g-t1024 .g-mg-in { background: var(--g-accent-2, #22d3ee); }
.g-t2048 .g-mg-in, .g-tmax .g-mg-in {
  background: var(--g-accent-2, #22d3ee);
  background: linear-gradient(135deg, var(--g-accent-2, #22d3ee), var(--g-accent, #7c5cff));
}
.g-t8 .g-mg-in, .g-t16 .g-mg-in, .g-t32 .g-mg-in, .g-t64 .g-mg-in, .g-t128 .g-mg-in, .g-t256 .g-mg-in,
.g-t512 .g-mg-in, .g-t1024 .g-mg-in, .g-t2048 .g-mg-in, .g-tmax .g-mg-in { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.g-t512 .g-mg-in, .g-t1024 .g-mg-in, .g-t2048 .g-mg-in, .g-tmax .g-mg-in {
  box-shadow: 0 0 18px var(--g-accent-2, #22d3ee), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 18px color-mix(in srgb, var(--g-accent-2, #22d3ee) 55%, transparent), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* ---------- memory ---------- */
.g-mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-mm-card {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 700px;
  border-radius: calc(var(--g-radius, 18px) * 0.55);
}
.g-mm-card::before { content: ""; display: block; padding-top: 118%; }
.g-mm-card:focus-visible { outline: 3px solid var(--g-text, #eef0ff); outline-offset: 2px; }
.g-mm-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.g-mm-card.is-up .g-mm-inner { transform: rotateY(180deg); }
.g-mm-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--g-radius, 18px) * 0.55);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.g-mm-back {
  background: var(--g-accent, #7c5cff);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 18%, transparent 19%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, var(--g-accent, #7c5cff), var(--g-accent-2, #22d3ee));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.g-mm-card:hover .g-mm-back { filter: brightness(1.08); }
.g-mm-front {
  transform: rotateY(180deg);
  background: var(--g-tile, #2a2e42);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.g-mm-front svg { width: 58%; height: 58%; display: block; }
.g-mm-c0 { color: var(--g-accent, #7c5cff); }
.g-mm-c1 { color: var(--g-accent-2, #22d3ee); }
.g-mm-c2 { color: #ffc94a; }
.g-mm-c3 { color: #3ddc97; }
.g-mm-c4 { color: var(--g-danger, #ff4d6d); }
.g-mm-c5 { color: var(--g-text, #eef0ff); }
.g-mm-card.is-done { cursor: default; }
.g-mm-card.is-done .g-mm-front { box-shadow: inset 0 0 0 2px var(--g-accent-2, #22d3ee); }
.g-mm-card.is-done svg { animation: g-bump 0.35s ease-out; }
.g-mm-card.is-miss .g-mm-front { box-shadow: inset 0 0 0 2px var(--g-danger, #ff4d6d); }
.g-mm-dealt .g-mm-card { animation: g-pop-in 0.28s ease-out both; }
.g-mm-dealt .g-mm-card:nth-child(4n + 2) { animation-delay: 0.03s; }
.g-mm-dealt .g-mm-card:nth-child(4n + 3) { animation-delay: 0.06s; }
.g-mm-dealt .g-mm-card:nth-child(4n + 4) { animation-delay: 0.09s; }

/* ---------- math ---------- */
.g-mt-q {
  position: relative;
  padding: 26px 12px;
  text-align: center;
  font-size: 40px;
  font-size: clamp(32px, 10vw, 52px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  border-radius: calc(var(--g-radius, 18px) * 0.75);
  background: var(--g-panel, #1e2130);
}
.g-mt-q.is-shake { animation: g-shake 0.32s ease; }
.g-mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.g-mt-ans {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 22px 8px;
  font: inherit;
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border-radius: calc(var(--g-radius, 18px) * 0.7);
  color: var(--g-tile-text, #eef0ff);
  background: var(--g-tile, #2a2e42);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.08s ease;
}
.g-mt-ans:hover { filter: brightness(1.1); }
.g-mt-ans:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.g-mt-ans:focus-visible { outline: 3px solid var(--g-accent, #7c5cff); outline-offset: 2px; }
.g-mt-ans.is-ok { color: #fff; background: var(--g-accent-2, #22d3ee); }
.g-mt-ans.is-bad { color: #fff; background: var(--g-danger, #ff4d6d); }
.g-mt-key {
  position: absolute;
  top: 7px;
  left: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--g-muted, #8a8fa8);
}
.g-mt-ans.is-ok .g-mt-key, .g-mt-ans.is-bad .g-mt-key { color: rgba(255, 255, 255, 0.75); }
.g-mt-float {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--g-danger, #ff4d6d);
  pointer-events: none;
  animation: g-float 0.9s ease-out forwards;
}

/* ---------- small screens ---------- */
@media (max-width: 380px) {
  .g-root { padding: 10px; --g-mgap: 7px; }
  .g-hud { gap: 6px; }
  .g-stat { padding: 5px 8px; }
  .g-stat-v { font-size: 17px; }
  .g-btn-sm { padding: 7px 11px; font-size: 12px; }
  .g-mm-grid { gap: 6px; }
  .g-mt-ans { padding: 18px 6px; font-size: 26px; }
}

/* ---------- keyframes ---------- */
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-rise { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes g-pop-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes g-bump { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes g-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes g-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes g-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }

@media (prefers-reduced-motion: reduce) {
  .g-root *, .g-root *::before, .g-root *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}